From 372d0aeadf1f460bcd4ecc452e43da33a898c65d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 28 Jul 2026 14:11:31 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=E7=84=A1=E6=96=99100=E5=80=8B=E3=81=AE?=
 =?UTF-8?q?=E5=8F=AF=E8=A6=96=E5=8C=96=E3=81=A8=E8=B2=B7=E3=81=84=E5=88=87?=
 =?UTF-8?q?=E3=82=8A=E8=A1=A8=E7=8F=BE=E3=81=AE=E7=B5=B1=E4=B8=80=EF=BC=88?=
 =?UTF-8?q?=E4=BD=9C=E6=A5=AD=E4=B8=AD=E3=81=AE=E3=83=81=E3=82=A7=E3=83=83?=
 =?UTF-8?q?=E3=82=AF=E3=83=9D=E3=82=A4=E3=83=B3=E3=83=88=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- スタジオに「無料100個」トグルとカードの「無料」バッジを追加。
  検索・カテゴリ・お気に入りとAND併用可
- 無料IDの生成スクリプトと照合テスト（880件のmanifestと100/100一致・重複ゼロを
  ビルド時とテストの両方で恒久検査）
- 統計バーの「¥0 あなたの月額」→「100 無料で使える数」（ja/en）。
  LPの「3つのプラン」表記も2プランに修正
- 件数だけを freeCount.ts に分離し、LP初期チャンクへのID混入を回避（実測で確認）

※ デザイン磨き込み(P2)と配布物整備(P3)が並行作業中のため、その途中経過を含む。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01YXb6DP2sELzRyZkqpe15p4
---
 .gitignore                     |   3 +
 LICENSE                        | 133 +++++++++++++
 docs/dist-README.md            | 213 +++++++++++++++++++++
 mcp/README.md                  |  86 +++++++--
 package.json                   |   9 +-
 scripts/build-free-ids.mjs     |  93 +++++++++
 scripts/build-release.mjs      | 331 ++++++++++++++++++++++++++++++++
 scripts/verify-release.mjs     | 337 +++++++++++++++++++++++++++++++++
 src/Studio.test.tsx            |  92 +++++++++
 src/Studio.tsx                 |  55 +++++-
 src/components/GalleryView.tsx |  11 ++
 src/lib/free.ts                |  20 ++
 src/pages/Landing.tsx          |  16 +-
 src/registry/freeCount.ts      |   7 +
 src/registry/freeIds.test.ts   |  40 ++++
 src/registry/freeIds.ts        | 106 +++++++++++
 16 files changed, 1512 insertions(+), 40 deletions(-)
 create mode 100644 LICENSE
 create mode 100644 docs/dist-README.md
 create mode 100644 scripts/build-free-ids.mjs
 create mode 100644 scripts/build-release.mjs
 create mode 100644 scripts/verify-release.mjs
 create mode 100644 src/Studio.test.tsx
 create mode 100644 src/lib/free.ts
 create mode 100644 src/registry/freeCount.ts
 create mode 100644 src/registry/freeIds.test.ts
 create mode 100644 src/registry/freeIds.ts

diff --git a/.gitignore b/.gitignore
index 81f7aa1..fe278b1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,3 +27,6 @@ public/r/
 
 # 静的HTMLは生成物（npm run html で作る）。6.7MB あるので配信物には含めない。
 public/html/
+
+# BOOTH 配布用の ZIP と展開ディレクトリ（node scripts/build-release.mjs で作る）
+release/
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..b1be03f
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,133 @@
+LP Section Studio ライセンス
+
+本製品には 2 つの版があります。適用される条件は版ごとに異なります。
+自分がどちらを持っているかは、同梱の components.json の "edition"
+（free / full）、または入手経路（無料 MCP か、BOOTH での購入か）で判断できます。
+
+
+================================================================
+【無料版】MCP サーバ経由で提供される 100 個
+================================================================
+
+・個人利用・非商用の範囲で利用できます。
+・利用者が作った成果物の所有権は、利用者にあります。
+・コンポーネント自体をそのまま再配布・再販することはできません。
+・商用利用（受託制作、自社プロダクト、収益を伴うウェブサイトを含む）
+  には、買い切り版のライセンスが必要です。
+
+
+================================================================
+【買い切り版】880 個（BOOTH で購入したパッケージ）
+================================================================
+
+購入者は、本製品に含まれるコンポーネント（ソースコード・静的HTML・
+レジストリJSON を含む）について、以下の範囲で利用できます。
+
+【できること】
+・商用・非商用を問わず、無制限の数のプロジェクトで利用すること
+・自身または自社のために制作するウェブサイト・アプリケーションに
+  組み込むこと
+・受託制作において、クライアントに納品する成果物に組み込むこと
+・コンポーネントを改変して利用すること
+
+【できないこと】
+・本製品そのもの、またはその一部を、コンポーネント集・テンプレート集
+  として再配布・再販すること
+・本製品を、これと競合する製品（UIコンポーネント集、UIキット等）の
+  素材として利用すること
+・購入していない第三者に、ソースコード一式を共有すること
+
+【購入者の範囲】
+1ライセンスにつき、個人1名または法人内の1チーム（5名まで）が
+利用できます。
+
+
+================================================================
+【保証】（無料版・買い切り版の両方に適用）
+================================================================
+
+本製品は現状有姿で提供されます。特定目的への適合性を含め、明示・
+黙示を問わず、いかなる保証も行いません。本製品の利用により生じた
+いかなる損害についても、作者は責任を負いません。
+
+
+================================================================
+【第三者ソフトウェア】
+================================================================
+
+本製品のコンポーネントは react / lucide-react / clsx / tailwind-merge、
+および Tailwind CSS を前提としています。これらは本製品には含まれず、
+それぞれの配布元のライセンス（いずれも MIT）が適用されます。
+
+
+--- English ---
+
+LP Section Studio License
+
+This product comes in two editions. The applicable terms differ by edition.
+You can tell which one you have from the "edition" field in the bundled
+components.json (free / full), or from how you obtained it (the free MCP
+server, or a purchase on BOOTH).
+
+
+================================================================
+[Free edition] The 100 components served through the MCP server
+================================================================
+
+- May be used for personal, non-commercial purposes only.
+- You own the work you create with it.
+- You may not redistribute or resell the components themselves.
+- Commercial use (including client work, in-house products, and any
+  revenue-generating website) requires a paid-edition license.
+
+
+================================================================
+[Paid edition] The 880 components (the package purchased on BOOTH)
+================================================================
+
+The purchaser may use the components included in this product (including
+source code, static HTML, and registry JSON) within the following scope.
+
+[You may]
+- Use them in an unlimited number of projects, commercial or not
+- Incorporate them into websites and applications you build for yourself
+  or for your own company
+- Incorporate them into deliverables handed to clients in contract work
+- Modify the components and use the modified versions
+
+[You may not]
+- Redistribute or resell this product, or any part of it, as a component
+  collection or template collection
+- Use this product as material for a competing product (a UI component
+  collection, UI kit, or similar)
+- Share the full source with third parties who have not purchased it
+
+[Scope of the license]
+One license covers one individual, or one team within a company
+(up to 5 people).
+
+
+================================================================
+[Warranty] (applies to both the free and paid editions)
+================================================================
+
+This product is provided "as is". No warranty of any kind, express or
+implied, including fitness for a particular purpose, is given. The author
+is not liable for any damages arising from the use of this product.
+
+
+================================================================
+[Third-party software]
+================================================================
+
+The components assume react / lucide-react / clsx / tailwind-merge and
+Tailwind CSS. These are not included in this product and remain subject to
+their own licenses (all MIT).
+
+
+注記 / Note:
+本ライセンスは日本語版を正文とします。英訳は参考であり、日本語版との
+間に相違がある場合は日本語版が優先します。
+The Japanese text is the governing version. The English translation is
+provided for reference; in case of any discrepancy, the Japanese text
+prevails.
diff --git a/docs/dist-README.md b/docs/dist-README.md
new file mode 100644
index 0000000..c3b0c5d
--- /dev/null
+++ b/docs/dist-README.md
@@ -0,0 +1,213 @@
+# LP Section Studio
+
+検証済み UI コンポーネント **880個**。React / TypeScript / Tailwind CSS。
+うち **397個** は React 無しの静的 HTML としてそのまま使えます。
+
+このファイルは購入者向けの導入手順です。ライセンスは同梱の `LICENSE` を参照してください。
+
+---
+
+## 入っているもの
+
+| ディレクトリ | 中身 |
+| --- | --- |
+| `components/` | React / TypeScript ソース **880件**（`demos/`）＋ 動かすのに要る依存一式 |
+| `html/` | 静的 HTML **880件** ＋ `index.json`（どれが React 不要かの判定つき） |
+| `registry/` | shadcn 互換の配信 JSON **885件** |
+| `mcp/` | MCP サーバ（全部入り版・880件収録） |
+| `studio/` | ビルド済みスタジオ（検索・プレビュー・コピー画面） |
+
+---
+
+## 1. まず動かしてみる（1分・何もインストールしない）
+
+`html/` の中の HTML を1つ、ブラウザにドラッグして開いてください。
+
+```
+html/offers-value-stack-offer.html
+```
+
+React も Node も要りません。Tailwind を CDN から1行読み込み、その下に
+このコンポーネント集のデザイントークン（`bg-card` などの色定義）を
+埋め込んであるので、ファイル単体で意図した見た目になります。
+
+**ネット接続が要ります。** Tailwind を CDN から読むためです。オフラインで
+使う場合や本番に載せる場合は、`<script src="https://cdn.tailwindcss.com">`
+を自分でビルドした Tailwind の CSS に差し替えてください。その際
+`components/theme/tailwind.config.js` を使うと同じ色が出ます。
+
+### どれが React 不要か
+
+`html/index.json` に全件の判定が入っています。
+
+```json
+{ "total": 880, "standalone": 397, "items": [ { "id": "...", "standalone": true } ] }
+```
+
+- `standalone: true` … **397件**。状態を持たないので、HTML を貼るだけで完成します。
+- `standalone: false` … 483件。開閉・入力・アニメーションなど動きを持つため、
+  静的版は**見た目だけ**になります（操作は動きません）。React 版を使ってください。
+
+---
+
+## 2. React プロジェクトに入れる
+
+### 必要なパッケージ
+
+```bash
+npm install react react-dom lucide-react clsx tailwind-merge class-variance-authority
+npm install -D tailwindcss postcss autoprefixer
+```
+
+### ファイルの置き方
+
+`components/` の中身をプロジェクトの `src/` に写します。
+
+```
+components/demos/**/*.tsx   →  src/registry/demos/**/*.tsx  （好きな場所でよい）
+components/ui/*.tsx         →  src/components/ui/*.tsx
+components/lib/*.ts         →  src/lib/*.ts
+components/registry/*       →  src/registry/*
+```
+
+各コンポーネントは `@/components/ui/...` や `@/lib/utils` を参照します。
+`@` を `src` に向けてください。
+
+`tsconfig.json`:
+
+```json
+{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] } } }
+```
+
+Vite を使う場合は `vite.config.ts` にも同じ別名が要ります。
+
+```ts
+resolve: { alias: { "@": path.resolve(__dirname, "./src") } }
+```
+
+### Tailwind の設定（重要）
+
+`bg-card` `text-muted-foreground` `bg-primary` などは **Tailwind の標準クラス
+ではなく、このコンポーネント集のデザイントークン**です。定義を入れないと
+色が当たりません。880件のうち430件がこれらを使っています。
+
+1. `components/theme/tailwind.config.js` の `theme.extend` を自分の
+   `tailwind.config.js` にマージする
+2. `components/theme/tokens.css` の `:root` と `.dark` のブロックを、
+   自分のエントリ CSS に写す
+
+この2つで、ライト／ダーク両対応の色が揃います。数値は WCAG のコントラスト
+基準（1.4.3 の 4.5:1、1.4.11 の 3:1）を満たすように調整済みです。勝手に
+変えると基準を割ることがあります。
+
+### 1個だけ欲しいとき
+
+各ファイルは自己完結しています。`components/demos/` から `.tsx` を1つ
+コピーし、`ui/` と `lib/utils.ts` を用意すれば動きます。外部画像は
+使っていません。
+
+---
+
+## 3. スタジオを開く（検索・プレビュー・コピー）
+
+880件を一覧・検索し、その場でプレビューしてソースをコピーできる画面です。
+
+**ローカルの HTTP サーバ越しに開いてください。** `studio/index.html` を
+ファイルとして直接開くと、CSS と JS の参照が `/assets/...` という絶対パスの
+ため読み込めません（`file:///assets/...` を探しに行って失敗します）。文字は
+出ますが、スタイルが当たらず操作もできない状態になります。
+
+```bash
+cd studio
+python3 -m http.server 8080
+#  → http://localhost:8080/ をブラウザで開く
+```
+
+Node があるなら:
+
+```bash
+npx --yes serve studio -l 8080
+```
+
+---
+
+## 4. MCP サーバを繋ぐ（Claude Code / Cursor から直接取り出す）
+
+880件を `search_components` → `get_component` / `get_component_html` の順で
+取り出せます。生成ではなく、検査済みの現物がそのまま返ります。
+
+```bash
+cd mcp
+npm install
+```
+
+`npm install` が要るのは `@modelcontextprotocol/sdk` と `zod` のためです
+（`node_modules` は同梱していません）。
+
+### Claude Code
+
+```bash
+claude mcp add lp-section-studio -- node /絶対パス/mcp/src/index.js
+```
+
+### 設定ファイルに直接書く場合
+
+Claude Desktop は `claude_desktop_config.json`、Cursor は `.cursor/mcp.json`、
+Claude Code はプロジェクト直下の `.mcp.json` です。
+
+```json
+{
+  "mcpServers": {
+    "lp-section-studio": {
+      "command": "node",
+      "args": ["/絶対パス/mcp/src/index.js"]
+    }
+  }
+}
+```
+
+パスは**絶対パス**にしてください。MCP クライアントは任意の作業ディレクトリ
+からサーバを起動するため、相対パスでは見つかりません。
+
+詳しいツールの説明は `mcp/README.md` にあります。
+
+---
+
+## 5. shadcn レジストリとして取り込む
+
+`registry/` は shadcn 互換の JSON です。ローカルに配信すれば
+`npx shadcn add` で取り込めます。
+
+```bash
+python3 -m http.server 8081 --directory registry
+npx shadcn@latest add http://localhost:8081/wafu-ryokan-hero.json
+```
+
+依存する `Button` / `Badge` / `cn` も一緒に入ります。
+
+---
+
+## 品質について
+
+880件すべてが、以下の4つの機械検査を通っています。
+
+| 検査 | 内容 |
+| --- | --- |
+| axe-core | 構造アクセシビリティ。違反 0 件 |
+| コントラスト | トークン定義を WCAG の相対輝度で計算。全組み合わせが AA |
+| キーボード操作 | 対話部品がキーボードで到達できるか |
+| 横スクロール | 実ブラウザ・幅375px でページが横に破れないか |
+
+---
+
+## 依存
+
+`react` / `lucide-react` / `clsx` + `tailwind-merge` / `class-variance-authority`
+と、同梱の UI プリミティブのみです。外部画像 URL は使っていません。
+
+---
+
+## ライセンス
+
+同梱の `LICENSE` を参照してください。買い切り版（このパッケージ）は
+商用利用できます。コンポーネント自体の再配布・再販はできません。
diff --git a/mcp/README.md b/mcp/README.md
index 79f5919..664f554 100644
--- a/mcp/README.md
+++ b/mcp/README.md
@@ -19,37 +19,68 @@
 
 ## 導入
 
+> **npm には未公開です。** `npx lp-section-studio-mcp` は現時点では動きません
+> （レジストリに存在しないため 404 になります）。下の手順で入れてください。
+
+### 1. 依存を入れる
+
+`node_modules` は同梱していないので、一度だけ入れます。
+
 ```bash
-npx lp-section-studio-mcp
+cd mcp
+npm install
 ```
 
-Claude Code の場合:
+必要なのは `@modelcontextprotocol/sdk` と `zod` の2つだけです。
+
+### 2. クライアントに登録する
+
+Claude Code:
 
 ```bash
-claude mcp add lp-section-studio -- npx -y lp-section-studio-mcp
+claude mcp add lp-section-studio -- node /絶対パス/mcp/src/index.js
 ```
 
-`.mcp.json` に直接書く場合:
+設定ファイルに直接書く場合（Claude Desktop は `claude_desktop_config.json`、
+Cursor は `.cursor/mcp.json`、Claude Code はプロジェクト直下の `.mcp.json`）:
 
 ```json
 {
   "mcpServers": {
     "lp-section-studio": {
-      "command": "npx",
-      "args": ["-y", "lp-section-studio-mcp"]
+      "command": "node",
+      "args": ["/絶対パス/mcp/src/index.js"]
     }
   }
 }
 ```
 
+パスは**絶対パス**にしてください。MCP クライアントは任意の作業ディレクトリから
+サーバを起動するため、相対パスでは見つかりません。
+
+<details>
+<summary>npm に公開したあとの入れ方（公開するまで動きません）</summary>
+
+```bash
+npx lp-section-studio-mcp
+claude mcp add lp-section-studio -- npx -y lp-section-studio-mcp
+```
+
+</details>
+
 ## ツール
 
-| ツール | 用途 |
-| --- | --- |
-| `search_components` | 名前・説明・タグで検索。`standalone_only` で React 不要のものだけに絞れる |
-| `get_component` | React / TypeScript のソースを返す |
-| `get_component_html` | React 抜きの静的 HTML を返す |
-| `list_categories` | カテゴリと件数の一覧 |
+| ツール | 引数 | 返り値 |
+| --- | --- | --- |
+| `search_components` | `query` / `category` / `standalone_only` / `limit`（既定20・最大50）すべて任意 | 一致した件数と、`id`・名前・カテゴリ・説明の一覧（テキスト） |
+| `get_component` | `id`（必須） | React / TypeScript のソースを ```` ```tsx ```` で囲んだテキスト |
+| `get_component_html` | `id`（必須） | React 抜きの静的 HTML を ```` ```html ```` で囲んだテキスト |
+| `list_categories` | なし | カテゴリごとの件数（うち React 不要が何件か付き） |
+
+`query` は `id`・名前・説明・タグへの部分一致で、日本語でも英語でも引けます。
+`standalone_only: true` を付けると、React 不要（静的 HTML を貼るだけで完成する）
+ものだけに絞れます。存在しない `id` を渡した場合は、エラーとして
+「見つかりません」というテキストが返ります。
 
 ### 使い方の例
 
@@ -57,23 +88,36 @@ claude mcp add lp-section-studio -- npx -y lp-section-studio-mcp
 価格表のセクションを探して、React を使わない形で入れて
 ```
 
-`search_components({ query: "価格", standalone_only: true })` →
-`get_component_html({ id: "offers-comparison-matrix" })` の順に呼ばれ、
+`search_components({ query: "価格", standalone_only: true })` で
+`offers-value-stack-offer` などが返り、続けて
+`get_component_html({ id: "offers-value-stack-offer" })` を呼ぶと、
 そのまま貼れる HTML が返ります。
 
 ## 収録内容
 
-この無料版には **100 個**が入っています。すべて React 不要で動くものを、
-28 カテゴリに散らして選んでいます（1 カテゴリ最大 4 個）。
+版によって収録数が違います。手元のものがどちらかは、
+`data/components.json` の `edition` で分かります。
 
-全 **880 個**（うち React 不要が 397 個）は買い切り版に収録しています。
+| 版 | `edition` | 収録数 |
+| --- | --- | --- |
+| 無料版（MCP のみ） | `free` | **100 個**。すべて React 不要。28 カテゴリに散らして選択（1カテゴリ最大4個） |
+| 買い切り版 | `full` | **880 個**（うち React 不要が 397 個）。39 カテゴリ |
 
 ## 依存
 
-コンポーネントの依存は `react` / `lucide-react` / `clsx` + `tailwind-merge` と、
-同梱の UI プリミティブのみです。外部画像も使っていないので、ファイルを 1 つ
-置けば動きます。静的 HTML 版は Tailwind だけで動きます。
+コンポーネントの依存は `react` / `lucide-react` / `clsx` + `tailwind-merge` /
+`class-variance-authority` と、同梱の UI プリミティブのみです。外部画像も
+使っていないので、ファイルを 1 つ置けば動きます。
+
+静的 HTML 版は Tailwind だけで動きますが、`bg-card` `text-muted-foreground`
+`bg-primary` などは**このコンポーネント集のデザイントークン**で、素の Tailwind
+には存在しません。買い切り版の HTML はこの定義を `<head>` に埋め込んだ状態で
+配布しているのでそのまま表示されます。自分でトークンを組み込む場合は、
+買い切り版の `components/theme/` にある `tailwind.config.js` と `tokens.css`
+を使ってください。
 
 ## ライセンス
 
-同梱の `LICENSE` を参照してください。
+同梱の `LICENSE` を参照してください。無料版（`edition: free` の 100 個）は
+個人利用・非商用の範囲、買い切り版（`edition: full` の 880 個）は商用利用可
+です。いずれもコンポーネント自体の再配布・再販はできません。
diff --git a/package.json b/package.json
index bebbac2..1aa9cec 100644
--- a/package.json
+++ b/package.json
@@ -5,17 +5,18 @@
   "type": "module",
   "description": "自分専用の無料コンポーネント・スタジオ（21st.dev の代替）",
   "scripts": {
-    "predev": "node scripts/build-manifest.mjs",
+    "predev": "node scripts/build-manifest.mjs && node scripts/build-free-ids.mjs",
     "dev": "vite",
-    "build": "npm run registry && npm run manifest && tsc -b && npm run build:client && npm run build:server && npm run prerender",
+    "build": "npm run registry && npm run manifest && npm run freeids && tsc -b && npm run build:client && npm run build:server && npm run prerender",
     "build:client": "vite build",
     "build:server": "vite build --ssr src/entry-server.tsx --outDir dist-ssr --logLevel warn",
     "prerender": "node scripts/prerender.mjs",
     "preview": "vite preview",
-    "typecheck": "node scripts/build-manifest.mjs && tsc -b --noEmit",
+    "typecheck": "node scripts/build-manifest.mjs && node scripts/build-free-ids.mjs && tsc -b --noEmit",
     "registry": "node scripts/build-registry.mjs",
     "manifest": "node scripts/build-manifest.mjs",
-    "test": "node scripts/build-manifest.mjs && node scripts/check-contrast.mjs --quiet && vitest run",
+    "freeids": "node scripts/build-free-ids.mjs",
+    "test": "node scripts/build-manifest.mjs && node scripts/build-free-ids.mjs && node scripts/check-contrast.mjs --quiet && vitest run",
     "check:contrast": "node scripts/check-contrast.mjs",
     "check:overflow": "node scripts/build-manifest.mjs && node scripts/check-overflow.mjs",
     "html": "node scripts/build-manifest.mjs && node scripts/build-static-html.mjs",
diff --git a/scripts/build-free-ids.mjs b/scripts/build-free-ids.mjs
new file mode 100644
index 0000000..382ef1c
--- /dev/null
+++ b/scripts/build-free-ids.mjs
@@ -0,0 +1,93 @@
+#!/usr/bin/env node
+/**
+ * build-free-ids.mjs
+ *
+ * 無料版（MCP に同梱する 100 個）の **ID だけ** を抜き出した軽量な
+ * `src/registry/freeIds.ts` と、件数だけの `src/registry/freeCount.ts` を生成する。
+ *
+ * 元データの `mcp/data/components.json` は HTML 本体を含んで 1.1MB あるため、
+ * フロントから直接 import してはいけない（初期バンドルが肥大する）。
+ * ここで ID の一覧だけに落としてから、スタジオがそれを参照する。
+ *
+ * 件数を別ファイルに分けているのは manifest.ts / stats.generated.ts と同じ理由で、
+ * 数字しか使わない LP が ID 100 件を初期チャンクに巻き込まないようにするため
+ * （両方を import する面があると、共有モジュールごと入口チャンクに載る）。
+ *
+ * 生成のたびに「無料100個の ID が manifest に実在するか」も照合し、
+ * 食い違いがあればエラー終了する（生成物が黙って腐らないように）。
+ *
+ * 使い方: node scripts/build-free-ids.mjs
+ * 前提:   先に scripts/build-manifest.mjs が走っていること（照合に使う）。
+ */
+import { readFileSync, writeFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const root = join(dirname(fileURLToPath(import.meta.url)), "..");
+
+/** 自動生成された manifest.ts から ID 一覧を読む（JSON リテラル部分を切り出す） */
+function readManifestIds() {
+  const src = readFileSync(join(root, "src", "registry", "manifest.ts"), "utf-8");
+  const entries = JSON.parse(
+    src.slice(src.indexOf("= [") + 2, src.lastIndexOf("]") + 1)
+  );
+  return new Set(entries.map((e) => e.id));
+}
+
+const bundle = JSON.parse(
+  readFileSync(join(root, "mcp", "data", "components.json"), "utf-8")
+);
+const manifestIds = readManifestIds();
+
+const ids = [...new Set(bundle.items.map((i) => i.id))].sort();
+
+// 照合 1: 重複が無いこと
+if (ids.length !== bundle.items.length) {
+  console.error(
+    `✗ mcp/data/components.json に重複した ID があります（${bundle.items.length} 件中 ${ids.length} 種）`
+  );
+  process.exit(1);
+}
+
+// 照合 2: 件数が included と一致すること
+if (bundle.included !== ids.length) {
+  console.error(
+    `✗ included (${bundle.included}) と items の件数 (${ids.length}) が一致しません`
+  );
+  process.exit(1);
+}
+
+// 照合 3: 全 ID が registry（manifest）に実在すること
+const missing = ids.filter((id) => !manifestIds.has(id));
+if (missing.length > 0) {
+  console.error(
+    `✗ registry に存在しない ID が ${missing.length} 件あります:\n  ${missing.join("\n  ")}`
+  );
+  process.exit(1);
+}
+
+const header = `// このファイルは scripts/build-free-ids.mjs により自動生成されます。直接編集しないでください。
+// 元データ: mcp/data/components.json（無料版 = MCP に同梱する 100 個）
+`;
+
+writeFileSync(
+  join(root, "src", "registry", "freeIds.ts"),
+  `${header}
+/** 無料版に含まれるコンポーネントの ID（manifest の id と同じ体系） */
+export const FREE_IDS: readonly string[] = ${JSON.stringify(ids, null, 2)};
+`
+);
+
+writeFileSync(
+  join(root, "src", "registry", "freeCount.ts"),
+  `${header}// 件数だけを使う面（LP のスタットバンド等）はこちらを読む。
+// ID 一覧を初期チャンクに載せないためにファイルを分けている。
+
+/** 無料版に含まれるコンポーネント数 */
+export const FREE_EDITION_COUNT = ${ids.length};
+`
+);
+
+console.log(
+  `✓ 無料版の ID 一覧を生成しました: ${ids.length} 件 → src/registry/freeIds.ts / freeCount.ts`
+);
diff --git a/scripts/build-release.mjs b/scripts/build-release.mjs
new file mode 100644
index 0000000..30b3736
--- /dev/null
+++ b/scripts/build-release.mjs
@@ -0,0 +1,331 @@
+/**
+ * BOOTH 配布用の ZIP を作る。
+ *
+ * docs/booth-listing.md の「配布物の構成」をそのまま形にしたもの。
+ *
+ *   release/lp-section-studio-v1.0.0.zip
+ *   ├─ README.md              使い方・導入手順（docs/dist-README.md から）
+ *   ├─ LICENSE                ライセンス条文（リポジトリ root の LICENSE）
+ *   ├─ components/            React/TypeScript ソース 880件 + 依存プリミティブ
+ *   ├─ html/                  静的HTML 880件 + index.json
+ *   ├─ registry/              shadcn 互換 JSON 885件
+ *   ├─ mcp/                   MCPサーバ（全部入り版・880件）
+ *   └─ studio/                ビルド済みスタジオ
+ *
+ * 事前に必要なもの（無ければ何を実行すべきか出して止まる）:
+ *
+ *   npm run html       → public/html/（静的HTML 880件）
+ *   npm run registry   → public/r/（shadcn 配信JSON）
+ *   npm run build      → dist/（スタジオ）
+ *
+ * 使い方:
+ *
+ *   node scripts/build-release.mjs
+ *   node scripts/build-release.mjs --version 1.1.0
+ *   node scripts/build-release.mjs --keep-staging   ZIP 後も展開ディレクトリを残す
+ *
+ * 検証は scripts/verify-release.mjs が担当する（中身の件数・禁止物・実描画）。
+ */
+import {
+  existsSync,
+  mkdirSync,
+  rmSync,
+  readdirSync,
+  readFileSync,
+  writeFileSync,
+  copyFileSync,
+  statSync,
+} from "node:fs";
+import { join, resolve, dirname, relative } from "node:path";
+import { execFileSync } from "node:child_process";
+import { pathToFileURL } from "node:url";
+
+const ROOT = resolve(import.meta.dirname, "..");
+const arg = (name, fallback) => {
+  const i = process.argv.indexOf(`--${name}`);
+  return i === -1 ? fallback : process.argv[i + 1];
+};
+const VERSION = arg("version", "1.0.0");
+const KEEP_STAGING = process.argv.includes("--keep-staging");
+const NAME = `lp-section-studio-v${VERSION}`;
+const OUT_DIR = resolve(ROOT, "release");
+const STAGE = join(OUT_DIR, NAME);
+
+// ──────────────────────────────────────────────────────────────────────────
+// 前提チェック
+// ──────────────────────────────────────────────────────────────────────────
+
+const need = [
+  ["public/html/index.json", "npm run html"],
+  ["public/r", "npm run registry"],
+  ["dist/index.html", "npm run build"],
+  ["LICENSE", "（リポジトリ root の LICENSE が必要）"],
+  ["docs/dist-README.md", "（配布物に同梱する README が必要）"],
+];
+const missing = need.filter(([p]) => !existsSync(resolve(ROOT, p)));
+if (missing.length > 0) {
+  console.error("配布物の材料が足りません:\n");
+  for (const [p, how] of missing) console.error(`  ${p}  ← ${how}`);
+  process.exit(1);
+}
+
+// ──────────────────────────────────────────────────────────────────────────
+// 静的HTML への Tailwind 設定の注入
+//
+// 生成された静的HTML は cdn.tailwindcss.com を1行読むだけになっているが、
+// bg-card / text-muted-foreground のような**このプロジェクト固有のトークン**は
+// 素の Tailwind には存在しない。実測したところ 880 件中 430 件がこれらを使って
+// おり、そのままではその分の色が一切当たらない（bg-card → transparent）。
+//
+// そこで配布時に、tailwind.config.js の extend と src/index.css の :root/.dark を
+// HTML の <head> に埋め込む。Play CDN が公式に用意している設定方法で、
+// 「Tailwind を1行読むだけ」という売り文句を保ったまま色が正しく出る。
+//
+// 値は tailwind.config.js と src/index.css から毎回読み直すので、
+// トークンを直したら再生成するだけで配布物にも反映される。
+// ──────────────────────────────────────────────────────────────────────────
+
+/** CSS から `selector { ... }` の中身を括弧の対応を数えて取り出す */
+function extractCssBlock(css, selector) {
+  const at = css.indexOf(selector);
+  if (at === -1) return null;
+  const open = css.indexOf("{", at);
+  if (open === -1) return null;
+  let depth = 0;
+  for (let i = open; i < css.length; i++) {
+    if (css[i] === "{") depth++;
+    else if (css[i] === "}") {
+      depth--;
+      if (depth === 0) return css.slice(open + 1, i);
+    }
+  }
+  return null;
+}
+
+/** CSS コメントを落として1行1宣言に整える */
+function tidyDeclarations(body, indent) {
+  return body
+    .replace(/\/\*[\s\S]*?\*\//g, "")
+    .split(";")
+    .map((s) => s.trim())
+    .filter(Boolean)
+    .map((s) => `${indent}${s};`)
+    .join("\n");
+}
+
+async function buildHeadInjection() {
+  const cfg = (await import(pathToFileURL(resolve(ROOT, "tailwind.config.js")).href))
+    .default;
+  const css = readFileSync(resolve(ROOT, "src/index.css"), "utf-8");
+  const root = extractCssBlock(css, ":root");
+  const dark = extractCssBlock(css, ".dark");
+  if (!root || !dark) {
+    throw new Error("src/index.css から :root / .dark を取り出せませんでした");
+  }
+  const config = JSON.stringify(
+    { darkMode: cfg.darkMode, theme: { extend: cfg.theme.extend } },
+    null,
+    2
+  )
+    .split("\n")
+    .map((l, i) => (i === 0 ? l : `      ${l}`))
+    .join("\n");
+
+  return `    <!-- このコンポーネント集のデザイントークン。
+         bg-card / text-muted-foreground などは素の Tailwind には無いので、
+         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->
+    <script>
+      tailwind.config = ${config};
+    </script>
+    <style>
+      :root {
+${tidyDeclarations(root, "        ")}
+      }
+      .dark {
+${tidyDeclarations(dark, "        ")}
+      }
+      * { border-color: hsl(var(--border)); }
+      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }
+    </style>
+`;
+}
+
+/** <head> の末尾に設定を差し込む。既に入っていれば何もしない。 */
+function injectHead(html, injection) {
+  if (html.includes("tailwind.config")) return html;
+  return html.replace("  </head>", `${injection}  </head>`);
+}
+
+// ──────────────────────────────────────────────────────────────────────────
+// コピーのヘルパー
+// ──────────────────────────────────────────────────────────────────────────
+
+/** 顧客に渡してはいけないもの。ここに一致する名前は絶対にコピーしない。 */
+const NEVER_COPY = new Set([
+  "node_modules",
+  ".git",
+  ".env",
+  ".env.local",
+  ".DS_Store",
+  ".claude",
+  "package-lock.json",
+]);
+
+let copied = 0;
+
+function copyTree(from, to, { filter } = {}) {
+  mkdirSync(to, { recursive: true });
+  for (const name of readdirSync(from)) {
+    if (NEVER_COPY.has(name) || name.endsWith(".tsbuildinfo") || name.endsWith(".log")) {
+      continue;
+    }
+    const src = join(from, name);
+    const dst = join(to, name);
+    if (statSync(src).isDirectory()) {
+      if (filter && !filter(src, true)) continue;
+      copyTree(src, dst, { filter });
+    } else {
+      if (filter && !filter(src, false)) continue;
+      mkdirSync(dirname(dst), { recursive: true });
+      copyFileSync(src, dst);
+      copied++;
+    }
+  }
+}
+
+function copyOne(from, to) {
+  mkdirSync(dirname(to), { recursive: true });
+  copyFileSync(resolve(ROOT, from), to);
+  copied++;
+}
+
+const count = (dir, ext) =>
+  existsSync(dir) ? readdirSync(dir).filter((f) => f.endsWith(ext)).length : 0;
+
+// ──────────────────────────────────────────────────────────────────────────
+// 組み立て
+// ──────────────────────────────────────────────────────────────────────────
+
+console.log(`${NAME} を組み立てます…\n`);
+rmSync(STAGE, { recursive: true, force: true });
+mkdirSync(STAGE, { recursive: true });
+
+const injection = await buildHeadInjection();
+
+// --- README / LICENSE ---
+copyOne("docs/dist-README.md", join(STAGE, "README.md"));
+copyOne("LICENSE", join(STAGE, "LICENSE"));
+
+// --- components/ : 880件 + それが import する依存一式 ---
+// demos は「@/components/ui/*」「@/lib/utils」「@/registry」を参照するので、
+// それらを同じ木に入れておかないと買った側でコンパイルが通らない。
+copyTree(resolve(ROOT, "src/registry/demos"), join(STAGE, "components/demos"), {
+  filter: (p, isDir) => isDir || p.endsWith(".tsx"),
+});
+copyTree(resolve(ROOT, "src/components/ui"), join(STAGE, "components/ui"));
+copyOne("src/lib/utils.ts", join(STAGE, "components/lib/utils.ts"));
+copyOne("src/lib/i18n.ts", join(STAGE, "components/lib/i18n.ts"));
+copyOne("src/registry/types.ts", join(STAGE, "components/registry/types.ts"));
+copyOne("src/registry/i18n.ts", join(STAGE, "components/registry/i18n.ts"));
+copyTree(
+  resolve(ROOT, "src/registry/i18n.parts"),
+  join(STAGE, "components/registry/i18n.parts")
+);
+// demos は `import type { DemoMeta } from "@/registry"` と書く。スタジオ本体の
+// index.ts は import.meta.glob（Vite 専用）を使うので、型だけを再輸出する。
+writeFileSync(
+  join(STAGE, "components/registry/index.ts"),
+  `// demos が参照するのは型だけなので、型だけを再輸出する。\n` +
+    `export type { DemoMeta, RegistryEntry, ManifestEntry } from "./types";\n`
+);
+copied++;
+// bg-card / text-muted-foreground などは Tailwind の標準クラスではない。
+// 買った側のプロジェクトでも同じ色を出せるよう、トークンの定義そのものを渡す。
+copyOne("tailwind.config.js", join(STAGE, "components/theme/tailwind.config.js"));
+copyOne("src/index.css", join(STAGE, "components/theme/tokens.css"));
+
+const demoCount = readdirSync(join(STAGE, "components/demos"), { recursive: true })
+  .filter((f) => String(f).endsWith(".tsx"))
+  .length;
+
+// --- html/ : 880件 + index.json（Tailwind 設定を注入したもの） ---
+const htmlSrc = resolve(ROOT, "public/html");
+const htmlDst = join(STAGE, "html");
+mkdirSync(htmlDst, { recursive: true });
+let htmlCount = 0;
+for (const f of readdirSync(htmlSrc)) {
+  if (f.endsWith(".html")) {
+    writeFileSync(join(htmlDst, f), injectHead(readFileSync(join(htmlSrc, f), "utf-8"), injection));
+    htmlCount++;
+  } else if (f === "index.json") {
+    copyFileSync(join(htmlSrc, f), join(htmlDst, f));
+  }
+}
+copied += htmlCount + 1;
+
+// --- registry/ : shadcn 互換 JSON ---
+copyTree(resolve(ROOT, "public/r"), join(STAGE, "registry"));
+
+// --- mcp/ : 全部入り版 ---
+// build-mcp-bundle.mjs の出力先は mcp/data/components.json 固定なので、
+// リポジトリの無料版データを退避 → --all で作る → 取り出す → 元に戻す。
+const freeData = resolve(ROOT, "mcp/data/components.json");
+const backup = existsSync(freeData) ? readFileSync(freeData) : null;
+let fullBundle;
+try {
+  execFileSync("node", ["scripts/build-mcp-bundle.mjs", "--all"], {
+    cwd: ROOT,
+    stdio: ["ignore", "pipe", "inherit"],
+  });
+  fullBundle = JSON.parse(readFileSync(freeData, "utf-8"));
+} finally {
+  if (backup) writeFileSync(freeData, backup);
+}
+if (fullBundle.edition !== "full") {
+  throw new Error(`MCP バンドルが full になっていません: ${fullBundle.edition}`);
+}
+// MCP が返す HTML も配布物と同じものにする
+for (const item of fullBundle.items) {
+  if (item.html) item.html = injectHead(item.html, injection);
+}
+copyTree(resolve(ROOT, "mcp/src"), join(STAGE, "mcp/src"));
+copyOne("mcp/package.json", join(STAGE, "mcp/package.json"));
+copyOne("mcp/README.md", join(STAGE, "mcp/README.md"));
+copyOne("LICENSE", join(STAGE, "mcp/LICENSE"));
+mkdirSync(join(STAGE, "mcp/data"), { recursive: true });
+writeFileSync(
+  join(STAGE, "mcp/data/components.json"),
+  JSON.stringify(fullBundle, null, 0) + "\n"
+);
+copied++;
+
+// --- studio/ : ビルド済み ---
+// Vite は public/ をそのまま dist/ にコピーするので、dist/r と dist/html は
+// registry/ と html/ の丸ごと重複になる（合わせて 12MB）。しかも dist/html は
+// Tailwind 設定を注入する前の版なので、残すと配布物の中で食い違う。
+// スタジオ本体はどちらも実行時に参照していないので外す。
+const DIST = resolve(ROOT, "dist");
+const DIST_DUPES = new Set(["r", "html"]);
+copyTree(DIST, join(STAGE, "studio"), {
+  filter: (p) => !DIST_DUPES.has(relative(DIST, p)),
+});
+
+// ──────────────────────────────────────────────────────────────────────────
+// ZIP 化
+// ──────────────────────────────────────────────────────────────────────────
+
+const zipPath = join(OUT_DIR, `${NAME}.zip`);
+rmSync(zipPath, { force: true });
+execFileSync("zip", ["-r", "-q", "-X", `${NAME}.zip`, NAME], { cwd: OUT_DIR });
+if (!KEEP_STAGING) rmSync(STAGE, { recursive: true, force: true });
+
+const mb = (n) => `${(n / 1024 / 1024).toFixed(1)} MB`;
+console.log(
+  `\n${relative(ROOT, zipPath)} を作りました（${mb(statSync(zipPath).size)}）\n` +
+    `  components/  ${demoCount} 件（.tsx）\n` +
+    `  html/        ${htmlCount} 件 + index.json\n` +
+    `  registry/    ${count(resolve(ROOT, "public/r"), ".json")} 件（.json）\n` +
+    `  mcp/         ${fullBundle.included} 件収録（edition: ${fullBundle.edition}）\n` +
+    `  合計 ${copied} ファイル\n\n` +
+    `検証: node scripts/verify-release.mjs`
+);
diff --git a/scripts/verify-release.mjs b/scripts/verify-release.mjs
new file mode 100644
index 0000000..a3a5847
--- /dev/null
+++ b/scripts/verify-release.mjs
@@ -0,0 +1,337 @@
+/**
+ * 配布用 ZIP を実際に展開して中身を検める。
+ *
+ * 出品前に「入っているつもり」で出さないための検査。数えるだけでなく、
+ * 静的 HTML を実ブラウザで開いて**本当に描画されるか**まで見る。
+ *
+ *   node scripts/verify-release.mjs
+ *   node scripts/verify-release.mjs --zip release/lp-section-studio-v1.0.0.zip
+ *   node scripts/verify-release.mjs --samples 5
+ *
+ * 見るもの:
+ *   1. 想定したディレクトリと件数が揃っているか
+ *   2. 顧客に渡してはいけないもの（node_modules/.git/.env 等）が入っていないか
+ *   3. README と LICENSE が入っていて、両方の版のライセンスが読み取れるか
+ *   4. 静的 HTML を無作為に数件、実ブラウザで開いて描画とスタイルを実測
+ *   5. スタジオが HTTP 越しに開けるか
+ *
+ * 4 について: この HTML は cdn.tailwindcss.com を読む作りだが、検査環境から
+ * 外部 CDN には出られない。そこで CDN の代わりに、HTML が宣言している
+ * tailwind.config と同じ設定でローカルに組んだ Tailwind を差し込む。
+ * トークンの値（--card など）は HTML 自身が持つ <style> から来るので、
+ * 「配布物に埋め込んだ設定が効いているか」はこの方法で確かめられる。
+ */
+import { existsSync, mkdtempSync, rmSync, readdirSync, readFileSync, writeFileSync, statSync } from "node:fs";
+import { join, resolve, relative } from "node:path";
+import { tmpdir } from "node:os";
+import { execFileSync } from "node:child_process";
+import { createServer } from "node:http";
+
+const ROOT = resolve(import.meta.dirname, "..");
+const arg = (name, fallback) => {
+  const i = process.argv.indexOf(`--${name}`);
+  return i === -1 ? fallback : process.argv[i + 1];
+};
+const ZIP = resolve(ROOT, arg("zip", "release/lp-section-studio-v1.0.0.zip"));
+const SAMPLES = Number(arg("samples", 3));
+
+if (!existsSync(ZIP)) {
+  console.error(`${relative(ROOT, ZIP)} がありません。先に node scripts/build-release.mjs を実行してください。`);
+  process.exit(1);
+}
+
+const fails = [];
+const ok = (label, detail = "") => console.log(`  OK   ${label}${detail ? `  ${detail}` : ""}`);
+const ng = (label, detail = "") => {
+  console.log(`  NG   ${label}${detail ? `  ${detail}` : ""}`);
+  fails.push(label);
+};
+const check = (cond, label, detail) => (cond ? ok(label, detail) : ng(label, detail));
+
+const work = mkdtempSync(join(tmpdir(), "lpss-verify-"));
+console.log(`${relative(ROOT, ZIP)} を ${work} に展開します…\n`);
+execFileSync("unzip", ["-q", ZIP, "-d", work]);
+const roots = readdirSync(work);
+if (roots.length !== 1) {
+  console.error(`ZIP の最上位が1ディレクトリではありません: ${roots.join(", ")}`);
+  process.exit(1);
+}
+const PKG = join(work, roots[0]);
+
+// ──────────────────────────────────────────────────────────────────────────
+// 1. 件数
+// ──────────────────────────────────────────────────────────────────────────
+
+/** 拡張子つきのファイルを再帰的に数える */
+function countFiles(dir, ext) {
+  if (!existsSync(dir)) return -1;
+  return readdirSync(dir, { recursive: true }).filter((f) => String(f).endsWith(ext)).length;
+}
+
+console.log("【1】中身の件数");
+const htmlIndex = JSON.parse(readFileSync(join(PKG, "html/index.json"), "utf-8"));
+const expect = {
+  components: 880,
+  html: 880,
+  registry: 885,
+  standalone: 397,
+};
+check(countFiles(join(PKG, "components/demos"), ".tsx") === expect.components,
+  `components/demos  ${expect.components} 件`, `実測 ${countFiles(join(PKG, "components/demos"), ".tsx")}`);
+check(countFiles(join(PKG, "html"), ".html") === expect.html,
+  `html  ${expect.html} 件`, `実測 ${countFiles(join(PKG, "html"), ".html")}`);
+check(countFiles(join(PKG, "registry"), ".json") === expect.registry,
+  `registry  ${expect.registry} 件`, `実測 ${countFiles(join(PKG, "registry"), ".json")}`);
+check(htmlIndex.total === expect.html && htmlIndex.standalone === expect.standalone,
+  `html/index.json  total=${expect.html} standalone=${expect.standalone}`,
+  `実測 total=${htmlIndex.total} standalone=${htmlIndex.standalone}`);
+
+const mcpData = JSON.parse(readFileSync(join(PKG, "mcp/data/components.json"), "utf-8"));
+check(mcpData.edition === "full" && mcpData.included === 880,
+  "mcp  全部入り版 880 件", `実測 edition=${mcpData.edition} included=${mcpData.included}`);
+check(existsSync(join(PKG, "mcp/src/index.js")) && existsSync(join(PKG, "mcp/package.json")),
+  "mcp  サーバ本体と package.json");
+check(existsSync(join(PKG, "studio/index.html")), "studio  ビルド済み index.html");
+// 依存プリミティブ（これが無いと 880 件はコンパイルできない）
+for (const p of ["components/ui/button.tsx", "components/lib/utils.ts", "components/registry/types.ts", "components/theme/tokens.css"]) {
+  check(existsSync(join(PKG, p)), `components  ${p}`);
+}
+
+// ──────────────────────────────────────────────────────────────────────────
+// 2. 混入してはいけないもの
+// ──────────────────────────────────────────────────────────────────────────
+
+console.log("\n【2】顧客に渡してはいけないものが入っていないか");
+const all = readdirSync(PKG, { recursive: true }).map(String);
+const forbidden = [
+  [/(^|[/\\])node_modules([/\\]|$)/, "node_modules"],
+  [/(^|[/\\])\.git([/\\]|$)/, ".git"],
+  [/(^|[/\\])\.env($|[/\\.])/, ".env"],
+  [/(^|[/\\])\.claude([/\\]|$)/, ".claude"],
+  [/\.tsbuildinfo$/, "*.tsbuildinfo"],
+  [/\.log$/, "*.log"],
+  [/(^|[/\\])package-lock\.json$/, "package-lock.json"],
+  [/(^|[/\\])\.DS_Store$/, ".DS_Store"],
+  [/(^|[/\\])crawler([/\\]|$)/, "crawler/"],
+];
+for (const [re, label] of forbidden) {
+  const hit = all.filter((f) => re.test(f));
+  check(hit.length === 0, `${label} が無い`, hit.length ? `${hit.length} 件混入: ${hit.slice(0, 3).join(", ")}` : "");
+}
+// Vite が public/ を丸ごと dist/ にコピーするので、放っておくと registry/ と
+// html/ が studio/ の中に二重で入る（12MB の無駄＋注入前の古い HTML が混ざる）
+check(!existsSync(join(PKG, "studio/r")), "studio/r が無い（registry/ と重複するため）");
+check(!existsSync(join(PKG, "studio/html")), "studio/html が無い（html/ と重複するため）");
+// html/ の全件に Tailwind 設定が入っているか（1件でも漏れると色が出ない）
+const htmlFiles = readdirSync(join(PKG, "html")).filter((f) => f.endsWith(".html"));
+const notInjected = htmlFiles.filter(
+  (f) => !readFileSync(join(PKG, "html", f), "utf-8").includes("tailwind.config")
+);
+check(notInjected.length === 0, "html  全件に Tailwind のトークン設定が入っている",
+  notInjected.length ? `${notInjected.length} 件が未注入: ${notInjected.slice(0, 3).join(", ")}` : `${htmlFiles.length} 件`);
+// MCP が返す HTML も同じであること
+const mcpNotInjected = mcpData.items.filter((i) => i.html && !i.html.includes("tailwind.config")).length;
+check(mcpNotInjected === 0, "mcp  返す HTML にも同じ設定が入っている",
+  mcpNotInjected ? `${mcpNotInjected} 件が未注入` : `${mcpData.items.filter((i) => i.html).length} 件`);
+
+// ──────────────────────────────────────────────────────────────────────────
+// 3. README と LICENSE
+// ──────────────────────────────────────────────────────────────────────────
+
+console.log("\n【3】README と LICENSE");
+check(existsSync(join(PKG, "README.md")), "README.md がある");
+check(existsSync(join(PKG, "LICENSE")), "LICENSE がある");
+check(existsSync(join(PKG, "mcp/LICENSE")), "mcp/LICENSE がある");
+if (existsSync(join(PKG, "LICENSE"))) {
+  const lic = readFileSync(join(PKG, "LICENSE"), "utf-8");
+  check(/【無料版】/.test(lic) && /個人利用・非商用/.test(lic), "LICENSE  無料版（個人利用・非商用）が読み取れる");
+  check(/【買い切り版】/.test(lic) && /商用・非商用を問わず/.test(lic), "LICENSE  買い切り版（商用可）が読み取れる");
+  check(/--- English ---/.test(lic) && !/公開前に用意する/.test(lic), "LICENSE  英訳が入っている（プレースホルダのままでない）");
+}
+
+// ──────────────────────────────────────────────────────────────────────────
+// 4. 静的 HTML を実ブラウザで開く
+// ──────────────────────────────────────────────────────────────────────────
+
+console.log("\n【4】静的 HTML を実ブラウザで開いて実測");
+
+// CDN の代わりに使う Tailwind を、HTML が宣言している設定と同じ内容で組む。
+// 入力 CSS には :root を入れない（トークンは HTML 側の <style> から来るはず）。
+const cssDir = join(work, "_css");
+execFileSync("mkdir", ["-p", cssDir]);
+const tw = resolve(ROOT, "node_modules/.bin/tailwindcss");
+let simCss = null;
+if (existsSync(tw)) {
+  const cfgSrc = readFileSync(resolve(ROOT, "tailwind.config.js"), "utf-8")
+    .replace(/content:\s*\[[^\]]*\]/, `content: ["${join(PKG, "html")}/*.html"]`);
+  writeFileSync(join(cssDir, "cdn-sim.config.js"), cfgSrc);
+  writeFileSync(join(cssDir, "in.css"), "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n");
+  execFileSync(tw, ["-c", join(cssDir, "cdn-sim.config.js"), "-i", join(cssDir, "in.css"), "-o", join(cssDir, "cdn-sim.css")],
+    { stdio: ["ignore", "ignore", "ignore"] });
+  simCss = readFileSync(join(cssDir, "cdn-sim.css"), "utf-8");
+  ok("CDN 相当の Tailwind をローカルに構築", `${(simCss.length / 1024).toFixed(0)} KB`);
+} else {
+  ng("tailwindcss が見つからない（npm install が必要）");
+}
+
+const { chromium } = await import(resolve(ROOT, "node_modules/playwright/index.mjs"));
+async function launch() {
+  const bins = [
+    process.env.PLAYWRIGHT_CHROMIUM,
+    "/opt/pw-browsers/chromium-1194/chrome-linux/chrome",
+  ].filter(Boolean);
+  for (const b of bins) if (existsSync(b)) return chromium.launch({ executablePath: b });
+  return chromium.launch();
+}
+const browser = await launch();
+
+if (simCss) {
+  // 無作為に選ぶ（毎回違う組み合わせを見るため）。ただし 1 件は必ず
+  // セマンティックトークン（bg-card など）を使うものにする。埋め込んだ
+  // Tailwind 設定が効いているかは、それを使う HTML でしか確かめられない。
+  const standalone = htmlIndex.items.filter((i) => i.standalone);
+  // <head> に埋めた設定の中にもトークン名が出てくるので、<body> だけを見る
+  const usesToken = (id) => {
+    const html = readFileSync(join(PKG, "html", `${id}.html`), "utf-8");
+    const body = html.slice(html.indexOf("<body"));
+    return /(?:^|[\s"])(?:bg|text|border|ring|from|to|via|hover:bg|dark:bg)-(?:card|primary|muted|muted-foreground|background|foreground|accent|secondary|destructive|border|input)(?:[\s"/]|$)/.test(
+      body
+    );
+  };
+  const tokenPool = standalone.filter((i) => usesToken(i.id));
+  const pick = (pool) => pool[Math.floor(Math.random() * pool.length)];
+  const picked = tokenPool.length > 0 ? [pick(tokenPool)] : [];
+  while (picked.length < Math.min(SAMPLES, standalone.length)) {
+    const c = pick(standalone);
+    if (!picked.some((p) => p.id === c.id)) picked.push(c);
+  }
+  ok("トークンを使う standalone HTML", `${tokenPool.length} 件 / ${standalone.length} 件（うち1件を必ず検査）`);
+
+  /** ページの中で走らせる測定式（静的HTML用） */
+  const SAMPLE_MEASURE = `(() => {
+    const cs = (el) => (el ? getComputedStyle(el) : null);
+    const q = (sel) => document.querySelector(sel);
+    const tokenEl = q('[class*="bg-card"], [class*="bg-primary"], [class*="bg-muted"], [class*="bg-background"]');
+    const styled = [...document.body.querySelectorAll("*")].filter((el) => {
+      const s = getComputedStyle(el);
+      return s.backgroundColor !== "rgba(0, 0, 0, 0)" || s.borderTopWidth !== "0px" || s.padding !== "0px";
+    });
+    return {
+      elements: document.body.querySelectorAll("*").length,
+      styled: styled.length,
+      text: document.body.innerText.trim().length,
+      height: document.body.scrollHeight,
+      width: document.documentElement.scrollWidth,
+      rootVar: getComputedStyle(document.documentElement).getPropertyValue("--card").trim(),
+      tokenClass: tokenEl ? [...tokenEl.classList].find((c) => /^bg-(card|primary|muted|background)$/.test(c)) : null,
+      tokenBg: tokenEl ? cs(tokenEl).backgroundColor : null,
+      fontSize: cs(q("h1, h2, h3, p, span, div")).fontSize,
+    };
+  })()`;
+
+  for (const item of picked) {
+    // Tailwind 無し／有りの2回測って差を見る。「スタイルが当たっている」を
+    // 絶対値のしきい値で決めると、要素数の少ない部品や SVG の多い部品で
+    // 判定がぶれるので、同じページの前後比較で判断する。
+    const measureOnce = async (withCss) => {
+      const page = await browser.newPage({ viewport: { width: 1280, height: 900 } });
+      // 外部 CDN には出られないので握りつぶし、同等の CSS を後から差し込む
+      await page.route("https://cdn.tailwindcss.com**", (r) =>
+        r.fulfill({ contentType: "text/javascript", body: "" })
+      );
+      await page.goto(`file://${join(PKG, "html", `${item.id}.html`)}`, { waitUntil: "load" });
+      if (withCss) await page.addStyleTag({ content: simCss });
+      const m = await page.evaluate(SAMPLE_MEASURE);
+      await page.close();
+      return m;
+    };
+    const bare = await measureOnce(false);
+    const m = await measureOnce(true);
+
+    const detail =
+      `要素${m.elements} / 文字${m.text} / 高さ${m.height}px / 幅${m.width}px / ` +
+      `スタイル付き ${bare.styled}→${m.styled} / --card="${m.rootVar}" / ` +
+      `${m.tokenClass ?? "トークン未使用"}=${m.tokenBg ?? "-"} / font=${m.fontSize}`;
+    // 真っ白でないこと
+    const blank = m.elements < 3 || m.height < 40 || m.text === 0;
+    // Tailwind を入れた前後で見た目が変わること（＝クラスが効いている）
+    const unstyled = m.styled <= bare.styled && m.height === bare.height;
+    // 埋め込んだトークン定義が届いているか（--card が空なら <style> が効いていない）
+    const tokensMissing = m.rootVar === "";
+    const tokenBroken = m.tokenClass !== null && m.tokenBg === "rgba(0, 0, 0, 0)";
+    check(!blank && !unstyled && !tokensMissing && !tokenBroken, item.id, detail);
+  }
+}
+
+// ──────────────────────────────────────────────────────────────────────────
+// 5. スタジオ
+// ──────────────────────────────────────────────────────────────────────────
+
+console.log("\n【5】スタジオ（HTTP 越し）");
+
+/** ページの中で走らせる測定式。cssRules は「CSS が実際に届いたか」の判定に使う。 */
+const MEASURE = `(() => ({
+  elements: document.body.querySelectorAll("*").length,
+  text: document.body.innerText.trim().length,
+  height: document.body.scrollHeight,
+  bodyBg: getComputedStyle(document.body).backgroundColor,
+  cssRules: [...document.styleSheets].reduce((n, s) => { try { return n + s.cssRules.length; } catch { return n; } }, 0),
+}))()`;
+
+const MIME = { ".html": "text/html", ".js": "text/javascript", ".css": "text/css", ".json": "application/json", ".svg": "image/svg+xml" };
+const studioDir = join(PKG, "studio");
+const srv = createServer((req, res) => {
+  const p = join(studioDir, decodeURIComponent(req.url.split("?")[0]));
+  const file = existsSync(p) && statSync(p).isDirectory() ? join(p, "index.html") : p;
+  if (!existsSync(file)) return void res.writeHead(404).end();
+  const ext = file.slice(file.lastIndexOf("."));
+  res.writeHead(200, { "content-type": MIME[ext] ?? "application/octet-stream" });
+  res.end(readFileSync(file));
+});
+await new Promise((r) => srv.listen(0, r));
+const port = srv.address().port;
+{
+  const page = await browser.newPage({ viewport: { width: 1280, height: 900 } });
+  const failed = [];
+  page.on("requestfailed", (r) => failed.push(r.url()));
+  page.on("response", (r) => { if (r.status() >= 400) failed.push(`${r.status()} ${r.url()}`); });
+  await page.goto(`http://localhost:${port}/`, { waitUntil: "load" });
+  await page.waitForTimeout(1500);
+  const m = await page.evaluate(MEASURE);
+  // 自ドメイン以外（フォント CDN 等）の失敗は検査環境の都合なので除く
+  const local = failed.filter((u) => u.includes("localhost"));
+  check(m.elements > 50 && m.text > 100 && m.cssRules > 500 && local.length === 0,
+    "studio  HTTP 越しに描画される",
+    `要素${m.elements} / 文字${m.text} / CSSルール${m.cssRules} / 高さ${m.height}px / ローカル読み込み失敗${local.length}件`);
+  await page.close();
+}
+{
+  // README が「HTTP サーバで開いてください」と書いている根拠を実測で残す。
+  // 真っ白にはならない（index.html は事前描画済み）が、CSS も JS も
+  // /assets/... の絶対パスなので読めず、素の HTML が並ぶだけになる。
+  const page = await browser.newPage({ viewport: { width: 1280, height: 900 } });
+  const failed = [];
+  page.on("requestfailed", (r) => failed.push(r.url()));
+  await page.goto(`file://${join(studioDir, "index.html")}`, { waitUntil: "load" });
+  await page.waitForTimeout(800);
+  const m = await page.evaluate(MEASURE);
+  const assetsFailed = failed.filter((u) => u.startsWith("file:///assets/"));
+  check(m.cssRules < 100 && assetsFailed.length >= 2,
+    "studio  file:// ではスタイルが当たらない（README の注意書きどおり）",
+    `要素${m.elements} / CSSルール${m.cssRules} / body背景=${m.bodyBg} / 読み込み失敗 ${assetsFailed.length}件`);
+  await page.close();
+}
+srv.close();
+await browser.close();
+
+// ──────────────────────────────────────────────────────────────────────────
+
+const zipMb = (statSync(ZIP).size / 1024 / 1024).toFixed(1);
+console.log(`\nZIP: ${relative(ROOT, ZIP)}  ${zipMb} MB / 展開後 ${all.filter((f) => statSync(join(PKG, f)).isFile()).length} ファイル`);
+rmSync(work, { recursive: true, force: true });
+
+if (fails.length > 0) {
+  console.error(`\n${fails.length} 件が NG:\n` + fails.map((f) => `  - ${f}`).join("\n"));
+  process.exit(1);
+}
+console.log("\nすべて OK。");
diff --git a/src/Studio.test.tsx b/src/Studio.test.tsx
new file mode 100644
index 0000000..384dbe6
--- /dev/null
+++ b/src/Studio.test.tsx
@@ -0,0 +1,92 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import Studio from "./Studio";
+import { registry } from "@/registry";
+import { isFreeComponent } from "@/lib/free";
+import { FREE_EDITION_COUNT } from "@/registry/freeCount";
+
+/**
+ * スタジオの「無料100個」絞り込みの振る舞いテスト。
+ * 880個のうちどれが無料版に入っているのかを画面から判別できること
+ * （トグル・バッジ・件数表示）を固定する。
+ */
+afterEach(() => cleanup());
+
+const FREE_LABEL = `無料${FREE_EDITION_COUNT}個`;
+
+function renderStudio() {
+  return render(
+    <Studio
+      plan="free"
+      lang="ja"
+      setLang={() => {}}
+      onHome={() => {}}
+      onPricing={() => {}}
+    />
+  );
+}
+
+const toggle = () => screen.getByRole("button", { name: FREE_LABEL });
+
+/** 無料版に入っていない側の代表（名前が無料版と重複しないものを選ぶ） */
+const paidEntry = registry.find(
+  (e) =>
+    !isFreeComponent(e.id) &&
+    !registry.some((o) => o.name === e.name && isFreeComponent(o.id))
+)!;
+const freeEntry = registry.find((e) => isFreeComponent(e.id))!;
+
+describe("スタジオの無料100個フィルタ", () => {
+  it("トグルを押すと無料版の100個だけになり、件数とバッジが出る", () => {
+    renderStudio();
+    // 実 button + aria-pressed（支援技術に ON/OFF が伝わること）
+    expect(toggle().tagName).toBe("BUTTON");
+    expect(toggle().getAttribute("aria-pressed")).toBe("false");
+    expect(screen.queryAllByText(paidEntry.name).length).toBeGreaterThan(0);
+
+    fireEvent.click(toggle());
+
+    expect(toggle().getAttribute("aria-pressed")).toBe("true");
+    expect(screen.queryAllByText(paidEntry.name)).toHaveLength(0);
+    expect(screen.queryAllByText(freeEntry.name).length).toBeGreaterThan(0);
+    // 「無料100個のうち 100 件」
+    expect(
+      screen.getAllByText(`${FREE_LABEL}のうち ${FREE_EDITION_COUNT} 件`).length
+    ).toBeGreaterThan(0);
+    // 無料版のカードにだけ付くバッジ（読み上げは「無料版に含まれます」）
+    const badges = screen.getAllByText("無料");
+    expect(badges).toHaveLength(FREE_EDITION_COUNT);
+    expect(badges[0].textContent).toBe("無料版に含まれます");
+  });
+
+  it("検索と AND で併用できる", () => {
+    renderStudio();
+    fireEvent.click(toggle());
+    fireEvent.change(screen.getByPlaceholderText("検索（名前・タグ）..."), {
+      target: { value: "hero" },
+    });
+
+    const expected = registry.filter(
+      (e) =>
+        isFreeComponent(e.id) &&
+        [e.name, e.description, e.category, ...(e.tags ?? [])]
+          .join(" ")
+          .toLowerCase()
+          .includes("hero")
+    ).length;
+
+    expect(expected).toBeGreaterThan(0);
+    expect(expected).toBeLessThan(FREE_EDITION_COUNT);
+    expect(
+      screen.getAllByText(`${FREE_LABEL}のうち ${expected} 件`).length
+    ).toBeGreaterThan(0);
+    expect(screen.getAllByText("無料")).toHaveLength(expected);
+  });
+
+  it("月額を前提にした統計表示が残っていない", () => {
+    renderStudio();
+    expect(screen.queryByText("あなたの月額")).toBeNull();
+    expect(screen.queryByText("¥0")).toBeNull();
+    expect(screen.getByText("無料で使える数")).toBeTruthy();
+  });
+});
diff --git a/src/Studio.tsx b/src/Studio.tsx
index 0225e1c..be3e37d 100644
--- a/src/Studio.tsx
+++ b/src/Studio.tsx
@@ -15,6 +15,7 @@ import {
   GalleryHorizontalEnd,
   Gamepad2,
   Gem,
+  Gift,
   Github,
   Home,
   Move,
@@ -59,6 +60,8 @@ import { GalleryView } from "@/components/GalleryView";
 import { registry, categories } from "@/registry";
 import { tCategory, tName } from "@/registry/i18n";
 import { THEME_CATEGORIES } from "@/lib/stats";
+import { isFreeComponent } from "@/lib/free";
+import { FREE_EDITION_COUNT } from "@/registry/freeCount";
 import { type PlanId } from "@/lib/plan";
 import { type Lang } from "@/lib/i18n";
 
@@ -143,7 +146,10 @@ const STUDIO_COPY = {
     statSections: "LPセクション",
     statStyles: "デザインスタイル",
     statCategories: "カテゴリ",
-    statPrice: "あなたの月額",
+    statFree: "無料で使える数",
+    freeFilter: `無料${FREE_EDITION_COUNT}個`,
+    freeFilterHint: `無料版（MCP）に含まれる ${FREE_EDITION_COUNT} 個だけを表示する`,
+    freeOf: (n: number) => `無料${FREE_EDITION_COUNT}個のうち ${n} 件`,
     distribute: "コピペ・shadcn add・バニラHTML、3経路で配布",
     advancedTitle: (n: number) => `${n} 個の上級コンポーネント`,
     advancedBody:
@@ -168,7 +174,10 @@ const STUDIO_COPY = {
     statSections: "LP sections",
     statStyles: "Design styles",
     statCategories: "Categories",
-    statPrice: "Your price / mo",
+    statFree: "Free to use",
+    freeFilter: `Free ${FREE_EDITION_COUNT}`,
+    freeFilterHint: `Show only the ${FREE_EDITION_COUNT} components included in the free (MCP) edition`,
+    freeOf: (n: number) => `${n} of the ${FREE_EDITION_COUNT} free components`,
     distribute: "Copy-paste · shadcn add · vanilla HTML — 3 ways to ship",
     advancedTitle: (n: number) => `${n} advanced components`,
     advancedBody:
@@ -191,14 +200,22 @@ function FilterChip({
   active,
   onClick,
   children,
+  // ON/OFF の二値トグルとして使う場合のみ渡す（支援技術に押下状態を伝える）
+  pressed,
+  title,
 }: {
   active: boolean;
   onClick: () => void;
   children: ReactNode;
+  pressed?: boolean;
+  title?: string;
 }) {
   return (
     <button
+      type="button"
       onClick={onClick}
+      aria-pressed={pressed}
+      title={title}
       className={cn(
         "inline-flex shrink-0 items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors",
         active
@@ -227,6 +244,7 @@ export default function Studio({
   const s = STUDIO_COPY[lang];
   const [query, setQuery] = useState("");
   const [onlyFavs, setOnlyFavs] = useState(false);
+  const [onlyFree, setOnlyFree] = useState(false);
   const [catFilter, setCatFilter] = useState<string | null>(null);
   const [activeId, setActiveId] = useState(registry[0]?.id);
   const [view, setView] = useState<"detail" | "gallery">("gallery");
@@ -241,7 +259,9 @@ export default function Studio({
   const filtered = useMemo(() => {
     const q = query.trim().toLowerCase();
     return registry.filter((e) => {
+      // 検索・カテゴリ・お気に入り・無料版はすべて AND で効く
       if (onlyFavs && !favs.includes(e.id)) return false;
+      if (onlyFree && !isFreeComponent(e.id)) return false;
       if (catFilter && e.category !== catFilter) return false;
       if (!q) return true;
       return (
@@ -251,7 +271,12 @@ export default function Studio({
         (e.tags ?? []).some((t) => t.toLowerCase().includes(q))
       );
     });
-  }, [query, onlyFavs, catFilter, favs]);
+  }, [query, onlyFavs, onlyFree, catFilter, favs]);
+
+  // 件数表示（無料版で絞り込み中は「無料100個のうち n 件」）
+  const countLabel = onlyFree
+    ? s.freeOf(filtered.length)
+    : `${filtered.length} ${s.items}`;
 
   const active =
     registry.find((e) => e.id === activeId) ?? filtered[0] ?? registry[0];
@@ -395,9 +420,7 @@ export default function Studio({
                 {s.favorites}
                 {favs.length > 0 && ` (${favs.length})`}
               </Button>
-              <span className="text-xs text-muted-foreground">
-                {filtered.length} {s.items}
-              </span>
+              <span className="text-xs text-muted-foreground">{countLabel}</span>
             </div>
 
             <nav className="space-y-5 pb-6">
@@ -475,14 +498,25 @@ export default function Studio({
             <Stat value={`${registry.length}+`} label={s.statSections} />
             <Stat value={`${styleCount}`} label={s.statStyles} />
             <Stat value={`${categories.length}`} label={s.statCategories} />
-            <Stat value="¥0" label={s.statPrice} />
+            <Stat value={`${FREE_EDITION_COUNT}`} label={s.statFree} />
             <span className="ml-auto hidden text-xs text-muted-foreground lg:block">
               {s.distribute}
             </span>
           </div>
 
           {/* スタイル/カテゴリのフィルタチップ（探しやすさ） */}
-          <div className="mb-5 flex gap-2 overflow-x-auto pb-2 [scrollbar-width:thin]">
+          <div className="mb-2 flex gap-2 overflow-x-auto pb-2 [scrollbar-width:thin]">
+            {/* 無料版に入っている100個だけを見る（カテゴリとは別軸なので区切り線を挟む） */}
+            <FilterChip
+              active={onlyFree}
+              pressed={onlyFree}
+              title={s.freeFilterHint}
+              onClick={() => setOnlyFree((v) => !v)}
+            >
+              <Gift className="size-3.5" />
+              {s.freeFilter}
+            </FilterChip>
+            <span aria-hidden className="my-1 w-px shrink-0 bg-border" />
             <FilterChip
               active={catFilter === null}
               onClick={() => setCatFilter(null)}
@@ -506,6 +540,11 @@ export default function Studio({
             })}
           </div>
 
+          {/* 絞り込みの結果件数（サイドバーが無い狭い画面でも分かるように） */}
+          <p className="mb-4 text-xs text-muted-foreground" aria-live="polite">
+            {countLabel}
+          </p>
+
           {view === "gallery" ? (
             <GalleryView
               items={filtered}
diff --git a/src/components/GalleryView.tsx b/src/components/GalleryView.tsx
index 9845eee..72fbdd9 100644
--- a/src/components/GalleryView.tsx
+++ b/src/components/GalleryView.tsx
@@ -8,6 +8,7 @@ import {
 } from "react";
 import { Loader2, Star } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { isFreeComponent } from "@/lib/free";
 import type { RegistryEntry } from "@/registry";
 import { tCategory, tName } from "@/registry/i18n";
 import type { Lang } from "@/lib/i18n";
@@ -119,6 +120,16 @@ function GalleryCard({
                 NEW
               </span>
             )}
+            {/* 無料版（MCP の100個）に入っている印。NEW と並んでも読めるよう色だけ変える */}
+            {isFreeComponent(entry.id) && (
+              <span className="shrink-0 rounded bg-sky-500/15 px-1 text-[10px] font-medium text-sky-500">
+                {lang === "ja" ? "無料" : "Free"}
+                {/* 「無料版に含まれます」/「Free edition」と読み上げさせる */}
+                <span className="sr-only">
+                  {lang === "ja" ? "版に含まれます" : " edition"}
+                </span>
+              </span>
+            )}
           </div>
           <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
             <span className="truncate">{tCategory(lang, entry.category)}</span>
diff --git a/src/lib/free.ts b/src/lib/free.ts
new file mode 100644
index 0000000..3960ebc
--- /dev/null
+++ b/src/lib/free.ts
@@ -0,0 +1,20 @@
+import { FREE_IDS } from "@/registry/freeIds";
+
+/**
+ * 無料版（MCP に同梱する 100 個）の判定。
+ *
+ * ID の一覧は `mcp/data/components.json` から自動生成した
+ * `src/registry/freeIds.ts` を単一の真実として参照する。
+ * 元データは HTML 本体込みで 1.1MB あるので、フロントには ID だけを載せる。
+ *
+ * 件数（FREE_EDITION_COUNT）はここでは再輸出しない。ID 一覧と同じモジュールを
+ * 経由すると、数字しか使わない LP の初期チャンクにも ID 100 件が載ってしまう。
+ * 数字だけ要る側は `@/registry/freeCount` を読むこと。
+ */
+
+const FREE_ID_SET: ReadonlySet<string> = new Set(FREE_IDS);
+
+/** このコンポーネントが無料版に含まれるか */
+export function isFreeComponent(id: string): boolean {
+  return FREE_ID_SET.has(id);
+}
diff --git a/src/pages/Landing.tsx b/src/pages/Landing.tsx
index 8cdb347..452779a 100644
--- a/src/pages/Landing.tsx
+++ b/src/pages/Landing.tsx
@@ -36,6 +36,8 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
 import { getPlans } from "@/lib/plan";
+// 数字だけ要るので、ID 一覧を巻き込まないよう生成物から直接読む（LP の初期チャンク対策）
+import { FREE_EDITION_COUNT } from "@/registry/freeCount";
 import type { Lang } from "@/lib/i18n";
 
 // --- Dogfooding: 実在の本物の3Dコンポーネントをそのまま読み込んで埋め込む ---
@@ -252,8 +254,7 @@ const COPY = {
     statSections: "セクション",
     statStyles: "スタイル",
     statCategories: "カテゴリ",
-    statPriceValue: "¥0",
-    statPriceLabel: "から使える",
+    statFreeLabel: "無料で使える数",
 
     trustNote: "完全自己完結・追加依存ゼロ",
     trustTested: "全{n}件テスト済み（エラーゼロ）",
@@ -405,7 +406,8 @@ const COPY = {
 
     pricingBadge: "料金",
     pricingHeading: "¥0からはじめて、必要なときに。",
-    pricingSub: "個人の試用から、チームの制作現場まで。3つのプランで段階的に。",
+    pricingSub:
+      "個人の試用から、チームの制作現場まで。無料版と買い切り版の2つだけです。",
     pricingRecommended: "おすすめ",
     pricingChoose: "選ぶ",
     pricingSeeDetails: "料金の詳細を見る",
@@ -481,8 +483,7 @@ const COPY = {
     statSections: "sections",
     statStyles: "styles",
     statCategories: "categories",
-    statPriceValue: "Free",
-    statPriceLabel: "to start",
+    statFreeLabel: "free to use",
 
     trustNote: "Fully self-contained · zero extra deps",
     trustTested: "All {n} tested (zero errors)",
@@ -638,7 +639,7 @@ const COPY = {
     pricingBadge: "Pricing",
     pricingHeading: "Start free, upgrade when you need to.",
     pricingSub:
-      "From solo trials to a team's production floor — three plans, step by step.",
+      "From solo trials to a team's production floor — just two: free and pay-once.",
     pricingRecommended: "Recommended",
     pricingChoose: "Choose",
     pricingSeeDetails: "See full pricing",
@@ -758,6 +759,7 @@ export default function Landing({
   const cComponents = useCountUp(stats.components, reduced);
   const cStyles = useCountUp(stats.styles, reduced);
   const cCategories = useCountUp(stats.categories, reduced);
+  const cFree = useCountUp(FREE_EDITION_COUNT, reduced);
 
   const themeLabel = (id: HeroTheme): string =>
     id === "aurora"
@@ -770,7 +772,7 @@ export default function Landing({
     { key: "components", value: `${cComponents}+`, label: t.statSections },
     { key: "styles", value: `${cStyles}`, label: t.statStyles },
     { key: "categories", value: `${cCategories}`, label: t.statCategories },
-    { key: "price", value: t.statPriceValue, label: t.statPriceLabel },
+    { key: "free", value: `${cFree}`, label: t.statFreeLabel },
   ];
 
   /* ----- データ ----- */
diff --git a/src/registry/freeCount.ts b/src/registry/freeCount.ts
new file mode 100644
index 0000000..7267688
--- /dev/null
+++ b/src/registry/freeCount.ts
@@ -0,0 +1,7 @@
+// このファイルは scripts/build-free-ids.mjs により自動生成されます。直接編集しないでください。
+// 元データ: mcp/data/components.json（無料版 = MCP に同梱する 100 個）
+// 件数だけを使う面（LP のスタットバンド等）はこちらを読む。
+// ID 一覧を初期チャンクに載せないためにファイルを分けている。
+
+/** 無料版に含まれるコンポーネント数 */
+export const FREE_EDITION_COUNT = 100;
diff --git a/src/registry/freeIds.test.ts b/src/registry/freeIds.test.ts
new file mode 100644
index 0000000..259f788
--- /dev/null
+++ b/src/registry/freeIds.test.ts
@@ -0,0 +1,40 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+import { registry } from "@/registry";
+import { FREE_IDS } from "./freeIds";
+import { FREE_EDITION_COUNT } from "./freeCount";
+
+/**
+ * 無料版（MCP に同梱する100個）のドリフト検査。
+ *
+ * `freeIds.ts` / `freeCount.ts` は `mcp/data/components.json` から自動生成する派生物なので、
+ * 元データや registry が動いたときに黙って腐りうる。
+ * ここで「全IDが registry に実在する」「件数が included と一致する」を固定し、
+ * スタジオの『無料100個』表示が実際の無料版とずれないことを保証する。
+ */
+
+const bundle = JSON.parse(
+  readFileSync(resolve(process.cwd(), "mcp/data/components.json"), "utf-8")
+) as { included: number; items: { id: string }[] };
+
+describe("無料版の ID 一覧が registry と一致している", () => {
+  it("FREE_IDS の全IDが registry に実在する", () => {
+    const known = new Set(registry.map((e) => e.id));
+    const missing = FREE_IDS.filter((id) => !known.has(id));
+    expect(missing, `registry に無いID: ${missing.join(", ")}`).toEqual([]);
+  });
+
+  it("件数が mcp/data/components.json の included と一致する", () => {
+    expect(FREE_IDS.length).toBe(bundle.included);
+    expect(FREE_EDITION_COUNT).toBe(bundle.included);
+    expect(bundle.items.length).toBe(bundle.included);
+  });
+
+  it("元データと同じID集合で、重複が無い", () => {
+    expect(new Set(FREE_IDS).size).toBe(FREE_IDS.length);
+    expect([...FREE_IDS].sort()).toEqual(
+      [...new Set(bundle.items.map((i) => i.id))].sort()
+    );
+  });
+});
diff --git a/src/registry/freeIds.ts b/src/registry/freeIds.ts
new file mode 100644
index 0000000..756ca75
--- /dev/null
+++ b/src/registry/freeIds.ts
@@ -0,0 +1,106 @@
+// このファイルは scripts/build-free-ids.mjs により自動生成されます。直接編集しないでください。
+// 元データ: mcp/data/components.json（無料版 = MCP に同梱する 100 個）
+
+/** 無料版に含まれるコンポーネントの ID（manifest の id と同じ体系） */
+export const FREE_IDS: readonly string[] = [
+  "ai2-assistant-card",
+  "ai2-chat-bubble-variants",
+  "ai2-thinking-indicator",
+  "analytics-analytics-overview",
+  "analytics-contribution-heatmap",
+  "analytics-funnel-chart",
+  "analytics-leaderboard",
+  "app-avatar-group",
+  "app-empty-state",
+  "aww-hero-asymmetric-hero",
+  "aww-hero-award-badge-showcase",
+  "aww-hero-bento-editorial",
+  "aww-hero-clip-path-reveal-hero",
+  "bg-anim-animated-gradient",
+  "bg-anim-aurora",
+  "bg-anim-conic-glow",
+  "bg-anim-grid-beams",
+  "botanical-botanical-feature",
+  "botanical-botanical-footer",
+  "botanical-botanical-hero",
+  "botanical-botanical-pricing",
+  "brutalist-brutal-button-set",
+  "brutalist-brutal-card",
+  "brutalist-brutal-cta",
+  "brutalist-brutal-feature-grid",
+  "btn-fun-brutalist",
+  "btn-fun-gooey",
+  "btn-fun-gradient-pill",
+  "btn-fun-hand-drawn",
+  "button-anim-arrow-slide-button",
+  "button-anim-border-beam-button",
+  "button-anim-glow-pulse-button",
+  "button-anim-gooey-button",
+  "card-anim-border-beam-card",
+  "card-anim-expand-image-card",
+  "card-anim-flip-card",
+  "card-anim-gradient-border-card",
+  "conversion-guarantee-badge",
+  "conversion-testimonial-wall",
+  "conversion-trust-badges",
+  "darktech-dev-footer",
+  "darktech-dev-pricing",
+  "darktech-dev-stats",
+  "darktech-status-dashboard",
+  "feature2-animated-bento",
+  "feature2-bento-with-mini-charts",
+  "feature2-comparison-us-vs-them",
+  "feature2-feature-spotlight",
+  "glass-glass-card",
+  "glass-glass-cta",
+  "glass-glass-feature",
+  "glass-glass-hero",
+  "hero-anim-animated-mesh-hero",
+  "hero-anim-aurora-hero",
+  "hero-anim-bento-hero",
+  "hero-anim-gradient-shift-hero",
+  "interaction-marquee",
+  "loaders-morphing-loader",
+  "loaders-pulse-dots",
+  "loaders-ripple-loader",
+  "loaders-spinners",
+  "luxury-award-badge-set",
+  "luxury-brand-story",
+  "luxury-gold-testimonial",
+  "luxury-luxury-feature",
+  "marquee-avatar-marquee",
+  "marquee-brand-ticker",
+  "marquee-dual-marquee",
+  "marquee-icon-marquee",
+  "mat3d-gloss-crystal-gem-facet",
+  "mat3d-gloss-liquid-chrome-headline",
+  "mat3d-gloss-urushi-lacquer-hero",
+  "mat3d-gloss-wet-glass-product",
+  "memphis-memphis-badge-set",
+  "memphis-memphis-button-set",
+  "memphis-memphis-card",
+  "memphis-memphis-cta",
+  "minimal-editorial-list",
+  "minimal-feature-grid-swiss",
+  "minimal-invert-hero",
+  "minimal-label-badge-set",
+  "neumorphism-soft-pricing",
+  "neumorphism-soft-stats",
+  "nordic-nordic-card",
+  "nordic-nordic-feature",
+  "nordic-nordic-footer",
+  "nordic-nordic-gallery",
+  "offers-comparison-matrix",
+  "offers-enterprise-contact",
+  "offers-money-back-card",
+  "offers-value-stack-offer",
+  "playful-emoji-feature-grid",
+  "playful-mascot-card",
+  "playful-playful-button-set",
+  "playful-playful-cta",
+  "retro-arcade-card",
+  "retro-neon-cta",
+  "retro-neon-hero",
+  "retro-neon-stats",
+  "scroll-anim-sticky-stack-cards"
+];

From a57fcc04f39b2c542f2083c83a1c9b5f9c0acb28 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 28 Jul 2026 15:08:27 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=E7=84=A1=E6=96=99100=E5=80=8B=E3=81=AE?=
 =?UTF-8?q?=E5=8F=AF=E8=A6=96=E5=8C=96=E3=83=BB=E6=9B=B8=E3=81=8D=E5=87=BA?=
 =?UTF-8?q?=E3=81=97HTML=E3=81=AE=E6=AC=A0=E9=99=A5=E4=BF=AE=E6=AD=A3?=
 =?UTF-8?q?=E3=83=BBUI/UX=E3=81=AE=E7=A3=A8=E3=81=8D=E8=BE=BC=E3=81=BF?=
 =?UTF-8?q?=E3=83=BB=E9=85=8D=E5=B8=83=E7=89=A9=E3=81=AE=E6=95=B4=E5=82=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

【出荷を止めるレベルの欠陥を修正】
書き出したHTMLでデザイントークンが解決されず、bg-card が透明・
text-muted-foreground が真っ黒になっていた（880件中430件、無料MCP版100件中30件）。
bg-card 等は素のTailwindに無いプロジェクト固有トークンで、CDNを1行読むだけの
wrapDocument() が設定もCSS変数も渡していなかった。これはスタジオの
「バニラHTML書き出し」＝製品の中心価値そのものにも効いていた。
- wrapDocument/generateDynamicVanillaHtml に生成モジュール経由でトークン定義を注入
- 静的HTML880件とMCPデータを再生成（注入率 880/880・無料 100/100 を実測）
- 実ブラウザ実測: bg-card rgba(0,0,0,0)→rgb(255,255,255)、
  text-muted-foreground rgb(0,0,0)→rgb(113,113,122)
- 配布ZIP生成時に未注入HTMLがあれば停止する検査を追加（同じ内容を2箇所に持たない）

【無料100個が見えるようになった】
スタジオのどれが無料版の100個か判別する手段が無く、購入判断ができなかった。
- 「無料100個」トグルとカードの「無料」バッジを追加（検索・カテゴリとAND）
- 無料IDの生成と照合テスト（880件のmanifestと100/100一致をビルド時に恒久検査）
- 件数のみ別モジュールに分離しLP初期チャンクへのID混入を回避（実測確認）

【UI/UXの磨き込み】
- 375pxでスタジオのヘッダーが画面外に溢れJAボタンが切れていたのを1行に収めた
- LPの言語切替がヘッダーCTAに重なっていたのをヘッダー行内へ移設
- 日本語見出し・リード文が単語途中で改行されていたのを文節単位で折り返すよう修正
- 同名コンポーネント26種（53件）にコレクション名を併記して識別可能に
- 「お気に入り 880件」と誤読される件数表記を「表示中 880 件」に
- ギャラリーの空に見えるカード・過大な高さを調整、ライトテーマのコントラスト改善
- 375/768/1280 の3幅で横スクロールが無いことを実測

【買い切りへの移行残り】
統計バーの「¥0 あなたの月額」→「100 無料で使える数」（ja/en）ほか

【配布物】
LICENSE配置（無料版=個人利用/買い切り版=商用可）、配布ZIP生成・検証スクリプト、
MCPのREADMEを実態に修正（npx手順はnpm未公開で動かないことを実証し差し替え）

【note記事】
「109件の欠陥」が内訳（12+29+0+26=67）と合わなかったため67に訂正。
あわせて今回の430件欠陥の顛末を追記した

テスト2666件グリーン

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01YXb6DP2sELzRyZkqpe15p4
---
 docs/booth-listing.md            | 140 ++++++++++-------
 docs/note-article.md             | 125 +++++++++------
 mcp/data/components.json         | 200 ++++++++++++------------
 package.json                     |  11 +-
 scripts/build-release.mjs        | 126 ++++-----------
 scripts/build-vanilla-head.mjs   | 129 ++++++++++++++++
 scripts/verify-release.mjs       |  31 +++-
 src/App.tsx                      |  18 +--
 src/Studio.tsx                   | 258 ++++++++++++++++++++++++-------
 src/components/GalleryView.tsx   |  66 +++++++-
 src/components/LangToggle.tsx    |   7 +-
 src/components/Phrased.tsx       |  32 ++++
 src/components/PreviewCanvas.tsx |  19 ++-
 src/lib/vanilla.ts               |  16 +-
 src/lib/vanillaHead.generated.ts | 120 ++++++++++++++
 src/lib/vanillaHead.test.ts      | 156 +++++++++++++++++++
 src/lib/variant.ts               |  37 +++++
 src/pages/Landing.tsx            | 147 +++++++++++-------
 src/pages/Pricing.tsx            |  58 ++++---
 19 files changed, 1240 insertions(+), 456 deletions(-)
 create mode 100644 scripts/build-vanilla-head.mjs
 create mode 100644 src/components/Phrased.tsx
 create mode 100644 src/lib/vanillaHead.generated.ts
 create mode 100644 src/lib/vanillaHead.test.ts
 create mode 100644 src/lib/variant.ts

diff --git a/docs/booth-listing.md b/docs/booth-listing.md
index fac82e6..011da75 100644
--- a/docs/booth-listing.md
+++ b/docs/booth-listing.md
@@ -88,9 +88,10 @@ CIで毎回全件に対して走ります。この検査を導入したとき、
 
 ■ 依存
 
-react / lucide-react / clsx + tailwind-merge と、同梱のUIプリミティブのみ。
-外部画像URLは使っていないので、ファイルを1つ置けば動きます。
-静的HTML版は Tailwind だけで動きます。
+react / lucide-react / clsx + tailwind-merge / class-variance-authority と、
+同梱のUIプリミティブのみ。外部画像URLは使っていないので、ファイルを1つ
+置けば動きます。静的HTML版は Tailwind だけで動きます（色の定義は各HTMLに
+埋め込み済みなので、貼るだけでそのままの見た目になります）。
 
 ■ まず無料で試せます
 
@@ -115,78 +116,113 @@ MCPサーバの無料版に100個入っています（すべてReact不要のも
 ## 配布物の構成
 
 ```
-lp-section-studio-v1.0.0.zip
-├─ README.md              使い方・導入手順
-├─ LICENSE                ライセンス条文
-├─ components/            React/TypeScript ソース 880件
+lp-section-studio-v1.0.0.zip                     9.6 MB / 4555 ファイル
+├─ README.md              使い方・導入手順（docs/dist-README.md が原本）
+├─ LICENSE                ライセンス条文（リポジトリ root の LICENSE が原本）
+├─ components/            React/TypeScript ソース 901件
+│   ├─ demos/             880件（これが商品本体）
+│   ├─ ui/                5件   Button / Card / Badge / Input / Switch
+│   ├─ lib/               2件   cn() と i18n
+│   ├─ registry/          12件  DemoMeta 型と i18n
+│   └─ theme/             2件   tailwind.config.js と tokens.css
 ├─ html/                  静的HTML 880件 + index.json（standalone 判定つき）
 ├─ registry/              shadcn 互換 JSON 885件
-├─ mcp/                   MCPサーバ（全部入り版）
-└─ studio/                ビルド済みスタジオ（ローカルで開ける）
+├─ mcp/                   MCPサーバ（全部入り版 880件・LICENSE 同梱）
+└─ studio/                ビルド済みスタジオ
 ```
 
+`components/` が 880 でなく 901 なのは、demos の 880 件が
+`@/components/ui/*`・`@/lib/utils`・`@/registry`（型）を参照するため。
+これらを入れないと買った側でコンパイルが通らない。`theme/` は
+`bg-card` などのトークン定義で、これが無いと色が出ない。
+
 生成手順:
 
 ```bash
-npm run html                              # 静的HTML 880件
-node scripts/build-mcp-bundle.mjs --all   # MCP全部入り版
-npm run registry                          # shadcn配信JSON
-npm run build                             # スタジオ
+npm run html                    # 静的HTML 880件 → public/html/
+npm run build                   # スタジオ + shadcn配信JSON（registry を内包）
+node scripts/build-release.mjs  # 上を集めて ZIP 化（MCP全部入り版もここで作る）
+node scripts/verify-release.mjs # ZIPを展開して件数・混入・実描画を検査
 ```
 
+`build-release.mjs` がやっていること（手でやると間違えるところ）:
+
+- `build-mcp-bundle.mjs --all` は出力先が `mcp/data/components.json` 固定で、
+  リポジトリの無料版データを上書きしてしまう。退避 → 生成 → 復元している。
+- 静的HTML と MCP が返す HTML に、Tailwind のトークン設定が入っているかを検める。
+  素の `cdn.tailwindcss.com` には `bg-card` 等が無く、**880件中430件**がこれを
+  使っているため、入っていないとその分の色が一切出ない。埋め込み自体は書き出しの
+  源流（`src/lib/vanilla.ts` + `scripts/build-vanilla-head.mjs`）が行うので、
+  ここでは足さずに検査だけする（同じ内容を2箇所に持たないため）。
+- Vite が `public/` を丸ごと `dist/` に写すので、そのままだと `studio/` の中に
+  `registry/` と `html/` が二重で入る（12MB の無駄）。除外している。
+- `node_modules` / `.git` / `.env` / `crawler/` などを混入させない。
+
 ---
 
-## ライセンス条文（LICENSE として同梱する）
+## ライセンス条文
+
+**正本はリポジトリ root の [`LICENSE`](../LICENSE)。** ここに転記はしない
+（二重管理になると、直したつもりの片方だけが配布されるため）。
+`build-release.mjs` がそのファイルを ZIP の `LICENSE` と `mcp/LICENSE` に入れる。
 
 弁護士レビューは行わない方針のため、Tailwind UI や Aceternity が公開している
 商用ライセンスと同型の、実務で一般的な条項に留める。特殊な条項は入れない。
 
-```
-LP Section Studio ライセンス
-
-購入者は、本製品に含まれるコンポーネント（ソースコード・静的HTML・
-レジストリJSON を含む）について、以下の範囲で利用できます。
+この手順書に元々書いてあった草案からの変更点は次の3つ:
 
-【できること】
-・商用・非商用を問わず、無制限の数のプロジェクトで利用すること
-・自身または自社のために制作するウェブサイト・アプリケーションに
-  組み込むこと
-・受託制作において、クライアントに納品する成果物に組み込むこと
-・コンポーネントを改変して利用すること
+1. **無料版の条項を足した。** 草案は「購入者は…」しか書いておらず、MCP 経由で
+   配る無料版100個の扱いが読み取れなかった。`src/pages/Pricing.tsx` の FAQ は
+   「無料版は個人利用・非商用の範囲」と明記しているので、条文にも入れた。
+   無料版と買い切り版で条件が違う以上、どちらの版の話かが読んで分かる必要がある。
+2. **英訳を用意した。** 草案は「（同内容の英訳。公開前に用意する）」という
+   プレースホルダのままだった。日本語版を正文とし、相違があれば日本語が優先する
+   旨を末尾に入れてある。
+3. **第三者ソフトウェアの節を足した。** react / lucide-react / clsx /
+   tailwind-merge / class-variance-authority / Tailwind CSS は本製品に含まれず、
+   それぞれの MIT ライセンスが適用される、という当たり前の確認。
 
-【できないこと】
-・本製品そのもの、またはその一部を、コンポーネント集・テンプレート集
-  として再配布・再販すること
-・本製品を、これと競合する製品（UIコンポーネント集、UIキット等）の
-  素材として利用すること
-・購入していない第三者に、ソースコード一式を共有すること
+【保証】は草案では買い切り版の条項の途中にあったが、無料版にも当然かかるので
+両方に適用される共通節として末尾に置いた。文面は変えていない。
 
-【保証】
-本製品は現状有姿で提供されます。特定目的への適合性を含め、明示・
-黙示を問わず、いかなる保証も行いません。本製品の利用により生じた
-いかなる損害についても、作者は責任を負いません。
+---
 
-【購入者の範囲】
-1ライセンスにつき、個人1名または法人内の1チーム（5名まで）が
-利用できます。
+## 出品前の確認
 
---- English ---
+機械で確かめられるものは `node scripts/verify-release.mjs` に入れてある
+（件数・禁止物の混入・LICENSE の中身・静的HTMLの実描画・スタジオの起動）。
+残りは人がやる。
+
+- [x] zip を実際に展開し、README の手順どおりに動くかを別ディレクトリで確認
+      → `verify-release.mjs`。展開して 4555 ファイル・全件数一致を確認済み
+- [x] 静的HTML を1つブラウザで開き、React 無しで表示されることを目視確認
+      → 実ブラウザで3件を実測。880件を走査して外部参照は
+        `cdn.tailwindcss.com` のみ、react も babel も含まれない
+- [x] MCP 全部入り版を入れ、880個返ることを確認
+      → ZIP から展開したサーバに stdio で JSON-RPC を投げ、
+        `list_categories` が「収録 880 件 / 39 カテゴリ」を返すことを確認
+- [x] LICENSE の英訳を用意 → root の `LICENSE` に収録
+- [ ] 手数料（5.6% + 22円）が現行かを BOOTH 公式で再確認（**人手**）
+- [ ] 商品説明の数字の照合 → 880 / 397 / 100 は一致を確認済み。
+      **109 だけ未確認**（下記）
+- [ ] スクリーンショット（スタジオ画面・検査の実行結果・静的HTMLの表示例）（**人手**）
+- [ ] note 記事を先に公開し、末尾から BOOTH へのリンクを張る（**人手**）
+
+### 「109件」について
+
+いま4つの検査はすべて 0 件なので、109 という数字は再実行では出せない。
+さらに note 記事に載せている内訳は、そのままでは 109 にならない。
 
-（同内容の英訳。公開前に用意する）
+```
+コントラスト 12 + axe 29 + キーボード 0 + 横スクロール 26 = 67
 ```
 
----
-
-## 出品前の確認
-
-- [ ] 手数料（5.6% + 22円）が現行かを BOOTH 公式で再確認
-- [ ] zip を実際に展開し、README の手順どおりに動くかを別ディレクトリで確認
-- [ ] 静的HTML を1つブラウザで開き、React 無しで表示されることを目視確認
-- [ ] MCP 全部入り版を `claude mcp add` で入れ、880個返ることを確認
-- [ ] 商品説明の数字（880 / 397 / 109 / 100）が最新の実行結果と一致するか照合
-- [ ] LICENSE の英訳を用意
-- [ ] スクリーンショット（スタジオ画面・検査の実行結果・静的HTMLの表示例）
-- [ ] note 記事を先に公開し、末尾から BOOTH へのリンクを張る
+記事本文は「axe が button-name 違反を29箇所」とも書いていて、
+「29コンポーネント」と「29箇所」のどちらなのかで数え方が変わる。
+109 は違反ノード数、67 はコンポーネント数、という可能性が高いが、
+当時のログが残っていないため確認できない。**公開前に、どちらの数え方で
+109 なのかを本人が確定させ、記事と商品説明の両方を揃えること。**
+読み手が引き算できてしまう場所なので、合わない数字は信用を落とす。
 
 ---
 
diff --git a/docs/note-article.md b/docs/note-article.md
index a10d1d5..8bed390 100644
--- a/docs/note-article.md
+++ b/docs/note-article.md
@@ -1,6 +1,6 @@
-# 自作コンポーネント880個を全部機械検査にかけたら、109件の欠陥が出てきた
+# 「109件の欠陥を直した」と書こうとしたら、その109という数字が間違っていた
 
-> note 掲載用の原稿。公開前に「事実確認」の節の数字を再実行して照合すること。
+> note 掲載用の原稿。公開前に「事実確認」の節のコマンドを実行して数字を照合すること。
 
 ---
 
@@ -10,9 +10,22 @@ React + TypeScript + Tailwind で、1ファイル1コンポーネント。ヒー
 
 そのテストが見ていたのは、**「描画しても例外が出ないこと」だけ**でした。
 
-そこに検査を4つ足しました。結果、**109件の欠陥**が出てきました。全部、自分で書いて、自分で目視確認して、緑のCIを通してきたものです。
+そこに検査を4つ足したら、欠陥がぼろぼろ出てきました。全部、自分で書いて、自分で目視確認して、緑のCIを通してきたものです。その顛末を記事にしようとして、下書きにこう書きました。
 
-この記事は、その109件が何だったのかという話です。
+> 結果、109件の欠陥が出てきました。
+
+公開直前に内訳を並べ直したら、こうなりました。
+
+```
+コントラスト  12
+axe          29
+キーボード     0
+横スクロール  26
+```
+
+**67です。** 109ではありません。どこから109が出てきたのか、自分でも分かりませんでした。ログを探しても出てこない。おそらく途中の作業ログのどれかの数字を、確認せずに書き写したのだと思います。
+
+検査を入れて品質を語る記事で、その記事の数字が検算されていない。笑えないので、この話から始めることにしました。以下、67件が何だったのかという話と、**それを全部直した後で見つかった、もっと大きい1件**の話です。
 
 ---
 
@@ -27,26 +40,15 @@ React + TypeScript + Tailwind で、1ファイル1コンポーネント。ヒー
 
 4つに分けたのには理由があります。**jsdom には描画エンジンが無いので、色も幅も測れない**からです。axe を jsdom で走らせても `color-contrast` ルールは動きません。だから色はトークン定義そのものを数値で計算し、幅は実ブラウザ（Chromium）で測る。役割を分けないと、検査したつもりの穴ができます。
 
----
-
-## 出てきたもの
-
-```
-コントラスト  12組が基準未達
-axe          29コンポーネントに違反
-キーボード    0件（これは通った）
-横スクロール  26コンポーネントがモバイル幅でページを破る
-```
-
-合計109件。以下、印象に残ったものを4つ。
+以下、印象に残ったものを4つ。
 
 ---
 
 ### 1. コンポーネントが aria-label を握りつぶしていた
 
-axe が `button-name` 違反を29箇所出しました。「ボタンに名前がない」——アイコンだけのボタンで、スクリーンリーダーが用途を読めない状態です。
+axe が `button-name` 違反を29件出しました。「ボタンに名前がない」——アイコンだけのボタンで、スクリーンリーダーが用途を読めない状態です。
 
-そのうち13箇所が `<Switch>` でした。原因を見に行くと、こうなっていました。
+そのうち13件が `<Switch>` でした。原因を見に行くと、こうなっていました。
 
 ```tsx
 export interface SwitchProps {
@@ -73,7 +75,7 @@ export interface SwitchProps {
 
 **渡していたんです。**書いた本人（私）は正しくやろうとしていて、コンポーネント側が黙って捨てていた。
 
-これは使用箇所をいくらレビューしても見つかりません。コードとしては完璧に見えるからです。実際に描画してその結果を検査して初めて出てきました。
+これは使用箇所をいくらレビューしても見つかりません。コードとしては完璧に見えるからです。実際に描画して、その結果を検査して初めて出てきました。
 
 ---
 
@@ -139,9 +141,7 @@ on ? "bg-primary" : "bg-input"   // スイッチのOFF時トラック
 
 ---
 
-## 直した
-
-全部直しました。
+## 全部直した。そして、もっと大きいのが出てきた
 
 ```
 コントラスト  12 → 0
@@ -150,51 +150,86 @@ axe          29 → 0
 横スクロール  26 → 0
 ```
 
-修正は880個中およそ60ファイルに及びました。ほとんどは `aria-label` を足すような機械的なものですが、いくつかは構造を変える必要がありました（`role="button"` のカードの中にボタンがあって入れ子になっていたもの、`<dl>` が仕様上持てない構造だったもの、など）。
+4つとも0。CIも緑。ここで満足して、配布用のZIPを作りはじめました。
 
-そして途中で**別のテストが8件落ちました。**LPビルダーがコンポーネントの描画HTMLを文字列一致で探していて、`aria-label` が増えたぶん一致しなくなったためです。既存のテストが波及を捕まえてくれました。
+このコンポーネント集には「React を使っていない人でも使えるように、静的HTMLとしても書き出せる」という売りがあります。880個のうち397個は状態を持たない純粋な表示部品なので、React 抜きのHTMLとして完成する。その書き出しHTMLを、念のため実ブラウザで開いて色を測りました。
 
----
+```
+bg-card の背景色              rgba(0, 0, 0, 0)   ← 透明
+text-muted-foreground の文字色 rgb(0, 0, 0)       ← 真っ黒
+```
 
-## 残さなかったこと
+**色が、出ていませんでした。**
 
-検査を入れた時点では、当然ながら大量に赤くなります。ここで「一旦 skip」とすると、検査そのものが忘れられます。
+書き出したHTMLは、Tailwind の CDN を1行読むだけの構成でした。
 
-なので baseline ファイルに既知分を列挙し、次の2方向で固定しました。
+```html
+<script src="https://cdn.tailwindcss.com"></script>
+```
+
+これで `flex` や `p-4` は効きます。でも `bg-card` や `text-muted-foreground` は**素の Tailwind には存在しません**。このプロジェクトが `tailwind.config.js` と `:root` の CSS 変数で定義した、独自のトークンだからです。CDN はそんな定義を知らない。だから何も生成されず、背景は透明のまま、文字は初期値の黒のままになる。
 
-1. **一覧に無いものの違反は即失敗** → 新規混入を止める
-2. **一覧にあるのに違反が無くなったものも失敗** → 直したら必ず消す
+数えたら、**880個中430個**が該当しました。無料で配ろうとしていたMCP版100個のうち30個も、これに含まれていました。
 
-一覧は減る方向にしか動きません。そして今、両方とも空です。
+4つの検査は、全部この欠陥を素通りしていました。当たり前です。検査していたのは**React コンポーネントとして描画した結果**であって、**書き出したHTML**ではなかったからです。アプリの中では `index.css` が読み込まれているので、トークンは全部解決する。検査は緑になる。書き出した先には、その `index.css` が付いていかない。
+
+「検査を4つ入れて全部緑にしました」と胸を張った直後に、検査していない経路が丸ごと壊れていた。67件を直した話より、こっちのほうが教訓としては大きいと思います。
 
 ---
 
-## やってみて思ったこと
+## 直し方
+
+`wrapDocument()`（HTMLの外枠を作る関数）で、CDN の script の直後にトークン定義を差し込むようにしました。
+
+```html
+<script src="https://cdn.tailwindcss.com"></script>
+<script>
+  tailwind.config = { darkMode: "class", theme: { extend: { colors: { card: "hsl(var(--card))", ... } } } };
+</script>
+<style>
+  :root { --card: 0 0% 100%; --muted-foreground: 240 3.8% 46.1%; ... }
+  .dark { ... }
+</style>
+```
+
+値は `tailwind.config.js` と `src/index.css` から生成しています。手で書き写すと、いつか必ずズレるからです。
+
+直した後、同じ3件をもう一度ブラウザで測りました。
 
-**目視は、この種の欠陥に対して無力です。**
+```
+bg-card の背景色              rgba(0, 0, 0, 0) → rgb(255, 255, 255)
+text-muted-foreground の文字色 rgb(0, 0, 0)     → rgb(113, 113, 122)
+bg-muted の背景色             rgba(0, 0, 0, 0) → rgb(244, 244, 245)
+```
+
+880個すべてで注入を確認。HTMLは1件あたり3.7KB増えました。
+
+ついでに、**この欠陥を再発させない検査**を足しました。配布ZIPを作るスクリプトが、トークン設定の入っていないHTMLを1件でも見つけたら、そこで止まって「`npm run html` を実行しろ」と言って終了します。中身のコピーを持たせず、「入っているかどうか」だけを見る検査です。
 
-1.27:1 のコントラストも、一瞬だけ出る横スクロールバーも、捨てられている `aria-label` も、見て気づけるものではありません。私は2年間これらを見続けていて、1件も気づきませんでした。
+---
+
+## 分かったこと
 
-同時に、**検査を作るのは思ったより軽い作業でした。**4つ合わせて数百行です。難しいのは検査を書くことではなく、「検査していない」という状態に気づくことのほうでした。CIが緑だと、検査した気になります。
+**検査は、検査した経路しか守らない。** これに尽きます。
 
-もうひとつ。**検査は、売り文句の精度も上げました。**
+4つの検査はどれも真面目に書いたもので、実際に67件を掘り出しました。でもそれは「Reactとして描画したとき」の話でした。同じコンポーネントが別の形（静的HTML）で出ていく経路があることを、検査の設計に入れ忘れていた。緑のCIは、その穴の存在を教えてくれません。むしろ「全部見た」という誤った安心をくれます。
 
-このコンポーネント集は「React を使わない現場でも使える」ことを特徴にしようとしていました。静的HTMLとして書き出せるからです。ところが全880件を実際に書き出して数えたら、**そのまま使えるのは397個**でした。残り483個は状態や操作を持つので、静的版は見た目だけになります。
+もうひとつ。**配る前に、配る形のまま自分で開いてみる。** 今回それをやったのは半分偶然でした。ZIPの中身を確認していて、なんとなくブラウザにドラッグしただけです。やらなければ、色の出ないコンポーネント430個をそのまま出荷していました。
 
-「880個すべてがReact不要」と書きたくなるところでした。測っていなければ、そう書いていたと思います。
+そして、この記事の書き出しに戻ります。109という数字も、検算せずに書いていました。**測ったつもり・数えたつもりが、いちばん危ない。**
 
 ---
 
 ## 事実確認
 
-この記事の数字は、以下のコマンドで再現できます。
+この記事の数字は、以下で再現できます。
 
 ```bash
-npm test                  # 描画・コントラスト・a11y・キーボード
-npm run check:contrast    # コントラスト（全組み合わせを表示）
-npm run check:overflow    # 横スクロール（実ブラウザ・幅375px）
+node scripts/check-contrast.mjs   # コントラスト → 0件
+npm test                          # axe / キーボード / 描画
+node scripts/check-overflow.mjs   # 横スクロール → 0件
+node scripts/build-release.mjs    # 配布物（トークン注入の検査を含む）
+node scripts/verify-release.mjs   # 展開して実ブラウザで描画確認
 ```
 
----
-
-*このコンポーネント集は、無料のMCPサーバとして100個を配っています。全880個は買い切りです。（※リンクは公開時に差し替え）*
+導入時点の違反数（12 / 29 / 0 / 26）は、当時の記録がコード内のコメントに残っています（`src/registry/a11y.test.tsx` と `scripts/check-overflow.mjs` の冒頭）。
diff --git a/mcp/data/components.json b/mcp/data/components.json
index 2f21e62..10894d1 100644
--- a/mcp/data/components.json
+++ b/mcp/data/components.json
@@ -16,7 +16,7 @@
       ],
       "standalone": true,
       "source": "import { ArrowRight, MessageSquare, Sparkles, Star } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"アシスタント紹介カード\",\n  category: \"AI / チャット\",\n  description: \"AIアシスタントのプロフィールと得意分野を示すカード。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"ai\", \"chat\", \"animation\"],\n};\n\nconst SKILLS = [\n  { ja: \"コード生成\", en: \"Code generation\" },\n  { ja: \"要約\", en: \"Summarization\" },\n  { ja: \"翻訳\", en: \"Translation\" },\n  { ja: \"データ分析\", en: \"Data analysis\" },\n];\n\nexport default function AssistantCard() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <div className=\"w-full max-w-[360px]\">\n      <div className=\"group relative overflow-hidden rounded-2xl border bg-card p-6 shadow-sm transition-shadow hover:shadow-lg\">\n        <div\n          aria-hidden\n          className=\"pointer-events-none absolute -right-16 -top-16 size-40 rounded-full bg-violet-500/15 blur-3xl transition-transform duration-500 group-hover:scale-125\"\n        />\n\n        <div className=\"relative flex items-center gap-4\">\n          <div className=\"relative\">\n            <div className=\"flex size-14 items-center justify-center rounded-2xl bg-gradient-to-br from-fuchsia-500 via-violet-500 to-sky-500 text-white shadow-lg shadow-violet-500/30\">\n              <Sparkles className=\"size-7\" />\n            </div>\n            <span className=\"absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full bg-emerald-400 ring-2 ring-card\" />\n          </div>\n          <div>\n            <h3 className=\"text-lg font-bold leading-tight\">{en ? \"Assistant Pro\" : \"アシスタント Pro\"}</h3>\n            <div className=\"mt-1 flex items-center gap-1 text-xs text-muted-foreground\">\n              <Star className=\"size-3 fill-amber-400 text-amber-400\" />\n              <span className=\"font-semibold text-foreground\">4.9</span>\n              <span>{en ? \"· 12k chats\" : \"· 12k 会話\"}</span>\n            </div>\n          </div>\n        </div>\n\n        <p className=\"relative mt-4 text-sm leading-relaxed text-muted-foreground\">\n          {en\n            ? \"A versatile assistant that handles a wide range of tasks with high accuracy — from long-form reading to code generation.\"\n            : \"長文の読解からコード生成まで、幅広いタスクを高精度でこなす汎用アシスタントです。\"}\n        </p>\n\n        <div className=\"relative mt-4 flex flex-wrap gap-1.5\">\n          {SKILLS.map((s) => (\n            <span\n              key={s.ja}\n              className=\"rounded-full bg-muted px-2.5 py-1 text-[11px] font-medium text-muted-foreground\"\n            >\n              {en ? s.en : s.ja}\n            </span>\n          ))}\n        </div>\n\n        <button\n          type=\"button\"\n          className=\"relative mt-5 flex w-full items-center justify-center gap-2 rounded-xl bg-foreground py-2.5 text-sm font-semibold text-background transition-transform active:scale-[0.98]\"\n        >\n          <MessageSquare className=\"size-4\" />\n          {en ? \"Start a chat\" : \"会話を始める\"}\n          <ArrowRight className=\"size-4 transition-transform group-hover:translate-x-0.5\" />\n        </button>\n      </div>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"w-full max-w-[360px]\">\n      <div class=\"group relative overflow-hidden rounded-2xl border bg-card p-6 shadow-sm transition-shadow hover:shadow-lg\">\n        <div aria-hidden=\"true\" class=\"pointer-events-none absolute -right-16 -top-16 size-40 rounded-full bg-violet-500/15 blur-3xl transition-transform duration-500 group-hover:scale-125\">\n        </div>\n        <div class=\"relative flex items-center gap-4\">\n          <div class=\"relative\">\n            <div class=\"flex size-14 items-center justify-center rounded-2xl bg-gradient-to-br from-fuchsia-500 via-violet-500 to-sky-500 text-white shadow-lg shadow-violet-500/30\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-7\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n            </div>\n            <span class=\"absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full bg-emerald-400 ring-2 ring-card\">\n            </span>\n          </div>\n          <div>\n            <h3 class=\"text-lg font-bold leading-tight\">\n              アシスタント Pro\n            </h3>\n            <div class=\"mt-1 flex items-center gap-1 text-xs text-muted-foreground\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3 fill-amber-400 text-amber-400\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <span class=\"font-semibold text-foreground\">\n                4.9\n              </span>\n              <span>\n                · 12k 会話\n              </span>\n            </div>\n          </div>\n        </div>\n        <p class=\"relative mt-4 text-sm leading-relaxed text-muted-foreground\">\n          長文の読解からコード生成まで、幅広いタスクを高精度でこなす汎用アシスタントです。\n        </p>\n        <div class=\"relative mt-4 flex flex-wrap gap-1.5\">\n          <span class=\"rounded-full bg-muted px-2.5 py-1 text-[11px] font-medium text-muted-foreground\">\n            コード生成\n          </span>\n          <span class=\"rounded-full bg-muted px-2.5 py-1 text-[11px] font-medium text-muted-foreground\">\n            要約\n          </span>\n          <span class=\"rounded-full bg-muted px-2.5 py-1 text-[11px] font-medium text-muted-foreground\">\n            翻訳\n          </span>\n          <span class=\"rounded-full bg-muted px-2.5 py-1 text-[11px] font-medium text-muted-foreground\">\n            データ分析\n          </span>\n        </div>\n        <button type=\"button\" class=\"relative mt-5 flex w-full items-center justify-center gap-2 rounded-xl bg-foreground py-2.5 text-sm font-semibold text-background transition-transform active:scale-[0.98]\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-message-square size-4\">\n            <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\">\n            </path>\n          </svg>\n          会話を始める\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right size-4 transition-transform group-hover:translate-x-0.5\">\n            <path d=\"M5 12h14\">\n            </path>\n            <path d=\"m12 5 7 7-7 7\">\n            </path>\n          </svg>\n        </button>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"w-full max-w-[360px]\">\n      <div class=\"group relative overflow-hidden rounded-2xl border bg-card p-6 shadow-sm transition-shadow hover:shadow-lg\">\n        <div aria-hidden=\"true\" class=\"pointer-events-none absolute -right-16 -top-16 size-40 rounded-full bg-violet-500/15 blur-3xl transition-transform duration-500 group-hover:scale-125\">\n        </div>\n        <div class=\"relative flex items-center gap-4\">\n          <div class=\"relative\">\n            <div class=\"flex size-14 items-center justify-center rounded-2xl bg-gradient-to-br from-fuchsia-500 via-violet-500 to-sky-500 text-white shadow-lg shadow-violet-500/30\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-7\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n            </div>\n            <span class=\"absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full bg-emerald-400 ring-2 ring-card\">\n            </span>\n          </div>\n          <div>\n            <h3 class=\"text-lg font-bold leading-tight\">\n              アシスタント Pro\n            </h3>\n            <div class=\"mt-1 flex items-center gap-1 text-xs text-muted-foreground\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3 fill-amber-400 text-amber-400\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <span class=\"font-semibold text-foreground\">\n                4.9\n              </span>\n              <span>\n                · 12k 会話\n              </span>\n            </div>\n          </div>\n        </div>\n        <p class=\"relative mt-4 text-sm leading-relaxed text-muted-foreground\">\n          長文の読解からコード生成まで、幅広いタスクを高精度でこなす汎用アシスタントです。\n        </p>\n        <div class=\"relative mt-4 flex flex-wrap gap-1.5\">\n          <span class=\"rounded-full bg-muted px-2.5 py-1 text-[11px] font-medium text-muted-foreground\">\n            コード生成\n          </span>\n          <span class=\"rounded-full bg-muted px-2.5 py-1 text-[11px] font-medium text-muted-foreground\">\n            要約\n          </span>\n          <span class=\"rounded-full bg-muted px-2.5 py-1 text-[11px] font-medium text-muted-foreground\">\n            翻訳\n          </span>\n          <span class=\"rounded-full bg-muted px-2.5 py-1 text-[11px] font-medium text-muted-foreground\">\n            データ分析\n          </span>\n        </div>\n        <button type=\"button\" class=\"relative mt-5 flex w-full items-center justify-center gap-2 rounded-xl bg-foreground py-2.5 text-sm font-semibold text-background transition-transform active:scale-[0.98]\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-message-square size-4\">\n            <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\">\n            </path>\n          </svg>\n          会話を始める\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right size-4 transition-transform group-hover:translate-x-0.5\">\n            <path d=\"M5 12h14\">\n            </path>\n            <path d=\"m12 5 7 7-7 7\">\n            </path>\n          </svg>\n        </button>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "ai2-chat-bubble-variants",
@@ -30,7 +30,7 @@
       ],
       "standalone": true,
       "source": "import { AlertTriangle, Bot, Check, Info } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"チャットバブル種別\",\n  category: \"AI / チャット\",\n  description: \"ユーザー・アシスタント・通知・警告の各バブル見本。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"ai\", \"chat\", \"animation\"],\n};\n\nexport default function ChatBubbleVariants() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <div className=\"w-full max-w-[560px] space-y-4 rounded-2xl border bg-card p-5\">\n      {/* user */}\n      <div className=\"flex flex-row-reverse gap-3\">\n        <div className=\"flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-bold text-muted-foreground\">\n          YK\n        </div>\n        <div className=\"max-w-[75%] rounded-2xl rounded-tr-md bg-gradient-to-br from-violet-600 to-sky-600 px-4 py-2.5 text-sm text-white shadow-sm\">\n          {en ? \"How do I use this component?\" : \"このコンポーネントの使い方を教えて\"}\n        </div>\n      </div>\n\n      {/* assistant */}\n      <div className=\"flex gap-3\">\n        <div className=\"flex size-8 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-violet-500 to-sky-500 text-white\">\n          <Bot className=\"size-4\" />\n        </div>\n        <div className=\"max-w-[75%] rounded-2xl rounded-tl-md bg-muted px-4 py-2.5 text-sm leading-relaxed text-foreground shadow-sm\">\n          {en\n            ? \"These variants use different colors for each state. Let me walk you through the details next.\"\n            : \"こちらのバリアントは状態ごとに配色を変えています。続けて詳細を説明しますね。\"}\n        </div>\n      </div>\n\n      {/* system / notice */}\n      <div className=\"flex items-center justify-center\">\n        <div className=\"inline-flex items-center gap-1.5 rounded-full bg-sky-500/10 px-3 py-1 text-[11px] font-medium text-sky-500\">\n          <Info className=\"size-3\" />\n          {en ? \"Switched to a new model\" : \"新しいモデルに切り替わりました\"}\n        </div>\n      </div>\n\n      {/* success inline */}\n      <Notice\n        icon={Check}\n        tone=\"emerald\"\n        title={en ? \"Saved\" : \"保存しました\"}\n        body={en ? \"Your conversation was saved to history.\" : \"会話の内容を履歴に保存しました。\"}\n      />\n\n      {/* warning */}\n      <Notice\n        icon={AlertTriangle}\n        tone=\"amber\"\n        title={en ? \"Approaching the token limit\" : \"トークン上限に近づいています\"}\n        body={en ? \"Long conversations may be summarized.\" : \"長い会話は要約されることがあります。\"}\n      />\n    </div>\n  );\n}\n\nfunction Notice({\n  icon: Icon,\n  tone,\n  title,\n  body,\n}: {\n  icon: typeof Info;\n  tone: \"emerald\" | \"amber\";\n  title: string;\n  body: string;\n}) {\n  const tones = {\n    emerald: \"border-emerald-500/30 bg-emerald-500/5 text-emerald-500\",\n    amber: \"border-amber-500/30 bg-amber-500/5 text-amber-500\",\n  };\n  return (\n    <div className={cn(\"flex gap-3 rounded-xl border p-3\", tones[tone])}>\n      <Icon className=\"mt-0.5 size-4 shrink-0\" />\n      <div className=\"text-foreground\">\n        <p className=\"text-sm font-medium\">{title}</p>\n        <p className=\"mt-0.5 text-xs text-muted-foreground\">{body}</p>\n      </div>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"w-full max-w-[560px] space-y-4 rounded-2xl border bg-card p-5\">\n      <div class=\"flex flex-row-reverse gap-3\">\n        <div class=\"flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-bold text-muted-foreground\">\n          YK\n        </div>\n        <div class=\"max-w-[75%] rounded-2xl rounded-tr-md bg-gradient-to-br from-violet-600 to-sky-600 px-4 py-2.5 text-sm text-white shadow-sm\">\n          このコンポーネントの使い方を教えて\n        </div>\n      </div>\n      <div class=\"flex gap-3\">\n        <div class=\"flex size-8 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-violet-500 to-sky-500 text-white\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-bot size-4\">\n            <path d=\"M12 8V4H8\">\n            </path>\n            <rect width=\"16\" height=\"12\" x=\"4\" y=\"8\" rx=\"2\">\n            </rect>\n            <path d=\"M2 14h2\">\n            </path>\n            <path d=\"M20 14h2\">\n            </path>\n            <path d=\"M15 13v2\">\n            </path>\n            <path d=\"M9 13v2\">\n            </path>\n          </svg>\n        </div>\n        <div class=\"max-w-[75%] rounded-2xl rounded-tl-md bg-muted px-4 py-2.5 text-sm leading-relaxed text-foreground shadow-sm\">\n          こちらのバリアントは状態ごとに配色を変えています。続けて詳細を説明しますね。\n        </div>\n      </div>\n      <div class=\"flex items-center justify-center\">\n        <div class=\"inline-flex items-center gap-1.5 rounded-full bg-sky-500/10 px-3 py-1 text-[11px] font-medium text-sky-500\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-info size-3\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\">\n            </circle>\n            <path d=\"M12 16v-4\">\n            </path>\n            <path d=\"M12 8h.01\">\n            </path>\n          </svg>\n          新しいモデルに切り替わりました\n        </div>\n      </div>\n      <div class=\"flex gap-3 rounded-xl border p-3 border-emerald-500/30 bg-emerald-500/5 text-emerald-500\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0\">\n          <path d=\"M20 6 9 17l-5-5\">\n          </path>\n        </svg>\n        <div class=\"text-foreground\">\n          <p class=\"text-sm font-medium\">\n            保存しました\n          </p>\n          <p class=\"mt-0.5 text-xs text-muted-foreground\">\n            会話の内容を履歴に保存しました。\n          </p>\n        </div>\n      </div>\n      <div class=\"flex gap-3 rounded-xl border p-3 border-amber-500/30 bg-amber-500/5 text-amber-500\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-triangle-alert mt-0.5 size-4 shrink-0\">\n          <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\">\n          </path>\n          <path d=\"M12 9v4\">\n          </path>\n          <path d=\"M12 17h.01\">\n          </path>\n        </svg>\n        <div class=\"text-foreground\">\n          <p class=\"text-sm font-medium\">\n            トークン上限に近づいています\n          </p>\n          <p class=\"mt-0.5 text-xs text-muted-foreground\">\n            長い会話は要約されることがあります。\n          </p>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"w-full max-w-[560px] space-y-4 rounded-2xl border bg-card p-5\">\n      <div class=\"flex flex-row-reverse gap-3\">\n        <div class=\"flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-bold text-muted-foreground\">\n          YK\n        </div>\n        <div class=\"max-w-[75%] rounded-2xl rounded-tr-md bg-gradient-to-br from-violet-600 to-sky-600 px-4 py-2.5 text-sm text-white shadow-sm\">\n          このコンポーネントの使い方を教えて\n        </div>\n      </div>\n      <div class=\"flex gap-3\">\n        <div class=\"flex size-8 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-violet-500 to-sky-500 text-white\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-bot size-4\">\n            <path d=\"M12 8V4H8\">\n            </path>\n            <rect width=\"16\" height=\"12\" x=\"4\" y=\"8\" rx=\"2\">\n            </rect>\n            <path d=\"M2 14h2\">\n            </path>\n            <path d=\"M20 14h2\">\n            </path>\n            <path d=\"M15 13v2\">\n            </path>\n            <path d=\"M9 13v2\">\n            </path>\n          </svg>\n        </div>\n        <div class=\"max-w-[75%] rounded-2xl rounded-tl-md bg-muted px-4 py-2.5 text-sm leading-relaxed text-foreground shadow-sm\">\n          こちらのバリアントは状態ごとに配色を変えています。続けて詳細を説明しますね。\n        </div>\n      </div>\n      <div class=\"flex items-center justify-center\">\n        <div class=\"inline-flex items-center gap-1.5 rounded-full bg-sky-500/10 px-3 py-1 text-[11px] font-medium text-sky-500\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-info size-3\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\">\n            </circle>\n            <path d=\"M12 16v-4\">\n            </path>\n            <path d=\"M12 8h.01\">\n            </path>\n          </svg>\n          新しいモデルに切り替わりました\n        </div>\n      </div>\n      <div class=\"flex gap-3 rounded-xl border p-3 border-emerald-500/30 bg-emerald-500/5 text-emerald-500\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0\">\n          <path d=\"M20 6 9 17l-5-5\">\n          </path>\n        </svg>\n        <div class=\"text-foreground\">\n          <p class=\"text-sm font-medium\">\n            保存しました\n          </p>\n          <p class=\"mt-0.5 text-xs text-muted-foreground\">\n            会話の内容を履歴に保存しました。\n          </p>\n        </div>\n      </div>\n      <div class=\"flex gap-3 rounded-xl border p-3 border-amber-500/30 bg-amber-500/5 text-amber-500\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-triangle-alert mt-0.5 size-4 shrink-0\">\n          <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\">\n          </path>\n          <path d=\"M12 9v4\">\n          </path>\n          <path d=\"M12 17h.01\">\n          </path>\n        </svg>\n        <div class=\"text-foreground\">\n          <p class=\"text-sm font-medium\">\n            トークン上限に近づいています\n          </p>\n          <p class=\"mt-0.5 text-xs text-muted-foreground\">\n            長い会話は要約されることがあります。\n          </p>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "ai2-thinking-indicator",
@@ -44,7 +44,7 @@
       ],
       "standalone": true,
       "source": "import { Bot } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"思考中インジケーター\",\n  category: \"AI / チャット\",\n  description: \"3つの点が脈打つ「考え中…」のタイピング表示。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"ai\", \"chat\", \"animation\"],\n};\n\nexport default function ThinkingIndicator() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <div className=\"w-full max-w-[420px] space-y-3\">\n      <style>{`\n        @keyframes ai2-think-dot {\n          0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }\n          40% { transform: translateY(-4px); opacity: 1; }\n        }\n      `}</style>\n\n      <div className=\"flex items-center gap-3\">\n        <div className=\"flex size-8 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-violet-500 to-sky-500 text-white shadow-md shadow-violet-500/20\">\n          <Bot className=\"size-4\" />\n        </div>\n        <div className=\"flex items-center gap-1.5 rounded-2xl rounded-tl-md bg-muted px-4 py-3\">\n          {[0, 0.16, 0.32].map((d) => (\n            <span\n              key={d}\n              className=\"size-2 rounded-full bg-violet-500\"\n              style={{ animation: `ai2-think-dot 1.2s ease-in-out ${d}s infinite` }}\n            />\n          ))}\n        </div>\n      </div>\n\n      <div className=\"flex items-center gap-3\">\n        <div className=\"size-8 shrink-0\" />\n        <div className=\"inline-flex items-center gap-2 rounded-full border bg-card px-3 py-1.5 text-xs text-muted-foreground\">\n          <span className=\"relative flex size-2\">\n            <span className=\"absolute inline-flex h-full w-full animate-ping rounded-full bg-violet-500/60\" />\n            <span className=\"relative inline-flex size-2 rounded-full bg-violet-500\" />\n          </span>\n          {en ? \"Thinking about a reply…\" : \"回答を考えています…\"}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"w-full max-w-[420px] space-y-3\">\n      <style>\n        @keyframes ai2-think-dot {\n              0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }\n              40% { transform: translateY(-4px); opacity: 1; }\n            }\n      </style>\n      <div class=\"flex items-center gap-3\">\n        <div class=\"flex size-8 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-violet-500 to-sky-500 text-white shadow-md shadow-violet-500/20\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-bot size-4\">\n            <path d=\"M12 8V4H8\">\n            </path>\n            <rect width=\"16\" height=\"12\" x=\"4\" y=\"8\" rx=\"2\">\n            </rect>\n            <path d=\"M2 14h2\">\n            </path>\n            <path d=\"M20 14h2\">\n            </path>\n            <path d=\"M15 13v2\">\n            </path>\n            <path d=\"M9 13v2\">\n            </path>\n          </svg>\n        </div>\n        <div class=\"flex items-center gap-1.5 rounded-2xl rounded-tl-md bg-muted px-4 py-3\">\n          <span class=\"size-2 rounded-full bg-violet-500\" style=\"animation:ai2-think-dot 1.2s ease-in-out 0s infinite\">\n          </span>\n          <span class=\"size-2 rounded-full bg-violet-500\" style=\"animation:ai2-think-dot 1.2s ease-in-out 0.16s infinite\">\n          </span>\n          <span class=\"size-2 rounded-full bg-violet-500\" style=\"animation:ai2-think-dot 1.2s ease-in-out 0.32s infinite\">\n          </span>\n        </div>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <div class=\"size-8 shrink-0\">\n        </div>\n        <div class=\"inline-flex items-center gap-2 rounded-full border bg-card px-3 py-1.5 text-xs text-muted-foreground\">\n          <span class=\"relative flex size-2\">\n            <span class=\"absolute inline-flex h-full w-full animate-ping rounded-full bg-violet-500/60\">\n            </span>\n            <span class=\"relative inline-flex size-2 rounded-full bg-violet-500\">\n            </span>\n          </span>\n          回答を考えています…\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"w-full max-w-[420px] space-y-3\">\n      <style>\n        @keyframes ai2-think-dot {\n              0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }\n              40% { transform: translateY(-4px); opacity: 1; }\n            }\n      </style>\n      <div class=\"flex items-center gap-3\">\n        <div class=\"flex size-8 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-violet-500 to-sky-500 text-white shadow-md shadow-violet-500/20\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-bot size-4\">\n            <path d=\"M12 8V4H8\">\n            </path>\n            <rect width=\"16\" height=\"12\" x=\"4\" y=\"8\" rx=\"2\">\n            </rect>\n            <path d=\"M2 14h2\">\n            </path>\n            <path d=\"M20 14h2\">\n            </path>\n            <path d=\"M15 13v2\">\n            </path>\n            <path d=\"M9 13v2\">\n            </path>\n          </svg>\n        </div>\n        <div class=\"flex items-center gap-1.5 rounded-2xl rounded-tl-md bg-muted px-4 py-3\">\n          <span class=\"size-2 rounded-full bg-violet-500\" style=\"animation:ai2-think-dot 1.2s ease-in-out 0s infinite\">\n          </span>\n          <span class=\"size-2 rounded-full bg-violet-500\" style=\"animation:ai2-think-dot 1.2s ease-in-out 0.16s infinite\">\n          </span>\n          <span class=\"size-2 rounded-full bg-violet-500\" style=\"animation:ai2-think-dot 1.2s ease-in-out 0.32s infinite\">\n          </span>\n        </div>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <div class=\"size-8 shrink-0\">\n        </div>\n        <div class=\"inline-flex items-center gap-2 rounded-full border bg-card px-3 py-1.5 text-xs text-muted-foreground\">\n          <span class=\"relative flex size-2\">\n            <span class=\"absolute inline-flex h-full w-full animate-ping rounded-full bg-violet-500/60\">\n            </span>\n            <span class=\"relative inline-flex size-2 rounded-full bg-violet-500\">\n            </span>\n          </span>\n          回答を考えています…\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "analytics-analytics-overview",
@@ -58,7 +58,7 @@
       ],
       "standalone": true,
       "source": "import { ArrowDownRight, ArrowUpRight, DollarSign, Eye, Users } from \"lucide-react\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { cn } from \"@/lib/utils\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"アナリティクス概要\",\n  category: \"ダッシュボード\",\n  description: \"3つのKPIタイルとグラデーション付きエリアチャートを備えた概要パネル。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"analytics\", \"charts\", \"kpi\"],\n};\n\nconst KPIS = [\n  {\n    label: { ja: \"総収益\", en: \"Total revenue\" },\n    value: \"¥4,820,400\",\n    delta: 12.4,\n    icon: DollarSign,\n    up: true,\n  },\n  {\n    label: { ja: \"アクティブユーザー\", en: \"Active users\" },\n    value: \"38,294\",\n    delta: 8.1,\n    icon: Users,\n    up: true,\n  },\n  {\n    label: { ja: \"ページビュー\", en: \"Page views\" },\n    value: \"1.24M\",\n    delta: -2.6,\n    icon: Eye,\n    up: false,\n  },\n];\n\n// 28日分のサンプルデータ（0-100）\nconst SERIES = [\n  32, 38, 30, 44, 41, 52, 48, 60, 55, 67, 62, 71, 69, 78, 74, 82, 79, 88, 84,\n  92, 86, 95, 90, 98, 93, 100, 96, 99,\n];\n\nfunction buildPaths(data: number[], width: number, height: number, pad: number) {\n  const max = Math.max(...data);\n  const min = Math.min(...data);\n  const span = max - min || 1;\n  const innerW = width - pad * 2;\n  const innerH = height - pad * 2;\n  const points = data.map((v, i) => {\n    const x = pad + (i / (data.length - 1)) * innerW;\n    const y = pad + innerH - ((v - min) / span) * innerH;\n    return [x, y] as const;\n  });\n  const line = points\n    .map(([x, y], i) => `${i === 0 ? \"M\" : \"L\"}${x.toFixed(2)},${y.toFixed(2)}`)\n    .join(\" \");\n  const area = `${line} L${(width - pad).toFixed(2)},${(height - pad).toFixed(\n    2\n  )} L${pad.toFixed(2)},${(height - pad).toFixed(2)} Z`;\n  return { line, area, points };\n}\n\nexport default function AnalyticsOverview() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  const W = 760;\n  const H = 240;\n  const PAD = 12;\n  const { line, area, points } = buildPaths(SERIES, W, H, PAD);\n  const last = points[points.length - 1];\n\n  return (\n    <Card className=\"w-full\">\n      <CardContent className=\"p-6\">\n        <div className=\"flex flex-wrap items-end justify-between gap-3\">\n          <div>\n            <h3 className=\"text-base font-semibold tracking-tight\">\n              {en ? \"Performance overview\" : \"パフォーマンス概要\"}\n            </h3>\n            <p className=\"text-sm text-muted-foreground\">\n              {en ? \"Last 28 days\" : \"過去28日間の推移\"}\n            </p>\n          </div>\n          <div className=\"flex items-center gap-4 text-xs text-muted-foreground\">\n            <span className=\"flex items-center gap-1.5\">\n              <span className=\"size-2 rounded-full bg-primary\" />\n              {en ? \"Revenue\" : \"収益\"}\n            </span>\n            <span className=\"flex items-center gap-1.5\">\n              <span className=\"size-2 rounded-full bg-muted-foreground/40\" />\n              {en ? \"Previous period\" : \"前期間\"}\n            </span>\n          </div>\n        </div>\n\n        <div className=\"mt-5 grid gap-3 sm:grid-cols-3\">\n          {KPIS.map((kpi) => (\n            <div\n              key={kpi.label.en}\n              className=\"rounded-lg border bg-muted/30 p-4\"\n            >\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-xs font-medium text-muted-foreground\">\n                  {en ? kpi.label.en : kpi.label.ja}\n                </span>\n                <kpi.icon className=\"size-4 text-muted-foreground\" />\n              </div>\n              <div className=\"mt-2 text-2xl font-bold tabular-nums tracking-tight\">\n                {kpi.value}\n              </div>\n              <div\n                className={cn(\n                  \"mt-1 flex items-center gap-1 text-xs font-medium tabular-nums\",\n                  kpi.up ? \"text-emerald-500\" : \"text-rose-500\"\n                )}\n              >\n                {kpi.up ? (\n                  <ArrowUpRight className=\"size-3.5\" />\n                ) : (\n                  <ArrowDownRight className=\"size-3.5\" />\n                )}\n                {kpi.up ? \"+\" : \"\"}\n                {kpi.delta}%\n                <span className=\"text-muted-foreground\">\n                  {en ? \"vs last month\" : \"先月比\"}\n                </span>\n              </div>\n            </div>\n          ))}\n        </div>\n\n        <div className=\"mt-6 w-full overflow-hidden rounded-lg border bg-muted/20 p-2\">\n          <svg\n            viewBox={`0 0 ${W} ${H}`}\n            className=\"h-56 w-full\"\n            preserveAspectRatio=\"none\"\n            role=\"img\"\n            aria-label={en ? \"Revenue trend chart\" : \"収益推移チャート\"}\n          >\n            <defs>\n              <linearGradient id=\"ao-fill\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"0%\"\n                  stopColor=\"hsl(var(--primary))\"\n                  stopOpacity=\"0.35\"\n                />\n                <stop\n                  offset=\"100%\"\n                  stopColor=\"hsl(var(--primary))\"\n                  stopOpacity=\"0\"\n                />\n              </linearGradient>\n            </defs>\n            {[0.25, 0.5, 0.75].map((g) => (\n              <line\n                key={g}\n                x1={PAD}\n                x2={W - PAD}\n                y1={PAD + (H - PAD * 2) * g}\n                y2={PAD + (H - PAD * 2) * g}\n                className=\"stroke-border\"\n                strokeWidth={1}\n                strokeDasharray=\"3 5\"\n              />\n            ))}\n            <path d={area} fill=\"url(#ao-fill)\" />\n            <path\n              d={line}\n              fill=\"none\"\n              stroke=\"hsl(var(--primary))\"\n              strokeWidth={2.5}\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              vectorEffect=\"non-scaling-stroke\"\n            />\n            <circle\n              cx={last[0]}\n              cy={last[1]}\n              r={4}\n              fill=\"hsl(var(--primary))\"\n              stroke=\"hsl(var(--background))\"\n              strokeWidth={2}\n            />\n          </svg>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"rounded-lg border bg-card text-card-foreground shadow-sm w-full\">\n      <div class=\"p-6\">\n        <div class=\"flex flex-wrap items-end justify-between gap-3\">\n          <div>\n            <h3 class=\"text-base font-semibold tracking-tight\">\n              パフォーマンス概要\n            </h3>\n            <p class=\"text-sm text-muted-foreground\">\n              過去28日間の推移\n            </p>\n          </div>\n          <div class=\"flex items-center gap-4 text-xs text-muted-foreground\">\n            <span class=\"flex items-center gap-1.5\">\n              <span class=\"size-2 rounded-full bg-primary\">\n              </span>\n              収益\n            </span>\n            <span class=\"flex items-center gap-1.5\">\n              <span class=\"size-2 rounded-full bg-muted-foreground/40\">\n              </span>\n              前期間\n            </span>\n          </div>\n        </div>\n        <div class=\"mt-5 grid gap-3 sm:grid-cols-3\">\n          <div class=\"rounded-lg border bg-muted/30 p-4\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-xs font-medium text-muted-foreground\">\n                総収益\n              </span>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-dollar-sign size-4 text-muted-foreground\">\n                <line x1=\"12\" x2=\"12\" y1=\"2\" y2=\"22\">\n                </line>\n                <path d=\"M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\">\n                </path>\n              </svg>\n            </div>\n            <div class=\"mt-2 text-2xl font-bold tabular-nums tracking-tight\">\n              ¥4,820,400\n            </div>\n            <div class=\"mt-1 flex items-center gap-1 text-xs font-medium tabular-nums text-emerald-500\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-up-right size-3.5\">\n                <path d=\"M7 7h10v10\">\n                </path>\n                <path d=\"M7 17 17 7\">\n                </path>\n              </svg>\n              +12.4%\n              <span class=\"text-muted-foreground\">\n                先月比\n              </span>\n            </div>\n          </div>\n          <div class=\"rounded-lg border bg-muted/30 p-4\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-xs font-medium text-muted-foreground\">\n                アクティブユーザー\n              </span>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-users size-4 text-muted-foreground\">\n                <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\">\n                </path>\n                <circle cx=\"9\" cy=\"7\" r=\"4\">\n                </circle>\n                <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\">\n                </path>\n                <path d=\"M16 3.13a4 4 0 0 1 0 7.75\">\n                </path>\n              </svg>\n            </div>\n            <div class=\"mt-2 text-2xl font-bold tabular-nums tracking-tight\">\n              38,294\n            </div>\n            <div class=\"mt-1 flex items-center gap-1 text-xs font-medium tabular-nums text-emerald-500\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-up-right size-3.5\">\n                <path d=\"M7 7h10v10\">\n                </path>\n                <path d=\"M7 17 17 7\">\n                </path>\n              </svg>\n              +8.1%\n              <span class=\"text-muted-foreground\">\n                先月比\n              </span>\n            </div>\n          </div>\n          <div class=\"rounded-lg border bg-muted/30 p-4\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-xs font-medium text-muted-foreground\">\n                ページビュー\n              </span>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-eye size-4 text-muted-foreground\">\n                <path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\">\n                </path>\n                <circle cx=\"12\" cy=\"12\" r=\"3\">\n                </circle>\n              </svg>\n            </div>\n            <div class=\"mt-2 text-2xl font-bold tabular-nums tracking-tight\">\n              1.24M\n            </div>\n            <div class=\"mt-1 flex items-center gap-1 text-xs font-medium tabular-nums text-rose-500\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-down-right size-3.5\">\n                <path d=\"m7 7 10 10\">\n                </path>\n                <path d=\"M17 7v10H7\">\n                </path>\n              </svg>\n              -2.6%\n              <span class=\"text-muted-foreground\">\n                先月比\n              </span>\n            </div>\n          </div>\n        </div>\n        <div class=\"mt-6 w-full overflow-hidden rounded-lg border bg-muted/20 p-2\">\n          <svg viewBox=\"0 0 760 240\" class=\"h-56 w-full\" preserveAspectRatio=\"none\" role=\"img\" aria-label=\"収益推移チャート\">\n            <defs>\n              <linearGradient id=\"ao-fill\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0.35\">\n                </stop>\n                <stop offset=\"100%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0\">\n                </stop>\n              </linearGradient>\n            </defs>\n            <line x1=\"12\" x2=\"748\" y1=\"66\" y2=\"66\" class=\"stroke-border\" stroke-width=\"1\" stroke-dasharray=\"3 5\">\n            </line>\n            <line x1=\"12\" x2=\"748\" y1=\"120\" y2=\"120\" class=\"stroke-border\" stroke-width=\"1\" stroke-dasharray=\"3 5\">\n            </line>\n            <line x1=\"12\" x2=\"748\" y1=\"174\" y2=\"174\" class=\"stroke-border\" stroke-width=\"1\" stroke-dasharray=\"3 5\">\n            </line>\n            <path d=\"M12.00,221.83 L39.26,203.31 L66.52,228.00 L93.78,184.80 L121.04,194.06 L148.30,160.11 L175.56,172.46 L202.81,135.43 L230.07,150.86 L257.33,113.83 L284.59,129.26 L311.85,101.49 L339.11,107.66 L366.37,79.89 L393.63,92.23 L420.89,67.54 L448.15,76.80 L475.41,49.03 L502.67,61.37 L529.93,36.69 L557.19,55.20 L584.44,27.43 L611.70,42.86 L638.96,18.17 L666.22,33.60 L693.48,12.00 L720.74,24.34 L748.00,15.09 L748.00,228.00 L12.00,228.00 Z\" fill=\"url(#ao-fill)\">\n            </path>\n            <path d=\"M12.00,221.83 L39.26,203.31 L66.52,228.00 L93.78,184.80 L121.04,194.06 L148.30,160.11 L175.56,172.46 L202.81,135.43 L230.07,150.86 L257.33,113.83 L284.59,129.26 L311.85,101.49 L339.11,107.66 L366.37,79.89 L393.63,92.23 L420.89,67.54 L448.15,76.80 L475.41,49.03 L502.67,61.37 L529.93,36.69 L557.19,55.20 L584.44,27.43 L611.70,42.86 L638.96,18.17 L666.22,33.60 L693.48,12.00 L720.74,24.34 L748.00,15.09\" fill=\"none\" stroke=\"hsl(var(--primary))\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" vector-effect=\"non-scaling-stroke\">\n            </path>\n            <circle cx=\"748\" cy=\"15.085714285714289\" r=\"4\" fill=\"hsl(var(--primary))\" stroke=\"hsl(var(--background))\" stroke-width=\"2\">\n            </circle>\n          </svg>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"rounded-lg border bg-card text-card-foreground shadow-sm w-full\">\n      <div class=\"p-6\">\n        <div class=\"flex flex-wrap items-end justify-between gap-3\">\n          <div>\n            <h3 class=\"text-base font-semibold tracking-tight\">\n              パフォーマンス概要\n            </h3>\n            <p class=\"text-sm text-muted-foreground\">\n              過去28日間の推移\n            </p>\n          </div>\n          <div class=\"flex items-center gap-4 text-xs text-muted-foreground\">\n            <span class=\"flex items-center gap-1.5\">\n              <span class=\"size-2 rounded-full bg-primary\">\n              </span>\n              収益\n            </span>\n            <span class=\"flex items-center gap-1.5\">\n              <span class=\"size-2 rounded-full bg-muted-foreground/40\">\n              </span>\n              前期間\n            </span>\n          </div>\n        </div>\n        <div class=\"mt-5 grid gap-3 sm:grid-cols-3\">\n          <div class=\"rounded-lg border bg-muted/30 p-4\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-xs font-medium text-muted-foreground\">\n                総収益\n              </span>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-dollar-sign size-4 text-muted-foreground\">\n                <line x1=\"12\" x2=\"12\" y1=\"2\" y2=\"22\">\n                </line>\n                <path d=\"M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\">\n                </path>\n              </svg>\n            </div>\n            <div class=\"mt-2 text-2xl font-bold tabular-nums tracking-tight\">\n              ¥4,820,400\n            </div>\n            <div class=\"mt-1 flex items-center gap-1 text-xs font-medium tabular-nums text-emerald-500\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-up-right size-3.5\">\n                <path d=\"M7 7h10v10\">\n                </path>\n                <path d=\"M7 17 17 7\">\n                </path>\n              </svg>\n              +12.4%\n              <span class=\"text-muted-foreground\">\n                先月比\n              </span>\n            </div>\n          </div>\n          <div class=\"rounded-lg border bg-muted/30 p-4\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-xs font-medium text-muted-foreground\">\n                アクティブユーザー\n              </span>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-users size-4 text-muted-foreground\">\n                <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\">\n                </path>\n                <circle cx=\"9\" cy=\"7\" r=\"4\">\n                </circle>\n                <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\">\n                </path>\n                <path d=\"M16 3.13a4 4 0 0 1 0 7.75\">\n                </path>\n              </svg>\n            </div>\n            <div class=\"mt-2 text-2xl font-bold tabular-nums tracking-tight\">\n              38,294\n            </div>\n            <div class=\"mt-1 flex items-center gap-1 text-xs font-medium tabular-nums text-emerald-500\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-up-right size-3.5\">\n                <path d=\"M7 7h10v10\">\n                </path>\n                <path d=\"M7 17 17 7\">\n                </path>\n              </svg>\n              +8.1%\n              <span class=\"text-muted-foreground\">\n                先月比\n              </span>\n            </div>\n          </div>\n          <div class=\"rounded-lg border bg-muted/30 p-4\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-xs font-medium text-muted-foreground\">\n                ページビュー\n              </span>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-eye size-4 text-muted-foreground\">\n                <path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\">\n                </path>\n                <circle cx=\"12\" cy=\"12\" r=\"3\">\n                </circle>\n              </svg>\n            </div>\n            <div class=\"mt-2 text-2xl font-bold tabular-nums tracking-tight\">\n              1.24M\n            </div>\n            <div class=\"mt-1 flex items-center gap-1 text-xs font-medium tabular-nums text-rose-500\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-down-right size-3.5\">\n                <path d=\"m7 7 10 10\">\n                </path>\n                <path d=\"M17 7v10H7\">\n                </path>\n              </svg>\n              -2.6%\n              <span class=\"text-muted-foreground\">\n                先月比\n              </span>\n            </div>\n          </div>\n        </div>\n        <div class=\"mt-6 w-full overflow-hidden rounded-lg border bg-muted/20 p-2\">\n          <svg viewBox=\"0 0 760 240\" class=\"h-56 w-full\" preserveAspectRatio=\"none\" role=\"img\" aria-label=\"収益推移チャート\">\n            <defs>\n              <linearGradient id=\"ao-fill\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0.35\">\n                </stop>\n                <stop offset=\"100%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0\">\n                </stop>\n              </linearGradient>\n            </defs>\n            <line x1=\"12\" x2=\"748\" y1=\"66\" y2=\"66\" class=\"stroke-border\" stroke-width=\"1\" stroke-dasharray=\"3 5\">\n            </line>\n            <line x1=\"12\" x2=\"748\" y1=\"120\" y2=\"120\" class=\"stroke-border\" stroke-width=\"1\" stroke-dasharray=\"3 5\">\n            </line>\n            <line x1=\"12\" x2=\"748\" y1=\"174\" y2=\"174\" class=\"stroke-border\" stroke-width=\"1\" stroke-dasharray=\"3 5\">\n            </line>\n            <path d=\"M12.00,221.83 L39.26,203.31 L66.52,228.00 L93.78,184.80 L121.04,194.06 L148.30,160.11 L175.56,172.46 L202.81,135.43 L230.07,150.86 L257.33,113.83 L284.59,129.26 L311.85,101.49 L339.11,107.66 L366.37,79.89 L393.63,92.23 L420.89,67.54 L448.15,76.80 L475.41,49.03 L502.67,61.37 L529.93,36.69 L557.19,55.20 L584.44,27.43 L611.70,42.86 L638.96,18.17 L666.22,33.60 L693.48,12.00 L720.74,24.34 L748.00,15.09 L748.00,228.00 L12.00,228.00 Z\" fill=\"url(#ao-fill)\">\n            </path>\n            <path d=\"M12.00,221.83 L39.26,203.31 L66.52,228.00 L93.78,184.80 L121.04,194.06 L148.30,160.11 L175.56,172.46 L202.81,135.43 L230.07,150.86 L257.33,113.83 L284.59,129.26 L311.85,101.49 L339.11,107.66 L366.37,79.89 L393.63,92.23 L420.89,67.54 L448.15,76.80 L475.41,49.03 L502.67,61.37 L529.93,36.69 L557.19,55.20 L584.44,27.43 L611.70,42.86 L638.96,18.17 L666.22,33.60 L693.48,12.00 L720.74,24.34 L748.00,15.09\" fill=\"none\" stroke=\"hsl(var(--primary))\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" vector-effect=\"non-scaling-stroke\">\n            </path>\n            <circle cx=\"748\" cy=\"15.085714285714289\" r=\"4\" fill=\"hsl(var(--primary))\" stroke=\"hsl(var(--background))\" stroke-width=\"2\">\n            </circle>\n          </svg>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "analytics-contribution-heatmap",
@@ -72,7 +72,7 @@
       ],
       "standalone": true,
       "source": "import { Card, CardContent } from \"@/components/ui/card\";\nimport { cn } from \"@/lib/utils\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"コントリビューションヒートマップ\",\n  category: \"ダッシュボード\",\n  description: \"週×曜日のGitHub風コントリビューショングリッド。強度バケットと凡例付き。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"analytics\", \"heatmap\", \"activity\"],\n};\n\nconst WEEKS = 26;\nconst DAYS = 7;\nconst DAY_LABELS_JA = [\"月\", \"\", \"水\", \"\", \"金\", \"\", \"日\"];\nconst DAY_LABELS_EN = [\"Mon\", \"\", \"Wed\", \"\", \"Fri\", \"\", \"Sun\"];\n\n// 決定的な擬似乱数で強度バケット(0-4)を生成\nfunction bucket(week: number, day: number): number {\n  const seed = (week * 7 + day) * 9301 + 49297;\n  const r = (seed % 233280) / 233280;\n  const weekend = day >= 5 ? 0.5 : 1;\n  const v = r * weekend;\n  if (v < 0.45) return 0;\n  if (v < 0.62) return 1;\n  if (v < 0.78) return 2;\n  if (v < 0.9) return 3;\n  return 4;\n}\n\nconst LEVELS = [\n  \"bg-muted\",\n  \"bg-emerald-500/25\",\n  \"bg-emerald-500/50\",\n  \"bg-emerald-500/75\",\n  \"bg-emerald-500\",\n];\n\nconst MONTH_LABELS_JA = [\"1月\", \"\", \"2月\", \"\", \"3月\", \"\", \"4月\", \"\", \"5月\", \"\", \"6月\", \"\", \"7月\"];\nconst MONTH_LABELS_EN = [\"Jan\", \"\", \"Feb\", \"\", \"Mar\", \"\", \"Apr\", \"\", \"May\", \"\", \"Jun\", \"\", \"Jul\"];\n\nexport default function ContributionHeatmap() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  const dayLabels = en ? DAY_LABELS_EN : DAY_LABELS_JA;\n  const monthLabels = en ? MONTH_LABELS_EN : MONTH_LABELS_JA;\n  const grid = Array.from({ length: WEEKS }, (_, w) =>\n    Array.from({ length: DAYS }, (_, d) => bucket(w, d))\n  );\n  const total = grid.flat().reduce((a, b) => a + b * 3, 0);\n\n  return (\n    <Card className=\"w-full\">\n      <CardContent className=\"p-6\">\n        <div className=\"mb-4 flex flex-wrap items-end justify-between gap-2\">\n          <div>\n            <h3 className=\"text-base font-semibold tracking-tight\">\n              {en ? \"Activity\" : \"アクティビティ\"}\n            </h3>\n            <p className=\"text-sm text-muted-foreground tabular-nums\">\n              {en ? (\n                <>\n                  {total.toLocaleString(\"en-US\")} contributions in the last 6\n                  months\n                </>\n              ) : (\n                <>過去6ヶ月で {total.toLocaleString(\"ja-JP\")} 件のコントリビューション</>\n              )}\n            </p>\n          </div>\n        </div>\n\n        <div className=\"w-full overflow-x-auto\">\n          <div className=\"inline-flex gap-1.5\">\n            <div className=\"flex flex-col gap-[3px] pr-1 pt-5 text-[10px] text-muted-foreground\">\n              {dayLabels.map((l, i) => (\n                <span key={i} className=\"flex h-3 items-center\">\n                  {l}\n                </span>\n              ))}\n            </div>\n\n            <div>\n              <div className=\"mb-1 flex text-[10px] text-muted-foreground\">\n                {grid.map((_, w) => (\n                  <span key={w} className=\"w-3\" style={{ marginRight: 3 }}>\n                    {w < monthLabels.length ? monthLabels[w] : \"\"}\n                  </span>\n                ))}\n              </div>\n              <div className=\"flex gap-[3px]\">\n                {grid.map((week, w) => (\n                  <div key={w} className=\"flex flex-col gap-[3px]\">\n                    {week.map((lvl, d) => (\n                      <div\n                        key={d}\n                        className={cn(\"size-3 rounded-[3px]\", LEVELS[lvl])}\n                        title={\n                          en\n                            ? `Week ${w + 1} ${dayLabels[d] || \"\"}: level ${lvl}`\n                            : `第${w + 1}週 ${dayLabels[d] || \"\"}: 強度${lvl}`\n                        }\n                      />\n                    ))}\n                  </div>\n                ))}\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"mt-4 flex items-center justify-end gap-1.5 text-[11px] text-muted-foreground\">\n          <span>{en ? \"Less\" : \"少\"}</span>\n          {LEVELS.map((c, i) => (\n            <span key={i} className={cn(\"size-3 rounded-[3px]\", c)} />\n          ))}\n          <span>{en ? \"More\" : \"多\"}</span>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"rounded-lg border bg-card text-card-foreground shadow-sm w-full\">\n      <div class=\"p-6\">\n        <div class=\"mb-4 flex flex-wrap items-end justify-between gap-2\">\n          <div>\n            <h3 class=\"text-base font-semibold tracking-tight\">\n              アクティビティ\n            </h3>\n            <p class=\"text-sm text-muted-foreground tabular-nums\">\n              過去6ヶ月で 486 件のコントリビューション\n            </p>\n          </div>\n        </div>\n        <div class=\"w-full overflow-x-auto\">\n          <div class=\"inline-flex gap-1.5\">\n            <div class=\"flex flex-col gap-[3px] pr-1 pt-5 text-[10px] text-muted-foreground\">\n              <span class=\"flex h-3 items-center\">\n                月\n              </span>\n              <span class=\"flex h-3 items-center\">\n              </span>\n              <span class=\"flex h-3 items-center\">\n                水\n              </span>\n              <span class=\"flex h-3 items-center\">\n              </span>\n              <span class=\"flex h-3 items-center\">\n                金\n              </span>\n              <span class=\"flex h-3 items-center\">\n              </span>\n              <span class=\"flex h-3 items-center\">\n                日\n              </span>\n            </div>\n            <div>\n              <div class=\"mb-1 flex text-[10px] text-muted-foreground\">\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                  1月\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                  2月\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                  3月\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                  4月\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                  5月\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                  6月\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                  7月\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n              </div>\n              <div class=\"flex gap-[3px]\">\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第1週 月: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第1週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第1週 水: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第1週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第1週 金: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第1週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第1週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第2週 月: 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第2週 : 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第2週 水: 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第2週 : 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第2週 金: 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第2週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第2週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第3週 月: 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第3週 : 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第3週 水: 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第3週 : 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500\" title=\"第3週 金: 強度4\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第3週 : 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第3週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第4週 月: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第4週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第4週 水: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第4週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第4週 金: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第4週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第4週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第5週 月: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第5週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第5週 水: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第5週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第5週 金: 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第5週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第5週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第6週 月: 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第6週 : 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第6週 水: 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第6週 : 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第6週 金: 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第6週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第6週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第7週 月: 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500\" title=\"第7週 : 強度4\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500\" title=\"第7週 水: 強度4\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第7週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第7週 金: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第7週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第7週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第8週 月: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第8週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第8週 水: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第8週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第8週 金: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第8週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第8週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第9週 月: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第9週 : 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第9週 水: 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第9週 : 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第9週 金: 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第9週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第9週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第10週 月: 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第10週 : 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第10週 水: 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第10週 : 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第10週 金: 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第10週 : 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第10週 日: 強度1\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第11週 月: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第11週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第11週 水: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第11週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第11週 金: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第11週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第11週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第12週 月: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第12週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第12週 水: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第12週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第12週 金: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第12週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第12週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第13週 月: 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第13週 : 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第13週 水: 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第13週 : 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第13週 金: 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第13週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第13週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第14週 月: 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第14週 : 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500\" title=\"第14週 水: 強度4\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500\" title=\"第14週 : 強度4\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500\" title=\"第14週 金: 強度4\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第14週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第14週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第15週 月: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第15週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第15週 水: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第15週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第15週 金: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第15週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第15週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第16週 月: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第16週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第16週 水: 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第16週 : 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第16週 金: 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第16週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第16週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第17週 月: 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第17週 : 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第17週 水: 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第17週 : 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第17週 金: 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第17週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第17週 日: 強度1\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500\" title=\"第18週 月: 強度4\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500\" title=\"第18週 : 強度4\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第18週 水: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第18週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第18週 金: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第18週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第18週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第19週 月: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第19週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第19週 水: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第19週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第19週 金: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第19週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第19週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第20週 月: 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第20週 : 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第20週 水: 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第20週 : 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第20週 金: 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第20週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第20週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第21週 月: 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第21週 : 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第21週 水: 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500\" title=\"第21週 : 強度4\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500\" title=\"第21週 金: 強度4\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第21週 : 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第21週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第22週 月: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第22週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第22週 水: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第22週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第22週 金: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第22週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第22週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第23週 月: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第23週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第23週 水: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第23週 : 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第23週 金: 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第23週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第23週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第24週 月: 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第24週 : 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第24週 水: 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第24週 : 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第24週 金: 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第24週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第24週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500\" title=\"第25週 月: 強度4\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500\" title=\"第25週 : 強度4\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500\" title=\"第25週 水: 強度4\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第25週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第25週 金: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第25週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第25週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第26週 月: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第26週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第26週 水: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第26週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第26週 金: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第26週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第26週 日: 強度0\">\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"mt-4 flex items-center justify-end gap-1.5 text-[11px] text-muted-foreground\">\n          <span>\n            少\n          </span>\n          <span class=\"size-3 rounded-[3px] bg-muted\">\n          </span>\n          <span class=\"size-3 rounded-[3px] bg-emerald-500/25\">\n          </span>\n          <span class=\"size-3 rounded-[3px] bg-emerald-500/50\">\n          </span>\n          <span class=\"size-3 rounded-[3px] bg-emerald-500/75\">\n          </span>\n          <span class=\"size-3 rounded-[3px] bg-emerald-500\">\n          </span>\n          <span>\n            多\n          </span>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"rounded-lg border bg-card text-card-foreground shadow-sm w-full\">\n      <div class=\"p-6\">\n        <div class=\"mb-4 flex flex-wrap items-end justify-between gap-2\">\n          <div>\n            <h3 class=\"text-base font-semibold tracking-tight\">\n              アクティビティ\n            </h3>\n            <p class=\"text-sm text-muted-foreground tabular-nums\">\n              過去6ヶ月で 486 件のコントリビューション\n            </p>\n          </div>\n        </div>\n        <div class=\"w-full overflow-x-auto\">\n          <div class=\"inline-flex gap-1.5\">\n            <div class=\"flex flex-col gap-[3px] pr-1 pt-5 text-[10px] text-muted-foreground\">\n              <span class=\"flex h-3 items-center\">\n                月\n              </span>\n              <span class=\"flex h-3 items-center\">\n              </span>\n              <span class=\"flex h-3 items-center\">\n                水\n              </span>\n              <span class=\"flex h-3 items-center\">\n              </span>\n              <span class=\"flex h-3 items-center\">\n                金\n              </span>\n              <span class=\"flex h-3 items-center\">\n              </span>\n              <span class=\"flex h-3 items-center\">\n                日\n              </span>\n            </div>\n            <div>\n              <div class=\"mb-1 flex text-[10px] text-muted-foreground\">\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                  1月\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                  2月\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                  3月\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                  4月\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                  5月\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                  6月\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                  7月\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n                <span class=\"w-3\" style=\"margin-right:3px\">\n                </span>\n              </div>\n              <div class=\"flex gap-[3px]\">\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第1週 月: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第1週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第1週 水: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第1週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第1週 金: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第1週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第1週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第2週 月: 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第2週 : 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第2週 水: 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第2週 : 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第2週 金: 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第2週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第2週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第3週 月: 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第3週 : 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第3週 水: 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第3週 : 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500\" title=\"第3週 金: 強度4\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第3週 : 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第3週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第4週 月: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第4週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第4週 水: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第4週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第4週 金: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第4週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第4週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第5週 月: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第5週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第5週 水: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第5週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第5週 金: 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第5週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第5週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第6週 月: 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第6週 : 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第6週 水: 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第6週 : 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第6週 金: 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第6週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第6週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第7週 月: 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500\" title=\"第7週 : 強度4\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500\" title=\"第7週 水: 強度4\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第7週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第7週 金: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第7週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第7週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第8週 月: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第8週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第8週 水: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第8週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第8週 金: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第8週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第8週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第9週 月: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第9週 : 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第9週 水: 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第9週 : 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第9週 金: 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第9週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第9週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第10週 月: 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第10週 : 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第10週 水: 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第10週 : 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第10週 金: 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第10週 : 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第10週 日: 強度1\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第11週 月: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第11週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第11週 水: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第11週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第11週 金: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第11週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第11週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第12週 月: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第12週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第12週 水: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第12週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第12週 金: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第12週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第12週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第13週 月: 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第13週 : 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第13週 水: 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第13週 : 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第13週 金: 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第13週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第13週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第14週 月: 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第14週 : 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500\" title=\"第14週 水: 強度4\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500\" title=\"第14週 : 強度4\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500\" title=\"第14週 金: 強度4\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第14週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第14週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第15週 月: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第15週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第15週 水: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第15週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第15週 金: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第15週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第15週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第16週 月: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第16週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第16週 水: 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第16週 : 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第16週 金: 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第16週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第16週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第17週 月: 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第17週 : 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第17週 水: 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第17週 : 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第17週 金: 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第17週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第17週 日: 強度1\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500\" title=\"第18週 月: 強度4\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500\" title=\"第18週 : 強度4\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第18週 水: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第18週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第18週 金: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第18週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第18週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第19週 月: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第19週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第19週 水: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第19週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第19週 金: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第19週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第19週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第20週 月: 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第20週 : 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第20週 水: 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第20週 : 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第20週 金: 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第20週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第20週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第21週 月: 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第21週 : 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第21週 水: 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500\" title=\"第21週 : 強度4\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500\" title=\"第21週 金: 強度4\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第21週 : 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第21週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第22週 月: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第22週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第22週 水: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第22週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第22週 金: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第22週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第22週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第23週 月: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第23週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第23週 水: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第23週 : 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/25\" title=\"第23週 金: 強度1\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第23週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第23週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第24週 月: 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第24週 : 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第24週 水: 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/50\" title=\"第24週 : 強度2\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500/75\" title=\"第24週 金: 強度3\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第24週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第24週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500\" title=\"第25週 月: 強度4\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500\" title=\"第25週 : 強度4\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-emerald-500\" title=\"第25週 水: 強度4\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第25週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第25週 金: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第25週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第25週 日: 強度0\">\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-[3px]\">\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第26週 月: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第26週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第26週 水: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第26週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第26週 金: 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第26週 : 強度0\">\n                  </div>\n                  <div class=\"size-3 rounded-[3px] bg-muted\" title=\"第26週 日: 強度0\">\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"mt-4 flex items-center justify-end gap-1.5 text-[11px] text-muted-foreground\">\n          <span>\n            少\n          </span>\n          <span class=\"size-3 rounded-[3px] bg-muted\">\n          </span>\n          <span class=\"size-3 rounded-[3px] bg-emerald-500/25\">\n          </span>\n          <span class=\"size-3 rounded-[3px] bg-emerald-500/50\">\n          </span>\n          <span class=\"size-3 rounded-[3px] bg-emerald-500/75\">\n          </span>\n          <span class=\"size-3 rounded-[3px] bg-emerald-500\">\n          </span>\n          <span>\n            多\n          </span>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "analytics-funnel-chart",
@@ -86,7 +86,7 @@
       ],
       "standalone": true,
       "source": "import { Card, CardContent } from \"@/components/ui/card\";\nimport { cn } from \"@/lib/utils\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"コンバージョンファネル\",\n  category: \"ダッシュボード\",\n  description: \"各ステージの割合と離脱率を表示する降順のコンバージョンファネル。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"analytics\", \"funnel\", \"conversion\"],\n};\n\nconst STAGES = [\n  { label: \"訪問\", labelEn: \"Visits\", value: 48200 },\n  { label: \"サインアップ\", labelEn: \"Sign-ups\", value: 21400 },\n  { label: \"トライアル開始\", labelEn: \"Trial started\", value: 12850 },\n  { label: \"アクティブ化\", labelEn: \"Activated\", value: 7320 },\n  { label: \"有料転換\", labelEn: \"Converted\", value: 3180 },\n];\n\nconst ACCENTS = [\n  \"bg-sky-500\",\n  \"bg-indigo-500\",\n  \"bg-violet-500\",\n  \"bg-fuchsia-500\",\n  \"bg-rose-500\",\n];\n\nexport default function FunnelChart() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  const top = STAGES[0].value;\n\n  return (\n    <Card className=\"w-full\">\n      <CardContent className=\"p-6\">\n        <div className=\"flex items-end justify-between\">\n          <div>\n            <h3 className=\"text-base font-semibold tracking-tight\">\n              {en ? \"Conversion funnel\" : \"コンバージョンファネル\"}\n            </h3>\n            <p className=\"text-sm text-muted-foreground\">\n              {en ? \"Overall conversion \" : \"全体転換率\"}{\" \"}\n              <span className=\"font-medium text-foreground tabular-nums\">\n                {((STAGES[STAGES.length - 1].value / top) * 100).toFixed(1)}%\n              </span>\n            </p>\n          </div>\n        </div>\n\n        <div className=\"mt-5 space-y-2.5\">\n          {STAGES.map((stage, i) => {\n            const pct = (stage.value / top) * 100;\n            const prev = i === 0 ? stage.value : STAGES[i - 1].value;\n            const dropoff = i === 0 ? 0 : ((prev - stage.value) / prev) * 100;\n            return (\n              <div key={stage.label}>\n                <div className=\"mb-1 flex items-center justify-between text-sm\">\n                  <span className=\"font-medium\">\n                    {en ? stage.labelEn : stage.label}\n                  </span>\n                  <span className=\"flex items-center gap-3\">\n                    <span className=\"tabular-nums text-muted-foreground\">\n                      {stage.value.toLocaleString(en ? \"en-US\" : \"ja-JP\")}\n                    </span>\n                    <span className=\"w-12 text-right font-semibold tabular-nums\">\n                      {pct.toFixed(1)}%\n                    </span>\n                  </span>\n                </div>\n                <div className=\"relative h-9 overflow-hidden rounded-md bg-muted/40\">\n                  <div\n                    className={cn(\n                      \"flex h-full items-center rounded-md transition-all\",\n                      ACCENTS[i]\n                    )}\n                    style={{ width: `${Math.max(pct, 6)}%` }}\n                  />\n                  {i > 0 && (\n                    <span className=\"absolute inset-y-0 right-2.5 flex items-center text-xs font-medium tabular-nums text-rose-500\">\n                      −{dropoff.toFixed(1)}% {en ? \"drop-off\" : \"離脱\"}\n                    </span>\n                  )}\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"rounded-lg border bg-card text-card-foreground shadow-sm w-full\">\n      <div class=\"p-6\">\n        <div class=\"flex items-end justify-between\">\n          <div>\n            <h3 class=\"text-base font-semibold tracking-tight\">\n              コンバージョンファネル\n            </h3>\n            <p class=\"text-sm text-muted-foreground\">\n              全体転換率\n              <span class=\"font-medium text-foreground tabular-nums\">\n                6.6%\n              </span>\n            </p>\n          </div>\n        </div>\n        <div class=\"mt-5 space-y-2.5\">\n          <div>\n            <div class=\"mb-1 flex items-center justify-between text-sm\">\n              <span class=\"font-medium\">\n                訪問\n              </span>\n              <span class=\"flex items-center gap-3\">\n                <span class=\"tabular-nums text-muted-foreground\">\n                  48,200\n                </span>\n                <span class=\"w-12 text-right font-semibold tabular-nums\">\n                  100.0%\n                </span>\n              </span>\n            </div>\n            <div class=\"relative h-9 overflow-hidden rounded-md bg-muted/40\">\n              <div class=\"flex h-full items-center rounded-md transition-all bg-sky-500\" style=\"width:100%\">\n              </div>\n            </div>\n          </div>\n          <div>\n            <div class=\"mb-1 flex items-center justify-between text-sm\">\n              <span class=\"font-medium\">\n                サインアップ\n              </span>\n              <span class=\"flex items-center gap-3\">\n                <span class=\"tabular-nums text-muted-foreground\">\n                  21,400\n                </span>\n                <span class=\"w-12 text-right font-semibold tabular-nums\">\n                  44.4%\n                </span>\n              </span>\n            </div>\n            <div class=\"relative h-9 overflow-hidden rounded-md bg-muted/40\">\n              <div class=\"flex h-full items-center rounded-md transition-all bg-indigo-500\" style=\"width:44.398340248962654%\">\n              </div>\n              <span class=\"absolute inset-y-0 right-2.5 flex items-center text-xs font-medium tabular-nums text-rose-500\">\n                −55.6% 離脱\n              </span>\n            </div>\n          </div>\n          <div>\n            <div class=\"mb-1 flex items-center justify-between text-sm\">\n              <span class=\"font-medium\">\n                トライアル開始\n              </span>\n              <span class=\"flex items-center gap-3\">\n                <span class=\"tabular-nums text-muted-foreground\">\n                  12,850\n                </span>\n                <span class=\"w-12 text-right font-semibold tabular-nums\">\n                  26.7%\n                </span>\n              </span>\n            </div>\n            <div class=\"relative h-9 overflow-hidden rounded-md bg-muted/40\">\n              <div class=\"flex h-full items-center rounded-md transition-all bg-violet-500\" style=\"width:26.6597510373444%\">\n              </div>\n              <span class=\"absolute inset-y-0 right-2.5 flex items-center text-xs font-medium tabular-nums text-rose-500\">\n                −40.0% 離脱\n              </span>\n            </div>\n          </div>\n          <div>\n            <div class=\"mb-1 flex items-center justify-between text-sm\">\n              <span class=\"font-medium\">\n                アクティブ化\n              </span>\n              <span class=\"flex items-center gap-3\">\n                <span class=\"tabular-nums text-muted-foreground\">\n                  7,320\n                </span>\n                <span class=\"w-12 text-right font-semibold tabular-nums\">\n                  15.2%\n                </span>\n              </span>\n            </div>\n            <div class=\"relative h-9 overflow-hidden rounded-md bg-muted/40\">\n              <div class=\"flex h-full items-center rounded-md transition-all bg-fuchsia-500\" style=\"width:15.186721991701244%\">\n              </div>\n              <span class=\"absolute inset-y-0 right-2.5 flex items-center text-xs font-medium tabular-nums text-rose-500\">\n                −43.0% 離脱\n              </span>\n            </div>\n          </div>\n          <div>\n            <div class=\"mb-1 flex items-center justify-between text-sm\">\n              <span class=\"font-medium\">\n                有料転換\n              </span>\n              <span class=\"flex items-center gap-3\">\n                <span class=\"tabular-nums text-muted-foreground\">\n                  3,180\n                </span>\n                <span class=\"w-12 text-right font-semibold tabular-nums\">\n                  6.6%\n                </span>\n              </span>\n            </div>\n            <div class=\"relative h-9 overflow-hidden rounded-md bg-muted/40\">\n              <div class=\"flex h-full items-center rounded-md transition-all bg-rose-500\" style=\"width:6.597510373443984%\">\n              </div>\n              <span class=\"absolute inset-y-0 right-2.5 flex items-center text-xs font-medium tabular-nums text-rose-500\">\n                −56.6% 離脱\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"rounded-lg border bg-card text-card-foreground shadow-sm w-full\">\n      <div class=\"p-6\">\n        <div class=\"flex items-end justify-between\">\n          <div>\n            <h3 class=\"text-base font-semibold tracking-tight\">\n              コンバージョンファネル\n            </h3>\n            <p class=\"text-sm text-muted-foreground\">\n              全体転換率\n              <span class=\"font-medium text-foreground tabular-nums\">\n                6.6%\n              </span>\n            </p>\n          </div>\n        </div>\n        <div class=\"mt-5 space-y-2.5\">\n          <div>\n            <div class=\"mb-1 flex items-center justify-between text-sm\">\n              <span class=\"font-medium\">\n                訪問\n              </span>\n              <span class=\"flex items-center gap-3\">\n                <span class=\"tabular-nums text-muted-foreground\">\n                  48,200\n                </span>\n                <span class=\"w-12 text-right font-semibold tabular-nums\">\n                  100.0%\n                </span>\n              </span>\n            </div>\n            <div class=\"relative h-9 overflow-hidden rounded-md bg-muted/40\">\n              <div class=\"flex h-full items-center rounded-md transition-all bg-sky-500\" style=\"width:100%\">\n              </div>\n            </div>\n          </div>\n          <div>\n            <div class=\"mb-1 flex items-center justify-between text-sm\">\n              <span class=\"font-medium\">\n                サインアップ\n              </span>\n              <span class=\"flex items-center gap-3\">\n                <span class=\"tabular-nums text-muted-foreground\">\n                  21,400\n                </span>\n                <span class=\"w-12 text-right font-semibold tabular-nums\">\n                  44.4%\n                </span>\n              </span>\n            </div>\n            <div class=\"relative h-9 overflow-hidden rounded-md bg-muted/40\">\n              <div class=\"flex h-full items-center rounded-md transition-all bg-indigo-500\" style=\"width:44.398340248962654%\">\n              </div>\n              <span class=\"absolute inset-y-0 right-2.5 flex items-center text-xs font-medium tabular-nums text-rose-500\">\n                −55.6% 離脱\n              </span>\n            </div>\n          </div>\n          <div>\n            <div class=\"mb-1 flex items-center justify-between text-sm\">\n              <span class=\"font-medium\">\n                トライアル開始\n              </span>\n              <span class=\"flex items-center gap-3\">\n                <span class=\"tabular-nums text-muted-foreground\">\n                  12,850\n                </span>\n                <span class=\"w-12 text-right font-semibold tabular-nums\">\n                  26.7%\n                </span>\n              </span>\n            </div>\n            <div class=\"relative h-9 overflow-hidden rounded-md bg-muted/40\">\n              <div class=\"flex h-full items-center rounded-md transition-all bg-violet-500\" style=\"width:26.6597510373444%\">\n              </div>\n              <span class=\"absolute inset-y-0 right-2.5 flex items-center text-xs font-medium tabular-nums text-rose-500\">\n                −40.0% 離脱\n              </span>\n            </div>\n          </div>\n          <div>\n            <div class=\"mb-1 flex items-center justify-between text-sm\">\n              <span class=\"font-medium\">\n                アクティブ化\n              </span>\n              <span class=\"flex items-center gap-3\">\n                <span class=\"tabular-nums text-muted-foreground\">\n                  7,320\n                </span>\n                <span class=\"w-12 text-right font-semibold tabular-nums\">\n                  15.2%\n                </span>\n              </span>\n            </div>\n            <div class=\"relative h-9 overflow-hidden rounded-md bg-muted/40\">\n              <div class=\"flex h-full items-center rounded-md transition-all bg-fuchsia-500\" style=\"width:15.186721991701244%\">\n              </div>\n              <span class=\"absolute inset-y-0 right-2.5 flex items-center text-xs font-medium tabular-nums text-rose-500\">\n                −43.0% 離脱\n              </span>\n            </div>\n          </div>\n          <div>\n            <div class=\"mb-1 flex items-center justify-between text-sm\">\n              <span class=\"font-medium\">\n                有料転換\n              </span>\n              <span class=\"flex items-center gap-3\">\n                <span class=\"tabular-nums text-muted-foreground\">\n                  3,180\n                </span>\n                <span class=\"w-12 text-right font-semibold tabular-nums\">\n                  6.6%\n                </span>\n              </span>\n            </div>\n            <div class=\"relative h-9 overflow-hidden rounded-md bg-muted/40\">\n              <div class=\"flex h-full items-center rounded-md transition-all bg-rose-500\" style=\"width:6.597510373443984%\">\n              </div>\n              <span class=\"absolute inset-y-0 right-2.5 flex items-center text-xs font-medium tabular-nums text-rose-500\">\n                −56.6% 離脱\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "analytics-leaderboard",
@@ -100,7 +100,7 @@
       ],
       "standalone": true,
       "source": "import { Crown, Minus, TrendingDown, TrendingUp } from \"lucide-react\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { cn } from \"@/lib/utils\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"リーダーボード\",\n  category: \"ダッシュボード\",\n  description: \"順位・アバター・スコア・変動を表示し、上位3名を強調するランキング。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"analytics\", \"leaderboard\", \"ranking\"],\n};\n\ntype Entry = {\n  name: string;\n  score: number;\n  move: number; // 順位の変動 (+上昇 / -下降 / 0)\n};\n\nconst ENTRIES: Entry[] = [\n  { name: \"佐藤 美咲\", score: 9824, move: 0 },\n  { name: \"Liam Carter\", score: 9410, move: 2 },\n  { name: \"田中 翔太\", score: 9187, move: -1 },\n  { name: \"Aisha Khan\", score: 8640, move: 1 },\n  { name: \"鈴木 健\", score: 8021, move: -2 },\n  { name: \"Noah Kim\", score: 7755, move: 0 },\n];\n\nfunction initials(name: string): string {\n  const parts = name.trim().split(/\\s+/);\n  if (parts.length === 1) return parts[0].slice(0, 2);\n  return parts[0][0] + parts[1][0];\n}\n\nconst TOP_RING = [\n  \"ring-amber-400/70 text-amber-500\",\n  \"ring-slate-400/60 text-slate-400\",\n  \"ring-orange-500/60 text-orange-500\",\n];\n\nexport default function Leaderboard() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <Card className=\"w-full max-w-md\">\n      <CardContent className=\"p-5\">\n        <div className=\"mb-4 flex items-center justify-between\">\n          <h3 className=\"text-base font-semibold tracking-tight\">\n            {en ? \"Leaderboard\" : \"リーダーボード\"}\n          </h3>\n          <span className=\"text-xs text-muted-foreground\">\n            {en ? \"This week\" : \"今週\"}\n          </span>\n        </div>\n\n        <ol className=\"space-y-1.5\">\n          {ENTRIES.map((e, i) => {\n            const rank = i + 1;\n            const isTop = rank <= 3;\n            return (\n              <li\n                key={e.name}\n                className={cn(\n                  \"flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors\",\n                  isTop ? \"bg-muted/50\" : \"hover:bg-muted/30\"\n                )}\n              >\n                <span\n                  className={cn(\n                    \"w-5 text-center text-sm font-bold tabular-nums\",\n                    isTop ? \"text-foreground\" : \"text-muted-foreground\"\n                  )}\n                >\n                  {rank}\n                </span>\n\n                <div className=\"relative\">\n                  <div\n                    className={cn(\n                      \"flex size-9 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary\",\n                      isTop && \"ring-2\",\n                      isTop && TOP_RING[i]\n                    )}\n                  >\n                    {initials(e.name)}\n                  </div>\n                  {rank === 1 && (\n                    <Crown className=\"absolute -right-1 -top-1.5 size-3.5 rotate-12 fill-amber-400 text-amber-500\" />\n                  )}\n                </div>\n\n                <span className=\"min-w-0 flex-1 truncate text-sm font-medium\">\n                  {e.name}\n                </span>\n\n                <span className=\"tabular-nums text-sm font-semibold\">\n                  {e.score.toLocaleString(en ? \"en-US\" : \"ja-JP\")}\n                </span>\n\n                <span\n                  className={cn(\n                    \"flex w-10 items-center justify-end gap-0.5 text-xs font-medium tabular-nums\",\n                    e.move > 0 && \"text-emerald-500\",\n                    e.move < 0 && \"text-rose-500\",\n                    e.move === 0 && \"text-muted-foreground\"\n                  )}\n                >\n                  {e.move > 0 && <TrendingUp className=\"size-3\" />}\n                  {e.move < 0 && <TrendingDown className=\"size-3\" />}\n                  {e.move === 0 && <Minus className=\"size-3\" />}\n                  {e.move !== 0 && Math.abs(e.move)}\n                </span>\n              </li>\n            );\n          })}\n        </ol>\n      </CardContent>\n    </Card>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"rounded-lg border bg-card text-card-foreground shadow-sm w-full max-w-md\">\n      <div class=\"p-5\">\n        <div class=\"mb-4 flex items-center justify-between\">\n          <h3 class=\"text-base font-semibold tracking-tight\">\n            リーダーボード\n          </h3>\n          <span class=\"text-xs text-muted-foreground\">\n            今週\n          </span>\n        </div>\n        <ol class=\"space-y-1.5\">\n          <li class=\"flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors bg-muted/50\">\n            <span class=\"w-5 text-center text-sm font-bold tabular-nums text-foreground\">\n              1\n            </span>\n            <div class=\"relative\">\n              <div class=\"flex size-9 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold ring-2 ring-amber-400/70 text-amber-500\">\n                佐美\n              </div>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-crown absolute -right-1 -top-1.5 size-3.5 rotate-12 fill-amber-400 text-amber-500\">\n                <path d=\"M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z\">\n                </path>\n                <path d=\"M5 21h14\">\n                </path>\n              </svg>\n            </div>\n            <span class=\"min-w-0 flex-1 truncate text-sm font-medium\">\n              佐藤 美咲\n            </span>\n            <span class=\"tabular-nums text-sm font-semibold\">\n              9,824\n            </span>\n            <span class=\"flex w-10 items-center justify-end gap-0.5 text-xs font-medium tabular-nums text-muted-foreground\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minus size-3\">\n                <path d=\"M5 12h14\">\n                </path>\n              </svg>\n            </span>\n          </li>\n          <li class=\"flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors bg-muted/50\">\n            <span class=\"w-5 text-center text-sm font-bold tabular-nums text-foreground\">\n              2\n            </span>\n            <div class=\"relative\">\n              <div class=\"flex size-9 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold ring-2 ring-slate-400/60 text-slate-400\">\n                LC\n              </div>\n            </div>\n            <span class=\"min-w-0 flex-1 truncate text-sm font-medium\">\n              Liam Carter\n            </span>\n            <span class=\"tabular-nums text-sm font-semibold\">\n              9,410\n            </span>\n            <span class=\"flex w-10 items-center justify-end gap-0.5 text-xs font-medium tabular-nums text-emerald-500\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trending-up size-3\">\n                <polyline points=\"22 7 13.5 15.5 8.5 10.5 2 17\">\n                </polyline>\n                <polyline points=\"16 7 22 7 22 13\">\n                </polyline>\n              </svg>\n              2\n            </span>\n          </li>\n          <li class=\"flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors bg-muted/50\">\n            <span class=\"w-5 text-center text-sm font-bold tabular-nums text-foreground\">\n              3\n            </span>\n            <div class=\"relative\">\n              <div class=\"flex size-9 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold ring-2 ring-orange-500/60 text-orange-500\">\n                田翔\n              </div>\n            </div>\n            <span class=\"min-w-0 flex-1 truncate text-sm font-medium\">\n              田中 翔太\n            </span>\n            <span class=\"tabular-nums text-sm font-semibold\">\n              9,187\n            </span>\n            <span class=\"flex w-10 items-center justify-end gap-0.5 text-xs font-medium tabular-nums text-rose-500\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trending-down size-3\">\n                <polyline points=\"22 17 13.5 8.5 8.5 13.5 2 7\">\n                </polyline>\n                <polyline points=\"16 17 22 17 22 11\">\n                </polyline>\n              </svg>\n              1\n            </span>\n          </li>\n          <li class=\"flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors hover:bg-muted/30\">\n            <span class=\"w-5 text-center text-sm font-bold tabular-nums text-muted-foreground\">\n              4\n            </span>\n            <div class=\"relative\">\n              <div class=\"flex size-9 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary\">\n                AK\n              </div>\n            </div>\n            <span class=\"min-w-0 flex-1 truncate text-sm font-medium\">\n              Aisha Khan\n            </span>\n            <span class=\"tabular-nums text-sm font-semibold\">\n              8,640\n            </span>\n            <span class=\"flex w-10 items-center justify-end gap-0.5 text-xs font-medium tabular-nums text-emerald-500\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trending-up size-3\">\n                <polyline points=\"22 7 13.5 15.5 8.5 10.5 2 17\">\n                </polyline>\n                <polyline points=\"16 7 22 7 22 13\">\n                </polyline>\n              </svg>\n              1\n            </span>\n          </li>\n          <li class=\"flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors hover:bg-muted/30\">\n            <span class=\"w-5 text-center text-sm font-bold tabular-nums text-muted-foreground\">\n              5\n            </span>\n            <div class=\"relative\">\n              <div class=\"flex size-9 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary\">\n                鈴健\n              </div>\n            </div>\n            <span class=\"min-w-0 flex-1 truncate text-sm font-medium\">\n              鈴木 健\n            </span>\n            <span class=\"tabular-nums text-sm font-semibold\">\n              8,021\n            </span>\n            <span class=\"flex w-10 items-center justify-end gap-0.5 text-xs font-medium tabular-nums text-rose-500\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trending-down size-3\">\n                <polyline points=\"22 17 13.5 8.5 8.5 13.5 2 7\">\n                </polyline>\n                <polyline points=\"16 17 22 17 22 11\">\n                </polyline>\n              </svg>\n              2\n            </span>\n          </li>\n          <li class=\"flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors hover:bg-muted/30\">\n            <span class=\"w-5 text-center text-sm font-bold tabular-nums text-muted-foreground\">\n              6\n            </span>\n            <div class=\"relative\">\n              <div class=\"flex size-9 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary\">\n                NK\n              </div>\n            </div>\n            <span class=\"min-w-0 flex-1 truncate text-sm font-medium\">\n              Noah Kim\n            </span>\n            <span class=\"tabular-nums text-sm font-semibold\">\n              7,755\n            </span>\n            <span class=\"flex w-10 items-center justify-end gap-0.5 text-xs font-medium tabular-nums text-muted-foreground\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minus size-3\">\n                <path d=\"M5 12h14\">\n                </path>\n              </svg>\n            </span>\n          </li>\n        </ol>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"rounded-lg border bg-card text-card-foreground shadow-sm w-full max-w-md\">\n      <div class=\"p-5\">\n        <div class=\"mb-4 flex items-center justify-between\">\n          <h3 class=\"text-base font-semibold tracking-tight\">\n            リーダーボード\n          </h3>\n          <span class=\"text-xs text-muted-foreground\">\n            今週\n          </span>\n        </div>\n        <ol class=\"space-y-1.5\">\n          <li class=\"flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors bg-muted/50\">\n            <span class=\"w-5 text-center text-sm font-bold tabular-nums text-foreground\">\n              1\n            </span>\n            <div class=\"relative\">\n              <div class=\"flex size-9 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold ring-2 ring-amber-400/70 text-amber-500\">\n                佐美\n              </div>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-crown absolute -right-1 -top-1.5 size-3.5 rotate-12 fill-amber-400 text-amber-500\">\n                <path d=\"M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z\">\n                </path>\n                <path d=\"M5 21h14\">\n                </path>\n              </svg>\n            </div>\n            <span class=\"min-w-0 flex-1 truncate text-sm font-medium\">\n              佐藤 美咲\n            </span>\n            <span class=\"tabular-nums text-sm font-semibold\">\n              9,824\n            </span>\n            <span class=\"flex w-10 items-center justify-end gap-0.5 text-xs font-medium tabular-nums text-muted-foreground\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minus size-3\">\n                <path d=\"M5 12h14\">\n                </path>\n              </svg>\n            </span>\n          </li>\n          <li class=\"flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors bg-muted/50\">\n            <span class=\"w-5 text-center text-sm font-bold tabular-nums text-foreground\">\n              2\n            </span>\n            <div class=\"relative\">\n              <div class=\"flex size-9 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold ring-2 ring-slate-400/60 text-slate-400\">\n                LC\n              </div>\n            </div>\n            <span class=\"min-w-0 flex-1 truncate text-sm font-medium\">\n              Liam Carter\n            </span>\n            <span class=\"tabular-nums text-sm font-semibold\">\n              9,410\n            </span>\n            <span class=\"flex w-10 items-center justify-end gap-0.5 text-xs font-medium tabular-nums text-emerald-500\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trending-up size-3\">\n                <polyline points=\"22 7 13.5 15.5 8.5 10.5 2 17\">\n                </polyline>\n                <polyline points=\"16 7 22 7 22 13\">\n                </polyline>\n              </svg>\n              2\n            </span>\n          </li>\n          <li class=\"flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors bg-muted/50\">\n            <span class=\"w-5 text-center text-sm font-bold tabular-nums text-foreground\">\n              3\n            </span>\n            <div class=\"relative\">\n              <div class=\"flex size-9 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold ring-2 ring-orange-500/60 text-orange-500\">\n                田翔\n              </div>\n            </div>\n            <span class=\"min-w-0 flex-1 truncate text-sm font-medium\">\n              田中 翔太\n            </span>\n            <span class=\"tabular-nums text-sm font-semibold\">\n              9,187\n            </span>\n            <span class=\"flex w-10 items-center justify-end gap-0.5 text-xs font-medium tabular-nums text-rose-500\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trending-down size-3\">\n                <polyline points=\"22 17 13.5 8.5 8.5 13.5 2 7\">\n                </polyline>\n                <polyline points=\"16 17 22 17 22 11\">\n                </polyline>\n              </svg>\n              1\n            </span>\n          </li>\n          <li class=\"flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors hover:bg-muted/30\">\n            <span class=\"w-5 text-center text-sm font-bold tabular-nums text-muted-foreground\">\n              4\n            </span>\n            <div class=\"relative\">\n              <div class=\"flex size-9 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary\">\n                AK\n              </div>\n            </div>\n            <span class=\"min-w-0 flex-1 truncate text-sm font-medium\">\n              Aisha Khan\n            </span>\n            <span class=\"tabular-nums text-sm font-semibold\">\n              8,640\n            </span>\n            <span class=\"flex w-10 items-center justify-end gap-0.5 text-xs font-medium tabular-nums text-emerald-500\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trending-up size-3\">\n                <polyline points=\"22 7 13.5 15.5 8.5 10.5 2 17\">\n                </polyline>\n                <polyline points=\"16 7 22 7 22 13\">\n                </polyline>\n              </svg>\n              1\n            </span>\n          </li>\n          <li class=\"flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors hover:bg-muted/30\">\n            <span class=\"w-5 text-center text-sm font-bold tabular-nums text-muted-foreground\">\n              5\n            </span>\n            <div class=\"relative\">\n              <div class=\"flex size-9 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary\">\n                鈴健\n              </div>\n            </div>\n            <span class=\"min-w-0 flex-1 truncate text-sm font-medium\">\n              鈴木 健\n            </span>\n            <span class=\"tabular-nums text-sm font-semibold\">\n              8,021\n            </span>\n            <span class=\"flex w-10 items-center justify-end gap-0.5 text-xs font-medium tabular-nums text-rose-500\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trending-down size-3\">\n                <polyline points=\"22 17 13.5 8.5 8.5 13.5 2 7\">\n                </polyline>\n                <polyline points=\"16 17 22 17 22 11\">\n                </polyline>\n              </svg>\n              2\n            </span>\n          </li>\n          <li class=\"flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors hover:bg-muted/30\">\n            <span class=\"w-5 text-center text-sm font-bold tabular-nums text-muted-foreground\">\n              6\n            </span>\n            <div class=\"relative\">\n              <div class=\"flex size-9 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary\">\n                NK\n              </div>\n            </div>\n            <span class=\"min-w-0 flex-1 truncate text-sm font-medium\">\n              Noah Kim\n            </span>\n            <span class=\"tabular-nums text-sm font-semibold\">\n              7,755\n            </span>\n            <span class=\"flex w-10 items-center justify-end gap-0.5 text-xs font-medium tabular-nums text-muted-foreground\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minus size-3\">\n                <path d=\"M5 12h14\">\n                </path>\n              </svg>\n            </span>\n          </li>\n        </ol>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "app-avatar-group",
@@ -110,7 +110,7 @@
       "tags": [],
       "standalone": true,
       "source": "import { cn } from \"@/lib/utils\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"アバターグループ\",\n  category: \"アプリUI\",\n  description: \"重なり合うアバタースタックと「+N」オーバーフロー、オンライン状態ドット、サイズ違い。\",\n  align: \"center\",\n};\n\ntype Person = {\n  ja: string;\n  en: string;\n  color: string;\n  online?: boolean;\n};\n\nconst PEOPLE: Person[] = [\n  { ja: \"佐藤 太郎\", en: \"Taro Sato\", color: \"from-rose-500 to-orange-500\", online: true },\n  { ja: \"Maya Lin\", en: \"Maya Lin\", color: \"from-violet-500 to-indigo-500\", online: true },\n  { ja: \"Kenji Ito\", en: \"Kenji Ito\", color: \"from-emerald-500 to-teal-500\" },\n  { ja: \"Ava Cole\", en: \"Ava Cole\", color: \"from-sky-500 to-blue-500\", online: true },\n  { ja: \"Liam Ono\", en: \"Liam Ono\", color: \"from-amber-500 to-yellow-500\" },\n];\n\nfunction initials(name: string): string {\n  const parts = name.trim().split(/\\s+/);\n  if (parts.length === 1) return parts[0].slice(0, 2);\n  return (parts[0][0] ?? \"\") + (parts[parts.length - 1][0] ?? \"\");\n}\n\nconst SIZES = {\n  sm: { wrap: \"h-7 w-7 text-[10px]\", dot: \"h-2 w-2\", ring: \"ring-2\" },\n  md: { wrap: \"h-9 w-9 text-xs\", dot: \"h-2.5 w-2.5\", ring: \"ring-2\" },\n  lg: { wrap: \"h-12 w-12 text-sm\", dot: \"h-3 w-3\", ring: \"ring-[3px]\" },\n} as const;\n\ntype SizeKey = keyof typeof SIZES;\n\nfunction Avatar({\n  person,\n  size = \"md\",\n  showStatus = true,\n}: {\n  person: Person;\n  size?: SizeKey;\n  showStatus?: boolean;\n}) {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  const s = SIZES[size];\n  const name = en ? person.en : person.ja;\n  return (\n    <span className=\"relative inline-flex\">\n      <span\n        className={cn(\n          \"inline-flex items-center justify-center rounded-full bg-gradient-to-br font-semibold text-white ring-background\",\n          person.color,\n          s.wrap,\n          s.ring\n        )}\n        title={name}\n      >\n        {initials(name)}\n      </span>\n      {showStatus && person.online && (\n        <span\n          role=\"img\"\n          className={cn(\n            \"absolute bottom-0 right-0 rounded-full bg-emerald-500 ring-2 ring-background\",\n            s.dot\n          )}\n          aria-label={en ? \"Online\" : \"オンライン\"}\n        />\n      )}\n    </span>\n  );\n}\n\nexport default function AvatarGroup() {\n  const visible = PEOPLE.slice(0, 4);\n  const overflow = PEOPLE.length - visible.length + 2;\n\n  return (\n    <div className=\"flex w-full max-w-sm flex-col items-center gap-8\">\n      {/* 重なりスタック + オーバーフロー */}\n      <div className=\"flex items-center -space-x-2.5\">\n        {visible.map((p) => (\n          <Avatar key={p.en} person={p} />\n        ))}\n        <span className=\"inline-flex h-9 w-9 items-center justify-center rounded-full bg-muted text-xs font-semibold text-muted-foreground ring-2 ring-background\">\n          +{overflow}\n        </span>\n      </div>\n\n      {/* サイズバリアント */}\n      <div className=\"flex items-end gap-5\">\n        <Avatar person={PEOPLE[1]} size=\"sm\" />\n        <Avatar person={PEOPLE[0]} size=\"md\" />\n        <Avatar person={PEOPLE[3]} size=\"lg\" />\n      </div>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"flex w-full max-w-sm flex-col items-center gap-8\">\n      <div class=\"flex items-center -space-x-2.5\">\n        <span class=\"relative inline-flex\">\n          <span class=\"inline-flex items-center justify-center rounded-full bg-gradient-to-br font-semibold text-white ring-background from-rose-500 to-orange-500 h-9 w-9 text-xs ring-2\" title=\"佐藤 太郎\">\n            佐太\n          </span>\n          <span role=\"img\" class=\"absolute bottom-0 right-0 rounded-full bg-emerald-500 ring-2 ring-background h-2.5 w-2.5\" aria-label=\"オンライン\">\n          </span>\n        </span>\n        <span class=\"relative inline-flex\">\n          <span class=\"inline-flex items-center justify-center rounded-full bg-gradient-to-br font-semibold text-white ring-background from-violet-500 to-indigo-500 h-9 w-9 text-xs ring-2\" title=\"Maya Lin\">\n            ML\n          </span>\n          <span role=\"img\" class=\"absolute bottom-0 right-0 rounded-full bg-emerald-500 ring-2 ring-background h-2.5 w-2.5\" aria-label=\"オンライン\">\n          </span>\n        </span>\n        <span class=\"relative inline-flex\">\n          <span class=\"inline-flex items-center justify-center rounded-full bg-gradient-to-br font-semibold text-white ring-background from-emerald-500 to-teal-500 h-9 w-9 text-xs ring-2\" title=\"Kenji Ito\">\n            KI\n          </span>\n        </span>\n        <span class=\"relative inline-flex\">\n          <span class=\"inline-flex items-center justify-center rounded-full bg-gradient-to-br font-semibold text-white ring-background from-sky-500 to-blue-500 h-9 w-9 text-xs ring-2\" title=\"Ava Cole\">\n            AC\n          </span>\n          <span role=\"img\" class=\"absolute bottom-0 right-0 rounded-full bg-emerald-500 ring-2 ring-background h-2.5 w-2.5\" aria-label=\"オンライン\">\n          </span>\n        </span>\n        <span class=\"inline-flex h-9 w-9 items-center justify-center rounded-full bg-muted text-xs font-semibold text-muted-foreground ring-2 ring-background\">\n          +3\n        </span>\n      </div>\n      <div class=\"flex items-end gap-5\">\n        <span class=\"relative inline-flex\">\n          <span class=\"inline-flex items-center justify-center rounded-full bg-gradient-to-br font-semibold text-white ring-background from-violet-500 to-indigo-500 h-7 w-7 text-[10px] ring-2\" title=\"Maya Lin\">\n            ML\n          </span>\n          <span role=\"img\" class=\"absolute bottom-0 right-0 rounded-full bg-emerald-500 ring-2 ring-background h-2 w-2\" aria-label=\"オンライン\">\n          </span>\n        </span>\n        <span class=\"relative inline-flex\">\n          <span class=\"inline-flex items-center justify-center rounded-full bg-gradient-to-br font-semibold text-white ring-background from-rose-500 to-orange-500 h-9 w-9 text-xs ring-2\" title=\"佐藤 太郎\">\n            佐太\n          </span>\n          <span role=\"img\" class=\"absolute bottom-0 right-0 rounded-full bg-emerald-500 ring-2 ring-background h-2.5 w-2.5\" aria-label=\"オンライン\">\n          </span>\n        </span>\n        <span class=\"relative inline-flex\">\n          <span class=\"inline-flex items-center justify-center rounded-full bg-gradient-to-br font-semibold text-white ring-background from-sky-500 to-blue-500 h-12 w-12 text-sm ring-[3px]\" title=\"Ava Cole\">\n            AC\n          </span>\n          <span role=\"img\" class=\"absolute bottom-0 right-0 rounded-full bg-emerald-500 ring-2 ring-background h-3 w-3\" aria-label=\"オンライン\">\n          </span>\n        </span>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"flex w-full max-w-sm flex-col items-center gap-8\">\n      <div class=\"flex items-center -space-x-2.5\">\n        <span class=\"relative inline-flex\">\n          <span class=\"inline-flex items-center justify-center rounded-full bg-gradient-to-br font-semibold text-white ring-background from-rose-500 to-orange-500 h-9 w-9 text-xs ring-2\" title=\"佐藤 太郎\">\n            佐太\n          </span>\n          <span role=\"img\" class=\"absolute bottom-0 right-0 rounded-full bg-emerald-500 ring-2 ring-background h-2.5 w-2.5\" aria-label=\"オンライン\">\n          </span>\n        </span>\n        <span class=\"relative inline-flex\">\n          <span class=\"inline-flex items-center justify-center rounded-full bg-gradient-to-br font-semibold text-white ring-background from-violet-500 to-indigo-500 h-9 w-9 text-xs ring-2\" title=\"Maya Lin\">\n            ML\n          </span>\n          <span role=\"img\" class=\"absolute bottom-0 right-0 rounded-full bg-emerald-500 ring-2 ring-background h-2.5 w-2.5\" aria-label=\"オンライン\">\n          </span>\n        </span>\n        <span class=\"relative inline-flex\">\n          <span class=\"inline-flex items-center justify-center rounded-full bg-gradient-to-br font-semibold text-white ring-background from-emerald-500 to-teal-500 h-9 w-9 text-xs ring-2\" title=\"Kenji Ito\">\n            KI\n          </span>\n        </span>\n        <span class=\"relative inline-flex\">\n          <span class=\"inline-flex items-center justify-center rounded-full bg-gradient-to-br font-semibold text-white ring-background from-sky-500 to-blue-500 h-9 w-9 text-xs ring-2\" title=\"Ava Cole\">\n            AC\n          </span>\n          <span role=\"img\" class=\"absolute bottom-0 right-0 rounded-full bg-emerald-500 ring-2 ring-background h-2.5 w-2.5\" aria-label=\"オンライン\">\n          </span>\n        </span>\n        <span class=\"inline-flex h-9 w-9 items-center justify-center rounded-full bg-muted text-xs font-semibold text-muted-foreground ring-2 ring-background\">\n          +3\n        </span>\n      </div>\n      <div class=\"flex items-end gap-5\">\n        <span class=\"relative inline-flex\">\n          <span class=\"inline-flex items-center justify-center rounded-full bg-gradient-to-br font-semibold text-white ring-background from-violet-500 to-indigo-500 h-7 w-7 text-[10px] ring-2\" title=\"Maya Lin\">\n            ML\n          </span>\n          <span role=\"img\" class=\"absolute bottom-0 right-0 rounded-full bg-emerald-500 ring-2 ring-background h-2 w-2\" aria-label=\"オンライン\">\n          </span>\n        </span>\n        <span class=\"relative inline-flex\">\n          <span class=\"inline-flex items-center justify-center rounded-full bg-gradient-to-br font-semibold text-white ring-background from-rose-500 to-orange-500 h-9 w-9 text-xs ring-2\" title=\"佐藤 太郎\">\n            佐太\n          </span>\n          <span role=\"img\" class=\"absolute bottom-0 right-0 rounded-full bg-emerald-500 ring-2 ring-background h-2.5 w-2.5\" aria-label=\"オンライン\">\n          </span>\n        </span>\n        <span class=\"relative inline-flex\">\n          <span class=\"inline-flex items-center justify-center rounded-full bg-gradient-to-br font-semibold text-white ring-background from-sky-500 to-blue-500 h-12 w-12 text-sm ring-[3px]\" title=\"Ava Cole\">\n            AC\n          </span>\n          <span role=\"img\" class=\"absolute bottom-0 right-0 rounded-full bg-emerald-500 ring-2 ring-background h-3 w-3\" aria-label=\"オンライン\">\n          </span>\n        </span>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "app-empty-state",
@@ -120,7 +120,7 @@
       "tags": [],
       "standalone": true,
       "source": "import { FolderOpen, Plus, Upload } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"空の状態\",\n  category: \"アプリUI\",\n  description: \"ソフトな円のアイコン・見出し・説明・主要/副次アクションを備えた空状態。\",\n  align: \"center\",\n};\n\nexport default function EmptyState() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <div className=\"flex w-full max-w-md flex-col items-center rounded-xl border border-dashed bg-card px-8 py-12 text-center\">\n      <div className=\"relative mb-5\">\n        <div className=\"absolute inset-0 -z-10 rounded-full bg-primary/10 blur-xl\" />\n        <div className=\"flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-b from-muted to-muted/40 ring-1 ring-border\">\n          <FolderOpen className=\"h-7 w-7 text-muted-foreground\" />\n        </div>\n      </div>\n\n      <h3 className=\"text-base font-semibold text-foreground\">\n        {en ? \"No projects yet\" : \"プロジェクトがありません\"}\n      </h3>\n      <p className=\"mt-1.5 max-w-xs text-sm leading-relaxed text-muted-foreground\">\n        {en\n          ? \"Create your first project to start working with your team. You can also import from a template.\"\n          : \"最初のプロジェクトを作成して、チームでの作業を始めましょう。テンプレートからのインポートも可能です。\"}\n      </p>\n\n      <div className=\"mt-6 flex flex-wrap items-center justify-center gap-2.5\">\n        <Button>\n          <Plus className=\"h-4 w-4\" />\n          {en ? \"Create project\" : \"プロジェクトを作成\"}\n        </Button>\n        <Button variant=\"outline\">\n          <Upload className=\"h-4 w-4\" />\n          {en ? \"Import\" : \"インポート\"}\n        </Button>\n      </div>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"flex w-full max-w-md flex-col items-center rounded-xl border border-dashed bg-card px-8 py-12 text-center\">\n      <div class=\"relative mb-5\">\n        <div class=\"absolute inset-0 -z-10 rounded-full bg-primary/10 blur-xl\">\n        </div>\n        <div class=\"flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-b from-muted to-muted/40 ring-1 ring-border\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-folder-open h-7 w-7 text-muted-foreground\">\n            <path d=\"m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2\">\n            </path>\n          </svg>\n        </div>\n      </div>\n      <h3 class=\"text-base font-semibold text-foreground\">\n        プロジェクトがありません\n      </h3>\n      <p class=\"mt-1.5 max-w-xs text-sm leading-relaxed text-muted-foreground\">\n        最初のプロジェクトを作成して、チームでの作業を始めましょう。テンプレートからのインポートも可能です。\n      </p>\n      <div class=\"mt-6 flex flex-wrap items-center justify-center gap-2.5\">\n        <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-plus h-4 w-4\">\n            <path d=\"M5 12h14\">\n            </path>\n            <path d=\"M12 5v14\">\n            </path>\n          </svg>\n          プロジェクトを作成\n        </button>\n        <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-upload h-4 w-4\">\n            <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\">\n            </path>\n            <polyline points=\"17 8 12 3 7 8\">\n            </polyline>\n            <line x1=\"12\" x2=\"12\" y1=\"3\" y2=\"15\">\n            </line>\n          </svg>\n          インポート\n        </button>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"flex w-full max-w-md flex-col items-center rounded-xl border border-dashed bg-card px-8 py-12 text-center\">\n      <div class=\"relative mb-5\">\n        <div class=\"absolute inset-0 -z-10 rounded-full bg-primary/10 blur-xl\">\n        </div>\n        <div class=\"flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-b from-muted to-muted/40 ring-1 ring-border\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-folder-open h-7 w-7 text-muted-foreground\">\n            <path d=\"m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2\">\n            </path>\n          </svg>\n        </div>\n      </div>\n      <h3 class=\"text-base font-semibold text-foreground\">\n        プロジェクトがありません\n      </h3>\n      <p class=\"mt-1.5 max-w-xs text-sm leading-relaxed text-muted-foreground\">\n        最初のプロジェクトを作成して、チームでの作業を始めましょう。テンプレートからのインポートも可能です。\n      </p>\n      <div class=\"mt-6 flex flex-wrap items-center justify-center gap-2.5\">\n        <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-plus h-4 w-4\">\n            <path d=\"M5 12h14\">\n            </path>\n            <path d=\"M12 5v14\">\n            </path>\n          </svg>\n          プロジェクトを作成\n        </button>\n        <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-upload h-4 w-4\">\n            <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\">\n            </path>\n            <polyline points=\"17 8 12 3 7 8\">\n            </polyline>\n            <line x1=\"12\" x2=\"12\" y1=\"3\" y2=\"15\">\n            </line>\n          </svg>\n          インポート\n        </button>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "aww-hero-asymmetric-hero",
@@ -134,7 +134,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\nimport { ArrowDownRight } from \"lucide-react\";\n\nexport const meta: DemoMeta = {\n  name: \"非対称グリッドヒーロー\",\n  category: \"Awwwards\",\n  description:\n    \"崩したグリッドと余白の偏りで緊張感を作る、非対称レイアウトのエディトリアルヒーロー。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"awwwards\", \"hero\", \"animation\"],\n};\n\nexport default function AsymmetricHero() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"aww-as relative w-full overflow-hidden bg-[#f4f1ea] px-5 py-20 text-[#16130f] sm:px-10 sm:py-24\">\n      <style>{`\n        @keyframes aww-as-in {\n          from { opacity:0; transform: translateY(30px) rotate(-1deg); }\n          to { opacity:1; transform: translateY(0) rotate(0); }\n        }\n        .aww-as-in { animation: aww-as-in .9s cubic-bezier(.16,1,.3,1) both; }\n        @media (prefers-reduced-motion: reduce) { .aww-as-in { animation: none !important; } }\n      `}</style>\n\n      <div className=\"relative mx-auto grid max-w-[1500px] grid-cols-12 gap-4\">\n        <div className=\"aww-as-in col-span-12 lg:col-span-7 lg:col-start-1\">\n          <span className=\"inline-block rounded-full bg-[#16130f] px-4 py-1.5 text-[11px] font-semibold uppercase tracking-[0.3em] text-[#f4f1ea]\">\n            Editorial 26\n          </span>\n          <h1\n            className=\"mt-8 font-black leading-[0.86] tracking-[-0.04em]\"\n            style={{ fontSize: \"clamp(2.8rem,10vw,8.5rem)\" }}\n          >\n            {en ? (\n              <>\n                Space is\n                <span className=\"ml-[12vw] block text-[#e0532e]\">the</span>\n                <span className=\"block\">language of silence.</span>\n              </>\n            ) : (\n              <>\n                余白は\n                <span className=\"ml-[12vw] block text-[#e0532e]\">沈黙</span>\n                <span className=\"block\">の言語。</span>\n              </>\n            )}\n          </h1>\n        </div>\n\n        <div\n          className=\"aww-as-in col-span-12 mt-6 lg:col-span-3 lg:col-start-9 lg:mt-32\"\n          style={{ animationDelay: \".15s\" }}\n        >\n          <p className=\"text-base leading-relaxed text-[#4a443c]\">\n            {en\n              ? \"Deliberately breaking an orderly grid. Creating steps in the flow of the eye gives the screen breath and rhythm.\"\n              : \"整然としたグリッドをあえて崩す。視線の流れに段差を作ることで、画面に呼吸とリズムが生まれる。\"}\n          </p>\n          <button className=\"group mt-7 inline-flex items-center gap-2 text-sm font-bold uppercase tracking-widest\">\n            <span className=\"border-b-2 border-[#16130f] pb-0.5\">Scroll</span>\n            <ArrowDownRight className=\"transition-transform group-hover:translate-x-1 group-hover:translate-y-1\" />\n          </button>\n        </div>\n\n        <div\n          className=\"aww-as-in col-span-7 mt-10 aspect-[16/7] rounded-2xl bg-[linear-gradient(120deg,#e0532e,#f4a261)] lg:col-span-4 lg:col-start-2\"\n          style={{ animationDelay: \".25s\" }}\n        />\n        <div\n          className=\"aww-as-in col-span-5 mt-10 aspect-[16/7] rounded-2xl border-2 border-[#16130f] lg:col-span-3 lg:col-start-10\"\n          style={{ animationDelay: \".32s\" }}\n        >\n          <div className=\"flex h-full items-center justify-center text-[clamp(2rem,5vw,4rem)] font-black tracking-tighter\">\n            ’26\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"aww-as relative w-full overflow-hidden bg-[#f4f1ea] px-5 py-20 text-[#16130f] sm:px-10 sm:py-24\">\n      <style>\n        @keyframes aww-as-in {\n              from { opacity:0; transform: translateY(30px) rotate(-1deg); }\n              to { opacity:1; transform: translateY(0) rotate(0); }\n            }\n            .aww-as-in { animation: aww-as-in .9s cubic-bezier(.16,1,.3,1) both; }\n            @media (prefers-reduced-motion: reduce) { .aww-as-in { animation: none !important; } }\n      </style>\n      <div class=\"relative mx-auto grid max-w-[1500px] grid-cols-12 gap-4\">\n        <div class=\"aww-as-in col-span-12 lg:col-span-7 lg:col-start-1\">\n          <span class=\"inline-block rounded-full bg-[#16130f] px-4 py-1.5 text-[11px] font-semibold uppercase tracking-[0.3em] text-[#f4f1ea]\">\n            Editorial 26\n          </span>\n          <h1 class=\"mt-8 font-black leading-[0.86] tracking-[-0.04em]\" style=\"font-size:clamp(2.8rem,10vw,8.5rem)\">\n            余白は\n            <span class=\"ml-[12vw] block text-[#e0532e]\">\n              沈黙\n            </span>\n            <span class=\"block\">\n              の言語。\n            </span>\n          </h1>\n        </div>\n        <div class=\"aww-as-in col-span-12 mt-6 lg:col-span-3 lg:col-start-9 lg:mt-32\" style=\"animation-delay:.15s\">\n          <p class=\"text-base leading-relaxed text-[#4a443c]\">\n            整然としたグリッドをあえて崩す。視線の流れに段差を作ることで、画面に呼吸とリズムが生まれる。\n          </p>\n          <button class=\"group mt-7 inline-flex items-center gap-2 text-sm font-bold uppercase tracking-widest\">\n            <span class=\"border-b-2 border-[#16130f] pb-0.5\">\n              Scroll\n            </span>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-down-right transition-transform group-hover:translate-x-1 group-hover:translate-y-1\">\n              <path d=\"m7 7 10 10\">\n              </path>\n              <path d=\"M17 7v10H7\">\n              </path>\n            </svg>\n          </button>\n        </div>\n        <div class=\"aww-as-in col-span-7 mt-10 aspect-[16/7] rounded-2xl bg-[linear-gradient(120deg,#e0532e,#f4a261)] lg:col-span-4 lg:col-start-2\" style=\"animation-delay:.25s\">\n        </div>\n        <div class=\"aww-as-in col-span-5 mt-10 aspect-[16/7] rounded-2xl border-2 border-[#16130f] lg:col-span-3 lg:col-start-10\" style=\"animation-delay:.32s\">\n          <div class=\"flex h-full items-center justify-center text-[clamp(2rem,5vw,4rem)] font-black tracking-tighter\">\n            ’26\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"aww-as relative w-full overflow-hidden bg-[#f4f1ea] px-5 py-20 text-[#16130f] sm:px-10 sm:py-24\">\n      <style>\n        @keyframes aww-as-in {\n              from { opacity:0; transform: translateY(30px) rotate(-1deg); }\n              to { opacity:1; transform: translateY(0) rotate(0); }\n            }\n            .aww-as-in { animation: aww-as-in .9s cubic-bezier(.16,1,.3,1) both; }\n            @media (prefers-reduced-motion: reduce) { .aww-as-in { animation: none !important; } }\n      </style>\n      <div class=\"relative mx-auto grid max-w-[1500px] grid-cols-12 gap-4\">\n        <div class=\"aww-as-in col-span-12 lg:col-span-7 lg:col-start-1\">\n          <span class=\"inline-block rounded-full bg-[#16130f] px-4 py-1.5 text-[11px] font-semibold uppercase tracking-[0.3em] text-[#f4f1ea]\">\n            Editorial 26\n          </span>\n          <h1 class=\"mt-8 font-black leading-[0.86] tracking-[-0.04em]\" style=\"font-size:clamp(2.8rem,10vw,8.5rem)\">\n            余白は\n            <span class=\"ml-[12vw] block text-[#e0532e]\">\n              沈黙\n            </span>\n            <span class=\"block\">\n              の言語。\n            </span>\n          </h1>\n        </div>\n        <div class=\"aww-as-in col-span-12 mt-6 lg:col-span-3 lg:col-start-9 lg:mt-32\" style=\"animation-delay:.15s\">\n          <p class=\"text-base leading-relaxed text-[#4a443c]\">\n            整然としたグリッドをあえて崩す。視線の流れに段差を作ることで、画面に呼吸とリズムが生まれる。\n          </p>\n          <button class=\"group mt-7 inline-flex items-center gap-2 text-sm font-bold uppercase tracking-widest\">\n            <span class=\"border-b-2 border-[#16130f] pb-0.5\">\n              Scroll\n            </span>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-down-right transition-transform group-hover:translate-x-1 group-hover:translate-y-1\">\n              <path d=\"m7 7 10 10\">\n              </path>\n              <path d=\"M17 7v10H7\">\n              </path>\n            </svg>\n          </button>\n        </div>\n        <div class=\"aww-as-in col-span-7 mt-10 aspect-[16/7] rounded-2xl bg-[linear-gradient(120deg,#e0532e,#f4a261)] lg:col-span-4 lg:col-start-2\" style=\"animation-delay:.25s\">\n        </div>\n        <div class=\"aww-as-in col-span-5 mt-10 aspect-[16/7] rounded-2xl border-2 border-[#16130f] lg:col-span-3 lg:col-start-10\" style=\"animation-delay:.32s\">\n          <div class=\"flex h-full items-center justify-center text-[clamp(2rem,5vw,4rem)] font-black tracking-tighter\">\n            ’26\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "aww-hero-award-badge-showcase",
@@ -148,7 +148,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\nimport { Award, Star } from \"lucide-react\";\n\nexport const meta: DemoMeta = {\n  name: \"受賞バッジショーケース\",\n  category: \"Awwwards\",\n  description:\n    \"回転する受賞バッジと実績指標を主役にした、アワード受賞風のフルブリードショーケース。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"awwwards\", \"hero\", \"animation\"],\n};\n\nconst BADGES = [\n  { label: \"Site of the Day\", y: \"FEB 2026\", ac: \"#fbbf24\" },\n  { label: \"Developer Award\", y: \"JAN 2026\", ac: \"#34d399\" },\n  { label: \"Honorable Mention\", y: \"DEC 2025\", ac: \"#f472b6\" },\n];\n\nfunction SpinBadge({ color }: { color: string }) {\n  const text = \"★ AWARD WINNING · CRAFTED WITH CARE · \";\n  return (\n    <div className=\"relative h-32 w-32 shrink-0 sm:h-40 sm:w-40\">\n      <svg viewBox=\"0 0 200 200\" className=\"aww-ab-spin h-full w-full\">\n        <defs>\n          <path id=\"aww-ab-circle\" d=\"M100,100 m-74,0 a74,74 0 1,1 148,0 a74,74 0 1,1 -148,0\" />\n        </defs>\n        <text fontSize=\"13\" fontWeight=\"700\" letterSpacing=\"1.5\" fill={color}>\n          <textPath href=\"#aww-ab-circle\">{text + text}</textPath>\n        </text>\n      </svg>\n      <span\n        className=\"absolute left-1/2 top-1/2 flex h-16 w-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full sm:h-20 sm:w-20\"\n        style={{ background: color, color: \"#0a0a0a\" }}\n      >\n        <Award className=\"size-8 sm:size-9\" />\n      </span>\n    </div>\n  );\n}\n\nexport default function AwardBadgeShowcase() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"aww-ab relative w-full overflow-hidden bg-[#0a0a0a] px-5 py-20 text-white sm:px-10 sm:py-28\">\n      <style>{`\n        @keyframes aww-ab-rot { from{transform:rotate(0);} to{transform:rotate(360deg);} }\n        @keyframes aww-ab-up { from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} }\n        .aww-ab-spin{ animation: aww-ab-rot 18s linear infinite; transform-origin:center; }\n        .aww-ab-up{ animation: aww-ab-up .9s cubic-bezier(.16,1,.3,1) both; }\n        @media (prefers-reduced-motion: reduce){ .aww-ab-spin,.aww-ab-up{ animation:none!important; } }\n      `}</style>\n\n      <div className=\"absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(251,191,36,0.12),transparent_55%)]\" />\n\n      <div className=\"relative mx-auto max-w-[1300px]\">\n        <div className=\"aww-ab-up mb-14 text-center\">\n          <span className=\"inline-flex items-center gap-2 rounded-full border border-white/15 px-4 py-1.5 text-[11px] font-semibold uppercase tracking-[0.3em] text-amber-300\">\n            <Star className=\"size-3.5\" /> Recognition\n          </span>\n          <h1\n            className=\"mt-7 font-black leading-[0.86] tracking-[-0.04em]\"\n            style={{ fontSize: \"clamp(2.6rem,9vw,8rem)\" }}\n          >\n            {en ? (\n              <>\n                An obsession\n                <br />\n                with detail.\n              </>\n            ) : (\n              <>\n                称賛される、\n                <br />\n                細部への執着。\n              </>\n            )}\n          </h1>\n        </div>\n\n        <div className=\"grid gap-6 sm:grid-cols-3\">\n          {BADGES.map((b, i) => (\n            <div\n              key={b.label}\n              className=\"aww-ab-up flex flex-col items-center gap-5 rounded-[1.5rem] bg-white/[0.04] p-8 text-center ring-1 ring-white/10\"\n              style={{ animationDelay: `${0.1 + i * 0.1}s` }}\n            >\n              <SpinBadge color={b.ac} />\n              <div>\n                <div className=\"text-lg font-bold tracking-tight\">{b.label}</div>\n                <div className=\"mt-1 text-[11px] font-semibold uppercase tracking-[0.3em] text-white/40\">\n                  {b.y}\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"aww-ab relative w-full overflow-hidden bg-[#0a0a0a] px-5 py-20 text-white sm:px-10 sm:py-28\">\n      <style>\n        @keyframes aww-ab-rot { from{transform:rotate(0);} to{transform:rotate(360deg);} }\n            @keyframes aww-ab-up { from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} }\n            .aww-ab-spin{ animation: aww-ab-rot 18s linear infinite; transform-origin:center; }\n            .aww-ab-up{ animation: aww-ab-up .9s cubic-bezier(.16,1,.3,1) both; }\n            @media (prefers-reduced-motion: reduce){ .aww-ab-spin,.aww-ab-up{ animation:none!important; } }\n      </style>\n      <div class=\"absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(251,191,36,0.12),transparent_55%)]\">\n      </div>\n      <div class=\"relative mx-auto max-w-[1300px]\">\n        <div class=\"aww-ab-up mb-14 text-center\">\n          <span class=\"inline-flex items-center gap-2 rounded-full border border-white/15 px-4 py-1.5 text-[11px] font-semibold uppercase tracking-[0.3em] text-amber-300\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5\">\n              <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n              </path>\n            </svg>\n            Recognition\n          </span>\n          <h1 class=\"mt-7 font-black leading-[0.86] tracking-[-0.04em]\" style=\"font-size:clamp(2.6rem,9vw,8rem)\">\n            称賛される、\n            <br/>\n            細部への執着。\n          </h1>\n        </div>\n        <div class=\"grid gap-6 sm:grid-cols-3\">\n          <div class=\"aww-ab-up flex flex-col items-center gap-5 rounded-[1.5rem] bg-white/[0.04] p-8 text-center ring-1 ring-white/10\" style=\"animation-delay:0.1s\">\n            <div class=\"relative h-32 w-32 shrink-0 sm:h-40 sm:w-40\">\n              <svg viewBox=\"0 0 200 200\" class=\"aww-ab-spin h-full w-full\">\n                <defs>\n                  <path id=\"aww-ab-circle\" d=\"M100,100 m-74,0 a74,74 0 1,1 148,0 a74,74 0 1,1 -148,0\">\n                  </path>\n                </defs>\n                <text font-size=\"13\" font-weight=\"700\" letter-spacing=\"1.5\" fill=\"#fbbf24\">\n                  <textPath href=\"#aww-ab-circle\">\n                    ★ AWARD WINNING · CRAFTED WITH CARE · ★ AWARD WINNING · CRAFTED WITH CARE ·\n                  </textPath>\n                </text>\n              </svg>\n              <span class=\"absolute left-1/2 top-1/2 flex h-16 w-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full sm:h-20 sm:w-20\" style=\"background:#fbbf24;color:#0a0a0a\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-award size-8 sm:size-9\">\n                  <path d=\"m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526\">\n                  </path>\n                  <circle cx=\"12\" cy=\"8\" r=\"6\">\n                  </circle>\n                </svg>\n              </span>\n            </div>\n            <div>\n              <div class=\"text-lg font-bold tracking-tight\">\n                Site of the Day\n              </div>\n              <div class=\"mt-1 text-[11px] font-semibold uppercase tracking-[0.3em] text-white/40\">\n                FEB 2026\n              </div>\n            </div>\n          </div>\n          <div class=\"aww-ab-up flex flex-col items-center gap-5 rounded-[1.5rem] bg-white/[0.04] p-8 text-center ring-1 ring-white/10\" style=\"animation-delay:0.2s\">\n            <div class=\"relative h-32 w-32 shrink-0 sm:h-40 sm:w-40\">\n              <svg viewBox=\"0 0 200 200\" class=\"aww-ab-spin h-full w-full\">\n                <defs>\n                  <path id=\"aww-ab-circle\" d=\"M100,100 m-74,0 a74,74 0 1,1 148,0 a74,74 0 1,1 -148,0\">\n                  </path>\n                </defs>\n                <text font-size=\"13\" font-weight=\"700\" letter-spacing=\"1.5\" fill=\"#34d399\">\n                  <textPath href=\"#aww-ab-circle\">\n                    ★ AWARD WINNING · CRAFTED WITH CARE · ★ AWARD WINNING · CRAFTED WITH CARE ·\n                  </textPath>\n                </text>\n              </svg>\n              <span class=\"absolute left-1/2 top-1/2 flex h-16 w-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full sm:h-20 sm:w-20\" style=\"background:#34d399;color:#0a0a0a\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-award size-8 sm:size-9\">\n                  <path d=\"m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526\">\n                  </path>\n                  <circle cx=\"12\" cy=\"8\" r=\"6\">\n                  </circle>\n                </svg>\n              </span>\n            </div>\n            <div>\n              <div class=\"text-lg font-bold tracking-tight\">\n                Developer Award\n              </div>\n              <div class=\"mt-1 text-[11px] font-semibold uppercase tracking-[0.3em] text-white/40\">\n                JAN 2026\n              </div>\n            </div>\n          </div>\n          <div class=\"aww-ab-up flex flex-col items-center gap-5 rounded-[1.5rem] bg-white/[0.04] p-8 text-center ring-1 ring-white/10\" style=\"animation-delay:0.30000000000000004s\">\n            <div class=\"relative h-32 w-32 shrink-0 sm:h-40 sm:w-40\">\n              <svg viewBox=\"0 0 200 200\" class=\"aww-ab-spin h-full w-full\">\n                <defs>\n                  <path id=\"aww-ab-circle\" d=\"M100,100 m-74,0 a74,74 0 1,1 148,0 a74,74 0 1,1 -148,0\">\n                  </path>\n                </defs>\n                <text font-size=\"13\" font-weight=\"700\" letter-spacing=\"1.5\" fill=\"#f472b6\">\n                  <textPath href=\"#aww-ab-circle\">\n                    ★ AWARD WINNING · CRAFTED WITH CARE · ★ AWARD WINNING · CRAFTED WITH CARE ·\n                  </textPath>\n                </text>\n              </svg>\n              <span class=\"absolute left-1/2 top-1/2 flex h-16 w-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full sm:h-20 sm:w-20\" style=\"background:#f472b6;color:#0a0a0a\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-award size-8 sm:size-9\">\n                  <path d=\"m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526\">\n                  </path>\n                  <circle cx=\"12\" cy=\"8\" r=\"6\">\n                  </circle>\n                </svg>\n              </span>\n            </div>\n            <div>\n              <div class=\"text-lg font-bold tracking-tight\">\n                Honorable Mention\n              </div>\n              <div class=\"mt-1 text-[11px] font-semibold uppercase tracking-[0.3em] text-white/40\">\n                DEC 2025\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"aww-ab relative w-full overflow-hidden bg-[#0a0a0a] px-5 py-20 text-white sm:px-10 sm:py-28\">\n      <style>\n        @keyframes aww-ab-rot { from{transform:rotate(0);} to{transform:rotate(360deg);} }\n            @keyframes aww-ab-up { from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} }\n            .aww-ab-spin{ animation: aww-ab-rot 18s linear infinite; transform-origin:center; }\n            .aww-ab-up{ animation: aww-ab-up .9s cubic-bezier(.16,1,.3,1) both; }\n            @media (prefers-reduced-motion: reduce){ .aww-ab-spin,.aww-ab-up{ animation:none!important; } }\n      </style>\n      <div class=\"absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(251,191,36,0.12),transparent_55%)]\">\n      </div>\n      <div class=\"relative mx-auto max-w-[1300px]\">\n        <div class=\"aww-ab-up mb-14 text-center\">\n          <span class=\"inline-flex items-center gap-2 rounded-full border border-white/15 px-4 py-1.5 text-[11px] font-semibold uppercase tracking-[0.3em] text-amber-300\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5\">\n              <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n              </path>\n            </svg>\n            Recognition\n          </span>\n          <h1 class=\"mt-7 font-black leading-[0.86] tracking-[-0.04em]\" style=\"font-size:clamp(2.6rem,9vw,8rem)\">\n            称賛される、\n            <br/>\n            細部への執着。\n          </h1>\n        </div>\n        <div class=\"grid gap-6 sm:grid-cols-3\">\n          <div class=\"aww-ab-up flex flex-col items-center gap-5 rounded-[1.5rem] bg-white/[0.04] p-8 text-center ring-1 ring-white/10\" style=\"animation-delay:0.1s\">\n            <div class=\"relative h-32 w-32 shrink-0 sm:h-40 sm:w-40\">\n              <svg viewBox=\"0 0 200 200\" class=\"aww-ab-spin h-full w-full\">\n                <defs>\n                  <path id=\"aww-ab-circle\" d=\"M100,100 m-74,0 a74,74 0 1,1 148,0 a74,74 0 1,1 -148,0\">\n                  </path>\n                </defs>\n                <text font-size=\"13\" font-weight=\"700\" letter-spacing=\"1.5\" fill=\"#fbbf24\">\n                  <textPath href=\"#aww-ab-circle\">\n                    ★ AWARD WINNING · CRAFTED WITH CARE · ★ AWARD WINNING · CRAFTED WITH CARE ·\n                  </textPath>\n                </text>\n              </svg>\n              <span class=\"absolute left-1/2 top-1/2 flex h-16 w-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full sm:h-20 sm:w-20\" style=\"background:#fbbf24;color:#0a0a0a\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-award size-8 sm:size-9\">\n                  <path d=\"m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526\">\n                  </path>\n                  <circle cx=\"12\" cy=\"8\" r=\"6\">\n                  </circle>\n                </svg>\n              </span>\n            </div>\n            <div>\n              <div class=\"text-lg font-bold tracking-tight\">\n                Site of the Day\n              </div>\n              <div class=\"mt-1 text-[11px] font-semibold uppercase tracking-[0.3em] text-white/40\">\n                FEB 2026\n              </div>\n            </div>\n          </div>\n          <div class=\"aww-ab-up flex flex-col items-center gap-5 rounded-[1.5rem] bg-white/[0.04] p-8 text-center ring-1 ring-white/10\" style=\"animation-delay:0.2s\">\n            <div class=\"relative h-32 w-32 shrink-0 sm:h-40 sm:w-40\">\n              <svg viewBox=\"0 0 200 200\" class=\"aww-ab-spin h-full w-full\">\n                <defs>\n                  <path id=\"aww-ab-circle\" d=\"M100,100 m-74,0 a74,74 0 1,1 148,0 a74,74 0 1,1 -148,0\">\n                  </path>\n                </defs>\n                <text font-size=\"13\" font-weight=\"700\" letter-spacing=\"1.5\" fill=\"#34d399\">\n                  <textPath href=\"#aww-ab-circle\">\n                    ★ AWARD WINNING · CRAFTED WITH CARE · ★ AWARD WINNING · CRAFTED WITH CARE ·\n                  </textPath>\n                </text>\n              </svg>\n              <span class=\"absolute left-1/2 top-1/2 flex h-16 w-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full sm:h-20 sm:w-20\" style=\"background:#34d399;color:#0a0a0a\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-award size-8 sm:size-9\">\n                  <path d=\"m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526\">\n                  </path>\n                  <circle cx=\"12\" cy=\"8\" r=\"6\">\n                  </circle>\n                </svg>\n              </span>\n            </div>\n            <div>\n              <div class=\"text-lg font-bold tracking-tight\">\n                Developer Award\n              </div>\n              <div class=\"mt-1 text-[11px] font-semibold uppercase tracking-[0.3em] text-white/40\">\n                JAN 2026\n              </div>\n            </div>\n          </div>\n          <div class=\"aww-ab-up flex flex-col items-center gap-5 rounded-[1.5rem] bg-white/[0.04] p-8 text-center ring-1 ring-white/10\" style=\"animation-delay:0.30000000000000004s\">\n            <div class=\"relative h-32 w-32 shrink-0 sm:h-40 sm:w-40\">\n              <svg viewBox=\"0 0 200 200\" class=\"aww-ab-spin h-full w-full\">\n                <defs>\n                  <path id=\"aww-ab-circle\" d=\"M100,100 m-74,0 a74,74 0 1,1 148,0 a74,74 0 1,1 -148,0\">\n                  </path>\n                </defs>\n                <text font-size=\"13\" font-weight=\"700\" letter-spacing=\"1.5\" fill=\"#f472b6\">\n                  <textPath href=\"#aww-ab-circle\">\n                    ★ AWARD WINNING · CRAFTED WITH CARE · ★ AWARD WINNING · CRAFTED WITH CARE ·\n                  </textPath>\n                </text>\n              </svg>\n              <span class=\"absolute left-1/2 top-1/2 flex h-16 w-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full sm:h-20 sm:w-20\" style=\"background:#f472b6;color:#0a0a0a\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-award size-8 sm:size-9\">\n                  <path d=\"m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526\">\n                  </path>\n                  <circle cx=\"12\" cy=\"8\" r=\"6\">\n                  </circle>\n                </svg>\n              </span>\n            </div>\n            <div>\n              <div class=\"text-lg font-bold tracking-tight\">\n                Honorable Mention\n              </div>\n              <div class=\"mt-1 text-[11px] font-semibold uppercase tracking-[0.3em] text-white/40\">\n                DEC 2025\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "aww-hero-bento-editorial",
@@ -162,7 +162,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\nimport { ArrowUpRight, Sparkles, Zap, Globe } from \"lucide-react\";\n\nexport const meta: DemoMeta = {\n  name: \"ベントーエディトリアル\",\n  category: \"Awwwards\",\n  description:\n    \"大小のセルを組み合わせたベントーグリッドで、ヒーローとコンテンツを一画面に圧縮した構成。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"awwwards\", \"hero\", \"animation\"],\n};\n\nexport default function BentoEditorial() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"aww-be w-full bg-[#0b0b10] px-5 py-16 text-white sm:px-10 sm:py-20\">\n      <style>{`\n        @keyframes aww-be-in { from{opacity:0;transform:translateY(22px) scale(.98);} to{opacity:1;transform:translateY(0) scale(1);} }\n        .aww-be-cell{ animation: aww-be-in .8s cubic-bezier(.16,1,.3,1) both; transition: transform .35s ease, box-shadow .35s ease; }\n        .aww-be-cell:hover{ transform: translateY(-4px); }\n        @media (prefers-reduced-motion: reduce){ .aww-be-cell{ animation:none!important; } }\n      `}</style>\n\n      <div className=\"mx-auto grid max-w-[1500px] auto-rows-[minmax(150px,auto)] grid-cols-2 gap-4 lg:grid-cols-4\">\n        {/* hero cell */}\n        <div\n          className=\"aww-be-cell relative col-span-2 row-span-2 flex flex-col justify-between overflow-hidden rounded-[1.5rem] p-7 ring-1 ring-white/10 sm:p-9\"\n          style={{ background: \"linear-gradient(135deg,#4f46e5,#9333ea,#db2777)\" }}\n        >\n          <div className=\"absolute -right-10 -top-10 h-44 w-44 rounded-full bg-white/20 blur-2xl\" />\n          <span className=\"relative text-[11px] font-semibold uppercase tracking-[0.4em] text-white/70\">\n            Bento Studio\n          </span>\n          <h1\n            className=\"relative font-black leading-[0.88] tracking-[-0.03em]\"\n            style={{ fontSize: \"clamp(2rem,5vw,4.5rem)\" }}\n          >\n            {en ? (\n              <>\n                Say it all\n                <br />\n                on one screen.\n              </>\n            ) : (\n              <>\n                一画面で\n                <br />\n                語り尽くす。\n              </>\n            )}\n          </h1>\n        </div>\n\n        <div className=\"aww-be-cell flex flex-col justify-between rounded-[1.5rem] bg-[#15151d] p-6 ring-1 ring-white/10\" style={{ animationDelay: \".08s\" }}>\n          <Sparkles className=\"size-6 text-amber-300\" />\n          <div>\n            <div className=\"text-3xl font-black tracking-tight\">260+</div>\n            <div className=\"text-xs text-white/50\">Components</div>\n          </div>\n        </div>\n\n        <div className=\"aww-be-cell flex flex-col justify-between rounded-[1.5rem] bg-[linear-gradient(135deg,#0891b2,#22d3ee)] p-6 ring-1 ring-white/10 text-[#04222a]\" style={{ animationDelay: \".14s\" }}>\n          <Zap className=\"size-6\" />\n          <div>\n            <div className=\"text-3xl font-black tracking-tight\">0ms</div>\n            <div className=\"text-xs opacity-70\">External calls</div>\n          </div>\n        </div>\n\n        <div className=\"aww-be-cell col-span-2 flex items-center justify-between rounded-[1.5rem] bg-[#15151d] p-6 ring-1 ring-white/10\" style={{ animationDelay: \".2s\" }}>\n          <div>\n            <div className=\"flex items-center gap-2 text-sm font-semibold\">\n              <Globe className=\"size-4 text-emerald-300\" /> Worldwide ready\n            </div>\n            <p className=\"mt-2 max-w-xs text-xs text-white/50\">\n              {en\n                ? \"Responsive, with dark and light support. It fits in anywhere you place it.\"\n                : \"レスポンシブとダーク/ライト両対応。どこに置いても馴染む。\"}\n            </p>\n          </div>\n          <button\n            aria-label={en ? \"View work\" : \"作品を見る\"}\n            className=\"group flex size-11 items-center justify-center rounded-full bg-white text-black\"\n          >\n            <ArrowUpRight className=\"transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\" />\n          </button>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"aww-be w-full bg-[#0b0b10] px-5 py-16 text-white sm:px-10 sm:py-20\">\n      <style>\n        @keyframes aww-be-in { from{opacity:0;transform:translateY(22px) scale(.98);} to{opacity:1;transform:translateY(0) scale(1);} }\n            .aww-be-cell{ animation: aww-be-in .8s cubic-bezier(.16,1,.3,1) both; transition: transform .35s ease, box-shadow .35s ease; }\n            .aww-be-cell:hover{ transform: translateY(-4px); }\n            @media (prefers-reduced-motion: reduce){ .aww-be-cell{ animation:none!important; } }\n      </style>\n      <div class=\"mx-auto grid max-w-[1500px] auto-rows-[minmax(150px,auto)] grid-cols-2 gap-4 lg:grid-cols-4\">\n        <div class=\"aww-be-cell relative col-span-2 row-span-2 flex flex-col justify-between overflow-hidden rounded-[1.5rem] p-7 ring-1 ring-white/10 sm:p-9\" style=\"background:linear-gradient(135deg,#4f46e5,#9333ea,#db2777)\">\n          <div class=\"absolute -right-10 -top-10 h-44 w-44 rounded-full bg-white/20 blur-2xl\">\n          </div>\n          <span class=\"relative text-[11px] font-semibold uppercase tracking-[0.4em] text-white/70\">\n            Bento Studio\n          </span>\n          <h1 class=\"relative font-black leading-[0.88] tracking-[-0.03em]\" style=\"font-size:clamp(2rem,5vw,4.5rem)\">\n            一画面で\n            <br/>\n            語り尽くす。\n          </h1>\n        </div>\n        <div class=\"aww-be-cell flex flex-col justify-between rounded-[1.5rem] bg-[#15151d] p-6 ring-1 ring-white/10\" style=\"animation-delay:.08s\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-6 text-amber-300\">\n            <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n            </path>\n            <path d=\"M20 3v4\">\n            </path>\n            <path d=\"M22 5h-4\">\n            </path>\n            <path d=\"M4 17v2\">\n            </path>\n            <path d=\"M5 18H3\">\n            </path>\n          </svg>\n          <div>\n            <div class=\"text-3xl font-black tracking-tight\">\n              260+\n            </div>\n            <div class=\"text-xs text-white/50\">\n              Components\n            </div>\n          </div>\n        </div>\n        <div class=\"aww-be-cell flex flex-col justify-between rounded-[1.5rem] bg-[linear-gradient(135deg,#0891b2,#22d3ee)] p-6 ring-1 ring-white/10 text-[#04222a]\" style=\"animation-delay:.14s\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-zap size-6\">\n            <path d=\"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z\">\n            </path>\n          </svg>\n          <div>\n            <div class=\"text-3xl font-black tracking-tight\">\n              0ms\n            </div>\n            <div class=\"text-xs opacity-70\">\n              External calls\n            </div>\n          </div>\n        </div>\n        <div class=\"aww-be-cell col-span-2 flex items-center justify-between rounded-[1.5rem] bg-[#15151d] p-6 ring-1 ring-white/10\" style=\"animation-delay:.2s\">\n          <div>\n            <div class=\"flex items-center gap-2 text-sm font-semibold\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-globe size-4 text-emerald-300\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\">\n                </circle>\n                <path d=\"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20\">\n                </path>\n                <path d=\"M2 12h20\">\n                </path>\n              </svg>\n              Worldwide ready\n            </div>\n            <p class=\"mt-2 max-w-xs text-xs text-white/50\">\n              レスポンシブとダーク/ライト両対応。どこに置いても馴染む。\n            </p>\n          </div>\n          <button aria-label=\"作品を見る\" class=\"group flex size-11 items-center justify-center rounded-full bg-white text-black\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-up-right transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\">\n              <path d=\"M7 7h10v10\">\n              </path>\n              <path d=\"M7 17 17 7\">\n              </path>\n            </svg>\n          </button>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"aww-be w-full bg-[#0b0b10] px-5 py-16 text-white sm:px-10 sm:py-20\">\n      <style>\n        @keyframes aww-be-in { from{opacity:0;transform:translateY(22px) scale(.98);} to{opacity:1;transform:translateY(0) scale(1);} }\n            .aww-be-cell{ animation: aww-be-in .8s cubic-bezier(.16,1,.3,1) both; transition: transform .35s ease, box-shadow .35s ease; }\n            .aww-be-cell:hover{ transform: translateY(-4px); }\n            @media (prefers-reduced-motion: reduce){ .aww-be-cell{ animation:none!important; } }\n      </style>\n      <div class=\"mx-auto grid max-w-[1500px] auto-rows-[minmax(150px,auto)] grid-cols-2 gap-4 lg:grid-cols-4\">\n        <div class=\"aww-be-cell relative col-span-2 row-span-2 flex flex-col justify-between overflow-hidden rounded-[1.5rem] p-7 ring-1 ring-white/10 sm:p-9\" style=\"background:linear-gradient(135deg,#4f46e5,#9333ea,#db2777)\">\n          <div class=\"absolute -right-10 -top-10 h-44 w-44 rounded-full bg-white/20 blur-2xl\">\n          </div>\n          <span class=\"relative text-[11px] font-semibold uppercase tracking-[0.4em] text-white/70\">\n            Bento Studio\n          </span>\n          <h1 class=\"relative font-black leading-[0.88] tracking-[-0.03em]\" style=\"font-size:clamp(2rem,5vw,4.5rem)\">\n            一画面で\n            <br/>\n            語り尽くす。\n          </h1>\n        </div>\n        <div class=\"aww-be-cell flex flex-col justify-between rounded-[1.5rem] bg-[#15151d] p-6 ring-1 ring-white/10\" style=\"animation-delay:.08s\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-6 text-amber-300\">\n            <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n            </path>\n            <path d=\"M20 3v4\">\n            </path>\n            <path d=\"M22 5h-4\">\n            </path>\n            <path d=\"M4 17v2\">\n            </path>\n            <path d=\"M5 18H3\">\n            </path>\n          </svg>\n          <div>\n            <div class=\"text-3xl font-black tracking-tight\">\n              260+\n            </div>\n            <div class=\"text-xs text-white/50\">\n              Components\n            </div>\n          </div>\n        </div>\n        <div class=\"aww-be-cell flex flex-col justify-between rounded-[1.5rem] bg-[linear-gradient(135deg,#0891b2,#22d3ee)] p-6 ring-1 ring-white/10 text-[#04222a]\" style=\"animation-delay:.14s\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-zap size-6\">\n            <path d=\"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z\">\n            </path>\n          </svg>\n          <div>\n            <div class=\"text-3xl font-black tracking-tight\">\n              0ms\n            </div>\n            <div class=\"text-xs opacity-70\">\n              External calls\n            </div>\n          </div>\n        </div>\n        <div class=\"aww-be-cell col-span-2 flex items-center justify-between rounded-[1.5rem] bg-[#15151d] p-6 ring-1 ring-white/10\" style=\"animation-delay:.2s\">\n          <div>\n            <div class=\"flex items-center gap-2 text-sm font-semibold\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-globe size-4 text-emerald-300\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\">\n                </circle>\n                <path d=\"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20\">\n                </path>\n                <path d=\"M2 12h20\">\n                </path>\n              </svg>\n              Worldwide ready\n            </div>\n            <p class=\"mt-2 max-w-xs text-xs text-white/50\">\n              レスポンシブとダーク/ライト両対応。どこに置いても馴染む。\n            </p>\n          </div>\n          <button aria-label=\"作品を見る\" class=\"group flex size-11 items-center justify-center rounded-full bg-white text-black\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-up-right transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\">\n              <path d=\"M7 7h10v10\">\n              </path>\n              <path d=\"M7 17 17 7\">\n              </path>\n            </svg>\n          </button>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "aww-hero-clip-path-reveal-hero",
@@ -176,7 +176,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"クリップパス展開ヒーロー\",\n  category: \"Awwwards\",\n  description:\n    \"clip-pathの多角形マスクが展開しながら現れる、幾何学的でドラマチックなヒーロー。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"awwwards\", \"hero\", \"animation\"],\n};\n\nexport default function ClipPathRevealHero() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"aww-cp relative w-full overflow-hidden bg-[#0a0a0a] px-5 py-24 text-white sm:px-10 sm:py-32\">\n      <style>{`\n        @keyframes aww-cp-reveal {\n          from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }\n          to   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }\n        }\n        @keyframes aww-cp-diag {\n          from { clip-path: polygon(0 0, 0 0, 0 0); }\n          to   { clip-path: polygon(0 0, 100% 0, 0 100%); }\n        }\n        @keyframes aww-cp-up { from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} }\n        .aww-cp-reveal{ animation: aww-cp-reveal 1.1s cubic-bezier(.77,0,.18,1) both; }\n        .aww-cp-diag{ animation: aww-cp-diag 1.3s cubic-bezier(.77,0,.18,1) .2s both; }\n        .aww-cp-up{ animation: aww-cp-up .9s ease .6s both; }\n        @media (prefers-reduced-motion: reduce){\n          .aww-cp-reveal,.aww-cp-diag,.aww-cp-up{ animation:none!important; clip-path:none!important; opacity:1!important; }\n        }\n      `}</style>\n\n      <div className=\"pointer-events-none absolute inset-0\">\n        <div className=\"aww-cp-reveal absolute inset-0 bg-[linear-gradient(115deg,#1d4ed8,#7c3aed)]\" />\n        <div className=\"aww-cp-diag absolute inset-0 bg-[linear-gradient(115deg,#db2777,#f59e0b)] opacity-90\" />\n        <div className=\"absolute inset-0 bg-black/35\" />\n      </div>\n\n      <div className=\"relative mx-auto max-w-[1400px]\">\n        <p className=\"aww-cp-up mb-8 text-[11px] font-semibold uppercase tracking-[0.5em] text-white/70\">\n          clip-path / Reveal\n        </p>\n        <h1\n          className=\"aww-cp-up font-black uppercase leading-[0.82] tracking-[-0.04em]\"\n          style={{ fontSize: \"clamp(3rem,12vw,11rem)\" }}\n        >\n          Cut\n          <br />\n          The Frame\n        </h1>\n        <p className=\"aww-cp-up mt-9 max-w-md text-base leading-relaxed text-white/75\">\n          {en\n            ? \"A polygonal mask cuts diagonally open to reveal the background — a transition where the shape itself becomes the motion.\"\n            : \"多角形のマスクが斜めに切り開きながら背景を露わにする。形そのものが動きになるトランジション。\"}\n        </p>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"aww-cp relative w-full overflow-hidden bg-[#0a0a0a] px-5 py-24 text-white sm:px-10 sm:py-32\">\n      <style>\n        @keyframes aww-cp-reveal {\n              from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }\n              to   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }\n            }\n            @keyframes aww-cp-diag {\n              from { clip-path: polygon(0 0, 0 0, 0 0); }\n              to   { clip-path: polygon(0 0, 100% 0, 0 100%); }\n            }\n            @keyframes aww-cp-up { from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} }\n            .aww-cp-reveal{ animation: aww-cp-reveal 1.1s cubic-bezier(.77,0,.18,1) both; }\n            .aww-cp-diag{ animation: aww-cp-diag 1.3s cubic-bezier(.77,0,.18,1) .2s both; }\n            .aww-cp-up{ animation: aww-cp-up .9s ease .6s both; }\n            @media (prefers-reduced-motion: reduce){\n              .aww-cp-reveal,.aww-cp-diag,.aww-cp-up{ animation:none!important; clip-path:none!important; opacity:1!important; }\n            }\n      </style>\n      <div class=\"pointer-events-none absolute inset-0\">\n        <div class=\"aww-cp-reveal absolute inset-0 bg-[linear-gradient(115deg,#1d4ed8,#7c3aed)]\">\n        </div>\n        <div class=\"aww-cp-diag absolute inset-0 bg-[linear-gradient(115deg,#db2777,#f59e0b)] opacity-90\">\n        </div>\n        <div class=\"absolute inset-0 bg-black/35\">\n        </div>\n      </div>\n      <div class=\"relative mx-auto max-w-[1400px]\">\n        <p class=\"aww-cp-up mb-8 text-[11px] font-semibold uppercase tracking-[0.5em] text-white/70\">\n          clip-path / Reveal\n        </p>\n        <h1 class=\"aww-cp-up font-black uppercase leading-[0.82] tracking-[-0.04em]\" style=\"font-size:clamp(3rem,12vw,11rem)\">\n          Cut\n          <br/>\n          The Frame\n        </h1>\n        <p class=\"aww-cp-up mt-9 max-w-md text-base leading-relaxed text-white/75\">\n          多角形のマスクが斜めに切り開きながら背景を露わにする。形そのものが動きになるトランジション。\n        </p>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"aww-cp relative w-full overflow-hidden bg-[#0a0a0a] px-5 py-24 text-white sm:px-10 sm:py-32\">\n      <style>\n        @keyframes aww-cp-reveal {\n              from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }\n              to   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }\n            }\n            @keyframes aww-cp-diag {\n              from { clip-path: polygon(0 0, 0 0, 0 0); }\n              to   { clip-path: polygon(0 0, 100% 0, 0 100%); }\n            }\n            @keyframes aww-cp-up { from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} }\n            .aww-cp-reveal{ animation: aww-cp-reveal 1.1s cubic-bezier(.77,0,.18,1) both; }\n            .aww-cp-diag{ animation: aww-cp-diag 1.3s cubic-bezier(.77,0,.18,1) .2s both; }\n            .aww-cp-up{ animation: aww-cp-up .9s ease .6s both; }\n            @media (prefers-reduced-motion: reduce){\n              .aww-cp-reveal,.aww-cp-diag,.aww-cp-up{ animation:none!important; clip-path:none!important; opacity:1!important; }\n            }\n      </style>\n      <div class=\"pointer-events-none absolute inset-0\">\n        <div class=\"aww-cp-reveal absolute inset-0 bg-[linear-gradient(115deg,#1d4ed8,#7c3aed)]\">\n        </div>\n        <div class=\"aww-cp-diag absolute inset-0 bg-[linear-gradient(115deg,#db2777,#f59e0b)] opacity-90\">\n        </div>\n        <div class=\"absolute inset-0 bg-black/35\">\n        </div>\n      </div>\n      <div class=\"relative mx-auto max-w-[1400px]\">\n        <p class=\"aww-cp-up mb-8 text-[11px] font-semibold uppercase tracking-[0.5em] text-white/70\">\n          clip-path / Reveal\n        </p>\n        <h1 class=\"aww-cp-up font-black uppercase leading-[0.82] tracking-[-0.04em]\" style=\"font-size:clamp(3rem,12vw,11rem)\">\n          Cut\n          <br/>\n          The Frame\n        </h1>\n        <p class=\"aww-cp-up mt-9 max-w-md text-base leading-relaxed text-white/75\">\n          多角形のマスクが斜めに切り開きながら背景を露わにする。形そのものが動きになるトランジション。\n        </p>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "bg-anim-animated-gradient",
@@ -190,7 +190,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"アニメグラデ背景\",\n  category: \"背景アニメ\",\n  description: \"複数色のグラデーションが滑らかに移ろい続けるヒーロー背景。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"background\", \"animation\", \"gradient\"],\n};\n\nexport default function AnimatedGradient() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"relative w-full overflow-hidden bg-slate-950 py-28 text-white\">\n      <style>{`\n        @keyframes anim-grad-shift {\n          0% { background-position: 0% 50%; }\n          50% { background-position: 100% 50%; }\n          100% { background-position: 0% 50%; }\n        }\n        .anim-grad-bg {\n          background: linear-gradient(120deg, #0f172a, #4c1d95, #1e3a8a, #0e7490, #581c87, #0f172a);\n          background-size: 300% 300%;\n          animation: anim-grad-shift 18s ease infinite;\n        }\n        @media (prefers-reduced-motion: reduce) {\n          .anim-grad-bg { animation: none; }\n        }\n      `}</style>\n      <div className=\"anim-grad-bg absolute inset-0 opacity-90\" />\n      <div className=\"absolute inset-0 bg-slate-950/40\" />\n      <div className=\"relative mx-auto max-w-3xl px-6 text-center\">\n        <span className=\"inline-block rounded-full border border-white/15 bg-white/5 px-4 py-1 text-xs font-medium tracking-wide text-white/70\">\n          Animated Gradient\n        </span>\n        <h1 className=\"mt-6 text-4xl font-bold tracking-tight sm:text-6xl\">\n          {en\n            ? \"A smooth gradient that breathes with color\"\n            : \"色が呼吸する、滑らかなグラデーション\"}\n        </h1>\n        <p className=\"mx-auto mt-5 max-w-xl text-lg text-white/70\">\n          {en\n            ? \"Keyframed background-position shifts the hue seamlessly, with no visible seams.\"\n            : \"background-position をキーフレームで動かし、継ぎ目なく色相が移ろいます。\"}\n        </p>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"relative w-full overflow-hidden bg-slate-950 py-28 text-white\">\n      <style>\n        @keyframes anim-grad-shift {\n              0% { background-position: 0% 50%; }\n              50% { background-position: 100% 50%; }\n              100% { background-position: 0% 50%; }\n            }\n            .anim-grad-bg {\n              background: linear-gradient(120deg, #0f172a, #4c1d95, #1e3a8a, #0e7490, #581c87, #0f172a);\n              background-size: 300% 300%;\n              animation: anim-grad-shift 18s ease infinite;\n            }\n            @media (prefers-reduced-motion: reduce) {\n              .anim-grad-bg { animation: none; }\n            }\n      </style>\n      <div class=\"anim-grad-bg absolute inset-0 opacity-90\">\n      </div>\n      <div class=\"absolute inset-0 bg-slate-950/40\">\n      </div>\n      <div class=\"relative mx-auto max-w-3xl px-6 text-center\">\n        <span class=\"inline-block rounded-full border border-white/15 bg-white/5 px-4 py-1 text-xs font-medium tracking-wide text-white/70\">\n          Animated Gradient\n        </span>\n        <h1 class=\"mt-6 text-4xl font-bold tracking-tight sm:text-6xl\">\n          色が呼吸する、滑らかなグラデーション\n        </h1>\n        <p class=\"mx-auto mt-5 max-w-xl text-lg text-white/70\">\n          background-position をキーフレームで動かし、継ぎ目なく色相が移ろいます。\n        </p>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"relative w-full overflow-hidden bg-slate-950 py-28 text-white\">\n      <style>\n        @keyframes anim-grad-shift {\n              0% { background-position: 0% 50%; }\n              50% { background-position: 100% 50%; }\n              100% { background-position: 0% 50%; }\n            }\n            .anim-grad-bg {\n              background: linear-gradient(120deg, #0f172a, #4c1d95, #1e3a8a, #0e7490, #581c87, #0f172a);\n              background-size: 300% 300%;\n              animation: anim-grad-shift 18s ease infinite;\n            }\n            @media (prefers-reduced-motion: reduce) {\n              .anim-grad-bg { animation: none; }\n            }\n      </style>\n      <div class=\"anim-grad-bg absolute inset-0 opacity-90\">\n      </div>\n      <div class=\"absolute inset-0 bg-slate-950/40\">\n      </div>\n      <div class=\"relative mx-auto max-w-3xl px-6 text-center\">\n        <span class=\"inline-block rounded-full border border-white/15 bg-white/5 px-4 py-1 text-xs font-medium tracking-wide text-white/70\">\n          Animated Gradient\n        </span>\n        <h1 class=\"mt-6 text-4xl font-bold tracking-tight sm:text-6xl\">\n          色が呼吸する、滑らかなグラデーション\n        </h1>\n        <p class=\"mx-auto mt-5 max-w-xl text-lg text-white/70\">\n          background-position をキーフレームで動かし、継ぎ目なく色相が移ろいます。\n        </p>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "bg-anim-aurora",
@@ -204,7 +204,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"オーロラ背景\",\n  category: \"背景アニメ\",\n  description: \"北極光のようなグラデーションの光が背後でゆっくり漂うヒーロー背景。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"background\", \"animation\", \"aurora\"],\n};\n\nexport default function Aurora() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"relative w-full overflow-hidden bg-[#05060f] py-28 text-white\">\n      <style>{`\n        @keyframes aurora-drift-1 {\n          0%, 100% { transform: translate3d(-10%, -10%, 0) rotate(0deg) scale(1.1); }\n          50% { transform: translate3d(15%, 10%, 0) rotate(25deg) scale(1.3); }\n        }\n        @keyframes aurora-drift-2 {\n          0%, 100% { transform: translate3d(10%, 5%, 0) rotate(0deg) scale(1.2); }\n          50% { transform: translate3d(-15%, -8%, 0) rotate(-20deg) scale(1); }\n        }\n        @keyframes aurora-drift-3 {\n          0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.6; }\n          50% { transform: translate3d(-8%, 12%, 0) scale(1.25); opacity: 0.9; }\n        }\n        @media (prefers-reduced-motion: reduce) {\n          .aurora-blob { animation: none !important; }\n        }\n      `}</style>\n      <div className=\"pointer-events-none absolute inset-0 overflow-hidden\">\n        <div\n          className=\"aurora-blob absolute left-[10%] top-[-20%] h-[60vh] w-[60vh] rounded-full opacity-70 blur-[80px]\"\n          style={{\n            background:\n              \"radial-gradient(circle, rgba(56,189,248,0.7), transparent 70%)\",\n            animation: \"aurora-drift-1 14s ease-in-out infinite\",\n          }}\n        />\n        <div\n          className=\"aurora-blob absolute right-[5%] top-[0%] h-[55vh] w-[55vh] rounded-full opacity-60 blur-[90px]\"\n          style={{\n            background:\n              \"radial-gradient(circle, rgba(168,85,247,0.7), transparent 70%)\",\n            animation: \"aurora-drift-2 18s ease-in-out infinite\",\n          }}\n        />\n        <div\n          className=\"aurora-blob absolute left-[30%] top-[20%] h-[50vh] w-[70vh] rounded-full blur-[100px]\"\n          style={{\n            background:\n              \"radial-gradient(circle, rgba(52,211,153,0.6), transparent 70%)\",\n            animation: \"aurora-drift-3 16s ease-in-out infinite\",\n          }}\n        />\n      </div>\n      <div className=\"absolute inset-0 bg-[#05060f]/30\" />\n      <div className=\"relative mx-auto max-w-3xl px-6 text-center\">\n        <span className=\"inline-block rounded-full border border-white/15 bg-white/5 px-4 py-1 text-xs font-medium tracking-wide text-white/70\">\n          Aurora Background\n        </span>\n        <h1 className=\"mt-6 text-4xl font-bold tracking-tight sm:text-6xl\">\n          {en\n            ? \"A night-sky backdrop with shimmering light\"\n            : \"光がゆらめく、夜空のような背景\"}\n        </h1>\n        <p className=\"mx-auto mt-5 max-w-xl text-lg text-white/60\">\n          {en\n            ? \"Gradients drifting like the aurora, moving quietly behind your content.\"\n            : \"オーロラのように漂うグラデーション。コンテンツの背後で静かに動き続けます。\"}\n        </p>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"relative w-full overflow-hidden bg-[#05060f] py-28 text-white\">\n      <style>\n        @keyframes aurora-drift-1 {\n              0%, 100% { transform: translate3d(-10%, -10%, 0) rotate(0deg) scale(1.1); }\n              50% { transform: translate3d(15%, 10%, 0) rotate(25deg) scale(1.3); }\n            }\n            @keyframes aurora-drift-2 {\n              0%, 100% { transform: translate3d(10%, 5%, 0) rotate(0deg) scale(1.2); }\n              50% { transform: translate3d(-15%, -8%, 0) rotate(-20deg) scale(1); }\n            }\n            @keyframes aurora-drift-3 {\n              0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.6; }\n              50% { transform: translate3d(-8%, 12%, 0) scale(1.25); opacity: 0.9; }\n            }\n            @media (prefers-reduced-motion: reduce) {\n              .aurora-blob { animation: none !important; }\n            }\n      </style>\n      <div class=\"pointer-events-none absolute inset-0 overflow-hidden\">\n        <div class=\"aurora-blob absolute left-[10%] top-[-20%] h-[60vh] w-[60vh] rounded-full opacity-70 blur-[80px]\" style=\"background:radial-gradient(circle, rgba(56,189,248,0.7), transparent 70%);animation:aurora-drift-1 14s ease-in-out infinite\">\n        </div>\n        <div class=\"aurora-blob absolute right-[5%] top-[0%] h-[55vh] w-[55vh] rounded-full opacity-60 blur-[90px]\" style=\"background:radial-gradient(circle, rgba(168,85,247,0.7), transparent 70%);animation:aurora-drift-2 18s ease-in-out infinite\">\n        </div>\n        <div class=\"aurora-blob absolute left-[30%] top-[20%] h-[50vh] w-[70vh] rounded-full blur-[100px]\" style=\"background:radial-gradient(circle, rgba(52,211,153,0.6), transparent 70%);animation:aurora-drift-3 16s ease-in-out infinite\">\n        </div>\n      </div>\n      <div class=\"absolute inset-0 bg-[#05060f]/30\">\n      </div>\n      <div class=\"relative mx-auto max-w-3xl px-6 text-center\">\n        <span class=\"inline-block rounded-full border border-white/15 bg-white/5 px-4 py-1 text-xs font-medium tracking-wide text-white/70\">\n          Aurora Background\n        </span>\n        <h1 class=\"mt-6 text-4xl font-bold tracking-tight sm:text-6xl\">\n          光がゆらめく、夜空のような背景\n        </h1>\n        <p class=\"mx-auto mt-5 max-w-xl text-lg text-white/60\">\n          オーロラのように漂うグラデーション。コンテンツの背後で静かに動き続けます。\n        </p>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"relative w-full overflow-hidden bg-[#05060f] py-28 text-white\">\n      <style>\n        @keyframes aurora-drift-1 {\n              0%, 100% { transform: translate3d(-10%, -10%, 0) rotate(0deg) scale(1.1); }\n              50% { transform: translate3d(15%, 10%, 0) rotate(25deg) scale(1.3); }\n            }\n            @keyframes aurora-drift-2 {\n              0%, 100% { transform: translate3d(10%, 5%, 0) rotate(0deg) scale(1.2); }\n              50% { transform: translate3d(-15%, -8%, 0) rotate(-20deg) scale(1); }\n            }\n            @keyframes aurora-drift-3 {\n              0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.6; }\n              50% { transform: translate3d(-8%, 12%, 0) scale(1.25); opacity: 0.9; }\n            }\n            @media (prefers-reduced-motion: reduce) {\n              .aurora-blob { animation: none !important; }\n            }\n      </style>\n      <div class=\"pointer-events-none absolute inset-0 overflow-hidden\">\n        <div class=\"aurora-blob absolute left-[10%] top-[-20%] h-[60vh] w-[60vh] rounded-full opacity-70 blur-[80px]\" style=\"background:radial-gradient(circle, rgba(56,189,248,0.7), transparent 70%);animation:aurora-drift-1 14s ease-in-out infinite\">\n        </div>\n        <div class=\"aurora-blob absolute right-[5%] top-[0%] h-[55vh] w-[55vh] rounded-full opacity-60 blur-[90px]\" style=\"background:radial-gradient(circle, rgba(168,85,247,0.7), transparent 70%);animation:aurora-drift-2 18s ease-in-out infinite\">\n        </div>\n        <div class=\"aurora-blob absolute left-[30%] top-[20%] h-[50vh] w-[70vh] rounded-full blur-[100px]\" style=\"background:radial-gradient(circle, rgba(52,211,153,0.6), transparent 70%);animation:aurora-drift-3 16s ease-in-out infinite\">\n        </div>\n      </div>\n      <div class=\"absolute inset-0 bg-[#05060f]/30\">\n      </div>\n      <div class=\"relative mx-auto max-w-3xl px-6 text-center\">\n        <span class=\"inline-block rounded-full border border-white/15 bg-white/5 px-4 py-1 text-xs font-medium tracking-wide text-white/70\">\n          Aurora Background\n        </span>\n        <h1 class=\"mt-6 text-4xl font-bold tracking-tight sm:text-6xl\">\n          光がゆらめく、夜空のような背景\n        </h1>\n        <p class=\"mx-auto mt-5 max-w-xl text-lg text-white/60\">\n          オーロラのように漂うグラデーション。コンテンツの背後で静かに動き続けます。\n        </p>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "bg-anim-conic-glow",
@@ -219,7 +219,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"コニックグロー背景\",\n  category: \"背景アニメ\",\n  description: \"回転するコニックグラデーションの光輪が中央カードを照らす背景。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"background\", \"animation\", \"conic\", \"glow\"],\n};\n\nexport default function ConicGlow() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"relative flex w-full items-center justify-center overflow-hidden bg-[#05060f] py-32 text-white\">\n      <style>{`\n        @keyframes cg-spin {\n          to { transform: rotate(360deg); }\n        }\n        @media (prefers-reduced-motion: reduce) {\n          .cg-halo { animation: none !important; }\n        }\n      `}</style>\n      <div className=\"pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2\">\n        <div\n          className=\"cg-halo h-[80vh] w-[80vh] rounded-full opacity-50 blur-[60px]\"\n          style={{\n            background:\n              \"conic-gradient(from 0deg, #38bdf8, #a855f7, #ec4899, #f59e0b, #34d399, #38bdf8)\",\n            animation: \"cg-spin 12s linear infinite\",\n          }}\n        />\n      </div>\n      <div className=\"pointer-events-none absolute left-1/2 top-1/2 h-[55vh] w-[55vh] -translate-x-1/2 -translate-y-1/2 rounded-full bg-[#05060f] blur-2xl\" />\n      <div className=\"relative mx-auto max-w-md px-6\">\n        <div className=\"rounded-3xl border border-white/10 bg-white/5 p-10 text-center backdrop-blur-xl\">\n          <span className=\"inline-block rounded-full border border-white/15 bg-white/5 px-4 py-1 text-xs font-medium tracking-wide text-white/70\">\n            Conic Glow\n          </span>\n          <h1 className=\"mt-6 text-3xl font-bold tracking-tight sm:text-4xl\">\n            {en\n              ? \"A card wrapped in a spinning halo of light\"\n              : \"回る光輪に包まれるカード\"}\n          </h1>\n          <p className=\"mt-4 text-base text-white/60\">\n            {en\n              ? \"A conic gradient rotates, softly illuminating the card at the center.\"\n              : \"コニックグラデーションが回転し、中央のカードを柔らかく照らします。\"}\n          </p>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"relative flex w-full items-center justify-center overflow-hidden bg-[#05060f] py-32 text-white\">\n      <style>\n        @keyframes cg-spin {\n              to { transform: rotate(360deg); }\n            }\n            @media (prefers-reduced-motion: reduce) {\n              .cg-halo { animation: none !important; }\n            }\n      </style>\n      <div class=\"pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2\">\n        <div class=\"cg-halo h-[80vh] w-[80vh] rounded-full opacity-50 blur-[60px]\" style=\"background:conic-gradient(from 0deg, #38bdf8, #a855f7, #ec4899, #f59e0b, #34d399, #38bdf8);animation:cg-spin 12s linear infinite\">\n        </div>\n      </div>\n      <div class=\"pointer-events-none absolute left-1/2 top-1/2 h-[55vh] w-[55vh] -translate-x-1/2 -translate-y-1/2 rounded-full bg-[#05060f] blur-2xl\">\n      </div>\n      <div class=\"relative mx-auto max-w-md px-6\">\n        <div class=\"rounded-3xl border border-white/10 bg-white/5 p-10 text-center backdrop-blur-xl\">\n          <span class=\"inline-block rounded-full border border-white/15 bg-white/5 px-4 py-1 text-xs font-medium tracking-wide text-white/70\">\n            Conic Glow\n          </span>\n          <h1 class=\"mt-6 text-3xl font-bold tracking-tight sm:text-4xl\">\n            回る光輪に包まれるカード\n          </h1>\n          <p class=\"mt-4 text-base text-white/60\">\n            コニックグラデーションが回転し、中央のカードを柔らかく照らします。\n          </p>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"relative flex w-full items-center justify-center overflow-hidden bg-[#05060f] py-32 text-white\">\n      <style>\n        @keyframes cg-spin {\n              to { transform: rotate(360deg); }\n            }\n            @media (prefers-reduced-motion: reduce) {\n              .cg-halo { animation: none !important; }\n            }\n      </style>\n      <div class=\"pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2\">\n        <div class=\"cg-halo h-[80vh] w-[80vh] rounded-full opacity-50 blur-[60px]\" style=\"background:conic-gradient(from 0deg, #38bdf8, #a855f7, #ec4899, #f59e0b, #34d399, #38bdf8);animation:cg-spin 12s linear infinite\">\n        </div>\n      </div>\n      <div class=\"pointer-events-none absolute left-1/2 top-1/2 h-[55vh] w-[55vh] -translate-x-1/2 -translate-y-1/2 rounded-full bg-[#05060f] blur-2xl\">\n      </div>\n      <div class=\"relative mx-auto max-w-md px-6\">\n        <div class=\"rounded-3xl border border-white/10 bg-white/5 p-10 text-center backdrop-blur-xl\">\n          <span class=\"inline-block rounded-full border border-white/15 bg-white/5 px-4 py-1 text-xs font-medium tracking-wide text-white/70\">\n            Conic Glow\n          </span>\n          <h1 class=\"mt-6 text-3xl font-bold tracking-tight sm:text-4xl\">\n            回る光輪に包まれるカード\n          </h1>\n          <p class=\"mt-4 text-base text-white/60\">\n            コニックグラデーションが回転し、中央のカードを柔らかく照らします。\n          </p>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "bg-anim-grid-beams",
@@ -234,7 +234,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"グリッドビーム背景\",\n  category: \"背景アニメ\",\n  description: \"グリッド上を光のビームが横切るテック系ヒーロー背景。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"background\", \"animation\", \"grid\", \"beams\"],\n};\n\nexport default function GridBeams() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  const beams = [\n    { top: \"20%\", delay: \"0s\", duration: \"6s\", color: \"rgba(56,189,248,0.9)\" },\n    { top: \"45%\", delay: \"2s\", duration: \"8s\", color: \"rgba(168,85,247,0.9)\" },\n    { top: \"70%\", delay: \"4s\", duration: \"7s\", color: \"rgba(52,211,153,0.9)\" },\n    { top: \"88%\", delay: \"1.5s\", duration: \"9s\", color: \"rgba(244,114,182,0.9)\" },\n  ];\n  return (\n    <section className=\"relative w-full overflow-hidden bg-[#04060d] py-28 text-white\">\n      <style>{`\n        @keyframes gb-sweep {\n          0% { transform: translateX(-120%); opacity: 0; }\n          10% { opacity: 1; }\n          90% { opacity: 1; }\n          100% { transform: translateX(120%); opacity: 0; }\n        }\n        @media (prefers-reduced-motion: reduce) {\n          .gb-beam { animation: none !important; opacity: 0.3; }\n        }\n      `}</style>\n      <div\n        className=\"absolute inset-0 opacity-40\"\n        style={{\n          backgroundImage:\n            \"linear-gradient(rgba(148,163,184,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.12) 1px, transparent 1px)\",\n          backgroundSize: \"48px 48px\",\n          maskImage:\n            \"radial-gradient(ellipse 80% 60% at 50% 50%, #000 50%, transparent 100%)\",\n        }}\n      />\n      <div className=\"pointer-events-none absolute inset-0 overflow-hidden\">\n        {beams.map((b) => (\n          <div\n            key={b.top}\n            className=\"gb-beam absolute h-px w-[40%]\"\n            style={{\n              top: b.top,\n              background: `linear-gradient(90deg, transparent, ${b.color}, transparent)`,\n              boxShadow: `0 0 12px ${b.color}`,\n              animation: `gb-sweep ${b.duration} linear ${b.delay} infinite`,\n            }}\n          />\n        ))}\n      </div>\n      <div className=\"relative mx-auto max-w-3xl px-6 text-center\">\n        <span className=\"inline-block rounded-full border border-white/15 bg-white/5 px-4 py-1 text-xs font-medium tracking-wide text-white/70\">\n          Grid Beams\n        </span>\n        <h1 className=\"mt-6 text-4xl font-bold tracking-tight sm:text-6xl\">\n          {en\n            ? \"Beams of light racing across the grid\"\n            : \"グリッドを駆け抜ける光のビーム\"}\n        </h1>\n        <p className=\"mx-auto mt-5 max-w-xl text-lg text-white/60\">\n          {en\n            ? \"Glowing beams sweep across the grid at a steady rhythm.\"\n            : \"発光するビームがグリッド上を一定リズムで横切ります。\"}\n        </p>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"relative w-full overflow-hidden bg-[#04060d] py-28 text-white\">\n      <style>\n        @keyframes gb-sweep {\n              0% { transform: translateX(-120%); opacity: 0; }\n              10% { opacity: 1; }\n              90% { opacity: 1; }\n              100% { transform: translateX(120%); opacity: 0; }\n            }\n            @media (prefers-reduced-motion: reduce) {\n              .gb-beam { animation: none !important; opacity: 0.3; }\n            }\n      </style>\n      <div class=\"absolute inset-0 opacity-40\" style=\"background-image:linear-gradient(rgba(148,163,184,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.12) 1px, transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 80% 60% at 50% 50%, #000 50%, transparent 100%)\">\n      </div>\n      <div class=\"pointer-events-none absolute inset-0 overflow-hidden\">\n        <div class=\"gb-beam absolute h-px w-[40%]\" style=\"top:20%;background:linear-gradient(90deg, transparent, rgba(56,189,248,0.9), transparent);box-shadow:0 0 12px rgba(56,189,248,0.9);animation:gb-sweep 6s linear 0s infinite\">\n        </div>\n        <div class=\"gb-beam absolute h-px w-[40%]\" style=\"top:45%;background:linear-gradient(90deg, transparent, rgba(168,85,247,0.9), transparent);box-shadow:0 0 12px rgba(168,85,247,0.9);animation:gb-sweep 8s linear 2s infinite\">\n        </div>\n        <div class=\"gb-beam absolute h-px w-[40%]\" style=\"top:70%;background:linear-gradient(90deg, transparent, rgba(52,211,153,0.9), transparent);box-shadow:0 0 12px rgba(52,211,153,0.9);animation:gb-sweep 7s linear 4s infinite\">\n        </div>\n        <div class=\"gb-beam absolute h-px w-[40%]\" style=\"top:88%;background:linear-gradient(90deg, transparent, rgba(244,114,182,0.9), transparent);box-shadow:0 0 12px rgba(244,114,182,0.9);animation:gb-sweep 9s linear 1.5s infinite\">\n        </div>\n      </div>\n      <div class=\"relative mx-auto max-w-3xl px-6 text-center\">\n        <span class=\"inline-block rounded-full border border-white/15 bg-white/5 px-4 py-1 text-xs font-medium tracking-wide text-white/70\">\n          Grid Beams\n        </span>\n        <h1 class=\"mt-6 text-4xl font-bold tracking-tight sm:text-6xl\">\n          グリッドを駆け抜ける光のビーム\n        </h1>\n        <p class=\"mx-auto mt-5 max-w-xl text-lg text-white/60\">\n          発光するビームがグリッド上を一定リズムで横切ります。\n        </p>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"relative w-full overflow-hidden bg-[#04060d] py-28 text-white\">\n      <style>\n        @keyframes gb-sweep {\n              0% { transform: translateX(-120%); opacity: 0; }\n              10% { opacity: 1; }\n              90% { opacity: 1; }\n              100% { transform: translateX(120%); opacity: 0; }\n            }\n            @media (prefers-reduced-motion: reduce) {\n              .gb-beam { animation: none !important; opacity: 0.3; }\n            }\n      </style>\n      <div class=\"absolute inset-0 opacity-40\" style=\"background-image:linear-gradient(rgba(148,163,184,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.12) 1px, transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 80% 60% at 50% 50%, #000 50%, transparent 100%)\">\n      </div>\n      <div class=\"pointer-events-none absolute inset-0 overflow-hidden\">\n        <div class=\"gb-beam absolute h-px w-[40%]\" style=\"top:20%;background:linear-gradient(90deg, transparent, rgba(56,189,248,0.9), transparent);box-shadow:0 0 12px rgba(56,189,248,0.9);animation:gb-sweep 6s linear 0s infinite\">\n        </div>\n        <div class=\"gb-beam absolute h-px w-[40%]\" style=\"top:45%;background:linear-gradient(90deg, transparent, rgba(168,85,247,0.9), transparent);box-shadow:0 0 12px rgba(168,85,247,0.9);animation:gb-sweep 8s linear 2s infinite\">\n        </div>\n        <div class=\"gb-beam absolute h-px w-[40%]\" style=\"top:70%;background:linear-gradient(90deg, transparent, rgba(52,211,153,0.9), transparent);box-shadow:0 0 12px rgba(52,211,153,0.9);animation:gb-sweep 7s linear 4s infinite\">\n        </div>\n        <div class=\"gb-beam absolute h-px w-[40%]\" style=\"top:88%;background:linear-gradient(90deg, transparent, rgba(244,114,182,0.9), transparent);box-shadow:0 0 12px rgba(244,114,182,0.9);animation:gb-sweep 9s linear 1.5s infinite\">\n        </div>\n      </div>\n      <div class=\"relative mx-auto max-w-3xl px-6 text-center\">\n        <span class=\"inline-block rounded-full border border-white/15 bg-white/5 px-4 py-1 text-xs font-medium tracking-wide text-white/70\">\n          Grid Beams\n        </span>\n        <h1 class=\"mt-6 text-4xl font-bold tracking-tight sm:text-6xl\">\n          グリッドを駆け抜ける光のビーム\n        </h1>\n        <p class=\"mx-auto mt-5 max-w-xl text-lg text-white/60\">\n          発光するビームがグリッド上を一定リズムで横切ります。\n        </p>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "botanical-botanical-feature",
@@ -248,7 +248,7 @@
       ],
       "standalone": true,
       "source": "import { Droplets, Recycle, ShieldCheck, Sprout } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"ボタニカル・フィーチャー\",\n  category: \"ボタニカル\",\n  description: \"植物のラインアートを背景にした特徴・ベネフィット紹介セクション。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"botanical\", \"organic\", \"wellness\"],\n};\n\nfunction BranchLine({ className }: { className?: string }) {\n  return (\n    <svg viewBox=\"0 0 400 120\" fill=\"none\" className={className} aria-hidden>\n      <path\n        d=\"M0 60 C80 60 120 40 200 40 C280 40 320 80 400 80\"\n        stroke=\"#86a06d\"\n        strokeWidth=\"1.5\"\n        strokeOpacity=\"0.5\"\n      />\n      {[60, 140, 220, 300].map((x, i) => (\n        <g key={x} stroke=\"#86a06d\" strokeWidth=\"1.2\" strokeOpacity=\"0.5\">\n          <path d={`M${x} ${48 - i * 2} l-10 -14`} />\n          <path d={`M${x} ${48 - i * 2} l10 -14`} />\n        </g>\n      ))}\n    </svg>\n  );\n}\n\nconst features = [\n  {\n    icon: Sprout,\n    titleJa: \"畑から処方へ\",\n    titleEn: \"From field to formula\",\n    descJa: \"契約農家で育てた植物を、収穫から72時間以内に抽出。鮮度の高い有効成分を届けます。\",\n    descEn: \"Plants grown on partner farms are extracted within 72 hours of harvest, delivering fresh, active ingredients.\",\n  },\n  {\n    icon: Droplets,\n    titleJa: \"やさしい保湿\",\n    titleEn: \"Gentle hydration\",\n    descJa: \"肌のうるおいバリアを守る植物オイルブレンド。敏感肌の方にも穏やかに寄り添います。\",\n    descEn: \"A plant-oil blend that protects the skin's moisture barrier — gentle even for sensitive skin.\",\n  },\n  {\n    icon: ShieldCheck,\n    titleJa: \"確かな安全性\",\n    titleEn: \"Proven safety\",\n    descJa: \"全成分を開示し、第三者機関でパッチテスト済み。安心して毎日使える処方です。\",\n    descEn: \"Every ingredient is disclosed and third-party patch-tested — a formula you can trust to use daily.\",\n  },\n  {\n    icon: Recycle,\n    titleJa: \"地球への配慮\",\n    titleEn: \"Kind to the planet\",\n    descJa: \"容器は100%リサイクル素材。詰め替えプログラムで廃棄物を最小限に抑えます。\",\n    descEn: \"Packaging is 100% recycled material, and our refill program keeps waste to a minimum.\",\n  },\n];\n\nexport default function BotanicalFeature() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"relative w-full overflow-hidden bg-[#f3f1e7] px-6 py-20 text-[#3f4a35]\">\n      <BranchLine className=\"pointer-events-none absolute left-0 top-10 h-28 w-full opacity-60\" />\n      <div className=\"relative mx-auto max-w-5xl\">\n        <div className=\"mx-auto max-w-xl text-center\">\n          <h2 className=\"font-serif text-4xl font-medium tracking-tight\">\n            {en ? \"Botanical wisdom for everyday care\" : \"植物の知恵を、毎日のケアに\"}\n          </h2>\n          <p className=\"mt-3 text-sm leading-relaxed text-[#5e6b4f]\">\n            {en\n              ? \"Our commitment, born from the harmony of nature and science.\"\n              : \"自然と科学の調和から生まれる、わたしたちのこだわり。\"}\n          </p>\n        </div>\n\n        <div className=\"mt-14 grid gap-x-10 gap-y-12 sm:grid-cols-2\">\n          {features.map(({ icon: Icon, titleJa, titleEn, descJa, descEn }) => (\n            <div key={titleEn} className=\"flex gap-5\">\n              <span className=\"flex size-14 shrink-0 items-center justify-center rounded-2xl bg-[#5e6b4f]/12 text-[#5e6b4f]\">\n                <Icon className=\"size-6\" />\n              </span>\n              <div>\n                <h3 className=\"font-serif text-xl font-medium\">\n                  {en ? titleEn : titleJa}\n                </h3>\n                <p className=\"mt-2 text-sm leading-relaxed text-[#5e6b4f]\">\n                  {en ? descEn : descJa}\n                </p>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"relative w-full overflow-hidden bg-[#f3f1e7] px-6 py-20 text-[#3f4a35]\">\n      <svg viewBox=\"0 0 400 120\" fill=\"none\" class=\"pointer-events-none absolute left-0 top-10 h-28 w-full opacity-60\" aria-hidden=\"true\">\n        <path d=\"M0 60 C80 60 120 40 200 40 C280 40 320 80 400 80\" stroke=\"#86a06d\" stroke-width=\"1.5\" stroke-opacity=\"0.5\">\n        </path>\n        <g stroke=\"#86a06d\" stroke-width=\"1.2\" stroke-opacity=\"0.5\">\n          <path d=\"M60 48 l-10 -14\">\n          </path>\n          <path d=\"M60 48 l10 -14\">\n          </path>\n        </g>\n        <g stroke=\"#86a06d\" stroke-width=\"1.2\" stroke-opacity=\"0.5\">\n          <path d=\"M140 46 l-10 -14\">\n          </path>\n          <path d=\"M140 46 l10 -14\">\n          </path>\n        </g>\n        <g stroke=\"#86a06d\" stroke-width=\"1.2\" stroke-opacity=\"0.5\">\n          <path d=\"M220 44 l-10 -14\">\n          </path>\n          <path d=\"M220 44 l10 -14\">\n          </path>\n        </g>\n        <g stroke=\"#86a06d\" stroke-width=\"1.2\" stroke-opacity=\"0.5\">\n          <path d=\"M300 42 l-10 -14\">\n          </path>\n          <path d=\"M300 42 l10 -14\">\n          </path>\n        </g>\n      </svg>\n      <div class=\"relative mx-auto max-w-5xl\">\n        <div class=\"mx-auto max-w-xl text-center\">\n          <h2 class=\"font-serif text-4xl font-medium tracking-tight\">\n            植物の知恵を、毎日のケアに\n          </h2>\n          <p class=\"mt-3 text-sm leading-relaxed text-[#5e6b4f]\">\n            自然と科学の調和から生まれる、わたしたちのこだわり。\n          </p>\n        </div>\n        <div class=\"mt-14 grid gap-x-10 gap-y-12 sm:grid-cols-2\">\n          <div class=\"flex gap-5\">\n            <span class=\"flex size-14 shrink-0 items-center justify-center rounded-2xl bg-[#5e6b4f]/12 text-[#5e6b4f]\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sprout size-6\">\n                <path d=\"M7 20h10\">\n                </path>\n                <path d=\"M10 20c5.5-2.5.8-6.4 3-10\">\n                </path>\n                <path d=\"M9.5 9.4c1.1.8 1.8 2.2 2.3 3.7-2 .4-3.5.4-4.8-.3-1.2-.6-2.3-1.9-3-4.2 2.8-.5 4.4 0 5.5.8z\">\n                </path>\n                <path d=\"M14.1 6a7 7 0 0 0-1.1 4c1.9-.1 3.3-.6 4.3-1.4 1-1 1.6-2.3 1.7-4.6-2.7.1-4 1-4.9 2z\">\n                </path>\n              </svg>\n            </span>\n            <div>\n              <h3 class=\"font-serif text-xl font-medium\">\n                畑から処方へ\n              </h3>\n              <p class=\"mt-2 text-sm leading-relaxed text-[#5e6b4f]\">\n                契約農家で育てた植物を、収穫から72時間以内に抽出。鮮度の高い有効成分を届けます。\n              </p>\n            </div>\n          </div>\n          <div class=\"flex gap-5\">\n            <span class=\"flex size-14 shrink-0 items-center justify-center rounded-2xl bg-[#5e6b4f]/12 text-[#5e6b4f]\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-droplets size-6\">\n                <path d=\"M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z\">\n                </path>\n                <path d=\"M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97\">\n                </path>\n              </svg>\n            </span>\n            <div>\n              <h3 class=\"font-serif text-xl font-medium\">\n                やさしい保湿\n              </h3>\n              <p class=\"mt-2 text-sm leading-relaxed text-[#5e6b4f]\">\n                肌のうるおいバリアを守る植物オイルブレンド。敏感肌の方にも穏やかに寄り添います。\n              </p>\n            </div>\n          </div>\n          <div class=\"flex gap-5\">\n            <span class=\"flex size-14 shrink-0 items-center justify-center rounded-2xl bg-[#5e6b4f]/12 text-[#5e6b4f]\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-shield-check size-6\">\n                <path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\n                </path>\n                <path d=\"m9 12 2 2 4-4\">\n                </path>\n              </svg>\n            </span>\n            <div>\n              <h3 class=\"font-serif text-xl font-medium\">\n                確かな安全性\n              </h3>\n              <p class=\"mt-2 text-sm leading-relaxed text-[#5e6b4f]\">\n                全成分を開示し、第三者機関でパッチテスト済み。安心して毎日使える処方です。\n              </p>\n            </div>\n          </div>\n          <div class=\"flex gap-5\">\n            <span class=\"flex size-14 shrink-0 items-center justify-center rounded-2xl bg-[#5e6b4f]/12 text-[#5e6b4f]\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-recycle size-6\">\n                <path d=\"M7 19H4.815a1.83 1.83 0 0 1-1.57-.881 1.785 1.785 0 0 1-.004-1.784L7.196 9.5\">\n                </path>\n                <path d=\"M11 19h8.203a1.83 1.83 0 0 0 1.556-.89 1.784 1.784 0 0 0 0-1.775l-1.226-2.12\">\n                </path>\n                <path d=\"m14 16-3 3 3 3\">\n                </path>\n                <path d=\"M8.293 13.596 7.196 9.5 3.1 10.598\">\n                </path>\n                <path d=\"m9.344 5.811 1.093-1.892A1.83 1.83 0 0 1 11.985 3a1.784 1.784 0 0 1 1.546.888l3.943 6.843\">\n                </path>\n                <path d=\"m13.378 9.633 4.096 1.098 1.097-4.096\">\n                </path>\n              </svg>\n            </span>\n            <div>\n              <h3 class=\"font-serif text-xl font-medium\">\n                地球への配慮\n              </h3>\n              <p class=\"mt-2 text-sm leading-relaxed text-[#5e6b4f]\">\n                容器は100%リサイクル素材。詰め替えプログラムで廃棄物を最小限に抑えます。\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"relative w-full overflow-hidden bg-[#f3f1e7] px-6 py-20 text-[#3f4a35]\">\n      <svg viewBox=\"0 0 400 120\" fill=\"none\" class=\"pointer-events-none absolute left-0 top-10 h-28 w-full opacity-60\" aria-hidden=\"true\">\n        <path d=\"M0 60 C80 60 120 40 200 40 C280 40 320 80 400 80\" stroke=\"#86a06d\" stroke-width=\"1.5\" stroke-opacity=\"0.5\">\n        </path>\n        <g stroke=\"#86a06d\" stroke-width=\"1.2\" stroke-opacity=\"0.5\">\n          <path d=\"M60 48 l-10 -14\">\n          </path>\n          <path d=\"M60 48 l10 -14\">\n          </path>\n        </g>\n        <g stroke=\"#86a06d\" stroke-width=\"1.2\" stroke-opacity=\"0.5\">\n          <path d=\"M140 46 l-10 -14\">\n          </path>\n          <path d=\"M140 46 l10 -14\">\n          </path>\n        </g>\n        <g stroke=\"#86a06d\" stroke-width=\"1.2\" stroke-opacity=\"0.5\">\n          <path d=\"M220 44 l-10 -14\">\n          </path>\n          <path d=\"M220 44 l10 -14\">\n          </path>\n        </g>\n        <g stroke=\"#86a06d\" stroke-width=\"1.2\" stroke-opacity=\"0.5\">\n          <path d=\"M300 42 l-10 -14\">\n          </path>\n          <path d=\"M300 42 l10 -14\">\n          </path>\n        </g>\n      </svg>\n      <div class=\"relative mx-auto max-w-5xl\">\n        <div class=\"mx-auto max-w-xl text-center\">\n          <h2 class=\"font-serif text-4xl font-medium tracking-tight\">\n            植物の知恵を、毎日のケアに\n          </h2>\n          <p class=\"mt-3 text-sm leading-relaxed text-[#5e6b4f]\">\n            自然と科学の調和から生まれる、わたしたちのこだわり。\n          </p>\n        </div>\n        <div class=\"mt-14 grid gap-x-10 gap-y-12 sm:grid-cols-2\">\n          <div class=\"flex gap-5\">\n            <span class=\"flex size-14 shrink-0 items-center justify-center rounded-2xl bg-[#5e6b4f]/12 text-[#5e6b4f]\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sprout size-6\">\n                <path d=\"M7 20h10\">\n                </path>\n                <path d=\"M10 20c5.5-2.5.8-6.4 3-10\">\n                </path>\n                <path d=\"M9.5 9.4c1.1.8 1.8 2.2 2.3 3.7-2 .4-3.5.4-4.8-.3-1.2-.6-2.3-1.9-3-4.2 2.8-.5 4.4 0 5.5.8z\">\n                </path>\n                <path d=\"M14.1 6a7 7 0 0 0-1.1 4c1.9-.1 3.3-.6 4.3-1.4 1-1 1.6-2.3 1.7-4.6-2.7.1-4 1-4.9 2z\">\n                </path>\n              </svg>\n            </span>\n            <div>\n              <h3 class=\"font-serif text-xl font-medium\">\n                畑から処方へ\n              </h3>\n              <p class=\"mt-2 text-sm leading-relaxed text-[#5e6b4f]\">\n                契約農家で育てた植物を、収穫から72時間以内に抽出。鮮度の高い有効成分を届けます。\n              </p>\n            </div>\n          </div>\n          <div class=\"flex gap-5\">\n            <span class=\"flex size-14 shrink-0 items-center justify-center rounded-2xl bg-[#5e6b4f]/12 text-[#5e6b4f]\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-droplets size-6\">\n                <path d=\"M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z\">\n                </path>\n                <path d=\"M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97\">\n                </path>\n              </svg>\n            </span>\n            <div>\n              <h3 class=\"font-serif text-xl font-medium\">\n                やさしい保湿\n              </h3>\n              <p class=\"mt-2 text-sm leading-relaxed text-[#5e6b4f]\">\n                肌のうるおいバリアを守る植物オイルブレンド。敏感肌の方にも穏やかに寄り添います。\n              </p>\n            </div>\n          </div>\n          <div class=\"flex gap-5\">\n            <span class=\"flex size-14 shrink-0 items-center justify-center rounded-2xl bg-[#5e6b4f]/12 text-[#5e6b4f]\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-shield-check size-6\">\n                <path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\n                </path>\n                <path d=\"m9 12 2 2 4-4\">\n                </path>\n              </svg>\n            </span>\n            <div>\n              <h3 class=\"font-serif text-xl font-medium\">\n                確かな安全性\n              </h3>\n              <p class=\"mt-2 text-sm leading-relaxed text-[#5e6b4f]\">\n                全成分を開示し、第三者機関でパッチテスト済み。安心して毎日使える処方です。\n              </p>\n            </div>\n          </div>\n          <div class=\"flex gap-5\">\n            <span class=\"flex size-14 shrink-0 items-center justify-center rounded-2xl bg-[#5e6b4f]/12 text-[#5e6b4f]\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-recycle size-6\">\n                <path d=\"M7 19H4.815a1.83 1.83 0 0 1-1.57-.881 1.785 1.785 0 0 1-.004-1.784L7.196 9.5\">\n                </path>\n                <path d=\"M11 19h8.203a1.83 1.83 0 0 0 1.556-.89 1.784 1.784 0 0 0 0-1.775l-1.226-2.12\">\n                </path>\n                <path d=\"m14 16-3 3 3 3\">\n                </path>\n                <path d=\"M8.293 13.596 7.196 9.5 3.1 10.598\">\n                </path>\n                <path d=\"m9.344 5.811 1.093-1.892A1.83 1.83 0 0 1 11.985 3a1.784 1.784 0 0 1 1.546.888l3.943 6.843\">\n                </path>\n                <path d=\"m13.378 9.633 4.096 1.098 1.097-4.096\">\n                </path>\n              </svg>\n            </span>\n            <div>\n              <h3 class=\"font-serif text-xl font-medium\">\n                地球への配慮\n              </h3>\n              <p class=\"mt-2 text-sm leading-relaxed text-[#5e6b4f]\">\n                容器は100%リサイクル素材。詰め替えプログラムで廃棄物を最小限に抑えます。\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "botanical-botanical-footer",
@@ -262,7 +262,7 @@
       ],
       "standalone": true,
       "source": "import { Instagram, Leaf, Send, Twitter, Youtube } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"ボタニカル・フッター\",\n  category: \"ボタニカル\",\n  description: \"枝のディバイダーを添えたナチュラルなフッター。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"botanical\", \"organic\", \"wellness\"],\n};\n\nfunction BranchDivider() {\n  return (\n    <svg\n      viewBox=\"0 0 600 24\"\n      className=\"h-6 w-full text-[#86a06d]\"\n      aria-hidden\n      preserveAspectRatio=\"none\"\n    >\n      <path d=\"M0 12 H280\" stroke=\"currentColor\" strokeWidth=\"1\" opacity=\"0.4\" />\n      <path d=\"M320 12 H600\" stroke=\"currentColor\" strokeWidth=\"1\" opacity=\"0.4\" />\n      <g fill=\"currentColor\">\n        <path d=\"M300 12 C300 8 300 5 300 2\" stroke=\"currentColor\" strokeWidth=\"1.2\" />\n        <path d=\"M300 8 C294 5 290 6 289 8 C294 10 298 9 300 8Z\" />\n        <path d=\"M300 6 C306 3 310 4 311 6 C306 8 302 7 300 6Z\" />\n      </g>\n    </svg>\n  );\n}\n\nconst columns = [\n  {\n    id: \"shop\",\n    titleJa: \"ショップ\",\n    titleEn: \"Shop\",\n    links: [\n      { ja: \"スキンケア\", en: \"Skincare\" },\n      { ja: \"ヘアケア\", en: \"Haircare\" },\n      { ja: \"アロマ\", en: \"Aromatherapy\" },\n      { ja: \"ギフト\", en: \"Gifts\" },\n    ],\n  },\n  {\n    id: \"brand\",\n    titleJa: \"ブランド\",\n    titleEn: \"Brand\",\n    links: [\n      { ja: \"私たちの物語\", en: \"Our story\" },\n      { ja: \"成分へのこだわり\", en: \"Our ingredients\" },\n      { ja: \"サステナビリティ\", en: \"Sustainability\" },\n    ],\n  },\n  {\n    id: \"support\",\n    titleJa: \"サポート\",\n    titleEn: \"Support\",\n    links: [\n      { ja: \"お問い合わせ\", en: \"Contact\" },\n      { ja: \"配送と返品\", en: \"Shipping & returns\" },\n      { ja: \"よくある質問\", en: \"FAQ\" },\n    ],\n  },\n];\n\nexport default function BotanicalFooter() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <footer className=\"w-full bg-[#f3f1e7] px-6 pt-12 text-[#3f4a35]\">\n      <div className=\"mx-auto max-w-6xl\">\n        <BranchDivider />\n\n        <div className=\"mt-12 grid gap-10 md:grid-cols-[1.4fr_1fr_1fr_1fr]\">\n          <div>\n            <div className=\"flex items-center gap-2\">\n              <Leaf className=\"size-6 text-[#5e6b4f]\" />\n              <span className=\"font-serif text-xl font-medium tracking-wide\">\n                Verdé\n              </span>\n            </div>\n            <p className=\"mt-4 max-w-xs text-sm leading-relaxed text-[#5e6b4f]\">\n              {en\n                ? \"Balance skin and spirit with the power of plants — wellness in tune with nature, for your every day.\"\n                : \"植物の力で、肌と心を整える。自然と共にあるウェルネスを、あなたの毎日へ。\"}\n            </p>\n            <div className=\"mt-5 flex gap-2\">\n              {[Instagram, Twitter, Youtube].map((Icon, i) => (\n                <a\n                  key={i}\n                  href=\"#\"\n                  className=\"flex size-9 items-center justify-center rounded-full border border-[#5e6b4f]/25 text-[#5e6b4f] transition-colors hover:bg-[#5e6b4f] hover:text-[#f3f1e7]\"\n                  aria-label={en ? \"Social link\" : \"ソーシャルリンク\"}\n                >\n                  <Icon className=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          </div>\n\n          {columns.map((col) => (\n            <div key={col.id}>\n              <h4 className=\"font-serif text-sm font-medium tracking-wide\">\n                {en ? col.titleEn : col.titleJa}\n              </h4>\n              <ul className=\"mt-4 space-y-2.5\">\n                {col.links.map((l) => (\n                  <li key={l.en}>\n                    <a\n                      href=\"#\"\n                      className=\"text-sm text-[#5e6b4f] transition-colors hover:text-[#3f4a35]\"\n                    >\n                      {en ? l.en : l.ja}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n\n        <div className=\"mt-10 flex flex-col items-center justify-between gap-4 border-t border-[#5e6b4f]/15 py-6 text-xs text-[#5e6b4f]/70 sm:flex-row\">\n          <p>© 2026 Verdé Botanicals. All rights reserved.</p>\n          <a\n            href=\"#\"\n            className=\"inline-flex items-center gap-1.5 transition-colors hover:text-[#3f4a35]\"\n          >\n            <Send className=\"size-3.5\" />{\" \"}\n            {en ? \"Subscribe to the journal\" : \"ジャーナルを購読する\"}\n          </a>\n        </div>\n      </div>\n    </footer>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <footer class=\"w-full bg-[#f3f1e7] px-6 pt-12 text-[#3f4a35]\">\n      <div class=\"mx-auto max-w-6xl\">\n        <svg viewBox=\"0 0 600 24\" class=\"h-6 w-full text-[#86a06d]\" aria-hidden=\"true\" preserveAspectRatio=\"none\">\n          <path d=\"M0 12 H280\" stroke=\"currentColor\" stroke-width=\"1\" opacity=\"0.4\">\n          </path>\n          <path d=\"M320 12 H600\" stroke=\"currentColor\" stroke-width=\"1\" opacity=\"0.4\">\n          </path>\n          <g fill=\"currentColor\">\n            <path d=\"M300 12 C300 8 300 5 300 2\" stroke=\"currentColor\" stroke-width=\"1.2\">\n            </path>\n            <path d=\"M300 8 C294 5 290 6 289 8 C294 10 298 9 300 8Z\">\n            </path>\n            <path d=\"M300 6 C306 3 310 4 311 6 C306 8 302 7 300 6Z\">\n            </path>\n          </g>\n        </svg>\n        <div class=\"mt-12 grid gap-10 md:grid-cols-[1.4fr_1fr_1fr_1fr]\">\n          <div>\n            <div class=\"flex items-center gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-leaf size-6 text-[#5e6b4f]\">\n                <path d=\"M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z\">\n                </path>\n                <path d=\"M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12\">\n                </path>\n              </svg>\n              <span class=\"font-serif text-xl font-medium tracking-wide\">\n                Verdé\n              </span>\n            </div>\n            <p class=\"mt-4 max-w-xs text-sm leading-relaxed text-[#5e6b4f]\">\n              植物の力で、肌と心を整える。自然と共にあるウェルネスを、あなたの毎日へ。\n            </p>\n            <div class=\"mt-5 flex gap-2\">\n              <a href=\"#\" class=\"flex size-9 items-center justify-center rounded-full border border-[#5e6b4f]/25 text-[#5e6b4f] transition-colors hover:bg-[#5e6b4f] hover:text-[#f3f1e7]\" aria-label=\"ソーシャルリンク\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-instagram size-4\">\n                  <rect width=\"20\" height=\"20\" x=\"2\" y=\"2\" rx=\"5\" ry=\"5\">\n                  </rect>\n                  <path d=\"M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z\">\n                  </path>\n                  <line x1=\"17.5\" x2=\"17.51\" y1=\"6.5\" y2=\"6.5\">\n                  </line>\n                </svg>\n              </a>\n              <a href=\"#\" class=\"flex size-9 items-center justify-center rounded-full border border-[#5e6b4f]/25 text-[#5e6b4f] transition-colors hover:bg-[#5e6b4f] hover:text-[#f3f1e7]\" aria-label=\"ソーシャルリンク\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-twitter size-4\">\n                  <path d=\"M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z\">\n                  </path>\n                </svg>\n              </a>\n              <a href=\"#\" class=\"flex size-9 items-center justify-center rounded-full border border-[#5e6b4f]/25 text-[#5e6b4f] transition-colors hover:bg-[#5e6b4f] hover:text-[#f3f1e7]\" aria-label=\"ソーシャルリンク\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-youtube size-4\">\n                  <path d=\"M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17\">\n                  </path>\n                  <path d=\"m10 15 5-3-5-3z\">\n                  </path>\n                </svg>\n              </a>\n            </div>\n          </div>\n          <div>\n            <h4 class=\"font-serif text-sm font-medium tracking-wide\">\n              ショップ\n            </h4>\n            <ul class=\"mt-4 space-y-2.5\">\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#5e6b4f] transition-colors hover:text-[#3f4a35]\">\n                  スキンケア\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#5e6b4f] transition-colors hover:text-[#3f4a35]\">\n                  ヘアケア\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#5e6b4f] transition-colors hover:text-[#3f4a35]\">\n                  アロマ\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#5e6b4f] transition-colors hover:text-[#3f4a35]\">\n                  ギフト\n                </a>\n              </li>\n            </ul>\n          </div>\n          <div>\n            <h4 class=\"font-serif text-sm font-medium tracking-wide\">\n              ブランド\n            </h4>\n            <ul class=\"mt-4 space-y-2.5\">\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#5e6b4f] transition-colors hover:text-[#3f4a35]\">\n                  私たちの物語\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#5e6b4f] transition-colors hover:text-[#3f4a35]\">\n                  成分へのこだわり\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#5e6b4f] transition-colors hover:text-[#3f4a35]\">\n                  サステナビリティ\n                </a>\n              </li>\n            </ul>\n          </div>\n          <div>\n            <h4 class=\"font-serif text-sm font-medium tracking-wide\">\n              サポート\n            </h4>\n            <ul class=\"mt-4 space-y-2.5\">\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#5e6b4f] transition-colors hover:text-[#3f4a35]\">\n                  お問い合わせ\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#5e6b4f] transition-colors hover:text-[#3f4a35]\">\n                  配送と返品\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#5e6b4f] transition-colors hover:text-[#3f4a35]\">\n                  よくある質問\n                </a>\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"mt-10 flex flex-col items-center justify-between gap-4 border-t border-[#5e6b4f]/15 py-6 text-xs text-[#5e6b4f]/70 sm:flex-row\">\n          <p>\n            © 2026 Verdé Botanicals. All rights reserved.\n          </p>\n          <a href=\"#\" class=\"inline-flex items-center gap-1.5 transition-colors hover:text-[#3f4a35]\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-send size-3.5\">\n              <path d=\"M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z\">\n              </path>\n              <path d=\"m21.854 2.147-10.94 10.939\">\n              </path>\n            </svg>\n            ジャーナルを購読する\n          </a>\n        </div>\n      </div>\n    </footer>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <footer class=\"w-full bg-[#f3f1e7] px-6 pt-12 text-[#3f4a35]\">\n      <div class=\"mx-auto max-w-6xl\">\n        <svg viewBox=\"0 0 600 24\" class=\"h-6 w-full text-[#86a06d]\" aria-hidden=\"true\" preserveAspectRatio=\"none\">\n          <path d=\"M0 12 H280\" stroke=\"currentColor\" stroke-width=\"1\" opacity=\"0.4\">\n          </path>\n          <path d=\"M320 12 H600\" stroke=\"currentColor\" stroke-width=\"1\" opacity=\"0.4\">\n          </path>\n          <g fill=\"currentColor\">\n            <path d=\"M300 12 C300 8 300 5 300 2\" stroke=\"currentColor\" stroke-width=\"1.2\">\n            </path>\n            <path d=\"M300 8 C294 5 290 6 289 8 C294 10 298 9 300 8Z\">\n            </path>\n            <path d=\"M300 6 C306 3 310 4 311 6 C306 8 302 7 300 6Z\">\n            </path>\n          </g>\n        </svg>\n        <div class=\"mt-12 grid gap-10 md:grid-cols-[1.4fr_1fr_1fr_1fr]\">\n          <div>\n            <div class=\"flex items-center gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-leaf size-6 text-[#5e6b4f]\">\n                <path d=\"M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z\">\n                </path>\n                <path d=\"M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12\">\n                </path>\n              </svg>\n              <span class=\"font-serif text-xl font-medium tracking-wide\">\n                Verdé\n              </span>\n            </div>\n            <p class=\"mt-4 max-w-xs text-sm leading-relaxed text-[#5e6b4f]\">\n              植物の力で、肌と心を整える。自然と共にあるウェルネスを、あなたの毎日へ。\n            </p>\n            <div class=\"mt-5 flex gap-2\">\n              <a href=\"#\" class=\"flex size-9 items-center justify-center rounded-full border border-[#5e6b4f]/25 text-[#5e6b4f] transition-colors hover:bg-[#5e6b4f] hover:text-[#f3f1e7]\" aria-label=\"ソーシャルリンク\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-instagram size-4\">\n                  <rect width=\"20\" height=\"20\" x=\"2\" y=\"2\" rx=\"5\" ry=\"5\">\n                  </rect>\n                  <path d=\"M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z\">\n                  </path>\n                  <line x1=\"17.5\" x2=\"17.51\" y1=\"6.5\" y2=\"6.5\">\n                  </line>\n                </svg>\n              </a>\n              <a href=\"#\" class=\"flex size-9 items-center justify-center rounded-full border border-[#5e6b4f]/25 text-[#5e6b4f] transition-colors hover:bg-[#5e6b4f] hover:text-[#f3f1e7]\" aria-label=\"ソーシャルリンク\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-twitter size-4\">\n                  <path d=\"M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z\">\n                  </path>\n                </svg>\n              </a>\n              <a href=\"#\" class=\"flex size-9 items-center justify-center rounded-full border border-[#5e6b4f]/25 text-[#5e6b4f] transition-colors hover:bg-[#5e6b4f] hover:text-[#f3f1e7]\" aria-label=\"ソーシャルリンク\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-youtube size-4\">\n                  <path d=\"M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17\">\n                  </path>\n                  <path d=\"m10 15 5-3-5-3z\">\n                  </path>\n                </svg>\n              </a>\n            </div>\n          </div>\n          <div>\n            <h4 class=\"font-serif text-sm font-medium tracking-wide\">\n              ショップ\n            </h4>\n            <ul class=\"mt-4 space-y-2.5\">\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#5e6b4f] transition-colors hover:text-[#3f4a35]\">\n                  スキンケア\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#5e6b4f] transition-colors hover:text-[#3f4a35]\">\n                  ヘアケア\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#5e6b4f] transition-colors hover:text-[#3f4a35]\">\n                  アロマ\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#5e6b4f] transition-colors hover:text-[#3f4a35]\">\n                  ギフト\n                </a>\n              </li>\n            </ul>\n          </div>\n          <div>\n            <h4 class=\"font-serif text-sm font-medium tracking-wide\">\n              ブランド\n            </h4>\n            <ul class=\"mt-4 space-y-2.5\">\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#5e6b4f] transition-colors hover:text-[#3f4a35]\">\n                  私たちの物語\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#5e6b4f] transition-colors hover:text-[#3f4a35]\">\n                  成分へのこだわり\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#5e6b4f] transition-colors hover:text-[#3f4a35]\">\n                  サステナビリティ\n                </a>\n              </li>\n            </ul>\n          </div>\n          <div>\n            <h4 class=\"font-serif text-sm font-medium tracking-wide\">\n              サポート\n            </h4>\n            <ul class=\"mt-4 space-y-2.5\">\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#5e6b4f] transition-colors hover:text-[#3f4a35]\">\n                  お問い合わせ\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#5e6b4f] transition-colors hover:text-[#3f4a35]\">\n                  配送と返品\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#5e6b4f] transition-colors hover:text-[#3f4a35]\">\n                  よくある質問\n                </a>\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"mt-10 flex flex-col items-center justify-between gap-4 border-t border-[#5e6b4f]/15 py-6 text-xs text-[#5e6b4f]/70 sm:flex-row\">\n          <p>\n            © 2026 Verdé Botanicals. All rights reserved.\n          </p>\n          <a href=\"#\" class=\"inline-flex items-center gap-1.5 transition-colors hover:text-[#3f4a35]\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-send size-3.5\">\n              <path d=\"M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z\">\n              </path>\n              <path d=\"m21.854 2.147-10.94 10.939\">\n              </path>\n            </svg>\n            ジャーナルを購読する\n          </a>\n        </div>\n      </div>\n    </footer>\n  </body>\n</html>"
     },
     {
       "id": "botanical-botanical-hero",
@@ -276,7 +276,7 @@
       ],
       "standalone": true,
       "source": "import { ArrowRight, Leaf, Sparkles } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"ボタニカル・ヒーロー\",\n  category: \"ボタニカル\",\n  description: \"葉のSVG装飾と柔らかなCTAを備えたオーガニックなヒーロー。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"botanical\", \"organic\", \"wellness\"],\n};\n\nfunction LeafSpray({ className }: { className?: string }) {\n  return (\n    <svg viewBox=\"0 0 200 260\" fill=\"none\" className={className} aria-hidden>\n      <path\n        d=\"M100 250 C100 180 100 90 100 20\"\n        stroke=\"#5e6b4f\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n      />\n      {[40, 80, 120, 160, 200].map((y, i) => {\n        const dir = i % 2 === 0 ? 1 : -1;\n        return (\n          <g key={y}>\n            <path\n              d={`M100 ${y} C${100 + dir * 30} ${y - 20} ${100 + dir * 55} ${\n                y - 10\n              } ${100 + dir * 60} ${y + 14} C${100 + dir * 35} ${y + 18} ${\n                100 + dir * 18\n              } ${y + 10} 100 ${y}Z`}\n              fill=\"#86a06d\"\n              fillOpacity={0.55 + i * 0.06}\n            />\n            <path\n              d={`M100 ${y} C${100 + dir * 26} ${y - 8} ${100 + dir * 44} ${y} ${\n                100 + dir * 60\n              } ${y + 14}`}\n              stroke=\"#3f4a35\"\n              strokeWidth=\"1\"\n              strokeOpacity=\"0.5\"\n            />\n          </g>\n        );\n      })}\n    </svg>\n  );\n}\n\nexport default function BotanicalHero() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"relative w-full overflow-hidden bg-[#f3f1e7] text-[#3f4a35]\">\n      <div className=\"pointer-events-none absolute -left-10 top-0 hidden opacity-70 md:block\">\n        <LeafSpray className=\"h-[420px] w-[280px] -rotate-12\" />\n      </div>\n      <div className=\"pointer-events-none absolute -right-12 bottom-0 hidden opacity-60 lg:block\">\n        <LeafSpray className=\"h-[460px] w-[300px] rotate-[200deg]\" />\n      </div>\n\n      <div className=\"relative mx-auto flex max-w-3xl flex-col items-center px-6 py-24 text-center sm:py-32\">\n        <span className=\"mb-6 inline-flex items-center gap-2 rounded-full border border-[#5e6b4f]/30 bg-white/50 px-4 py-1.5 text-xs font-medium tracking-[0.2em] text-[#5e6b4f]\">\n          <Leaf className=\"size-3.5\" />\n          NATURE-DERIVED CARE\n        </span>\n        <h1 className=\"font-serif text-5xl font-medium leading-[1.05] tracking-tight text-[#3f4a35] sm:text-6xl\">\n          {en ? (\n            <>\n              Botanical gentleness,\n              <br />\n              for skin and spirit.\n            </>\n          ) : (\n            <>\n              肌と心に、\n              <br />\n              植物のやさしさを。\n            </>\n          )}\n        </h1>\n        <p className=\"mt-6 max-w-lg text-pretty text-base leading-relaxed text-[#5e6b4f]\">\n          {en\n            ? \"A 100% nature-derived formula born from the field. With soft scents and the power of plants, turn daily skincare into a quiet wellness ritual.\"\n            : \"畑から生まれた100%自然由来の処方。穏やかな香りと植物の力で、毎日のスキンケアを静かなウェルネスの時間へ。\"}\n        </p>\n        <div className=\"mt-9 flex flex-col items-center gap-3 sm:flex-row\">\n          <Button className=\"h-12 rounded-full bg-[#5e6b4f] px-7 text-sm tracking-wide text-[#f3f1e7] hover:bg-[#4b563f]\">\n            {en ? \"View the collection\" : \"コレクションを見る\"}\n            <ArrowRight className=\"size-4\" />\n          </Button>\n          <Button\n            variant=\"ghost\"\n            className=\"h-12 rounded-full px-6 text-sm tracking-wide text-[#5e6b4f] hover:bg-[#5e6b4f]/10\"\n          >\n            <Sparkles className=\"size-4\" />\n            {en ? \"Our philosophy\" : \"私たちの哲学\"}\n          </Button>\n        </div>\n        <p className=\"mt-10 text-xs tracking-wide text-[#5e6b4f]/70\">\n          {en\n            ? \"Vegan certified · Cruelty-free · 100% recycled packaging\"\n            : \"ヴィーガン認証 · 動物実験フリー · 100% リサイクル容器\"}\n        </p>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"relative w-full overflow-hidden bg-[#f3f1e7] text-[#3f4a35]\">\n      <div class=\"pointer-events-none absolute -left-10 top-0 hidden opacity-70 md:block\">\n        <svg viewBox=\"0 0 200 260\" fill=\"none\" class=\"h-[420px] w-[280px] -rotate-12\" aria-hidden=\"true\">\n          <path d=\"M100 250 C100 180 100 90 100 20\" stroke=\"#5e6b4f\" stroke-width=\"2\" stroke-linecap=\"round\">\n          </path>\n          <g>\n            <path d=\"M100 40 C130 20 155 30 160 54 C135 58 118 50 100 40Z\" fill=\"#86a06d\" fill-opacity=\"0.55\">\n            </path>\n            <path d=\"M100 40 C126 32 144 40 160 54\" stroke=\"#3f4a35\" stroke-width=\"1\" stroke-opacity=\"0.5\">\n            </path>\n          </g>\n          <g>\n            <path d=\"M100 80 C70 60 45 70 40 94 C65 98 82 90 100 80Z\" fill=\"#86a06d\" fill-opacity=\"0.6100000000000001\">\n            </path>\n            <path d=\"M100 80 C74 72 56 80 40 94\" stroke=\"#3f4a35\" stroke-width=\"1\" stroke-opacity=\"0.5\">\n            </path>\n          </g>\n          <g>\n            <path d=\"M100 120 C130 100 155 110 160 134 C135 138 118 130 100 120Z\" fill=\"#86a06d\" fill-opacity=\"0.67\">\n            </path>\n            <path d=\"M100 120 C126 112 144 120 160 134\" stroke=\"#3f4a35\" stroke-width=\"1\" stroke-opacity=\"0.5\">\n            </path>\n          </g>\n          <g>\n            <path d=\"M100 160 C70 140 45 150 40 174 C65 178 82 170 100 160Z\" fill=\"#86a06d\" fill-opacity=\"0.73\">\n            </path>\n            <path d=\"M100 160 C74 152 56 160 40 174\" stroke=\"#3f4a35\" stroke-width=\"1\" stroke-opacity=\"0.5\">\n            </path>\n          </g>\n          <g>\n            <path d=\"M100 200 C130 180 155 190 160 214 C135 218 118 210 100 200Z\" fill=\"#86a06d\" fill-opacity=\"0.79\">\n            </path>\n            <path d=\"M100 200 C126 192 144 200 160 214\" stroke=\"#3f4a35\" stroke-width=\"1\" stroke-opacity=\"0.5\">\n            </path>\n          </g>\n        </svg>\n      </div>\n      <div class=\"pointer-events-none absolute -right-12 bottom-0 hidden opacity-60 lg:block\">\n        <svg viewBox=\"0 0 200 260\" fill=\"none\" class=\"h-[460px] w-[300px] rotate-[200deg]\" aria-hidden=\"true\">\n          <path d=\"M100 250 C100 180 100 90 100 20\" stroke=\"#5e6b4f\" stroke-width=\"2\" stroke-linecap=\"round\">\n          </path>\n          <g>\n            <path d=\"M100 40 C130 20 155 30 160 54 C135 58 118 50 100 40Z\" fill=\"#86a06d\" fill-opacity=\"0.55\">\n            </path>\n            <path d=\"M100 40 C126 32 144 40 160 54\" stroke=\"#3f4a35\" stroke-width=\"1\" stroke-opacity=\"0.5\">\n            </path>\n          </g>\n          <g>\n            <path d=\"M100 80 C70 60 45 70 40 94 C65 98 82 90 100 80Z\" fill=\"#86a06d\" fill-opacity=\"0.6100000000000001\">\n            </path>\n            <path d=\"M100 80 C74 72 56 80 40 94\" stroke=\"#3f4a35\" stroke-width=\"1\" stroke-opacity=\"0.5\">\n            </path>\n          </g>\n          <g>\n            <path d=\"M100 120 C130 100 155 110 160 134 C135 138 118 130 100 120Z\" fill=\"#86a06d\" fill-opacity=\"0.67\">\n            </path>\n            <path d=\"M100 120 C126 112 144 120 160 134\" stroke=\"#3f4a35\" stroke-width=\"1\" stroke-opacity=\"0.5\">\n            </path>\n          </g>\n          <g>\n            <path d=\"M100 160 C70 140 45 150 40 174 C65 178 82 170 100 160Z\" fill=\"#86a06d\" fill-opacity=\"0.73\">\n            </path>\n            <path d=\"M100 160 C74 152 56 160 40 174\" stroke=\"#3f4a35\" stroke-width=\"1\" stroke-opacity=\"0.5\">\n            </path>\n          </g>\n          <g>\n            <path d=\"M100 200 C130 180 155 190 160 214 C135 218 118 210 100 200Z\" fill=\"#86a06d\" fill-opacity=\"0.79\">\n            </path>\n            <path d=\"M100 200 C126 192 144 200 160 214\" stroke=\"#3f4a35\" stroke-width=\"1\" stroke-opacity=\"0.5\">\n            </path>\n          </g>\n        </svg>\n      </div>\n      <div class=\"relative mx-auto flex max-w-3xl flex-col items-center px-6 py-24 text-center sm:py-32\">\n        <span class=\"mb-6 inline-flex items-center gap-2 rounded-full border border-[#5e6b4f]/30 bg-white/50 px-4 py-1.5 text-xs font-medium tracking-[0.2em] text-[#5e6b4f]\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-leaf size-3.5\">\n            <path d=\"M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z\">\n            </path>\n            <path d=\"M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12\">\n            </path>\n          </svg>\n          NATURE-DERIVED CARE\n        </span>\n        <h1 class=\"font-serif text-5xl font-medium leading-[1.05] tracking-tight text-[#3f4a35] sm:text-6xl\">\n          肌と心に、\n          <br/>\n          植物のやさしさを。\n        </h1>\n        <p class=\"mt-6 max-w-lg text-pretty text-base leading-relaxed text-[#5e6b4f]\">\n          畑から生まれた100%自然由来の処方。穏やかな香りと植物の力で、毎日のスキンケアを静かなウェルネスの時間へ。\n        </p>\n        <div class=\"mt-9 flex flex-col items-center gap-3 sm:flex-row\">\n          <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 py-2 h-12 rounded-full bg-[#5e6b4f] px-7 text-sm tracking-wide text-[#f3f1e7] hover:bg-[#4b563f]\">\n            コレクションを見る\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right size-4\">\n              <path d=\"M5 12h14\">\n              </path>\n              <path d=\"m12 5 7 7-7 7\">\n              </path>\n            </svg>\n          </button>\n          <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 hover:text-accent-foreground py-2 h-12 rounded-full px-6 text-sm tracking-wide text-[#5e6b4f] hover:bg-[#5e6b4f]/10\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-4\">\n              <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n              </path>\n              <path d=\"M20 3v4\">\n              </path>\n              <path d=\"M22 5h-4\">\n              </path>\n              <path d=\"M4 17v2\">\n              </path>\n              <path d=\"M5 18H3\">\n              </path>\n            </svg>\n            私たちの哲学\n          </button>\n        </div>\n        <p class=\"mt-10 text-xs tracking-wide text-[#5e6b4f]/70\">\n          ヴィーガン認証 · 動物実験フリー · 100% リサイクル容器\n        </p>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"relative w-full overflow-hidden bg-[#f3f1e7] text-[#3f4a35]\">\n      <div class=\"pointer-events-none absolute -left-10 top-0 hidden opacity-70 md:block\">\n        <svg viewBox=\"0 0 200 260\" fill=\"none\" class=\"h-[420px] w-[280px] -rotate-12\" aria-hidden=\"true\">\n          <path d=\"M100 250 C100 180 100 90 100 20\" stroke=\"#5e6b4f\" stroke-width=\"2\" stroke-linecap=\"round\">\n          </path>\n          <g>\n            <path d=\"M100 40 C130 20 155 30 160 54 C135 58 118 50 100 40Z\" fill=\"#86a06d\" fill-opacity=\"0.55\">\n            </path>\n            <path d=\"M100 40 C126 32 144 40 160 54\" stroke=\"#3f4a35\" stroke-width=\"1\" stroke-opacity=\"0.5\">\n            </path>\n          </g>\n          <g>\n            <path d=\"M100 80 C70 60 45 70 40 94 C65 98 82 90 100 80Z\" fill=\"#86a06d\" fill-opacity=\"0.6100000000000001\">\n            </path>\n            <path d=\"M100 80 C74 72 56 80 40 94\" stroke=\"#3f4a35\" stroke-width=\"1\" stroke-opacity=\"0.5\">\n            </path>\n          </g>\n          <g>\n            <path d=\"M100 120 C130 100 155 110 160 134 C135 138 118 130 100 120Z\" fill=\"#86a06d\" fill-opacity=\"0.67\">\n            </path>\n            <path d=\"M100 120 C126 112 144 120 160 134\" stroke=\"#3f4a35\" stroke-width=\"1\" stroke-opacity=\"0.5\">\n            </path>\n          </g>\n          <g>\n            <path d=\"M100 160 C70 140 45 150 40 174 C65 178 82 170 100 160Z\" fill=\"#86a06d\" fill-opacity=\"0.73\">\n            </path>\n            <path d=\"M100 160 C74 152 56 160 40 174\" stroke=\"#3f4a35\" stroke-width=\"1\" stroke-opacity=\"0.5\">\n            </path>\n          </g>\n          <g>\n            <path d=\"M100 200 C130 180 155 190 160 214 C135 218 118 210 100 200Z\" fill=\"#86a06d\" fill-opacity=\"0.79\">\n            </path>\n            <path d=\"M100 200 C126 192 144 200 160 214\" stroke=\"#3f4a35\" stroke-width=\"1\" stroke-opacity=\"0.5\">\n            </path>\n          </g>\n        </svg>\n      </div>\n      <div class=\"pointer-events-none absolute -right-12 bottom-0 hidden opacity-60 lg:block\">\n        <svg viewBox=\"0 0 200 260\" fill=\"none\" class=\"h-[460px] w-[300px] rotate-[200deg]\" aria-hidden=\"true\">\n          <path d=\"M100 250 C100 180 100 90 100 20\" stroke=\"#5e6b4f\" stroke-width=\"2\" stroke-linecap=\"round\">\n          </path>\n          <g>\n            <path d=\"M100 40 C130 20 155 30 160 54 C135 58 118 50 100 40Z\" fill=\"#86a06d\" fill-opacity=\"0.55\">\n            </path>\n            <path d=\"M100 40 C126 32 144 40 160 54\" stroke=\"#3f4a35\" stroke-width=\"1\" stroke-opacity=\"0.5\">\n            </path>\n          </g>\n          <g>\n            <path d=\"M100 80 C70 60 45 70 40 94 C65 98 82 90 100 80Z\" fill=\"#86a06d\" fill-opacity=\"0.6100000000000001\">\n            </path>\n            <path d=\"M100 80 C74 72 56 80 40 94\" stroke=\"#3f4a35\" stroke-width=\"1\" stroke-opacity=\"0.5\">\n            </path>\n          </g>\n          <g>\n            <path d=\"M100 120 C130 100 155 110 160 134 C135 138 118 130 100 120Z\" fill=\"#86a06d\" fill-opacity=\"0.67\">\n            </path>\n            <path d=\"M100 120 C126 112 144 120 160 134\" stroke=\"#3f4a35\" stroke-width=\"1\" stroke-opacity=\"0.5\">\n            </path>\n          </g>\n          <g>\n            <path d=\"M100 160 C70 140 45 150 40 174 C65 178 82 170 100 160Z\" fill=\"#86a06d\" fill-opacity=\"0.73\">\n            </path>\n            <path d=\"M100 160 C74 152 56 160 40 174\" stroke=\"#3f4a35\" stroke-width=\"1\" stroke-opacity=\"0.5\">\n            </path>\n          </g>\n          <g>\n            <path d=\"M100 200 C130 180 155 190 160 214 C135 218 118 210 100 200Z\" fill=\"#86a06d\" fill-opacity=\"0.79\">\n            </path>\n            <path d=\"M100 200 C126 192 144 200 160 214\" stroke=\"#3f4a35\" stroke-width=\"1\" stroke-opacity=\"0.5\">\n            </path>\n          </g>\n        </svg>\n      </div>\n      <div class=\"relative mx-auto flex max-w-3xl flex-col items-center px-6 py-24 text-center sm:py-32\">\n        <span class=\"mb-6 inline-flex items-center gap-2 rounded-full border border-[#5e6b4f]/30 bg-white/50 px-4 py-1.5 text-xs font-medium tracking-[0.2em] text-[#5e6b4f]\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-leaf size-3.5\">\n            <path d=\"M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z\">\n            </path>\n            <path d=\"M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12\">\n            </path>\n          </svg>\n          NATURE-DERIVED CARE\n        </span>\n        <h1 class=\"font-serif text-5xl font-medium leading-[1.05] tracking-tight text-[#3f4a35] sm:text-6xl\">\n          肌と心に、\n          <br/>\n          植物のやさしさを。\n        </h1>\n        <p class=\"mt-6 max-w-lg text-pretty text-base leading-relaxed text-[#5e6b4f]\">\n          畑から生まれた100%自然由来の処方。穏やかな香りと植物の力で、毎日のスキンケアを静かなウェルネスの時間へ。\n        </p>\n        <div class=\"mt-9 flex flex-col items-center gap-3 sm:flex-row\">\n          <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 py-2 h-12 rounded-full bg-[#5e6b4f] px-7 text-sm tracking-wide text-[#f3f1e7] hover:bg-[#4b563f]\">\n            コレクションを見る\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right size-4\">\n              <path d=\"M5 12h14\">\n              </path>\n              <path d=\"m12 5 7 7-7 7\">\n              </path>\n            </svg>\n          </button>\n          <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 hover:text-accent-foreground py-2 h-12 rounded-full px-6 text-sm tracking-wide text-[#5e6b4f] hover:bg-[#5e6b4f]/10\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-4\">\n              <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n              </path>\n              <path d=\"M20 3v4\">\n              </path>\n              <path d=\"M22 5h-4\">\n              </path>\n              <path d=\"M4 17v2\">\n              </path>\n              <path d=\"M5 18H3\">\n              </path>\n            </svg>\n            私たちの哲学\n          </button>\n        </div>\n        <p class=\"mt-10 text-xs tracking-wide text-[#5e6b4f]/70\">\n          ヴィーガン認証 · 動物実験フリー · 100% リサイクル容器\n        </p>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "botanical-botanical-pricing",
@@ -290,7 +290,7 @@
       ],
       "standalone": true,
       "source": "import { Check, Leaf } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"ボタニカル・プライシング\",\n  category: \"ボタニカル\",\n  description: \"ウェルネス会員プランの料金プラン3種。自然な配色で。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"botanical\", \"organic\", \"wellness\"],\n};\n\ntype Tier = {\n  id: string;\n  nameJa: string;\n  nameEn: string;\n  price: string;\n  periodJa: string;\n  periodEn: string;\n  descJa: string;\n  descEn: string;\n  featuresJa: string[];\n  featuresEn: string[];\n  featured?: boolean;\n};\n\nconst tiers: Tier[] = [\n  {\n    id: \"seed\",\n    nameJa: \"シード\",\n    nameEn: \"Seed\",\n    price: \"¥0\",\n    periodJa: \"/ 月\",\n    periodEn: \"/ mo\",\n    descJa: \"はじめての方に。基本のケアを無料で。\",\n    descEn: \"For newcomers — essential care, free.\",\n    featuresJa: [\"月1回のお手入れガイド\", \"コミュニティ参加\", \"季節のレシピ配信\"],\n    featuresEn: [\"Monthly care guide\", \"Community access\", \"Seasonal recipes\"],\n  },\n  {\n    id: \"bloom\",\n    nameJa: \"ブルーム\",\n    nameEn: \"Bloom\",\n    price: \"¥1,980\",\n    periodJa: \"/ 月\",\n    periodEn: \"/ mo\",\n    descJa: \"毎日のウェルネスを習慣に。\",\n    descEn: \"Make daily wellness a habit.\",\n    featuresJa: [\n      \"シードの全特典\",\n      \"月替わりボタニカルボックス\",\n      \"オンライン瞑想クラス\",\n      \"会員限定15%オフ\",\n    ],\n    featuresEn: [\n      \"Everything in Seed\",\n      \"Monthly botanical box\",\n      \"Online meditation classes\",\n      \"Member-only 15% off\",\n    ],\n    featured: true,\n  },\n  {\n    id: \"forest\",\n    nameJa: \"フォレスト\",\n    nameEn: \"Forest\",\n    price: \"¥4,800\",\n    periodJa: \"/ 月\",\n    periodEn: \"/ mo\",\n    descJa: \"本格的なセルフケアを求める方へ。\",\n    descEn: \"For those seeking serious self-care.\",\n    featuresJa: [\n      \"ブルームの全特典\",\n      \"個別カウンセリング\",\n      \"スパ施術 月1回無料\",\n      \"新商品の先行アクセス\",\n    ],\n    featuresEn: [\n      \"Everything in Bloom\",\n      \"One-on-one consultations\",\n      \"One free spa treatment a month\",\n      \"Early access to new products\",\n    ],\n  },\n];\n\nexport default function BotanicalPricing() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"w-full bg-[#f3f1e7] px-6 py-20 text-[#3f4a35]\">\n      <div className=\"mx-auto max-w-6xl\">\n        <div className=\"mx-auto max-w-xl text-center\">\n          <span className=\"inline-flex items-center gap-2 rounded-full border border-[#5e6b4f]/30 px-3 py-1 text-xs tracking-[0.2em] text-[#5e6b4f]\">\n            <Leaf className=\"size-3.5\" /> MEMBERSHIP\n          </span>\n          <h2 className=\"mt-5 font-serif text-4xl font-medium tracking-tight\">\n            {en ? \"A plan that grows at your pace\" : \"あなたのペースで育つプラン\"}\n          </h2>\n          <p className=\"mt-3 text-sm leading-relaxed text-[#5e6b4f]\">\n            {en\n              ? \"Change or cancel anytime. Wellness that lasts, naturally — like a plant.\"\n              : \"いつでも変更・解約可能。植物のように、無理なく続くウェルネスを。\"}\n          </p>\n        </div>\n\n        <div className=\"mt-14 grid gap-6 md:grid-cols-3\">\n          {tiers.map((t) => (\n            <div\n              key={t.id}\n              className={cn(\n                \"relative flex flex-col rounded-3xl border p-7 transition-shadow\",\n                t.featured\n                  ? \"border-[#5e6b4f] bg-[#5e6b4f] text-[#f3f1e7] shadow-[0_20px_50px_-20px_rgba(63,74,53,0.7)]\"\n                  : \"border-[#5e6b4f]/20 bg-white/50 hover:shadow-md\"\n              )}\n            >\n              {t.featured && (\n                <span className=\"absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-[#b3753f] px-3 py-1 text-[10px] font-semibold tracking-widest text-white\">\n                  {en ? \"Popular\" : \"人気\"}\n                </span>\n              )}\n              <h3\n                className={cn(\n                  \"font-serif text-xl font-medium\",\n                  t.featured ? \"text-[#f3f1e7]\" : \"text-[#3f4a35]\"\n                )}\n              >\n                {en ? t.nameEn : t.nameJa}\n              </h3>\n              <p\n                className={cn(\n                  \"mt-1 text-xs leading-relaxed\",\n                  t.featured ? \"text-[#f3f1e7]/80\" : \"text-[#5e6b4f]\"\n                )}\n              >\n                {en ? t.descEn : t.descJa}\n              </p>\n              <div className=\"mt-5 flex items-end gap-1\">\n                <span className=\"font-serif text-4xl font-medium\">{t.price}</span>\n                <span\n                  className={cn(\n                    \"pb-1 text-sm\",\n                    t.featured ? \"text-[#f3f1e7]/70\" : \"text-[#5e6b4f]/70\"\n                  )}\n                >\n                  {en ? t.periodEn : t.periodJa}\n                </span>\n              </div>\n              <ul className=\"mt-6 flex-1 space-y-3\">\n                {(en ? t.featuresEn : t.featuresJa).map((f) => (\n                  <li key={f} className=\"flex items-start gap-2.5 text-sm\">\n                    <Check\n                      className={cn(\n                        \"mt-0.5 size-4 shrink-0\",\n                        t.featured ? \"text-[#cdd4b6]\" : \"text-[#86a06d]\"\n                      )}\n                    />\n                    <span className={t.featured ? \"text-[#f3f1e7]/90\" : \"\"}>\n                      {f}\n                    </span>\n                  </li>\n                ))}\n              </ul>\n              <Button\n                className={cn(\n                  \"mt-7 h-11 rounded-full text-sm tracking-wide\",\n                  t.featured\n                    ? \"bg-[#f3f1e7] text-[#3f4a35] hover:bg-white\"\n                    : \"bg-[#5e6b4f] text-[#f3f1e7] hover:bg-[#4b563f]\"\n                )}\n              >\n                {en ? \"Choose plan\" : \"プランを選ぶ\"}\n              </Button>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"w-full bg-[#f3f1e7] px-6 py-20 text-[#3f4a35]\">\n      <div class=\"mx-auto max-w-6xl\">\n        <div class=\"mx-auto max-w-xl text-center\">\n          <span class=\"inline-flex items-center gap-2 rounded-full border border-[#5e6b4f]/30 px-3 py-1 text-xs tracking-[0.2em] text-[#5e6b4f]\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-leaf size-3.5\">\n              <path d=\"M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z\">\n              </path>\n              <path d=\"M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12\">\n              </path>\n            </svg>\n            MEMBERSHIP\n          </span>\n          <h2 class=\"mt-5 font-serif text-4xl font-medium tracking-tight\">\n            あなたのペースで育つプラン\n          </h2>\n          <p class=\"mt-3 text-sm leading-relaxed text-[#5e6b4f]\">\n            いつでも変更・解約可能。植物のように、無理なく続くウェルネスを。\n          </p>\n        </div>\n        <div class=\"mt-14 grid gap-6 md:grid-cols-3\">\n          <div class=\"relative flex flex-col rounded-3xl border p-7 transition-shadow border-[#5e6b4f]/20 bg-white/50 hover:shadow-md\">\n            <h3 class=\"font-serif text-xl font-medium text-[#3f4a35]\">\n              シード\n            </h3>\n            <p class=\"mt-1 text-xs leading-relaxed text-[#5e6b4f]\">\n              はじめての方に。基本のケアを無料で。\n            </p>\n            <div class=\"mt-5 flex items-end gap-1\">\n              <span class=\"font-serif text-4xl font-medium\">\n                ¥0\n              </span>\n              <span class=\"pb-1 text-sm text-[#5e6b4f]/70\">\n                / 月\n              </span>\n            </div>\n            <ul class=\"mt-6 flex-1 space-y-3\">\n              <li class=\"flex items-start gap-2.5 text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-[#86a06d]\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                <span class=\"\">\n                  月1回のお手入れガイド\n                </span>\n              </li>\n              <li class=\"flex items-start gap-2.5 text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-[#86a06d]\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                <span class=\"\">\n                  コミュニティ参加\n                </span>\n              </li>\n              <li class=\"flex items-start gap-2.5 text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-[#86a06d]\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                <span class=\"\">\n                  季節のレシピ配信\n                </span>\n              </li>\n            </ul>\n            <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 px-4 py-2 mt-7 h-11 rounded-full text-sm tracking-wide bg-[#5e6b4f] text-[#f3f1e7] hover:bg-[#4b563f]\">\n              プランを選ぶ\n            </button>\n          </div>\n          <div class=\"relative flex flex-col rounded-3xl border p-7 transition-shadow border-[#5e6b4f] bg-[#5e6b4f] text-[#f3f1e7] shadow-[0_20px_50px_-20px_rgba(63,74,53,0.7)]\">\n            <span class=\"absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-[#b3753f] px-3 py-1 text-[10px] font-semibold tracking-widest text-white\">\n              人気\n            </span>\n            <h3 class=\"font-serif text-xl font-medium text-[#f3f1e7]\">\n              ブルーム\n            </h3>\n            <p class=\"mt-1 text-xs leading-relaxed text-[#f3f1e7]/80\">\n              毎日のウェルネスを習慣に。\n            </p>\n            <div class=\"mt-5 flex items-end gap-1\">\n              <span class=\"font-serif text-4xl font-medium\">\n                ¥1,980\n              </span>\n              <span class=\"pb-1 text-sm text-[#f3f1e7]/70\">\n                / 月\n              </span>\n            </div>\n            <ul class=\"mt-6 flex-1 space-y-3\">\n              <li class=\"flex items-start gap-2.5 text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-[#cdd4b6]\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                <span class=\"text-[#f3f1e7]/90\">\n                  シードの全特典\n                </span>\n              </li>\n              <li class=\"flex items-start gap-2.5 text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-[#cdd4b6]\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                <span class=\"text-[#f3f1e7]/90\">\n                  月替わりボタニカルボックス\n                </span>\n              </li>\n              <li class=\"flex items-start gap-2.5 text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-[#cdd4b6]\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                <span class=\"text-[#f3f1e7]/90\">\n                  オンライン瞑想クラス\n                </span>\n              </li>\n              <li class=\"flex items-start gap-2.5 text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-[#cdd4b6]\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                <span class=\"text-[#f3f1e7]/90\">\n                  会員限定15%オフ\n                </span>\n              </li>\n            </ul>\n            <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 px-4 py-2 mt-7 h-11 rounded-full text-sm tracking-wide bg-[#f3f1e7] text-[#3f4a35] hover:bg-white\">\n              プランを選ぶ\n            </button>\n          </div>\n          <div class=\"relative flex flex-col rounded-3xl border p-7 transition-shadow border-[#5e6b4f]/20 bg-white/50 hover:shadow-md\">\n            <h3 class=\"font-serif text-xl font-medium text-[#3f4a35]\">\n              フォレスト\n            </h3>\n            <p class=\"mt-1 text-xs leading-relaxed text-[#5e6b4f]\">\n              本格的なセルフケアを求める方へ。\n            </p>\n            <div class=\"mt-5 flex items-end gap-1\">\n              <span class=\"font-serif text-4xl font-medium\">\n                ¥4,800\n              </span>\n              <span class=\"pb-1 text-sm text-[#5e6b4f]/70\">\n                / 月\n              </span>\n            </div>\n            <ul class=\"mt-6 flex-1 space-y-3\">\n              <li class=\"flex items-start gap-2.5 text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-[#86a06d]\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                <span class=\"\">\n                  ブルームの全特典\n                </span>\n              </li>\n              <li class=\"flex items-start gap-2.5 text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-[#86a06d]\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                <span class=\"\">\n                  個別カウンセリング\n                </span>\n              </li>\n              <li class=\"flex items-start gap-2.5 text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-[#86a06d]\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                <span class=\"\">\n                  スパ施術 月1回無料\n                </span>\n              </li>\n              <li class=\"flex items-start gap-2.5 text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-[#86a06d]\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                <span class=\"\">\n                  新商品の先行アクセス\n                </span>\n              </li>\n            </ul>\n            <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 px-4 py-2 mt-7 h-11 rounded-full text-sm tracking-wide bg-[#5e6b4f] text-[#f3f1e7] hover:bg-[#4b563f]\">\n              プランを選ぶ\n            </button>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"w-full bg-[#f3f1e7] px-6 py-20 text-[#3f4a35]\">\n      <div class=\"mx-auto max-w-6xl\">\n        <div class=\"mx-auto max-w-xl text-center\">\n          <span class=\"inline-flex items-center gap-2 rounded-full border border-[#5e6b4f]/30 px-3 py-1 text-xs tracking-[0.2em] text-[#5e6b4f]\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-leaf size-3.5\">\n              <path d=\"M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z\">\n              </path>\n              <path d=\"M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12\">\n              </path>\n            </svg>\n            MEMBERSHIP\n          </span>\n          <h2 class=\"mt-5 font-serif text-4xl font-medium tracking-tight\">\n            あなたのペースで育つプラン\n          </h2>\n          <p class=\"mt-3 text-sm leading-relaxed text-[#5e6b4f]\">\n            いつでも変更・解約可能。植物のように、無理なく続くウェルネスを。\n          </p>\n        </div>\n        <div class=\"mt-14 grid gap-6 md:grid-cols-3\">\n          <div class=\"relative flex flex-col rounded-3xl border p-7 transition-shadow border-[#5e6b4f]/20 bg-white/50 hover:shadow-md\">\n            <h3 class=\"font-serif text-xl font-medium text-[#3f4a35]\">\n              シード\n            </h3>\n            <p class=\"mt-1 text-xs leading-relaxed text-[#5e6b4f]\">\n              はじめての方に。基本のケアを無料で。\n            </p>\n            <div class=\"mt-5 flex items-end gap-1\">\n              <span class=\"font-serif text-4xl font-medium\">\n                ¥0\n              </span>\n              <span class=\"pb-1 text-sm text-[#5e6b4f]/70\">\n                / 月\n              </span>\n            </div>\n            <ul class=\"mt-6 flex-1 space-y-3\">\n              <li class=\"flex items-start gap-2.5 text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-[#86a06d]\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                <span class=\"\">\n                  月1回のお手入れガイド\n                </span>\n              </li>\n              <li class=\"flex items-start gap-2.5 text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-[#86a06d]\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                <span class=\"\">\n                  コミュニティ参加\n                </span>\n              </li>\n              <li class=\"flex items-start gap-2.5 text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-[#86a06d]\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                <span class=\"\">\n                  季節のレシピ配信\n                </span>\n              </li>\n            </ul>\n            <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 px-4 py-2 mt-7 h-11 rounded-full text-sm tracking-wide bg-[#5e6b4f] text-[#f3f1e7] hover:bg-[#4b563f]\">\n              プランを選ぶ\n            </button>\n          </div>\n          <div class=\"relative flex flex-col rounded-3xl border p-7 transition-shadow border-[#5e6b4f] bg-[#5e6b4f] text-[#f3f1e7] shadow-[0_20px_50px_-20px_rgba(63,74,53,0.7)]\">\n            <span class=\"absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-[#b3753f] px-3 py-1 text-[10px] font-semibold tracking-widest text-white\">\n              人気\n            </span>\n            <h3 class=\"font-serif text-xl font-medium text-[#f3f1e7]\">\n              ブルーム\n            </h3>\n            <p class=\"mt-1 text-xs leading-relaxed text-[#f3f1e7]/80\">\n              毎日のウェルネスを習慣に。\n            </p>\n            <div class=\"mt-5 flex items-end gap-1\">\n              <span class=\"font-serif text-4xl font-medium\">\n                ¥1,980\n              </span>\n              <span class=\"pb-1 text-sm text-[#f3f1e7]/70\">\n                / 月\n              </span>\n            </div>\n            <ul class=\"mt-6 flex-1 space-y-3\">\n              <li class=\"flex items-start gap-2.5 text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-[#cdd4b6]\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                <span class=\"text-[#f3f1e7]/90\">\n                  シードの全特典\n                </span>\n              </li>\n              <li class=\"flex items-start gap-2.5 text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-[#cdd4b6]\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                <span class=\"text-[#f3f1e7]/90\">\n                  月替わりボタニカルボックス\n                </span>\n              </li>\n              <li class=\"flex items-start gap-2.5 text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-[#cdd4b6]\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                <span class=\"text-[#f3f1e7]/90\">\n                  オンライン瞑想クラス\n                </span>\n              </li>\n              <li class=\"flex items-start gap-2.5 text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-[#cdd4b6]\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                <span class=\"text-[#f3f1e7]/90\">\n                  会員限定15%オフ\n                </span>\n              </li>\n            </ul>\n            <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 px-4 py-2 mt-7 h-11 rounded-full text-sm tracking-wide bg-[#f3f1e7] text-[#3f4a35] hover:bg-white\">\n              プランを選ぶ\n            </button>\n          </div>\n          <div class=\"relative flex flex-col rounded-3xl border p-7 transition-shadow border-[#5e6b4f]/20 bg-white/50 hover:shadow-md\">\n            <h3 class=\"font-serif text-xl font-medium text-[#3f4a35]\">\n              フォレスト\n            </h3>\n            <p class=\"mt-1 text-xs leading-relaxed text-[#5e6b4f]\">\n              本格的なセルフケアを求める方へ。\n            </p>\n            <div class=\"mt-5 flex items-end gap-1\">\n              <span class=\"font-serif text-4xl font-medium\">\n                ¥4,800\n              </span>\n              <span class=\"pb-1 text-sm text-[#5e6b4f]/70\">\n                / 月\n              </span>\n            </div>\n            <ul class=\"mt-6 flex-1 space-y-3\">\n              <li class=\"flex items-start gap-2.5 text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-[#86a06d]\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                <span class=\"\">\n                  ブルームの全特典\n                </span>\n              </li>\n              <li class=\"flex items-start gap-2.5 text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-[#86a06d]\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                <span class=\"\">\n                  個別カウンセリング\n                </span>\n              </li>\n              <li class=\"flex items-start gap-2.5 text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-[#86a06d]\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                <span class=\"\">\n                  スパ施術 月1回無料\n                </span>\n              </li>\n              <li class=\"flex items-start gap-2.5 text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-[#86a06d]\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                <span class=\"\">\n                  新商品の先行アクセス\n                </span>\n              </li>\n            </ul>\n            <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 px-4 py-2 mt-7 h-11 rounded-full text-sm tracking-wide bg-[#5e6b4f] text-[#f3f1e7] hover:bg-[#4b563f]\">\n              プランを選ぶ\n            </button>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "brutalist-brutal-button-set",
@@ -304,7 +304,7 @@
       ],
       "standalone": true,
       "source": "import { ArrowRight, Download, Heart, Sparkles, Trash2 } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"ブルータル・ボタン集\",\n  category: \"ブルータリスト\",\n  description: \"色違いのバリアントとホバーで沈むブルータルなボタンとバッジ。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"brutalist\", \"bold\", \"buttons\"],\n};\n\nconst baseBtn =\n  \"inline-flex items-center gap-2 border-4 border-black px-5 py-2.5 font-black uppercase shadow-[5px_5px_0_0_#000] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-[1px_1px_0_0_#000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none\";\n\nexport default function BrutalButtonSet() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <div className=\"bg-yellow-300 p-8 font-sans text-black\">\n      <div className=\"space-y-8\">\n        <div>\n          <div className=\"mb-3 font-mono text-xs font-black uppercase\">\n            {en ? \"Buttons\" : \"ボタン\"}\n          </div>\n          <div className=\"flex flex-wrap gap-4\">\n            <button className={cn(baseBtn, \"bg-fuchsia-400\")}>\n              {en ? \"Continue\" : \"続ける\"}{\" \"}\n              <ArrowRight className=\"h-4 w-4\" strokeWidth={3} />\n            </button>\n            <button className={cn(baseBtn, \"bg-cyan-300\")}>\n              <Download className=\"h-4 w-4\" strokeWidth={3} />{\" \"}\n              {en ? \"Get\" : \"取得\"}\n            </button>\n            <button className={cn(baseBtn, \"bg-lime-300\")}>\n              <Sparkles className=\"h-4 w-4\" strokeWidth={3} />{\" \"}\n              {en ? \"Magic\" : \"魔法\"}\n            </button>\n            <button className={cn(baseBtn, \"bg-black text-white shadow-[5px_5px_0_0_#000] ring-2 ring-black\")}>\n              <Trash2 className=\"h-4 w-4\" strokeWidth={3} />{\" \"}\n              {en ? \"Delete\" : \"削除\"}\n            </button>\n          </div>\n        </div>\n\n        <div>\n          <div className=\"mb-3 font-mono text-xs font-black uppercase\">\n            {en ? \"Sizes\" : \"サイズ\"}\n          </div>\n          <div className=\"flex flex-wrap items-center gap-4\">\n            <button className=\"border-2 border-black bg-orange-400 px-3 py-1 text-sm font-black uppercase shadow-[3px_3px_0_0_#000] transition-all hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[1px_1px_0_0_#000]\">\n              {en ? \"SM\" : \"小\"}\n            </button>\n            <button className={cn(baseBtn, \"bg-orange-400\")}>\n              {en ? \"MD\" : \"中\"}\n            </button>\n            <button className=\"inline-flex items-center gap-2 border-4 border-black bg-orange-400 px-7 py-3.5 text-lg font-black uppercase shadow-[7px_7px_0_0_#000] transition-all hover:translate-x-1.5 hover:translate-y-1.5 hover:shadow-[1px_1px_0_0_#000]\">\n              {en ? \"LG\" : \"大\"}\n            </button>\n          </div>\n        </div>\n\n        <div>\n          <div className=\"mb-3 font-mono text-xs font-black uppercase\">\n            {en ? \"Badges\" : \"バッジ\"}\n          </div>\n          <div className=\"flex flex-wrap gap-3 font-mono text-sm font-black uppercase\">\n            <span className=\"border-2 border-black bg-lime-300 px-3 py-1\">\n              NEW\n            </span>\n            <span className=\"border-2 border-black bg-fuchsia-400 px-3 py-1\">\n              SALE -50%\n            </span>\n            <span className=\"inline-flex items-center gap-1 border-2 border-black bg-cyan-300 px-3 py-1\">\n              <Heart className=\"h-3.5 w-3.5\" fill=\"black\" />{\" \"}\n              {en ? \"Popular\" : \"人気\"}\n            </span>\n            <span className=\"border-2 border-black bg-black px-3 py-1 text-yellow-300\">\n              {en ? \"Limited\" : \"限定\"}\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"bg-yellow-300 p-8 font-sans text-black\">\n      <div class=\"space-y-8\">\n        <div>\n          <div class=\"mb-3 font-mono text-xs font-black uppercase\">\n            ボタン\n          </div>\n          <div class=\"flex flex-wrap gap-4\">\n            <button class=\"inline-flex items-center gap-2 border-4 border-black px-5 py-2.5 font-black uppercase shadow-[5px_5px_0_0_#000] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-[1px_1px_0_0_#000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none bg-fuchsia-400\">\n              続ける\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right h-4 w-4\">\n                <path d=\"M5 12h14\">\n                </path>\n                <path d=\"m12 5 7 7-7 7\">\n                </path>\n              </svg>\n            </button>\n            <button class=\"inline-flex items-center gap-2 border-4 border-black px-5 py-2.5 font-black uppercase shadow-[5px_5px_0_0_#000] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-[1px_1px_0_0_#000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none bg-cyan-300\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-download h-4 w-4\">\n                <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\">\n                </path>\n                <polyline points=\"7 10 12 15 17 10\">\n                </polyline>\n                <line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\">\n                </line>\n              </svg>\n              取得\n            </button>\n            <button class=\"inline-flex items-center gap-2 border-4 border-black px-5 py-2.5 font-black uppercase shadow-[5px_5px_0_0_#000] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-[1px_1px_0_0_#000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none bg-lime-300\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles h-4 w-4\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              魔法\n            </button>\n            <button class=\"inline-flex items-center gap-2 border-4 border-black px-5 py-2.5 font-black uppercase transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-[1px_1px_0_0_#000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none bg-black text-white shadow-[5px_5px_0_0_#000] ring-2 ring-black\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash2 h-4 w-4\">\n                <path d=\"M3 6h18\">\n                </path>\n                <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\">\n                </path>\n                <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\">\n                </path>\n                <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\">\n                </line>\n                <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\">\n                </line>\n              </svg>\n              削除\n            </button>\n          </div>\n        </div>\n        <div>\n          <div class=\"mb-3 font-mono text-xs font-black uppercase\">\n            サイズ\n          </div>\n          <div class=\"flex flex-wrap items-center gap-4\">\n            <button class=\"border-2 border-black bg-orange-400 px-3 py-1 text-sm font-black uppercase shadow-[3px_3px_0_0_#000] transition-all hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[1px_1px_0_0_#000]\">\n              小\n            </button>\n            <button class=\"inline-flex items-center gap-2 border-4 border-black px-5 py-2.5 font-black uppercase shadow-[5px_5px_0_0_#000] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-[1px_1px_0_0_#000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none bg-orange-400\">\n              中\n            </button>\n            <button class=\"inline-flex items-center gap-2 border-4 border-black bg-orange-400 px-7 py-3.5 text-lg font-black uppercase shadow-[7px_7px_0_0_#000] transition-all hover:translate-x-1.5 hover:translate-y-1.5 hover:shadow-[1px_1px_0_0_#000]\">\n              大\n            </button>\n          </div>\n        </div>\n        <div>\n          <div class=\"mb-3 font-mono text-xs font-black uppercase\">\n            バッジ\n          </div>\n          <div class=\"flex flex-wrap gap-3 font-mono text-sm font-black uppercase\">\n            <span class=\"border-2 border-black bg-lime-300 px-3 py-1\">\n              NEW\n            </span>\n            <span class=\"border-2 border-black bg-fuchsia-400 px-3 py-1\">\n              SALE -50%\n            </span>\n            <span class=\"inline-flex items-center gap-1 border-2 border-black bg-cyan-300 px-3 py-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"black\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-heart h-3.5 w-3.5\">\n                <path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\n                </path>\n              </svg>\n              人気\n            </span>\n            <span class=\"border-2 border-black bg-black px-3 py-1 text-yellow-300\">\n              限定\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"bg-yellow-300 p-8 font-sans text-black\">\n      <div class=\"space-y-8\">\n        <div>\n          <div class=\"mb-3 font-mono text-xs font-black uppercase\">\n            ボタン\n          </div>\n          <div class=\"flex flex-wrap gap-4\">\n            <button class=\"inline-flex items-center gap-2 border-4 border-black px-5 py-2.5 font-black uppercase shadow-[5px_5px_0_0_#000] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-[1px_1px_0_0_#000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none bg-fuchsia-400\">\n              続ける\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right h-4 w-4\">\n                <path d=\"M5 12h14\">\n                </path>\n                <path d=\"m12 5 7 7-7 7\">\n                </path>\n              </svg>\n            </button>\n            <button class=\"inline-flex items-center gap-2 border-4 border-black px-5 py-2.5 font-black uppercase shadow-[5px_5px_0_0_#000] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-[1px_1px_0_0_#000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none bg-cyan-300\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-download h-4 w-4\">\n                <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\">\n                </path>\n                <polyline points=\"7 10 12 15 17 10\">\n                </polyline>\n                <line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\">\n                </line>\n              </svg>\n              取得\n            </button>\n            <button class=\"inline-flex items-center gap-2 border-4 border-black px-5 py-2.5 font-black uppercase shadow-[5px_5px_0_0_#000] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-[1px_1px_0_0_#000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none bg-lime-300\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles h-4 w-4\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              魔法\n            </button>\n            <button class=\"inline-flex items-center gap-2 border-4 border-black px-5 py-2.5 font-black uppercase transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-[1px_1px_0_0_#000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none bg-black text-white shadow-[5px_5px_0_0_#000] ring-2 ring-black\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash2 h-4 w-4\">\n                <path d=\"M3 6h18\">\n                </path>\n                <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\">\n                </path>\n                <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\">\n                </path>\n                <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\">\n                </line>\n                <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\">\n                </line>\n              </svg>\n              削除\n            </button>\n          </div>\n        </div>\n        <div>\n          <div class=\"mb-3 font-mono text-xs font-black uppercase\">\n            サイズ\n          </div>\n          <div class=\"flex flex-wrap items-center gap-4\">\n            <button class=\"border-2 border-black bg-orange-400 px-3 py-1 text-sm font-black uppercase shadow-[3px_3px_0_0_#000] transition-all hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[1px_1px_0_0_#000]\">\n              小\n            </button>\n            <button class=\"inline-flex items-center gap-2 border-4 border-black px-5 py-2.5 font-black uppercase shadow-[5px_5px_0_0_#000] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-[1px_1px_0_0_#000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none bg-orange-400\">\n              中\n            </button>\n            <button class=\"inline-flex items-center gap-2 border-4 border-black bg-orange-400 px-7 py-3.5 text-lg font-black uppercase shadow-[7px_7px_0_0_#000] transition-all hover:translate-x-1.5 hover:translate-y-1.5 hover:shadow-[1px_1px_0_0_#000]\">\n              大\n            </button>\n          </div>\n        </div>\n        <div>\n          <div class=\"mb-3 font-mono text-xs font-black uppercase\">\n            バッジ\n          </div>\n          <div class=\"flex flex-wrap gap-3 font-mono text-sm font-black uppercase\">\n            <span class=\"border-2 border-black bg-lime-300 px-3 py-1\">\n              NEW\n            </span>\n            <span class=\"border-2 border-black bg-fuchsia-400 px-3 py-1\">\n              SALE -50%\n            </span>\n            <span class=\"inline-flex items-center gap-1 border-2 border-black bg-cyan-300 px-3 py-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"black\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-heart h-3.5 w-3.5\">\n                <path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\n                </path>\n              </svg>\n              人気\n            </span>\n            <span class=\"border-2 border-black bg-black px-3 py-1 text-yellow-300\">\n              限定\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "brutalist-brutal-card",
@@ -318,7 +318,7 @@
       ],
       "standalone": true,
       "source": "import { ArrowUpRight, Heart, MessageCircle } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"ブルータル・カード\",\n  category: \"ブルータリスト\",\n  description: \"ハードシャドウとホバーで沈むコンテンツカード。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"brutalist\", \"bold\", \"card\"],\n};\n\nexport default function BrutalCard() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <div className=\"bg-lime-300 p-8 font-sans text-black\">\n      <article className=\"group w-80 max-w-full border-4 border-black bg-white shadow-[8px_8px_0_0_#000] transition-all hover:translate-x-1.5 hover:translate-y-1.5 hover:shadow-[2px_2px_0_0_#000]\">\n        <div className=\"flex h-40 items-center justify-center border-b-4 border-black bg-fuchsia-400\">\n          <span className=\"font-mono text-6xl font-black\">B</span>\n        </div>\n\n        <div className=\"p-5\">\n          <div className=\"mb-3 inline-block border-2 border-black bg-yellow-300 px-2 py-0.5 font-mono text-xs font-black uppercase\">\n            {en ? \"Design\" : \"設計\"}\n          </div>\n          <h3 className=\"text-2xl font-black uppercase leading-tight\">\n            {en ? \"Raw, undressed design\" : \"生のままのデザイン\"}\n          </h3>\n          <p className=\"mt-2 font-medium leading-relaxed\">\n            {en\n              ? \"Strip away the decoration and speak with structure and contrast alone. That's brutalism.\"\n              : \"余計な装飾を削ぎ落とし、構造とコントラストだけで語る。それがブルータリズム。\"}\n          </p>\n\n          <div className=\"mt-5 flex items-center justify-between border-t-2 border-black pt-4\">\n            <div className=\"flex gap-3 font-mono text-sm font-bold\">\n              <span className=\"inline-flex items-center gap-1\">\n                <Heart className=\"h-4 w-4\" fill=\"black\" /> 248\n              </span>\n              <span className=\"inline-flex items-center gap-1\">\n                <MessageCircle className=\"h-4 w-4\" /> 32\n              </span>\n            </div>\n            <button className=\"inline-flex items-center gap-1 border-2 border-black bg-cyan-300 px-3 py-1.5 font-black uppercase shadow-[3px_3px_0_0_#000] transition-all hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[1px_1px_0_0_#000]\">\n              {en ? \"Read\" : \"読む\"}\n              <ArrowUpRight className=\"h-4 w-4\" strokeWidth={3} />\n            </button>\n          </div>\n        </div>\n      </article>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"bg-lime-300 p-8 font-sans text-black\">\n      <article class=\"group w-80 max-w-full border-4 border-black bg-white shadow-[8px_8px_0_0_#000] transition-all hover:translate-x-1.5 hover:translate-y-1.5 hover:shadow-[2px_2px_0_0_#000]\">\n        <div class=\"flex h-40 items-center justify-center border-b-4 border-black bg-fuchsia-400\">\n          <span class=\"font-mono text-6xl font-black\">\n            B\n          </span>\n        </div>\n        <div class=\"p-5\">\n          <div class=\"mb-3 inline-block border-2 border-black bg-yellow-300 px-2 py-0.5 font-mono text-xs font-black uppercase\">\n            設計\n          </div>\n          <h3 class=\"text-2xl font-black uppercase leading-tight\">\n            生のままのデザイン\n          </h3>\n          <p class=\"mt-2 font-medium leading-relaxed\">\n            余計な装飾を削ぎ落とし、構造とコントラストだけで語る。それがブルータリズム。\n          </p>\n          <div class=\"mt-5 flex items-center justify-between border-t-2 border-black pt-4\">\n            <div class=\"flex gap-3 font-mono text-sm font-bold\">\n              <span class=\"inline-flex items-center gap-1\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"black\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-heart h-4 w-4\">\n                  <path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\n                  </path>\n                </svg>\n                248\n              </span>\n              <span class=\"inline-flex items-center gap-1\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-message-circle h-4 w-4\">\n                  <path d=\"M7.9 20A9 9 0 1 0 4 16.1L2 22Z\">\n                  </path>\n                </svg>\n                32\n              </span>\n            </div>\n            <button class=\"inline-flex items-center gap-1 border-2 border-black bg-cyan-300 px-3 py-1.5 font-black uppercase shadow-[3px_3px_0_0_#000] transition-all hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[1px_1px_0_0_#000]\">\n              読む\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-up-right h-4 w-4\">\n                <path d=\"M7 7h10v10\">\n                </path>\n                <path d=\"M7 17 17 7\">\n                </path>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </article>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"bg-lime-300 p-8 font-sans text-black\">\n      <article class=\"group w-80 max-w-full border-4 border-black bg-white shadow-[8px_8px_0_0_#000] transition-all hover:translate-x-1.5 hover:translate-y-1.5 hover:shadow-[2px_2px_0_0_#000]\">\n        <div class=\"flex h-40 items-center justify-center border-b-4 border-black bg-fuchsia-400\">\n          <span class=\"font-mono text-6xl font-black\">\n            B\n          </span>\n        </div>\n        <div class=\"p-5\">\n          <div class=\"mb-3 inline-block border-2 border-black bg-yellow-300 px-2 py-0.5 font-mono text-xs font-black uppercase\">\n            設計\n          </div>\n          <h3 class=\"text-2xl font-black uppercase leading-tight\">\n            生のままのデザイン\n          </h3>\n          <p class=\"mt-2 font-medium leading-relaxed\">\n            余計な装飾を削ぎ落とし、構造とコントラストだけで語る。それがブルータリズム。\n          </p>\n          <div class=\"mt-5 flex items-center justify-between border-t-2 border-black pt-4\">\n            <div class=\"flex gap-3 font-mono text-sm font-bold\">\n              <span class=\"inline-flex items-center gap-1\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"black\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-heart h-4 w-4\">\n                  <path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\n                  </path>\n                </svg>\n                248\n              </span>\n              <span class=\"inline-flex items-center gap-1\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-message-circle h-4 w-4\">\n                  <path d=\"M7.9 20A9 9 0 1 0 4 16.1L2 22Z\">\n                  </path>\n                </svg>\n                32\n              </span>\n            </div>\n            <button class=\"inline-flex items-center gap-1 border-2 border-black bg-cyan-300 px-3 py-1.5 font-black uppercase shadow-[3px_3px_0_0_#000] transition-all hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[1px_1px_0_0_#000]\">\n              読む\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-up-right h-4 w-4\">\n                <path d=\"M7 7h10v10\">\n                </path>\n                <path d=\"M7 17 17 7\">\n                </path>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </article>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "brutalist-brutal-cta",
@@ -332,7 +332,7 @@
       ],
       "standalone": true,
       "source": "import { ArrowRight, Zap } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"ブルータル・CTA\",\n  category: \"ブルータリスト\",\n  description: \"黒地に飽和色を効かせた高インパクトなCTAバンド。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"brutalist\", \"bold\", \"cta\"],\n};\n\nexport default function BrutalCTA() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"w-full bg-lime-300 px-5 py-12 font-sans text-black sm:px-10 sm:py-16\">\n      <div className=\"mx-auto max-w-5xl border-4 border-black bg-black p-8 shadow-[10px_10px_0_0_#000] sm:p-12\">\n        <div className=\"flex flex-col items-start gap-8 lg:flex-row lg:items-center lg:justify-between\">\n          <div>\n            <div className=\"mb-4 inline-flex items-center gap-2 border-2 border-white bg-fuchsia-400 px-3 py-1 font-mono text-xs font-black uppercase\">\n              <Zap className=\"h-4 w-4\" fill=\"black\" strokeWidth={0} />\n              {en ? \"Free now\" : \"いま無料\"}\n            </div>\n            <h2 className=\"text-4xl font-black uppercase leading-[0.95] text-white sm:text-5xl\">\n              {en ? (\n                <>\n                  Stop stalling.\n                  <br />\n                  <span className=\"bg-yellow-300 px-2 text-black\">Ship it.</span>\n                </>\n              ) : (\n                <>\n                  迷うな。\n                  <br />\n                  <span className=\"bg-yellow-300 px-2 text-black\">出荷しろ。</span>\n                </>\n              )}\n            </h2>\n            <p className=\"mt-4 max-w-md font-bold text-white\">\n              {en\n                ? \"No credit card. Your first component in production in 30 seconds.\"\n                : \"クレカ不要。30秒で最初のコンポーネントを本番へ。\"}\n            </p>\n          </div>\n\n          <div className=\"flex w-full flex-col gap-4 sm:w-auto sm:flex-row\">\n            <button className=\"group inline-flex items-center justify-center gap-2 border-4 border-white bg-cyan-300 px-7 py-4 text-lg font-black uppercase shadow-[6px_6px_0_0_#fff] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-[2px_2px_0_0_#fff]\">\n              {en ? \"Start free\" : \"無料で始める\"}\n              <ArrowRight className=\"h-5 w-5 transition-transform group-hover:translate-x-1\" strokeWidth={3} />\n            </button>\n            <button className=\"border-4 border-white bg-transparent px-7 py-4 text-lg font-black uppercase text-white transition-all hover:bg-white hover:text-black\">\n              {en ? \"Get the docs\" : \"資料請求\"}\n            </button>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"w-full bg-lime-300 px-5 py-12 font-sans text-black sm:px-10 sm:py-16\">\n      <div class=\"mx-auto max-w-5xl border-4 border-black bg-black p-8 shadow-[10px_10px_0_0_#000] sm:p-12\">\n        <div class=\"flex flex-col items-start gap-8 lg:flex-row lg:items-center lg:justify-between\">\n          <div>\n            <div class=\"mb-4 inline-flex items-center gap-2 border-2 border-white bg-fuchsia-400 px-3 py-1 font-mono text-xs font-black uppercase\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"black\" stroke=\"currentColor\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-zap h-4 w-4\">\n                <path d=\"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z\">\n                </path>\n              </svg>\n              いま無料\n            </div>\n            <h2 class=\"text-4xl font-black uppercase leading-[0.95] text-white sm:text-5xl\">\n              迷うな。\n              <br/>\n              <span class=\"bg-yellow-300 px-2 text-black\">\n                出荷しろ。\n              </span>\n            </h2>\n            <p class=\"mt-4 max-w-md font-bold text-white\">\n              クレカ不要。30秒で最初のコンポーネントを本番へ。\n            </p>\n          </div>\n          <div class=\"flex w-full flex-col gap-4 sm:w-auto sm:flex-row\">\n            <button class=\"group inline-flex items-center justify-center gap-2 border-4 border-white bg-cyan-300 px-7 py-4 text-lg font-black uppercase shadow-[6px_6px_0_0_#fff] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-[2px_2px_0_0_#fff]\">\n              無料で始める\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right h-5 w-5 transition-transform group-hover:translate-x-1\">\n                <path d=\"M5 12h14\">\n                </path>\n                <path d=\"m12 5 7 7-7 7\">\n                </path>\n              </svg>\n            </button>\n            <button class=\"border-4 border-white bg-transparent px-7 py-4 text-lg font-black uppercase text-white transition-all hover:bg-white hover:text-black\">\n              資料請求\n            </button>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"w-full bg-lime-300 px-5 py-12 font-sans text-black sm:px-10 sm:py-16\">\n      <div class=\"mx-auto max-w-5xl border-4 border-black bg-black p-8 shadow-[10px_10px_0_0_#000] sm:p-12\">\n        <div class=\"flex flex-col items-start gap-8 lg:flex-row lg:items-center lg:justify-between\">\n          <div>\n            <div class=\"mb-4 inline-flex items-center gap-2 border-2 border-white bg-fuchsia-400 px-3 py-1 font-mono text-xs font-black uppercase\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"black\" stroke=\"currentColor\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-zap h-4 w-4\">\n                <path d=\"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z\">\n                </path>\n              </svg>\n              いま無料\n            </div>\n            <h2 class=\"text-4xl font-black uppercase leading-[0.95] text-white sm:text-5xl\">\n              迷うな。\n              <br/>\n              <span class=\"bg-yellow-300 px-2 text-black\">\n                出荷しろ。\n              </span>\n            </h2>\n            <p class=\"mt-4 max-w-md font-bold text-white\">\n              クレカ不要。30秒で最初のコンポーネントを本番へ。\n            </p>\n          </div>\n          <div class=\"flex w-full flex-col gap-4 sm:w-auto sm:flex-row\">\n            <button class=\"group inline-flex items-center justify-center gap-2 border-4 border-white bg-cyan-300 px-7 py-4 text-lg font-black uppercase shadow-[6px_6px_0_0_#fff] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-[2px_2px_0_0_#fff]\">\n              無料で始める\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right h-5 w-5 transition-transform group-hover:translate-x-1\">\n                <path d=\"M5 12h14\">\n                </path>\n                <path d=\"m12 5 7 7-7 7\">\n                </path>\n              </svg>\n            </button>\n            <button class=\"border-4 border-white bg-transparent px-7 py-4 text-lg font-black uppercase text-white transition-all hover:bg-white hover:text-black\">\n              資料請求\n            </button>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "brutalist-brutal-feature-grid",
@@ -346,7 +346,7 @@
       ],
       "standalone": true,
       "source": "import { Bolt, Lock, Palette, Rocket, Ruler, Shield } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"ブルータル・特徴グリッド\",\n  category: \"ブルータリスト\",\n  description: \"飽和カラーブロックと極太ボーダーの機能グリッド。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"brutalist\", \"bold\", \"features\"],\n};\n\ntype Feature = {\n  icon: LucideIcon;\n  title: string;\n  titleEn: string;\n  body: string;\n  bodyEn: string;\n  bg: string;\n};\n\nconst features: Feature[] = [\n  { icon: Bolt, title: \"爆速\", titleEn: \"Blazing\", body: \"サブミリ秒で描画。待たせない。\", bodyEn: \"Sub-millisecond rendering. No waiting.\", bg: \"bg-yellow-300\" },\n  { icon: Shield, title: \"頑丈\", titleEn: \"Tough\", body: \"壊れにくい設計。安心して使える。\", bodyEn: \"Built not to break. Use with confidence.\", bg: \"bg-lime-300\" },\n  { icon: Palette, title: \"大胆\", titleEn: \"Bold\", body: \"妥協なき色とコントラスト。\", bodyEn: \"Uncompromising color and contrast.\", bg: \"bg-fuchsia-400\" },\n  { icon: Lock, title: \"安全\", titleEn: \"Secure\", body: \"デフォルトで型安全・アクセシブル。\", bodyEn: \"Type-safe and accessible by default.\", bg: \"bg-cyan-300\" },\n  { icon: Ruler, title: \"正確\", titleEn: \"Precise\", body: \"ピクセル単位で意図通り。\", bodyEn: \"Pixel-perfect, exactly as intended.\", bg: \"bg-orange-400\" },\n  { icon: Rocket, title: \"即出荷\", titleEn: \"Ship now\", body: \"貼って終わり。設定地獄なし。\", bodyEn: \"Paste and done. No config hell.\", bg: \"bg-white\" },\n];\n\nexport default function BrutalFeatureGrid() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"w-full bg-black px-5 py-12 font-sans text-black sm:px-10 sm:py-16\">\n      <div className=\"mx-auto max-w-5xl\">\n        <h2 className=\"mb-10 text-4xl font-black uppercase tracking-tight text-white sm:text-5xl\">\n          {en ? \"Features\" : \"機能\"}<span className=\"text-lime-300\">_</span>{en ? \"list\" : \"一覧\"}\n        </h2>\n\n        <div className=\"grid gap-5 sm:grid-cols-2 lg:grid-cols-3\">\n          {features.map((f) => {\n            const Icon = f.icon;\n            return (\n              <div\n                key={f.title}\n                className={cn(\n                  \"border-4 border-white p-6 shadow-[6px_6px_0_0_#fff] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-[2px_2px_0_0_#fff]\",\n                  f.bg\n                )}\n              >\n                <span className=\"mb-4 inline-flex h-12 w-12 items-center justify-center border-2 border-black bg-black text-white\">\n                  <Icon className=\"h-6 w-6\" strokeWidth={2.5} />\n                </span>\n                <h3 className=\"text-2xl font-black uppercase\">{en ? f.titleEn : f.title}</h3>\n                <p className=\"mt-2 font-bold leading-relaxed\">{en ? f.bodyEn : f.body}</p>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"w-full bg-black px-5 py-12 font-sans text-black sm:px-10 sm:py-16\">\n      <div class=\"mx-auto max-w-5xl\">\n        <h2 class=\"mb-10 text-4xl font-black uppercase tracking-tight text-white sm:text-5xl\">\n          機能\n          <span class=\"text-lime-300\">\n            _\n          </span>\n          一覧\n        </h2>\n        <div class=\"grid gap-5 sm:grid-cols-2 lg:grid-cols-3\">\n          <div class=\"border-4 border-white p-6 shadow-[6px_6px_0_0_#fff] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-[2px_2px_0_0_#fff] bg-yellow-300\">\n            <span class=\"mb-4 inline-flex h-12 w-12 items-center justify-center border-2 border-black bg-black text-white\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-bolt h-6 w-6\">\n                <path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\">\n                </path>\n                <circle cx=\"12\" cy=\"12\" r=\"4\">\n                </circle>\n              </svg>\n            </span>\n            <h3 class=\"text-2xl font-black uppercase\">\n              爆速\n            </h3>\n            <p class=\"mt-2 font-bold leading-relaxed\">\n              サブミリ秒で描画。待たせない。\n            </p>\n          </div>\n          <div class=\"border-4 border-white p-6 shadow-[6px_6px_0_0_#fff] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-[2px_2px_0_0_#fff] bg-lime-300\">\n            <span class=\"mb-4 inline-flex h-12 w-12 items-center justify-center border-2 border-black bg-black text-white\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-shield h-6 w-6\">\n                <path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\n                </path>\n              </svg>\n            </span>\n            <h3 class=\"text-2xl font-black uppercase\">\n              頑丈\n            </h3>\n            <p class=\"mt-2 font-bold leading-relaxed\">\n              壊れにくい設計。安心して使える。\n            </p>\n          </div>\n          <div class=\"border-4 border-white p-6 shadow-[6px_6px_0_0_#fff] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-[2px_2px_0_0_#fff] bg-fuchsia-400\">\n            <span class=\"mb-4 inline-flex h-12 w-12 items-center justify-center border-2 border-black bg-black text-white\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-palette h-6 w-6\">\n                <circle cx=\"13.5\" cy=\"6.5\" r=\".5\" fill=\"currentColor\">\n                </circle>\n                <circle cx=\"17.5\" cy=\"10.5\" r=\".5\" fill=\"currentColor\">\n                </circle>\n                <circle cx=\"8.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\">\n                </circle>\n                <circle cx=\"6.5\" cy=\"12.5\" r=\".5\" fill=\"currentColor\">\n                </circle>\n                <path d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z\">\n                </path>\n              </svg>\n            </span>\n            <h3 class=\"text-2xl font-black uppercase\">\n              大胆\n            </h3>\n            <p class=\"mt-2 font-bold leading-relaxed\">\n              妥協なき色とコントラスト。\n            </p>\n          </div>\n          <div class=\"border-4 border-white p-6 shadow-[6px_6px_0_0_#fff] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-[2px_2px_0_0_#fff] bg-cyan-300\">\n            <span class=\"mb-4 inline-flex h-12 w-12 items-center justify-center border-2 border-black bg-black text-white\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-lock h-6 w-6\">\n                <rect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\" ry=\"2\">\n                </rect>\n                <path d=\"M7 11V7a5 5 0 0 1 10 0v4\">\n                </path>\n              </svg>\n            </span>\n            <h3 class=\"text-2xl font-black uppercase\">\n              安全\n            </h3>\n            <p class=\"mt-2 font-bold leading-relaxed\">\n              デフォルトで型安全・アクセシブル。\n            </p>\n          </div>\n          <div class=\"border-4 border-white p-6 shadow-[6px_6px_0_0_#fff] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-[2px_2px_0_0_#fff] bg-orange-400\">\n            <span class=\"mb-4 inline-flex h-12 w-12 items-center justify-center border-2 border-black bg-black text-white\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-ruler h-6 w-6\">\n                <path d=\"M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z\">\n                </path>\n                <path d=\"m14.5 12.5 2-2\">\n                </path>\n                <path d=\"m11.5 9.5 2-2\">\n                </path>\n                <path d=\"m8.5 6.5 2-2\">\n                </path>\n                <path d=\"m17.5 15.5 2-2\">\n                </path>\n              </svg>\n            </span>\n            <h3 class=\"text-2xl font-black uppercase\">\n              正確\n            </h3>\n            <p class=\"mt-2 font-bold leading-relaxed\">\n              ピクセル単位で意図通り。\n            </p>\n          </div>\n          <div class=\"border-4 border-white p-6 shadow-[6px_6px_0_0_#fff] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-[2px_2px_0_0_#fff] bg-white\">\n            <span class=\"mb-4 inline-flex h-12 w-12 items-center justify-center border-2 border-black bg-black text-white\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-rocket h-6 w-6\">\n                <path d=\"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z\">\n                </path>\n                <path d=\"m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z\">\n                </path>\n                <path d=\"M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0\">\n                </path>\n                <path d=\"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5\">\n                </path>\n              </svg>\n            </span>\n            <h3 class=\"text-2xl font-black uppercase\">\n              即出荷\n            </h3>\n            <p class=\"mt-2 font-bold leading-relaxed\">\n              貼って終わり。設定地獄なし。\n            </p>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"w-full bg-black px-5 py-12 font-sans text-black sm:px-10 sm:py-16\">\n      <div class=\"mx-auto max-w-5xl\">\n        <h2 class=\"mb-10 text-4xl font-black uppercase tracking-tight text-white sm:text-5xl\">\n          機能\n          <span class=\"text-lime-300\">\n            _\n          </span>\n          一覧\n        </h2>\n        <div class=\"grid gap-5 sm:grid-cols-2 lg:grid-cols-3\">\n          <div class=\"border-4 border-white p-6 shadow-[6px_6px_0_0_#fff] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-[2px_2px_0_0_#fff] bg-yellow-300\">\n            <span class=\"mb-4 inline-flex h-12 w-12 items-center justify-center border-2 border-black bg-black text-white\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-bolt h-6 w-6\">\n                <path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\">\n                </path>\n                <circle cx=\"12\" cy=\"12\" r=\"4\">\n                </circle>\n              </svg>\n            </span>\n            <h3 class=\"text-2xl font-black uppercase\">\n              爆速\n            </h3>\n            <p class=\"mt-2 font-bold leading-relaxed\">\n              サブミリ秒で描画。待たせない。\n            </p>\n          </div>\n          <div class=\"border-4 border-white p-6 shadow-[6px_6px_0_0_#fff] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-[2px_2px_0_0_#fff] bg-lime-300\">\n            <span class=\"mb-4 inline-flex h-12 w-12 items-center justify-center border-2 border-black bg-black text-white\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-shield h-6 w-6\">\n                <path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\n                </path>\n              </svg>\n            </span>\n            <h3 class=\"text-2xl font-black uppercase\">\n              頑丈\n            </h3>\n            <p class=\"mt-2 font-bold leading-relaxed\">\n              壊れにくい設計。安心して使える。\n            </p>\n          </div>\n          <div class=\"border-4 border-white p-6 shadow-[6px_6px_0_0_#fff] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-[2px_2px_0_0_#fff] bg-fuchsia-400\">\n            <span class=\"mb-4 inline-flex h-12 w-12 items-center justify-center border-2 border-black bg-black text-white\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-palette h-6 w-6\">\n                <circle cx=\"13.5\" cy=\"6.5\" r=\".5\" fill=\"currentColor\">\n                </circle>\n                <circle cx=\"17.5\" cy=\"10.5\" r=\".5\" fill=\"currentColor\">\n                </circle>\n                <circle cx=\"8.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\">\n                </circle>\n                <circle cx=\"6.5\" cy=\"12.5\" r=\".5\" fill=\"currentColor\">\n                </circle>\n                <path d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z\">\n                </path>\n              </svg>\n            </span>\n            <h3 class=\"text-2xl font-black uppercase\">\n              大胆\n            </h3>\n            <p class=\"mt-2 font-bold leading-relaxed\">\n              妥協なき色とコントラスト。\n            </p>\n          </div>\n          <div class=\"border-4 border-white p-6 shadow-[6px_6px_0_0_#fff] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-[2px_2px_0_0_#fff] bg-cyan-300\">\n            <span class=\"mb-4 inline-flex h-12 w-12 items-center justify-center border-2 border-black bg-black text-white\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-lock h-6 w-6\">\n                <rect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\" ry=\"2\">\n                </rect>\n                <path d=\"M7 11V7a5 5 0 0 1 10 0v4\">\n                </path>\n              </svg>\n            </span>\n            <h3 class=\"text-2xl font-black uppercase\">\n              安全\n            </h3>\n            <p class=\"mt-2 font-bold leading-relaxed\">\n              デフォルトで型安全・アクセシブル。\n            </p>\n          </div>\n          <div class=\"border-4 border-white p-6 shadow-[6px_6px_0_0_#fff] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-[2px_2px_0_0_#fff] bg-orange-400\">\n            <span class=\"mb-4 inline-flex h-12 w-12 items-center justify-center border-2 border-black bg-black text-white\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-ruler h-6 w-6\">\n                <path d=\"M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z\">\n                </path>\n                <path d=\"m14.5 12.5 2-2\">\n                </path>\n                <path d=\"m11.5 9.5 2-2\">\n                </path>\n                <path d=\"m8.5 6.5 2-2\">\n                </path>\n                <path d=\"m17.5 15.5 2-2\">\n                </path>\n              </svg>\n            </span>\n            <h3 class=\"text-2xl font-black uppercase\">\n              正確\n            </h3>\n            <p class=\"mt-2 font-bold leading-relaxed\">\n              ピクセル単位で意図通り。\n            </p>\n          </div>\n          <div class=\"border-4 border-white p-6 shadow-[6px_6px_0_0_#fff] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-[2px_2px_0_0_#fff] bg-white\">\n            <span class=\"mb-4 inline-flex h-12 w-12 items-center justify-center border-2 border-black bg-black text-white\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-rocket h-6 w-6\">\n                <path d=\"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z\">\n                </path>\n                <path d=\"m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z\">\n                </path>\n                <path d=\"M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0\">\n                </path>\n                <path d=\"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5\">\n                </path>\n              </svg>\n            </span>\n            <h3 class=\"text-2xl font-black uppercase\">\n              即出荷\n            </h3>\n            <p class=\"mt-2 font-bold leading-relaxed\">\n              貼って終わり。設定地獄なし。\n            </p>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "btn-fun-brutalist",
@@ -359,7 +359,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\nimport { Zap } from \"lucide-react\";\n\nexport const meta: DemoMeta = {\n  name: \"ブルータリスト\",\n  category: \"ボタン\",\n  description: \"極太の黒枠とベタ塗りの硬いドロップシャドウ。押すと影に沈むブルータリスト・ボタン。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"button\", \"fun\"],\n};\n\nexport default function Brutalist() {\n  return (\n    <div className=\"flex items-center justify-center rounded-2xl bg-[#fde047] p-8\">\n      <button\n        type=\"button\"\n        className=\"group inline-flex translate-x-[-3px] translate-y-[-3px] items-center gap-2 border-4 border-black bg-white px-7 py-3.5 text-base font-extrabold uppercase tracking-wide text-black shadow-[6px_6px_0_0_#000] transition-all duration-150 hover:translate-x-0 hover:translate-y-0 hover:bg-[#f472b6] hover:shadow-[3px_3px_0_0_#000] active:translate-x-[3px] active:translate-y-[3px] active:shadow-[0px_0px_0_0_#000] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-black/30\"\n      >\n        <Zap className=\"size-5\" />\n        CLICK ME\n      </button>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"flex items-center justify-center rounded-2xl bg-[#fde047] p-8\">\n      <button type=\"button\" class=\"group inline-flex translate-x-[-3px] translate-y-[-3px] items-center gap-2 border-4 border-black bg-white px-7 py-3.5 text-base font-extrabold uppercase tracking-wide text-black shadow-[6px_6px_0_0_#000] transition-all duration-150 hover:translate-x-0 hover:translate-y-0 hover:bg-[#f472b6] hover:shadow-[3px_3px_0_0_#000] active:translate-x-[3px] active:translate-y-[3px] active:shadow-[0px_0px_0_0_#000] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-black/30\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-zap size-5\">\n          <path d=\"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z\">\n          </path>\n        </svg>\n        CLICK ME\n      </button>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"flex items-center justify-center rounded-2xl bg-[#fde047] p-8\">\n      <button type=\"button\" class=\"group inline-flex translate-x-[-3px] translate-y-[-3px] items-center gap-2 border-4 border-black bg-white px-7 py-3.5 text-base font-extrabold uppercase tracking-wide text-black shadow-[6px_6px_0_0_#000] transition-all duration-150 hover:translate-x-0 hover:translate-y-0 hover:bg-[#f472b6] hover:shadow-[3px_3px_0_0_#000] active:translate-x-[3px] active:translate-y-[3px] active:shadow-[0px_0px_0_0_#000] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-black/30\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-zap size-5\">\n          <path d=\"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z\">\n          </path>\n        </svg>\n        CLICK ME\n      </button>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "btn-fun-gooey",
@@ -372,7 +372,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\nimport { Blend } from \"lucide-react\";\n\nexport const meta: DemoMeta = {\n  name: \"グーイ\",\n  category: \"ボタン\",\n  description: \"SVGフィルターで粘性のあるグー（goo）表現。ホバーで雫が溶け合う。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"button\", \"fun\"],\n};\n\nexport default function Gooey() {\n  const en = typeof document !== \"undefined\" && document.documentElement.lang === \"en\";\n  return (\n    <div className=\"flex items-center justify-center rounded-2xl bg-fuchsia-100 p-8\">\n      <svg width=\"0\" height=\"0\" className=\"absolute\" aria-hidden=\"true\">\n        <defs>\n          <filter id=\"btnfun-goo\">\n            <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"6\" result=\"blur\" />\n            <feColorMatrix\n              in=\"blur\"\n              mode=\"matrix\"\n              values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9\"\n            />\n          </filter>\n        </defs>\n      </svg>\n      <button\n        type=\"button\"\n        className=\"group relative inline-flex items-center justify-center px-2 py-2\"\n        style={{ filter: \"url(#btnfun-goo)\" }}\n        aria-label={en ? \"Gooey button\" : \"グーイボタン\"}\n      >\n        <span className=\"absolute size-12 rounded-full bg-fuchsia-600 transition-all duration-500 group-hover:-translate-x-7\" />\n        <span className=\"absolute size-12 rounded-full bg-fuchsia-600 transition-all duration-500 group-hover:translate-x-7\" />\n        <span className=\"relative z-10 inline-flex items-center gap-2 rounded-full bg-fuchsia-600 px-6 py-3 text-sm font-bold text-white\">\n          <Blend className=\"size-4\" />\n          {en ? \"Gooey\" : \"とろり\"}\n        </span>\n      </button>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"flex items-center justify-center rounded-2xl bg-fuchsia-100 p-8\">\n      <svg width=\"0\" height=\"0\" class=\"absolute\" aria-hidden=\"true\">\n        <defs>\n          <filter id=\"btnfun-goo\">\n            <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"6\" result=\"blur\">\n            </feGaussianBlur>\n            <feColorMatrix in=\"blur\" mode=\"matrix\" values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9\">\n            </feColorMatrix>\n          </filter>\n        </defs>\n      </svg>\n      <button type=\"button\" class=\"group relative inline-flex items-center justify-center px-2 py-2\" style=\"filter:url(#btnfun-goo)\" aria-label=\"グーイボタン\">\n        <span class=\"absolute size-12 rounded-full bg-fuchsia-600 transition-all duration-500 group-hover:-translate-x-7\">\n        </span>\n        <span class=\"absolute size-12 rounded-full bg-fuchsia-600 transition-all duration-500 group-hover:translate-x-7\">\n        </span>\n        <span class=\"relative z-10 inline-flex items-center gap-2 rounded-full bg-fuchsia-600 px-6 py-3 text-sm font-bold text-white\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-blend size-4\">\n            <circle cx=\"9\" cy=\"9\" r=\"7\">\n            </circle>\n            <circle cx=\"15\" cy=\"15\" r=\"7\">\n            </circle>\n          </svg>\n          とろり\n        </span>\n      </button>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"flex items-center justify-center rounded-2xl bg-fuchsia-100 p-8\">\n      <svg width=\"0\" height=\"0\" class=\"absolute\" aria-hidden=\"true\">\n        <defs>\n          <filter id=\"btnfun-goo\">\n            <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"6\" result=\"blur\">\n            </feGaussianBlur>\n            <feColorMatrix in=\"blur\" mode=\"matrix\" values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9\">\n            </feColorMatrix>\n          </filter>\n        </defs>\n      </svg>\n      <button type=\"button\" class=\"group relative inline-flex items-center justify-center px-2 py-2\" style=\"filter:url(#btnfun-goo)\" aria-label=\"グーイボタン\">\n        <span class=\"absolute size-12 rounded-full bg-fuchsia-600 transition-all duration-500 group-hover:-translate-x-7\">\n        </span>\n        <span class=\"absolute size-12 rounded-full bg-fuchsia-600 transition-all duration-500 group-hover:translate-x-7\">\n        </span>\n        <span class=\"relative z-10 inline-flex items-center gap-2 rounded-full bg-fuchsia-600 px-6 py-3 text-sm font-bold text-white\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-blend size-4\">\n            <circle cx=\"9\" cy=\"9\" r=\"7\">\n            </circle>\n            <circle cx=\"15\" cy=\"15\" r=\"7\">\n            </circle>\n          </svg>\n          とろり\n        </span>\n      </button>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "btn-fun-gradient-pill",
@@ -385,7 +385,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\nimport { Flame } from \"lucide-react\";\n\nexport const meta: DemoMeta = {\n  name: \"グラデピル\",\n  category: \"ボタン\",\n  description: \"鮮やかなマルチグラデが流れるピル型。ホバーで色がゆっくり巡る。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"button\", \"fun\"],\n};\n\nexport default function GradientPill() {\n  const en = typeof document !== \"undefined\" && document.documentElement.lang === \"en\";\n  return (\n    <div className=\"flex items-center justify-center rounded-2xl bg-slate-900 p-8\">\n      <style>{`@keyframes btnfun-flow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}.btnfun-grad{background-size:200% 200%;animation:btnfun-flow 5s ease infinite}.btnfun-grad:hover{animation-duration:2s}`}</style>\n      <button\n        type=\"button\"\n        className=\"btnfun-grad inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-pink-500 via-orange-400 to-yellow-400 px-8 py-3.5 text-sm font-bold text-white shadow-[0_8px_28px_-6px_rgba(244,114,182,0.6)] transition-transform duration-200 hover:scale-105 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-pink-300\"\n      >\n        <Flame className=\"size-4\" />\n        {en ? \"Trending\" : \"トレンド\"}\n      </button>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"flex items-center justify-center rounded-2xl bg-slate-900 p-8\">\n      <style>\n        @keyframes btnfun-flow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}.btnfun-grad{background-size:200% 200%;animation:btnfun-flow 5s ease infinite}.btnfun-grad:hover{animation-duration:2s}\n      </style>\n      <button type=\"button\" class=\"btnfun-grad inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-pink-500 via-orange-400 to-yellow-400 px-8 py-3.5 text-sm font-bold text-white shadow-[0_8px_28px_-6px_rgba(244,114,182,0.6)] transition-transform duration-200 hover:scale-105 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-pink-300\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-flame size-4\">\n          <path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\">\n          </path>\n        </svg>\n        トレンド\n      </button>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"flex items-center justify-center rounded-2xl bg-slate-900 p-8\">\n      <style>\n        @keyframes btnfun-flow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}.btnfun-grad{background-size:200% 200%;animation:btnfun-flow 5s ease infinite}.btnfun-grad:hover{animation-duration:2s}\n      </style>\n      <button type=\"button\" class=\"btnfun-grad inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-pink-500 via-orange-400 to-yellow-400 px-8 py-3.5 text-sm font-bold text-white shadow-[0_8px_28px_-6px_rgba(244,114,182,0.6)] transition-transform duration-200 hover:scale-105 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-pink-300\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-flame size-4\">\n          <path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\">\n          </path>\n        </svg>\n        トレンド\n      </button>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "btn-fun-hand-drawn",
@@ -398,7 +398,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\nimport { Pencil } from \"lucide-react\";\n\nexport const meta: DemoMeta = {\n  name: \"手描き枠\",\n  category: \"ボタン\",\n  description: \"ラフな手描き風の枠線。ホバーで線がゆらいで生き生きするボタン。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"button\", \"fun\"],\n};\n\nexport default function HandDrawn() {\n  const en = typeof document !== \"undefined\" && document.documentElement.lang === \"en\";\n  return (\n    <div className=\"flex items-center justify-center rounded-2xl bg-[#fffdf5] p-8\">\n      <style>{`@keyframes btnfun-sketch{0%,100%{border-radius:255px 15px 225px 15px/15px 225px 15px 255px}50%{border-radius:15px 225px 15px 255px/255px 15px 225px 15px}}.btnfun-hand:hover{animation:btnfun-sketch 1.4s ease-in-out infinite}`}</style>\n      <button\n        type=\"button\"\n        className=\"btnfun-hand inline-flex items-center gap-2 border-[3px] border-[#1f2937] bg-[#fffdf5] px-7 py-3.5 text-sm font-bold text-[#1f2937] [border-radius:255px_15px_225px_15px/15px_225px_15px_255px] transition-colors duration-200 hover:bg-yellow-100 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1f2937]\"\n      >\n        <Pencil className=\"size-4\" />\n        {en ? \"Sketch\" : \"スケッチ\"}\n      </button>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"flex items-center justify-center rounded-2xl bg-[#fffdf5] p-8\">\n      <style>\n        @keyframes btnfun-sketch{0%,100%{border-radius:255px 15px 225px 15px/15px 225px 15px 255px}50%{border-radius:15px 225px 15px 255px/255px 15px 225px 15px}}.btnfun-hand:hover{animation:btnfun-sketch 1.4s ease-in-out infinite}\n      </style>\n      <button type=\"button\" class=\"btnfun-hand inline-flex items-center gap-2 border-[3px] border-[#1f2937] bg-[#fffdf5] px-7 py-3.5 text-sm font-bold text-[#1f2937] [border-radius:255px_15px_225px_15px/15px_225px_15px_255px] transition-colors duration-200 hover:bg-yellow-100 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1f2937]\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-pencil size-4\">\n          <path d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\">\n          </path>\n          <path d=\"m15 5 4 4\">\n          </path>\n        </svg>\n        スケッチ\n      </button>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"flex items-center justify-center rounded-2xl bg-[#fffdf5] p-8\">\n      <style>\n        @keyframes btnfun-sketch{0%,100%{border-radius:255px 15px 225px 15px/15px 225px 15px 255px}50%{border-radius:15px 225px 15px 255px/255px 15px 225px 15px}}.btnfun-hand:hover{animation:btnfun-sketch 1.4s ease-in-out infinite}\n      </style>\n      <button type=\"button\" class=\"btnfun-hand inline-flex items-center gap-2 border-[3px] border-[#1f2937] bg-[#fffdf5] px-7 py-3.5 text-sm font-bold text-[#1f2937] [border-radius:255px_15px_225px_15px/15px_225px_15px_255px] transition-colors duration-200 hover:bg-yellow-100 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1f2937]\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-pencil size-4\">\n          <path d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\">\n          </path>\n          <path d=\"m15 5 4 4\">\n          </path>\n        </svg>\n        スケッチ\n      </button>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "button-anim-arrow-slide-button",
@@ -413,7 +413,7 @@
       ],
       "standalone": true,
       "source": "import { ArrowRight } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"アロースライドボタン\",\n  category: \"ボタン演出\",\n  description: \"ホバーで矢印がスライドし、ラベルがずれて動くCTA。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"button\", \"animation\", \"arrow\", \"cta\"],\n};\n\nexport default function ArrowSlideButton() {\n  const en = typeof document !== \"undefined\" && document.documentElement.lang === \"en\";\n  return (\n    <div className=\"flex flex-col items-center gap-5\">\n      {/* 矢印が右へ滑る */}\n      <button className=\"group inline-flex items-center gap-2 rounded-full bg-white px-7 py-3 text-sm font-semibold text-neutral-900 shadow transition-transform duration-200 hover:scale-[1.03] active:scale-95\">\n        <span className=\"transition-transform duration-300 group-hover:-translate-x-0.5\">\n          {en ? \"Read more\" : \"続きを読む\"}\n        </span>\n        <ArrowRight className=\"transition-transform duration-300 group-hover:translate-x-1.5\" />\n      </button>\n\n      {/* 矢印が外から入ってくる */}\n      <button className=\"group relative inline-flex items-center overflow-hidden rounded-lg bg-indigo-600 px-7 py-3 text-sm font-semibold text-white transition-colors hover:bg-indigo-500\">\n        <span className=\"transition-transform duration-300 group-hover:-translate-x-3\">\n          {en ? \"Learn more\" : \"詳しく見る\"}\n        </span>\n        <ArrowRight className=\"absolute right-4 -translate-x-3 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100\" />\n      </button>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"flex flex-col items-center gap-5\">\n      <button class=\"group inline-flex items-center gap-2 rounded-full bg-white px-7 py-3 text-sm font-semibold text-neutral-900 shadow transition-transform duration-200 hover:scale-[1.03] active:scale-95\">\n        <span class=\"transition-transform duration-300 group-hover:-translate-x-0.5\">\n          続きを読む\n        </span>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right transition-transform duration-300 group-hover:translate-x-1.5\">\n          <path d=\"M5 12h14\">\n          </path>\n          <path d=\"m12 5 7 7-7 7\">\n          </path>\n        </svg>\n      </button>\n      <button class=\"group relative inline-flex items-center overflow-hidden rounded-lg bg-indigo-600 px-7 py-3 text-sm font-semibold text-white transition-colors hover:bg-indigo-500\">\n        <span class=\"transition-transform duration-300 group-hover:-translate-x-3\">\n          詳しく見る\n        </span>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right absolute right-4 -translate-x-3 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100\">\n          <path d=\"M5 12h14\">\n          </path>\n          <path d=\"m12 5 7 7-7 7\">\n          </path>\n        </svg>\n      </button>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"flex flex-col items-center gap-5\">\n      <button class=\"group inline-flex items-center gap-2 rounded-full bg-white px-7 py-3 text-sm font-semibold text-neutral-900 shadow transition-transform duration-200 hover:scale-[1.03] active:scale-95\">\n        <span class=\"transition-transform duration-300 group-hover:-translate-x-0.5\">\n          続きを読む\n        </span>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right transition-transform duration-300 group-hover:translate-x-1.5\">\n          <path d=\"M5 12h14\">\n          </path>\n          <path d=\"m12 5 7 7-7 7\">\n          </path>\n        </svg>\n      </button>\n      <button class=\"group relative inline-flex items-center overflow-hidden rounded-lg bg-indigo-600 px-7 py-3 text-sm font-semibold text-white transition-colors hover:bg-indigo-500\">\n        <span class=\"transition-transform duration-300 group-hover:-translate-x-3\">\n          詳しく見る\n        </span>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right absolute right-4 -translate-x-3 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100\">\n          <path d=\"M5 12h14\">\n          </path>\n          <path d=\"m12 5 7 7-7 7\">\n          </path>\n        </svg>\n      </button>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "button-anim-border-beam-button",
@@ -428,7 +428,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"ボーダービームボタン\",\n  category: \"ボタン演出\",\n  description: \"ボタンの縁を光のビームが一周し続けるボタン。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"button\", \"animation\", \"border\", \"beam\"],\n};\n\nexport default function BorderBeamButton() {\n  const en = typeof document !== \"undefined\" && document.documentElement.lang === \"en\";\n  return (\n    <div className=\"flex flex-col items-center gap-6\">\n      <style>{`\n        @keyframes ba-beam-spin {\n          to { transform: translate(-50%, -50%) rotate(1turn); }\n        }\n      `}</style>\n\n      <button className=\"group relative overflow-hidden rounded-xl bg-neutral-900 p-[1.5px] transition-transform duration-200 hover:scale-[1.03] active:scale-95\">\n        <span\n          className=\"absolute left-1/2 top-1/2 aspect-square w-[180%]\"\n          style={{\n            background:\n              \"conic-gradient(from 0deg, transparent 0%, transparent 75%, #38bdf8 88%, #818cf8 96%, transparent 100%)\",\n            animation: \"ba-beam-spin 3s linear infinite\",\n          }}\n        />\n        <span className=\"relative z-10 flex items-center justify-center rounded-[10px] bg-neutral-900 px-8 py-3 text-sm font-medium text-white\">\n          {en ? \"See the beam\" : \"ビームを見る\"}\n        </span>\n      </button>\n\n      <button className=\"group relative overflow-hidden rounded-full bg-neutral-900 p-[1.5px] transition-transform duration-200 hover:scale-[1.03] active:scale-95\">\n        <span\n          className=\"absolute left-1/2 top-1/2 aspect-square w-[200%]\"\n          style={{\n            background:\n              \"conic-gradient(from 0deg, transparent 0%, transparent 80%, #f472b6 90%, #fb923c 97%, transparent 100%)\",\n            animation: \"ba-beam-spin 2.4s linear infinite\",\n          }}\n        />\n        <span className=\"relative z-10 flex items-center justify-center rounded-full bg-neutral-900 px-7 py-2.5 text-sm font-medium text-pink-100\">\n          {en ? \"Grab attention\" : \"注目させる\"}\n        </span>\n      </button>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"flex flex-col items-center gap-6\">\n      <style>\n        @keyframes ba-beam-spin {\n              to { transform: translate(-50%, -50%) rotate(1turn); }\n            }\n      </style>\n      <button class=\"group relative overflow-hidden rounded-xl bg-neutral-900 p-[1.5px] transition-transform duration-200 hover:scale-[1.03] active:scale-95\">\n        <span class=\"absolute left-1/2 top-1/2 aspect-square w-[180%]\" style=\"background:conic-gradient(from 0deg, transparent 0%, transparent 75%, #38bdf8 88%, #818cf8 96%, transparent 100%);animation:ba-beam-spin 3s linear infinite\">\n        </span>\n        <span class=\"relative z-10 flex items-center justify-center rounded-[10px] bg-neutral-900 px-8 py-3 text-sm font-medium text-white\">\n          ビームを見る\n        </span>\n      </button>\n      <button class=\"group relative overflow-hidden rounded-full bg-neutral-900 p-[1.5px] transition-transform duration-200 hover:scale-[1.03] active:scale-95\">\n        <span class=\"absolute left-1/2 top-1/2 aspect-square w-[200%]\" style=\"background:conic-gradient(from 0deg, transparent 0%, transparent 80%, #f472b6 90%, #fb923c 97%, transparent 100%);animation:ba-beam-spin 2.4s linear infinite\">\n        </span>\n        <span class=\"relative z-10 flex items-center justify-center rounded-full bg-neutral-900 px-7 py-2.5 text-sm font-medium text-pink-100\">\n          注目させる\n        </span>\n      </button>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"flex flex-col items-center gap-6\">\n      <style>\n        @keyframes ba-beam-spin {\n              to { transform: translate(-50%, -50%) rotate(1turn); }\n            }\n      </style>\n      <button class=\"group relative overflow-hidden rounded-xl bg-neutral-900 p-[1.5px] transition-transform duration-200 hover:scale-[1.03] active:scale-95\">\n        <span class=\"absolute left-1/2 top-1/2 aspect-square w-[180%]\" style=\"background:conic-gradient(from 0deg, transparent 0%, transparent 75%, #38bdf8 88%, #818cf8 96%, transparent 100%);animation:ba-beam-spin 3s linear infinite\">\n        </span>\n        <span class=\"relative z-10 flex items-center justify-center rounded-[10px] bg-neutral-900 px-8 py-3 text-sm font-medium text-white\">\n          ビームを見る\n        </span>\n      </button>\n      <button class=\"group relative overflow-hidden rounded-full bg-neutral-900 p-[1.5px] transition-transform duration-200 hover:scale-[1.03] active:scale-95\">\n        <span class=\"absolute left-1/2 top-1/2 aspect-square w-[200%]\" style=\"background:conic-gradient(from 0deg, transparent 0%, transparent 80%, #f472b6 90%, #fb923c 97%, transparent 100%);animation:ba-beam-spin 2.4s linear infinite\">\n        </span>\n        <span class=\"relative z-10 flex items-center justify-center rounded-full bg-neutral-900 px-7 py-2.5 text-sm font-medium text-pink-100\">\n          注目させる\n        </span>\n      </button>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "button-anim-glow-pulse-button",
@@ -442,7 +442,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"グロウパルスボタン\",\n  category: \"ボタン演出\",\n  description: \"呼吸するように光のグロウが脈打つボタン。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"button\", \"animation\", \"glow\"],\n};\n\nexport default function GlowPulseButton() {\n  const en = typeof document !== \"undefined\" && document.documentElement.lang === \"en\";\n  return (\n    <div className=\"flex flex-col items-center gap-6\">\n      <style>{`\n        @keyframes ba-glow-pulse {\n          0%, 100% { box-shadow: 0 0 12px 0 rgba(168,85,247,0.55); }\n          50% { box-shadow: 0 0 32px 6px rgba(168,85,247,0.85); }\n        }\n        @keyframes ba-glow-pulse-c {\n          0%, 100% { box-shadow: 0 0 12px 0 rgba(34,211,238,0.5); }\n          50% { box-shadow: 0 0 30px 5px rgba(34,211,238,0.85); }\n        }\n      `}</style>\n\n      <button\n        className=\"rounded-full bg-purple-600 px-8 py-3 text-sm font-semibold text-white transition-transform duration-200 hover:scale-105 active:scale-95\"\n        style={{ animation: \"ba-glow-pulse 2s ease-in-out infinite\" }}\n      >\n        {en ? \"Power on\" : \"パワーオン\"}\n      </button>\n\n      <button\n        className=\"rounded-lg bg-cyan-500 px-7 py-2.5 text-sm font-semibold text-neutral-950 transition-transform duration-200 hover:scale-105 active:scale-95\"\n        style={{ animation: \"ba-glow-pulse-c 2.4s ease-in-out infinite\" }}\n      >\n        {en ? \"Connect\" : \"接続する\"}\n      </button>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"flex flex-col items-center gap-6\">\n      <style>\n        @keyframes ba-glow-pulse {\n              0%, 100% { box-shadow: 0 0 12px 0 rgba(168,85,247,0.55); }\n              50% { box-shadow: 0 0 32px 6px rgba(168,85,247,0.85); }\n            }\n            @keyframes ba-glow-pulse-c {\n              0%, 100% { box-shadow: 0 0 12px 0 rgba(34,211,238,0.5); }\n              50% { box-shadow: 0 0 30px 5px rgba(34,211,238,0.85); }\n            }\n      </style>\n      <button class=\"rounded-full bg-purple-600 px-8 py-3 text-sm font-semibold text-white transition-transform duration-200 hover:scale-105 active:scale-95\" style=\"animation:ba-glow-pulse 2s ease-in-out infinite\">\n        パワーオン\n      </button>\n      <button class=\"rounded-lg bg-cyan-500 px-7 py-2.5 text-sm font-semibold text-neutral-950 transition-transform duration-200 hover:scale-105 active:scale-95\" style=\"animation:ba-glow-pulse-c 2.4s ease-in-out infinite\">\n        接続する\n      </button>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"flex flex-col items-center gap-6\">\n      <style>\n        @keyframes ba-glow-pulse {\n              0%, 100% { box-shadow: 0 0 12px 0 rgba(168,85,247,0.55); }\n              50% { box-shadow: 0 0 32px 6px rgba(168,85,247,0.85); }\n            }\n            @keyframes ba-glow-pulse-c {\n              0%, 100% { box-shadow: 0 0 12px 0 rgba(34,211,238,0.5); }\n              50% { box-shadow: 0 0 30px 5px rgba(34,211,238,0.85); }\n            }\n      </style>\n      <button class=\"rounded-full bg-purple-600 px-8 py-3 text-sm font-semibold text-white transition-transform duration-200 hover:scale-105 active:scale-95\" style=\"animation:ba-glow-pulse 2s ease-in-out infinite\">\n        パワーオン\n      </button>\n      <button class=\"rounded-lg bg-cyan-500 px-7 py-2.5 text-sm font-semibold text-neutral-950 transition-transform duration-200 hover:scale-105 active:scale-95\" style=\"animation:ba-glow-pulse-c 2.4s ease-in-out infinite\">\n        接続する\n      </button>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "button-anim-gooey-button",
@@ -456,7 +456,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"グーイボタン\",\n  category: \"ボタン演出\",\n  description: \"SVGフィルターでブロブが溶け合うグーイなホバー演出ボタン。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"button\", \"animation\", \"gooey\"],\n};\n\nexport default function GooeyButton() {\n  const en = typeof document !== \"undefined\" && document.documentElement.lang === \"en\";\n  return (\n    <div className=\"py-6\">\n      <style>{`\n        @keyframes ba-gooey-float {\n          0%, 100% { transform: translate(0, 0) scale(1); }\n          50% { transform: translate(0, -6px) scale(1.08); }\n        }\n      `}</style>\n\n      {/* SVG goo filter */}\n      <svg className=\"absolute h-0 w-0\" aria-hidden=\"true\">\n        <defs>\n          <filter id=\"ba-goo\">\n            <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"8\" result=\"blur\" />\n            <feColorMatrix\n              in=\"blur\"\n              mode=\"matrix\"\n              values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10\"\n              result=\"goo\"\n            />\n            <feBlend in=\"SourceGraphic\" in2=\"goo\" />\n          </filter>\n        </defs>\n      </svg>\n\n      <button className=\"group relative inline-flex items-center justify-center\">\n        {/* goo layer */}\n        <span\n          className=\"absolute inset-0 flex items-center justify-center\"\n          style={{ filter: \"url(#ba-goo)\" }}\n        >\n          <span className=\"h-12 w-40 rounded-full bg-violet-600\" />\n          <span\n            className=\"absolute left-3 h-9 w-9 rounded-full bg-violet-600 opacity-0 transition-all duration-500 group-hover:left-[-6px] group-hover:opacity-100\"\n            style={{ animation: \"ba-gooey-float 2s ease-in-out infinite\" }}\n          />\n          <span\n            className=\"absolute right-3 h-9 w-9 rounded-full bg-violet-600 opacity-0 transition-all duration-500 group-hover:right-[-6px] group-hover:opacity-100\"\n            style={{ animation: \"ba-gooey-float 2.4s ease-in-out 0.3s infinite\" }}\n          />\n        </span>\n        <span className=\"relative z-10 px-10 py-3 text-sm font-semibold text-white\">\n          {en ? \"Hover to melt\" : \"ホバーで溶ける\"}\n        </span>\n      </button>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"py-6\">\n      <style>\n        @keyframes ba-gooey-float {\n              0%, 100% { transform: translate(0, 0) scale(1); }\n              50% { transform: translate(0, -6px) scale(1.08); }\n            }\n      </style>\n      <svg class=\"absolute h-0 w-0\" aria-hidden=\"true\">\n        <defs>\n          <filter id=\"ba-goo\">\n            <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"8\" result=\"blur\">\n            </feGaussianBlur>\n            <feColorMatrix in=\"blur\" mode=\"matrix\" values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10\" result=\"goo\">\n            </feColorMatrix>\n            <feBlend in=\"SourceGraphic\" in2=\"goo\">\n            </feBlend>\n          </filter>\n        </defs>\n      </svg>\n      <button class=\"group relative inline-flex items-center justify-center\">\n        <span class=\"absolute inset-0 flex items-center justify-center\" style=\"filter:url(#ba-goo)\">\n          <span class=\"h-12 w-40 rounded-full bg-violet-600\">\n          </span>\n          <span class=\"absolute left-3 h-9 w-9 rounded-full bg-violet-600 opacity-0 transition-all duration-500 group-hover:left-[-6px] group-hover:opacity-100\" style=\"animation:ba-gooey-float 2s ease-in-out infinite\">\n          </span>\n          <span class=\"absolute right-3 h-9 w-9 rounded-full bg-violet-600 opacity-0 transition-all duration-500 group-hover:right-[-6px] group-hover:opacity-100\" style=\"animation:ba-gooey-float 2.4s ease-in-out 0.3s infinite\">\n          </span>\n        </span>\n        <span class=\"relative z-10 px-10 py-3 text-sm font-semibold text-white\">\n          ホバーで溶ける\n        </span>\n      </button>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"py-6\">\n      <style>\n        @keyframes ba-gooey-float {\n              0%, 100% { transform: translate(0, 0) scale(1); }\n              50% { transform: translate(0, -6px) scale(1.08); }\n            }\n      </style>\n      <svg class=\"absolute h-0 w-0\" aria-hidden=\"true\">\n        <defs>\n          <filter id=\"ba-goo\">\n            <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"8\" result=\"blur\">\n            </feGaussianBlur>\n            <feColorMatrix in=\"blur\" mode=\"matrix\" values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10\" result=\"goo\">\n            </feColorMatrix>\n            <feBlend in=\"SourceGraphic\" in2=\"goo\">\n            </feBlend>\n          </filter>\n        </defs>\n      </svg>\n      <button class=\"group relative inline-flex items-center justify-center\">\n        <span class=\"absolute inset-0 flex items-center justify-center\" style=\"filter:url(#ba-goo)\">\n          <span class=\"h-12 w-40 rounded-full bg-violet-600\">\n          </span>\n          <span class=\"absolute left-3 h-9 w-9 rounded-full bg-violet-600 opacity-0 transition-all duration-500 group-hover:left-[-6px] group-hover:opacity-100\" style=\"animation:ba-gooey-float 2s ease-in-out infinite\">\n          </span>\n          <span class=\"absolute right-3 h-9 w-9 rounded-full bg-violet-600 opacity-0 transition-all duration-500 group-hover:right-[-6px] group-hover:opacity-100\" style=\"animation:ba-gooey-float 2.4s ease-in-out 0.3s infinite\">\n          </span>\n        </span>\n        <span class=\"relative z-10 px-10 py-3 text-sm font-semibold text-white\">\n          ホバーで溶ける\n        </span>\n      </button>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "card-anim-border-beam-card",
@@ -472,7 +472,7 @@
       ],
       "standalone": true,
       "source": "import { Zap } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"ボーダービームカード\",\n  category: \"カード演出\",\n  description: \"一筋の光のビームがカードの縁を offset-path で周回する。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"card\", \"hover\", \"animation\", \"border\", \"beam\"],\n};\n\nexport default function BorderBeamCard() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <div className=\"relative w-full max-w-sm overflow-hidden rounded-2xl border border-white/10 bg-[#0b0d17] p-7 text-slate-200 shadow-2xl shadow-black/40\">\n      <style>{`\n        @keyframes bbc-travel {\n          to { offset-distance: 100%; }\n        }\n        .bbc-beam {\n          offset-path: rect(0 100% 100% 0 round 16px);\n          offset-distance: 0%;\n          animation: bbc-travel 4s linear infinite;\n        }\n      `}</style>\n      {/* traveling beam */}\n      <span className=\"bbc-beam pointer-events-none absolute left-0 top-0 size-16 -translate-x-1/2 -translate-y-1/2 rounded-full bg-[radial-gradient(circle,rgba(56,189,248,0.9),transparent_70%)] blur-[2px]\" />\n      <div className=\"relative\">\n        <span className=\"inline-flex size-11 items-center justify-center rounded-xl border border-white/10 bg-white/5\">\n          <Zap className=\"size-5 text-sky-300\" />\n        </span>\n        <h3 className=\"mt-5 text-lg font-semibold text-white\">{en ? \"Border Beam\" : \"ボーダー・ビーム\"}</h3>\n        <p className=\"mt-2 text-sm leading-relaxed text-slate-400\">\n          {en\n            ? \"A single point of light traces the border continuously — a perpetual animation that loops smoothly along an offset-path.\"\n            : \"一点の光が枠線をなぞり続けます。offset-path で滑らかに周回する常時アニメーション。\"}\n        </p>\n        <div className=\"mt-6 flex items-center justify-between border-t border-white/5 pt-4\">\n          <span className=\"font-mono text-xs text-slate-500\">live</span>\n          <span className=\"text-sm font-medium text-sky-300\">{en ? \"Connect →\" : \"接続 →\"}</span>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"relative w-full max-w-sm overflow-hidden rounded-2xl border border-white/10 bg-[#0b0d17] p-7 text-slate-200 shadow-2xl shadow-black/40\">\n      <style>\n        @keyframes bbc-travel {\n              to { offset-distance: 100%; }\n            }\n            .bbc-beam {\n              offset-path: rect(0 100% 100% 0 round 16px);\n              offset-distance: 0%;\n              animation: bbc-travel 4s linear infinite;\n            }\n      </style>\n      <span class=\"bbc-beam pointer-events-none absolute left-0 top-0 size-16 -translate-x-1/2 -translate-y-1/2 rounded-full bg-[radial-gradient(circle,rgba(56,189,248,0.9),transparent_70%)] blur-[2px]\">\n      </span>\n      <div class=\"relative\">\n        <span class=\"inline-flex size-11 items-center justify-center rounded-xl border border-white/10 bg-white/5\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-zap size-5 text-sky-300\">\n            <path d=\"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z\">\n            </path>\n          </svg>\n        </span>\n        <h3 class=\"mt-5 text-lg font-semibold text-white\">\n          ボーダー・ビーム\n        </h3>\n        <p class=\"mt-2 text-sm leading-relaxed text-slate-400\">\n          一点の光が枠線をなぞり続けます。offset-path で滑らかに周回する常時アニメーション。\n        </p>\n        <div class=\"mt-6 flex items-center justify-between border-t border-white/5 pt-4\">\n          <span class=\"font-mono text-xs text-slate-500\">\n            live\n          </span>\n          <span class=\"text-sm font-medium text-sky-300\">\n            接続 →\n          </span>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"relative w-full max-w-sm overflow-hidden rounded-2xl border border-white/10 bg-[#0b0d17] p-7 text-slate-200 shadow-2xl shadow-black/40\">\n      <style>\n        @keyframes bbc-travel {\n              to { offset-distance: 100%; }\n            }\n            .bbc-beam {\n              offset-path: rect(0 100% 100% 0 round 16px);\n              offset-distance: 0%;\n              animation: bbc-travel 4s linear infinite;\n            }\n      </style>\n      <span class=\"bbc-beam pointer-events-none absolute left-0 top-0 size-16 -translate-x-1/2 -translate-y-1/2 rounded-full bg-[radial-gradient(circle,rgba(56,189,248,0.9),transparent_70%)] blur-[2px]\">\n      </span>\n      <div class=\"relative\">\n        <span class=\"inline-flex size-11 items-center justify-center rounded-xl border border-white/10 bg-white/5\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-zap size-5 text-sky-300\">\n            <path d=\"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z\">\n            </path>\n          </svg>\n        </span>\n        <h3 class=\"mt-5 text-lg font-semibold text-white\">\n          ボーダー・ビーム\n        </h3>\n        <p class=\"mt-2 text-sm leading-relaxed text-slate-400\">\n          一点の光が枠線をなぞり続けます。offset-path で滑らかに周回する常時アニメーション。\n        </p>\n        <div class=\"mt-6 flex items-center justify-between border-t border-white/5 pt-4\">\n          <span class=\"font-mono text-xs text-slate-500\">\n            live\n          </span>\n          <span class=\"text-sm font-medium text-sky-300\">\n            接続 →\n          </span>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "card-anim-expand-image-card",
@@ -488,7 +488,7 @@
       ],
       "standalone": true,
       "source": "import { MapPin, ArrowUpRight } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"拡大イメージカード\",\n  category: \"カード演出\",\n  description: \"グラデーション製の「画像」がホバーでズームし、文字が下から現れる。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"card\", \"hover\", \"animation\", \"image\", \"zoom\"],\n};\n\nexport default function ExpandImageCard() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <div className=\"group relative h-72 w-full max-w-sm overflow-hidden rounded-2xl border border-white/10 shadow-2xl shadow-black/40\">\n      {/* gradient \"image\" */}\n      <div className=\"absolute inset-0 scale-100 bg-[radial-gradient(circle_at_30%_20%,#f97316,transparent_55%),radial-gradient(circle_at_80%_70%,#db2777,transparent_55%),linear-gradient(135deg,#312e81,#0b0d17)] transition-transform duration-700 ease-out group-hover:scale-110\" />\n      <div className=\"absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent\" />\n\n      <div className=\"relative flex h-full flex-col justify-end p-6 text-white\">\n        <span className=\"inline-flex w-fit items-center gap-1.5 rounded-full bg-white/15 px-2.5 py-1 text-xs backdrop-blur-sm\">\n          <MapPin className=\"size-3.5\" /> {en ? \"Kyoto\" : \"京都\"}\n        </span>\n        {/* rising overlay text */}\n        <div className=\"translate-y-3 transition-transform duration-500 ease-out group-hover:translate-y-0\">\n          <h3 className=\"mt-3 text-xl font-semibold\">\n            {en ? \"Sunset over the old capital\" : \"古都の夕景\"}\n          </h3>\n          <p className=\"mt-1 max-h-0 overflow-hidden text-sm leading-relaxed text-white/80 opacity-0 transition-all duration-500 group-hover:max-h-20 group-hover:opacity-100\">\n            {en\n              ? \"On hover, the background slowly zooms and the description rises into view.\"\n              : \"ホバーで背景がゆっくりズームし、説明文がせり上がって表示されます。\"}\n          </p>\n          <span className=\"mt-3 inline-flex items-center gap-1 text-sm font-medium text-amber-300\">\n            {en ? \"View itinerary\" : \"旅程を見る\"} <ArrowUpRight className=\"size-4\" />\n          </span>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"group relative h-72 w-full max-w-sm overflow-hidden rounded-2xl border border-white/10 shadow-2xl shadow-black/40\">\n      <div class=\"absolute inset-0 scale-100 bg-[radial-gradient(circle_at_30%_20%,#f97316,transparent_55%),radial-gradient(circle_at_80%_70%,#db2777,transparent_55%),linear-gradient(135deg,#312e81,#0b0d17)] transition-transform duration-700 ease-out group-hover:scale-110\">\n      </div>\n      <div class=\"absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent\">\n      </div>\n      <div class=\"relative flex h-full flex-col justify-end p-6 text-white\">\n        <span class=\"inline-flex w-fit items-center gap-1.5 rounded-full bg-white/15 px-2.5 py-1 text-xs backdrop-blur-sm\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-map-pin size-3.5\">\n            <path d=\"M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0\">\n            </path>\n            <circle cx=\"12\" cy=\"10\" r=\"3\">\n            </circle>\n          </svg>\n          京都\n        </span>\n        <div class=\"translate-y-3 transition-transform duration-500 ease-out group-hover:translate-y-0\">\n          <h3 class=\"mt-3 text-xl font-semibold\">\n            古都の夕景\n          </h3>\n          <p class=\"mt-1 max-h-0 overflow-hidden text-sm leading-relaxed text-white/80 opacity-0 transition-all duration-500 group-hover:max-h-20 group-hover:opacity-100\">\n            ホバーで背景がゆっくりズームし、説明文がせり上がって表示されます。\n          </p>\n          <span class=\"mt-3 inline-flex items-center gap-1 text-sm font-medium text-amber-300\">\n            旅程を見る\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-up-right size-4\">\n              <path d=\"M7 7h10v10\">\n              </path>\n              <path d=\"M7 17 17 7\">\n              </path>\n            </svg>\n          </span>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"group relative h-72 w-full max-w-sm overflow-hidden rounded-2xl border border-white/10 shadow-2xl shadow-black/40\">\n      <div class=\"absolute inset-0 scale-100 bg-[radial-gradient(circle_at_30%_20%,#f97316,transparent_55%),radial-gradient(circle_at_80%_70%,#db2777,transparent_55%),linear-gradient(135deg,#312e81,#0b0d17)] transition-transform duration-700 ease-out group-hover:scale-110\">\n      </div>\n      <div class=\"absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent\">\n      </div>\n      <div class=\"relative flex h-full flex-col justify-end p-6 text-white\">\n        <span class=\"inline-flex w-fit items-center gap-1.5 rounded-full bg-white/15 px-2.5 py-1 text-xs backdrop-blur-sm\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-map-pin size-3.5\">\n            <path d=\"M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0\">\n            </path>\n            <circle cx=\"12\" cy=\"10\" r=\"3\">\n            </circle>\n          </svg>\n          京都\n        </span>\n        <div class=\"translate-y-3 transition-transform duration-500 ease-out group-hover:translate-y-0\">\n          <h3 class=\"mt-3 text-xl font-semibold\">\n            古都の夕景\n          </h3>\n          <p class=\"mt-1 max-h-0 overflow-hidden text-sm leading-relaxed text-white/80 opacity-0 transition-all duration-500 group-hover:max-h-20 group-hover:opacity-100\">\n            ホバーで背景がゆっくりズームし、説明文がせり上がって表示されます。\n          </p>\n          <span class=\"mt-3 inline-flex items-center gap-1 text-sm font-medium text-amber-300\">\n            旅程を見る\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-up-right size-4\">\n              <path d=\"M7 7h10v10\">\n              </path>\n              <path d=\"M7 17 17 7\">\n              </path>\n            </svg>\n          </span>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "card-anim-flip-card",
@@ -504,7 +504,7 @@
       ],
       "standalone": true,
       "source": "import { CreditCard, Wifi } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"フリップカード\",\n  category: \"カード演出\",\n  description: \"ホバーで表裏が3D回転して切り替わるカード（backface-hidden）。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"card\", \"hover\", \"animation\", \"flip\", \"3d\"],\n};\n\nexport default function FlipCard() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <div className=\"group h-56 w-full max-w-sm [perspective:1200px]\">\n      <div className=\"relative h-full w-full transition-transform duration-700 ease-out [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]\">\n        {/* Front */}\n        <div className=\"absolute inset-0 flex flex-col justify-between rounded-2xl border border-white/10 bg-gradient-to-br from-indigo-600 to-violet-800 p-6 text-white shadow-2xl shadow-black/40 [backface-visibility:hidden]\">\n          <div className=\"flex items-center justify-between\">\n            <CreditCard className=\"size-7\" />\n            <Wifi className=\"size-5 rotate-90 opacity-80\" />\n          </div>\n          <div>\n            <p className=\"font-mono text-lg tracking-[0.2em]\">•••• •••• •••• 4921</p>\n            <p className=\"mt-2 text-xs uppercase tracking-wider text-white/70\">Aurora Bank</p>\n          </div>\n        </div>\n        {/* Back */}\n        <div className=\"absolute inset-0 flex flex-col justify-between rounded-2xl border border-white/10 bg-[#0b0d17] p-6 text-slate-200 shadow-2xl shadow-black/40 [backface-visibility:hidden] [transform:rotateY(180deg)]\">\n          <div className=\"-mx-6 mt-2 h-10 bg-black/60\" />\n          <div>\n            <div className=\"flex items-center justify-between rounded bg-white/5 px-3 py-2\">\n              <span className=\"text-xs text-slate-400\">CVV</span>\n              <span className=\"font-mono text-sm text-white\">•••</span>\n            </div>\n            <p className=\"mt-3 text-xs leading-relaxed text-slate-500\">\n              {en\n                ? \"Hover to reveal the back. A 3D rotation with hidden backface makes the flip feel natural.\"\n                : \"ホバーで裏面が表示されます。3D回転と裏面非表示で自然な反転を実現。\"}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"group h-56 w-full max-w-sm [perspective:1200px]\">\n      <div class=\"relative h-full w-full transition-transform duration-700 ease-out [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]\">\n        <div class=\"absolute inset-0 flex flex-col justify-between rounded-2xl border border-white/10 bg-gradient-to-br from-indigo-600 to-violet-800 p-6 text-white shadow-2xl shadow-black/40 [backface-visibility:hidden]\">\n          <div class=\"flex items-center justify-between\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-credit-card size-7\">\n              <rect width=\"20\" height=\"14\" x=\"2\" y=\"5\" rx=\"2\">\n              </rect>\n              <line x1=\"2\" x2=\"22\" y1=\"10\" y2=\"10\">\n              </line>\n            </svg>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-wifi size-5 rotate-90 opacity-80\">\n              <path d=\"M12 20h.01\">\n              </path>\n              <path d=\"M2 8.82a15 15 0 0 1 20 0\">\n              </path>\n              <path d=\"M5 12.859a10 10 0 0 1 14 0\">\n              </path>\n              <path d=\"M8.5 16.429a5 5 0 0 1 7 0\">\n              </path>\n            </svg>\n          </div>\n          <div>\n            <p class=\"font-mono text-lg tracking-[0.2em]\">\n              •••• •••• •••• 4921\n            </p>\n            <p class=\"mt-2 text-xs uppercase tracking-wider text-white/70\">\n              Aurora Bank\n            </p>\n          </div>\n        </div>\n        <div class=\"absolute inset-0 flex flex-col justify-between rounded-2xl border border-white/10 bg-[#0b0d17] p-6 text-slate-200 shadow-2xl shadow-black/40 [backface-visibility:hidden] [transform:rotateY(180deg)]\">\n          <div class=\"-mx-6 mt-2 h-10 bg-black/60\">\n          </div>\n          <div>\n            <div class=\"flex items-center justify-between rounded bg-white/5 px-3 py-2\">\n              <span class=\"text-xs text-slate-400\">\n                CVV\n              </span>\n              <span class=\"font-mono text-sm text-white\">\n                •••\n              </span>\n            </div>\n            <p class=\"mt-3 text-xs leading-relaxed text-slate-500\">\n              ホバーで裏面が表示されます。3D回転と裏面非表示で自然な反転を実現。\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"group h-56 w-full max-w-sm [perspective:1200px]\">\n      <div class=\"relative h-full w-full transition-transform duration-700 ease-out [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]\">\n        <div class=\"absolute inset-0 flex flex-col justify-between rounded-2xl border border-white/10 bg-gradient-to-br from-indigo-600 to-violet-800 p-6 text-white shadow-2xl shadow-black/40 [backface-visibility:hidden]\">\n          <div class=\"flex items-center justify-between\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-credit-card size-7\">\n              <rect width=\"20\" height=\"14\" x=\"2\" y=\"5\" rx=\"2\">\n              </rect>\n              <line x1=\"2\" x2=\"22\" y1=\"10\" y2=\"10\">\n              </line>\n            </svg>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-wifi size-5 rotate-90 opacity-80\">\n              <path d=\"M12 20h.01\">\n              </path>\n              <path d=\"M2 8.82a15 15 0 0 1 20 0\">\n              </path>\n              <path d=\"M5 12.859a10 10 0 0 1 14 0\">\n              </path>\n              <path d=\"M8.5 16.429a5 5 0 0 1 7 0\">\n              </path>\n            </svg>\n          </div>\n          <div>\n            <p class=\"font-mono text-lg tracking-[0.2em]\">\n              •••• •••• •••• 4921\n            </p>\n            <p class=\"mt-2 text-xs uppercase tracking-wider text-white/70\">\n              Aurora Bank\n            </p>\n          </div>\n        </div>\n        <div class=\"absolute inset-0 flex flex-col justify-between rounded-2xl border border-white/10 bg-[#0b0d17] p-6 text-slate-200 shadow-2xl shadow-black/40 [backface-visibility:hidden] [transform:rotateY(180deg)]\">\n          <div class=\"-mx-6 mt-2 h-10 bg-black/60\">\n          </div>\n          <div>\n            <div class=\"flex items-center justify-between rounded bg-white/5 px-3 py-2\">\n              <span class=\"text-xs text-slate-400\">\n                CVV\n              </span>\n              <span class=\"font-mono text-sm text-white\">\n                •••\n              </span>\n            </div>\n            <p class=\"mt-3 text-xs leading-relaxed text-slate-500\">\n              ホバーで裏面が表示されます。3D回転と裏面非表示で自然な反転を実現。\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "card-anim-gradient-border-card",
@@ -520,7 +520,7 @@
       ],
       "standalone": true,
       "source": "import { Rocket } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"回転グラデーション枠カード\",\n  category: \"カード演出\",\n  description: \"円錐グラデーションのビームが縁を回り続ける発光ボーダー。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"card\", \"hover\", \"animation\", \"border\", \"gradient\"],\n};\n\nexport default function GradientBorderCard() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <div className=\"group relative w-full max-w-sm overflow-hidden rounded-2xl p-[2px] shadow-2xl shadow-black/40\">\n      <style>{`\n        @keyframes gbc-spin { to { transform: rotate(1turn); } }\n      `}</style>\n      <span\n        className=\"pointer-events-none absolute left-1/2 top-1/2 -z-0 aspect-square w-[140%] -translate-x-1/2 -translate-y-1/2 opacity-70 transition-opacity duration-300 group-hover:opacity-100\"\n        style={{\n          background:\n            \"conic-gradient(from 0deg, transparent 0deg, #6366f1 60deg, #ec4899 120deg, transparent 180deg, transparent 360deg)\",\n          animation: \"gbc-spin 4s linear infinite\",\n        }}\n      />\n      <div className=\"relative z-10 rounded-[15px] bg-[#0b0d17] p-7 text-slate-200\">\n        <span className=\"inline-flex size-11 items-center justify-center rounded-xl border border-white/10 bg-white/5\">\n          <Rocket className=\"size-5 text-pink-300\" />\n        </span>\n        <h3 className=\"mt-5 text-lg font-semibold text-white\">\n          {en ? \"Rotating gradient border\" : \"回転グラデーション枠\"}\n        </h3>\n        <p className=\"mt-2 text-sm leading-relaxed text-slate-400\">\n          {en\n            ? \"A beam orbits the edge endlessly. On hover it glows brighter for a premium feel.\"\n            : \"縁をビームが絶えず周回します。ホバーで光量が増し、プレミアムな印象を強めます。\"}\n        </p>\n        <div className=\"mt-6 flex items-center justify-between border-t border-white/5 pt-4\">\n          <span className=\"font-mono text-xs text-slate-500\">animated</span>\n          <span className=\"text-sm font-medium text-pink-300\">\n            {en ? \"Upgrade →\" : \"アップグレード →\"}\n          </span>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"group relative w-full max-w-sm overflow-hidden rounded-2xl p-[2px] shadow-2xl shadow-black/40\">\n      <style>\n        @keyframes gbc-spin { to { transform: rotate(1turn); } }\n      </style>\n      <span class=\"pointer-events-none absolute left-1/2 top-1/2 -z-0 aspect-square w-[140%] -translate-x-1/2 -translate-y-1/2 opacity-70 transition-opacity duration-300 group-hover:opacity-100\" style=\"background:conic-gradient(from 0deg, transparent 0deg, #6366f1 60deg, #ec4899 120deg, transparent 180deg, transparent 360deg);animation:gbc-spin 4s linear infinite\">\n      </span>\n      <div class=\"relative z-10 rounded-[15px] bg-[#0b0d17] p-7 text-slate-200\">\n        <span class=\"inline-flex size-11 items-center justify-center rounded-xl border border-white/10 bg-white/5\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-rocket size-5 text-pink-300\">\n            <path d=\"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z\">\n            </path>\n            <path d=\"m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z\">\n            </path>\n            <path d=\"M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0\">\n            </path>\n            <path d=\"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5\">\n            </path>\n          </svg>\n        </span>\n        <h3 class=\"mt-5 text-lg font-semibold text-white\">\n          回転グラデーション枠\n        </h3>\n        <p class=\"mt-2 text-sm leading-relaxed text-slate-400\">\n          縁をビームが絶えず周回します。ホバーで光量が増し、プレミアムな印象を強めます。\n        </p>\n        <div class=\"mt-6 flex items-center justify-between border-t border-white/5 pt-4\">\n          <span class=\"font-mono text-xs text-slate-500\">\n            animated\n          </span>\n          <span class=\"text-sm font-medium text-pink-300\">\n            アップグレード →\n          </span>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"group relative w-full max-w-sm overflow-hidden rounded-2xl p-[2px] shadow-2xl shadow-black/40\">\n      <style>\n        @keyframes gbc-spin { to { transform: rotate(1turn); } }\n      </style>\n      <span class=\"pointer-events-none absolute left-1/2 top-1/2 -z-0 aspect-square w-[140%] -translate-x-1/2 -translate-y-1/2 opacity-70 transition-opacity duration-300 group-hover:opacity-100\" style=\"background:conic-gradient(from 0deg, transparent 0deg, #6366f1 60deg, #ec4899 120deg, transparent 180deg, transparent 360deg);animation:gbc-spin 4s linear infinite\">\n      </span>\n      <div class=\"relative z-10 rounded-[15px] bg-[#0b0d17] p-7 text-slate-200\">\n        <span class=\"inline-flex size-11 items-center justify-center rounded-xl border border-white/10 bg-white/5\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-rocket size-5 text-pink-300\">\n            <path d=\"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z\">\n            </path>\n            <path d=\"m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z\">\n            </path>\n            <path d=\"M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0\">\n            </path>\n            <path d=\"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5\">\n            </path>\n          </svg>\n        </span>\n        <h3 class=\"mt-5 text-lg font-semibold text-white\">\n          回転グラデーション枠\n        </h3>\n        <p class=\"mt-2 text-sm leading-relaxed text-slate-400\">\n          縁をビームが絶えず周回します。ホバーで光量が増し、プレミアムな印象を強めます。\n        </p>\n        <div class=\"mt-6 flex items-center justify-between border-t border-white/5 pt-4\">\n          <span class=\"font-mono text-xs text-slate-500\">\n            animated\n          </span>\n          <span class=\"text-sm font-medium text-pink-300\">\n            アップグレード →\n          </span>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "conversion-guarantee-badge",
@@ -534,7 +534,7 @@
       ],
       "standalone": true,
       "source": "import { Check, ShieldCheck } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"返金保証シール\",\n  category: \"コンバージョン\",\n  description:\n    \"購入リスクを取り除く、力強い全額返金保証のシール/カード。\",\n  align: \"center\",\n  level: \"advanced\",\n  isNew: true,\n  tags: [\"guarantee\", \"risk-reversal\", \"trust\"],\n  principle:\n    \"「効果がなければ全額返金」と売り手がリスクを肩代わりするリスク・リバーサルが、買い手の損する不安を消し、最後の購入障壁を取り除く。\",\n};\n\nconst POINTS = [\n  { ja: \"理由を問わず全額返金\", en: \"Full refund, no questions asked\" },\n  { ja: \"解約はワンクリック\", en: \"Cancel in one click\" },\n  { ja: \"手数料・違約金なし\", en: \"No fees, no penalties\" },\n];\n\nexport default function GuaranteeBadge() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <div className=\"w-full max-w-sm overflow-hidden rounded-2xl border bg-card p-6 text-center shadow-sm\">\n      {/* Seal */}\n      <div className=\"relative mx-auto grid size-28 place-items-center\">\n        <svg\n          viewBox=\"0 0 100 100\"\n          className=\"absolute inset-0 size-full animate-[spin_22s_linear_infinite] text-emerald-500/30\"\n          aria-hidden\n        >\n          <path\n            id=\"seal-ring\"\n            d=\"M50,50 m-38,0 a38,38 0 1,1 76,0 a38,38 0 1,1 -76,0\"\n            fill=\"none\"\n          />\n          <text className=\"fill-current text-[8.5px] font-semibold uppercase tracking-[0.32em]\">\n            <textPath href=\"#seal-ring\" startOffset=\"0\">\n              money back · 30 days · money back · 30 days ·\n            </textPath>\n          </text>\n        </svg>\n        <div className=\"grid size-20 place-items-center rounded-full bg-gradient-to-br from-emerald-500 to-teal-600 text-white shadow-lg shadow-emerald-500/30\">\n          <ShieldCheck className=\"size-9\" strokeWidth={2.2} />\n        </div>\n      </div>\n\n      <p className=\"mt-4 text-xs font-semibold uppercase tracking-widest text-emerald-500\">\n        {en ? \"100% satisfaction guarantee\" : \"100% 満足保証\"}\n      </p>\n      <h3 className=\"mt-1 text-xl font-semibold tracking-tight\">\n        {en ? \"30-day money-back guarantee\" : \"30日間 全額返金保証\"}\n      </h3>\n      <p className=\"mx-auto mt-2 max-w-[18rem] text-sm text-muted-foreground\">\n        {en\n          ? \"Try it risk-free. If you're not satisfied, we'll refund you in full within 30 days.\"\n          : \"まずはノーリスクでお試しください。ご満足いただけなければ、30日以内に全額お返しします。\"}\n      </p>\n\n      <ul className=\"mx-auto mt-5 flex max-w-[16rem] flex-col gap-2 text-left\">\n        {POINTS.map((p) => (\n          <li key={p.ja} className=\"flex items-center gap-2 text-sm\">\n            <span className=\"grid size-5 shrink-0 place-items-center rounded-full bg-emerald-500/15 text-emerald-500\">\n              <Check className=\"size-3\" strokeWidth={3} />\n            </span>\n            {en ? p.en : p.ja}\n          </li>\n        ))}\n      </ul>\n\n      <Button className=\"mt-6 w-full\">\n        {en ? \"Start risk-free\" : \"ノーリスクで始める\"}\n      </Button>\n      <p className=\"mt-2 text-[11px] text-muted-foreground\">\n        {en ? \"No credit card required.\" : \"クレジットカードは不要です。\"}\n      </p>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"w-full max-w-sm overflow-hidden rounded-2xl border bg-card p-6 text-center shadow-sm\">\n      <div class=\"relative mx-auto grid size-28 place-items-center\">\n        <svg viewBox=\"0 0 100 100\" class=\"absolute inset-0 size-full animate-[spin_22s_linear_infinite] text-emerald-500/30\" aria-hidden=\"true\">\n          <path id=\"seal-ring\" d=\"M50,50 m-38,0 a38,38 0 1,1 76,0 a38,38 0 1,1 -76,0\" fill=\"none\">\n          </path>\n          <text class=\"fill-current text-[8.5px] font-semibold uppercase tracking-[0.32em]\">\n            <textPath href=\"#seal-ring\" startOffset=\"0\">\n              money back · 30 days · money back · 30 days ·\n            </textPath>\n          </text>\n        </svg>\n        <div class=\"grid size-20 place-items-center rounded-full bg-gradient-to-br from-emerald-500 to-teal-600 text-white shadow-lg shadow-emerald-500/30\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-shield-check size-9\">\n            <path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\n            </path>\n            <path d=\"m9 12 2 2 4-4\">\n            </path>\n          </svg>\n        </div>\n      </div>\n      <p class=\"mt-4 text-xs font-semibold uppercase tracking-widest text-emerald-500\">\n        100% 満足保証\n      </p>\n      <h3 class=\"mt-1 text-xl font-semibold tracking-tight\">\n        30日間 全額返金保証\n      </h3>\n      <p class=\"mx-auto mt-2 max-w-[18rem] text-sm text-muted-foreground\">\n        まずはノーリスクでお試しください。ご満足いただけなければ、30日以内に全額お返しします。\n      </p>\n      <ul class=\"mx-auto mt-5 flex max-w-[16rem] flex-col gap-2 text-left\">\n        <li class=\"flex items-center gap-2 text-sm\">\n          <span class=\"grid size-5 shrink-0 place-items-center rounded-full bg-emerald-500/15 text-emerald-500\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3\">\n              <path d=\"M20 6 9 17l-5-5\">\n              </path>\n            </svg>\n          </span>\n          理由を問わず全額返金\n        </li>\n        <li class=\"flex items-center gap-2 text-sm\">\n          <span class=\"grid size-5 shrink-0 place-items-center rounded-full bg-emerald-500/15 text-emerald-500\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3\">\n              <path d=\"M20 6 9 17l-5-5\">\n              </path>\n            </svg>\n          </span>\n          解約はワンクリック\n        </li>\n        <li class=\"flex items-center gap-2 text-sm\">\n          <span class=\"grid size-5 shrink-0 place-items-center rounded-full bg-emerald-500/15 text-emerald-500\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3\">\n              <path d=\"M20 6 9 17l-5-5\">\n              </path>\n            </svg>\n          </span>\n          手数料・違約金なし\n        </li>\n      </ul>\n      <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 mt-6 w-full\">\n        ノーリスクで始める\n      </button>\n      <p class=\"mt-2 text-[11px] text-muted-foreground\">\n        クレジットカードは不要です。\n      </p>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"w-full max-w-sm overflow-hidden rounded-2xl border bg-card p-6 text-center shadow-sm\">\n      <div class=\"relative mx-auto grid size-28 place-items-center\">\n        <svg viewBox=\"0 0 100 100\" class=\"absolute inset-0 size-full animate-[spin_22s_linear_infinite] text-emerald-500/30\" aria-hidden=\"true\">\n          <path id=\"seal-ring\" d=\"M50,50 m-38,0 a38,38 0 1,1 76,0 a38,38 0 1,1 -76,0\" fill=\"none\">\n          </path>\n          <text class=\"fill-current text-[8.5px] font-semibold uppercase tracking-[0.32em]\">\n            <textPath href=\"#seal-ring\" startOffset=\"0\">\n              money back · 30 days · money back · 30 days ·\n            </textPath>\n          </text>\n        </svg>\n        <div class=\"grid size-20 place-items-center rounded-full bg-gradient-to-br from-emerald-500 to-teal-600 text-white shadow-lg shadow-emerald-500/30\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-shield-check size-9\">\n            <path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\n            </path>\n            <path d=\"m9 12 2 2 4-4\">\n            </path>\n          </svg>\n        </div>\n      </div>\n      <p class=\"mt-4 text-xs font-semibold uppercase tracking-widest text-emerald-500\">\n        100% 満足保証\n      </p>\n      <h3 class=\"mt-1 text-xl font-semibold tracking-tight\">\n        30日間 全額返金保証\n      </h3>\n      <p class=\"mx-auto mt-2 max-w-[18rem] text-sm text-muted-foreground\">\n        まずはノーリスクでお試しください。ご満足いただけなければ、30日以内に全額お返しします。\n      </p>\n      <ul class=\"mx-auto mt-5 flex max-w-[16rem] flex-col gap-2 text-left\">\n        <li class=\"flex items-center gap-2 text-sm\">\n          <span class=\"grid size-5 shrink-0 place-items-center rounded-full bg-emerald-500/15 text-emerald-500\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3\">\n              <path d=\"M20 6 9 17l-5-5\">\n              </path>\n            </svg>\n          </span>\n          理由を問わず全額返金\n        </li>\n        <li class=\"flex items-center gap-2 text-sm\">\n          <span class=\"grid size-5 shrink-0 place-items-center rounded-full bg-emerald-500/15 text-emerald-500\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3\">\n              <path d=\"M20 6 9 17l-5-5\">\n              </path>\n            </svg>\n          </span>\n          解約はワンクリック\n        </li>\n        <li class=\"flex items-center gap-2 text-sm\">\n          <span class=\"grid size-5 shrink-0 place-items-center rounded-full bg-emerald-500/15 text-emerald-500\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3\">\n              <path d=\"M20 6 9 17l-5-5\">\n              </path>\n            </svg>\n          </span>\n          手数料・違約金なし\n        </li>\n      </ul>\n      <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 mt-6 w-full\">\n        ノーリスクで始める\n      </button>\n      <p class=\"mt-2 text-[11px] text-muted-foreground\">\n        クレジットカードは不要です。\n      </p>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "conversion-testimonial-wall",
@@ -548,7 +548,7 @@
       ],
       "standalone": true,
       "source": "import { BadgeCheck, Star } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"推薦ウォール\",\n  category: \"コンバージョン\",\n  description:\n    \"アバター・評価・認証マーク付きの短い推薦を敷き詰めたグリッドウォール。\",\n  align: \"full\",\n  level: \"advanced\",\n  isNew: true,\n  tags: [\"social-proof\", \"testimonials\", \"reviews\"],\n  principle:\n    \"肯定的な声を「量」で見せる社会的証明が、一件あたりの説得力を超えて『これだけの人が満足している』という規模の安心を生み、懐疑を打ち消す。\",\n};\n\ntype Review = {\n  name: string;\n  roleJa: string;\n  roleEn: string;\n  textJa: string;\n  textEn: string;\n  hue: string;\n  rating: number;\n};\n\nconst REVIEWS: Review[] = [\n  { name: \"中村 由美\", roleJa: \"プロダクトデザイナー\", roleEn: \"Product Designer\", textJa: \"導入初週でリリース速度が体感2倍。チームの空気まで変わった。\", textEn: \"Our release speed felt 2x in the first week. It even changed the team's mood.\", hue: \"from-rose-500 to-pink-500\", rating: 5 },\n  { name: \"James K.\", roleJa: \"エンジニアリード\", roleEn: \"Eng. Lead\", textJa: \"オンボーディングが驚くほどスムーズ。今年いちばんのツール選定だった。\", textEn: \"The onboarding was effortless. Best tool decision we made this year.\", hue: \"from-sky-500 to-indigo-500\", rating: 5 },\n  { name: \"高橋 蓮\", roleJa: \"スタートアップ創業者\", roleEn: \"Startup Founder\", textJa: \"解約しようとしたサービスを全部これに置き換えた。コスパが異常。\", textEn: \"I replaced every tool I was about to cancel with this. The value is unreal.\", hue: \"from-emerald-500 to-teal-500\", rating: 5 },\n  { name: \"Sofia M.\", roleJa: \"グロースPM\", roleEn: \"Growth PM\", textJa: \"導入後、料金ページのコンバージョンが18%向上した。\", textEn: \"Conversion on our pricing page jumped 18% after we shipped it.\", hue: \"from-amber-500 to-orange-500\", rating: 5 },\n  { name: \"小林 彩\", roleJa: \"マーケター\", roleEn: \"Marketer\", textJa: \"サポートの返信が早すぎて逆に申し訳ない。安心して任せられる。\", textEn: \"Support replies so fast I almost feel guilty. I can rely on them completely.\", hue: \"from-violet-500 to-fuchsia-500\", rating: 4 },\n  { name: \"Liam T.\", roleJa: \"インディーハッカー\", roleEn: \"Indie Hacker\", textJa: \"3つのツールを1つに統合できた。週末が自分のものに戻った。\", textEn: \"Replaced three tools with one. My weekends are mine again.\", hue: \"from-cyan-500 to-blue-500\", rating: 5 },\n];\n\nfunction initials(name: string) {\n  const p = name.trim().split(/\\s+/);\n  return (p[0]?.[0] ?? \"\") + (p[1]?.[0] ?? \"\");\n}\n\nexport default function TestimonialWall() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"w-full px-6 py-10\">\n      <div className=\"mx-auto max-w-5xl\">\n        <div className=\"mb-7 flex flex-col items-center gap-2 text-center\">\n          <div className=\"flex items-center gap-1 text-amber-400\">\n            {Array.from({ length: 5 }).map((_, i) => (\n              <Star key={i} className=\"size-4 fill-current\" />\n            ))}\n          </div>\n          <h2 className=\"text-balance text-2xl font-semibold tracking-tight\">\n            {en ? \"2,800+ five-star reviews\" : \"2,800件以上の高評価レビュー\"}\n          </h2>\n          <p className=\"text-sm text-muted-foreground\">\n            {en\n              ? \"Hear from the teams who use it every day.\"\n              : \"実際に使っているチームの声をご覧ください。\"}\n          </p>\n        </div>\n\n        <div className=\"columns-1 gap-4 sm:columns-2 lg:columns-3 [&>*]:mb-4\">\n          {REVIEWS.map((r) => (\n            <figure\n              key={r.name}\n              className=\"break-inside-avoid rounded-2xl border bg-card p-4 shadow-sm transition-colors hover:bg-muted/30\"\n            >\n              <div className=\"mb-2 flex items-center gap-1 text-amber-400\">\n                {Array.from({ length: 5 }).map((_, i) => (\n                  <Star\n                    key={i}\n                    className={cn(\n                      \"size-3.5\",\n                      i < r.rating ? \"fill-current\" : \"text-muted-foreground/30\"\n                    )}\n                  />\n                ))}\n              </div>\n              <blockquote className=\"text-sm leading-relaxed text-foreground/90\">\n                {en ? r.textEn : r.textJa}\n              </blockquote>\n              <figcaption className=\"mt-4 flex items-center gap-2.5\">\n                <span\n                  className={cn(\n                    \"grid size-9 shrink-0 place-items-center rounded-full bg-gradient-to-br text-xs font-semibold text-white\",\n                    r.hue\n                  )}\n                >\n                  {initials(r.name)}\n                </span>\n                <div className=\"min-w-0\">\n                  <p className=\"flex items-center gap-1 text-sm font-medium\">\n                    <span className=\"truncate\">{r.name}</span>\n                    <BadgeCheck className=\"size-3.5 shrink-0 text-sky-500\" />\n                  </p>\n                  <p className=\"truncate text-xs text-muted-foreground\">\n                    {en ? r.roleEn : r.roleJa}\n                  </p>\n                </div>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"w-full px-6 py-10\">\n      <div class=\"mx-auto max-w-5xl\">\n        <div class=\"mb-7 flex flex-col items-center gap-2 text-center\">\n          <div class=\"flex items-center gap-1 text-amber-400\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-4 fill-current\">\n              <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n              </path>\n            </svg>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-4 fill-current\">\n              <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n              </path>\n            </svg>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-4 fill-current\">\n              <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n              </path>\n            </svg>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-4 fill-current\">\n              <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n              </path>\n            </svg>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-4 fill-current\">\n              <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n              </path>\n            </svg>\n          </div>\n          <h2 class=\"text-balance text-2xl font-semibold tracking-tight\">\n            2,800件以上の高評価レビュー\n          </h2>\n          <p class=\"text-sm text-muted-foreground\">\n            実際に使っているチームの声をご覧ください。\n          </p>\n        </div>\n        <div class=\"columns-1 gap-4 sm:columns-2 lg:columns-3 [&amp;&gt;*]:mb-4\">\n          <figure class=\"break-inside-avoid rounded-2xl border bg-card p-4 shadow-sm transition-colors hover:bg-muted/30\">\n            <div class=\"mb-2 flex items-center gap-1 text-amber-400\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n            </div>\n            <blockquote class=\"text-sm leading-relaxed text-foreground/90\">\n              導入初週でリリース速度が体感2倍。チームの空気まで変わった。\n            </blockquote>\n            <figcaption class=\"mt-4 flex items-center gap-2.5\">\n              <span class=\"grid size-9 shrink-0 place-items-center rounded-full bg-gradient-to-br text-xs font-semibold text-white from-rose-500 to-pink-500\">\n                中由\n              </span>\n              <div class=\"min-w-0\">\n                <p class=\"flex items-center gap-1 text-sm font-medium\">\n                  <span class=\"truncate\">\n                    中村 由美\n                  </span>\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-badge-check size-3.5 shrink-0 text-sky-500\">\n                    <path d=\"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z\">\n                    </path>\n                    <path d=\"m9 12 2 2 4-4\">\n                    </path>\n                  </svg>\n                </p>\n                <p class=\"truncate text-xs text-muted-foreground\">\n                  プロダクトデザイナー\n                </p>\n              </div>\n            </figcaption>\n          </figure>\n          <figure class=\"break-inside-avoid rounded-2xl border bg-card p-4 shadow-sm transition-colors hover:bg-muted/30\">\n            <div class=\"mb-2 flex items-center gap-1 text-amber-400\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n            </div>\n            <blockquote class=\"text-sm leading-relaxed text-foreground/90\">\n              オンボーディングが驚くほどスムーズ。今年いちばんのツール選定だった。\n            </blockquote>\n            <figcaption class=\"mt-4 flex items-center gap-2.5\">\n              <span class=\"grid size-9 shrink-0 place-items-center rounded-full bg-gradient-to-br text-xs font-semibold text-white from-sky-500 to-indigo-500\">\n                JK\n              </span>\n              <div class=\"min-w-0\">\n                <p class=\"flex items-center gap-1 text-sm font-medium\">\n                  <span class=\"truncate\">\n                    James K.\n                  </span>\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-badge-check size-3.5 shrink-0 text-sky-500\">\n                    <path d=\"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z\">\n                    </path>\n                    <path d=\"m9 12 2 2 4-4\">\n                    </path>\n                  </svg>\n                </p>\n                <p class=\"truncate text-xs text-muted-foreground\">\n                  エンジニアリード\n                </p>\n              </div>\n            </figcaption>\n          </figure>\n          <figure class=\"break-inside-avoid rounded-2xl border bg-card p-4 shadow-sm transition-colors hover:bg-muted/30\">\n            <div class=\"mb-2 flex items-center gap-1 text-amber-400\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n            </div>\n            <blockquote class=\"text-sm leading-relaxed text-foreground/90\">\n              解約しようとしたサービスを全部これに置き換えた。コスパが異常。\n            </blockquote>\n            <figcaption class=\"mt-4 flex items-center gap-2.5\">\n              <span class=\"grid size-9 shrink-0 place-items-center rounded-full bg-gradient-to-br text-xs font-semibold text-white from-emerald-500 to-teal-500\">\n                高蓮\n              </span>\n              <div class=\"min-w-0\">\n                <p class=\"flex items-center gap-1 text-sm font-medium\">\n                  <span class=\"truncate\">\n                    高橋 蓮\n                  </span>\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-badge-check size-3.5 shrink-0 text-sky-500\">\n                    <path d=\"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z\">\n                    </path>\n                    <path d=\"m9 12 2 2 4-4\">\n                    </path>\n                  </svg>\n                </p>\n                <p class=\"truncate text-xs text-muted-foreground\">\n                  スタートアップ創業者\n                </p>\n              </div>\n            </figcaption>\n          </figure>\n          <figure class=\"break-inside-avoid rounded-2xl border bg-card p-4 shadow-sm transition-colors hover:bg-muted/30\">\n            <div class=\"mb-2 flex items-center gap-1 text-amber-400\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n            </div>\n            <blockquote class=\"text-sm leading-relaxed text-foreground/90\">\n              導入後、料金ページのコンバージョンが18%向上した。\n            </blockquote>\n            <figcaption class=\"mt-4 flex items-center gap-2.5\">\n              <span class=\"grid size-9 shrink-0 place-items-center rounded-full bg-gradient-to-br text-xs font-semibold text-white from-amber-500 to-orange-500\">\n                SM\n              </span>\n              <div class=\"min-w-0\">\n                <p class=\"flex items-center gap-1 text-sm font-medium\">\n                  <span class=\"truncate\">\n                    Sofia M.\n                  </span>\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-badge-check size-3.5 shrink-0 text-sky-500\">\n                    <path d=\"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z\">\n                    </path>\n                    <path d=\"m9 12 2 2 4-4\">\n                    </path>\n                  </svg>\n                </p>\n                <p class=\"truncate text-xs text-muted-foreground\">\n                  グロースPM\n                </p>\n              </div>\n            </figcaption>\n          </figure>\n          <figure class=\"break-inside-avoid rounded-2xl border bg-card p-4 shadow-sm transition-colors hover:bg-muted/30\">\n            <div class=\"mb-2 flex items-center gap-1 text-amber-400\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 text-muted-foreground/30\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n            </div>\n            <blockquote class=\"text-sm leading-relaxed text-foreground/90\">\n              サポートの返信が早すぎて逆に申し訳ない。安心して任せられる。\n            </blockquote>\n            <figcaption class=\"mt-4 flex items-center gap-2.5\">\n              <span class=\"grid size-9 shrink-0 place-items-center rounded-full bg-gradient-to-br text-xs font-semibold text-white from-violet-500 to-fuchsia-500\">\n                小彩\n              </span>\n              <div class=\"min-w-0\">\n                <p class=\"flex items-center gap-1 text-sm font-medium\">\n                  <span class=\"truncate\">\n                    小林 彩\n                  </span>\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-badge-check size-3.5 shrink-0 text-sky-500\">\n                    <path d=\"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z\">\n                    </path>\n                    <path d=\"m9 12 2 2 4-4\">\n                    </path>\n                  </svg>\n                </p>\n                <p class=\"truncate text-xs text-muted-foreground\">\n                  マーケター\n                </p>\n              </div>\n            </figcaption>\n          </figure>\n          <figure class=\"break-inside-avoid rounded-2xl border bg-card p-4 shadow-sm transition-colors hover:bg-muted/30\">\n            <div class=\"mb-2 flex items-center gap-1 text-amber-400\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n            </div>\n            <blockquote class=\"text-sm leading-relaxed text-foreground/90\">\n              3つのツールを1つに統合できた。週末が自分のものに戻った。\n            </blockquote>\n            <figcaption class=\"mt-4 flex items-center gap-2.5\">\n              <span class=\"grid size-9 shrink-0 place-items-center rounded-full bg-gradient-to-br text-xs font-semibold text-white from-cyan-500 to-blue-500\">\n                LT\n              </span>\n              <div class=\"min-w-0\">\n                <p class=\"flex items-center gap-1 text-sm font-medium\">\n                  <span class=\"truncate\">\n                    Liam T.\n                  </span>\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-badge-check size-3.5 shrink-0 text-sky-500\">\n                    <path d=\"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z\">\n                    </path>\n                    <path d=\"m9 12 2 2 4-4\">\n                    </path>\n                  </svg>\n                </p>\n                <p class=\"truncate text-xs text-muted-foreground\">\n                  インディーハッカー\n                </p>\n              </div>\n            </figcaption>\n          </figure>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"w-full px-6 py-10\">\n      <div class=\"mx-auto max-w-5xl\">\n        <div class=\"mb-7 flex flex-col items-center gap-2 text-center\">\n          <div class=\"flex items-center gap-1 text-amber-400\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-4 fill-current\">\n              <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n              </path>\n            </svg>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-4 fill-current\">\n              <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n              </path>\n            </svg>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-4 fill-current\">\n              <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n              </path>\n            </svg>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-4 fill-current\">\n              <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n              </path>\n            </svg>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-4 fill-current\">\n              <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n              </path>\n            </svg>\n          </div>\n          <h2 class=\"text-balance text-2xl font-semibold tracking-tight\">\n            2,800件以上の高評価レビュー\n          </h2>\n          <p class=\"text-sm text-muted-foreground\">\n            実際に使っているチームの声をご覧ください。\n          </p>\n        </div>\n        <div class=\"columns-1 gap-4 sm:columns-2 lg:columns-3 [&amp;&gt;*]:mb-4\">\n          <figure class=\"break-inside-avoid rounded-2xl border bg-card p-4 shadow-sm transition-colors hover:bg-muted/30\">\n            <div class=\"mb-2 flex items-center gap-1 text-amber-400\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n            </div>\n            <blockquote class=\"text-sm leading-relaxed text-foreground/90\">\n              導入初週でリリース速度が体感2倍。チームの空気まで変わった。\n            </blockquote>\n            <figcaption class=\"mt-4 flex items-center gap-2.5\">\n              <span class=\"grid size-9 shrink-0 place-items-center rounded-full bg-gradient-to-br text-xs font-semibold text-white from-rose-500 to-pink-500\">\n                中由\n              </span>\n              <div class=\"min-w-0\">\n                <p class=\"flex items-center gap-1 text-sm font-medium\">\n                  <span class=\"truncate\">\n                    中村 由美\n                  </span>\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-badge-check size-3.5 shrink-0 text-sky-500\">\n                    <path d=\"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z\">\n                    </path>\n                    <path d=\"m9 12 2 2 4-4\">\n                    </path>\n                  </svg>\n                </p>\n                <p class=\"truncate text-xs text-muted-foreground\">\n                  プロダクトデザイナー\n                </p>\n              </div>\n            </figcaption>\n          </figure>\n          <figure class=\"break-inside-avoid rounded-2xl border bg-card p-4 shadow-sm transition-colors hover:bg-muted/30\">\n            <div class=\"mb-2 flex items-center gap-1 text-amber-400\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n            </div>\n            <blockquote class=\"text-sm leading-relaxed text-foreground/90\">\n              オンボーディングが驚くほどスムーズ。今年いちばんのツール選定だった。\n            </blockquote>\n            <figcaption class=\"mt-4 flex items-center gap-2.5\">\n              <span class=\"grid size-9 shrink-0 place-items-center rounded-full bg-gradient-to-br text-xs font-semibold text-white from-sky-500 to-indigo-500\">\n                JK\n              </span>\n              <div class=\"min-w-0\">\n                <p class=\"flex items-center gap-1 text-sm font-medium\">\n                  <span class=\"truncate\">\n                    James K.\n                  </span>\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-badge-check size-3.5 shrink-0 text-sky-500\">\n                    <path d=\"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z\">\n                    </path>\n                    <path d=\"m9 12 2 2 4-4\">\n                    </path>\n                  </svg>\n                </p>\n                <p class=\"truncate text-xs text-muted-foreground\">\n                  エンジニアリード\n                </p>\n              </div>\n            </figcaption>\n          </figure>\n          <figure class=\"break-inside-avoid rounded-2xl border bg-card p-4 shadow-sm transition-colors hover:bg-muted/30\">\n            <div class=\"mb-2 flex items-center gap-1 text-amber-400\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n            </div>\n            <blockquote class=\"text-sm leading-relaxed text-foreground/90\">\n              解約しようとしたサービスを全部これに置き換えた。コスパが異常。\n            </blockquote>\n            <figcaption class=\"mt-4 flex items-center gap-2.5\">\n              <span class=\"grid size-9 shrink-0 place-items-center rounded-full bg-gradient-to-br text-xs font-semibold text-white from-emerald-500 to-teal-500\">\n                高蓮\n              </span>\n              <div class=\"min-w-0\">\n                <p class=\"flex items-center gap-1 text-sm font-medium\">\n                  <span class=\"truncate\">\n                    高橋 蓮\n                  </span>\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-badge-check size-3.5 shrink-0 text-sky-500\">\n                    <path d=\"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z\">\n                    </path>\n                    <path d=\"m9 12 2 2 4-4\">\n                    </path>\n                  </svg>\n                </p>\n                <p class=\"truncate text-xs text-muted-foreground\">\n                  スタートアップ創業者\n                </p>\n              </div>\n            </figcaption>\n          </figure>\n          <figure class=\"break-inside-avoid rounded-2xl border bg-card p-4 shadow-sm transition-colors hover:bg-muted/30\">\n            <div class=\"mb-2 flex items-center gap-1 text-amber-400\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n            </div>\n            <blockquote class=\"text-sm leading-relaxed text-foreground/90\">\n              導入後、料金ページのコンバージョンが18%向上した。\n            </blockquote>\n            <figcaption class=\"mt-4 flex items-center gap-2.5\">\n              <span class=\"grid size-9 shrink-0 place-items-center rounded-full bg-gradient-to-br text-xs font-semibold text-white from-amber-500 to-orange-500\">\n                SM\n              </span>\n              <div class=\"min-w-0\">\n                <p class=\"flex items-center gap-1 text-sm font-medium\">\n                  <span class=\"truncate\">\n                    Sofia M.\n                  </span>\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-badge-check size-3.5 shrink-0 text-sky-500\">\n                    <path d=\"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z\">\n                    </path>\n                    <path d=\"m9 12 2 2 4-4\">\n                    </path>\n                  </svg>\n                </p>\n                <p class=\"truncate text-xs text-muted-foreground\">\n                  グロースPM\n                </p>\n              </div>\n            </figcaption>\n          </figure>\n          <figure class=\"break-inside-avoid rounded-2xl border bg-card p-4 shadow-sm transition-colors hover:bg-muted/30\">\n            <div class=\"mb-2 flex items-center gap-1 text-amber-400\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 text-muted-foreground/30\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n            </div>\n            <blockquote class=\"text-sm leading-relaxed text-foreground/90\">\n              サポートの返信が早すぎて逆に申し訳ない。安心して任せられる。\n            </blockquote>\n            <figcaption class=\"mt-4 flex items-center gap-2.5\">\n              <span class=\"grid size-9 shrink-0 place-items-center rounded-full bg-gradient-to-br text-xs font-semibold text-white from-violet-500 to-fuchsia-500\">\n                小彩\n              </span>\n              <div class=\"min-w-0\">\n                <p class=\"flex items-center gap-1 text-sm font-medium\">\n                  <span class=\"truncate\">\n                    小林 彩\n                  </span>\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-badge-check size-3.5 shrink-0 text-sky-500\">\n                    <path d=\"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z\">\n                    </path>\n                    <path d=\"m9 12 2 2 4-4\">\n                    </path>\n                  </svg>\n                </p>\n                <p class=\"truncate text-xs text-muted-foreground\">\n                  マーケター\n                </p>\n              </div>\n            </figcaption>\n          </figure>\n          <figure class=\"break-inside-avoid rounded-2xl border bg-card p-4 shadow-sm transition-colors hover:bg-muted/30\">\n            <div class=\"mb-2 flex items-center gap-1 text-amber-400\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5 fill-current\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n            </div>\n            <blockquote class=\"text-sm leading-relaxed text-foreground/90\">\n              3つのツールを1つに統合できた。週末が自分のものに戻った。\n            </blockquote>\n            <figcaption class=\"mt-4 flex items-center gap-2.5\">\n              <span class=\"grid size-9 shrink-0 place-items-center rounded-full bg-gradient-to-br text-xs font-semibold text-white from-cyan-500 to-blue-500\">\n                LT\n              </span>\n              <div class=\"min-w-0\">\n                <p class=\"flex items-center gap-1 text-sm font-medium\">\n                  <span class=\"truncate\">\n                    Liam T.\n                  </span>\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-badge-check size-3.5 shrink-0 text-sky-500\">\n                    <path d=\"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z\">\n                    </path>\n                    <path d=\"m9 12 2 2 4-4\">\n                    </path>\n                  </svg>\n                </p>\n                <p class=\"truncate text-xs text-muted-foreground\">\n                  インディーハッカー\n                </p>\n              </div>\n            </figcaption>\n          </figure>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "conversion-trust-badges",
@@ -562,7 +562,7 @@
       ],
       "standalone": true,
       "source": "import { CreditCard, Headphones, RefreshCw, ShieldCheck } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"信頼バッジ列\",\n  category: \"コンバージョン\",\n  description:\n    \"SSL・返金保証・30日無料・24時間対応などの安心バッジを並べた帯。\",\n  align: \"full\",\n  level: \"advanced\",\n  isNew: true,\n  tags: [\"trust\", \"authority\", \"badges\"],\n  principle:\n    \"第三者保証や安全性の象徴を並べる権威の原理が、決済直前の知覚リスクを下げて安心感を与え、カート離脱を抑える。\",\n};\n\ntype Badge = {\n  icon: LucideIcon;\n  titleJa: string;\n  titleEn: string;\n  subJa: string;\n  subEn: string;\n  accent: string;\n};\n\nconst BADGES: Badge[] = [\n  {\n    icon: ShieldCheck,\n    titleJa: \"SSL 暗号化通信\",\n    titleEn: \"SSL Encrypted\",\n    subJa: \"256-bit セキュア決済\",\n    subEn: \"256-bit secure checkout\",\n    accent: \"text-emerald-500 bg-emerald-500/10\",\n  },\n  {\n    icon: RefreshCw,\n    titleJa: \"30日返金保証\",\n    titleEn: \"30-Day Refund\",\n    subJa: \"理由を問わず全額返金\",\n    subEn: \"Full refund, no questions\",\n    accent: \"text-sky-500 bg-sky-500/10\",\n  },\n  {\n    icon: CreditCard,\n    titleJa: \"カード不要トライアル\",\n    titleEn: \"No-Card Trial\",\n    subJa: \"30日間すべて無料\",\n    subEn: \"Everything free for 30 days\",\n    accent: \"text-violet-500 bg-violet-500/10\",\n  },\n  {\n    icon: Headphones,\n    titleJa: \"24時間サポート\",\n    titleEn: \"24-Hour Support\",\n    subJa: \"日本語で365日対応\",\n    subEn: \"Available 365 days a year\",\n    accent: \"text-amber-500 bg-amber-500/10\",\n  },\n];\n\nexport default function TrustBadges() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"w-full px-6 py-10\">\n      <div className=\"mx-auto max-w-5xl\">\n        <p className=\"mb-5 text-center text-xs font-medium uppercase tracking-widest text-muted-foreground\">\n          {en ? \"Shop with confidence\" : \"安心してご利用いただけます\"}\n        </p>\n        <div className=\"grid grid-cols-1 gap-3 rounded-2xl border bg-card p-3 sm:grid-cols-2 lg:grid-cols-4\">\n          {BADGES.map((b) => (\n            <div\n              key={b.titleJa}\n              className=\"flex items-center gap-3 rounded-xl px-3 py-3 transition-colors hover:bg-muted/50\"\n            >\n              <span\n                className={`grid size-11 shrink-0 place-items-center rounded-xl ${b.accent}`}\n              >\n                <b.icon className=\"size-5\" />\n              </span>\n              <div className=\"min-w-0\">\n                <p className=\"truncate text-sm font-semibold\">\n                  {en ? b.titleEn : b.titleJa}\n                </p>\n                <p className=\"truncate text-xs text-muted-foreground\">\n                  {en ? b.subEn : b.subJa}\n                </p>\n              </div>\n            </div>\n          ))}\n        </div>\n        <p className=\"mt-4 text-center text-xs text-muted-foreground\">\n          {en ? (\n            <>\n              Trusted by{\" \"}\n              <span className=\"font-semibold text-foreground\">12,400+</span>{\" \"}\n              companies. Average rating{\" \"}\n              <span className=\"font-semibold text-foreground\">4.9 / 5.0</span>\n            </>\n          ) : (\n            <>\n              すでに{\" \"}\n              <span className=\"font-semibold text-foreground\">12,400社</span>{\" \"}\n              以上が導入。平均満足度{\" \"}\n              <span className=\"font-semibold text-foreground\">4.9 / 5.0</span>\n            </>\n          )}\n        </p>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"w-full px-6 py-10\">\n      <div class=\"mx-auto max-w-5xl\">\n        <p class=\"mb-5 text-center text-xs font-medium uppercase tracking-widest text-muted-foreground\">\n          安心してご利用いただけます\n        </p>\n        <div class=\"grid grid-cols-1 gap-3 rounded-2xl border bg-card p-3 sm:grid-cols-2 lg:grid-cols-4\">\n          <div class=\"flex items-center gap-3 rounded-xl px-3 py-3 transition-colors hover:bg-muted/50\">\n            <span class=\"grid size-11 shrink-0 place-items-center rounded-xl text-emerald-500 bg-emerald-500/10\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-shield-check size-5\">\n                <path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\n                </path>\n                <path d=\"m9 12 2 2 4-4\">\n                </path>\n              </svg>\n            </span>\n            <div class=\"min-w-0\">\n              <p class=\"truncate text-sm font-semibold\">\n                SSL 暗号化通信\n              </p>\n              <p class=\"truncate text-xs text-muted-foreground\">\n                256-bit セキュア決済\n              </p>\n            </div>\n          </div>\n          <div class=\"flex items-center gap-3 rounded-xl px-3 py-3 transition-colors hover:bg-muted/50\">\n            <span class=\"grid size-11 shrink-0 place-items-center rounded-xl text-sky-500 bg-sky-500/10\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-refresh-cw size-5\">\n                <path d=\"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8\">\n                </path>\n                <path d=\"M21 3v5h-5\">\n                </path>\n                <path d=\"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16\">\n                </path>\n                <path d=\"M8 16H3v5\">\n                </path>\n              </svg>\n            </span>\n            <div class=\"min-w-0\">\n              <p class=\"truncate text-sm font-semibold\">\n                30日返金保証\n              </p>\n              <p class=\"truncate text-xs text-muted-foreground\">\n                理由を問わず全額返金\n              </p>\n            </div>\n          </div>\n          <div class=\"flex items-center gap-3 rounded-xl px-3 py-3 transition-colors hover:bg-muted/50\">\n            <span class=\"grid size-11 shrink-0 place-items-center rounded-xl text-violet-500 bg-violet-500/10\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-credit-card size-5\">\n                <rect width=\"20\" height=\"14\" x=\"2\" y=\"5\" rx=\"2\">\n                </rect>\n                <line x1=\"2\" x2=\"22\" y1=\"10\" y2=\"10\">\n                </line>\n              </svg>\n            </span>\n            <div class=\"min-w-0\">\n              <p class=\"truncate text-sm font-semibold\">\n                カード不要トライアル\n              </p>\n              <p class=\"truncate text-xs text-muted-foreground\">\n                30日間すべて無料\n              </p>\n            </div>\n          </div>\n          <div class=\"flex items-center gap-3 rounded-xl px-3 py-3 transition-colors hover:bg-muted/50\">\n            <span class=\"grid size-11 shrink-0 place-items-center rounded-xl text-amber-500 bg-amber-500/10\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-headphones size-5\">\n                <path d=\"M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3\">\n                </path>\n              </svg>\n            </span>\n            <div class=\"min-w-0\">\n              <p class=\"truncate text-sm font-semibold\">\n                24時間サポート\n              </p>\n              <p class=\"truncate text-xs text-muted-foreground\">\n                日本語で365日対応\n              </p>\n            </div>\n          </div>\n        </div>\n        <p class=\"mt-4 text-center text-xs text-muted-foreground\">\n          すでに\n          <span class=\"font-semibold text-foreground\">\n            12,400社\n          </span>\n          以上が導入。平均満足度\n          <span class=\"font-semibold text-foreground\">\n            4.9 / 5.0\n          </span>\n        </p>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"w-full px-6 py-10\">\n      <div class=\"mx-auto max-w-5xl\">\n        <p class=\"mb-5 text-center text-xs font-medium uppercase tracking-widest text-muted-foreground\">\n          安心してご利用いただけます\n        </p>\n        <div class=\"grid grid-cols-1 gap-3 rounded-2xl border bg-card p-3 sm:grid-cols-2 lg:grid-cols-4\">\n          <div class=\"flex items-center gap-3 rounded-xl px-3 py-3 transition-colors hover:bg-muted/50\">\n            <span class=\"grid size-11 shrink-0 place-items-center rounded-xl text-emerald-500 bg-emerald-500/10\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-shield-check size-5\">\n                <path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\n                </path>\n                <path d=\"m9 12 2 2 4-4\">\n                </path>\n              </svg>\n            </span>\n            <div class=\"min-w-0\">\n              <p class=\"truncate text-sm font-semibold\">\n                SSL 暗号化通信\n              </p>\n              <p class=\"truncate text-xs text-muted-foreground\">\n                256-bit セキュア決済\n              </p>\n            </div>\n          </div>\n          <div class=\"flex items-center gap-3 rounded-xl px-3 py-3 transition-colors hover:bg-muted/50\">\n            <span class=\"grid size-11 shrink-0 place-items-center rounded-xl text-sky-500 bg-sky-500/10\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-refresh-cw size-5\">\n                <path d=\"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8\">\n                </path>\n                <path d=\"M21 3v5h-5\">\n                </path>\n                <path d=\"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16\">\n                </path>\n                <path d=\"M8 16H3v5\">\n                </path>\n              </svg>\n            </span>\n            <div class=\"min-w-0\">\n              <p class=\"truncate text-sm font-semibold\">\n                30日返金保証\n              </p>\n              <p class=\"truncate text-xs text-muted-foreground\">\n                理由を問わず全額返金\n              </p>\n            </div>\n          </div>\n          <div class=\"flex items-center gap-3 rounded-xl px-3 py-3 transition-colors hover:bg-muted/50\">\n            <span class=\"grid size-11 shrink-0 place-items-center rounded-xl text-violet-500 bg-violet-500/10\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-credit-card size-5\">\n                <rect width=\"20\" height=\"14\" x=\"2\" y=\"5\" rx=\"2\">\n                </rect>\n                <line x1=\"2\" x2=\"22\" y1=\"10\" y2=\"10\">\n                </line>\n              </svg>\n            </span>\n            <div class=\"min-w-0\">\n              <p class=\"truncate text-sm font-semibold\">\n                カード不要トライアル\n              </p>\n              <p class=\"truncate text-xs text-muted-foreground\">\n                30日間すべて無料\n              </p>\n            </div>\n          </div>\n          <div class=\"flex items-center gap-3 rounded-xl px-3 py-3 transition-colors hover:bg-muted/50\">\n            <span class=\"grid size-11 shrink-0 place-items-center rounded-xl text-amber-500 bg-amber-500/10\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-headphones size-5\">\n                <path d=\"M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3\">\n                </path>\n              </svg>\n            </span>\n            <div class=\"min-w-0\">\n              <p class=\"truncate text-sm font-semibold\">\n                24時間サポート\n              </p>\n              <p class=\"truncate text-xs text-muted-foreground\">\n                日本語で365日対応\n              </p>\n            </div>\n          </div>\n        </div>\n        <p class=\"mt-4 text-center text-xs text-muted-foreground\">\n          すでに\n          <span class=\"font-semibold text-foreground\">\n            12,400社\n          </span>\n          以上が導入。平均満足度\n          <span class=\"font-semibold text-foreground\">\n            4.9 / 5.0\n          </span>\n        </p>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "darktech-dev-footer",
@@ -576,7 +576,7 @@
       ],
       "standalone": true,
       "source": "import { Hexagon, Github, Twitter, MessageCircle } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"デベロッパー・フッター\",\n  category: \"ダークテック\",\n  description: \"ドキュメントリンクをグループ化したダーク開発者フッター（ステータスピル付き）。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"dark\", \"developer\", \"tech\"],\n};\n\ntype Link = { ja: string; en: string };\nconst GROUPS: { id: string; titleJa: string; titleEn: string; links: Link[] }[] = [\n  {\n    id: \"product\",\n    titleJa: \"製品\",\n    titleEn: \"Product\",\n    links: [\n      { ja: \"概要\", en: \"Overview\" },\n      { ja: \"ランタイム\", en: \"Runtime\" },\n      { ja: \"CLI\", en: \"CLI\" },\n      { ja: \"価格\", en: \"Pricing\" },\n    ],\n  },\n  {\n    id: \"developers\",\n    titleJa: \"開発者\",\n    titleEn: \"Developers\",\n    links: [\n      { ja: \"ドキュメント\", en: \"Docs\" },\n      { ja: \"API リファレンス\", en: \"API reference\" },\n      { ja: \"SDK\", en: \"SDK\" },\n      { ja: \"変更履歴\", en: \"Changelog\" },\n    ],\n  },\n  {\n    id: \"resources\",\n    titleJa: \"リソース\",\n    titleEn: \"Resources\",\n    links: [\n      { ja: \"ブログ\", en: \"Blog\" },\n      { ja: \"ガイド\", en: \"Guides\" },\n      { ja: \"サンプル\", en: \"Examples\" },\n      { ja: \"コミュニティ\", en: \"Community\" },\n    ],\n  },\n  {\n    id: \"company\",\n    titleJa: \"会社\",\n    titleEn: \"Company\",\n    links: [\n      { ja: \"採用情報\", en: \"Careers\" },\n      { ja: \"お問い合わせ\", en: \"Contact\" },\n      { ja: \"プライバシー\", en: \"Privacy\" },\n      { ja: \"利用規約\", en: \"Terms\" },\n    ],\n  },\n];\n\nexport default function DevFooter() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <footer className=\"relative w-full overflow-hidden border-t border-white/10 bg-[#0a0a0f] px-6 py-14 text-zinc-200\">\n      <div\n        className=\"pointer-events-none absolute inset-0 opacity-[0.12]\"\n        style={{\n          backgroundImage:\n            \"linear-gradient(to right, rgba(255,255,255,0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.07) 1px, transparent 1px)\",\n          backgroundSize: \"40px 40px\",\n          maskImage: \"linear-gradient(to bottom, black, transparent 70%)\",\n        }}\n      />\n      <div className=\"relative mx-auto max-w-5xl\">\n        <div className=\"grid gap-10 md:grid-cols-[1.4fr_repeat(4,1fr)]\">\n          <div>\n            <a href=\"#\" className=\"flex items-center gap-2 text-white\">\n              <span className=\"grid size-7 place-items-center rounded-md bg-gradient-to-br from-emerald-400 to-cyan-500 text-emerald-950\">\n                <Hexagon className=\"size-4\" strokeWidth={2.5} />\n              </span>\n              <span className=\"font-mono text-sm font-semibold\">forge</span>\n            </a>\n            <p className=\"mt-4 max-w-[16rem] text-sm leading-relaxed text-zinc-500\">\n              {en\n                ? \"An edge-native platform built to help developers ship faster.\"\n                : \"開発者がより速く出荷するためのエッジネイティブなプラットフォーム。\"}\n            </p>\n            <div className=\"mt-5 flex gap-2\">\n              {[\n                { Icon: Github, label: \"GitHub\" },\n                { Icon: Twitter, label: \"X (Twitter)\" },\n                { Icon: MessageCircle, label: \"Discord\" },\n              ].map(({ Icon, label }) => (\n                <a\n                  key={label}\n                  href=\"#\"\n                  aria-label={label}\n                  className=\"grid size-9 place-items-center rounded-lg border border-white/10 bg-white/[0.03] text-zinc-400 transition-colors hover:border-white/20 hover:text-zinc-100\"\n                >\n                  <Icon className=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          </div>\n\n          {GROUPS.map((g) => (\n            <div key={g.id}>\n              <h4 className=\"font-mono text-xs uppercase tracking-wider text-zinc-500\">\n                {en ? g.titleEn : g.titleJa}\n              </h4>\n              <ul className=\"mt-4 space-y-2.5\">\n                {g.links.map((l) => (\n                  <li key={l.en}>\n                    <a\n                      href=\"#\"\n                      className=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\"\n                    >\n                      {en ? l.en : l.ja}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n\n        <div className=\"mt-12 flex flex-col items-center justify-between gap-4 border-t border-white/10 pt-6 sm:flex-row\">\n          <p className=\"font-mono text-xs text-zinc-600\">\n            © 2026 Forge Inc. All rights reserved.\n          </p>\n          <a\n            href=\"#\"\n            className=\"inline-flex items-center gap-2 rounded-full border border-emerald-400/30 bg-emerald-400/[0.06] px-3 py-1.5 font-mono text-xs text-emerald-300 transition-colors hover:bg-emerald-400/10\"\n          >\n            <span className=\"relative flex size-2\">\n              <span className=\"absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60\" />\n              <span className=\"relative inline-flex size-2 rounded-full bg-emerald-400\" />\n            </span>\n            {en ? \"All systems operational\" : \"全システム稼働中\"}\n          </a>\n        </div>\n      </div>\n    </footer>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <footer class=\"relative w-full overflow-hidden border-t border-white/10 bg-[#0a0a0f] px-6 py-14 text-zinc-200\">\n      <div class=\"pointer-events-none absolute inset-0 opacity-[0.12]\" style=\"background-image:linear-gradient(to right, rgba(255,255,255,0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.07) 1px, transparent 1px);background-size:40px 40px;mask-image:linear-gradient(to bottom, black, transparent 70%)\">\n      </div>\n      <div class=\"relative mx-auto max-w-5xl\">\n        <div class=\"grid gap-10 md:grid-cols-[1.4fr_repeat(4,1fr)]\">\n          <div>\n            <a href=\"#\" class=\"flex items-center gap-2 text-white\">\n              <span class=\"grid size-7 place-items-center rounded-md bg-gradient-to-br from-emerald-400 to-cyan-500 text-emerald-950\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-hexagon size-4\">\n                  <path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\">\n                  </path>\n                </svg>\n              </span>\n              <span class=\"font-mono text-sm font-semibold\">\n                forge\n              </span>\n            </a>\n            <p class=\"mt-4 max-w-[16rem] text-sm leading-relaxed text-zinc-500\">\n              開発者がより速く出荷するためのエッジネイティブなプラットフォーム。\n            </p>\n            <div class=\"mt-5 flex gap-2\">\n              <a href=\"#\" aria-label=\"GitHub\" class=\"grid size-9 place-items-center rounded-lg border border-white/10 bg-white/[0.03] text-zinc-400 transition-colors hover:border-white/20 hover:text-zinc-100\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-github size-4\">\n                  <path d=\"M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4\">\n                  </path>\n                  <path d=\"M9 18c-4.51 2-5-2-7-2\">\n                  </path>\n                </svg>\n              </a>\n              <a href=\"#\" aria-label=\"X (Twitter)\" class=\"grid size-9 place-items-center rounded-lg border border-white/10 bg-white/[0.03] text-zinc-400 transition-colors hover:border-white/20 hover:text-zinc-100\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-twitter size-4\">\n                  <path d=\"M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z\">\n                  </path>\n                </svg>\n              </a>\n              <a href=\"#\" aria-label=\"Discord\" class=\"grid size-9 place-items-center rounded-lg border border-white/10 bg-white/[0.03] text-zinc-400 transition-colors hover:border-white/20 hover:text-zinc-100\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-message-circle size-4\">\n                  <path d=\"M7.9 20A9 9 0 1 0 4 16.1L2 22Z\">\n                  </path>\n                </svg>\n              </a>\n            </div>\n          </div>\n          <div>\n            <h4 class=\"font-mono text-xs uppercase tracking-wider text-zinc-500\">\n              製品\n            </h4>\n            <ul class=\"mt-4 space-y-2.5\">\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  概要\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  ランタイム\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  CLI\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  価格\n                </a>\n              </li>\n            </ul>\n          </div>\n          <div>\n            <h4 class=\"font-mono text-xs uppercase tracking-wider text-zinc-500\">\n              開発者\n            </h4>\n            <ul class=\"mt-4 space-y-2.5\">\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  ドキュメント\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  API リファレンス\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  SDK\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  変更履歴\n                </a>\n              </li>\n            </ul>\n          </div>\n          <div>\n            <h4 class=\"font-mono text-xs uppercase tracking-wider text-zinc-500\">\n              リソース\n            </h4>\n            <ul class=\"mt-4 space-y-2.5\">\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  ブログ\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  ガイド\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  サンプル\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  コミュニティ\n                </a>\n              </li>\n            </ul>\n          </div>\n          <div>\n            <h4 class=\"font-mono text-xs uppercase tracking-wider text-zinc-500\">\n              会社\n            </h4>\n            <ul class=\"mt-4 space-y-2.5\">\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  採用情報\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  お問い合わせ\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  プライバシー\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  利用規約\n                </a>\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"mt-12 flex flex-col items-center justify-between gap-4 border-t border-white/10 pt-6 sm:flex-row\">\n          <p class=\"font-mono text-xs text-zinc-600\">\n            © 2026 Forge Inc. All rights reserved.\n          </p>\n          <a href=\"#\" class=\"inline-flex items-center gap-2 rounded-full border border-emerald-400/30 bg-emerald-400/[0.06] px-3 py-1.5 font-mono text-xs text-emerald-300 transition-colors hover:bg-emerald-400/10\">\n            <span class=\"relative flex size-2\">\n              <span class=\"absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60\">\n              </span>\n              <span class=\"relative inline-flex size-2 rounded-full bg-emerald-400\">\n              </span>\n            </span>\n            全システム稼働中\n          </a>\n        </div>\n      </div>\n    </footer>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <footer class=\"relative w-full overflow-hidden border-t border-white/10 bg-[#0a0a0f] px-6 py-14 text-zinc-200\">\n      <div class=\"pointer-events-none absolute inset-0 opacity-[0.12]\" style=\"background-image:linear-gradient(to right, rgba(255,255,255,0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.07) 1px, transparent 1px);background-size:40px 40px;mask-image:linear-gradient(to bottom, black, transparent 70%)\">\n      </div>\n      <div class=\"relative mx-auto max-w-5xl\">\n        <div class=\"grid gap-10 md:grid-cols-[1.4fr_repeat(4,1fr)]\">\n          <div>\n            <a href=\"#\" class=\"flex items-center gap-2 text-white\">\n              <span class=\"grid size-7 place-items-center rounded-md bg-gradient-to-br from-emerald-400 to-cyan-500 text-emerald-950\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-hexagon size-4\">\n                  <path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\">\n                  </path>\n                </svg>\n              </span>\n              <span class=\"font-mono text-sm font-semibold\">\n                forge\n              </span>\n            </a>\n            <p class=\"mt-4 max-w-[16rem] text-sm leading-relaxed text-zinc-500\">\n              開発者がより速く出荷するためのエッジネイティブなプラットフォーム。\n            </p>\n            <div class=\"mt-5 flex gap-2\">\n              <a href=\"#\" aria-label=\"GitHub\" class=\"grid size-9 place-items-center rounded-lg border border-white/10 bg-white/[0.03] text-zinc-400 transition-colors hover:border-white/20 hover:text-zinc-100\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-github size-4\">\n                  <path d=\"M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4\">\n                  </path>\n                  <path d=\"M9 18c-4.51 2-5-2-7-2\">\n                  </path>\n                </svg>\n              </a>\n              <a href=\"#\" aria-label=\"X (Twitter)\" class=\"grid size-9 place-items-center rounded-lg border border-white/10 bg-white/[0.03] text-zinc-400 transition-colors hover:border-white/20 hover:text-zinc-100\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-twitter size-4\">\n                  <path d=\"M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z\">\n                  </path>\n                </svg>\n              </a>\n              <a href=\"#\" aria-label=\"Discord\" class=\"grid size-9 place-items-center rounded-lg border border-white/10 bg-white/[0.03] text-zinc-400 transition-colors hover:border-white/20 hover:text-zinc-100\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-message-circle size-4\">\n                  <path d=\"M7.9 20A9 9 0 1 0 4 16.1L2 22Z\">\n                  </path>\n                </svg>\n              </a>\n            </div>\n          </div>\n          <div>\n            <h4 class=\"font-mono text-xs uppercase tracking-wider text-zinc-500\">\n              製品\n            </h4>\n            <ul class=\"mt-4 space-y-2.5\">\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  概要\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  ランタイム\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  CLI\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  価格\n                </a>\n              </li>\n            </ul>\n          </div>\n          <div>\n            <h4 class=\"font-mono text-xs uppercase tracking-wider text-zinc-500\">\n              開発者\n            </h4>\n            <ul class=\"mt-4 space-y-2.5\">\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  ドキュメント\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  API リファレンス\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  SDK\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  変更履歴\n                </a>\n              </li>\n            </ul>\n          </div>\n          <div>\n            <h4 class=\"font-mono text-xs uppercase tracking-wider text-zinc-500\">\n              リソース\n            </h4>\n            <ul class=\"mt-4 space-y-2.5\">\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  ブログ\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  ガイド\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  サンプル\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  コミュニティ\n                </a>\n              </li>\n            </ul>\n          </div>\n          <div>\n            <h4 class=\"font-mono text-xs uppercase tracking-wider text-zinc-500\">\n              会社\n            </h4>\n            <ul class=\"mt-4 space-y-2.5\">\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  採用情報\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  お問い合わせ\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  プライバシー\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-zinc-400 transition-colors hover:text-zinc-100\">\n                  利用規約\n                </a>\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"mt-12 flex flex-col items-center justify-between gap-4 border-t border-white/10 pt-6 sm:flex-row\">\n          <p class=\"font-mono text-xs text-zinc-600\">\n            © 2026 Forge Inc. All rights reserved.\n          </p>\n          <a href=\"#\" class=\"inline-flex items-center gap-2 rounded-full border border-emerald-400/30 bg-emerald-400/[0.06] px-3 py-1.5 font-mono text-xs text-emerald-300 transition-colors hover:bg-emerald-400/10\">\n            <span class=\"relative flex size-2\">\n              <span class=\"absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60\">\n              </span>\n              <span class=\"relative inline-flex size-2 rounded-full bg-emerald-400\">\n              </span>\n            </span>\n            全システム稼働中\n          </a>\n        </div>\n      </div>\n    </footer>\n  </body>\n</html>"
     },
     {
       "id": "darktech-dev-pricing",
@@ -590,7 +590,7 @@
       ],
       "standalone": true,
       "source": "import { Check, Zap } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"デベロッパー価格表\",\n  category: \"ダークテック\",\n  description: \"Hobby / Pro / Enterprise のダーク開発者ツール向け料金プラン。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"dark\", \"developer\", \"tech\"],\n};\n\ntype Plan = {\n  name: string;\n  price: string;\n  unitJa: string;\n  unitEn: string;\n  descJa: string;\n  descEn: string;\n  features: { ja: string; en: string }[];\n  ctaJa: string;\n  ctaEn: string;\n  featured?: boolean;\n};\n\nconst PLANS: Plan[] = [\n  {\n    name: \"Hobby\",\n    price: \"$0\",\n    unitJa: \"/月\",\n    unitEn: \"/mo\",\n    descJa: \"個人プロジェクトと試作向け。\",\n    descEn: \"For personal projects and prototypes.\",\n    features: [\n      { ja: \"100K リクエスト/月\", en: \"100K requests/mo\" },\n      { ja: \"1 プロジェクト\", en: \"1 project\" },\n      { ja: \"コミュニティサポート\", en: \"Community support\" },\n      { ja: \"共有ランタイム\", en: \"Shared runtime\" },\n    ],\n    ctaJa: \"無料で始める\",\n    ctaEn: \"Start for free\",\n  },\n  {\n    name: \"Pro\",\n    price: \"$20\",\n    unitJa: \"/月\",\n    unitEn: \"/mo\",\n    descJa: \"本番環境のチームに最適。\",\n    descEn: \"Best for teams in production.\",\n    features: [\n      { ja: \"5M リクエスト/月\", en: \"5M requests/mo\" },\n      { ja: \"無制限プロジェクト\", en: \"Unlimited projects\" },\n      { ja: \"優先サポート\", en: \"Priority support\" },\n      { ja: \"エッジランタイム\", en: \"Edge runtime\" },\n      { ja: \"カスタムドメイン\", en: \"Custom domains\" },\n    ],\n    ctaJa: \"Pro にアップグレード\",\n    ctaEn: \"Upgrade to Pro\",\n    featured: true,\n  },\n  {\n    name: \"Enterprise\",\n    price: \"Custom\",\n    unitJa: \"\",\n    unitEn: \"\",\n    descJa: \"大規模・コンプライアンス要件に。\",\n    descEn: \"For scale and compliance needs.\",\n    features: [\n      { ja: \"無制限リクエスト\", en: \"Unlimited requests\" },\n      { ja: \"SLA 99.99%\", en: \"99.99% SLA\" },\n      { ja: \"専任エンジニア\", en: \"Dedicated engineer\" },\n      { ja: \"SSO / SAML\", en: \"SSO / SAML\" },\n      { ja: \"監査ログ\", en: \"Audit logs\" },\n    ],\n    ctaJa: \"問い合わせ\",\n    ctaEn: \"Contact us\",\n  },\n];\n\nexport default function DevPricing() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"relative w-full overflow-hidden bg-[#0a0a0f] px-6 py-20 text-zinc-200\">\n      <div\n        className=\"pointer-events-none absolute inset-0 opacity-[0.15]\"\n        style={{\n          backgroundImage:\n            \"radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px)\",\n          backgroundSize: \"22px 22px\",\n          maskImage:\n            \"radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent)\",\n        }}\n      />\n      <div className=\"relative mx-auto max-w-5xl\">\n        <div className=\"text-center\">\n          <span className=\"font-mono text-xs uppercase tracking-widest text-emerald-400\">\n            Pricing\n          </span>\n          <h2 className=\"mt-3 text-3xl font-semibold tracking-tight text-white sm:text-4xl\">\n            {en ? \"Pricing that scales with you\" : \"スケールに合わせた料金\"}\n          </h2>\n          <p className=\"mt-3 text-zinc-400\">\n            {en ? \"Pay for what you use. No hidden costs.\" : \"使った分だけ。隠れたコストはありません。\"}\n          </p>\n        </div>\n\n        <div className=\"mt-12 grid gap-5 lg:grid-cols-3\">\n          {PLANS.map((p) => (\n            <div\n              key={p.name}\n              className={cn(\n                \"relative flex flex-col rounded-2xl border bg-[#0d1117] p-6\",\n                p.featured\n                  ? \"border-emerald-400/40 shadow-[0_0_50px_-12px] shadow-emerald-500/30\"\n                  : \"border-white/10\"\n              )}\n            >\n              {p.featured && (\n                <>\n                  <div className=\"pointer-events-none absolute -top-px left-1/2 h-px w-3/4 -translate-x-1/2 bg-gradient-to-r from-transparent via-emerald-400 to-transparent\" />\n                  <span className=\"absolute right-5 top-6 inline-flex items-center gap-1 rounded-full border border-emerald-400/30 bg-emerald-400/10 px-2 py-0.5 font-mono text-[10px] text-emerald-300\">\n                    <Zap className=\"size-3\" />\n                    {en ? \"Popular\" : \"人気\"}\n                  </span>\n                </>\n              )}\n              <h3 className=\"font-mono text-sm uppercase tracking-wide text-zinc-400\">\n                {p.name}\n              </h3>\n              <div className=\"mt-3 flex items-baseline gap-1\">\n                <span className=\"text-4xl font-semibold text-white\">{p.price}</span>\n                <span className=\"text-sm text-zinc-500\">{en ? p.unitEn : p.unitJa}</span>\n              </div>\n              <p className=\"mt-2 text-sm text-zinc-400\">{en ? p.descEn : p.descJa}</p>\n              <button\n                type=\"button\"\n                className={cn(\n                  \"mt-6 rounded-lg px-4 py-2.5 text-sm font-medium transition-colors\",\n                  p.featured\n                    ? \"bg-emerald-400 text-emerald-950 hover:bg-emerald-300\"\n                    : \"border border-white/10 bg-white/[0.03] text-zinc-200 hover:border-white/20\"\n                )}\n              >\n                {en ? p.ctaEn : p.ctaJa}\n              </button>\n              <ul className=\"mt-6 space-y-3 border-t border-white/5 pt-6\">\n                {p.features.map((f) => (\n                  <li key={f.en} className=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                    <Check\n                      className={cn(\n                        \"size-4 shrink-0\",\n                        p.featured ? \"text-emerald-400\" : \"text-zinc-500\"\n                      )}\n                    />\n                    {en ? f.en : f.ja}\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"relative w-full overflow-hidden bg-[#0a0a0f] px-6 py-20 text-zinc-200\">\n      <div class=\"pointer-events-none absolute inset-0 opacity-[0.15]\" style=\"background-image:radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px);background-size:22px 22px;mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent)\">\n      </div>\n      <div class=\"relative mx-auto max-w-5xl\">\n        <div class=\"text-center\">\n          <span class=\"font-mono text-xs uppercase tracking-widest text-emerald-400\">\n            Pricing\n          </span>\n          <h2 class=\"mt-3 text-3xl font-semibold tracking-tight text-white sm:text-4xl\">\n            スケールに合わせた料金\n          </h2>\n          <p class=\"mt-3 text-zinc-400\">\n            使った分だけ。隠れたコストはありません。\n          </p>\n        </div>\n        <div class=\"mt-12 grid gap-5 lg:grid-cols-3\">\n          <div class=\"relative flex flex-col rounded-2xl border bg-[#0d1117] p-6 border-white/10\">\n            <h3 class=\"font-mono text-sm uppercase tracking-wide text-zinc-400\">\n              Hobby\n            </h3>\n            <div class=\"mt-3 flex items-baseline gap-1\">\n              <span class=\"text-4xl font-semibold text-white\">\n                $0\n              </span>\n              <span class=\"text-sm text-zinc-500\">\n                /月\n              </span>\n            </div>\n            <p class=\"mt-2 text-sm text-zinc-400\">\n              個人プロジェクトと試作向け。\n            </p>\n            <button type=\"button\" class=\"mt-6 rounded-lg px-4 py-2.5 text-sm font-medium transition-colors border border-white/10 bg-white/[0.03] text-zinc-200 hover:border-white/20\">\n              無料で始める\n            </button>\n            <ul class=\"mt-6 space-y-3 border-t border-white/5 pt-6\">\n              <li class=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-zinc-500\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                100K リクエスト/月\n              </li>\n              <li class=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-zinc-500\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                1 プロジェクト\n              </li>\n              <li class=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-zinc-500\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                コミュニティサポート\n              </li>\n              <li class=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-zinc-500\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                共有ランタイム\n              </li>\n            </ul>\n          </div>\n          <div class=\"relative flex flex-col rounded-2xl border bg-[#0d1117] p-6 border-emerald-400/40 shadow-[0_0_50px_-12px] shadow-emerald-500/30\">\n            <div class=\"pointer-events-none absolute -top-px left-1/2 h-px w-3/4 -translate-x-1/2 bg-gradient-to-r from-transparent via-emerald-400 to-transparent\">\n            </div>\n            <span class=\"absolute right-5 top-6 inline-flex items-center gap-1 rounded-full border border-emerald-400/30 bg-emerald-400/10 px-2 py-0.5 font-mono text-[10px] text-emerald-300\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-zap size-3\">\n                <path d=\"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z\">\n                </path>\n              </svg>\n              人気\n            </span>\n            <h3 class=\"font-mono text-sm uppercase tracking-wide text-zinc-400\">\n              Pro\n            </h3>\n            <div class=\"mt-3 flex items-baseline gap-1\">\n              <span class=\"text-4xl font-semibold text-white\">\n                $20\n              </span>\n              <span class=\"text-sm text-zinc-500\">\n                /月\n              </span>\n            </div>\n            <p class=\"mt-2 text-sm text-zinc-400\">\n              本番環境のチームに最適。\n            </p>\n            <button type=\"button\" class=\"mt-6 rounded-lg px-4 py-2.5 text-sm font-medium transition-colors bg-emerald-400 text-emerald-950 hover:bg-emerald-300\">\n              Pro にアップグレード\n            </button>\n            <ul class=\"mt-6 space-y-3 border-t border-white/5 pt-6\">\n              <li class=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-emerald-400\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                5M リクエスト/月\n              </li>\n              <li class=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-emerald-400\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                無制限プロジェクト\n              </li>\n              <li class=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-emerald-400\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                優先サポート\n              </li>\n              <li class=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-emerald-400\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                エッジランタイム\n              </li>\n              <li class=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-emerald-400\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                カスタムドメイン\n              </li>\n            </ul>\n          </div>\n          <div class=\"relative flex flex-col rounded-2xl border bg-[#0d1117] p-6 border-white/10\">\n            <h3 class=\"font-mono text-sm uppercase tracking-wide text-zinc-400\">\n              Enterprise\n            </h3>\n            <div class=\"mt-3 flex items-baseline gap-1\">\n              <span class=\"text-4xl font-semibold text-white\">\n                Custom\n              </span>\n              <span class=\"text-sm text-zinc-500\">\n              </span>\n            </div>\n            <p class=\"mt-2 text-sm text-zinc-400\">\n              大規模・コンプライアンス要件に。\n            </p>\n            <button type=\"button\" class=\"mt-6 rounded-lg px-4 py-2.5 text-sm font-medium transition-colors border border-white/10 bg-white/[0.03] text-zinc-200 hover:border-white/20\">\n              問い合わせ\n            </button>\n            <ul class=\"mt-6 space-y-3 border-t border-white/5 pt-6\">\n              <li class=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-zinc-500\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                無制限リクエスト\n              </li>\n              <li class=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-zinc-500\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                SLA 99.99%\n              </li>\n              <li class=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-zinc-500\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                専任エンジニア\n              </li>\n              <li class=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-zinc-500\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                SSO / SAML\n              </li>\n              <li class=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-zinc-500\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                監査ログ\n              </li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"relative w-full overflow-hidden bg-[#0a0a0f] px-6 py-20 text-zinc-200\">\n      <div class=\"pointer-events-none absolute inset-0 opacity-[0.15]\" style=\"background-image:radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px);background-size:22px 22px;mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent)\">\n      </div>\n      <div class=\"relative mx-auto max-w-5xl\">\n        <div class=\"text-center\">\n          <span class=\"font-mono text-xs uppercase tracking-widest text-emerald-400\">\n            Pricing\n          </span>\n          <h2 class=\"mt-3 text-3xl font-semibold tracking-tight text-white sm:text-4xl\">\n            スケールに合わせた料金\n          </h2>\n          <p class=\"mt-3 text-zinc-400\">\n            使った分だけ。隠れたコストはありません。\n          </p>\n        </div>\n        <div class=\"mt-12 grid gap-5 lg:grid-cols-3\">\n          <div class=\"relative flex flex-col rounded-2xl border bg-[#0d1117] p-6 border-white/10\">\n            <h3 class=\"font-mono text-sm uppercase tracking-wide text-zinc-400\">\n              Hobby\n            </h3>\n            <div class=\"mt-3 flex items-baseline gap-1\">\n              <span class=\"text-4xl font-semibold text-white\">\n                $0\n              </span>\n              <span class=\"text-sm text-zinc-500\">\n                /月\n              </span>\n            </div>\n            <p class=\"mt-2 text-sm text-zinc-400\">\n              個人プロジェクトと試作向け。\n            </p>\n            <button type=\"button\" class=\"mt-6 rounded-lg px-4 py-2.5 text-sm font-medium transition-colors border border-white/10 bg-white/[0.03] text-zinc-200 hover:border-white/20\">\n              無料で始める\n            </button>\n            <ul class=\"mt-6 space-y-3 border-t border-white/5 pt-6\">\n              <li class=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-zinc-500\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                100K リクエスト/月\n              </li>\n              <li class=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-zinc-500\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                1 プロジェクト\n              </li>\n              <li class=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-zinc-500\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                コミュニティサポート\n              </li>\n              <li class=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-zinc-500\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                共有ランタイム\n              </li>\n            </ul>\n          </div>\n          <div class=\"relative flex flex-col rounded-2xl border bg-[#0d1117] p-6 border-emerald-400/40 shadow-[0_0_50px_-12px] shadow-emerald-500/30\">\n            <div class=\"pointer-events-none absolute -top-px left-1/2 h-px w-3/4 -translate-x-1/2 bg-gradient-to-r from-transparent via-emerald-400 to-transparent\">\n            </div>\n            <span class=\"absolute right-5 top-6 inline-flex items-center gap-1 rounded-full border border-emerald-400/30 bg-emerald-400/10 px-2 py-0.5 font-mono text-[10px] text-emerald-300\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-zap size-3\">\n                <path d=\"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z\">\n                </path>\n              </svg>\n              人気\n            </span>\n            <h3 class=\"font-mono text-sm uppercase tracking-wide text-zinc-400\">\n              Pro\n            </h3>\n            <div class=\"mt-3 flex items-baseline gap-1\">\n              <span class=\"text-4xl font-semibold text-white\">\n                $20\n              </span>\n              <span class=\"text-sm text-zinc-500\">\n                /月\n              </span>\n            </div>\n            <p class=\"mt-2 text-sm text-zinc-400\">\n              本番環境のチームに最適。\n            </p>\n            <button type=\"button\" class=\"mt-6 rounded-lg px-4 py-2.5 text-sm font-medium transition-colors bg-emerald-400 text-emerald-950 hover:bg-emerald-300\">\n              Pro にアップグレード\n            </button>\n            <ul class=\"mt-6 space-y-3 border-t border-white/5 pt-6\">\n              <li class=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-emerald-400\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                5M リクエスト/月\n              </li>\n              <li class=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-emerald-400\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                無制限プロジェクト\n              </li>\n              <li class=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-emerald-400\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                優先サポート\n              </li>\n              <li class=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-emerald-400\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                エッジランタイム\n              </li>\n              <li class=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-emerald-400\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                カスタムドメイン\n              </li>\n            </ul>\n          </div>\n          <div class=\"relative flex flex-col rounded-2xl border bg-[#0d1117] p-6 border-white/10\">\n            <h3 class=\"font-mono text-sm uppercase tracking-wide text-zinc-400\">\n              Enterprise\n            </h3>\n            <div class=\"mt-3 flex items-baseline gap-1\">\n              <span class=\"text-4xl font-semibold text-white\">\n                Custom\n              </span>\n              <span class=\"text-sm text-zinc-500\">\n              </span>\n            </div>\n            <p class=\"mt-2 text-sm text-zinc-400\">\n              大規模・コンプライアンス要件に。\n            </p>\n            <button type=\"button\" class=\"mt-6 rounded-lg px-4 py-2.5 text-sm font-medium transition-colors border border-white/10 bg-white/[0.03] text-zinc-200 hover:border-white/20\">\n              問い合わせ\n            </button>\n            <ul class=\"mt-6 space-y-3 border-t border-white/5 pt-6\">\n              <li class=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-zinc-500\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                無制限リクエスト\n              </li>\n              <li class=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-zinc-500\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                SLA 99.99%\n              </li>\n              <li class=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-zinc-500\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                専任エンジニア\n              </li>\n              <li class=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-zinc-500\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                SSO / SAML\n              </li>\n              <li class=\"flex items-center gap-2.5 text-sm text-zinc-300\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-zinc-500\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n                監査ログ\n              </li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "darktech-dev-stats",
@@ -604,7 +604,7 @@
       ],
       "standalone": true,
       "source": "import { Activity, Gauge, ServerCog, TrendingUp, TrendingDown } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"デベロッパー統計\",\n  category: \"ダークテック\",\n  description: \"スパークラインSVG付きのメトリクスタイル（リクエスト・レイテンシ等）。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"dark\", \"developer\", \"tech\"],\n};\n\nfunction Sparkline({ points, color }: { points: number[]; color: string }) {\n  const w = 120;\n  const h = 36;\n  const max = Math.max(...points);\n  const min = Math.min(...points);\n  const range = max - min || 1;\n  const step = w / (points.length - 1);\n  const coords = points.map((p, i) => [i * step, h - ((p - min) / range) * h]);\n  const line = coords.map(([x, y], i) => `${i === 0 ? \"M\" : \"L\"}${x},${y}`).join(\" \");\n  const area = `${line} L${w},${h} L0,${h} Z`;\n  const id = `g-${color.replace(/[^a-z]/gi, \"\")}-${points[0]}`;\n\n  return (\n    <svg viewBox={`0 0 ${w} ${h}`} className=\"h-9 w-full\" preserveAspectRatio=\"none\">\n      <defs>\n        <linearGradient id={id} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop offset=\"0%\" stopColor={color} stopOpacity=\"0.35\" />\n          <stop offset=\"100%\" stopColor={color} stopOpacity=\"0\" />\n        </linearGradient>\n      </defs>\n      <path d={area} fill={`url(#${id})`} />\n      <path d={line} fill=\"none\" stroke={color} strokeWidth=\"1.5\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\ntype Tile = {\n  label: string;\n  labelEn: string;\n  value: string;\n  delta: string;\n  up: boolean;\n  good: boolean;\n  icon: typeof Activity;\n  color: string;\n  data: number[];\n};\n\nconst TILES: Tile[] = [\n  {\n    label: \"リクエスト\",\n    labelEn: \"Requests\",\n    value: \"2.84M\",\n    delta: \"+12.4%\",\n    up: true,\n    good: true,\n    icon: Activity,\n    color: \"#34d399\",\n    data: [12, 18, 14, 22, 19, 28, 24, 31, 27, 36],\n  },\n  {\n    label: \"p95 レイテンシ\",\n    labelEn: \"p95 latency\",\n    value: \"42ms\",\n    delta: \"-8.1%\",\n    up: false,\n    good: true,\n    icon: Gauge,\n    color: \"#22d3ee\",\n    data: [60, 55, 58, 50, 48, 52, 45, 43, 44, 42],\n  },\n  {\n    label: \"エラー率\",\n    labelEn: \"Error rate\",\n    value: \"0.03%\",\n    delta: \"+0.4%\",\n    up: true,\n    good: false,\n    icon: ServerCog,\n    color: \"#a78bfa\",\n    data: [4, 3, 5, 3, 4, 2, 3, 4, 3, 5],\n  },\n  {\n    label: \"稼働率\",\n    labelEn: \"Uptime\",\n    value: \"99.98%\",\n    delta: \"+0.02%\",\n    up: true,\n    good: true,\n    icon: TrendingUp,\n    color: \"#fbbf24\",\n    data: [98, 99, 98, 99, 99, 100, 99, 100, 99, 100],\n  },\n];\n\nexport default function DevStats() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"w-full bg-[#0a0a0f] px-6 py-16 text-zinc-200\">\n      <div className=\"mx-auto max-w-5xl\">\n        <div className=\"mb-6 flex items-center gap-2\">\n          <span className=\"font-mono text-xs uppercase tracking-widest text-emerald-400\">\n            Live metrics\n          </span>\n          <span className=\"font-mono text-xs text-zinc-600\">{en ? \"Last 24 hours\" : \"過去24時間\"}</span>\n        </div>\n        <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n          {TILES.map((t) => {\n            const Icon = t.icon;\n            const Trend = t.up ? TrendingUp : TrendingDown;\n            return (\n              <div\n                key={t.label}\n                className=\"rounded-xl border border-white/10 bg-[#0d1117] p-5 transition-colors hover:border-white/20\"\n              >\n                <div className=\"flex items-center justify-between\">\n                  <span className=\"font-mono text-xs text-zinc-400\">{en ? t.labelEn : t.label}</span>\n                  <Icon className=\"size-4 text-zinc-500\" />\n                </div>\n                <div className=\"mt-3 flex items-baseline gap-2\">\n                  <span className=\"text-2xl font-semibold text-white\">{t.value}</span>\n                  <span\n                    className={cn(\n                      \"inline-flex items-center gap-0.5 font-mono text-xs\",\n                      t.good ? \"text-emerald-400\" : \"text-rose-400\"\n                    )}\n                  >\n                    <Trend className=\"size-3\" />\n                    {t.delta}\n                  </span>\n                </div>\n                <div className=\"mt-3\">\n                  <Sparkline points={t.data} color={t.color} />\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"w-full bg-[#0a0a0f] px-6 py-16 text-zinc-200\">\n      <div class=\"mx-auto max-w-5xl\">\n        <div class=\"mb-6 flex items-center gap-2\">\n          <span class=\"font-mono text-xs uppercase tracking-widest text-emerald-400\">\n            Live metrics\n          </span>\n          <span class=\"font-mono text-xs text-zinc-600\">\n            過去24時間\n          </span>\n        </div>\n        <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n          <div class=\"rounded-xl border border-white/10 bg-[#0d1117] p-5 transition-colors hover:border-white/20\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"font-mono text-xs text-zinc-400\">\n                リクエスト\n              </span>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-activity size-4 text-zinc-500\">\n                <path d=\"M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2\">\n                </path>\n              </svg>\n            </div>\n            <div class=\"mt-3 flex items-baseline gap-2\">\n              <span class=\"text-2xl font-semibold text-white\">\n                2.84M\n              </span>\n              <span class=\"inline-flex items-center gap-0.5 font-mono text-xs text-emerald-400\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trending-up size-3\">\n                  <polyline points=\"22 7 13.5 15.5 8.5 10.5 2 17\">\n                  </polyline>\n                  <polyline points=\"16 7 22 7 22 13\">\n                  </polyline>\n                </svg>\n                +12.4%\n              </span>\n            </div>\n            <div class=\"mt-3\">\n              <svg viewBox=\"0 0 120 36\" class=\"h-9 w-full\" preserveAspectRatio=\"none\">\n                <defs>\n                  <linearGradient id=\"g-d-12\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop offset=\"0%\" stop-color=\"#34d399\" stop-opacity=\"0.35\">\n                    </stop>\n                    <stop offset=\"100%\" stop-color=\"#34d399\" stop-opacity=\"0\">\n                    </stop>\n                  </linearGradient>\n                </defs>\n                <path d=\"M0,36 L13.333333333333334,27 L26.666666666666668,33 L40,21 L53.333333333333336,25.5 L66.66666666666667,12 L80,18 L93.33333333333334,7.5 L106.66666666666667,13.5 L120,0 L120,36 L0,36 Z\" fill=\"url(#g-d-12)\">\n                </path>\n                <path d=\"M0,36 L13.333333333333334,27 L26.666666666666668,33 L40,21 L53.333333333333336,25.5 L66.66666666666667,12 L80,18 L93.33333333333334,7.5 L106.66666666666667,13.5 L120,0\" fill=\"none\" stroke=\"#34d399\" stroke-width=\"1.5\" stroke-linejoin=\"round\">\n                </path>\n              </svg>\n            </div>\n          </div>\n          <div class=\"rounded-xl border border-white/10 bg-[#0d1117] p-5 transition-colors hover:border-white/20\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"font-mono text-xs text-zinc-400\">\n                p95 レイテンシ\n              </span>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-gauge size-4 text-zinc-500\">\n                <path d=\"m12 14 4-4\">\n                </path>\n                <path d=\"M3.34 19a10 10 0 1 1 17.32 0\">\n                </path>\n              </svg>\n            </div>\n            <div class=\"mt-3 flex items-baseline gap-2\">\n              <span class=\"text-2xl font-semibold text-white\">\n                42ms\n              </span>\n              <span class=\"inline-flex items-center gap-0.5 font-mono text-xs text-emerald-400\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trending-down size-3\">\n                  <polyline points=\"22 17 13.5 8.5 8.5 13.5 2 7\">\n                  </polyline>\n                  <polyline points=\"16 17 22 17 22 11\">\n                  </polyline>\n                </svg>\n                -8.1%\n              </span>\n            </div>\n            <div class=\"mt-3\">\n              <svg viewBox=\"0 0 120 36\" class=\"h-9 w-full\" preserveAspectRatio=\"none\">\n                <defs>\n                  <linearGradient id=\"g-dee-60\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop offset=\"0%\" stop-color=\"#22d3ee\" stop-opacity=\"0.35\">\n                    </stop>\n                    <stop offset=\"100%\" stop-color=\"#22d3ee\" stop-opacity=\"0\">\n                    </stop>\n                  </linearGradient>\n                </defs>\n                <path d=\"M0,0 L13.333333333333334,10 L26.666666666666668,4 L40,20 L53.333333333333336,24 L66.66666666666667,16 L80,30 L93.33333333333334,34 L106.66666666666667,32 L120,36 L120,36 L0,36 Z\" fill=\"url(#g-dee-60)\">\n                </path>\n                <path d=\"M0,0 L13.333333333333334,10 L26.666666666666668,4 L40,20 L53.333333333333336,24 L66.66666666666667,16 L80,30 L93.33333333333334,34 L106.66666666666667,32 L120,36\" fill=\"none\" stroke=\"#22d3ee\" stroke-width=\"1.5\" stroke-linejoin=\"round\">\n                </path>\n              </svg>\n            </div>\n          </div>\n          <div class=\"rounded-xl border border-white/10 bg-[#0d1117] p-5 transition-colors hover:border-white/20\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"font-mono text-xs text-zinc-400\">\n                エラー率\n              </span>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-server-cog size-4 text-zinc-500\">\n                <circle cx=\"12\" cy=\"12\" r=\"3\">\n                </circle>\n                <path d=\"M4.5 10H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-.5\">\n                </path>\n                <path d=\"M4.5 14H4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-.5\">\n                </path>\n                <path d=\"M6 6h.01\">\n                </path>\n                <path d=\"M6 18h.01\">\n                </path>\n                <path d=\"m15.7 13.4-.9-.3\">\n                </path>\n                <path d=\"m9.2 10.9-.9-.3\">\n                </path>\n                <path d=\"m10.6 15.7.3-.9\">\n                </path>\n                <path d=\"m13.6 15.7-.4-1\">\n                </path>\n                <path d=\"m10.8 9.3-.4-1\">\n                </path>\n                <path d=\"m8.3 13.6 1-.4\">\n                </path>\n                <path d=\"m14.7 10.8 1-.4\">\n                </path>\n                <path d=\"m13.4 8.3-.3.9\">\n                </path>\n              </svg>\n            </div>\n            <div class=\"mt-3 flex items-baseline gap-2\">\n              <span class=\"text-2xl font-semibold text-white\">\n                0.03%\n              </span>\n              <span class=\"inline-flex items-center gap-0.5 font-mono text-xs text-rose-400\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trending-up size-3\">\n                  <polyline points=\"22 7 13.5 15.5 8.5 10.5 2 17\">\n                  </polyline>\n                  <polyline points=\"16 7 22 7 22 13\">\n                  </polyline>\n                </svg>\n                +0.4%\n              </span>\n            </div>\n            <div class=\"mt-3\">\n              <svg viewBox=\"0 0 120 36\" class=\"h-9 w-full\" preserveAspectRatio=\"none\">\n                <defs>\n                  <linearGradient id=\"g-abfa-4\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop offset=\"0%\" stop-color=\"#a78bfa\" stop-opacity=\"0.35\">\n                    </stop>\n                    <stop offset=\"100%\" stop-color=\"#a78bfa\" stop-opacity=\"0\">\n                    </stop>\n                  </linearGradient>\n                </defs>\n                <path d=\"M0,12 L13.333333333333334,24 L26.666666666666668,0 L40,24 L53.333333333333336,12 L66.66666666666667,36 L80,24 L93.33333333333334,12 L106.66666666666667,24 L120,0 L120,36 L0,36 Z\" fill=\"url(#g-abfa-4)\">\n                </path>\n                <path d=\"M0,12 L13.333333333333334,24 L26.666666666666668,0 L40,24 L53.333333333333336,12 L66.66666666666667,36 L80,24 L93.33333333333334,12 L106.66666666666667,24 L120,0\" fill=\"none\" stroke=\"#a78bfa\" stroke-width=\"1.5\" stroke-linejoin=\"round\">\n                </path>\n              </svg>\n            </div>\n          </div>\n          <div class=\"rounded-xl border border-white/10 bg-[#0d1117] p-5 transition-colors hover:border-white/20\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"font-mono text-xs text-zinc-400\">\n                稼働率\n              </span>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trending-up size-4 text-zinc-500\">\n                <polyline points=\"22 7 13.5 15.5 8.5 10.5 2 17\">\n                </polyline>\n                <polyline points=\"16 7 22 7 22 13\">\n                </polyline>\n              </svg>\n            </div>\n            <div class=\"mt-3 flex items-baseline gap-2\">\n              <span class=\"text-2xl font-semibold text-white\">\n                99.98%\n              </span>\n              <span class=\"inline-flex items-center gap-0.5 font-mono text-xs text-emerald-400\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trending-up size-3\">\n                  <polyline points=\"22 7 13.5 15.5 8.5 10.5 2 17\">\n                  </polyline>\n                  <polyline points=\"16 7 22 7 22 13\">\n                  </polyline>\n                </svg>\n                +0.02%\n              </span>\n            </div>\n            <div class=\"mt-3\">\n              <svg viewBox=\"0 0 120 36\" class=\"h-9 w-full\" preserveAspectRatio=\"none\">\n                <defs>\n                  <linearGradient id=\"g-fbbf-98\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop offset=\"0%\" stop-color=\"#fbbf24\" stop-opacity=\"0.35\">\n                    </stop>\n                    <stop offset=\"100%\" stop-color=\"#fbbf24\" stop-opacity=\"0\">\n                    </stop>\n                  </linearGradient>\n                </defs>\n                <path d=\"M0,36 L13.333333333333334,18 L26.666666666666668,36 L40,18 L53.333333333333336,18 L66.66666666666667,0 L80,18 L93.33333333333334,0 L106.66666666666667,18 L120,0 L120,36 L0,36 Z\" fill=\"url(#g-fbbf-98)\">\n                </path>\n                <path d=\"M0,36 L13.333333333333334,18 L26.666666666666668,36 L40,18 L53.333333333333336,18 L66.66666666666667,0 L80,18 L93.33333333333334,0 L106.66666666666667,18 L120,0\" fill=\"none\" stroke=\"#fbbf24\" stroke-width=\"1.5\" stroke-linejoin=\"round\">\n                </path>\n              </svg>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"w-full bg-[#0a0a0f] px-6 py-16 text-zinc-200\">\n      <div class=\"mx-auto max-w-5xl\">\n        <div class=\"mb-6 flex items-center gap-2\">\n          <span class=\"font-mono text-xs uppercase tracking-widest text-emerald-400\">\n            Live metrics\n          </span>\n          <span class=\"font-mono text-xs text-zinc-600\">\n            過去24時間\n          </span>\n        </div>\n        <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n          <div class=\"rounded-xl border border-white/10 bg-[#0d1117] p-5 transition-colors hover:border-white/20\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"font-mono text-xs text-zinc-400\">\n                リクエスト\n              </span>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-activity size-4 text-zinc-500\">\n                <path d=\"M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2\">\n                </path>\n              </svg>\n            </div>\n            <div class=\"mt-3 flex items-baseline gap-2\">\n              <span class=\"text-2xl font-semibold text-white\">\n                2.84M\n              </span>\n              <span class=\"inline-flex items-center gap-0.5 font-mono text-xs text-emerald-400\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trending-up size-3\">\n                  <polyline points=\"22 7 13.5 15.5 8.5 10.5 2 17\">\n                  </polyline>\n                  <polyline points=\"16 7 22 7 22 13\">\n                  </polyline>\n                </svg>\n                +12.4%\n              </span>\n            </div>\n            <div class=\"mt-3\">\n              <svg viewBox=\"0 0 120 36\" class=\"h-9 w-full\" preserveAspectRatio=\"none\">\n                <defs>\n                  <linearGradient id=\"g-d-12\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop offset=\"0%\" stop-color=\"#34d399\" stop-opacity=\"0.35\">\n                    </stop>\n                    <stop offset=\"100%\" stop-color=\"#34d399\" stop-opacity=\"0\">\n                    </stop>\n                  </linearGradient>\n                </defs>\n                <path d=\"M0,36 L13.333333333333334,27 L26.666666666666668,33 L40,21 L53.333333333333336,25.5 L66.66666666666667,12 L80,18 L93.33333333333334,7.5 L106.66666666666667,13.5 L120,0 L120,36 L0,36 Z\" fill=\"url(#g-d-12)\">\n                </path>\n                <path d=\"M0,36 L13.333333333333334,27 L26.666666666666668,33 L40,21 L53.333333333333336,25.5 L66.66666666666667,12 L80,18 L93.33333333333334,7.5 L106.66666666666667,13.5 L120,0\" fill=\"none\" stroke=\"#34d399\" stroke-width=\"1.5\" stroke-linejoin=\"round\">\n                </path>\n              </svg>\n            </div>\n          </div>\n          <div class=\"rounded-xl border border-white/10 bg-[#0d1117] p-5 transition-colors hover:border-white/20\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"font-mono text-xs text-zinc-400\">\n                p95 レイテンシ\n              </span>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-gauge size-4 text-zinc-500\">\n                <path d=\"m12 14 4-4\">\n                </path>\n                <path d=\"M3.34 19a10 10 0 1 1 17.32 0\">\n                </path>\n              </svg>\n            </div>\n            <div class=\"mt-3 flex items-baseline gap-2\">\n              <span class=\"text-2xl font-semibold text-white\">\n                42ms\n              </span>\n              <span class=\"inline-flex items-center gap-0.5 font-mono text-xs text-emerald-400\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trending-down size-3\">\n                  <polyline points=\"22 17 13.5 8.5 8.5 13.5 2 7\">\n                  </polyline>\n                  <polyline points=\"16 17 22 17 22 11\">\n                  </polyline>\n                </svg>\n                -8.1%\n              </span>\n            </div>\n            <div class=\"mt-3\">\n              <svg viewBox=\"0 0 120 36\" class=\"h-9 w-full\" preserveAspectRatio=\"none\">\n                <defs>\n                  <linearGradient id=\"g-dee-60\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop offset=\"0%\" stop-color=\"#22d3ee\" stop-opacity=\"0.35\">\n                    </stop>\n                    <stop offset=\"100%\" stop-color=\"#22d3ee\" stop-opacity=\"0\">\n                    </stop>\n                  </linearGradient>\n                </defs>\n                <path d=\"M0,0 L13.333333333333334,10 L26.666666666666668,4 L40,20 L53.333333333333336,24 L66.66666666666667,16 L80,30 L93.33333333333334,34 L106.66666666666667,32 L120,36 L120,36 L0,36 Z\" fill=\"url(#g-dee-60)\">\n                </path>\n                <path d=\"M0,0 L13.333333333333334,10 L26.666666666666668,4 L40,20 L53.333333333333336,24 L66.66666666666667,16 L80,30 L93.33333333333334,34 L106.66666666666667,32 L120,36\" fill=\"none\" stroke=\"#22d3ee\" stroke-width=\"1.5\" stroke-linejoin=\"round\">\n                </path>\n              </svg>\n            </div>\n          </div>\n          <div class=\"rounded-xl border border-white/10 bg-[#0d1117] p-5 transition-colors hover:border-white/20\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"font-mono text-xs text-zinc-400\">\n                エラー率\n              </span>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-server-cog size-4 text-zinc-500\">\n                <circle cx=\"12\" cy=\"12\" r=\"3\">\n                </circle>\n                <path d=\"M4.5 10H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-.5\">\n                </path>\n                <path d=\"M4.5 14H4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-.5\">\n                </path>\n                <path d=\"M6 6h.01\">\n                </path>\n                <path d=\"M6 18h.01\">\n                </path>\n                <path d=\"m15.7 13.4-.9-.3\">\n                </path>\n                <path d=\"m9.2 10.9-.9-.3\">\n                </path>\n                <path d=\"m10.6 15.7.3-.9\">\n                </path>\n                <path d=\"m13.6 15.7-.4-1\">\n                </path>\n                <path d=\"m10.8 9.3-.4-1\">\n                </path>\n                <path d=\"m8.3 13.6 1-.4\">\n                </path>\n                <path d=\"m14.7 10.8 1-.4\">\n                </path>\n                <path d=\"m13.4 8.3-.3.9\">\n                </path>\n              </svg>\n            </div>\n            <div class=\"mt-3 flex items-baseline gap-2\">\n              <span class=\"text-2xl font-semibold text-white\">\n                0.03%\n              </span>\n              <span class=\"inline-flex items-center gap-0.5 font-mono text-xs text-rose-400\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trending-up size-3\">\n                  <polyline points=\"22 7 13.5 15.5 8.5 10.5 2 17\">\n                  </polyline>\n                  <polyline points=\"16 7 22 7 22 13\">\n                  </polyline>\n                </svg>\n                +0.4%\n              </span>\n            </div>\n            <div class=\"mt-3\">\n              <svg viewBox=\"0 0 120 36\" class=\"h-9 w-full\" preserveAspectRatio=\"none\">\n                <defs>\n                  <linearGradient id=\"g-abfa-4\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop offset=\"0%\" stop-color=\"#a78bfa\" stop-opacity=\"0.35\">\n                    </stop>\n                    <stop offset=\"100%\" stop-color=\"#a78bfa\" stop-opacity=\"0\">\n                    </stop>\n                  </linearGradient>\n                </defs>\n                <path d=\"M0,12 L13.333333333333334,24 L26.666666666666668,0 L40,24 L53.333333333333336,12 L66.66666666666667,36 L80,24 L93.33333333333334,12 L106.66666666666667,24 L120,0 L120,36 L0,36 Z\" fill=\"url(#g-abfa-4)\">\n                </path>\n                <path d=\"M0,12 L13.333333333333334,24 L26.666666666666668,0 L40,24 L53.333333333333336,12 L66.66666666666667,36 L80,24 L93.33333333333334,12 L106.66666666666667,24 L120,0\" fill=\"none\" stroke=\"#a78bfa\" stroke-width=\"1.5\" stroke-linejoin=\"round\">\n                </path>\n              </svg>\n            </div>\n          </div>\n          <div class=\"rounded-xl border border-white/10 bg-[#0d1117] p-5 transition-colors hover:border-white/20\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"font-mono text-xs text-zinc-400\">\n                稼働率\n              </span>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trending-up size-4 text-zinc-500\">\n                <polyline points=\"22 7 13.5 15.5 8.5 10.5 2 17\">\n                </polyline>\n                <polyline points=\"16 7 22 7 22 13\">\n                </polyline>\n              </svg>\n            </div>\n            <div class=\"mt-3 flex items-baseline gap-2\">\n              <span class=\"text-2xl font-semibold text-white\">\n                99.98%\n              </span>\n              <span class=\"inline-flex items-center gap-0.5 font-mono text-xs text-emerald-400\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trending-up size-3\">\n                  <polyline points=\"22 7 13.5 15.5 8.5 10.5 2 17\">\n                  </polyline>\n                  <polyline points=\"16 7 22 7 22 13\">\n                  </polyline>\n                </svg>\n                +0.02%\n              </span>\n            </div>\n            <div class=\"mt-3\">\n              <svg viewBox=\"0 0 120 36\" class=\"h-9 w-full\" preserveAspectRatio=\"none\">\n                <defs>\n                  <linearGradient id=\"g-fbbf-98\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop offset=\"0%\" stop-color=\"#fbbf24\" stop-opacity=\"0.35\">\n                    </stop>\n                    <stop offset=\"100%\" stop-color=\"#fbbf24\" stop-opacity=\"0\">\n                    </stop>\n                  </linearGradient>\n                </defs>\n                <path d=\"M0,36 L13.333333333333334,18 L26.666666666666668,36 L40,18 L53.333333333333336,18 L66.66666666666667,0 L80,18 L93.33333333333334,0 L106.66666666666667,18 L120,0 L120,36 L0,36 Z\" fill=\"url(#g-fbbf-98)\">\n                </path>\n                <path d=\"M0,36 L13.333333333333334,18 L26.666666666666668,36 L40,18 L53.333333333333336,18 L66.66666666666667,0 L80,18 L93.33333333333334,0 L106.66666666666667,18 L120,0\" fill=\"none\" stroke=\"#fbbf24\" stroke-width=\"1.5\" stroke-linejoin=\"round\">\n                </path>\n              </svg>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "darktech-status-dashboard",
@@ -618,7 +618,7 @@
       ],
       "standalone": true,
       "source": "import { cn } from \"@/lib/utils\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"ステータス・ダッシュボード\",\n  category: \"ダークテック\",\n  description: \"稼働状況とアップタイムバーを表示するサービスステータスボード。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"dark\", \"developer\", \"tech\"],\n};\n\ntype Status = \"operational\" | \"degraded\" | \"outage\";\n\ntype Service = { name: string; status: Status; uptime: number; bars: Status[] };\n\nconst COLOR: Record<Status, string> = {\n  operational: \"bg-emerald-400\",\n  degraded: \"bg-amber-400\",\n  outage: \"bg-rose-500\",\n};\nconst LABEL_JA: Record<Status, string> = {\n  operational: \"稼働中\",\n  degraded: \"低下\",\n  outage: \"停止\",\n};\nconst LABEL_EN: Record<Status, string> = {\n  operational: \"Operational\",\n  degraded: \"Degraded\",\n  outage: \"Outage\",\n};\nconst DOT: Record<Status, string> = {\n  operational: \"text-emerald-400\",\n  degraded: \"text-amber-400\",\n  outage: \"text-rose-500\",\n};\n\nfunction makeBars(_seed: number, badAt: number[] = []): Status[] {\n  return Array.from({ length: 40 }, (_, i) =>\n    badAt.includes(i) ? (i % 7 === 0 ? \"outage\" : \"degraded\") : \"operational\"\n  ).reverse();\n}\n\nconst SERVICES: Service[] = [\n  { name: \"API Gateway\", status: \"operational\", uptime: 99.98, bars: makeBars(1) },\n  { name: \"Edge Runtime\", status: \"operational\", uptime: 99.99, bars: makeBars(2) },\n  { name: \"Database\", status: \"degraded\", uptime: 99.71, bars: makeBars(3, [3, 4, 5]) },\n  { name: \"Auth\", status: \"operational\", uptime: 99.95, bars: makeBars(4) },\n  { name: \"Storage (S3)\", status: \"outage\", uptime: 98.42, bars: makeBars(5, [0, 1, 2, 9]) },\n];\n\nexport default function StatusDashboard() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  const LABEL = en ? LABEL_EN : LABEL_JA;\n  const allUp = SERVICES.every((s) => s.status === \"operational\");\n\n  return (\n    <section className=\"w-full bg-[#0a0a0f] px-6 py-16 text-zinc-200\">\n      <div className=\"mx-auto max-w-3xl\">\n        <div\n          className={cn(\n            \"flex items-center justify-between rounded-xl border px-5 py-4\",\n            allUp\n              ? \"border-emerald-400/30 bg-emerald-400/[0.04]\"\n              : \"border-amber-400/30 bg-amber-400/[0.04]\"\n          )}\n        >\n          <div className=\"flex items-center gap-3\">\n            <span className=\"relative flex size-3\">\n              <span\n                className={cn(\n                  \"absolute inline-flex h-full w-full animate-ping rounded-full opacity-60\",\n                  allUp ? \"bg-emerald-400\" : \"bg-amber-400\"\n                )}\n              />\n              <span\n                className={cn(\n                  \"relative inline-flex size-3 rounded-full\",\n                  allUp ? \"bg-emerald-400\" : \"bg-amber-400\"\n                )}\n              />\n            </span>\n            <span className=\"text-sm font-medium text-white\">\n              {allUp\n                ? en\n                  ? \"All systems operational\"\n                  : \"全システム正常稼働中\"\n                : en\n                  ? \"Some services affected\"\n                  : \"一部のサービスに影響あり\"}\n            </span>\n          </div>\n          <span className=\"font-mono text-xs text-zinc-500\">\n            {en ? \"Updated: just now\" : \"最終更新: たった今\"}\n          </span>\n        </div>\n\n        <div className=\"mt-4 divide-y divide-white/5 rounded-xl border border-white/10 bg-[#0d1117]\">\n          {SERVICES.map((s) => (\n            <div key={s.name} className=\"px-5 py-4\">\n              <div className=\"flex items-center justify-between\">\n                <div className=\"flex items-center gap-2\">\n                  <span className={cn(\"text-base leading-none\", DOT[s.status])}>●</span>\n                  <span className=\"text-sm font-medium text-white\">{s.name}</span>\n                </div>\n                <div className=\"flex items-center gap-3\">\n                  <span className=\"font-mono text-xs text-zinc-500\">\n                    {s.uptime.toFixed(2)}%\n                  </span>\n                  <span\n                    className={cn(\n                      \"rounded-full px-2 py-0.5 font-mono text-[10px]\",\n                      s.status === \"operational\" && \"bg-emerald-400/10 text-emerald-300\",\n                      s.status === \"degraded\" && \"bg-amber-400/10 text-amber-300\",\n                      s.status === \"outage\" && \"bg-rose-500/10 text-rose-300\"\n                    )}\n                  >\n                    {LABEL[s.status]}\n                  </span>\n                </div>\n              </div>\n              <div className=\"mt-3 flex items-end gap-[3px]\">\n                {s.bars.map((b, i) => (\n                  <span\n                    key={i}\n                    title={LABEL[b]}\n                    className={cn(\n                      \"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100\",\n                      COLOR[b]\n                    )}\n                  />\n                ))}\n              </div>\n              <div className=\"mt-1.5 flex justify-between font-mono text-[10px] text-zinc-600\">\n                <span>{en ? \"90 days ago\" : \"90日前\"}</span>\n                <span>{en ? \"Today\" : \"今日\"}</span>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"w-full bg-[#0a0a0f] px-6 py-16 text-zinc-200\">\n      <div class=\"mx-auto max-w-3xl\">\n        <div class=\"flex items-center justify-between rounded-xl border px-5 py-4 border-amber-400/30 bg-amber-400/[0.04]\">\n          <div class=\"flex items-center gap-3\">\n            <span class=\"relative flex size-3\">\n              <span class=\"absolute inline-flex h-full w-full animate-ping rounded-full opacity-60 bg-amber-400\">\n              </span>\n              <span class=\"relative inline-flex size-3 rounded-full bg-amber-400\">\n              </span>\n            </span>\n            <span class=\"text-sm font-medium text-white\">\n              一部のサービスに影響あり\n            </span>\n          </div>\n          <span class=\"font-mono text-xs text-zinc-500\">\n            最終更新: たった今\n          </span>\n        </div>\n        <div class=\"mt-4 divide-y divide-white/5 rounded-xl border border-white/10 bg-[#0d1117]\">\n          <div class=\"px-5 py-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-2\">\n                <span class=\"text-base leading-none text-emerald-400\">\n                  ●\n                </span>\n                <span class=\"text-sm font-medium text-white\">\n                  API Gateway\n                </span>\n              </div>\n              <div class=\"flex items-center gap-3\">\n                <span class=\"font-mono text-xs text-zinc-500\">\n                  99.98%\n                </span>\n                <span class=\"rounded-full px-2 py-0.5 font-mono text-[10px] bg-emerald-400/10 text-emerald-300\">\n                  稼働中\n                </span>\n              </div>\n            </div>\n            <div class=\"mt-3 flex items-end gap-[3px]\">\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n            </div>\n            <div class=\"mt-1.5 flex justify-between font-mono text-[10px] text-zinc-600\">\n              <span>\n                90日前\n              </span>\n              <span>\n                今日\n              </span>\n            </div>\n          </div>\n          <div class=\"px-5 py-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-2\">\n                <span class=\"text-base leading-none text-emerald-400\">\n                  ●\n                </span>\n                <span class=\"text-sm font-medium text-white\">\n                  Edge Runtime\n                </span>\n              </div>\n              <div class=\"flex items-center gap-3\">\n                <span class=\"font-mono text-xs text-zinc-500\">\n                  99.99%\n                </span>\n                <span class=\"rounded-full px-2 py-0.5 font-mono text-[10px] bg-emerald-400/10 text-emerald-300\">\n                  稼働中\n                </span>\n              </div>\n            </div>\n            <div class=\"mt-3 flex items-end gap-[3px]\">\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n            </div>\n            <div class=\"mt-1.5 flex justify-between font-mono text-[10px] text-zinc-600\">\n              <span>\n                90日前\n              </span>\n              <span>\n                今日\n              </span>\n            </div>\n          </div>\n          <div class=\"px-5 py-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-2\">\n                <span class=\"text-base leading-none text-amber-400\">\n                  ●\n                </span>\n                <span class=\"text-sm font-medium text-white\">\n                  Database\n                </span>\n              </div>\n              <div class=\"flex items-center gap-3\">\n                <span class=\"font-mono text-xs text-zinc-500\">\n                  99.71%\n                </span>\n                <span class=\"rounded-full px-2 py-0.5 font-mono text-[10px] bg-amber-400/10 text-amber-300\">\n                  低下\n                </span>\n              </div>\n            </div>\n            <div class=\"mt-3 flex items-end gap-[3px]\">\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"低下\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-amber-400\">\n              </span>\n              <span title=\"低下\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-amber-400\">\n              </span>\n              <span title=\"低下\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-amber-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n            </div>\n            <div class=\"mt-1.5 flex justify-between font-mono text-[10px] text-zinc-600\">\n              <span>\n                90日前\n              </span>\n              <span>\n                今日\n              </span>\n            </div>\n          </div>\n          <div class=\"px-5 py-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-2\">\n                <span class=\"text-base leading-none text-emerald-400\">\n                  ●\n                </span>\n                <span class=\"text-sm font-medium text-white\">\n                  Auth\n                </span>\n              </div>\n              <div class=\"flex items-center gap-3\">\n                <span class=\"font-mono text-xs text-zinc-500\">\n                  99.95%\n                </span>\n                <span class=\"rounded-full px-2 py-0.5 font-mono text-[10px] bg-emerald-400/10 text-emerald-300\">\n                  稼働中\n                </span>\n              </div>\n            </div>\n            <div class=\"mt-3 flex items-end gap-[3px]\">\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n            </div>\n            <div class=\"mt-1.5 flex justify-between font-mono text-[10px] text-zinc-600\">\n              <span>\n                90日前\n              </span>\n              <span>\n                今日\n              </span>\n            </div>\n          </div>\n          <div class=\"px-5 py-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-2\">\n                <span class=\"text-base leading-none text-rose-500\">\n                  ●\n                </span>\n                <span class=\"text-sm font-medium text-white\">\n                  Storage (S3)\n                </span>\n              </div>\n              <div class=\"flex items-center gap-3\">\n                <span class=\"font-mono text-xs text-zinc-500\">\n                  98.42%\n                </span>\n                <span class=\"rounded-full px-2 py-0.5 font-mono text-[10px] bg-rose-500/10 text-rose-300\">\n                  停止\n                </span>\n              </div>\n            </div>\n            <div class=\"mt-3 flex items-end gap-[3px]\">\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"低下\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-amber-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"低下\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-amber-400\">\n              </span>\n              <span title=\"低下\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-amber-400\">\n              </span>\n              <span title=\"停止\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-rose-500\">\n              </span>\n            </div>\n            <div class=\"mt-1.5 flex justify-between font-mono text-[10px] text-zinc-600\">\n              <span>\n                90日前\n              </span>\n              <span>\n                今日\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"w-full bg-[#0a0a0f] px-6 py-16 text-zinc-200\">\n      <div class=\"mx-auto max-w-3xl\">\n        <div class=\"flex items-center justify-between rounded-xl border px-5 py-4 border-amber-400/30 bg-amber-400/[0.04]\">\n          <div class=\"flex items-center gap-3\">\n            <span class=\"relative flex size-3\">\n              <span class=\"absolute inline-flex h-full w-full animate-ping rounded-full opacity-60 bg-amber-400\">\n              </span>\n              <span class=\"relative inline-flex size-3 rounded-full bg-amber-400\">\n              </span>\n            </span>\n            <span class=\"text-sm font-medium text-white\">\n              一部のサービスに影響あり\n            </span>\n          </div>\n          <span class=\"font-mono text-xs text-zinc-500\">\n            最終更新: たった今\n          </span>\n        </div>\n        <div class=\"mt-4 divide-y divide-white/5 rounded-xl border border-white/10 bg-[#0d1117]\">\n          <div class=\"px-5 py-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-2\">\n                <span class=\"text-base leading-none text-emerald-400\">\n                  ●\n                </span>\n                <span class=\"text-sm font-medium text-white\">\n                  API Gateway\n                </span>\n              </div>\n              <div class=\"flex items-center gap-3\">\n                <span class=\"font-mono text-xs text-zinc-500\">\n                  99.98%\n                </span>\n                <span class=\"rounded-full px-2 py-0.5 font-mono text-[10px] bg-emerald-400/10 text-emerald-300\">\n                  稼働中\n                </span>\n              </div>\n            </div>\n            <div class=\"mt-3 flex items-end gap-[3px]\">\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n            </div>\n            <div class=\"mt-1.5 flex justify-between font-mono text-[10px] text-zinc-600\">\n              <span>\n                90日前\n              </span>\n              <span>\n                今日\n              </span>\n            </div>\n          </div>\n          <div class=\"px-5 py-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-2\">\n                <span class=\"text-base leading-none text-emerald-400\">\n                  ●\n                </span>\n                <span class=\"text-sm font-medium text-white\">\n                  Edge Runtime\n                </span>\n              </div>\n              <div class=\"flex items-center gap-3\">\n                <span class=\"font-mono text-xs text-zinc-500\">\n                  99.99%\n                </span>\n                <span class=\"rounded-full px-2 py-0.5 font-mono text-[10px] bg-emerald-400/10 text-emerald-300\">\n                  稼働中\n                </span>\n              </div>\n            </div>\n            <div class=\"mt-3 flex items-end gap-[3px]\">\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n            </div>\n            <div class=\"mt-1.5 flex justify-between font-mono text-[10px] text-zinc-600\">\n              <span>\n                90日前\n              </span>\n              <span>\n                今日\n              </span>\n            </div>\n          </div>\n          <div class=\"px-5 py-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-2\">\n                <span class=\"text-base leading-none text-amber-400\">\n                  ●\n                </span>\n                <span class=\"text-sm font-medium text-white\">\n                  Database\n                </span>\n              </div>\n              <div class=\"flex items-center gap-3\">\n                <span class=\"font-mono text-xs text-zinc-500\">\n                  99.71%\n                </span>\n                <span class=\"rounded-full px-2 py-0.5 font-mono text-[10px] bg-amber-400/10 text-amber-300\">\n                  低下\n                </span>\n              </div>\n            </div>\n            <div class=\"mt-3 flex items-end gap-[3px]\">\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"低下\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-amber-400\">\n              </span>\n              <span title=\"低下\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-amber-400\">\n              </span>\n              <span title=\"低下\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-amber-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n            </div>\n            <div class=\"mt-1.5 flex justify-between font-mono text-[10px] text-zinc-600\">\n              <span>\n                90日前\n              </span>\n              <span>\n                今日\n              </span>\n            </div>\n          </div>\n          <div class=\"px-5 py-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-2\">\n                <span class=\"text-base leading-none text-emerald-400\">\n                  ●\n                </span>\n                <span class=\"text-sm font-medium text-white\">\n                  Auth\n                </span>\n              </div>\n              <div class=\"flex items-center gap-3\">\n                <span class=\"font-mono text-xs text-zinc-500\">\n                  99.95%\n                </span>\n                <span class=\"rounded-full px-2 py-0.5 font-mono text-[10px] bg-emerald-400/10 text-emerald-300\">\n                  稼働中\n                </span>\n              </div>\n            </div>\n            <div class=\"mt-3 flex items-end gap-[3px]\">\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n            </div>\n            <div class=\"mt-1.5 flex justify-between font-mono text-[10px] text-zinc-600\">\n              <span>\n                90日前\n              </span>\n              <span>\n                今日\n              </span>\n            </div>\n          </div>\n          <div class=\"px-5 py-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-2\">\n                <span class=\"text-base leading-none text-rose-500\">\n                  ●\n                </span>\n                <span class=\"text-sm font-medium text-white\">\n                  Storage (S3)\n                </span>\n              </div>\n              <div class=\"flex items-center gap-3\">\n                <span class=\"font-mono text-xs text-zinc-500\">\n                  98.42%\n                </span>\n                <span class=\"rounded-full px-2 py-0.5 font-mono text-[10px] bg-rose-500/10 text-rose-300\">\n                  停止\n                </span>\n              </div>\n            </div>\n            <div class=\"mt-3 flex items-end gap-[3px]\">\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"低下\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-amber-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"稼働中\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-emerald-400\">\n              </span>\n              <span title=\"低下\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-amber-400\">\n              </span>\n              <span title=\"低下\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-amber-400\">\n              </span>\n              <span title=\"停止\" class=\"h-7 flex-1 rounded-[2px] opacity-90 transition-opacity hover:opacity-100 bg-rose-500\">\n              </span>\n            </div>\n            <div class=\"mt-1.5 flex justify-between font-mono text-[10px] text-zinc-600\">\n              <span>\n                90日前\n              </span>\n              <span>\n                今日\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "feature2-animated-bento",
@@ -632,7 +632,7 @@
       ],
       "standalone": true,
       "source": "import { Sparkles, Zap, Shield, BarChart3, Globe, Layers } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"アニメーション・ベント\",\n  category: \"マーケティング\",\n  description:\n    \"サイズの異なるタイルが組み合わさったベントグリッド。ホバーで光彩が走り、登場時にふわっと立ち上がる。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"feature\", \"bento\", \"animation\"],\n};\n\nconst TILES = [\n  {\n    icon: Sparkles,\n    title: \"自動でひらめく\",\n    titleEn: \"Insights on autopilot\",\n    body: \"面倒な設定は不要。最初の5分で価値が伝わる体験を。\",\n    bodyEn: \"No fiddly setup — feel the value within the first five minutes.\",\n    span: \"sm:col-span-2 sm:row-span-2\",\n    tone: \"from-violet-500/20 to-fuchsia-500/10\",\n  },\n  {\n    icon: Zap,\n    title: \"圧倒的な速さ\",\n    titleEn: \"Blazing fast\",\n    body: \"ミリ秒単位の応答。\",\n    bodyEn: \"Millisecond responses.\",\n    span: \"\",\n    tone: \"from-amber-500/20 to-orange-500/10\",\n  },\n  {\n    icon: Shield,\n    title: \"堅牢な安全性\",\n    titleEn: \"Rock-solid security\",\n    body: \"暗号化を標準装備。\",\n    bodyEn: \"Encryption built in.\",\n    span: \"\",\n    tone: \"from-emerald-500/20 to-teal-500/10\",\n  },\n  {\n    icon: BarChart3,\n    title: \"明快な分析\",\n    titleEn: \"Clear analytics\",\n    body: \"数字で意思決定を支える、リアルタイムのダッシュボード。\",\n    bodyEn: \"Real-time dashboards that back decisions with numbers.\",\n    span: \"sm:col-span-2\",\n    tone: \"from-sky-500/20 to-cyan-500/10\",\n  },\n  {\n    icon: Globe,\n    title: \"世界中で稼働\",\n    titleEn: \"Runs worldwide\",\n    body: \"エッジ配信。\",\n    bodyEn: \"Edge delivery.\",\n    span: \"\",\n    tone: \"from-indigo-500/20 to-blue-500/10\",\n  },\n  {\n    icon: Layers,\n    title: \"拡張は自在\",\n    titleEn: \"Endlessly extensible\",\n    body: \"プラグインで機能を足し算。\",\n    bodyEn: \"Add features with plugins.\",\n    span: \"\",\n    tone: \"from-rose-500/20 to-pink-500/10\",\n  },\n];\n\nexport default function AnimatedBento() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"w-full px-6 py-16\">\n      <style>{`\n        @keyframes ab-rise {\n          from { opacity: 0; transform: translateY(18px) scale(.98); }\n          to { opacity: 1; transform: translateY(0) scale(1); }\n        }\n        .ab-tile { animation: ab-rise .6s cubic-bezier(.22,1,.36,1) both; }\n      `}</style>\n      <div className=\"mx-auto max-w-5xl\">\n        <div className=\"mb-10 max-w-xl\">\n          <h2 className=\"text-3xl font-semibold tracking-tight sm:text-4xl\">\n            {en ? \"Every feature, at a glance.\" : \"必要な機能を、ひと目で。\"}\n          </h2>\n          <p className=\"mt-3 text-pretty text-muted-foreground\">\n            {en\n              ? \"Tiles with different roles combine to distill the product's appeal into a single screen.\"\n              : \"役割の違うタイルを組み合わせ、製品の魅力を一画面に凝縮しました。\"}\n          </p>\n        </div>\n\n        <div className=\"grid auto-rows-[minmax(140px,auto)] grid-cols-2 gap-4 sm:grid-cols-4\">\n          {TILES.map((t, i) => {\n            const Icon = t.icon;\n            return (\n              <div\n                key={t.title}\n                className={cn(\n                  \"ab-tile group relative overflow-hidden rounded-2xl border bg-card p-5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl\",\n                  t.span\n                )}\n                style={{ animationDelay: `${i * 80}ms` }}\n              >\n                <div\n                  aria-hidden\n                  className={cn(\n                    \"pointer-events-none absolute -inset-px rounded-2xl bg-gradient-to-br opacity-0 transition-opacity duration-500 group-hover:opacity-100\",\n                    t.tone\n                  )}\n                />\n                <div\n                  aria-hidden\n                  className=\"pointer-events-none absolute -left-20 top-0 h-full w-20 -skew-x-12 bg-white/30 opacity-0 blur-md transition-all duration-700 group-hover:left-[120%] group-hover:opacity-100 dark:bg-white/10\"\n                />\n                <div className=\"relative\">\n                  <span className=\"inline-flex size-10 items-center justify-center rounded-xl border bg-background/70 backdrop-blur transition-transform duration-300 group-hover:scale-110\">\n                    <Icon className=\"size-5 text-foreground\" />\n                  </span>\n                  <h3 className=\"mt-4 font-semibold tracking-tight\">{en ? t.titleEn : t.title}</h3>\n                  <p className=\"mt-1 text-sm text-muted-foreground\">{en ? t.bodyEn : t.body}</p>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"w-full px-6 py-16\">\n      <style>\n        @keyframes ab-rise {\n              from { opacity: 0; transform: translateY(18px) scale(.98); }\n              to { opacity: 1; transform: translateY(0) scale(1); }\n            }\n            .ab-tile { animation: ab-rise .6s cubic-bezier(.22,1,.36,1) both; }\n      </style>\n      <div class=\"mx-auto max-w-5xl\">\n        <div class=\"mb-10 max-w-xl\">\n          <h2 class=\"text-3xl font-semibold tracking-tight sm:text-4xl\">\n            必要な機能を、ひと目で。\n          </h2>\n          <p class=\"mt-3 text-pretty text-muted-foreground\">\n            役割の違うタイルを組み合わせ、製品の魅力を一画面に凝縮しました。\n          </p>\n        </div>\n        <div class=\"grid auto-rows-[minmax(140px,auto)] grid-cols-2 gap-4 sm:grid-cols-4\">\n          <div class=\"ab-tile group relative overflow-hidden rounded-2xl border bg-card p-5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl sm:col-span-2 sm:row-span-2\" style=\"animation-delay:0ms\">\n            <div aria-hidden=\"true\" class=\"pointer-events-none absolute -inset-px rounded-2xl bg-gradient-to-br opacity-0 transition-opacity duration-500 group-hover:opacity-100 from-violet-500/20 to-fuchsia-500/10\">\n            </div>\n            <div aria-hidden=\"true\" class=\"pointer-events-none absolute -left-20 top-0 h-full w-20 -skew-x-12 bg-white/30 opacity-0 blur-md transition-all duration-700 group-hover:left-[120%] group-hover:opacity-100 dark:bg-white/10\">\n            </div>\n            <div class=\"relative\">\n              <span class=\"inline-flex size-10 items-center justify-center rounded-xl border bg-background/70 backdrop-blur transition-transform duration-300 group-hover:scale-110\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-5 text-foreground\">\n                  <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                  </path>\n                  <path d=\"M20 3v4\">\n                  </path>\n                  <path d=\"M22 5h-4\">\n                  </path>\n                  <path d=\"M4 17v2\">\n                  </path>\n                  <path d=\"M5 18H3\">\n                  </path>\n                </svg>\n              </span>\n              <h3 class=\"mt-4 font-semibold tracking-tight\">\n                自動でひらめく\n              </h3>\n              <p class=\"mt-1 text-sm text-muted-foreground\">\n                面倒な設定は不要。最初の5分で価値が伝わる体験を。\n              </p>\n            </div>\n          </div>\n          <div class=\"ab-tile group relative overflow-hidden rounded-2xl border bg-card p-5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl\" style=\"animation-delay:80ms\">\n            <div aria-hidden=\"true\" class=\"pointer-events-none absolute -inset-px rounded-2xl bg-gradient-to-br opacity-0 transition-opacity duration-500 group-hover:opacity-100 from-amber-500/20 to-orange-500/10\">\n            </div>\n            <div aria-hidden=\"true\" class=\"pointer-events-none absolute -left-20 top-0 h-full w-20 -skew-x-12 bg-white/30 opacity-0 blur-md transition-all duration-700 group-hover:left-[120%] group-hover:opacity-100 dark:bg-white/10\">\n            </div>\n            <div class=\"relative\">\n              <span class=\"inline-flex size-10 items-center justify-center rounded-xl border bg-background/70 backdrop-blur transition-transform duration-300 group-hover:scale-110\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-zap size-5 text-foreground\">\n                  <path d=\"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z\">\n                  </path>\n                </svg>\n              </span>\n              <h3 class=\"mt-4 font-semibold tracking-tight\">\n                圧倒的な速さ\n              </h3>\n              <p class=\"mt-1 text-sm text-muted-foreground\">\n                ミリ秒単位の応答。\n              </p>\n            </div>\n          </div>\n          <div class=\"ab-tile group relative overflow-hidden rounded-2xl border bg-card p-5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl\" style=\"animation-delay:160ms\">\n            <div aria-hidden=\"true\" class=\"pointer-events-none absolute -inset-px rounded-2xl bg-gradient-to-br opacity-0 transition-opacity duration-500 group-hover:opacity-100 from-emerald-500/20 to-teal-500/10\">\n            </div>\n            <div aria-hidden=\"true\" class=\"pointer-events-none absolute -left-20 top-0 h-full w-20 -skew-x-12 bg-white/30 opacity-0 blur-md transition-all duration-700 group-hover:left-[120%] group-hover:opacity-100 dark:bg-white/10\">\n            </div>\n            <div class=\"relative\">\n              <span class=\"inline-flex size-10 items-center justify-center rounded-xl border bg-background/70 backdrop-blur transition-transform duration-300 group-hover:scale-110\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-shield size-5 text-foreground\">\n                  <path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\n                  </path>\n                </svg>\n              </span>\n              <h3 class=\"mt-4 font-semibold tracking-tight\">\n                堅牢な安全性\n              </h3>\n              <p class=\"mt-1 text-sm text-muted-foreground\">\n                暗号化を標準装備。\n              </p>\n            </div>\n          </div>\n          <div class=\"ab-tile group relative overflow-hidden rounded-2xl border bg-card p-5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl sm:col-span-2\" style=\"animation-delay:240ms\">\n            <div aria-hidden=\"true\" class=\"pointer-events-none absolute -inset-px rounded-2xl bg-gradient-to-br opacity-0 transition-opacity duration-500 group-hover:opacity-100 from-sky-500/20 to-cyan-500/10\">\n            </div>\n            <div aria-hidden=\"true\" class=\"pointer-events-none absolute -left-20 top-0 h-full w-20 -skew-x-12 bg-white/30 opacity-0 blur-md transition-all duration-700 group-hover:left-[120%] group-hover:opacity-100 dark:bg-white/10\">\n            </div>\n            <div class=\"relative\">\n              <span class=\"inline-flex size-10 items-center justify-center rounded-xl border bg-background/70 backdrop-blur transition-transform duration-300 group-hover:scale-110\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-chart-column size-5 text-foreground\">\n                  <path d=\"M3 3v16a2 2 0 0 0 2 2h16\">\n                  </path>\n                  <path d=\"M18 17V9\">\n                  </path>\n                  <path d=\"M13 17V5\">\n                  </path>\n                  <path d=\"M8 17v-3\">\n                  </path>\n                </svg>\n              </span>\n              <h3 class=\"mt-4 font-semibold tracking-tight\">\n                明快な分析\n              </h3>\n              <p class=\"mt-1 text-sm text-muted-foreground\">\n                数字で意思決定を支える、リアルタイムのダッシュボード。\n              </p>\n            </div>\n          </div>\n          <div class=\"ab-tile group relative overflow-hidden rounded-2xl border bg-card p-5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl\" style=\"animation-delay:320ms\">\n            <div aria-hidden=\"true\" class=\"pointer-events-none absolute -inset-px rounded-2xl bg-gradient-to-br opacity-0 transition-opacity duration-500 group-hover:opacity-100 from-indigo-500/20 to-blue-500/10\">\n            </div>\n            <div aria-hidden=\"true\" class=\"pointer-events-none absolute -left-20 top-0 h-full w-20 -skew-x-12 bg-white/30 opacity-0 blur-md transition-all duration-700 group-hover:left-[120%] group-hover:opacity-100 dark:bg-white/10\">\n            </div>\n            <div class=\"relative\">\n              <span class=\"inline-flex size-10 items-center justify-center rounded-xl border bg-background/70 backdrop-blur transition-transform duration-300 group-hover:scale-110\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-globe size-5 text-foreground\">\n                  <circle cx=\"12\" cy=\"12\" r=\"10\">\n                  </circle>\n                  <path d=\"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20\">\n                  </path>\n                  <path d=\"M2 12h20\">\n                  </path>\n                </svg>\n              </span>\n              <h3 class=\"mt-4 font-semibold tracking-tight\">\n                世界中で稼働\n              </h3>\n              <p class=\"mt-1 text-sm text-muted-foreground\">\n                エッジ配信。\n              </p>\n            </div>\n          </div>\n          <div class=\"ab-tile group relative overflow-hidden rounded-2xl border bg-card p-5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl\" style=\"animation-delay:400ms\">\n            <div aria-hidden=\"true\" class=\"pointer-events-none absolute -inset-px rounded-2xl bg-gradient-to-br opacity-0 transition-opacity duration-500 group-hover:opacity-100 from-rose-500/20 to-pink-500/10\">\n            </div>\n            <div aria-hidden=\"true\" class=\"pointer-events-none absolute -left-20 top-0 h-full w-20 -skew-x-12 bg-white/30 opacity-0 blur-md transition-all duration-700 group-hover:left-[120%] group-hover:opacity-100 dark:bg-white/10\">\n            </div>\n            <div class=\"relative\">\n              <span class=\"inline-flex size-10 items-center justify-center rounded-xl border bg-background/70 backdrop-blur transition-transform duration-300 group-hover:scale-110\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-layers size-5 text-foreground\">\n                  <path d=\"m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z\">\n                  </path>\n                  <path d=\"m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65\">\n                  </path>\n                  <path d=\"m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65\">\n                  </path>\n                </svg>\n              </span>\n              <h3 class=\"mt-4 font-semibold tracking-tight\">\n                拡張は自在\n              </h3>\n              <p class=\"mt-1 text-sm text-muted-foreground\">\n                プラグインで機能を足し算。\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"w-full px-6 py-16\">\n      <style>\n        @keyframes ab-rise {\n              from { opacity: 0; transform: translateY(18px) scale(.98); }\n              to { opacity: 1; transform: translateY(0) scale(1); }\n            }\n            .ab-tile { animation: ab-rise .6s cubic-bezier(.22,1,.36,1) both; }\n      </style>\n      <div class=\"mx-auto max-w-5xl\">\n        <div class=\"mb-10 max-w-xl\">\n          <h2 class=\"text-3xl font-semibold tracking-tight sm:text-4xl\">\n            必要な機能を、ひと目で。\n          </h2>\n          <p class=\"mt-3 text-pretty text-muted-foreground\">\n            役割の違うタイルを組み合わせ、製品の魅力を一画面に凝縮しました。\n          </p>\n        </div>\n        <div class=\"grid auto-rows-[minmax(140px,auto)] grid-cols-2 gap-4 sm:grid-cols-4\">\n          <div class=\"ab-tile group relative overflow-hidden rounded-2xl border bg-card p-5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl sm:col-span-2 sm:row-span-2\" style=\"animation-delay:0ms\">\n            <div aria-hidden=\"true\" class=\"pointer-events-none absolute -inset-px rounded-2xl bg-gradient-to-br opacity-0 transition-opacity duration-500 group-hover:opacity-100 from-violet-500/20 to-fuchsia-500/10\">\n            </div>\n            <div aria-hidden=\"true\" class=\"pointer-events-none absolute -left-20 top-0 h-full w-20 -skew-x-12 bg-white/30 opacity-0 blur-md transition-all duration-700 group-hover:left-[120%] group-hover:opacity-100 dark:bg-white/10\">\n            </div>\n            <div class=\"relative\">\n              <span class=\"inline-flex size-10 items-center justify-center rounded-xl border bg-background/70 backdrop-blur transition-transform duration-300 group-hover:scale-110\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-5 text-foreground\">\n                  <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                  </path>\n                  <path d=\"M20 3v4\">\n                  </path>\n                  <path d=\"M22 5h-4\">\n                  </path>\n                  <path d=\"M4 17v2\">\n                  </path>\n                  <path d=\"M5 18H3\">\n                  </path>\n                </svg>\n              </span>\n              <h3 class=\"mt-4 font-semibold tracking-tight\">\n                自動でひらめく\n              </h3>\n              <p class=\"mt-1 text-sm text-muted-foreground\">\n                面倒な設定は不要。最初の5分で価値が伝わる体験を。\n              </p>\n            </div>\n          </div>\n          <div class=\"ab-tile group relative overflow-hidden rounded-2xl border bg-card p-5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl\" style=\"animation-delay:80ms\">\n            <div aria-hidden=\"true\" class=\"pointer-events-none absolute -inset-px rounded-2xl bg-gradient-to-br opacity-0 transition-opacity duration-500 group-hover:opacity-100 from-amber-500/20 to-orange-500/10\">\n            </div>\n            <div aria-hidden=\"true\" class=\"pointer-events-none absolute -left-20 top-0 h-full w-20 -skew-x-12 bg-white/30 opacity-0 blur-md transition-all duration-700 group-hover:left-[120%] group-hover:opacity-100 dark:bg-white/10\">\n            </div>\n            <div class=\"relative\">\n              <span class=\"inline-flex size-10 items-center justify-center rounded-xl border bg-background/70 backdrop-blur transition-transform duration-300 group-hover:scale-110\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-zap size-5 text-foreground\">\n                  <path d=\"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z\">\n                  </path>\n                </svg>\n              </span>\n              <h3 class=\"mt-4 font-semibold tracking-tight\">\n                圧倒的な速さ\n              </h3>\n              <p class=\"mt-1 text-sm text-muted-foreground\">\n                ミリ秒単位の応答。\n              </p>\n            </div>\n          </div>\n          <div class=\"ab-tile group relative overflow-hidden rounded-2xl border bg-card p-5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl\" style=\"animation-delay:160ms\">\n            <div aria-hidden=\"true\" class=\"pointer-events-none absolute -inset-px rounded-2xl bg-gradient-to-br opacity-0 transition-opacity duration-500 group-hover:opacity-100 from-emerald-500/20 to-teal-500/10\">\n            </div>\n            <div aria-hidden=\"true\" class=\"pointer-events-none absolute -left-20 top-0 h-full w-20 -skew-x-12 bg-white/30 opacity-0 blur-md transition-all duration-700 group-hover:left-[120%] group-hover:opacity-100 dark:bg-white/10\">\n            </div>\n            <div class=\"relative\">\n              <span class=\"inline-flex size-10 items-center justify-center rounded-xl border bg-background/70 backdrop-blur transition-transform duration-300 group-hover:scale-110\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-shield size-5 text-foreground\">\n                  <path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\n                  </path>\n                </svg>\n              </span>\n              <h3 class=\"mt-4 font-semibold tracking-tight\">\n                堅牢な安全性\n              </h3>\n              <p class=\"mt-1 text-sm text-muted-foreground\">\n                暗号化を標準装備。\n              </p>\n            </div>\n          </div>\n          <div class=\"ab-tile group relative overflow-hidden rounded-2xl border bg-card p-5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl sm:col-span-2\" style=\"animation-delay:240ms\">\n            <div aria-hidden=\"true\" class=\"pointer-events-none absolute -inset-px rounded-2xl bg-gradient-to-br opacity-0 transition-opacity duration-500 group-hover:opacity-100 from-sky-500/20 to-cyan-500/10\">\n            </div>\n            <div aria-hidden=\"true\" class=\"pointer-events-none absolute -left-20 top-0 h-full w-20 -skew-x-12 bg-white/30 opacity-0 blur-md transition-all duration-700 group-hover:left-[120%] group-hover:opacity-100 dark:bg-white/10\">\n            </div>\n            <div class=\"relative\">\n              <span class=\"inline-flex size-10 items-center justify-center rounded-xl border bg-background/70 backdrop-blur transition-transform duration-300 group-hover:scale-110\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-chart-column size-5 text-foreground\">\n                  <path d=\"M3 3v16a2 2 0 0 0 2 2h16\">\n                  </path>\n                  <path d=\"M18 17V9\">\n                  </path>\n                  <path d=\"M13 17V5\">\n                  </path>\n                  <path d=\"M8 17v-3\">\n                  </path>\n                </svg>\n              </span>\n              <h3 class=\"mt-4 font-semibold tracking-tight\">\n                明快な分析\n              </h3>\n              <p class=\"mt-1 text-sm text-muted-foreground\">\n                数字で意思決定を支える、リアルタイムのダッシュボード。\n              </p>\n            </div>\n          </div>\n          <div class=\"ab-tile group relative overflow-hidden rounded-2xl border bg-card p-5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl\" style=\"animation-delay:320ms\">\n            <div aria-hidden=\"true\" class=\"pointer-events-none absolute -inset-px rounded-2xl bg-gradient-to-br opacity-0 transition-opacity duration-500 group-hover:opacity-100 from-indigo-500/20 to-blue-500/10\">\n            </div>\n            <div aria-hidden=\"true\" class=\"pointer-events-none absolute -left-20 top-0 h-full w-20 -skew-x-12 bg-white/30 opacity-0 blur-md transition-all duration-700 group-hover:left-[120%] group-hover:opacity-100 dark:bg-white/10\">\n            </div>\n            <div class=\"relative\">\n              <span class=\"inline-flex size-10 items-center justify-center rounded-xl border bg-background/70 backdrop-blur transition-transform duration-300 group-hover:scale-110\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-globe size-5 text-foreground\">\n                  <circle cx=\"12\" cy=\"12\" r=\"10\">\n                  </circle>\n                  <path d=\"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20\">\n                  </path>\n                  <path d=\"M2 12h20\">\n                  </path>\n                </svg>\n              </span>\n              <h3 class=\"mt-4 font-semibold tracking-tight\">\n                世界中で稼働\n              </h3>\n              <p class=\"mt-1 text-sm text-muted-foreground\">\n                エッジ配信。\n              </p>\n            </div>\n          </div>\n          <div class=\"ab-tile group relative overflow-hidden rounded-2xl border bg-card p-5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl\" style=\"animation-delay:400ms\">\n            <div aria-hidden=\"true\" class=\"pointer-events-none absolute -inset-px rounded-2xl bg-gradient-to-br opacity-0 transition-opacity duration-500 group-hover:opacity-100 from-rose-500/20 to-pink-500/10\">\n            </div>\n            <div aria-hidden=\"true\" class=\"pointer-events-none absolute -left-20 top-0 h-full w-20 -skew-x-12 bg-white/30 opacity-0 blur-md transition-all duration-700 group-hover:left-[120%] group-hover:opacity-100 dark:bg-white/10\">\n            </div>\n            <div class=\"relative\">\n              <span class=\"inline-flex size-10 items-center justify-center rounded-xl border bg-background/70 backdrop-blur transition-transform duration-300 group-hover:scale-110\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-layers size-5 text-foreground\">\n                  <path d=\"m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z\">\n                  </path>\n                  <path d=\"m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65\">\n                  </path>\n                  <path d=\"m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65\">\n                  </path>\n                </svg>\n              </span>\n              <h3 class=\"mt-4 font-semibold tracking-tight\">\n                拡張は自在\n              </h3>\n              <p class=\"mt-1 text-sm text-muted-foreground\">\n                プラグインで機能を足し算。\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "feature2-bento-with-mini-charts",
@@ -646,7 +646,7 @@
       ],
       "standalone": true,
       "source": "import type * as React from \"react\";\nimport { TrendingUp, Users, Activity, DollarSign } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"ミニチャート付きベント\",\n  category: \"マーケティング\",\n  description:\n    \"インラインSVGの折れ線・棒・ドーナツ・スパークラインを並べた、データ志向のベントグリッド。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"feature\", \"bento\", \"animation\"],\n};\n\nfunction Line() {\n  const pts = [8, 20, 14, 28, 22, 36, 30, 46];\n  const w = 200,\n    h = 64;\n  const max = Math.max(...pts);\n  const d = pts\n    .map((p, i) => {\n      const x = (i / (pts.length - 1)) * w;\n      const y = h - (p / max) * h;\n      return `${i === 0 ? \"M\" : \"L\"}${x.toFixed(1)},${y.toFixed(1)}`;\n    })\n    .join(\" \");\n  return (\n    <svg viewBox={`0 0 ${w} ${h}`} className=\"h-16 w-full\" preserveAspectRatio=\"none\">\n      <defs>\n        <linearGradient id=\"bmc-l\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop offset=\"0%\" stopColor=\"hsl(var(--primary))\" stopOpacity=\"0.3\" />\n          <stop offset=\"100%\" stopColor=\"hsl(var(--primary))\" stopOpacity=\"0\" />\n        </linearGradient>\n      </defs>\n      <path d={`${d} L${w},${h} L0,${h} Z`} fill=\"url(#bmc-l)\" />\n      <path\n        d={d}\n        fill=\"none\"\n        stroke=\"hsl(var(--primary))\"\n        strokeWidth=\"2.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        style={{\n          strokeDasharray: 600,\n          strokeDashoffset: 600,\n          animation: \"bmc-draw 1.4s ease-out forwards\",\n        }}\n      />\n    </svg>\n  );\n}\n\nfunction Bars() {\n  const bars = [40, 65, 50, 80, 60, 95];\n  return (\n    <div className=\"flex h-16 items-end gap-1.5\">\n      {bars.map((b, i) => (\n        <div\n          key={i}\n          className=\"flex-1 rounded-t bg-primary/70\"\n          style={{\n            height: `${b}%`,\n            transformOrigin: \"bottom\",\n            animation: `bmc-grow .7s ease-out both`,\n            animationDelay: `${i * 90}ms`,\n          }}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction Donut() {\n  const r = 26,\n    c = 2 * Math.PI * r;\n  const pct = 0.72;\n  return (\n    <svg viewBox=\"0 0 70 70\" className=\"size-20\">\n      <circle cx=\"35\" cy=\"35\" r={r} fill=\"none\" stroke=\"hsl(var(--muted))\" strokeWidth=\"8\" />\n      <circle\n        cx=\"35\"\n        cy=\"35\"\n        r={r}\n        fill=\"none\"\n        stroke=\"hsl(var(--primary))\"\n        strokeWidth=\"8\"\n        strokeLinecap=\"round\"\n        transform=\"rotate(-90 35 35)\"\n        style={\n          {\n            strokeDasharray: c,\n            strokeDashoffset: c,\n            animation: \"bmc-donut 1.2s ease-out forwards\",\n            \"--target\": c * (1 - pct),\n          } as React.CSSProperties\n        }\n      />\n      <text x=\"35\" y=\"39\" textAnchor=\"middle\" className=\"fill-foreground text-[14px] font-semibold\">\n        72%\n      </text>\n    </svg>\n  );\n}\n\nfunction Spark() {\n  const pts = [10, 14, 9, 18, 13, 22, 19, 28];\n  const w = 120,\n    h = 40,\n    max = Math.max(...pts);\n  const d = pts\n    .map((p, i) => `${i === 0 ? \"M\" : \"L\"}${(i / (pts.length - 1)) * w},${h - (p / max) * h}`)\n    .join(\" \");\n  return (\n    <svg viewBox={`0 0 ${w} ${h}`} className=\"h-10 w-full\" preserveAspectRatio=\"none\">\n      <path d={d} fill=\"none\" stroke=\"hsl(var(--primary))\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n\nconst STATS = [\n  { icon: TrendingUp, label: \"月間成長\", labelEn: \"Monthly growth\", value: \"+38%\" },\n  { icon: Users, label: \"アクティブ\", labelEn: \"Active users\", value: \"12,480\" },\n  { icon: Activity, label: \"稼働率\", labelEn: \"Uptime\", value: \"99.98%\" },\n  { icon: DollarSign, label: \"売上\", labelEn: \"Revenue\", value: \"¥4.2M\" },\n];\n\nexport default function BentoWithMiniCharts() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"w-full px-6 py-16\">\n      <style>{`\n        @keyframes bmc-draw { to { stroke-dashoffset: 0; } }\n        @keyframes bmc-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }\n        @keyframes bmc-donut { to { stroke-dashoffset: var(--target); } }\n      `}</style>\n      <div className=\"mx-auto max-w-5xl\">\n        <div className=\"mb-10 max-w-xl\">\n          <h2 className=\"text-3xl font-semibold tracking-tight sm:text-4xl\">\n            {en ? \"Your data starts to speak.\" : \"データが、語りはじめる。\"}\n          </h2>\n          <p className=\"mt-3 text-pretty text-muted-foreground\">\n            {en\n              ? \"The metrics that matter, in clear visuals on a single screen.\"\n              : \"重要な指標を、見やすいビジュアルで一画面に。\"}\n          </p>\n        </div>\n\n        <div className=\"grid gap-4 sm:grid-cols-4\">\n          <div className=\"rounded-2xl border bg-card p-5 sm:col-span-2 sm:row-span-2\">\n            <div className=\"flex items-center justify-between\">\n              <span className=\"text-sm font-medium text-muted-foreground\">\n                {en ? \"Traffic trend\" : \"トラフィック推移\"}\n              </span>\n              <span className=\"text-sm font-semibold text-emerald-500\">+24%</span>\n            </div>\n            <p className=\"mt-1 text-3xl font-semibold tracking-tight\">84.2k</p>\n            <div className=\"mt-6\">\n              <Line />\n            </div>\n          </div>\n\n          <div className=\"rounded-2xl border bg-card p-5 sm:col-span-2\">\n            <span className=\"text-sm font-medium text-muted-foreground\">\n              {en ? \"Weekly activity\" : \"週間アクティビティ\"}\n            </span>\n            <div className=\"mt-4\">\n              <Bars />\n            </div>\n          </div>\n\n          <div className=\"flex flex-col items-center justify-center rounded-2xl border bg-card p-5\">\n            <Donut />\n            <span className=\"mt-2 text-xs font-medium text-muted-foreground\">\n              {en ? \"Goal completion\" : \"目標達成率\"}\n            </span>\n          </div>\n\n          <div className=\"rounded-2xl border bg-card p-5\">\n            <span className=\"text-sm font-medium text-muted-foreground\">\n              {en ? \"Conversion rate\" : \"変換率\"}\n            </span>\n            <p className=\"mt-1 text-2xl font-semibold tracking-tight\">6.4%</p>\n            <div className=\"mt-3\">\n              <Spark />\n            </div>\n          </div>\n\n          {STATS.map((s) => {\n            const Icon = s.icon;\n            return (\n              <div\n                key={s.value}\n                className={cn(\n                  \"flex items-center gap-3 rounded-2xl border bg-card p-4 sm:col-span-2\"\n                )}\n              >\n                <span className=\"inline-flex size-10 items-center justify-center rounded-xl bg-muted\">\n                  <Icon className=\"size-5 text-primary\" />\n                </span>\n                <div>\n                  <p className=\"text-xs text-muted-foreground\">{en ? s.labelEn : s.label}</p>\n                  <p className=\"text-lg font-semibold tracking-tight\">{s.value}</p>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"w-full px-6 py-16\">\n      <style>\n        @keyframes bmc-draw { to { stroke-dashoffset: 0; } }\n            @keyframes bmc-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }\n            @keyframes bmc-donut { to { stroke-dashoffset: var(--target); } }\n      </style>\n      <div class=\"mx-auto max-w-5xl\">\n        <div class=\"mb-10 max-w-xl\">\n          <h2 class=\"text-3xl font-semibold tracking-tight sm:text-4xl\">\n            データが、語りはじめる。\n          </h2>\n          <p class=\"mt-3 text-pretty text-muted-foreground\">\n            重要な指標を、見やすいビジュアルで一画面に。\n          </p>\n        </div>\n        <div class=\"grid gap-4 sm:grid-cols-4\">\n          <div class=\"rounded-2xl border bg-card p-5 sm:col-span-2 sm:row-span-2\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-sm font-medium text-muted-foreground\">\n                トラフィック推移\n              </span>\n              <span class=\"text-sm font-semibold text-emerald-500\">\n                +24%\n              </span>\n            </div>\n            <p class=\"mt-1 text-3xl font-semibold tracking-tight\">\n              84.2k\n            </p>\n            <div class=\"mt-6\">\n              <svg viewBox=\"0 0 200 64\" class=\"h-16 w-full\" preserveAspectRatio=\"none\">\n                <defs>\n                  <linearGradient id=\"bmc-l\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop offset=\"0%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0.3\">\n                    </stop>\n                    <stop offset=\"100%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0\">\n                    </stop>\n                  </linearGradient>\n                </defs>\n                <path d=\"M0.0,52.9 L28.6,36.2 L57.1,44.5 L85.7,25.0 L114.3,33.4 L142.9,13.9 L171.4,22.3 L200.0,0.0 L200,64 L0,64 Z\" fill=\"url(#bmc-l)\">\n                </path>\n                <path d=\"M0.0,52.9 L28.6,36.2 L57.1,44.5 L85.7,25.0 L114.3,33.4 L142.9,13.9 L171.4,22.3 L200.0,0.0\" fill=\"none\" stroke=\"hsl(var(--primary))\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"stroke-dasharray:600;stroke-dashoffset:600;animation:bmc-draw 1.4s ease-out forwards\">\n                </path>\n              </svg>\n            </div>\n          </div>\n          <div class=\"rounded-2xl border bg-card p-5 sm:col-span-2\">\n            <span class=\"text-sm font-medium text-muted-foreground\">\n              週間アクティビティ\n            </span>\n            <div class=\"mt-4\">\n              <div class=\"flex h-16 items-end gap-1.5\">\n                <div class=\"flex-1 rounded-t bg-primary/70\" style=\"height:40%;transform-origin:bottom;animation:bmc-grow .7s ease-out both;animation-delay:0ms\">\n                </div>\n                <div class=\"flex-1 rounded-t bg-primary/70\" style=\"height:65%;transform-origin:bottom;animation:bmc-grow .7s ease-out both;animation-delay:90ms\">\n                </div>\n                <div class=\"flex-1 rounded-t bg-primary/70\" style=\"height:50%;transform-origin:bottom;animation:bmc-grow .7s ease-out both;animation-delay:180ms\">\n                </div>\n                <div class=\"flex-1 rounded-t bg-primary/70\" style=\"height:80%;transform-origin:bottom;animation:bmc-grow .7s ease-out both;animation-delay:270ms\">\n                </div>\n                <div class=\"flex-1 rounded-t bg-primary/70\" style=\"height:60%;transform-origin:bottom;animation:bmc-grow .7s ease-out both;animation-delay:360ms\">\n                </div>\n                <div class=\"flex-1 rounded-t bg-primary/70\" style=\"height:95%;transform-origin:bottom;animation:bmc-grow .7s ease-out both;animation-delay:450ms\">\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"flex flex-col items-center justify-center rounded-2xl border bg-card p-5\">\n            <svg viewBox=\"0 0 70 70\" class=\"size-20\">\n              <circle cx=\"35\" cy=\"35\" r=\"26\" fill=\"none\" stroke=\"hsl(var(--muted))\" stroke-width=\"8\">\n              </circle>\n              <circle cx=\"35\" cy=\"35\" r=\"26\" fill=\"none\" stroke=\"hsl(var(--primary))\" stroke-width=\"8\" stroke-linecap=\"round\" transform=\"rotate(-90 35 35)\" style=\"stroke-dasharray:163.36281798666926;stroke-dashoffset:163.36281798666926;animation:bmc-donut 1.2s ease-out forwards;--target:45.7415890362674\">\n              </circle>\n              <text x=\"35\" y=\"39\" text-anchor=\"middle\" class=\"fill-foreground text-[14px] font-semibold\">\n                72%\n              </text>\n            </svg>\n            <span class=\"mt-2 text-xs font-medium text-muted-foreground\">\n              目標達成率\n            </span>\n          </div>\n          <div class=\"rounded-2xl border bg-card p-5\">\n            <span class=\"text-sm font-medium text-muted-foreground\">\n              変換率\n            </span>\n            <p class=\"mt-1 text-2xl font-semibold tracking-tight\">\n              6.4%\n            </p>\n            <div class=\"mt-3\">\n              <svg viewBox=\"0 0 120 40\" class=\"h-10 w-full\" preserveAspectRatio=\"none\">\n                <path d=\"M0,25.714285714285715 L17.142857142857142,20 L34.285714285714285,27.142857142857142 L51.42857142857142,14.285714285714285 L68.57142857142857,21.428571428571427 L85.71428571428572,8.571428571428573 L102.85714285714285,12.857142857142854 L120,0\" fill=\"none\" stroke=\"hsl(var(--primary))\" stroke-width=\"2\" stroke-linecap=\"round\">\n                </path>\n              </svg>\n            </div>\n          </div>\n          <div class=\"flex items-center gap-3 rounded-2xl border bg-card p-4 sm:col-span-2\">\n            <span class=\"inline-flex size-10 items-center justify-center rounded-xl bg-muted\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trending-up size-5 text-primary\">\n                <polyline points=\"22 7 13.5 15.5 8.5 10.5 2 17\">\n                </polyline>\n                <polyline points=\"16 7 22 7 22 13\">\n                </polyline>\n              </svg>\n            </span>\n            <div>\n              <p class=\"text-xs text-muted-foreground\">\n                月間成長\n              </p>\n              <p class=\"text-lg font-semibold tracking-tight\">\n                +38%\n              </p>\n            </div>\n          </div>\n          <div class=\"flex items-center gap-3 rounded-2xl border bg-card p-4 sm:col-span-2\">\n            <span class=\"inline-flex size-10 items-center justify-center rounded-xl bg-muted\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-users size-5 text-primary\">\n                <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\">\n                </path>\n                <circle cx=\"9\" cy=\"7\" r=\"4\">\n                </circle>\n                <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\">\n                </path>\n                <path d=\"M16 3.13a4 4 0 0 1 0 7.75\">\n                </path>\n              </svg>\n            </span>\n            <div>\n              <p class=\"text-xs text-muted-foreground\">\n                アクティブ\n              </p>\n              <p class=\"text-lg font-semibold tracking-tight\">\n                12,480\n              </p>\n            </div>\n          </div>\n          <div class=\"flex items-center gap-3 rounded-2xl border bg-card p-4 sm:col-span-2\">\n            <span class=\"inline-flex size-10 items-center justify-center rounded-xl bg-muted\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-activity size-5 text-primary\">\n                <path d=\"M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2\">\n                </path>\n              </svg>\n            </span>\n            <div>\n              <p class=\"text-xs text-muted-foreground\">\n                稼働率\n              </p>\n              <p class=\"text-lg font-semibold tracking-tight\">\n                99.98%\n              </p>\n            </div>\n          </div>\n          <div class=\"flex items-center gap-3 rounded-2xl border bg-card p-4 sm:col-span-2\">\n            <span class=\"inline-flex size-10 items-center justify-center rounded-xl bg-muted\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-dollar-sign size-5 text-primary\">\n                <line x1=\"12\" x2=\"12\" y1=\"2\" y2=\"22\">\n                </line>\n                <path d=\"M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\">\n                </path>\n              </svg>\n            </span>\n            <div>\n              <p class=\"text-xs text-muted-foreground\">\n                売上\n              </p>\n              <p class=\"text-lg font-semibold tracking-tight\">\n                ¥4.2M\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"w-full px-6 py-16\">\n      <style>\n        @keyframes bmc-draw { to { stroke-dashoffset: 0; } }\n            @keyframes bmc-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }\n            @keyframes bmc-donut { to { stroke-dashoffset: var(--target); } }\n      </style>\n      <div class=\"mx-auto max-w-5xl\">\n        <div class=\"mb-10 max-w-xl\">\n          <h2 class=\"text-3xl font-semibold tracking-tight sm:text-4xl\">\n            データが、語りはじめる。\n          </h2>\n          <p class=\"mt-3 text-pretty text-muted-foreground\">\n            重要な指標を、見やすいビジュアルで一画面に。\n          </p>\n        </div>\n        <div class=\"grid gap-4 sm:grid-cols-4\">\n          <div class=\"rounded-2xl border bg-card p-5 sm:col-span-2 sm:row-span-2\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-sm font-medium text-muted-foreground\">\n                トラフィック推移\n              </span>\n              <span class=\"text-sm font-semibold text-emerald-500\">\n                +24%\n              </span>\n            </div>\n            <p class=\"mt-1 text-3xl font-semibold tracking-tight\">\n              84.2k\n            </p>\n            <div class=\"mt-6\">\n              <svg viewBox=\"0 0 200 64\" class=\"h-16 w-full\" preserveAspectRatio=\"none\">\n                <defs>\n                  <linearGradient id=\"bmc-l\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop offset=\"0%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0.3\">\n                    </stop>\n                    <stop offset=\"100%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0\">\n                    </stop>\n                  </linearGradient>\n                </defs>\n                <path d=\"M0.0,52.9 L28.6,36.2 L57.1,44.5 L85.7,25.0 L114.3,33.4 L142.9,13.9 L171.4,22.3 L200.0,0.0 L200,64 L0,64 Z\" fill=\"url(#bmc-l)\">\n                </path>\n                <path d=\"M0.0,52.9 L28.6,36.2 L57.1,44.5 L85.7,25.0 L114.3,33.4 L142.9,13.9 L171.4,22.3 L200.0,0.0\" fill=\"none\" stroke=\"hsl(var(--primary))\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"stroke-dasharray:600;stroke-dashoffset:600;animation:bmc-draw 1.4s ease-out forwards\">\n                </path>\n              </svg>\n            </div>\n          </div>\n          <div class=\"rounded-2xl border bg-card p-5 sm:col-span-2\">\n            <span class=\"text-sm font-medium text-muted-foreground\">\n              週間アクティビティ\n            </span>\n            <div class=\"mt-4\">\n              <div class=\"flex h-16 items-end gap-1.5\">\n                <div class=\"flex-1 rounded-t bg-primary/70\" style=\"height:40%;transform-origin:bottom;animation:bmc-grow .7s ease-out both;animation-delay:0ms\">\n                </div>\n                <div class=\"flex-1 rounded-t bg-primary/70\" style=\"height:65%;transform-origin:bottom;animation:bmc-grow .7s ease-out both;animation-delay:90ms\">\n                </div>\n                <div class=\"flex-1 rounded-t bg-primary/70\" style=\"height:50%;transform-origin:bottom;animation:bmc-grow .7s ease-out both;animation-delay:180ms\">\n                </div>\n                <div class=\"flex-1 rounded-t bg-primary/70\" style=\"height:80%;transform-origin:bottom;animation:bmc-grow .7s ease-out both;animation-delay:270ms\">\n                </div>\n                <div class=\"flex-1 rounded-t bg-primary/70\" style=\"height:60%;transform-origin:bottom;animation:bmc-grow .7s ease-out both;animation-delay:360ms\">\n                </div>\n                <div class=\"flex-1 rounded-t bg-primary/70\" style=\"height:95%;transform-origin:bottom;animation:bmc-grow .7s ease-out both;animation-delay:450ms\">\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"flex flex-col items-center justify-center rounded-2xl border bg-card p-5\">\n            <svg viewBox=\"0 0 70 70\" class=\"size-20\">\n              <circle cx=\"35\" cy=\"35\" r=\"26\" fill=\"none\" stroke=\"hsl(var(--muted))\" stroke-width=\"8\">\n              </circle>\n              <circle cx=\"35\" cy=\"35\" r=\"26\" fill=\"none\" stroke=\"hsl(var(--primary))\" stroke-width=\"8\" stroke-linecap=\"round\" transform=\"rotate(-90 35 35)\" style=\"stroke-dasharray:163.36281798666926;stroke-dashoffset:163.36281798666926;animation:bmc-donut 1.2s ease-out forwards;--target:45.7415890362674\">\n              </circle>\n              <text x=\"35\" y=\"39\" text-anchor=\"middle\" class=\"fill-foreground text-[14px] font-semibold\">\n                72%\n              </text>\n            </svg>\n            <span class=\"mt-2 text-xs font-medium text-muted-foreground\">\n              目標達成率\n            </span>\n          </div>\n          <div class=\"rounded-2xl border bg-card p-5\">\n            <span class=\"text-sm font-medium text-muted-foreground\">\n              変換率\n            </span>\n            <p class=\"mt-1 text-2xl font-semibold tracking-tight\">\n              6.4%\n            </p>\n            <div class=\"mt-3\">\n              <svg viewBox=\"0 0 120 40\" class=\"h-10 w-full\" preserveAspectRatio=\"none\">\n                <path d=\"M0,25.714285714285715 L17.142857142857142,20 L34.285714285714285,27.142857142857142 L51.42857142857142,14.285714285714285 L68.57142857142857,21.428571428571427 L85.71428571428572,8.571428571428573 L102.85714285714285,12.857142857142854 L120,0\" fill=\"none\" stroke=\"hsl(var(--primary))\" stroke-width=\"2\" stroke-linecap=\"round\">\n                </path>\n              </svg>\n            </div>\n          </div>\n          <div class=\"flex items-center gap-3 rounded-2xl border bg-card p-4 sm:col-span-2\">\n            <span class=\"inline-flex size-10 items-center justify-center rounded-xl bg-muted\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trending-up size-5 text-primary\">\n                <polyline points=\"22 7 13.5 15.5 8.5 10.5 2 17\">\n                </polyline>\n                <polyline points=\"16 7 22 7 22 13\">\n                </polyline>\n              </svg>\n            </span>\n            <div>\n              <p class=\"text-xs text-muted-foreground\">\n                月間成長\n              </p>\n              <p class=\"text-lg font-semibold tracking-tight\">\n                +38%\n              </p>\n            </div>\n          </div>\n          <div class=\"flex items-center gap-3 rounded-2xl border bg-card p-4 sm:col-span-2\">\n            <span class=\"inline-flex size-10 items-center justify-center rounded-xl bg-muted\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-users size-5 text-primary\">\n                <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\">\n                </path>\n                <circle cx=\"9\" cy=\"7\" r=\"4\">\n                </circle>\n                <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\">\n                </path>\n                <path d=\"M16 3.13a4 4 0 0 1 0 7.75\">\n                </path>\n              </svg>\n            </span>\n            <div>\n              <p class=\"text-xs text-muted-foreground\">\n                アクティブ\n              </p>\n              <p class=\"text-lg font-semibold tracking-tight\">\n                12,480\n              </p>\n            </div>\n          </div>\n          <div class=\"flex items-center gap-3 rounded-2xl border bg-card p-4 sm:col-span-2\">\n            <span class=\"inline-flex size-10 items-center justify-center rounded-xl bg-muted\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-activity size-5 text-primary\">\n                <path d=\"M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2\">\n                </path>\n              </svg>\n            </span>\n            <div>\n              <p class=\"text-xs text-muted-foreground\">\n                稼働率\n              </p>\n              <p class=\"text-lg font-semibold tracking-tight\">\n                99.98%\n              </p>\n            </div>\n          </div>\n          <div class=\"flex items-center gap-3 rounded-2xl border bg-card p-4 sm:col-span-2\">\n            <span class=\"inline-flex size-10 items-center justify-center rounded-xl bg-muted\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-dollar-sign size-5 text-primary\">\n                <line x1=\"12\" x2=\"12\" y1=\"2\" y2=\"22\">\n                </line>\n                <path d=\"M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\">\n                </path>\n              </svg>\n            </span>\n            <div>\n              <p class=\"text-xs text-muted-foreground\">\n                売上\n              </p>\n              <p class=\"text-lg font-semibold tracking-tight\">\n                ¥4.2M\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "feature2-comparison-us-vs-them",
@@ -660,7 +660,7 @@
       ],
       "standalone": true,
       "source": "import { Check, X, Sparkles } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"他社比較テーブル\",\n  category: \"マーケティング\",\n  description:\n    \"自社と他社を並べた比較表。自社列がハイライトされ、チェックが順に灯る演出付き。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"feature\", \"bento\", \"animation\"],\n};\n\nconst ROWS = [\n  {\n    id: \"setup\",\n    labelJa: \"セットアップ時間\",\n    labelEn: \"Setup time\",\n    us: { ja: \"5分\", en: \"5 min\" },\n    them: { ja: \"数日\", en: \"Days\" },\n  },\n  {\n    id: \"members\",\n    labelJa: \"無制限メンバー\",\n    labelEn: \"Unlimited members\",\n    us: true,\n    them: false,\n  },\n  {\n    id: \"sync\",\n    labelJa: \"リアルタイム同期\",\n    labelEn: \"Real-time sync\",\n    us: true,\n    them: true,\n  },\n  {\n    id: \"automation\",\n    labelJa: \"高度な自動化\",\n    labelEn: \"Advanced automation\",\n    us: true,\n    them: false,\n  },\n  {\n    id: \"support\",\n    labelJa: \"24時間サポート\",\n    labelEn: \"24/7 support\",\n    us: true,\n    them: false,\n  },\n  {\n    id: \"cap\",\n    labelJa: \"従量課金の上限\",\n    labelEn: \"Usage cap\",\n    us: { ja: \"なし\", en: \"None\" },\n    them: { ja: \"あり\", en: \"Yes\" },\n  },\n];\n\nfunction Cell({ value }: { value: boolean | { ja: string; en: string } }) {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  if (typeof value === \"object\")\n    return (\n      <span className=\"text-sm font-medium\">{en ? value.en : value.ja}</span>\n    );\n  return value ? (\n    <span className=\"inline-flex size-7 items-center justify-center rounded-full bg-emerald-500/15 text-emerald-600 dark:text-emerald-400\">\n      <Check className=\"size-4\" />\n    </span>\n  ) : (\n    <span className=\"inline-flex size-7 items-center justify-center rounded-full bg-muted text-muted-foreground\">\n      <X className=\"size-4\" />\n    </span>\n  );\n}\n\nexport default function ComparisonUsVsThem() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"w-full px-6 py-16\">\n      <style>{`\n        @keyframes cvt-row {\n          from { opacity: 0; transform: translateX(-10px); }\n          to { opacity: 1; transform: translateX(0); }\n        }\n      `}</style>\n      <div className=\"mx-auto max-w-3xl\">\n        <div className=\"mb-10 text-center\">\n          <h2 className=\"text-3xl font-semibold tracking-tight sm:text-4xl\">\n            {en ? \"Why teams choose us.\" : \"なぜ、選ばれるのか。\"}\n          </h2>\n          <p className=\"mx-auto mt-3 max-w-md text-pretty text-muted-foreground\">\n            {en\n              ? \"The difference, made clear with facts and figures.\"\n              : \"数字と事実で、違いをはっきりと。\"}\n          </p>\n        </div>\n\n        <div className=\"overflow-hidden rounded-3xl border bg-card\">\n          <div className=\"grid grid-cols-[1.4fr_1fr_1fr] items-center border-b bg-muted/40 px-5 py-4\">\n            <span className=\"text-sm font-medium text-muted-foreground\">\n              {en ? \"Feature\" : \"機能\"}\n            </span>\n            <span className=\"flex items-center justify-center gap-1.5 text-sm font-semibold\">\n              <Sparkles className=\"size-4 text-primary\" />\n              {en ? \"Us\" : \"自社\"}\n            </span>\n            <span className=\"text-center text-sm font-medium text-muted-foreground\">\n              {en ? \"Others\" : \"他社\"}\n            </span>\n          </div>\n\n          {ROWS.map((r, i) => (\n            <div\n              key={r.id}\n              className=\"grid grid-cols-[1.4fr_1fr_1fr] items-center border-b px-5 py-4 last:border-0\"\n              style={{ animation: \"cvt-row .5s both\", animationDelay: `${i * 70}ms` }}\n            >\n              <span className=\"text-sm font-medium\">\n                {en ? r.labelEn : r.labelJa}\n              </span>\n              <div\n                className={cn(\n                  \"flex justify-center rounded-xl py-2\",\n                  \"bg-primary/5 ring-1 ring-inset ring-primary/15\"\n                )}\n              >\n                <Cell value={r.us} />\n              </div>\n              <div className=\"flex justify-center\">\n                <Cell value={r.them} />\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"w-full px-6 py-16\">\n      <style>\n        @keyframes cvt-row {\n              from { opacity: 0; transform: translateX(-10px); }\n              to { opacity: 1; transform: translateX(0); }\n            }\n      </style>\n      <div class=\"mx-auto max-w-3xl\">\n        <div class=\"mb-10 text-center\">\n          <h2 class=\"text-3xl font-semibold tracking-tight sm:text-4xl\">\n            なぜ、選ばれるのか。\n          </h2>\n          <p class=\"mx-auto mt-3 max-w-md text-pretty text-muted-foreground\">\n            数字と事実で、違いをはっきりと。\n          </p>\n        </div>\n        <div class=\"overflow-hidden rounded-3xl border bg-card\">\n          <div class=\"grid grid-cols-[1.4fr_1fr_1fr] items-center border-b bg-muted/40 px-5 py-4\">\n            <span class=\"text-sm font-medium text-muted-foreground\">\n              機能\n            </span>\n            <span class=\"flex items-center justify-center gap-1.5 text-sm font-semibold\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-4 text-primary\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              自社\n            </span>\n            <span class=\"text-center text-sm font-medium text-muted-foreground\">\n              他社\n            </span>\n          </div>\n          <div class=\"grid grid-cols-[1.4fr_1fr_1fr] items-center border-b px-5 py-4 last:border-0\" style=\"animation:cvt-row .5s both;animation-delay:0ms\">\n            <span class=\"text-sm font-medium\">\n              セットアップ時間\n            </span>\n            <div class=\"flex justify-center rounded-xl py-2 bg-primary/5 ring-1 ring-inset ring-primary/15\">\n              <span class=\"text-sm font-medium\">\n                5分\n              </span>\n            </div>\n            <div class=\"flex justify-center\">\n              <span class=\"text-sm font-medium\">\n                数日\n              </span>\n            </div>\n          </div>\n          <div class=\"grid grid-cols-[1.4fr_1fr_1fr] items-center border-b px-5 py-4 last:border-0\" style=\"animation:cvt-row .5s both;animation-delay:70ms\">\n            <span class=\"text-sm font-medium\">\n              無制限メンバー\n            </span>\n            <div class=\"flex justify-center rounded-xl py-2 bg-primary/5 ring-1 ring-inset ring-primary/15\">\n              <span class=\"inline-flex size-7 items-center justify-center rounded-full bg-emerald-500/15 text-emerald-600 dark:text-emerald-400\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n            </div>\n            <div class=\"flex justify-center\">\n              <span class=\"inline-flex size-7 items-center justify-center rounded-full bg-muted text-muted-foreground\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-x size-4\">\n                  <path d=\"M18 6 6 18\">\n                  </path>\n                  <path d=\"m6 6 12 12\">\n                  </path>\n                </svg>\n              </span>\n            </div>\n          </div>\n          <div class=\"grid grid-cols-[1.4fr_1fr_1fr] items-center border-b px-5 py-4 last:border-0\" style=\"animation:cvt-row .5s both;animation-delay:140ms\">\n            <span class=\"text-sm font-medium\">\n              リアルタイム同期\n            </span>\n            <div class=\"flex justify-center rounded-xl py-2 bg-primary/5 ring-1 ring-inset ring-primary/15\">\n              <span class=\"inline-flex size-7 items-center justify-center rounded-full bg-emerald-500/15 text-emerald-600 dark:text-emerald-400\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n            </div>\n            <div class=\"flex justify-center\">\n              <span class=\"inline-flex size-7 items-center justify-center rounded-full bg-emerald-500/15 text-emerald-600 dark:text-emerald-400\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n            </div>\n          </div>\n          <div class=\"grid grid-cols-[1.4fr_1fr_1fr] items-center border-b px-5 py-4 last:border-0\" style=\"animation:cvt-row .5s both;animation-delay:210ms\">\n            <span class=\"text-sm font-medium\">\n              高度な自動化\n            </span>\n            <div class=\"flex justify-center rounded-xl py-2 bg-primary/5 ring-1 ring-inset ring-primary/15\">\n              <span class=\"inline-flex size-7 items-center justify-center rounded-full bg-emerald-500/15 text-emerald-600 dark:text-emerald-400\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n            </div>\n            <div class=\"flex justify-center\">\n              <span class=\"inline-flex size-7 items-center justify-center rounded-full bg-muted text-muted-foreground\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-x size-4\">\n                  <path d=\"M18 6 6 18\">\n                  </path>\n                  <path d=\"m6 6 12 12\">\n                  </path>\n                </svg>\n              </span>\n            </div>\n          </div>\n          <div class=\"grid grid-cols-[1.4fr_1fr_1fr] items-center border-b px-5 py-4 last:border-0\" style=\"animation:cvt-row .5s both;animation-delay:280ms\">\n            <span class=\"text-sm font-medium\">\n              24時間サポート\n            </span>\n            <div class=\"flex justify-center rounded-xl py-2 bg-primary/5 ring-1 ring-inset ring-primary/15\">\n              <span class=\"inline-flex size-7 items-center justify-center rounded-full bg-emerald-500/15 text-emerald-600 dark:text-emerald-400\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n            </div>\n            <div class=\"flex justify-center\">\n              <span class=\"inline-flex size-7 items-center justify-center rounded-full bg-muted text-muted-foreground\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-x size-4\">\n                  <path d=\"M18 6 6 18\">\n                  </path>\n                  <path d=\"m6 6 12 12\">\n                  </path>\n                </svg>\n              </span>\n            </div>\n          </div>\n          <div class=\"grid grid-cols-[1.4fr_1fr_1fr] items-center border-b px-5 py-4 last:border-0\" style=\"animation:cvt-row .5s both;animation-delay:350ms\">\n            <span class=\"text-sm font-medium\">\n              従量課金の上限\n            </span>\n            <div class=\"flex justify-center rounded-xl py-2 bg-primary/5 ring-1 ring-inset ring-primary/15\">\n              <span class=\"text-sm font-medium\">\n                なし\n              </span>\n            </div>\n            <div class=\"flex justify-center\">\n              <span class=\"text-sm font-medium\">\n                あり\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"w-full px-6 py-16\">\n      <style>\n        @keyframes cvt-row {\n              from { opacity: 0; transform: translateX(-10px); }\n              to { opacity: 1; transform: translateX(0); }\n            }\n      </style>\n      <div class=\"mx-auto max-w-3xl\">\n        <div class=\"mb-10 text-center\">\n          <h2 class=\"text-3xl font-semibold tracking-tight sm:text-4xl\">\n            なぜ、選ばれるのか。\n          </h2>\n          <p class=\"mx-auto mt-3 max-w-md text-pretty text-muted-foreground\">\n            数字と事実で、違いをはっきりと。\n          </p>\n        </div>\n        <div class=\"overflow-hidden rounded-3xl border bg-card\">\n          <div class=\"grid grid-cols-[1.4fr_1fr_1fr] items-center border-b bg-muted/40 px-5 py-4\">\n            <span class=\"text-sm font-medium text-muted-foreground\">\n              機能\n            </span>\n            <span class=\"flex items-center justify-center gap-1.5 text-sm font-semibold\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-4 text-primary\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              自社\n            </span>\n            <span class=\"text-center text-sm font-medium text-muted-foreground\">\n              他社\n            </span>\n          </div>\n          <div class=\"grid grid-cols-[1.4fr_1fr_1fr] items-center border-b px-5 py-4 last:border-0\" style=\"animation:cvt-row .5s both;animation-delay:0ms\">\n            <span class=\"text-sm font-medium\">\n              セットアップ時間\n            </span>\n            <div class=\"flex justify-center rounded-xl py-2 bg-primary/5 ring-1 ring-inset ring-primary/15\">\n              <span class=\"text-sm font-medium\">\n                5分\n              </span>\n            </div>\n            <div class=\"flex justify-center\">\n              <span class=\"text-sm font-medium\">\n                数日\n              </span>\n            </div>\n          </div>\n          <div class=\"grid grid-cols-[1.4fr_1fr_1fr] items-center border-b px-5 py-4 last:border-0\" style=\"animation:cvt-row .5s both;animation-delay:70ms\">\n            <span class=\"text-sm font-medium\">\n              無制限メンバー\n            </span>\n            <div class=\"flex justify-center rounded-xl py-2 bg-primary/5 ring-1 ring-inset ring-primary/15\">\n              <span class=\"inline-flex size-7 items-center justify-center rounded-full bg-emerald-500/15 text-emerald-600 dark:text-emerald-400\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n            </div>\n            <div class=\"flex justify-center\">\n              <span class=\"inline-flex size-7 items-center justify-center rounded-full bg-muted text-muted-foreground\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-x size-4\">\n                  <path d=\"M18 6 6 18\">\n                  </path>\n                  <path d=\"m6 6 12 12\">\n                  </path>\n                </svg>\n              </span>\n            </div>\n          </div>\n          <div class=\"grid grid-cols-[1.4fr_1fr_1fr] items-center border-b px-5 py-4 last:border-0\" style=\"animation:cvt-row .5s both;animation-delay:140ms\">\n            <span class=\"text-sm font-medium\">\n              リアルタイム同期\n            </span>\n            <div class=\"flex justify-center rounded-xl py-2 bg-primary/5 ring-1 ring-inset ring-primary/15\">\n              <span class=\"inline-flex size-7 items-center justify-center rounded-full bg-emerald-500/15 text-emerald-600 dark:text-emerald-400\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n            </div>\n            <div class=\"flex justify-center\">\n              <span class=\"inline-flex size-7 items-center justify-center rounded-full bg-emerald-500/15 text-emerald-600 dark:text-emerald-400\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n            </div>\n          </div>\n          <div class=\"grid grid-cols-[1.4fr_1fr_1fr] items-center border-b px-5 py-4 last:border-0\" style=\"animation:cvt-row .5s both;animation-delay:210ms\">\n            <span class=\"text-sm font-medium\">\n              高度な自動化\n            </span>\n            <div class=\"flex justify-center rounded-xl py-2 bg-primary/5 ring-1 ring-inset ring-primary/15\">\n              <span class=\"inline-flex size-7 items-center justify-center rounded-full bg-emerald-500/15 text-emerald-600 dark:text-emerald-400\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n            </div>\n            <div class=\"flex justify-center\">\n              <span class=\"inline-flex size-7 items-center justify-center rounded-full bg-muted text-muted-foreground\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-x size-4\">\n                  <path d=\"M18 6 6 18\">\n                  </path>\n                  <path d=\"m6 6 12 12\">\n                  </path>\n                </svg>\n              </span>\n            </div>\n          </div>\n          <div class=\"grid grid-cols-[1.4fr_1fr_1fr] items-center border-b px-5 py-4 last:border-0\" style=\"animation:cvt-row .5s both;animation-delay:280ms\">\n            <span class=\"text-sm font-medium\">\n              24時間サポート\n            </span>\n            <div class=\"flex justify-center rounded-xl py-2 bg-primary/5 ring-1 ring-inset ring-primary/15\">\n              <span class=\"inline-flex size-7 items-center justify-center rounded-full bg-emerald-500/15 text-emerald-600 dark:text-emerald-400\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n            </div>\n            <div class=\"flex justify-center\">\n              <span class=\"inline-flex size-7 items-center justify-center rounded-full bg-muted text-muted-foreground\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-x size-4\">\n                  <path d=\"M18 6 6 18\">\n                  </path>\n                  <path d=\"m6 6 12 12\">\n                  </path>\n                </svg>\n              </span>\n            </div>\n          </div>\n          <div class=\"grid grid-cols-[1.4fr_1fr_1fr] items-center border-b px-5 py-4 last:border-0\" style=\"animation:cvt-row .5s both;animation-delay:350ms\">\n            <span class=\"text-sm font-medium\">\n              従量課金の上限\n            </span>\n            <div class=\"flex justify-center rounded-xl py-2 bg-primary/5 ring-1 ring-inset ring-primary/15\">\n              <span class=\"text-sm font-medium\">\n                なし\n              </span>\n            </div>\n            <div class=\"flex justify-center\">\n              <span class=\"text-sm font-medium\">\n                あり\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "feature2-feature-spotlight",
@@ -674,7 +674,7 @@
       ],
       "standalone": true,
       "source": "import { Cpu, Gauge, Layers3, ShieldCheck } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"主役機能スポットライト\",\n  category: \"マーケティング\",\n  description:\n    \"ひとつの主力機能を大きく据え、周囲に補助機能を配置。中央に呼吸する光のスポットライト。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"feature\", \"bento\", \"animation\"],\n};\n\nconst SUB = [\n  {\n    icon: Gauge,\n    titleJa: \"高速処理\",\n    titleEn: \"High speed\",\n    bodyJa: \"ミリ秒単位の応答性能。\",\n    bodyEn: \"Millisecond response times.\",\n  },\n  {\n    icon: Layers3,\n    titleJa: \"拡張性\",\n    titleEn: \"Scalability\",\n    bodyJa: \"規模に合わせて自在に。\",\n    bodyEn: \"Scales freely with your needs.\",\n  },\n  {\n    icon: ShieldCheck,\n    titleJa: \"安全性\",\n    titleEn: \"Security\",\n    bodyJa: \"標準で暗号化を実装。\",\n    bodyEn: \"Encryption built in by default.\",\n  },\n];\n\nexport default function FeatureSpotlight() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"w-full px-6 py-16\">\n      <style>{`\n        @keyframes fs-breathe {\n          0%, 100% { opacity: .5; transform: scale(1); }\n          50% { opacity: .85; transform: scale(1.12); }\n        }\n      `}</style>\n      <div className=\"mx-auto max-w-5xl\">\n        <div className=\"relative overflow-hidden rounded-3xl border bg-card p-6 sm:p-10\">\n          <div\n            aria-hidden\n            className=\"pointer-events-none absolute left-1/2 top-1/3 size-72 -translate-x-1/2 rounded-full bg-primary/25 blur-3xl\"\n            style={{ animation: \"fs-breathe 5s ease-in-out infinite\" }}\n          />\n\n          <div className=\"relative text-center\">\n            <span className=\"inline-flex size-16 items-center justify-center rounded-2xl border bg-background shadow-sm\">\n              <Cpu className=\"size-8 text-primary\" />\n            </span>\n            <h2 className=\"mx-auto mt-5 max-w-lg text-balance text-3xl font-semibold tracking-tight sm:text-4xl\">\n              {en\n                ? \"One engine powers everything.\"\n                : \"ひとつのエンジンが、すべてを動かす。\"}\n            </h2>\n            <p className=\"mx-auto mt-3 max-w-md text-pretty text-muted-foreground\">\n              {en\n                ? \"A purpose-built core supports every feature behind the scenes — fast, and always on.\"\n                : \"独自の処理基盤が、あらゆる機能を裏側で支えます。だから速くて、止まらない。\"}\n            </p>\n          </div>\n\n          <div className=\"relative mt-10 grid gap-4 sm:grid-cols-3\">\n            {SUB.map((s) => {\n              const Icon = s.icon;\n              return (\n                <div\n                  key={s.titleEn}\n                  className={cn(\n                    \"group rounded-2xl border bg-background/70 p-5 backdrop-blur transition-transform duration-300 hover:-translate-y-1\"\n                  )}\n                >\n                  <span className=\"inline-flex size-10 items-center justify-center rounded-xl bg-muted transition-transform duration-300 group-hover:scale-110\">\n                    <Icon className=\"size-5 text-foreground\" />\n                  </span>\n                  <h3 className=\"mt-3 font-semibold tracking-tight\">\n                    {en ? s.titleEn : s.titleJa}\n                  </h3>\n                  <p className=\"mt-1 text-sm text-muted-foreground\">\n                    {en ? s.bodyEn : s.bodyJa}\n                  </p>\n                </div>\n              );\n            })}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"w-full px-6 py-16\">\n      <style>\n        @keyframes fs-breathe {\n              0%, 100% { opacity: .5; transform: scale(1); }\n              50% { opacity: .85; transform: scale(1.12); }\n            }\n      </style>\n      <div class=\"mx-auto max-w-5xl\">\n        <div class=\"relative overflow-hidden rounded-3xl border bg-card p-6 sm:p-10\">\n          <div aria-hidden=\"true\" class=\"pointer-events-none absolute left-1/2 top-1/3 size-72 -translate-x-1/2 rounded-full bg-primary/25 blur-3xl\" style=\"animation:fs-breathe 5s ease-in-out infinite\">\n          </div>\n          <div class=\"relative text-center\">\n            <span class=\"inline-flex size-16 items-center justify-center rounded-2xl border bg-background shadow-sm\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-cpu size-8 text-primary\">\n                <rect width=\"16\" height=\"16\" x=\"4\" y=\"4\" rx=\"2\">\n                </rect>\n                <rect width=\"6\" height=\"6\" x=\"9\" y=\"9\" rx=\"1\">\n                </rect>\n                <path d=\"M15 2v2\">\n                </path>\n                <path d=\"M15 20v2\">\n                </path>\n                <path d=\"M2 15h2\">\n                </path>\n                <path d=\"M2 9h2\">\n                </path>\n                <path d=\"M20 15h2\">\n                </path>\n                <path d=\"M20 9h2\">\n                </path>\n                <path d=\"M9 2v2\">\n                </path>\n                <path d=\"M9 20v2\">\n                </path>\n              </svg>\n            </span>\n            <h2 class=\"mx-auto mt-5 max-w-lg text-balance text-3xl font-semibold tracking-tight sm:text-4xl\">\n              ひとつのエンジンが、すべてを動かす。\n            </h2>\n            <p class=\"mx-auto mt-3 max-w-md text-pretty text-muted-foreground\">\n              独自の処理基盤が、あらゆる機能を裏側で支えます。だから速くて、止まらない。\n            </p>\n          </div>\n          <div class=\"relative mt-10 grid gap-4 sm:grid-cols-3\">\n            <div class=\"group rounded-2xl border bg-background/70 p-5 backdrop-blur transition-transform duration-300 hover:-translate-y-1\">\n              <span class=\"inline-flex size-10 items-center justify-center rounded-xl bg-muted transition-transform duration-300 group-hover:scale-110\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-gauge size-5 text-foreground\">\n                  <path d=\"m12 14 4-4\">\n                  </path>\n                  <path d=\"M3.34 19a10 10 0 1 1 17.32 0\">\n                  </path>\n                </svg>\n              </span>\n              <h3 class=\"mt-3 font-semibold tracking-tight\">\n                高速処理\n              </h3>\n              <p class=\"mt-1 text-sm text-muted-foreground\">\n                ミリ秒単位の応答性能。\n              </p>\n            </div>\n            <div class=\"group rounded-2xl border bg-background/70 p-5 backdrop-blur transition-transform duration-300 hover:-translate-y-1\">\n              <span class=\"inline-flex size-10 items-center justify-center rounded-xl bg-muted transition-transform duration-300 group-hover:scale-110\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-layers3 size-5 text-foreground\">\n                  <path d=\"m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z\">\n                  </path>\n                  <path d=\"m6.08 9.5-3.5 1.6a1 1 0 0 0 0 1.81l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9a1 1 0 0 0 0-1.83l-3.5-1.59\">\n                  </path>\n                  <path d=\"m6.08 14.5-3.5 1.6a1 1 0 0 0 0 1.81l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9a1 1 0 0 0 0-1.83l-3.5-1.59\">\n                  </path>\n                </svg>\n              </span>\n              <h3 class=\"mt-3 font-semibold tracking-tight\">\n                拡張性\n              </h3>\n              <p class=\"mt-1 text-sm text-muted-foreground\">\n                規模に合わせて自在に。\n              </p>\n            </div>\n            <div class=\"group rounded-2xl border bg-background/70 p-5 backdrop-blur transition-transform duration-300 hover:-translate-y-1\">\n              <span class=\"inline-flex size-10 items-center justify-center rounded-xl bg-muted transition-transform duration-300 group-hover:scale-110\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-shield-check size-5 text-foreground\">\n                  <path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\n                  </path>\n                  <path d=\"m9 12 2 2 4-4\">\n                  </path>\n                </svg>\n              </span>\n              <h3 class=\"mt-3 font-semibold tracking-tight\">\n                安全性\n              </h3>\n              <p class=\"mt-1 text-sm text-muted-foreground\">\n                標準で暗号化を実装。\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"w-full px-6 py-16\">\n      <style>\n        @keyframes fs-breathe {\n              0%, 100% { opacity: .5; transform: scale(1); }\n              50% { opacity: .85; transform: scale(1.12); }\n            }\n      </style>\n      <div class=\"mx-auto max-w-5xl\">\n        <div class=\"relative overflow-hidden rounded-3xl border bg-card p-6 sm:p-10\">\n          <div aria-hidden=\"true\" class=\"pointer-events-none absolute left-1/2 top-1/3 size-72 -translate-x-1/2 rounded-full bg-primary/25 blur-3xl\" style=\"animation:fs-breathe 5s ease-in-out infinite\">\n          </div>\n          <div class=\"relative text-center\">\n            <span class=\"inline-flex size-16 items-center justify-center rounded-2xl border bg-background shadow-sm\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-cpu size-8 text-primary\">\n                <rect width=\"16\" height=\"16\" x=\"4\" y=\"4\" rx=\"2\">\n                </rect>\n                <rect width=\"6\" height=\"6\" x=\"9\" y=\"9\" rx=\"1\">\n                </rect>\n                <path d=\"M15 2v2\">\n                </path>\n                <path d=\"M15 20v2\">\n                </path>\n                <path d=\"M2 15h2\">\n                </path>\n                <path d=\"M2 9h2\">\n                </path>\n                <path d=\"M20 15h2\">\n                </path>\n                <path d=\"M20 9h2\">\n                </path>\n                <path d=\"M9 2v2\">\n                </path>\n                <path d=\"M9 20v2\">\n                </path>\n              </svg>\n            </span>\n            <h2 class=\"mx-auto mt-5 max-w-lg text-balance text-3xl font-semibold tracking-tight sm:text-4xl\">\n              ひとつのエンジンが、すべてを動かす。\n            </h2>\n            <p class=\"mx-auto mt-3 max-w-md text-pretty text-muted-foreground\">\n              独自の処理基盤が、あらゆる機能を裏側で支えます。だから速くて、止まらない。\n            </p>\n          </div>\n          <div class=\"relative mt-10 grid gap-4 sm:grid-cols-3\">\n            <div class=\"group rounded-2xl border bg-background/70 p-5 backdrop-blur transition-transform duration-300 hover:-translate-y-1\">\n              <span class=\"inline-flex size-10 items-center justify-center rounded-xl bg-muted transition-transform duration-300 group-hover:scale-110\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-gauge size-5 text-foreground\">\n                  <path d=\"m12 14 4-4\">\n                  </path>\n                  <path d=\"M3.34 19a10 10 0 1 1 17.32 0\">\n                  </path>\n                </svg>\n              </span>\n              <h3 class=\"mt-3 font-semibold tracking-tight\">\n                高速処理\n              </h3>\n              <p class=\"mt-1 text-sm text-muted-foreground\">\n                ミリ秒単位の応答性能。\n              </p>\n            </div>\n            <div class=\"group rounded-2xl border bg-background/70 p-5 backdrop-blur transition-transform duration-300 hover:-translate-y-1\">\n              <span class=\"inline-flex size-10 items-center justify-center rounded-xl bg-muted transition-transform duration-300 group-hover:scale-110\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-layers3 size-5 text-foreground\">\n                  <path d=\"m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z\">\n                  </path>\n                  <path d=\"m6.08 9.5-3.5 1.6a1 1 0 0 0 0 1.81l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9a1 1 0 0 0 0-1.83l-3.5-1.59\">\n                  </path>\n                  <path d=\"m6.08 14.5-3.5 1.6a1 1 0 0 0 0 1.81l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9a1 1 0 0 0 0-1.83l-3.5-1.59\">\n                  </path>\n                </svg>\n              </span>\n              <h3 class=\"mt-3 font-semibold tracking-tight\">\n                拡張性\n              </h3>\n              <p class=\"mt-1 text-sm text-muted-foreground\">\n                規模に合わせて自在に。\n              </p>\n            </div>\n            <div class=\"group rounded-2xl border bg-background/70 p-5 backdrop-blur transition-transform duration-300 hover:-translate-y-1\">\n              <span class=\"inline-flex size-10 items-center justify-center rounded-xl bg-muted transition-transform duration-300 group-hover:scale-110\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-shield-check size-5 text-foreground\">\n                  <path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\n                  </path>\n                  <path d=\"m9 12 2 2 4-4\">\n                  </path>\n                </svg>\n              </span>\n              <h3 class=\"mt-3 font-semibold tracking-tight\">\n                安全性\n              </h3>\n              <p class=\"mt-1 text-sm text-muted-foreground\">\n                標準で暗号化を実装。\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "glass-glass-card",
@@ -688,7 +688,7 @@
       ],
       "standalone": true,
       "source": "import { ArrowUpRight, Layers } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"グラス・カード\",\n  category: \"グラスモーフィズム\",\n  description: \"サンセット調の背景に映える、上品な単体フロステッドガラスカード。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"glass\", \"frosted\", \"card\"],\n};\n\nexport default function GlassCard() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <div className=\"relative isolate flex w-full max-w-xl items-center justify-center overflow-hidden rounded-3xl bg-gradient-to-br from-orange-400 via-rose-500 to-purple-600 p-10\">\n      <div\n        aria-hidden\n        className=\"pointer-events-none absolute -left-16 -top-16 size-72 rounded-full bg-yellow-300/50 blur-3xl\"\n      />\n      <div\n        aria-hidden\n        className=\"pointer-events-none absolute -bottom-20 -right-10 size-80 rounded-full bg-indigo-500/40 blur-3xl\"\n      />\n\n      <div className=\"relative w-full max-w-sm rounded-2xl border border-white/20 bg-white/10 p-7 shadow-2xl backdrop-blur-xl\">\n        <div className=\"flex size-12 items-center justify-center rounded-xl border border-white/25 bg-white/15 text-white backdrop-blur\">\n          <Layers className=\"size-6\" />\n        </div>\n\n        <h3 className=\"mt-5 text-xl font-semibold text-white\">\n          {en ? \"Layered design\" : \"レイヤード・デザイン\"}\n        </h3>\n        <p className=\"mt-2 text-sm leading-relaxed text-white/80\">\n          {en\n            ? \"Stacking translucent glass layers lets the background colors shine through while keeping the information hierarchy clear.\"\n            : \"半透明のガラス層を重ねることで、背景の色彩を活かしながら情報の階層を明確に表現します。\"}\n        </p>\n\n        <a\n          href=\"#\"\n          className=\"group mt-6 inline-flex items-center gap-1.5 text-sm font-medium text-white\"\n        >\n          {en ? \"Learn more\" : \"もっと知る\"}\n          <ArrowUpRight className=\"size-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\" />\n        </a>\n      </div>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"relative isolate flex w-full max-w-xl items-center justify-center overflow-hidden rounded-3xl bg-gradient-to-br from-orange-400 via-rose-500 to-purple-600 p-10\">\n      <div aria-hidden=\"true\" class=\"pointer-events-none absolute -left-16 -top-16 size-72 rounded-full bg-yellow-300/50 blur-3xl\">\n      </div>\n      <div aria-hidden=\"true\" class=\"pointer-events-none absolute -bottom-20 -right-10 size-80 rounded-full bg-indigo-500/40 blur-3xl\">\n      </div>\n      <div class=\"relative w-full max-w-sm rounded-2xl border border-white/20 bg-white/10 p-7 shadow-2xl backdrop-blur-xl\">\n        <div class=\"flex size-12 items-center justify-center rounded-xl border border-white/25 bg-white/15 text-white backdrop-blur\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-layers size-6\">\n            <path d=\"m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z\">\n            </path>\n            <path d=\"m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65\">\n            </path>\n            <path d=\"m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65\">\n            </path>\n          </svg>\n        </div>\n        <h3 class=\"mt-5 text-xl font-semibold text-white\">\n          レイヤード・デザイン\n        </h3>\n        <p class=\"mt-2 text-sm leading-relaxed text-white/80\">\n          半透明のガラス層を重ねることで、背景の色彩を活かしながら情報の階層を明確に表現します。\n        </p>\n        <a href=\"#\" class=\"group mt-6 inline-flex items-center gap-1.5 text-sm font-medium text-white\">\n          もっと知る\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-up-right size-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\">\n            <path d=\"M7 7h10v10\">\n            </path>\n            <path d=\"M7 17 17 7\">\n            </path>\n          </svg>\n        </a>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"relative isolate flex w-full max-w-xl items-center justify-center overflow-hidden rounded-3xl bg-gradient-to-br from-orange-400 via-rose-500 to-purple-600 p-10\">\n      <div aria-hidden=\"true\" class=\"pointer-events-none absolute -left-16 -top-16 size-72 rounded-full bg-yellow-300/50 blur-3xl\">\n      </div>\n      <div aria-hidden=\"true\" class=\"pointer-events-none absolute -bottom-20 -right-10 size-80 rounded-full bg-indigo-500/40 blur-3xl\">\n      </div>\n      <div class=\"relative w-full max-w-sm rounded-2xl border border-white/20 bg-white/10 p-7 shadow-2xl backdrop-blur-xl\">\n        <div class=\"flex size-12 items-center justify-center rounded-xl border border-white/25 bg-white/15 text-white backdrop-blur\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-layers size-6\">\n            <path d=\"m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z\">\n            </path>\n            <path d=\"m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65\">\n            </path>\n            <path d=\"m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65\">\n            </path>\n          </svg>\n        </div>\n        <h3 class=\"mt-5 text-xl font-semibold text-white\">\n          レイヤード・デザイン\n        </h3>\n        <p class=\"mt-2 text-sm leading-relaxed text-white/80\">\n          半透明のガラス層を重ねることで、背景の色彩を活かしながら情報の階層を明確に表現します。\n        </p>\n        <a href=\"#\" class=\"group mt-6 inline-flex items-center gap-1.5 text-sm font-medium text-white\">\n          もっと知る\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-up-right size-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\">\n            <path d=\"M7 7h10v10\">\n            </path>\n            <path d=\"M7 17 17 7\">\n            </path>\n          </svg>\n        </a>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "glass-glass-cta",
@@ -702,7 +702,7 @@
       ],
       "standalone": true,
       "source": "import { ArrowRight, Rocket } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"グラス・CTAバンド\",\n  category: \"グラスモーフィズム\",\n  description: \"鮮烈なグラデーションの上に、フロステッドガラスのCTAバンドを配置。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"glass\", \"frosted\", \"cta\"],\n};\n\nexport default function GlassCTA() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"relative isolate w-full overflow-hidden bg-gradient-to-br from-indigo-700 via-fuchsia-600 to-rose-500 px-6 py-24\">\n      <div\n        aria-hidden\n        className=\"pointer-events-none absolute -left-24 top-0 size-96 rounded-full bg-cyan-300/40 blur-3xl\"\n      />\n      <div\n        aria-hidden\n        className=\"pointer-events-none absolute -right-24 bottom-0 size-96 rounded-full bg-amber-300/40 blur-3xl\"\n      />\n\n      <div className=\"relative mx-auto max-w-4xl\">\n        <div className=\"flex flex-col items-center gap-8 rounded-3xl border border-white/20 bg-white/10 p-10 text-center shadow-2xl backdrop-blur-xl sm:p-14\">\n          <span className=\"inline-flex items-center gap-2 rounded-full border border-white/25 bg-white/15 px-3 py-1 text-xs font-medium text-white backdrop-blur\">\n            <Rocket className=\"size-3.5\" />\n            {en ? \"Get started now\" : \"今すぐ始めよう\"}\n          </span>\n\n          <h2 className=\"max-w-2xl text-balance text-3xl font-semibold tracking-tight text-white sm:text-5xl\">\n            {en ? (\n              <>\n                Give your next project\n                <br className=\"hidden sm:block\" />\n                the best experience.\n              </>\n            ) : (\n              <>\n                次のプロジェクトを、\n                <br className=\"hidden sm:block\" />\n                最高の体験で。\n              </>\n            )}\n          </h2>\n\n          <p className=\"max-w-lg text-pretty text-white/80\">\n            {en\n              ? \"No credit card required. Set up in minutes and start building frosted UIs right away.\"\n              : \"クレジットカード不要。数分でセットアップし、すぐにフロステッドなUIを構築できます。\"}\n          </p>\n\n          <div className=\"flex flex-col items-center gap-3 sm:flex-row\">\n            <button className=\"group inline-flex w-full items-center justify-center gap-2 rounded-xl bg-white px-7 py-3 text-sm font-semibold text-indigo-700 shadow-lg transition hover:bg-white/90 sm:w-auto\">\n              {en ? \"Start for free\" : \"無料で始める\"}\n              <ArrowRight className=\"size-4 transition-transform group-hover:translate-x-0.5\" />\n            </button>\n            <button className=\"inline-flex w-full items-center justify-center rounded-xl border border-white/30 bg-white/10 px-7 py-3 text-sm font-semibold text-white backdrop-blur transition hover:bg-white/20 sm:w-auto\">\n              {en ? \"Book a demo\" : \"デモを予約\"}\n            </button>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"relative isolate w-full overflow-hidden bg-gradient-to-br from-indigo-700 via-fuchsia-600 to-rose-500 px-6 py-24\">\n      <div aria-hidden=\"true\" class=\"pointer-events-none absolute -left-24 top-0 size-96 rounded-full bg-cyan-300/40 blur-3xl\">\n      </div>\n      <div aria-hidden=\"true\" class=\"pointer-events-none absolute -right-24 bottom-0 size-96 rounded-full bg-amber-300/40 blur-3xl\">\n      </div>\n      <div class=\"relative mx-auto max-w-4xl\">\n        <div class=\"flex flex-col items-center gap-8 rounded-3xl border border-white/20 bg-white/10 p-10 text-center shadow-2xl backdrop-blur-xl sm:p-14\">\n          <span class=\"inline-flex items-center gap-2 rounded-full border border-white/25 bg-white/15 px-3 py-1 text-xs font-medium text-white backdrop-blur\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-rocket size-3.5\">\n              <path d=\"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z\">\n              </path>\n              <path d=\"m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z\">\n              </path>\n              <path d=\"M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0\">\n              </path>\n              <path d=\"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5\">\n              </path>\n            </svg>\n            今すぐ始めよう\n          </span>\n          <h2 class=\"max-w-2xl text-balance text-3xl font-semibold tracking-tight text-white sm:text-5xl\">\n            次のプロジェクトを、\n            <br class=\"hidden sm:block\"/>\n            最高の体験で。\n          </h2>\n          <p class=\"max-w-lg text-pretty text-white/80\">\n            クレジットカード不要。数分でセットアップし、すぐにフロステッドなUIを構築できます。\n          </p>\n          <div class=\"flex flex-col items-center gap-3 sm:flex-row\">\n            <button class=\"group inline-flex w-full items-center justify-center gap-2 rounded-xl bg-white px-7 py-3 text-sm font-semibold text-indigo-700 shadow-lg transition hover:bg-white/90 sm:w-auto\">\n              無料で始める\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right size-4 transition-transform group-hover:translate-x-0.5\">\n                <path d=\"M5 12h14\">\n                </path>\n                <path d=\"m12 5 7 7-7 7\">\n                </path>\n              </svg>\n            </button>\n            <button class=\"inline-flex w-full items-center justify-center rounded-xl border border-white/30 bg-white/10 px-7 py-3 text-sm font-semibold text-white backdrop-blur transition hover:bg-white/20 sm:w-auto\">\n              デモを予約\n            </button>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"relative isolate w-full overflow-hidden bg-gradient-to-br from-indigo-700 via-fuchsia-600 to-rose-500 px-6 py-24\">\n      <div aria-hidden=\"true\" class=\"pointer-events-none absolute -left-24 top-0 size-96 rounded-full bg-cyan-300/40 blur-3xl\">\n      </div>\n      <div aria-hidden=\"true\" class=\"pointer-events-none absolute -right-24 bottom-0 size-96 rounded-full bg-amber-300/40 blur-3xl\">\n      </div>\n      <div class=\"relative mx-auto max-w-4xl\">\n        <div class=\"flex flex-col items-center gap-8 rounded-3xl border border-white/20 bg-white/10 p-10 text-center shadow-2xl backdrop-blur-xl sm:p-14\">\n          <span class=\"inline-flex items-center gap-2 rounded-full border border-white/25 bg-white/15 px-3 py-1 text-xs font-medium text-white backdrop-blur\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-rocket size-3.5\">\n              <path d=\"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z\">\n              </path>\n              <path d=\"m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z\">\n              </path>\n              <path d=\"M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0\">\n              </path>\n              <path d=\"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5\">\n              </path>\n            </svg>\n            今すぐ始めよう\n          </span>\n          <h2 class=\"max-w-2xl text-balance text-3xl font-semibold tracking-tight text-white sm:text-5xl\">\n            次のプロジェクトを、\n            <br class=\"hidden sm:block\"/>\n            最高の体験で。\n          </h2>\n          <p class=\"max-w-lg text-pretty text-white/80\">\n            クレジットカード不要。数分でセットアップし、すぐにフロステッドなUIを構築できます。\n          </p>\n          <div class=\"flex flex-col items-center gap-3 sm:flex-row\">\n            <button class=\"group inline-flex w-full items-center justify-center gap-2 rounded-xl bg-white px-7 py-3 text-sm font-semibold text-indigo-700 shadow-lg transition hover:bg-white/90 sm:w-auto\">\n              無料で始める\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right size-4 transition-transform group-hover:translate-x-0.5\">\n                <path d=\"M5 12h14\">\n                </path>\n                <path d=\"m12 5 7 7-7 7\">\n                </path>\n              </svg>\n            </button>\n            <button class=\"inline-flex w-full items-center justify-center rounded-xl border border-white/30 bg-white/10 px-7 py-3 text-sm font-semibold text-white backdrop-blur transition hover:bg-white/20 sm:w-auto\">\n              デモを予約\n            </button>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "glass-glass-feature",
@@ -716,7 +716,7 @@
       ],
       "standalone": true,
       "source": "import { Gauge, Lock, Palette, Workflow } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"グラス・機能セクション\",\n  category: \"グラスモーフィズム\",\n  description: \"アクア〜パープルの背景にフロステッドガラスの機能カードを並べたセクション。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"glass\", \"frosted\", \"feature\"],\n};\n\nconst features = [\n  {\n    icon: Gauge,\n    titleJa: \"圧倒的な高速性\",\n    titleEn: \"Blazing fast\",\n    bodyJa: \"エッジ最適化により、世界中どこからでもミリ秒単位の応答を実現します。\",\n    bodyEn: \"Edge optimization delivers millisecond responses from anywhere in the world.\",\n  },\n  {\n    icon: Lock,\n    titleJa: \"堅牢なセキュリティ\",\n    titleEn: \"Rock-solid security\",\n    bodyJa: \"エンドツーエンド暗号化と細やかな権限制御で、データを守ります。\",\n    bodyEn: \"End-to-end encryption and granular permissions keep your data safe.\",\n  },\n  {\n    icon: Palette,\n    titleJa: \"美しいデザイン\",\n    titleEn: \"Beautiful design\",\n    bodyJa: \"細部までこだわったコンポーネントで、洗練された体験を構築できます。\",\n    bodyEn: \"Meticulously crafted components let you build a refined experience.\",\n  },\n  {\n    icon: Workflow,\n    titleJa: \"柔軟なワークフロー\",\n    titleEn: \"Flexible workflow\",\n    bodyJa: \"あらゆるツールと連携し、チームの生産性を最大化します。\",\n    bodyEn: \"Integrates with any tool to maximize your team's productivity.\",\n  },\n];\n\nexport default function GlassFeature() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"relative isolate w-full overflow-hidden bg-gradient-to-br from-cyan-500 via-blue-600 to-purple-700 px-6 py-24\">\n      <div\n        aria-hidden\n        className=\"pointer-events-none absolute -left-24 top-10 size-96 rounded-full bg-teal-300/40 blur-3xl\"\n      />\n      <div\n        aria-hidden\n        className=\"pointer-events-none absolute -right-20 bottom-0 size-96 rounded-full bg-fuchsia-400/40 blur-3xl\"\n      />\n\n      <div className=\"relative mx-auto max-w-5xl\">\n        <div className=\"mx-auto mb-14 max-w-xl text-center\">\n          <h2 className=\"text-3xl font-semibold tracking-tight text-white sm:text-4xl\">\n            {en ? \"One platform, everything you need\" : \"すべてが揃った、ひとつの基盤\"}\n          </h2>\n          <p className=\"mt-3 text-white/75\">\n            {en\n              ? \"From development to deploy to operations — every feature, in a frosted experience.\"\n              : \"開発からデプロイ、運用まで。必要な機能をフロステッドな体験で。\"}\n          </p>\n        </div>\n\n        <div className=\"grid gap-6 sm:grid-cols-2\">\n          {features.map((f) => (\n            <div\n              key={f.titleEn}\n              className=\"flex gap-5 rounded-2xl border border-white/20 bg-white/10 p-7 shadow-2xl backdrop-blur-xl\"\n            >\n              <div className=\"flex size-12 shrink-0 items-center justify-center rounded-xl border border-white/25 bg-white/15 text-white backdrop-blur\">\n                <f.icon className=\"size-6\" />\n              </div>\n              <div>\n                <h3 className=\"text-lg font-semibold text-white\">{en ? f.titleEn : f.titleJa}</h3>\n                <p className=\"mt-1.5 text-sm leading-relaxed text-white/80\">\n                  {en ? f.bodyEn : f.bodyJa}\n                </p>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"relative isolate w-full overflow-hidden bg-gradient-to-br from-cyan-500 via-blue-600 to-purple-700 px-6 py-24\">\n      <div aria-hidden=\"true\" class=\"pointer-events-none absolute -left-24 top-10 size-96 rounded-full bg-teal-300/40 blur-3xl\">\n      </div>\n      <div aria-hidden=\"true\" class=\"pointer-events-none absolute -right-20 bottom-0 size-96 rounded-full bg-fuchsia-400/40 blur-3xl\">\n      </div>\n      <div class=\"relative mx-auto max-w-5xl\">\n        <div class=\"mx-auto mb-14 max-w-xl text-center\">\n          <h2 class=\"text-3xl font-semibold tracking-tight text-white sm:text-4xl\">\n            すべてが揃った、ひとつの基盤\n          </h2>\n          <p class=\"mt-3 text-white/75\">\n            開発からデプロイ、運用まで。必要な機能をフロステッドな体験で。\n          </p>\n        </div>\n        <div class=\"grid gap-6 sm:grid-cols-2\">\n          <div class=\"flex gap-5 rounded-2xl border border-white/20 bg-white/10 p-7 shadow-2xl backdrop-blur-xl\">\n            <div class=\"flex size-12 shrink-0 items-center justify-center rounded-xl border border-white/25 bg-white/15 text-white backdrop-blur\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-gauge size-6\">\n                <path d=\"m12 14 4-4\">\n                </path>\n                <path d=\"M3.34 19a10 10 0 1 1 17.32 0\">\n                </path>\n              </svg>\n            </div>\n            <div>\n              <h3 class=\"text-lg font-semibold text-white\">\n                圧倒的な高速性\n              </h3>\n              <p class=\"mt-1.5 text-sm leading-relaxed text-white/80\">\n                エッジ最適化により、世界中どこからでもミリ秒単位の応答を実現します。\n              </p>\n            </div>\n          </div>\n          <div class=\"flex gap-5 rounded-2xl border border-white/20 bg-white/10 p-7 shadow-2xl backdrop-blur-xl\">\n            <div class=\"flex size-12 shrink-0 items-center justify-center rounded-xl border border-white/25 bg-white/15 text-white backdrop-blur\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-lock size-6\">\n                <rect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\" ry=\"2\">\n                </rect>\n                <path d=\"M7 11V7a5 5 0 0 1 10 0v4\">\n                </path>\n              </svg>\n            </div>\n            <div>\n              <h3 class=\"text-lg font-semibold text-white\">\n                堅牢なセキュリティ\n              </h3>\n              <p class=\"mt-1.5 text-sm leading-relaxed text-white/80\">\n                エンドツーエンド暗号化と細やかな権限制御で、データを守ります。\n              </p>\n            </div>\n          </div>\n          <div class=\"flex gap-5 rounded-2xl border border-white/20 bg-white/10 p-7 shadow-2xl backdrop-blur-xl\">\n            <div class=\"flex size-12 shrink-0 items-center justify-center rounded-xl border border-white/25 bg-white/15 text-white backdrop-blur\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-palette size-6\">\n                <circle cx=\"13.5\" cy=\"6.5\" r=\".5\" fill=\"currentColor\">\n                </circle>\n                <circle cx=\"17.5\" cy=\"10.5\" r=\".5\" fill=\"currentColor\">\n                </circle>\n                <circle cx=\"8.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\">\n                </circle>\n                <circle cx=\"6.5\" cy=\"12.5\" r=\".5\" fill=\"currentColor\">\n                </circle>\n                <path d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z\">\n                </path>\n              </svg>\n            </div>\n            <div>\n              <h3 class=\"text-lg font-semibold text-white\">\n                美しいデザイン\n              </h3>\n              <p class=\"mt-1.5 text-sm leading-relaxed text-white/80\">\n                細部までこだわったコンポーネントで、洗練された体験を構築できます。\n              </p>\n            </div>\n          </div>\n          <div class=\"flex gap-5 rounded-2xl border border-white/20 bg-white/10 p-7 shadow-2xl backdrop-blur-xl\">\n            <div class=\"flex size-12 shrink-0 items-center justify-center rounded-xl border border-white/25 bg-white/15 text-white backdrop-blur\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-workflow size-6\">\n                <rect width=\"8\" height=\"8\" x=\"3\" y=\"3\" rx=\"2\">\n                </rect>\n                <path d=\"M7 11v4a2 2 0 0 0 2 2h4\">\n                </path>\n                <rect width=\"8\" height=\"8\" x=\"13\" y=\"13\" rx=\"2\">\n                </rect>\n              </svg>\n            </div>\n            <div>\n              <h3 class=\"text-lg font-semibold text-white\">\n                柔軟なワークフロー\n              </h3>\n              <p class=\"mt-1.5 text-sm leading-relaxed text-white/80\">\n                あらゆるツールと連携し、チームの生産性を最大化します。\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"relative isolate w-full overflow-hidden bg-gradient-to-br from-cyan-500 via-blue-600 to-purple-700 px-6 py-24\">\n      <div aria-hidden=\"true\" class=\"pointer-events-none absolute -left-24 top-10 size-96 rounded-full bg-teal-300/40 blur-3xl\">\n      </div>\n      <div aria-hidden=\"true\" class=\"pointer-events-none absolute -right-20 bottom-0 size-96 rounded-full bg-fuchsia-400/40 blur-3xl\">\n      </div>\n      <div class=\"relative mx-auto max-w-5xl\">\n        <div class=\"mx-auto mb-14 max-w-xl text-center\">\n          <h2 class=\"text-3xl font-semibold tracking-tight text-white sm:text-4xl\">\n            すべてが揃った、ひとつの基盤\n          </h2>\n          <p class=\"mt-3 text-white/75\">\n            開発からデプロイ、運用まで。必要な機能をフロステッドな体験で。\n          </p>\n        </div>\n        <div class=\"grid gap-6 sm:grid-cols-2\">\n          <div class=\"flex gap-5 rounded-2xl border border-white/20 bg-white/10 p-7 shadow-2xl backdrop-blur-xl\">\n            <div class=\"flex size-12 shrink-0 items-center justify-center rounded-xl border border-white/25 bg-white/15 text-white backdrop-blur\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-gauge size-6\">\n                <path d=\"m12 14 4-4\">\n                </path>\n                <path d=\"M3.34 19a10 10 0 1 1 17.32 0\">\n                </path>\n              </svg>\n            </div>\n            <div>\n              <h3 class=\"text-lg font-semibold text-white\">\n                圧倒的な高速性\n              </h3>\n              <p class=\"mt-1.5 text-sm leading-relaxed text-white/80\">\n                エッジ最適化により、世界中どこからでもミリ秒単位の応答を実現します。\n              </p>\n            </div>\n          </div>\n          <div class=\"flex gap-5 rounded-2xl border border-white/20 bg-white/10 p-7 shadow-2xl backdrop-blur-xl\">\n            <div class=\"flex size-12 shrink-0 items-center justify-center rounded-xl border border-white/25 bg-white/15 text-white backdrop-blur\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-lock size-6\">\n                <rect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\" ry=\"2\">\n                </rect>\n                <path d=\"M7 11V7a5 5 0 0 1 10 0v4\">\n                </path>\n              </svg>\n            </div>\n            <div>\n              <h3 class=\"text-lg font-semibold text-white\">\n                堅牢なセキュリティ\n              </h3>\n              <p class=\"mt-1.5 text-sm leading-relaxed text-white/80\">\n                エンドツーエンド暗号化と細やかな権限制御で、データを守ります。\n              </p>\n            </div>\n          </div>\n          <div class=\"flex gap-5 rounded-2xl border border-white/20 bg-white/10 p-7 shadow-2xl backdrop-blur-xl\">\n            <div class=\"flex size-12 shrink-0 items-center justify-center rounded-xl border border-white/25 bg-white/15 text-white backdrop-blur\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-palette size-6\">\n                <circle cx=\"13.5\" cy=\"6.5\" r=\".5\" fill=\"currentColor\">\n                </circle>\n                <circle cx=\"17.5\" cy=\"10.5\" r=\".5\" fill=\"currentColor\">\n                </circle>\n                <circle cx=\"8.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\">\n                </circle>\n                <circle cx=\"6.5\" cy=\"12.5\" r=\".5\" fill=\"currentColor\">\n                </circle>\n                <path d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z\">\n                </path>\n              </svg>\n            </div>\n            <div>\n              <h3 class=\"text-lg font-semibold text-white\">\n                美しいデザイン\n              </h3>\n              <p class=\"mt-1.5 text-sm leading-relaxed text-white/80\">\n                細部までこだわったコンポーネントで、洗練された体験を構築できます。\n              </p>\n            </div>\n          </div>\n          <div class=\"flex gap-5 rounded-2xl border border-white/20 bg-white/10 p-7 shadow-2xl backdrop-blur-xl\">\n            <div class=\"flex size-12 shrink-0 items-center justify-center rounded-xl border border-white/25 bg-white/15 text-white backdrop-blur\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-workflow size-6\">\n                <rect width=\"8\" height=\"8\" x=\"3\" y=\"3\" rx=\"2\">\n                </rect>\n                <path d=\"M7 11v4a2 2 0 0 0 2 2h4\">\n                </path>\n                <rect width=\"8\" height=\"8\" x=\"13\" y=\"13\" rx=\"2\">\n                </rect>\n              </svg>\n            </div>\n            <div>\n              <h3 class=\"text-lg font-semibold text-white\">\n                柔軟なワークフロー\n              </h3>\n              <p class=\"mt-1.5 text-sm leading-relaxed text-white/80\">\n                あらゆるツールと連携し、チームの生産性を最大化します。\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "glass-glass-hero",
@@ -731,7 +731,7 @@
       ],
       "standalone": true,
       "source": "import { ArrowRight, Sparkles } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"グラス・ヒーロー\",\n  category: \"グラスモーフィズム\",\n  description: \"鮮やかなグラデーションとぼかしブロブの上にフロステッドガラスのカードを重ねたヒーロー。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"glass\", \"frosted\", \"blur\", \"hero\"],\n};\n\nexport default function GlassHero() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"relative isolate w-full overflow-hidden bg-gradient-to-br from-rose-500 via-fuchsia-600 to-indigo-700 px-6 py-28 sm:py-36\">\n      {/* color blobs */}\n      <div\n        aria-hidden\n        className=\"pointer-events-none absolute -left-24 top-[-6rem] size-[28rem] rounded-full bg-amber-400/50 blur-3xl\"\n      />\n      <div\n        aria-hidden\n        className=\"pointer-events-none absolute -right-20 bottom-[-8rem] size-[32rem] rounded-full bg-cyan-400/40 blur-3xl\"\n      />\n      <div\n        aria-hidden\n        className=\"pointer-events-none absolute left-1/2 top-1/3 size-[24rem] -translate-x-1/2 rounded-full bg-violet-500/40 blur-3xl\"\n      />\n\n      <div className=\"relative mx-auto max-w-2xl\">\n        <div className=\"rounded-3xl border border-white/20 bg-white/10 p-8 text-center shadow-2xl backdrop-blur-xl sm:p-12\">\n          <span className=\"inline-flex items-center gap-2 rounded-full border border-white/25 bg-white/15 px-3 py-1 text-xs font-medium text-white backdrop-blur\">\n            <Sparkles className=\"size-3.5\" />\n            {en ? \"A new design experience\" : \"新しいデザイン体験\"}\n          </span>\n\n          <h1 className=\"mt-6 text-balance text-4xl font-semibold tracking-tight text-white sm:text-6xl\">\n            {en ? (\n              <>\n                A translucent,\n                <br className=\"hidden sm:block\" />\n                next-generation interface.\n              </>\n            ) : (\n              <>\n                透明感のある、\n                <br className=\"hidden sm:block\" />\n                次世代のインターフェース。\n              </>\n            )}\n          </h1>\n\n          <p className=\"mx-auto mt-5 max-w-md text-pretty text-base text-white/80 sm:text-lg\">\n            {en\n              ? \"Frosted glass textures combine depth and refinement. Build UIs that elevate your content, instantly.\"\n              : \"フロステッドガラスの質感で、奥行きと洗練を両立。コンテンツを引き立てるUIを、すぐに。\"}\n          </p>\n\n          <div className=\"mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row\">\n            <button className=\"group inline-flex w-full items-center justify-center gap-2 rounded-xl bg-white px-6 py-3 text-sm font-semibold text-indigo-700 shadow-lg transition hover:bg-white/90 sm:w-auto\">\n              {en ? \"Get started\" : \"はじめる\"}\n              <ArrowRight className=\"size-4 transition-transform group-hover:translate-x-0.5\" />\n            </button>\n            <button className=\"inline-flex w-full items-center justify-center rounded-xl border border-white/30 bg-white/10 px-6 py-3 text-sm font-semibold text-white backdrop-blur transition hover:bg-white/20 sm:w-auto\">\n              {en ? \"Learn more\" : \"詳しく見る\"}\n            </button>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"relative isolate w-full overflow-hidden bg-gradient-to-br from-rose-500 via-fuchsia-600 to-indigo-700 px-6 py-28 sm:py-36\">\n      <div aria-hidden=\"true\" class=\"pointer-events-none absolute -left-24 top-[-6rem] size-[28rem] rounded-full bg-amber-400/50 blur-3xl\">\n      </div>\n      <div aria-hidden=\"true\" class=\"pointer-events-none absolute -right-20 bottom-[-8rem] size-[32rem] rounded-full bg-cyan-400/40 blur-3xl\">\n      </div>\n      <div aria-hidden=\"true\" class=\"pointer-events-none absolute left-1/2 top-1/3 size-[24rem] -translate-x-1/2 rounded-full bg-violet-500/40 blur-3xl\">\n      </div>\n      <div class=\"relative mx-auto max-w-2xl\">\n        <div class=\"rounded-3xl border border-white/20 bg-white/10 p-8 text-center shadow-2xl backdrop-blur-xl sm:p-12\">\n          <span class=\"inline-flex items-center gap-2 rounded-full border border-white/25 bg-white/15 px-3 py-1 text-xs font-medium text-white backdrop-blur\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5\">\n              <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n              </path>\n              <path d=\"M20 3v4\">\n              </path>\n              <path d=\"M22 5h-4\">\n              </path>\n              <path d=\"M4 17v2\">\n              </path>\n              <path d=\"M5 18H3\">\n              </path>\n            </svg>\n            新しいデザイン体験\n          </span>\n          <h1 class=\"mt-6 text-balance text-4xl font-semibold tracking-tight text-white sm:text-6xl\">\n            透明感のある、\n            <br class=\"hidden sm:block\"/>\n            次世代のインターフェース。\n          </h1>\n          <p class=\"mx-auto mt-5 max-w-md text-pretty text-base text-white/80 sm:text-lg\">\n            フロステッドガラスの質感で、奥行きと洗練を両立。コンテンツを引き立てるUIを、すぐに。\n          </p>\n          <div class=\"mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row\">\n            <button class=\"group inline-flex w-full items-center justify-center gap-2 rounded-xl bg-white px-6 py-3 text-sm font-semibold text-indigo-700 shadow-lg transition hover:bg-white/90 sm:w-auto\">\n              はじめる\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right size-4 transition-transform group-hover:translate-x-0.5\">\n                <path d=\"M5 12h14\">\n                </path>\n                <path d=\"m12 5 7 7-7 7\">\n                </path>\n              </svg>\n            </button>\n            <button class=\"inline-flex w-full items-center justify-center rounded-xl border border-white/30 bg-white/10 px-6 py-3 text-sm font-semibold text-white backdrop-blur transition hover:bg-white/20 sm:w-auto\">\n              詳しく見る\n            </button>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"relative isolate w-full overflow-hidden bg-gradient-to-br from-rose-500 via-fuchsia-600 to-indigo-700 px-6 py-28 sm:py-36\">\n      <div aria-hidden=\"true\" class=\"pointer-events-none absolute -left-24 top-[-6rem] size-[28rem] rounded-full bg-amber-400/50 blur-3xl\">\n      </div>\n      <div aria-hidden=\"true\" class=\"pointer-events-none absolute -right-20 bottom-[-8rem] size-[32rem] rounded-full bg-cyan-400/40 blur-3xl\">\n      </div>\n      <div aria-hidden=\"true\" class=\"pointer-events-none absolute left-1/2 top-1/3 size-[24rem] -translate-x-1/2 rounded-full bg-violet-500/40 blur-3xl\">\n      </div>\n      <div class=\"relative mx-auto max-w-2xl\">\n        <div class=\"rounded-3xl border border-white/20 bg-white/10 p-8 text-center shadow-2xl backdrop-blur-xl sm:p-12\">\n          <span class=\"inline-flex items-center gap-2 rounded-full border border-white/25 bg-white/15 px-3 py-1 text-xs font-medium text-white backdrop-blur\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5\">\n              <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n              </path>\n              <path d=\"M20 3v4\">\n              </path>\n              <path d=\"M22 5h-4\">\n              </path>\n              <path d=\"M4 17v2\">\n              </path>\n              <path d=\"M5 18H3\">\n              </path>\n            </svg>\n            新しいデザイン体験\n          </span>\n          <h1 class=\"mt-6 text-balance text-4xl font-semibold tracking-tight text-white sm:text-6xl\">\n            透明感のある、\n            <br class=\"hidden sm:block\"/>\n            次世代のインターフェース。\n          </h1>\n          <p class=\"mx-auto mt-5 max-w-md text-pretty text-base text-white/80 sm:text-lg\">\n            フロステッドガラスの質感で、奥行きと洗練を両立。コンテンツを引き立てるUIを、すぐに。\n          </p>\n          <div class=\"mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row\">\n            <button class=\"group inline-flex w-full items-center justify-center gap-2 rounded-xl bg-white px-6 py-3 text-sm font-semibold text-indigo-700 shadow-lg transition hover:bg-white/90 sm:w-auto\">\n              はじめる\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right size-4 transition-transform group-hover:translate-x-0.5\">\n                <path d=\"M5 12h14\">\n                </path>\n                <path d=\"m12 5 7 7-7 7\">\n                </path>\n              </svg>\n            </button>\n            <button class=\"inline-flex w-full items-center justify-center rounded-xl border border-white/30 bg-white/10 px-6 py-3 text-sm font-semibold text-white backdrop-blur transition hover:bg-white/20 sm:w-auto\">\n              詳しく見る\n            </button>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "hero-anim-animated-mesh-hero",
@@ -746,7 +746,7 @@
       ],
       "standalone": true,
       "source": "import { ArrowRight, Wand2 } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"メッシュ・ヒーロー\",\n  category: \"ヒーロー・LP\",\n  description: \"ぼかしたグラデーションのブロブがゆっくり変形・移動するメッシュ背景。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"hero\", \"animation\", \"mesh\", \"gradient\"],\n};\n\nexport default function AnimatedMeshHero() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"relative w-full overflow-hidden bg-[#0a0612] py-28 text-white\">\n      <style>{`\n        @keyframes mesh-a { 0%,100%{transform:translate(-10%,-6%) scale(1)} 33%{transform:translate(20%,12%) scale(1.25)} 66%{transform:translate(8%,-14%) scale(0.95)} }\n        @keyframes mesh-b { 0%,100%{transform:translate(12%,8%) scale(1.15)} 50%{transform:translate(-18%,-12%) scale(1)} }\n        @keyframes mesh-c { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(14%,-10%) scale(1.3)} }\n        @keyframes mesh-d { 0%,100%{transform:translate(-14%,10%) scale(1.1)} 50%{transform:translate(16%,6%) scale(0.9)} }\n        @media (prefers-reduced-motion: reduce){ .mesh-blob{animation:none !important} }\n      `}</style>\n\n      <div className=\"pointer-events-none absolute inset-0 overflow-hidden\">\n        <div\n          className=\"mesh-blob absolute left-[6%] top-[-10%] h-[55vh] w-[55vh] rounded-full opacity-70 blur-3xl\"\n          style={{\n            background:\n              \"radial-gradient(circle, rgba(217,70,239,0.7), transparent 70%)\",\n            animation: \"mesh-a 16s ease-in-out infinite\",\n          }}\n        />\n        <div\n          className=\"mesh-blob absolute right-[2%] top-[5%] h-[50vh] w-[50vh] rounded-full opacity-70 blur-3xl\"\n          style={{\n            background:\n              \"radial-gradient(circle, rgba(99,102,241,0.7), transparent 70%)\",\n            animation: \"mesh-b 20s ease-in-out infinite\",\n          }}\n        />\n        <div\n          className=\"mesh-blob absolute left-[34%] top-[28%] h-[48vh] w-[60vh] rounded-full opacity-60 blur-3xl\"\n          style={{\n            background:\n              \"radial-gradient(circle, rgba(45,212,191,0.6), transparent 70%)\",\n            animation: \"mesh-c 18s ease-in-out infinite\",\n          }}\n        />\n        <div\n          className=\"mesh-blob absolute right-[26%] bottom-[-10%] h-[45vh] w-[45vh] rounded-full opacity-60 blur-3xl\"\n          style={{\n            background:\n              \"radial-gradient(circle, rgba(251,146,60,0.55), transparent 70%)\",\n            animation: \"mesh-d 22s ease-in-out infinite\",\n          }}\n        />\n      </div>\n      <div className=\"absolute inset-0 bg-[#0a0612]/40\" />\n\n      <div className=\"relative mx-auto max-w-3xl px-6 text-center\">\n        <span className=\"inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-4 py-1.5 text-xs font-medium tracking-wide text-white/75 backdrop-blur\">\n          <Wand2 className=\"size-3.5 text-fuchsia-300\" />\n          {en ? \"AI-native design\" : \"AIネイティブ・デザイン\"}\n        </span>\n        <h1 className=\"mt-7 bg-gradient-to-b from-white to-white/60 bg-clip-text text-4xl font-bold tracking-tight text-transparent sm:text-6xl\">\n          {en ? (\n            <>\n              Where colors blend,\n              <br />\n              a canvas for creation\n            </>\n          ) : (\n            <>\n              色が溶け合う、\n              <br />\n              創造のためのキャンバス\n            </>\n          )}\n        </h1>\n        <p className=\"mx-auto mt-5 max-w-xl text-lg text-white/65\">\n          {en\n            ? \"A smoothly morphing gradient mesh — giving your ideas room to breathe.\"\n            : \"滑らかに変形するグラデーションメッシュ。あなたのアイデアに、空気のような余白を。\"}\n        </p>\n        <div className=\"mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row\">\n          <Button\n            size=\"lg\"\n            className=\"group bg-white text-black hover:bg-white/90\"\n          >\n            {en ? \"Start creating\" : \"作りはじめる\"}\n            <ArrowRight className=\"size-4 transition-transform group-hover:translate-x-0.5\" />\n          </Button>\n          <Button\n            size=\"lg\"\n            variant=\"outline\"\n            className=\"border-white/20 bg-white/5 text-white hover:bg-white/10 hover:text-white\"\n          >\n            {en ? \"Gallery\" : \"ギャラリー\"}\n          </Button>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"relative w-full overflow-hidden bg-[#0a0612] py-28 text-white\">\n      <style>\n        @keyframes mesh-a { 0%,100%{transform:translate(-10%,-6%) scale(1)} 33%{transform:translate(20%,12%) scale(1.25)} 66%{transform:translate(8%,-14%) scale(0.95)} }\n            @keyframes mesh-b { 0%,100%{transform:translate(12%,8%) scale(1.15)} 50%{transform:translate(-18%,-12%) scale(1)} }\n            @keyframes mesh-c { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(14%,-10%) scale(1.3)} }\n            @keyframes mesh-d { 0%,100%{transform:translate(-14%,10%) scale(1.1)} 50%{transform:translate(16%,6%) scale(0.9)} }\n            @media (prefers-reduced-motion: reduce){ .mesh-blob{animation:none !important} }\n      </style>\n      <div class=\"pointer-events-none absolute inset-0 overflow-hidden\">\n        <div class=\"mesh-blob absolute left-[6%] top-[-10%] h-[55vh] w-[55vh] rounded-full opacity-70 blur-3xl\" style=\"background:radial-gradient(circle, rgba(217,70,239,0.7), transparent 70%);animation:mesh-a 16s ease-in-out infinite\">\n        </div>\n        <div class=\"mesh-blob absolute right-[2%] top-[5%] h-[50vh] w-[50vh] rounded-full opacity-70 blur-3xl\" style=\"background:radial-gradient(circle, rgba(99,102,241,0.7), transparent 70%);animation:mesh-b 20s ease-in-out infinite\">\n        </div>\n        <div class=\"mesh-blob absolute left-[34%] top-[28%] h-[48vh] w-[60vh] rounded-full opacity-60 blur-3xl\" style=\"background:radial-gradient(circle, rgba(45,212,191,0.6), transparent 70%);animation:mesh-c 18s ease-in-out infinite\">\n        </div>\n        <div class=\"mesh-blob absolute right-[26%] bottom-[-10%] h-[45vh] w-[45vh] rounded-full opacity-60 blur-3xl\" style=\"background:radial-gradient(circle, rgba(251,146,60,0.55), transparent 70%);animation:mesh-d 22s ease-in-out infinite\">\n        </div>\n      </div>\n      <div class=\"absolute inset-0 bg-[#0a0612]/40\">\n      </div>\n      <div class=\"relative mx-auto max-w-3xl px-6 text-center\">\n        <span class=\"inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-4 py-1.5 text-xs font-medium tracking-wide text-white/75 backdrop-blur\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-wand-sparkles size-3.5 text-fuchsia-300\">\n            <path d=\"m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72\">\n            </path>\n            <path d=\"m14 7 3 3\">\n            </path>\n            <path d=\"M5 6v4\">\n            </path>\n            <path d=\"M19 14v4\">\n            </path>\n            <path d=\"M10 2v2\">\n            </path>\n            <path d=\"M7 8H3\">\n            </path>\n            <path d=\"M21 16h-4\">\n            </path>\n            <path d=\"M11 3H9\">\n            </path>\n          </svg>\n          AIネイティブ・デザイン\n        </span>\n        <h1 class=\"mt-7 bg-gradient-to-b from-white to-white/60 bg-clip-text text-4xl font-bold tracking-tight text-transparent sm:text-6xl\">\n          色が溶け合う、\n          <br/>\n          創造のためのキャンバス\n        </h1>\n        <p class=\"mx-auto mt-5 max-w-xl text-lg text-white/65\">\n          滑らかに変形するグラデーションメッシュ。あなたのアイデアに、空気のような余白を。\n        </p>\n        <div class=\"mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row\">\n          <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 h-10 rounded-md px-6 group bg-white text-black hover:bg-white/90\">\n            作りはじめる\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right size-4 transition-transform group-hover:translate-x-0.5\">\n              <path d=\"M5 12h14\">\n              </path>\n              <path d=\"m12 5 7 7-7 7\">\n              </path>\n            </svg>\n          </button>\n          <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border h-10 rounded-md px-6 border-white/20 bg-white/5 text-white hover:bg-white/10 hover:text-white\">\n            ギャラリー\n          </button>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"relative w-full overflow-hidden bg-[#0a0612] py-28 text-white\">\n      <style>\n        @keyframes mesh-a { 0%,100%{transform:translate(-10%,-6%) scale(1)} 33%{transform:translate(20%,12%) scale(1.25)} 66%{transform:translate(8%,-14%) scale(0.95)} }\n            @keyframes mesh-b { 0%,100%{transform:translate(12%,8%) scale(1.15)} 50%{transform:translate(-18%,-12%) scale(1)} }\n            @keyframes mesh-c { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(14%,-10%) scale(1.3)} }\n            @keyframes mesh-d { 0%,100%{transform:translate(-14%,10%) scale(1.1)} 50%{transform:translate(16%,6%) scale(0.9)} }\n            @media (prefers-reduced-motion: reduce){ .mesh-blob{animation:none !important} }\n      </style>\n      <div class=\"pointer-events-none absolute inset-0 overflow-hidden\">\n        <div class=\"mesh-blob absolute left-[6%] top-[-10%] h-[55vh] w-[55vh] rounded-full opacity-70 blur-3xl\" style=\"background:radial-gradient(circle, rgba(217,70,239,0.7), transparent 70%);animation:mesh-a 16s ease-in-out infinite\">\n        </div>\n        <div class=\"mesh-blob absolute right-[2%] top-[5%] h-[50vh] w-[50vh] rounded-full opacity-70 blur-3xl\" style=\"background:radial-gradient(circle, rgba(99,102,241,0.7), transparent 70%);animation:mesh-b 20s ease-in-out infinite\">\n        </div>\n        <div class=\"mesh-blob absolute left-[34%] top-[28%] h-[48vh] w-[60vh] rounded-full opacity-60 blur-3xl\" style=\"background:radial-gradient(circle, rgba(45,212,191,0.6), transparent 70%);animation:mesh-c 18s ease-in-out infinite\">\n        </div>\n        <div class=\"mesh-blob absolute right-[26%] bottom-[-10%] h-[45vh] w-[45vh] rounded-full opacity-60 blur-3xl\" style=\"background:radial-gradient(circle, rgba(251,146,60,0.55), transparent 70%);animation:mesh-d 22s ease-in-out infinite\">\n        </div>\n      </div>\n      <div class=\"absolute inset-0 bg-[#0a0612]/40\">\n      </div>\n      <div class=\"relative mx-auto max-w-3xl px-6 text-center\">\n        <span class=\"inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-4 py-1.5 text-xs font-medium tracking-wide text-white/75 backdrop-blur\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-wand-sparkles size-3.5 text-fuchsia-300\">\n            <path d=\"m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72\">\n            </path>\n            <path d=\"m14 7 3 3\">\n            </path>\n            <path d=\"M5 6v4\">\n            </path>\n            <path d=\"M19 14v4\">\n            </path>\n            <path d=\"M10 2v2\">\n            </path>\n            <path d=\"M7 8H3\">\n            </path>\n            <path d=\"M21 16h-4\">\n            </path>\n            <path d=\"M11 3H9\">\n            </path>\n          </svg>\n          AIネイティブ・デザイン\n        </span>\n        <h1 class=\"mt-7 bg-gradient-to-b from-white to-white/60 bg-clip-text text-4xl font-bold tracking-tight text-transparent sm:text-6xl\">\n          色が溶け合う、\n          <br/>\n          創造のためのキャンバス\n        </h1>\n        <p class=\"mx-auto mt-5 max-w-xl text-lg text-white/65\">\n          滑らかに変形するグラデーションメッシュ。あなたのアイデアに、空気のような余白を。\n        </p>\n        <div class=\"mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row\">\n          <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 h-10 rounded-md px-6 group bg-white text-black hover:bg-white/90\">\n            作りはじめる\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right size-4 transition-transform group-hover:translate-x-0.5\">\n              <path d=\"M5 12h14\">\n              </path>\n              <path d=\"m12 5 7 7-7 7\">\n              </path>\n            </svg>\n          </button>\n          <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border h-10 rounded-md px-6 border-white/20 bg-white/5 text-white hover:bg-white/10 hover:text-white\">\n            ギャラリー\n          </button>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "hero-anim-aurora-hero",
@@ -761,7 +761,7 @@
       ],
       "standalone": true,
       "source": "import { ArrowRight, Sparkles } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"オーロラ・ヒーロー\",\n  category: \"ヒーロー・LP\",\n  description: \"中央のヒーローの背後でオーロラ状のグラデーションがゆっくり漂う。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"hero\", \"animation\", \"aurora\", \"gradient\"],\n};\n\nexport default function AuroraHero() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"relative w-full overflow-hidden bg-[#05060f] py-28 text-white\">\n      <style>{`\n        @keyframes aurora-h-1 { 0%,100%{transform:translate3d(-12%,-8%,0) rotate(0deg) scale(1.1)} 50%{transform:translate3d(14%,10%,0) rotate(22deg) scale(1.35)} }\n        @keyframes aurora-h-2 { 0%,100%{transform:translate3d(12%,6%,0) rotate(0deg) scale(1.2)} 50%{transform:translate3d(-16%,-10%,0) rotate(-18deg) scale(1)} }\n        @keyframes aurora-h-3 { 0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.55} 50%{transform:translate3d(-8%,12%,0) scale(1.25);opacity:.85} }\n        @keyframes aurora-fade { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }\n        @media (prefers-reduced-motion: reduce){ .aurora-h-blob,.aurora-h-rise{animation:none !important} }\n      `}</style>\n\n      <div className=\"pointer-events-none absolute inset-0 overflow-hidden\">\n        <div\n          className=\"aurora-h-blob absolute left-[8%] top-[-20%] h-[60vh] w-[60vh] rounded-full opacity-70 blur-[90px]\"\n          style={{\n            background:\n              \"radial-gradient(circle, rgba(56,189,248,0.75), transparent 70%)\",\n            animation: \"aurora-h-1 15s ease-in-out infinite\",\n          }}\n        />\n        <div\n          className=\"aurora-h-blob absolute right-[4%] top-[-5%] h-[55vh] w-[55vh] rounded-full opacity-60 blur-[100px]\"\n          style={{\n            background:\n              \"radial-gradient(circle, rgba(168,85,247,0.75), transparent 70%)\",\n            animation: \"aurora-h-2 19s ease-in-out infinite\",\n          }}\n        />\n        <div\n          className=\"aurora-h-blob absolute left-[28%] top-[15%] h-[50vh] w-[70vh] rounded-full blur-[110px]\"\n          style={{\n            background:\n              \"radial-gradient(circle, rgba(52,211,153,0.6), transparent 70%)\",\n            animation: \"aurora-h-3 17s ease-in-out infinite\",\n          }}\n        />\n      </div>\n\n      <div\n        className=\"absolute inset-0 opacity-[0.18]\"\n        style={{\n          backgroundImage:\n            \"linear-gradient(rgba(255,255,255,0.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.6) 1px, transparent 1px)\",\n          backgroundSize: \"56px 56px\",\n          maskImage:\n            \"radial-gradient(ellipse 60% 50% at 50% 40%, #000 40%, transparent 100%)\",\n          WebkitMaskImage:\n            \"radial-gradient(ellipse 60% 50% at 50% 40%, #000 40%, transparent 100%)\",\n        }}\n      />\n\n      <div className=\"relative mx-auto max-w-3xl px-6 text-center\">\n        <span\n          className=\"aurora-h-rise inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-4 py-1.5 text-xs font-medium tracking-wide text-white/75 backdrop-blur\"\n          style={{ animation: \"aurora-fade .7s ease-out both\" }}\n        >\n          <Sparkles className=\"size-3.5 text-sky-300\" />\n          {en ? \"v2.0 released\" : \"v2.0 リリース\"}\n        </span>\n        <h1\n          className=\"aurora-h-rise mt-7 bg-gradient-to-b from-white to-white/60 bg-clip-text text-4xl font-bold tracking-tight text-transparent sm:text-6xl\"\n          style={{ animation: \"aurora-fade .7s ease-out .08s both\" }}\n        >\n          {en ? (\n            <>\n              Where light shimmers,\n              <br />\n              a next-gen product experience\n            </>\n          ) : (\n            <>\n              光がゆらめく、\n              <br />\n              次世代のプロダクト体験\n            </>\n          )}\n        </h1>\n        <p\n          className=\"aurora-h-rise mx-auto mt-5 max-w-xl text-lg text-white/60\"\n          style={{ animation: \"aurora-fade .7s ease-out .16s both\" }}\n        >\n          {en\n            ? \"Behind drifting aurora-like gradients, bring your team's work into one place.\"\n            : \"オーロラのように漂うグラデーションの背後で、チームの仕事を一つの場所に。\"}\n        </p>\n        <div\n          className=\"aurora-h-rise mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row\"\n          style={{ animation: \"aurora-fade .7s ease-out .24s both\" }}\n        >\n          <Button\n            size=\"lg\"\n            className=\"group bg-white text-black hover:bg-white/90\"\n          >\n            {en ? \"Start for free\" : \"無料で始める\"}\n            <ArrowRight className=\"size-4 transition-transform group-hover:translate-x-0.5\" />\n          </Button>\n          <Button\n            size=\"lg\"\n            variant=\"outline\"\n            className=\"border-white/20 bg-white/5 text-white hover:bg-white/10 hover:text-white\"\n          >\n            {en ? \"Watch demo\" : \"デモを見る\"}\n          </Button>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"relative w-full overflow-hidden bg-[#05060f] py-28 text-white\">\n      <style>\n        @keyframes aurora-h-1 { 0%,100%{transform:translate3d(-12%,-8%,0) rotate(0deg) scale(1.1)} 50%{transform:translate3d(14%,10%,0) rotate(22deg) scale(1.35)} }\n            @keyframes aurora-h-2 { 0%,100%{transform:translate3d(12%,6%,0) rotate(0deg) scale(1.2)} 50%{transform:translate3d(-16%,-10%,0) rotate(-18deg) scale(1)} }\n            @keyframes aurora-h-3 { 0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.55} 50%{transform:translate3d(-8%,12%,0) scale(1.25);opacity:.85} }\n            @keyframes aurora-fade { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }\n            @media (prefers-reduced-motion: reduce){ .aurora-h-blob,.aurora-h-rise{animation:none !important} }\n      </style>\n      <div class=\"pointer-events-none absolute inset-0 overflow-hidden\">\n        <div class=\"aurora-h-blob absolute left-[8%] top-[-20%] h-[60vh] w-[60vh] rounded-full opacity-70 blur-[90px]\" style=\"background:radial-gradient(circle, rgba(56,189,248,0.75), transparent 70%);animation:aurora-h-1 15s ease-in-out infinite\">\n        </div>\n        <div class=\"aurora-h-blob absolute right-[4%] top-[-5%] h-[55vh] w-[55vh] rounded-full opacity-60 blur-[100px]\" style=\"background:radial-gradient(circle, rgba(168,85,247,0.75), transparent 70%);animation:aurora-h-2 19s ease-in-out infinite\">\n        </div>\n        <div class=\"aurora-h-blob absolute left-[28%] top-[15%] h-[50vh] w-[70vh] rounded-full blur-[110px]\" style=\"background:radial-gradient(circle, rgba(52,211,153,0.6), transparent 70%);animation:aurora-h-3 17s ease-in-out infinite\">\n        </div>\n      </div>\n      <div class=\"absolute inset-0 opacity-[0.18]\" style=\"background-image:linear-gradient(rgba(255,255,255,0.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.6) 1px, transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 60% 50% at 50% 40%, #000 40%, transparent 100%);-webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 40%, #000 40%, transparent 100%)\">\n      </div>\n      <div class=\"relative mx-auto max-w-3xl px-6 text-center\">\n        <span class=\"aurora-h-rise inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-4 py-1.5 text-xs font-medium tracking-wide text-white/75 backdrop-blur\" style=\"animation:aurora-fade .7s ease-out both\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-sky-300\">\n            <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n            </path>\n            <path d=\"M20 3v4\">\n            </path>\n            <path d=\"M22 5h-4\">\n            </path>\n            <path d=\"M4 17v2\">\n            </path>\n            <path d=\"M5 18H3\">\n            </path>\n          </svg>\n          v2.0 リリース\n        </span>\n        <h1 class=\"aurora-h-rise mt-7 bg-gradient-to-b from-white to-white/60 bg-clip-text text-4xl font-bold tracking-tight text-transparent sm:text-6xl\" style=\"animation:aurora-fade .7s ease-out .08s both\">\n          光がゆらめく、\n          <br/>\n          次世代のプロダクト体験\n        </h1>\n        <p class=\"aurora-h-rise mx-auto mt-5 max-w-xl text-lg text-white/60\" style=\"animation:aurora-fade .7s ease-out .16s both\">\n          オーロラのように漂うグラデーションの背後で、チームの仕事を一つの場所に。\n        </p>\n        <div class=\"aurora-h-rise mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row\" style=\"animation:aurora-fade .7s ease-out .24s both\">\n          <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 h-10 rounded-md px-6 group bg-white text-black hover:bg-white/90\">\n            無料で始める\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right size-4 transition-transform group-hover:translate-x-0.5\">\n              <path d=\"M5 12h14\">\n              </path>\n              <path d=\"m12 5 7 7-7 7\">\n              </path>\n            </svg>\n          </button>\n          <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border h-10 rounded-md px-6 border-white/20 bg-white/5 text-white hover:bg-white/10 hover:text-white\">\n            デモを見る\n          </button>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"relative w-full overflow-hidden bg-[#05060f] py-28 text-white\">\n      <style>\n        @keyframes aurora-h-1 { 0%,100%{transform:translate3d(-12%,-8%,0) rotate(0deg) scale(1.1)} 50%{transform:translate3d(14%,10%,0) rotate(22deg) scale(1.35)} }\n            @keyframes aurora-h-2 { 0%,100%{transform:translate3d(12%,6%,0) rotate(0deg) scale(1.2)} 50%{transform:translate3d(-16%,-10%,0) rotate(-18deg) scale(1)} }\n            @keyframes aurora-h-3 { 0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.55} 50%{transform:translate3d(-8%,12%,0) scale(1.25);opacity:.85} }\n            @keyframes aurora-fade { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }\n            @media (prefers-reduced-motion: reduce){ .aurora-h-blob,.aurora-h-rise{animation:none !important} }\n      </style>\n      <div class=\"pointer-events-none absolute inset-0 overflow-hidden\">\n        <div class=\"aurora-h-blob absolute left-[8%] top-[-20%] h-[60vh] w-[60vh] rounded-full opacity-70 blur-[90px]\" style=\"background:radial-gradient(circle, rgba(56,189,248,0.75), transparent 70%);animation:aurora-h-1 15s ease-in-out infinite\">\n        </div>\n        <div class=\"aurora-h-blob absolute right-[4%] top-[-5%] h-[55vh] w-[55vh] rounded-full opacity-60 blur-[100px]\" style=\"background:radial-gradient(circle, rgba(168,85,247,0.75), transparent 70%);animation:aurora-h-2 19s ease-in-out infinite\">\n        </div>\n        <div class=\"aurora-h-blob absolute left-[28%] top-[15%] h-[50vh] w-[70vh] rounded-full blur-[110px]\" style=\"background:radial-gradient(circle, rgba(52,211,153,0.6), transparent 70%);animation:aurora-h-3 17s ease-in-out infinite\">\n        </div>\n      </div>\n      <div class=\"absolute inset-0 opacity-[0.18]\" style=\"background-image:linear-gradient(rgba(255,255,255,0.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.6) 1px, transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 60% 50% at 50% 40%, #000 40%, transparent 100%);-webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 40%, #000 40%, transparent 100%)\">\n      </div>\n      <div class=\"relative mx-auto max-w-3xl px-6 text-center\">\n        <span class=\"aurora-h-rise inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-4 py-1.5 text-xs font-medium tracking-wide text-white/75 backdrop-blur\" style=\"animation:aurora-fade .7s ease-out both\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-sky-300\">\n            <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n            </path>\n            <path d=\"M20 3v4\">\n            </path>\n            <path d=\"M22 5h-4\">\n            </path>\n            <path d=\"M4 17v2\">\n            </path>\n            <path d=\"M5 18H3\">\n            </path>\n          </svg>\n          v2.0 リリース\n        </span>\n        <h1 class=\"aurora-h-rise mt-7 bg-gradient-to-b from-white to-white/60 bg-clip-text text-4xl font-bold tracking-tight text-transparent sm:text-6xl\" style=\"animation:aurora-fade .7s ease-out .08s both\">\n          光がゆらめく、\n          <br/>\n          次世代のプロダクト体験\n        </h1>\n        <p class=\"aurora-h-rise mx-auto mt-5 max-w-xl text-lg text-white/60\" style=\"animation:aurora-fade .7s ease-out .16s both\">\n          オーロラのように漂うグラデーションの背後で、チームの仕事を一つの場所に。\n        </p>\n        <div class=\"aurora-h-rise mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row\" style=\"animation:aurora-fade .7s ease-out .24s both\">\n          <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 h-10 rounded-md px-6 group bg-white text-black hover:bg-white/90\">\n            無料で始める\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right size-4 transition-transform group-hover:translate-x-0.5\">\n              <path d=\"M5 12h14\">\n              </path>\n              <path d=\"m12 5 7 7-7 7\">\n              </path>\n            </svg>\n          </button>\n          <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border h-10 rounded-md px-6 border-white/20 bg-white/5 text-white hover:bg-white/10 hover:text-white\">\n            デモを見る\n          </button>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "hero-anim-bento-hero",
@@ -775,7 +775,7 @@
       ],
       "standalone": true,
       "source": "import {\n  ArrowRight,\n  Activity,\n  Shield,\n  Sparkles,\n  Globe2,\n  Zap,\n} from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"ベント・ヒーロー\",\n  category: \"ヒーロー・LP\",\n  description: \"左にコピー、右に発光・ホバーするアニメーション付きベントグリッド。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"hero\", \"animation\", \"bento\"],\n};\n\nconst tiles = [\n  {\n    icon: Activity,\n    ja: \"リアルタイム分析\",\n    en: \"Real-time analytics\",\n    span: \"col-span-2\",\n    accent: \"rgba(56,189,248,0.5)\",\n    delay: \"0s\",\n  },\n  {\n    icon: Shield,\n    ja: \"セキュア\",\n    en: \"Secure\",\n    span: \"\",\n    accent: \"rgba(52,211,153,0.5)\",\n    delay: \"0.6s\",\n  },\n  {\n    icon: Zap,\n    ja: \"高速\",\n    en: \"Fast\",\n    span: \"\",\n    accent: \"rgba(251,191,36,0.5)\",\n    delay: \"1.2s\",\n  },\n  {\n    icon: Globe2,\n    ja: \"グローバル配信\",\n    en: \"Global delivery\",\n    span: \"col-span-2\",\n    accent: \"rgba(168,85,247,0.5)\",\n    delay: \"1.8s\",\n  },\n];\n\nexport default function BentoHero() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"relative w-full overflow-hidden bg-[#060710] py-24 text-white\">\n      <style>{`\n        @keyframes bento-pulse { 0%,100%{opacity:.35} 50%{opacity:.85} }\n        @media (prefers-reduced-motion: reduce){ .bento-glow{animation:none !important} }\n      `}</style>\n\n      <div\n        className=\"pointer-events-none absolute right-0 top-0 h-[60vh] w-[60vw] opacity-50 blur-[120px]\"\n        style={{\n          background:\n            \"radial-gradient(circle, rgba(99,102,241,0.4), transparent 70%)\",\n        }}\n      />\n\n      <div className=\"relative mx-auto grid max-w-6xl items-center gap-12 px-6 lg:grid-cols-2\">\n        <div className=\"text-center lg:text-left\">\n          <span className=\"inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-4 py-1.5 text-xs font-medium tracking-wide text-white/70 backdrop-blur\">\n            <Sparkles className=\"size-3.5 text-indigo-300\" />\n            {en ? \"All-in-one platform\" : \"オールインワン・プラットフォーム\"}\n          </span>\n          <h1 className=\"mt-7 bg-gradient-to-b from-white to-white/55 bg-clip-text text-4xl font-bold tracking-tight text-transparent sm:text-5xl\">\n            {en ? (\n              <>\n                Every feature you need,\n                <br />\n                on a single screen\n              </>\n            ) : (\n              <>\n                必要な機能が、\n                <br />\n                ひとつの画面に\n              </>\n            )}\n          </h1>\n          <p className=\"mx-auto mt-5 max-w-md text-lg text-white/55 lg:mx-0\">\n            {en\n              ? \"Analytics, security, and delivery unified — bringing scattered tools together as one.\"\n              : \"分析・セキュリティ・配信を統合。バラバラなツールを一つにまとめます。\"}\n          </p>\n          <div className=\"mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row lg:justify-start\">\n            <Button\n              size=\"lg\"\n              className=\"group bg-white text-black hover:bg-white/90\"\n            >\n              {en ? \"Start for free\" : \"無料で始める\"}\n              <ArrowRight className=\"size-4 transition-transform group-hover:translate-x-0.5\" />\n            </Button>\n            <Button\n              size=\"lg\"\n              variant=\"outline\"\n              className=\"border-white/20 bg-white/5 text-white hover:bg-white/10 hover:text-white\"\n            >\n              {en ? \"All features\" : \"機能一覧\"}\n            </Button>\n          </div>\n        </div>\n\n        <div className=\"grid grid-cols-3 gap-4\">\n          {tiles.map((t) => {\n            const Icon = t.icon;\n            return (\n              <div\n                key={t.en}\n                className={cn(\n                  \"group relative overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03] p-5 transition-all duration-300 hover:-translate-y-1 hover:border-white/25 hover:bg-white/[0.06]\",\n                  t.span\n                )}\n              >\n                <div\n                  className=\"bento-glow pointer-events-none absolute -right-8 -top-8 h-24 w-24 rounded-full blur-2xl\"\n                  style={{\n                    background: t.accent,\n                    animation: `bento-pulse 4s ease-in-out ${t.delay} infinite`,\n                  }}\n                />\n                <Icon className=\"relative size-5 text-white/80 transition-transform group-hover:scale-110\" />\n                <p className=\"relative mt-8 text-sm font-medium text-white/85\">\n                  {en ? t.en : t.ja}\n                </p>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"relative w-full overflow-hidden bg-[#060710] py-24 text-white\">\n      <style>\n        @keyframes bento-pulse { 0%,100%{opacity:.35} 50%{opacity:.85} }\n            @media (prefers-reduced-motion: reduce){ .bento-glow{animation:none !important} }\n      </style>\n      <div class=\"pointer-events-none absolute right-0 top-0 h-[60vh] w-[60vw] opacity-50 blur-[120px]\" style=\"background:radial-gradient(circle, rgba(99,102,241,0.4), transparent 70%)\">\n      </div>\n      <div class=\"relative mx-auto grid max-w-6xl items-center gap-12 px-6 lg:grid-cols-2\">\n        <div class=\"text-center lg:text-left\">\n          <span class=\"inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-4 py-1.5 text-xs font-medium tracking-wide text-white/70 backdrop-blur\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-indigo-300\">\n              <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n              </path>\n              <path d=\"M20 3v4\">\n              </path>\n              <path d=\"M22 5h-4\">\n              </path>\n              <path d=\"M4 17v2\">\n              </path>\n              <path d=\"M5 18H3\">\n              </path>\n            </svg>\n            オールインワン・プラットフォーム\n          </span>\n          <h1 class=\"mt-7 bg-gradient-to-b from-white to-white/55 bg-clip-text text-4xl font-bold tracking-tight text-transparent sm:text-5xl\">\n            必要な機能が、\n            <br/>\n            ひとつの画面に\n          </h1>\n          <p class=\"mx-auto mt-5 max-w-md text-lg text-white/55 lg:mx-0\">\n            分析・セキュリティ・配信を統合。バラバラなツールを一つにまとめます。\n          </p>\n          <div class=\"mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row lg:justify-start\">\n            <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 h-10 rounded-md px-6 group bg-white text-black hover:bg-white/90\">\n              無料で始める\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right size-4 transition-transform group-hover:translate-x-0.5\">\n                <path d=\"M5 12h14\">\n                </path>\n                <path d=\"m12 5 7 7-7 7\">\n                </path>\n              </svg>\n            </button>\n            <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border h-10 rounded-md px-6 border-white/20 bg-white/5 text-white hover:bg-white/10 hover:text-white\">\n              機能一覧\n            </button>\n          </div>\n        </div>\n        <div class=\"grid grid-cols-3 gap-4\">\n          <div class=\"group relative overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03] p-5 transition-all duration-300 hover:-translate-y-1 hover:border-white/25 hover:bg-white/[0.06] col-span-2\">\n            <div class=\"bento-glow pointer-events-none absolute -right-8 -top-8 h-24 w-24 rounded-full blur-2xl\" style=\"background:rgba(56,189,248,0.5);animation:bento-pulse 4s ease-in-out 0s infinite\">\n            </div>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-activity relative size-5 text-white/80 transition-transform group-hover:scale-110\">\n              <path d=\"M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2\">\n              </path>\n            </svg>\n            <p class=\"relative mt-8 text-sm font-medium text-white/85\">\n              リアルタイム分析\n            </p>\n          </div>\n          <div class=\"group relative overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03] p-5 transition-all duration-300 hover:-translate-y-1 hover:border-white/25 hover:bg-white/[0.06]\">\n            <div class=\"bento-glow pointer-events-none absolute -right-8 -top-8 h-24 w-24 rounded-full blur-2xl\" style=\"background:rgba(52,211,153,0.5);animation:bento-pulse 4s ease-in-out 0.6s infinite\">\n            </div>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-shield relative size-5 text-white/80 transition-transform group-hover:scale-110\">\n              <path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\n              </path>\n            </svg>\n            <p class=\"relative mt-8 text-sm font-medium text-white/85\">\n              セキュア\n            </p>\n          </div>\n          <div class=\"group relative overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03] p-5 transition-all duration-300 hover:-translate-y-1 hover:border-white/25 hover:bg-white/[0.06]\">\n            <div class=\"bento-glow pointer-events-none absolute -right-8 -top-8 h-24 w-24 rounded-full blur-2xl\" style=\"background:rgba(251,191,36,0.5);animation:bento-pulse 4s ease-in-out 1.2s infinite\">\n            </div>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-zap relative size-5 text-white/80 transition-transform group-hover:scale-110\">\n              <path d=\"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z\">\n              </path>\n            </svg>\n            <p class=\"relative mt-8 text-sm font-medium text-white/85\">\n              高速\n            </p>\n          </div>\n          <div class=\"group relative overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03] p-5 transition-all duration-300 hover:-translate-y-1 hover:border-white/25 hover:bg-white/[0.06] col-span-2\">\n            <div class=\"bento-glow pointer-events-none absolute -right-8 -top-8 h-24 w-24 rounded-full blur-2xl\" style=\"background:rgba(168,85,247,0.5);animation:bento-pulse 4s ease-in-out 1.8s infinite\">\n            </div>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-earth relative size-5 text-white/80 transition-transform group-hover:scale-110\">\n              <path d=\"M21.54 15H17a2 2 0 0 0-2 2v4.54\">\n              </path>\n              <path d=\"M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17\">\n              </path>\n              <path d=\"M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05\">\n              </path>\n              <circle cx=\"12\" cy=\"12\" r=\"10\">\n              </circle>\n            </svg>\n            <p class=\"relative mt-8 text-sm font-medium text-white/85\">\n              グローバル配信\n            </p>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"relative w-full overflow-hidden bg-[#060710] py-24 text-white\">\n      <style>\n        @keyframes bento-pulse { 0%,100%{opacity:.35} 50%{opacity:.85} }\n            @media (prefers-reduced-motion: reduce){ .bento-glow{animation:none !important} }\n      </style>\n      <div class=\"pointer-events-none absolute right-0 top-0 h-[60vh] w-[60vw] opacity-50 blur-[120px]\" style=\"background:radial-gradient(circle, rgba(99,102,241,0.4), transparent 70%)\">\n      </div>\n      <div class=\"relative mx-auto grid max-w-6xl items-center gap-12 px-6 lg:grid-cols-2\">\n        <div class=\"text-center lg:text-left\">\n          <span class=\"inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-4 py-1.5 text-xs font-medium tracking-wide text-white/70 backdrop-blur\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-indigo-300\">\n              <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n              </path>\n              <path d=\"M20 3v4\">\n              </path>\n              <path d=\"M22 5h-4\">\n              </path>\n              <path d=\"M4 17v2\">\n              </path>\n              <path d=\"M5 18H3\">\n              </path>\n            </svg>\n            オールインワン・プラットフォーム\n          </span>\n          <h1 class=\"mt-7 bg-gradient-to-b from-white to-white/55 bg-clip-text text-4xl font-bold tracking-tight text-transparent sm:text-5xl\">\n            必要な機能が、\n            <br/>\n            ひとつの画面に\n          </h1>\n          <p class=\"mx-auto mt-5 max-w-md text-lg text-white/55 lg:mx-0\">\n            分析・セキュリティ・配信を統合。バラバラなツールを一つにまとめます。\n          </p>\n          <div class=\"mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row lg:justify-start\">\n            <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 h-10 rounded-md px-6 group bg-white text-black hover:bg-white/90\">\n              無料で始める\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right size-4 transition-transform group-hover:translate-x-0.5\">\n                <path d=\"M5 12h14\">\n                </path>\n                <path d=\"m12 5 7 7-7 7\">\n                </path>\n              </svg>\n            </button>\n            <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border h-10 rounded-md px-6 border-white/20 bg-white/5 text-white hover:bg-white/10 hover:text-white\">\n              機能一覧\n            </button>\n          </div>\n        </div>\n        <div class=\"grid grid-cols-3 gap-4\">\n          <div class=\"group relative overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03] p-5 transition-all duration-300 hover:-translate-y-1 hover:border-white/25 hover:bg-white/[0.06] col-span-2\">\n            <div class=\"bento-glow pointer-events-none absolute -right-8 -top-8 h-24 w-24 rounded-full blur-2xl\" style=\"background:rgba(56,189,248,0.5);animation:bento-pulse 4s ease-in-out 0s infinite\">\n            </div>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-activity relative size-5 text-white/80 transition-transform group-hover:scale-110\">\n              <path d=\"M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2\">\n              </path>\n            </svg>\n            <p class=\"relative mt-8 text-sm font-medium text-white/85\">\n              リアルタイム分析\n            </p>\n          </div>\n          <div class=\"group relative overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03] p-5 transition-all duration-300 hover:-translate-y-1 hover:border-white/25 hover:bg-white/[0.06]\">\n            <div class=\"bento-glow pointer-events-none absolute -right-8 -top-8 h-24 w-24 rounded-full blur-2xl\" style=\"background:rgba(52,211,153,0.5);animation:bento-pulse 4s ease-in-out 0.6s infinite\">\n            </div>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-shield relative size-5 text-white/80 transition-transform group-hover:scale-110\">\n              <path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\n              </path>\n            </svg>\n            <p class=\"relative mt-8 text-sm font-medium text-white/85\">\n              セキュア\n            </p>\n          </div>\n          <div class=\"group relative overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03] p-5 transition-all duration-300 hover:-translate-y-1 hover:border-white/25 hover:bg-white/[0.06]\">\n            <div class=\"bento-glow pointer-events-none absolute -right-8 -top-8 h-24 w-24 rounded-full blur-2xl\" style=\"background:rgba(251,191,36,0.5);animation:bento-pulse 4s ease-in-out 1.2s infinite\">\n            </div>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-zap relative size-5 text-white/80 transition-transform group-hover:scale-110\">\n              <path d=\"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z\">\n              </path>\n            </svg>\n            <p class=\"relative mt-8 text-sm font-medium text-white/85\">\n              高速\n            </p>\n          </div>\n          <div class=\"group relative overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03] p-5 transition-all duration-300 hover:-translate-y-1 hover:border-white/25 hover:bg-white/[0.06] col-span-2\">\n            <div class=\"bento-glow pointer-events-none absolute -right-8 -top-8 h-24 w-24 rounded-full blur-2xl\" style=\"background:rgba(168,85,247,0.5);animation:bento-pulse 4s ease-in-out 1.8s infinite\">\n            </div>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-earth relative size-5 text-white/80 transition-transform group-hover:scale-110\">\n              <path d=\"M21.54 15H17a2 2 0 0 0-2 2v4.54\">\n              </path>\n              <path d=\"M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17\">\n              </path>\n              <path d=\"M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05\">\n              </path>\n              <circle cx=\"12\" cy=\"12\" r=\"10\">\n              </circle>\n            </svg>\n            <p class=\"relative mt-8 text-sm font-medium text-white/85\">\n              グローバル配信\n            </p>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "hero-anim-gradient-shift-hero",
@@ -789,7 +789,7 @@
       ],
       "standalone": true,
       "source": "import { ArrowRight, Flame } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"グラデーションシフト・ヒーロー\",\n  category: \"ヒーロー・LP\",\n  description: \"背景全体のグラデーションが滑らかに循環し、中央コピーを際立たせる。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"hero\", \"animation\", \"gradient\"],\n};\n\nexport default function GradientShiftHero() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"relative w-full overflow-hidden py-32 text-white\">\n      <style>{`\n        @keyframes grad-shift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }\n        @media (prefers-reduced-motion: reduce){ .grad-shift-bg{animation:none !important} }\n      `}</style>\n\n      <div\n        className=\"grad-shift-bg absolute inset-0\"\n        style={{\n          background:\n            \"linear-gradient(120deg, #4f1d8f, #1e3a8a, #0f766e, #9d174d, #4f1d8f)\",\n          backgroundSize: \"300% 300%\",\n          animation: \"grad-shift 16s ease infinite\",\n        }}\n      />\n      <div className=\"absolute inset-0 bg-black/35\" />\n      <div\n        className=\"pointer-events-none absolute inset-0 opacity-[0.12]\"\n        style={{\n          backgroundImage:\n            \"radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1px)\",\n          backgroundSize: \"22px 22px\",\n        }}\n      />\n\n      <div className=\"relative mx-auto max-w-3xl px-6 text-center\">\n        <span className=\"inline-flex items-center gap-2 rounded-full border border-white/25 bg-white/10 px-4 py-1.5 text-xs font-medium tracking-wide text-white/90 backdrop-blur\">\n          <Flame className=\"size-3.5 text-amber-200\" />\n          {en ? \"The most talked-about product right now\" : \"いま、最も話題のプロダクト\"}\n        </span>\n        <h1 className=\"mt-7 text-4xl font-bold tracking-tight drop-shadow-sm sm:text-6xl\">\n          {en ? (\n            <>\n              Colors in motion,\n              <br />\n              a vivid brand experience\n            </>\n          ) : (\n            <>\n              色が巡る、\n              <br />\n              鮮やかなブランド体験\n            </>\n          )}\n        </h1>\n        <p className=\"mx-auto mt-5 max-w-xl text-lg text-white/80\">\n          {en\n            ? \"Against a cycling gradient, bring your message crisply to the front.\"\n            : \"循環するグラデーションを背に、伝えたいメッセージをくっきりと前面に。\"}\n        </p>\n        <div className=\"mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row\">\n          <Button\n            size=\"lg\"\n            className=\"group bg-white text-black hover:bg-white/90\"\n          >\n            {en ? \"Get started\" : \"はじめる\"}\n            <ArrowRight className=\"size-4 transition-transform group-hover:translate-x-0.5\" />\n          </Button>\n          <Button\n            size=\"lg\"\n            variant=\"outline\"\n            className=\"border-white/30 bg-white/10 text-white hover:bg-white/20 hover:text-white\"\n          >\n            {en ? \"Learn more\" : \"もっと見る\"}\n          </Button>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"relative w-full overflow-hidden py-32 text-white\">\n      <style>\n        @keyframes grad-shift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }\n            @media (prefers-reduced-motion: reduce){ .grad-shift-bg{animation:none !important} }\n      </style>\n      <div class=\"grad-shift-bg absolute inset-0\" style=\"background:linear-gradient(120deg, #4f1d8f, #1e3a8a, #0f766e, #9d174d, #4f1d8f);background-size:300% 300%;animation:grad-shift 16s ease infinite\">\n      </div>\n      <div class=\"absolute inset-0 bg-black/35\">\n      </div>\n      <div class=\"pointer-events-none absolute inset-0 opacity-[0.12]\" style=\"background-image:radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1px);background-size:22px 22px\">\n      </div>\n      <div class=\"relative mx-auto max-w-3xl px-6 text-center\">\n        <span class=\"inline-flex items-center gap-2 rounded-full border border-white/25 bg-white/10 px-4 py-1.5 text-xs font-medium tracking-wide text-white/90 backdrop-blur\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-flame size-3.5 text-amber-200\">\n            <path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\">\n            </path>\n          </svg>\n          いま、最も話題のプロダクト\n        </span>\n        <h1 class=\"mt-7 text-4xl font-bold tracking-tight drop-shadow-sm sm:text-6xl\">\n          色が巡る、\n          <br/>\n          鮮やかなブランド体験\n        </h1>\n        <p class=\"mx-auto mt-5 max-w-xl text-lg text-white/80\">\n          循環するグラデーションを背に、伝えたいメッセージをくっきりと前面に。\n        </p>\n        <div class=\"mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row\">\n          <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 h-10 rounded-md px-6 group bg-white text-black hover:bg-white/90\">\n            はじめる\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right size-4 transition-transform group-hover:translate-x-0.5\">\n              <path d=\"M5 12h14\">\n              </path>\n              <path d=\"m12 5 7 7-7 7\">\n              </path>\n            </svg>\n          </button>\n          <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border h-10 rounded-md px-6 border-white/30 bg-white/10 text-white hover:bg-white/20 hover:text-white\">\n            もっと見る\n          </button>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"relative w-full overflow-hidden py-32 text-white\">\n      <style>\n        @keyframes grad-shift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }\n            @media (prefers-reduced-motion: reduce){ .grad-shift-bg{animation:none !important} }\n      </style>\n      <div class=\"grad-shift-bg absolute inset-0\" style=\"background:linear-gradient(120deg, #4f1d8f, #1e3a8a, #0f766e, #9d174d, #4f1d8f);background-size:300% 300%;animation:grad-shift 16s ease infinite\">\n      </div>\n      <div class=\"absolute inset-0 bg-black/35\">\n      </div>\n      <div class=\"pointer-events-none absolute inset-0 opacity-[0.12]\" style=\"background-image:radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1px);background-size:22px 22px\">\n      </div>\n      <div class=\"relative mx-auto max-w-3xl px-6 text-center\">\n        <span class=\"inline-flex items-center gap-2 rounded-full border border-white/25 bg-white/10 px-4 py-1.5 text-xs font-medium tracking-wide text-white/90 backdrop-blur\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-flame size-3.5 text-amber-200\">\n            <path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\">\n            </path>\n          </svg>\n          いま、最も話題のプロダクト\n        </span>\n        <h1 class=\"mt-7 text-4xl font-bold tracking-tight drop-shadow-sm sm:text-6xl\">\n          色が巡る、\n          <br/>\n          鮮やかなブランド体験\n        </h1>\n        <p class=\"mx-auto mt-5 max-w-xl text-lg text-white/80\">\n          循環するグラデーションを背に、伝えたいメッセージをくっきりと前面に。\n        </p>\n        <div class=\"mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row\">\n          <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 h-10 rounded-md px-6 group bg-white text-black hover:bg-white/90\">\n            はじめる\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right size-4 transition-transform group-hover:translate-x-0.5\">\n              <path d=\"M5 12h14\">\n              </path>\n              <path d=\"m12 5 7 7-7 7\">\n              </path>\n            </svg>\n          </button>\n          <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border h-10 rounded-md px-6 border-white/30 bg-white/10 text-white hover:bg-white/20 hover:text-white\">\n            もっと見る\n          </button>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "interaction-marquee",
@@ -803,7 +803,7 @@
       ],
       "standalone": true,
       "source": "import { Sparkles } from \"lucide-react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { cn } from \"@/lib/utils\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"マーキー\",\n  category: \"インタラクション\",\n  description: \"ホバーで一時停止する無限スクロール。ロゴや告知に。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"animation\", \"micro-interaction\", \"marquee\"],\n  principle:\n    \"途切れない動きは視線を引きつけつつ圧迫感が少ない。ホバーで止まることで読みたい情報をユーザーが制御できる。\",\n};\n\nconst ITEMS = [\n  \"Acme Corp\",\n  \"Globex\",\n  \"Initech\",\n  \"Umbrella\",\n  \"Soylent\",\n  \"Hooli\",\n  \"Stark Industries\",\n  \"Wayne Enterprises\",\n];\n\nfunction Track({ ariaHidden }: { ariaHidden?: boolean }) {\n  return (\n    <div\n      aria-hidden={ariaHidden}\n      className=\"flex shrink-0 items-center gap-4 px-2\"\n    >\n      {ITEMS.map((label, i) => (\n        <div\n          key={`${label}-${i}`}\n          className={cn(\n            \"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5\",\n            \"text-sm font-semibold text-card-foreground shadow-sm\",\n            \"transition-colors hover:border-primary/50 hover:text-primary\"\n          )}\n        >\n          <Sparkles className=\"size-3.5 text-primary/70\" />\n          {label}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nexport default function Marquee() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <div className=\"w-full space-y-3\">\n      <div className=\"flex justify-center\">\n        <Badge variant=\"secondary\">\n          {en ? \"Trusted partners\" : \"信頼されるパートナー\"}\n        </Badge>\n      </div>\n      <div className=\"group relative flex w-full overflow-hidden py-2 [mask-image:linear-gradient(to_right,transparent,black_12%,black_88%,transparent)]\">\n        <div className=\"flex animate-[marquee_22s_linear_infinite] group-hover:[animation-play-state:paused]\">\n          <Track />\n          <Track ariaHidden />\n        </div>\n        <style>{`\n          @keyframes marquee {\n            from { transform: translateX(0); }\n            to { transform: translateX(-50%); }\n          }\n        `}</style>\n      </div>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"w-full space-y-3\">\n      <div class=\"flex justify-center\">\n        <div class=\"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\">\n          信頼されるパートナー\n        </div>\n      </div>\n      <div class=\"group relative flex w-full overflow-hidden py-2 [mask-image:linear-gradient(to_right,transparent,black_12%,black_88%,transparent)]\">\n        <div class=\"flex animate-[marquee_22s_linear_infinite] group-hover:[animation-play-state:paused]\">\n          <div class=\"flex shrink-0 items-center gap-4 px-2\">\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Acme Corp\n            </div>\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Globex\n            </div>\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Initech\n            </div>\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Umbrella\n            </div>\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Soylent\n            </div>\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Hooli\n            </div>\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Stark Industries\n            </div>\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Wayne Enterprises\n            </div>\n          </div>\n          <div aria-hidden=\"true\" class=\"flex shrink-0 items-center gap-4 px-2\">\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Acme Corp\n            </div>\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Globex\n            </div>\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Initech\n            </div>\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Umbrella\n            </div>\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Soylent\n            </div>\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Hooli\n            </div>\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Stark Industries\n            </div>\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Wayne Enterprises\n            </div>\n          </div>\n        </div>\n        <style>\n          @keyframes marquee {\n                from { transform: translateX(0); }\n                to { transform: translateX(-50%); }\n              }\n        </style>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"w-full space-y-3\">\n      <div class=\"flex justify-center\">\n        <div class=\"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\">\n          信頼されるパートナー\n        </div>\n      </div>\n      <div class=\"group relative flex w-full overflow-hidden py-2 [mask-image:linear-gradient(to_right,transparent,black_12%,black_88%,transparent)]\">\n        <div class=\"flex animate-[marquee_22s_linear_infinite] group-hover:[animation-play-state:paused]\">\n          <div class=\"flex shrink-0 items-center gap-4 px-2\">\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Acme Corp\n            </div>\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Globex\n            </div>\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Initech\n            </div>\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Umbrella\n            </div>\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Soylent\n            </div>\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Hooli\n            </div>\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Stark Industries\n            </div>\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Wayne Enterprises\n            </div>\n          </div>\n          <div aria-hidden=\"true\" class=\"flex shrink-0 items-center gap-4 px-2\">\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Acme Corp\n            </div>\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Globex\n            </div>\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Initech\n            </div>\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Umbrella\n            </div>\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Soylent\n            </div>\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Hooli\n            </div>\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Stark Industries\n            </div>\n            <div class=\"flex items-center gap-2 rounded-full border bg-card px-5 py-2.5 text-sm font-semibold text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5 text-primary/70\">\n                <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                </path>\n                <path d=\"M20 3v4\">\n                </path>\n                <path d=\"M22 5h-4\">\n                </path>\n                <path d=\"M4 17v2\">\n                </path>\n                <path d=\"M5 18H3\">\n                </path>\n              </svg>\n              Wayne Enterprises\n            </div>\n          </div>\n        </div>\n        <style>\n          @keyframes marquee {\n                from { transform: translateX(0); }\n                to { transform: translateX(-50%); }\n              }\n        </style>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "loaders-morphing-loader",
@@ -818,7 +818,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"モーフィングローダー\",\n  category: \"ローダー・マイクロ\",\n  description: \"四角↔円↔三角形へ変形する形状モーフローダー（clip-path/transform）。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"loader\", \"animation\", \"micro\", \"morph\"],\n};\n\nconst styles = `\n@keyframes ldr-morph {\n  0%, 100% {\n    border-radius: 12%;\n    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n    transform: rotate(0deg);\n  }\n  33% {\n    border-radius: 50%;\n    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n    transform: rotate(120deg);\n  }\n  66% {\n    border-radius: 8%;\n    clip-path: polygon(50% 0, 100% 100%, 0 100%, 0 100%);\n    transform: rotate(240deg);\n  }\n}\n@keyframes ldr-morph-shadow {\n  0%, 100% { transform: scaleX(1); opacity: 0.35; }\n  50% { transform: scaleX(0.6); opacity: 0.15; }\n}\n@keyframes ldr-morph-hue {\n  0%, 100% { background: hsl(var(--primary)); }\n  50% { background: hsl(var(--primary) / 0.6); }\n}\n`;\n\nexport default function MorphingLoader() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <div className=\"flex flex-col items-center gap-8\">\n      <style>{styles}</style>\n\n      <div className=\"flex h-24 flex-col items-center justify-center\">\n        <div\n          className=\"h-12 w-12\"\n          style={{\n            animation:\n              \"ldr-morph 2.4s cubic-bezier(0.65,0,0.35,1) infinite, ldr-morph-hue 2.4s ease-in-out infinite\",\n          }}\n        />\n        <div\n          className=\"mt-2 h-1.5 w-12 rounded-full bg-foreground\"\n          style={{ animation: \"ldr-morph-shadow 2.4s ease-in-out infinite\" }}\n        />\n      </div>\n\n      <p className=\"text-xs font-medium text-muted-foreground\">{en ? \"Morphing…\" : \"変形中…\"}</p>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"flex flex-col items-center gap-8\">\n      <style>\n        @keyframes ldr-morph {\n      0%, 100% {\n        border-radius: 12%;\n        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n        transform: rotate(0deg);\n      }\n      33% {\n        border-radius: 50%;\n        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n        transform: rotate(120deg);\n      }\n      66% {\n        border-radius: 8%;\n        clip-path: polygon(50% 0, 100% 100%, 0 100%, 0 100%);\n        transform: rotate(240deg);\n      }\n    }\n    @keyframes ldr-morph-shadow {\n      0%, 100% { transform: scaleX(1); opacity: 0.35; }\n      50% { transform: scaleX(0.6); opacity: 0.15; }\n    }\n    @keyframes ldr-morph-hue {\n      0%, 100% { background: hsl(var(--primary)); }\n      50% { background: hsl(var(--primary) / 0.6); }\n    }\n      </style>\n      <div class=\"flex h-24 flex-col items-center justify-center\">\n        <div class=\"h-12 w-12\" style=\"animation:ldr-morph 2.4s cubic-bezier(0.65,0,0.35,1) infinite, ldr-morph-hue 2.4s ease-in-out infinite\">\n        </div>\n        <div class=\"mt-2 h-1.5 w-12 rounded-full bg-foreground\" style=\"animation:ldr-morph-shadow 2.4s ease-in-out infinite\">\n        </div>\n      </div>\n      <p class=\"text-xs font-medium text-muted-foreground\">\n        変形中…\n      </p>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"flex flex-col items-center gap-8\">\n      <style>\n        @keyframes ldr-morph {\n      0%, 100% {\n        border-radius: 12%;\n        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n        transform: rotate(0deg);\n      }\n      33% {\n        border-radius: 50%;\n        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n        transform: rotate(120deg);\n      }\n      66% {\n        border-radius: 8%;\n        clip-path: polygon(50% 0, 100% 100%, 0 100%, 0 100%);\n        transform: rotate(240deg);\n      }\n    }\n    @keyframes ldr-morph-shadow {\n      0%, 100% { transform: scaleX(1); opacity: 0.35; }\n      50% { transform: scaleX(0.6); opacity: 0.15; }\n    }\n    @keyframes ldr-morph-hue {\n      0%, 100% { background: hsl(var(--primary)); }\n      50% { background: hsl(var(--primary) / 0.6); }\n    }\n      </style>\n      <div class=\"flex h-24 flex-col items-center justify-center\">\n        <div class=\"h-12 w-12\" style=\"animation:ldr-morph 2.4s cubic-bezier(0.65,0,0.35,1) infinite, ldr-morph-hue 2.4s ease-in-out infinite\">\n        </div>\n        <div class=\"mt-2 h-1.5 w-12 rounded-full bg-foreground\" style=\"animation:ldr-morph-shadow 2.4s ease-in-out infinite\">\n        </div>\n      </div>\n      <p class=\"text-xs font-medium text-muted-foreground\">\n        変形中…\n      </p>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "loaders-pulse-dots",
@@ -833,7 +833,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"パルスドット\",\n  category: \"ローダー・マイクロ\",\n  description: \"タイピング/読み込みドットとパルスするプレゼンス表示。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"loader\", \"animation\", \"micro\", \"dots\"],\n};\n\nconst styles = `\n@keyframes ldr-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-5px); opacity: 1; } }\n@keyframes ldr-presence { 0% { transform: scale(0.8); opacity: 0.8; } 70%, 100% { transform: scale(2.2); opacity: 0; } }\n@keyframes ldr-wave { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }\n`;\n\nexport default function PulseDots() {\n  const en = typeof document !== \"undefined\" && document.documentElement.lang === \"en\";\n  return (\n    <div className=\"w-full max-w-sm space-y-5\">\n      <style>{styles}</style>\n\n      {/* Typing bubble */}\n      <div className=\"flex items-center gap-3\">\n        <div className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-xs font-semibold text-primary-foreground\">\n          AI\n        </div>\n        <div className=\"flex items-center gap-1.5 rounded-2xl rounded-tl-sm bg-muted px-4 py-3\">\n          {[0, 1, 2].map((i) => (\n            <span\n              key={i}\n              className=\"block h-2 w-2 rounded-full bg-muted-foreground\"\n              style={{ animation: `ldr-typing 1.3s ${i * 0.18}s ease-in-out infinite` }}\n            />\n          ))}\n        </div>\n      </div>\n\n      {/* Presence indicators */}\n      <div className=\"flex items-center gap-6 rounded-xl border border-border bg-card p-4\">\n        {[\n          { label: \"オンライン\", labelEn: \"Online\", color: \"bg-emerald-500\" },\n          { label: \"取込中\", labelEn: \"Away\", color: \"bg-amber-500\" },\n          { label: \"通話中\", labelEn: \"On a call\", color: \"bg-sky-500\" },\n        ].map((s) => (\n          <div key={s.color} className=\"flex items-center gap-2\">\n            <span className=\"relative flex h-3 w-3\">\n              <span\n                className={`absolute inline-flex h-full w-full rounded-full ${s.color}`}\n                style={{ animation: \"ldr-presence 1.6s ease-out infinite\" }}\n              />\n              <span className={`relative inline-flex h-3 w-3 rounded-full ${s.color}`} />\n            </span>\n            <span className=\"text-xs text-foreground\">{en ? s.labelEn : s.label}</span>\n          </div>\n        ))}\n      </div>\n\n      {/* Audio wave */}\n      <div className=\"flex items-center justify-center gap-1 rounded-xl border border-border bg-card p-4\">\n        {[0, 1, 2, 3, 4, 5, 6].map((i) => (\n          <span\n            key={i}\n            className=\"block h-6 w-1 origin-center rounded-full bg-primary\"\n            style={{ animation: `ldr-wave 0.9s ${i * 0.1}s ease-in-out infinite` }}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"w-full max-w-sm space-y-5\">\n      <style>\n        @keyframes ldr-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-5px); opacity: 1; } }\n    @keyframes ldr-presence { 0% { transform: scale(0.8); opacity: 0.8; } 70%, 100% { transform: scale(2.2); opacity: 0; } }\n    @keyframes ldr-wave { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }\n      </style>\n      <div class=\"flex items-center gap-3\">\n        <div class=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-xs font-semibold text-primary-foreground\">\n          AI\n        </div>\n        <div class=\"flex items-center gap-1.5 rounded-2xl rounded-tl-sm bg-muted px-4 py-3\">\n          <span class=\"block h-2 w-2 rounded-full bg-muted-foreground\" style=\"animation:ldr-typing 1.3s 0s ease-in-out infinite\">\n          </span>\n          <span class=\"block h-2 w-2 rounded-full bg-muted-foreground\" style=\"animation:ldr-typing 1.3s 0.18s ease-in-out infinite\">\n          </span>\n          <span class=\"block h-2 w-2 rounded-full bg-muted-foreground\" style=\"animation:ldr-typing 1.3s 0.36s ease-in-out infinite\">\n          </span>\n        </div>\n      </div>\n      <div class=\"flex items-center gap-6 rounded-xl border border-border bg-card p-4\">\n        <div class=\"flex items-center gap-2\">\n          <span class=\"relative flex h-3 w-3\">\n            <span class=\"absolute inline-flex h-full w-full rounded-full bg-emerald-500\" style=\"animation:ldr-presence 1.6s ease-out infinite\">\n            </span>\n            <span class=\"relative inline-flex h-3 w-3 rounded-full bg-emerald-500\">\n            </span>\n          </span>\n          <span class=\"text-xs text-foreground\">\n            オンライン\n          </span>\n        </div>\n        <div class=\"flex items-center gap-2\">\n          <span class=\"relative flex h-3 w-3\">\n            <span class=\"absolute inline-flex h-full w-full rounded-full bg-amber-500\" style=\"animation:ldr-presence 1.6s ease-out infinite\">\n            </span>\n            <span class=\"relative inline-flex h-3 w-3 rounded-full bg-amber-500\">\n            </span>\n          </span>\n          <span class=\"text-xs text-foreground\">\n            取込中\n          </span>\n        </div>\n        <div class=\"flex items-center gap-2\">\n          <span class=\"relative flex h-3 w-3\">\n            <span class=\"absolute inline-flex h-full w-full rounded-full bg-sky-500\" style=\"animation:ldr-presence 1.6s ease-out infinite\">\n            </span>\n            <span class=\"relative inline-flex h-3 w-3 rounded-full bg-sky-500\">\n            </span>\n          </span>\n          <span class=\"text-xs text-foreground\">\n            通話中\n          </span>\n        </div>\n      </div>\n      <div class=\"flex items-center justify-center gap-1 rounded-xl border border-border bg-card p-4\">\n        <span class=\"block h-6 w-1 origin-center rounded-full bg-primary\" style=\"animation:ldr-wave 0.9s 0s ease-in-out infinite\">\n        </span>\n        <span class=\"block h-6 w-1 origin-center rounded-full bg-primary\" style=\"animation:ldr-wave 0.9s 0.1s ease-in-out infinite\">\n        </span>\n        <span class=\"block h-6 w-1 origin-center rounded-full bg-primary\" style=\"animation:ldr-wave 0.9s 0.2s ease-in-out infinite\">\n        </span>\n        <span class=\"block h-6 w-1 origin-center rounded-full bg-primary\" style=\"animation:ldr-wave 0.9s 0.30000000000000004s ease-in-out infinite\">\n        </span>\n        <span class=\"block h-6 w-1 origin-center rounded-full bg-primary\" style=\"animation:ldr-wave 0.9s 0.4s ease-in-out infinite\">\n        </span>\n        <span class=\"block h-6 w-1 origin-center rounded-full bg-primary\" style=\"animation:ldr-wave 0.9s 0.5s ease-in-out infinite\">\n        </span>\n        <span class=\"block h-6 w-1 origin-center rounded-full bg-primary\" style=\"animation:ldr-wave 0.9s 0.6000000000000001s ease-in-out infinite\">\n        </span>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"w-full max-w-sm space-y-5\">\n      <style>\n        @keyframes ldr-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-5px); opacity: 1; } }\n    @keyframes ldr-presence { 0% { transform: scale(0.8); opacity: 0.8; } 70%, 100% { transform: scale(2.2); opacity: 0; } }\n    @keyframes ldr-wave { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }\n      </style>\n      <div class=\"flex items-center gap-3\">\n        <div class=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-xs font-semibold text-primary-foreground\">\n          AI\n        </div>\n        <div class=\"flex items-center gap-1.5 rounded-2xl rounded-tl-sm bg-muted px-4 py-3\">\n          <span class=\"block h-2 w-2 rounded-full bg-muted-foreground\" style=\"animation:ldr-typing 1.3s 0s ease-in-out infinite\">\n          </span>\n          <span class=\"block h-2 w-2 rounded-full bg-muted-foreground\" style=\"animation:ldr-typing 1.3s 0.18s ease-in-out infinite\">\n          </span>\n          <span class=\"block h-2 w-2 rounded-full bg-muted-foreground\" style=\"animation:ldr-typing 1.3s 0.36s ease-in-out infinite\">\n          </span>\n        </div>\n      </div>\n      <div class=\"flex items-center gap-6 rounded-xl border border-border bg-card p-4\">\n        <div class=\"flex items-center gap-2\">\n          <span class=\"relative flex h-3 w-3\">\n            <span class=\"absolute inline-flex h-full w-full rounded-full bg-emerald-500\" style=\"animation:ldr-presence 1.6s ease-out infinite\">\n            </span>\n            <span class=\"relative inline-flex h-3 w-3 rounded-full bg-emerald-500\">\n            </span>\n          </span>\n          <span class=\"text-xs text-foreground\">\n            オンライン\n          </span>\n        </div>\n        <div class=\"flex items-center gap-2\">\n          <span class=\"relative flex h-3 w-3\">\n            <span class=\"absolute inline-flex h-full w-full rounded-full bg-amber-500\" style=\"animation:ldr-presence 1.6s ease-out infinite\">\n            </span>\n            <span class=\"relative inline-flex h-3 w-3 rounded-full bg-amber-500\">\n            </span>\n          </span>\n          <span class=\"text-xs text-foreground\">\n            取込中\n          </span>\n        </div>\n        <div class=\"flex items-center gap-2\">\n          <span class=\"relative flex h-3 w-3\">\n            <span class=\"absolute inline-flex h-full w-full rounded-full bg-sky-500\" style=\"animation:ldr-presence 1.6s ease-out infinite\">\n            </span>\n            <span class=\"relative inline-flex h-3 w-3 rounded-full bg-sky-500\">\n            </span>\n          </span>\n          <span class=\"text-xs text-foreground\">\n            通話中\n          </span>\n        </div>\n      </div>\n      <div class=\"flex items-center justify-center gap-1 rounded-xl border border-border bg-card p-4\">\n        <span class=\"block h-6 w-1 origin-center rounded-full bg-primary\" style=\"animation:ldr-wave 0.9s 0s ease-in-out infinite\">\n        </span>\n        <span class=\"block h-6 w-1 origin-center rounded-full bg-primary\" style=\"animation:ldr-wave 0.9s 0.1s ease-in-out infinite\">\n        </span>\n        <span class=\"block h-6 w-1 origin-center rounded-full bg-primary\" style=\"animation:ldr-wave 0.9s 0.2s ease-in-out infinite\">\n        </span>\n        <span class=\"block h-6 w-1 origin-center rounded-full bg-primary\" style=\"animation:ldr-wave 0.9s 0.30000000000000004s ease-in-out infinite\">\n        </span>\n        <span class=\"block h-6 w-1 origin-center rounded-full bg-primary\" style=\"animation:ldr-wave 0.9s 0.4s ease-in-out infinite\">\n        </span>\n        <span class=\"block h-6 w-1 origin-center rounded-full bg-primary\" style=\"animation:ldr-wave 0.9s 0.5s ease-in-out infinite\">\n        </span>\n        <span class=\"block h-6 w-1 origin-center rounded-full bg-primary\" style=\"animation:ldr-wave 0.9s 0.6000000000000001s ease-in-out infinite\">\n        </span>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "loaders-ripple-loader",
@@ -848,7 +848,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"リップルローダー\",\n  category: \"ローダー・マイクロ\",\n  description: \"広がる波紋・パルスリングのローダー。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"loader\", \"animation\", \"micro\", \"ripple\"],\n};\n\nconst styles = `\n@keyframes ldr-ripple {\n  0% { transform: scale(0); opacity: 0.7; }\n  100% { transform: scale(1); opacity: 0; }\n}\n@keyframes ldr-ripple-core { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.8); } }\n@keyframes ldr-radar { 0% { transform: scale(0.2); opacity: 0.8; } 100% { transform: scale(1); opacity: 0; } }\n`;\n\nexport default function RippleLoader() {\n  return (\n    <div className=\"flex items-center gap-12\">\n      <style>{styles}</style>\n\n      {/* Expanding rings */}\n      <div className=\"flex flex-col items-center gap-4\">\n        <div className=\"relative flex h-24 w-24 items-center justify-center\">\n          {[0, 1, 2].map((i) => (\n            <span\n              key={i}\n              className=\"absolute h-24 w-24 rounded-full border-2 border-primary\"\n              style={{ animation: `ldr-ripple 1.8s ${i * 0.6}s cubic-bezier(0,0.2,0.8,1) infinite` }}\n            />\n          ))}\n          <span\n            className=\"h-4 w-4 rounded-full bg-primary\"\n            style={{ animation: \"ldr-ripple-core 1.8s ease-in-out infinite\" }}\n          />\n        </div>\n        <span className=\"text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n          Ripple\n        </span>\n      </div>\n\n      {/* Radar fill */}\n      <div className=\"flex flex-col items-center gap-4\">\n        <div className=\"relative flex h-24 w-24 items-center justify-center\">\n          {[0, 1, 2, 3].map((i) => (\n            <span\n              key={i}\n              className=\"absolute h-24 w-24 rounded-full bg-primary/30\"\n              style={{ animation: `ldr-radar 2s ${i * 0.5}s ease-out infinite` }}\n            />\n          ))}\n          <span className=\"relative h-3 w-3 rounded-full bg-primary\" />\n        </div>\n        <span className=\"text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n          Radar\n        </span>\n      </div>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"flex items-center gap-12\">\n      <style>\n        @keyframes ldr-ripple {\n      0% { transform: scale(0); opacity: 0.7; }\n      100% { transform: scale(1); opacity: 0; }\n    }\n    @keyframes ldr-ripple-core { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.8); } }\n    @keyframes ldr-radar { 0% { transform: scale(0.2); opacity: 0.8; } 100% { transform: scale(1); opacity: 0; } }\n      </style>\n      <div class=\"flex flex-col items-center gap-4\">\n        <div class=\"relative flex h-24 w-24 items-center justify-center\">\n          <span class=\"absolute h-24 w-24 rounded-full border-2 border-primary\" style=\"animation:ldr-ripple 1.8s 0s cubic-bezier(0,0.2,0.8,1) infinite\">\n          </span>\n          <span class=\"absolute h-24 w-24 rounded-full border-2 border-primary\" style=\"animation:ldr-ripple 1.8s 0.6s cubic-bezier(0,0.2,0.8,1) infinite\">\n          </span>\n          <span class=\"absolute h-24 w-24 rounded-full border-2 border-primary\" style=\"animation:ldr-ripple 1.8s 1.2s cubic-bezier(0,0.2,0.8,1) infinite\">\n          </span>\n          <span class=\"h-4 w-4 rounded-full bg-primary\" style=\"animation:ldr-ripple-core 1.8s ease-in-out infinite\">\n          </span>\n        </div>\n        <span class=\"text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n          Ripple\n        </span>\n      </div>\n      <div class=\"flex flex-col items-center gap-4\">\n        <div class=\"relative flex h-24 w-24 items-center justify-center\">\n          <span class=\"absolute h-24 w-24 rounded-full bg-primary/30\" style=\"animation:ldr-radar 2s 0s ease-out infinite\">\n          </span>\n          <span class=\"absolute h-24 w-24 rounded-full bg-primary/30\" style=\"animation:ldr-radar 2s 0.5s ease-out infinite\">\n          </span>\n          <span class=\"absolute h-24 w-24 rounded-full bg-primary/30\" style=\"animation:ldr-radar 2s 1s ease-out infinite\">\n          </span>\n          <span class=\"absolute h-24 w-24 rounded-full bg-primary/30\" style=\"animation:ldr-radar 2s 1.5s ease-out infinite\">\n          </span>\n          <span class=\"relative h-3 w-3 rounded-full bg-primary\">\n          </span>\n        </div>\n        <span class=\"text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n          Radar\n        </span>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"flex items-center gap-12\">\n      <style>\n        @keyframes ldr-ripple {\n      0% { transform: scale(0); opacity: 0.7; }\n      100% { transform: scale(1); opacity: 0; }\n    }\n    @keyframes ldr-ripple-core { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.8); } }\n    @keyframes ldr-radar { 0% { transform: scale(0.2); opacity: 0.8; } 100% { transform: scale(1); opacity: 0; } }\n      </style>\n      <div class=\"flex flex-col items-center gap-4\">\n        <div class=\"relative flex h-24 w-24 items-center justify-center\">\n          <span class=\"absolute h-24 w-24 rounded-full border-2 border-primary\" style=\"animation:ldr-ripple 1.8s 0s cubic-bezier(0,0.2,0.8,1) infinite\">\n          </span>\n          <span class=\"absolute h-24 w-24 rounded-full border-2 border-primary\" style=\"animation:ldr-ripple 1.8s 0.6s cubic-bezier(0,0.2,0.8,1) infinite\">\n          </span>\n          <span class=\"absolute h-24 w-24 rounded-full border-2 border-primary\" style=\"animation:ldr-ripple 1.8s 1.2s cubic-bezier(0,0.2,0.8,1) infinite\">\n          </span>\n          <span class=\"h-4 w-4 rounded-full bg-primary\" style=\"animation:ldr-ripple-core 1.8s ease-in-out infinite\">\n          </span>\n        </div>\n        <span class=\"text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n          Ripple\n        </span>\n      </div>\n      <div class=\"flex flex-col items-center gap-4\">\n        <div class=\"relative flex h-24 w-24 items-center justify-center\">\n          <span class=\"absolute h-24 w-24 rounded-full bg-primary/30\" style=\"animation:ldr-radar 2s 0s ease-out infinite\">\n          </span>\n          <span class=\"absolute h-24 w-24 rounded-full bg-primary/30\" style=\"animation:ldr-radar 2s 0.5s ease-out infinite\">\n          </span>\n          <span class=\"absolute h-24 w-24 rounded-full bg-primary/30\" style=\"animation:ldr-radar 2s 1s ease-out infinite\">\n          </span>\n          <span class=\"absolute h-24 w-24 rounded-full bg-primary/30\" style=\"animation:ldr-radar 2s 1.5s ease-out infinite\">\n          </span>\n          <span class=\"relative h-3 w-3 rounded-full bg-primary\">\n          </span>\n        </div>\n        <span class=\"text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n          Radar\n        </span>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "loaders-spinners",
@@ -863,7 +863,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"スピナー集\",\n  category: \"ローダー・マイクロ\",\n  description: \"リング・ドット・バー・オービットなど6種類以上のCSSスピナー。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"loader\", \"animation\", \"micro\", \"spinner\"],\n};\n\nconst styles = `\n@keyframes ldr-spin { to { transform: rotate(360deg); } }\n@keyframes ldr-dot-bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }\n@keyframes ldr-bar-stretch { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1); } }\n@keyframes ldr-orbit { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }\n@keyframes ldr-pulse-ring { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }\n@keyframes ldr-flip { 0% { transform: perspective(120px) rotateX(0) rotateY(0); } 50% { transform: perspective(120px) rotateX(-180deg) rotateY(0); } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); } }\n@keyframes ldr-dual-rev { to { transform: rotate(-360deg); } }\n`;\n\nfunction Cell({ label, children }: { label: string; children: React.ReactNode }) {\n  return (\n    <div className=\"flex flex-col items-center justify-end gap-3 rounded-xl border border-border bg-card/60 p-5\">\n      <div className=\"flex h-12 items-center justify-center\">{children}</div>\n      <span className=\"text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n        {label}\n      </span>\n    </div>\n  );\n}\n\nexport default function Spinners() {\n  return (\n    <div className=\"w-full max-w-xl\">\n      <style>{styles}</style>\n      <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-3\">\n        <Cell label=\"Ring\">\n          <span\n            className=\"block h-8 w-8 rounded-full border-[3px] border-muted border-t-primary\"\n            style={{ animation: \"ldr-spin 0.7s linear infinite\" }}\n          />\n        </Cell>\n\n        <Cell label=\"Dual Ring\">\n          <span className=\"relative block h-8 w-8\">\n            <span\n              className=\"absolute inset-0 rounded-full border-[3px] border-transparent border-t-primary border-r-primary\"\n              style={{ animation: \"ldr-spin 0.9s linear infinite\" }}\n            />\n            <span\n              className=\"absolute inset-1 rounded-full border-[3px] border-transparent border-b-foreground border-l-foreground\"\n              style={{ animation: \"ldr-dual-rev 0.6s linear infinite\" }}\n            />\n          </span>\n        </Cell>\n\n        <Cell label=\"Dots\">\n          <span className=\"flex items-center gap-1.5\">\n            {[0, 1, 2].map((i) => (\n              <span\n                key={i}\n                className=\"block h-2.5 w-2.5 rounded-full bg-primary\"\n                style={{ animation: `ldr-dot-bounce 1.2s ${i * 0.16}s ease-in-out infinite both` }}\n              />\n            ))}\n          </span>\n        </Cell>\n\n        <Cell label=\"Bars\">\n          <span className=\"flex items-end gap-1\">\n            {[0, 1, 2, 3, 4].map((i) => (\n              <span\n                key={i}\n                className=\"block h-7 w-1.5 origin-bottom rounded-sm bg-primary\"\n                style={{ animation: `ldr-bar-stretch 1s ${i * 0.1}s ease-in-out infinite` }}\n              />\n            ))}\n          </span>\n        </Cell>\n\n        <Cell label=\"Orbit\">\n          <span\n            className=\"relative block h-8 w-8\"\n            style={{ animation: \"ldr-orbit 1.4s linear infinite\" }}\n          >\n            <span className=\"absolute left-1/2 top-0 h-2 w-2 -translate-x-1/2 rounded-full bg-primary\" />\n            <span className=\"absolute bottom-0 left-1/2 h-2 w-2 -translate-x-1/2 rounded-full bg-foreground/60\" />\n          </span>\n        </Cell>\n\n        <Cell label=\"Pulse\">\n          <span className=\"relative flex h-8 w-8 items-center justify-center\">\n            <span\n              className=\"absolute h-8 w-8 rounded-full border-2 border-primary\"\n              style={{ animation: \"ldr-pulse-ring 1.2s ease-out infinite\" }}\n            />\n            <span\n              className=\"absolute h-8 w-8 rounded-full border-2 border-primary\"\n              style={{ animation: \"ldr-pulse-ring 1.2s 0.6s ease-out infinite\" }}\n            />\n            <span className=\"h-2 w-2 rounded-full bg-primary\" />\n          </span>\n        </Cell>\n\n        <Cell label=\"Flip\">\n          <span\n            className=\"block h-7 w-7 rounded-sm bg-primary\"\n            style={{ animation: \"ldr-flip 1.2s ease-in-out infinite\" }}\n          />\n        </Cell>\n\n        <Cell label=\"Grid\">\n          <span className=\"grid grid-cols-3 gap-1\">\n            {Array.from({ length: 9 }).map((_, i) => (\n              <span\n                key={i}\n                className=\"block h-2 w-2 rounded-[2px] bg-primary\"\n                style={{ animation: `ldr-dot-bounce 1.3s ${(i % 5) * 0.12}s ease-in-out infinite both` }}\n              />\n            ))}\n          </span>\n        </Cell>\n\n        <Cell label=\"Gradient\">\n          <span\n            className=\"block h-8 w-8 rounded-full p-[3px]\"\n            style={{\n              background: \"conic-gradient(from 0deg, transparent, hsl(var(--primary)))\",\n              animation: \"ldr-spin 0.8s linear infinite\",\n              WebkitMask: \"radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0)\",\n              mask: \"radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0)\",\n            }}\n          />\n        </Cell>\n      </div>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"w-full max-w-xl\">\n      <style>\n        @keyframes ldr-spin { to { transform: rotate(360deg); } }\n    @keyframes ldr-dot-bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }\n    @keyframes ldr-bar-stretch { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1); } }\n    @keyframes ldr-orbit { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }\n    @keyframes ldr-pulse-ring { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }\n    @keyframes ldr-flip { 0% { transform: perspective(120px) rotateX(0) rotateY(0); } 50% { transform: perspective(120px) rotateX(-180deg) rotateY(0); } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); } }\n    @keyframes ldr-dual-rev { to { transform: rotate(-360deg); } }\n      </style>\n      <div class=\"grid grid-cols-2 gap-3 sm:grid-cols-3\">\n        <div class=\"flex flex-col items-center justify-end gap-3 rounded-xl border border-border bg-card/60 p-5\">\n          <div class=\"flex h-12 items-center justify-center\">\n            <span class=\"block h-8 w-8 rounded-full border-[3px] border-muted border-t-primary\" style=\"animation:ldr-spin 0.7s linear infinite\">\n            </span>\n          </div>\n          <span class=\"text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n            Ring\n          </span>\n        </div>\n        <div class=\"flex flex-col items-center justify-end gap-3 rounded-xl border border-border bg-card/60 p-5\">\n          <div class=\"flex h-12 items-center justify-center\">\n            <span class=\"relative block h-8 w-8\">\n              <span class=\"absolute inset-0 rounded-full border-[3px] border-transparent border-t-primary border-r-primary\" style=\"animation:ldr-spin 0.9s linear infinite\">\n              </span>\n              <span class=\"absolute inset-1 rounded-full border-[3px] border-transparent border-b-foreground border-l-foreground\" style=\"animation:ldr-dual-rev 0.6s linear infinite\">\n              </span>\n            </span>\n          </div>\n          <span class=\"text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n            Dual Ring\n          </span>\n        </div>\n        <div class=\"flex flex-col items-center justify-end gap-3 rounded-xl border border-border bg-card/60 p-5\">\n          <div class=\"flex h-12 items-center justify-center\">\n            <span class=\"flex items-center gap-1.5\">\n              <span class=\"block h-2.5 w-2.5 rounded-full bg-primary\" style=\"animation:ldr-dot-bounce 1.2s 0s ease-in-out infinite both\">\n              </span>\n              <span class=\"block h-2.5 w-2.5 rounded-full bg-primary\" style=\"animation:ldr-dot-bounce 1.2s 0.16s ease-in-out infinite both\">\n              </span>\n              <span class=\"block h-2.5 w-2.5 rounded-full bg-primary\" style=\"animation:ldr-dot-bounce 1.2s 0.32s ease-in-out infinite both\">\n              </span>\n            </span>\n          </div>\n          <span class=\"text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n            Dots\n          </span>\n        </div>\n        <div class=\"flex flex-col items-center justify-end gap-3 rounded-xl border border-border bg-card/60 p-5\">\n          <div class=\"flex h-12 items-center justify-center\">\n            <span class=\"flex items-end gap-1\">\n              <span class=\"block h-7 w-1.5 origin-bottom rounded-sm bg-primary\" style=\"animation:ldr-bar-stretch 1s 0s ease-in-out infinite\">\n              </span>\n              <span class=\"block h-7 w-1.5 origin-bottom rounded-sm bg-primary\" style=\"animation:ldr-bar-stretch 1s 0.1s ease-in-out infinite\">\n              </span>\n              <span class=\"block h-7 w-1.5 origin-bottom rounded-sm bg-primary\" style=\"animation:ldr-bar-stretch 1s 0.2s ease-in-out infinite\">\n              </span>\n              <span class=\"block h-7 w-1.5 origin-bottom rounded-sm bg-primary\" style=\"animation:ldr-bar-stretch 1s 0.30000000000000004s ease-in-out infinite\">\n              </span>\n              <span class=\"block h-7 w-1.5 origin-bottom rounded-sm bg-primary\" style=\"animation:ldr-bar-stretch 1s 0.4s ease-in-out infinite\">\n              </span>\n            </span>\n          </div>\n          <span class=\"text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n            Bars\n          </span>\n        </div>\n        <div class=\"flex flex-col items-center justify-end gap-3 rounded-xl border border-border bg-card/60 p-5\">\n          <div class=\"flex h-12 items-center justify-center\">\n            <span class=\"relative block h-8 w-8\" style=\"animation:ldr-orbit 1.4s linear infinite\">\n              <span class=\"absolute left-1/2 top-0 h-2 w-2 -translate-x-1/2 rounded-full bg-primary\">\n              </span>\n              <span class=\"absolute bottom-0 left-1/2 h-2 w-2 -translate-x-1/2 rounded-full bg-foreground/60\">\n              </span>\n            </span>\n          </div>\n          <span class=\"text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n            Orbit\n          </span>\n        </div>\n        <div class=\"flex flex-col items-center justify-end gap-3 rounded-xl border border-border bg-card/60 p-5\">\n          <div class=\"flex h-12 items-center justify-center\">\n            <span class=\"relative flex h-8 w-8 items-center justify-center\">\n              <span class=\"absolute h-8 w-8 rounded-full border-2 border-primary\" style=\"animation:ldr-pulse-ring 1.2s ease-out infinite\">\n              </span>\n              <span class=\"absolute h-8 w-8 rounded-full border-2 border-primary\" style=\"animation:ldr-pulse-ring 1.2s 0.6s ease-out infinite\">\n              </span>\n              <span class=\"h-2 w-2 rounded-full bg-primary\">\n              </span>\n            </span>\n          </div>\n          <span class=\"text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n            Pulse\n          </span>\n        </div>\n        <div class=\"flex flex-col items-center justify-end gap-3 rounded-xl border border-border bg-card/60 p-5\">\n          <div class=\"flex h-12 items-center justify-center\">\n            <span class=\"block h-7 w-7 rounded-sm bg-primary\" style=\"animation:ldr-flip 1.2s ease-in-out infinite\">\n            </span>\n          </div>\n          <span class=\"text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n            Flip\n          </span>\n        </div>\n        <div class=\"flex flex-col items-center justify-end gap-3 rounded-xl border border-border bg-card/60 p-5\">\n          <div class=\"flex h-12 items-center justify-center\">\n            <span class=\"grid grid-cols-3 gap-1\">\n              <span class=\"block h-2 w-2 rounded-[2px] bg-primary\" style=\"animation:ldr-dot-bounce 1.3s 0s ease-in-out infinite both\">\n              </span>\n              <span class=\"block h-2 w-2 rounded-[2px] bg-primary\" style=\"animation:ldr-dot-bounce 1.3s 0.12s ease-in-out infinite both\">\n              </span>\n              <span class=\"block h-2 w-2 rounded-[2px] bg-primary\" style=\"animation:ldr-dot-bounce 1.3s 0.24s ease-in-out infinite both\">\n              </span>\n              <span class=\"block h-2 w-2 rounded-[2px] bg-primary\" style=\"animation:ldr-dot-bounce 1.3s 0.36s ease-in-out infinite both\">\n              </span>\n              <span class=\"block h-2 w-2 rounded-[2px] bg-primary\" style=\"animation:ldr-dot-bounce 1.3s 0.48s ease-in-out infinite both\">\n              </span>\n              <span class=\"block h-2 w-2 rounded-[2px] bg-primary\" style=\"animation:ldr-dot-bounce 1.3s 0s ease-in-out infinite both\">\n              </span>\n              <span class=\"block h-2 w-2 rounded-[2px] bg-primary\" style=\"animation:ldr-dot-bounce 1.3s 0.12s ease-in-out infinite both\">\n              </span>\n              <span class=\"block h-2 w-2 rounded-[2px] bg-primary\" style=\"animation:ldr-dot-bounce 1.3s 0.24s ease-in-out infinite both\">\n              </span>\n              <span class=\"block h-2 w-2 rounded-[2px] bg-primary\" style=\"animation:ldr-dot-bounce 1.3s 0.36s ease-in-out infinite both\">\n              </span>\n            </span>\n          </div>\n          <span class=\"text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n            Grid\n          </span>\n        </div>\n        <div class=\"flex flex-col items-center justify-end gap-3 rounded-xl border border-border bg-card/60 p-5\">\n          <div class=\"flex h-12 items-center justify-center\">\n            <span class=\"block h-8 w-8 rounded-full p-[3px]\" style=\"background:conic-gradient(from 0deg, transparent, hsl(var(--primary)));animation:ldr-spin 0.8s linear infinite;-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0)\">\n            </span>\n          </div>\n          <span class=\"text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n            Gradient\n          </span>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"w-full max-w-xl\">\n      <style>\n        @keyframes ldr-spin { to { transform: rotate(360deg); } }\n    @keyframes ldr-dot-bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }\n    @keyframes ldr-bar-stretch { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1); } }\n    @keyframes ldr-orbit { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }\n    @keyframes ldr-pulse-ring { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }\n    @keyframes ldr-flip { 0% { transform: perspective(120px) rotateX(0) rotateY(0); } 50% { transform: perspective(120px) rotateX(-180deg) rotateY(0); } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); } }\n    @keyframes ldr-dual-rev { to { transform: rotate(-360deg); } }\n      </style>\n      <div class=\"grid grid-cols-2 gap-3 sm:grid-cols-3\">\n        <div class=\"flex flex-col items-center justify-end gap-3 rounded-xl border border-border bg-card/60 p-5\">\n          <div class=\"flex h-12 items-center justify-center\">\n            <span class=\"block h-8 w-8 rounded-full border-[3px] border-muted border-t-primary\" style=\"animation:ldr-spin 0.7s linear infinite\">\n            </span>\n          </div>\n          <span class=\"text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n            Ring\n          </span>\n        </div>\n        <div class=\"flex flex-col items-center justify-end gap-3 rounded-xl border border-border bg-card/60 p-5\">\n          <div class=\"flex h-12 items-center justify-center\">\n            <span class=\"relative block h-8 w-8\">\n              <span class=\"absolute inset-0 rounded-full border-[3px] border-transparent border-t-primary border-r-primary\" style=\"animation:ldr-spin 0.9s linear infinite\">\n              </span>\n              <span class=\"absolute inset-1 rounded-full border-[3px] border-transparent border-b-foreground border-l-foreground\" style=\"animation:ldr-dual-rev 0.6s linear infinite\">\n              </span>\n            </span>\n          </div>\n          <span class=\"text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n            Dual Ring\n          </span>\n        </div>\n        <div class=\"flex flex-col items-center justify-end gap-3 rounded-xl border border-border bg-card/60 p-5\">\n          <div class=\"flex h-12 items-center justify-center\">\n            <span class=\"flex items-center gap-1.5\">\n              <span class=\"block h-2.5 w-2.5 rounded-full bg-primary\" style=\"animation:ldr-dot-bounce 1.2s 0s ease-in-out infinite both\">\n              </span>\n              <span class=\"block h-2.5 w-2.5 rounded-full bg-primary\" style=\"animation:ldr-dot-bounce 1.2s 0.16s ease-in-out infinite both\">\n              </span>\n              <span class=\"block h-2.5 w-2.5 rounded-full bg-primary\" style=\"animation:ldr-dot-bounce 1.2s 0.32s ease-in-out infinite both\">\n              </span>\n            </span>\n          </div>\n          <span class=\"text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n            Dots\n          </span>\n        </div>\n        <div class=\"flex flex-col items-center justify-end gap-3 rounded-xl border border-border bg-card/60 p-5\">\n          <div class=\"flex h-12 items-center justify-center\">\n            <span class=\"flex items-end gap-1\">\n              <span class=\"block h-7 w-1.5 origin-bottom rounded-sm bg-primary\" style=\"animation:ldr-bar-stretch 1s 0s ease-in-out infinite\">\n              </span>\n              <span class=\"block h-7 w-1.5 origin-bottom rounded-sm bg-primary\" style=\"animation:ldr-bar-stretch 1s 0.1s ease-in-out infinite\">\n              </span>\n              <span class=\"block h-7 w-1.5 origin-bottom rounded-sm bg-primary\" style=\"animation:ldr-bar-stretch 1s 0.2s ease-in-out infinite\">\n              </span>\n              <span class=\"block h-7 w-1.5 origin-bottom rounded-sm bg-primary\" style=\"animation:ldr-bar-stretch 1s 0.30000000000000004s ease-in-out infinite\">\n              </span>\n              <span class=\"block h-7 w-1.5 origin-bottom rounded-sm bg-primary\" style=\"animation:ldr-bar-stretch 1s 0.4s ease-in-out infinite\">\n              </span>\n            </span>\n          </div>\n          <span class=\"text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n            Bars\n          </span>\n        </div>\n        <div class=\"flex flex-col items-center justify-end gap-3 rounded-xl border border-border bg-card/60 p-5\">\n          <div class=\"flex h-12 items-center justify-center\">\n            <span class=\"relative block h-8 w-8\" style=\"animation:ldr-orbit 1.4s linear infinite\">\n              <span class=\"absolute left-1/2 top-0 h-2 w-2 -translate-x-1/2 rounded-full bg-primary\">\n              </span>\n              <span class=\"absolute bottom-0 left-1/2 h-2 w-2 -translate-x-1/2 rounded-full bg-foreground/60\">\n              </span>\n            </span>\n          </div>\n          <span class=\"text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n            Orbit\n          </span>\n        </div>\n        <div class=\"flex flex-col items-center justify-end gap-3 rounded-xl border border-border bg-card/60 p-5\">\n          <div class=\"flex h-12 items-center justify-center\">\n            <span class=\"relative flex h-8 w-8 items-center justify-center\">\n              <span class=\"absolute h-8 w-8 rounded-full border-2 border-primary\" style=\"animation:ldr-pulse-ring 1.2s ease-out infinite\">\n              </span>\n              <span class=\"absolute h-8 w-8 rounded-full border-2 border-primary\" style=\"animation:ldr-pulse-ring 1.2s 0.6s ease-out infinite\">\n              </span>\n              <span class=\"h-2 w-2 rounded-full bg-primary\">\n              </span>\n            </span>\n          </div>\n          <span class=\"text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n            Pulse\n          </span>\n        </div>\n        <div class=\"flex flex-col items-center justify-end gap-3 rounded-xl border border-border bg-card/60 p-5\">\n          <div class=\"flex h-12 items-center justify-center\">\n            <span class=\"block h-7 w-7 rounded-sm bg-primary\" style=\"animation:ldr-flip 1.2s ease-in-out infinite\">\n            </span>\n          </div>\n          <span class=\"text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n            Flip\n          </span>\n        </div>\n        <div class=\"flex flex-col items-center justify-end gap-3 rounded-xl border border-border bg-card/60 p-5\">\n          <div class=\"flex h-12 items-center justify-center\">\n            <span class=\"grid grid-cols-3 gap-1\">\n              <span class=\"block h-2 w-2 rounded-[2px] bg-primary\" style=\"animation:ldr-dot-bounce 1.3s 0s ease-in-out infinite both\">\n              </span>\n              <span class=\"block h-2 w-2 rounded-[2px] bg-primary\" style=\"animation:ldr-dot-bounce 1.3s 0.12s ease-in-out infinite both\">\n              </span>\n              <span class=\"block h-2 w-2 rounded-[2px] bg-primary\" style=\"animation:ldr-dot-bounce 1.3s 0.24s ease-in-out infinite both\">\n              </span>\n              <span class=\"block h-2 w-2 rounded-[2px] bg-primary\" style=\"animation:ldr-dot-bounce 1.3s 0.36s ease-in-out infinite both\">\n              </span>\n              <span class=\"block h-2 w-2 rounded-[2px] bg-primary\" style=\"animation:ldr-dot-bounce 1.3s 0.48s ease-in-out infinite both\">\n              </span>\n              <span class=\"block h-2 w-2 rounded-[2px] bg-primary\" style=\"animation:ldr-dot-bounce 1.3s 0s ease-in-out infinite both\">\n              </span>\n              <span class=\"block h-2 w-2 rounded-[2px] bg-primary\" style=\"animation:ldr-dot-bounce 1.3s 0.12s ease-in-out infinite both\">\n              </span>\n              <span class=\"block h-2 w-2 rounded-[2px] bg-primary\" style=\"animation:ldr-dot-bounce 1.3s 0.24s ease-in-out infinite both\">\n              </span>\n              <span class=\"block h-2 w-2 rounded-[2px] bg-primary\" style=\"animation:ldr-dot-bounce 1.3s 0.36s ease-in-out infinite both\">\n              </span>\n            </span>\n          </div>\n          <span class=\"text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n            Grid\n          </span>\n        </div>\n        <div class=\"flex flex-col items-center justify-end gap-3 rounded-xl border border-border bg-card/60 p-5\">\n          <div class=\"flex h-12 items-center justify-center\">\n            <span class=\"block h-8 w-8 rounded-full p-[3px]\" style=\"background:conic-gradient(from 0deg, transparent, hsl(var(--primary)));animation:ldr-spin 0.8s linear infinite;-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0)\">\n            </span>\n          </div>\n          <span class=\"text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n            Gradient\n          </span>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "luxury-award-badge-set",
@@ -878,7 +878,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"アワード・バッジセット\",\n  category: \"ラグジュアリー\",\n  description: \"月桂樹の SVG をあしらった、金の受賞・認証バッジ群。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"luxury\", \"premium\", \"gold\", \"award\"],\n  principle: \"金の月桂樹と刻印風レイアウトが、第三者からの権威づけと信頼を瞬時に伝える。\",\n};\n\nconst badges = [\n  { top: \"Best of\", year: \"2026\", label: \"Luxury Award\" },\n  { top: \"Master\", year: \"100\", label: \"Years Craft\" },\n  { top: \"Certified\", year: \"AAA\", label: \"Excellence\" },\n];\n\nexport default function AwardBadgeSet() {\n  return (\n    <div className=\"w-full max-w-xl bg-[#0a0a0a] p-10\">\n      <div className=\"flex flex-wrap items-center justify-center gap-8\">\n        {badges.map((b) => (\n          <figure\n            key={b.label}\n            className=\"group flex flex-col items-center text-center text-stone-100\"\n          >\n            <div className=\"relative flex h-32 w-32 items-center justify-center\">\n              <Laurel className=\"absolute inset-0 h-full w-full text-amber-400/80 transition-transform duration-500 group-hover:scale-105\" />\n              <div className=\"flex flex-col items-center px-6\">\n                <span className=\"text-[8px] uppercase tracking-[0.25em] text-stone-400\">\n                  {b.top}\n                </span>\n                <span className=\"bg-gradient-to-b from-amber-200 via-yellow-400 to-amber-500 bg-clip-text font-display text-2xl leading-none text-transparent\">\n                  {b.year}\n                </span>\n                <span className=\"mt-1 text-[8px] uppercase tracking-[0.2em] text-amber-200/90\">\n                  {b.label}\n                </span>\n              </div>\n            </div>\n          </figure>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction Laurel({ className }: { className?: string }) {\n  // 左右対称の月桂冠（片側を定義しミラーで複製）\n  const leaves = [0, 1, 2, 3, 4, 5, 6];\n  return (\n    <svg viewBox=\"0 0 120 120\" className={className} aria-hidden=\"true\">\n      <g stroke=\"currentColor\" strokeWidth=\"2\" fill=\"none\" strokeLinecap=\"round\">\n        {/* 左枝 */}\n        <path d=\"M40 18 C24 36 22 70 38 100\" />\n        {leaves.map((i) => {\n          const t = i / (leaves.length - 1);\n          const x = 40 - t * 18;\n          const y = 22 + t * 70;\n          return (\n            <path\n              key={`l${i}`}\n              d={`M${x} ${y} q -12 -4 -16 6 q 10 4 16 -6`}\n              fill=\"currentColor\"\n              opacity=\"0.85\"\n            />\n          );\n        })}\n        {/* 右枝 */}\n        <path d=\"M80 18 C96 36 98 70 82 100\" />\n        {leaves.map((i) => {\n          const t = i / (leaves.length - 1);\n          const x = 80 + t * 18;\n          const y = 22 + t * 70;\n          return (\n            <path\n              key={`r${i}`}\n              d={`M${x} ${y} q 12 -4 16 6 q -10 4 -16 -6`}\n              fill=\"currentColor\"\n              opacity=\"0.85\"\n            />\n          );\n        })}\n        {/* 下の結び目 */}\n        <path d=\"M52 104 L60 110 L68 104\" />\n      </g>\n    </svg>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"w-full max-w-xl bg-[#0a0a0a] p-10\">\n      <div class=\"flex flex-wrap items-center justify-center gap-8\">\n        <figure class=\"group flex flex-col items-center text-center text-stone-100\">\n          <div class=\"relative flex h-32 w-32 items-center justify-center\">\n            <svg viewBox=\"0 0 120 120\" class=\"absolute inset-0 h-full w-full text-amber-400/80 transition-transform duration-500 group-hover:scale-105\" aria-hidden=\"true\">\n              <g stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\">\n                <path d=\"M40 18 C24 36 22 70 38 100\">\n                </path>\n                <path d=\"M40 22 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M37 33.666666666666664 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M34 45.33333333333333 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M31 57 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M28 68.66666666666666 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M25 80.33333333333334 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M22 92 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M80 18 C96 36 98 70 82 100\">\n                </path>\n                <path d=\"M80 22 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M83 33.666666666666664 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M86 45.33333333333333 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M89 57 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M92 68.66666666666666 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M95 80.33333333333334 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M98 92 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M52 104 L60 110 L68 104\">\n                </path>\n              </g>\n            </svg>\n            <div class=\"flex flex-col items-center px-6\">\n              <span class=\"text-[8px] uppercase tracking-[0.25em] text-stone-400\">\n                Best of\n              </span>\n              <span class=\"bg-gradient-to-b from-amber-200 via-yellow-400 to-amber-500 bg-clip-text font-display text-2xl leading-none text-transparent\">\n                2026\n              </span>\n              <span class=\"mt-1 text-[8px] uppercase tracking-[0.2em] text-amber-200/90\">\n                Luxury Award\n              </span>\n            </div>\n          </div>\n        </figure>\n        <figure class=\"group flex flex-col items-center text-center text-stone-100\">\n          <div class=\"relative flex h-32 w-32 items-center justify-center\">\n            <svg viewBox=\"0 0 120 120\" class=\"absolute inset-0 h-full w-full text-amber-400/80 transition-transform duration-500 group-hover:scale-105\" aria-hidden=\"true\">\n              <g stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\">\n                <path d=\"M40 18 C24 36 22 70 38 100\">\n                </path>\n                <path d=\"M40 22 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M37 33.666666666666664 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M34 45.33333333333333 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M31 57 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M28 68.66666666666666 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M25 80.33333333333334 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M22 92 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M80 18 C96 36 98 70 82 100\">\n                </path>\n                <path d=\"M80 22 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M83 33.666666666666664 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M86 45.33333333333333 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M89 57 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M92 68.66666666666666 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M95 80.33333333333334 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M98 92 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M52 104 L60 110 L68 104\">\n                </path>\n              </g>\n            </svg>\n            <div class=\"flex flex-col items-center px-6\">\n              <span class=\"text-[8px] uppercase tracking-[0.25em] text-stone-400\">\n                Master\n              </span>\n              <span class=\"bg-gradient-to-b from-amber-200 via-yellow-400 to-amber-500 bg-clip-text font-display text-2xl leading-none text-transparent\">\n                100\n              </span>\n              <span class=\"mt-1 text-[8px] uppercase tracking-[0.2em] text-amber-200/90\">\n                Years Craft\n              </span>\n            </div>\n          </div>\n        </figure>\n        <figure class=\"group flex flex-col items-center text-center text-stone-100\">\n          <div class=\"relative flex h-32 w-32 items-center justify-center\">\n            <svg viewBox=\"0 0 120 120\" class=\"absolute inset-0 h-full w-full text-amber-400/80 transition-transform duration-500 group-hover:scale-105\" aria-hidden=\"true\">\n              <g stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\">\n                <path d=\"M40 18 C24 36 22 70 38 100\">\n                </path>\n                <path d=\"M40 22 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M37 33.666666666666664 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M34 45.33333333333333 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M31 57 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M28 68.66666666666666 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M25 80.33333333333334 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M22 92 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M80 18 C96 36 98 70 82 100\">\n                </path>\n                <path d=\"M80 22 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M83 33.666666666666664 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M86 45.33333333333333 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M89 57 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M92 68.66666666666666 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M95 80.33333333333334 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M98 92 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M52 104 L60 110 L68 104\">\n                </path>\n              </g>\n            </svg>\n            <div class=\"flex flex-col items-center px-6\">\n              <span class=\"text-[8px] uppercase tracking-[0.25em] text-stone-400\">\n                Certified\n              </span>\n              <span class=\"bg-gradient-to-b from-amber-200 via-yellow-400 to-amber-500 bg-clip-text font-display text-2xl leading-none text-transparent\">\n                AAA\n              </span>\n              <span class=\"mt-1 text-[8px] uppercase tracking-[0.2em] text-amber-200/90\">\n                Excellence\n              </span>\n            </div>\n          </div>\n        </figure>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"w-full max-w-xl bg-[#0a0a0a] p-10\">\n      <div class=\"flex flex-wrap items-center justify-center gap-8\">\n        <figure class=\"group flex flex-col items-center text-center text-stone-100\">\n          <div class=\"relative flex h-32 w-32 items-center justify-center\">\n            <svg viewBox=\"0 0 120 120\" class=\"absolute inset-0 h-full w-full text-amber-400/80 transition-transform duration-500 group-hover:scale-105\" aria-hidden=\"true\">\n              <g stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\">\n                <path d=\"M40 18 C24 36 22 70 38 100\">\n                </path>\n                <path d=\"M40 22 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M37 33.666666666666664 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M34 45.33333333333333 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M31 57 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M28 68.66666666666666 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M25 80.33333333333334 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M22 92 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M80 18 C96 36 98 70 82 100\">\n                </path>\n                <path d=\"M80 22 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M83 33.666666666666664 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M86 45.33333333333333 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M89 57 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M92 68.66666666666666 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M95 80.33333333333334 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M98 92 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M52 104 L60 110 L68 104\">\n                </path>\n              </g>\n            </svg>\n            <div class=\"flex flex-col items-center px-6\">\n              <span class=\"text-[8px] uppercase tracking-[0.25em] text-stone-400\">\n                Best of\n              </span>\n              <span class=\"bg-gradient-to-b from-amber-200 via-yellow-400 to-amber-500 bg-clip-text font-display text-2xl leading-none text-transparent\">\n                2026\n              </span>\n              <span class=\"mt-1 text-[8px] uppercase tracking-[0.2em] text-amber-200/90\">\n                Luxury Award\n              </span>\n            </div>\n          </div>\n        </figure>\n        <figure class=\"group flex flex-col items-center text-center text-stone-100\">\n          <div class=\"relative flex h-32 w-32 items-center justify-center\">\n            <svg viewBox=\"0 0 120 120\" class=\"absolute inset-0 h-full w-full text-amber-400/80 transition-transform duration-500 group-hover:scale-105\" aria-hidden=\"true\">\n              <g stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\">\n                <path d=\"M40 18 C24 36 22 70 38 100\">\n                </path>\n                <path d=\"M40 22 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M37 33.666666666666664 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M34 45.33333333333333 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M31 57 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M28 68.66666666666666 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M25 80.33333333333334 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M22 92 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M80 18 C96 36 98 70 82 100\">\n                </path>\n                <path d=\"M80 22 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M83 33.666666666666664 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M86 45.33333333333333 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M89 57 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M92 68.66666666666666 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M95 80.33333333333334 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M98 92 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M52 104 L60 110 L68 104\">\n                </path>\n              </g>\n            </svg>\n            <div class=\"flex flex-col items-center px-6\">\n              <span class=\"text-[8px] uppercase tracking-[0.25em] text-stone-400\">\n                Master\n              </span>\n              <span class=\"bg-gradient-to-b from-amber-200 via-yellow-400 to-amber-500 bg-clip-text font-display text-2xl leading-none text-transparent\">\n                100\n              </span>\n              <span class=\"mt-1 text-[8px] uppercase tracking-[0.2em] text-amber-200/90\">\n                Years Craft\n              </span>\n            </div>\n          </div>\n        </figure>\n        <figure class=\"group flex flex-col items-center text-center text-stone-100\">\n          <div class=\"relative flex h-32 w-32 items-center justify-center\">\n            <svg viewBox=\"0 0 120 120\" class=\"absolute inset-0 h-full w-full text-amber-400/80 transition-transform duration-500 group-hover:scale-105\" aria-hidden=\"true\">\n              <g stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\">\n                <path d=\"M40 18 C24 36 22 70 38 100\">\n                </path>\n                <path d=\"M40 22 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M37 33.666666666666664 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M34 45.33333333333333 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M31 57 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M28 68.66666666666666 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M25 80.33333333333334 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M22 92 q -12 -4 -16 6 q 10 4 16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M80 18 C96 36 98 70 82 100\">\n                </path>\n                <path d=\"M80 22 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M83 33.666666666666664 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M86 45.33333333333333 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M89 57 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M92 68.66666666666666 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M95 80.33333333333334 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M98 92 q 12 -4 16 6 q -10 4 -16 -6\" fill=\"currentColor\" opacity=\"0.85\">\n                </path>\n                <path d=\"M52 104 L60 110 L68 104\">\n                </path>\n              </g>\n            </svg>\n            <div class=\"flex flex-col items-center px-6\">\n              <span class=\"text-[8px] uppercase tracking-[0.25em] text-stone-400\">\n                Certified\n              </span>\n              <span class=\"bg-gradient-to-b from-amber-200 via-yellow-400 to-amber-500 bg-clip-text font-display text-2xl leading-none text-transparent\">\n                AAA\n              </span>\n              <span class=\"mt-1 text-[8px] uppercase tracking-[0.2em] text-amber-200/90\">\n                Excellence\n              </span>\n            </div>\n          </div>\n        </figure>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "luxury-brand-story",
@@ -893,7 +893,7 @@
       ],
       "standalone": true,
       "source": "import { ArrowUpRight } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"ブランドストーリー\",\n  category: \"ラグジュアリー\",\n  description: \"エディトリアルな二分割のブランドストーリーセクション。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"luxury\", \"premium\", \"gold\", \"story\"],\n  principle: \"雑誌的な左右分割と縦書き風の見出しが、ブランドを語る編集物としての格を与える。\",\n};\n\nexport default function BrandStory() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"w-full bg-[#0a0a0a] px-6 py-24 text-stone-100\">\n      <div className=\"mx-auto grid max-w-5xl items-center gap-12 lg:grid-cols-2\">\n        {/* ビジュアル（CSS のみ） */}\n        <div className=\"relative aspect-[4/5] overflow-hidden border border-amber-400/20 bg-gradient-to-br from-[#161310] via-[#0c0c0c] to-[#080808]\">\n          <div className=\"pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_30%_20%,rgba(217,179,90,0.18),transparent_60%)]\" />\n          <div className=\"pointer-events-none absolute inset-0 opacity-[0.06] [background-image:linear-gradient(115deg,transparent_46%,#d4af37_50%,transparent_54%)] [background-size:24px_24px]\" />\n          <div className=\"absolute inset-0 flex items-center justify-center\">\n            <span className=\"bg-gradient-to-r from-amber-200 via-yellow-400 to-amber-500 bg-clip-text font-display text-9xl font-light text-transparent\">\n              1924\n            </span>\n          </div>\n          <span className=\"absolute bottom-6 left-6 text-[10px] uppercase tracking-[0.3em] text-stone-500\">\n            Maison Founded\n          </span>\n        </div>\n\n        {/* テキスト */}\n        <div>\n          <p className=\"text-[11px] uppercase tracking-[0.4em] text-amber-300/80\">\n            Our Heritage\n          </p>\n          <h2 className=\"mt-6 font-display text-4xl font-light leading-tight tracking-tight sm:text-5xl\">\n            {en ? (\n              <>\n                A story born of\n                <br />\n                a single philosophy\n              </>\n            ) : (\n              <>\n                ひとつの哲学から\n                <br />\n                始まった物語\n              </>\n            )}\n          </h2>\n\n          <div className=\"mt-8 h-px w-16 bg-gradient-to-r from-amber-400/60 to-transparent\" />\n\n          <div className=\"mt-8 space-y-5 text-sm leading-relaxed text-stone-400\">\n            <p>\n              {en\n                ? \"In a small Parisian atelier, our founder held to a single conviction: that beauty never yields to time. More than a century on, that spirit endures, passed down unchanged.\"\n                : \"パリの小さなアトリエで、創業者は一つの信念を掲げました。「美は、時に屈しない」と。その精神は一世紀を超えて、今も変わることなく受け継がれています。\"}\n            </p>\n            <p>\n              {en\n                ? \"The warmth of the human hand, which no machine can ever replicate. We have always chosen the eternal over the efficient.\"\n                : \"機械では決して生み出せない、人の手の温度。私たちは効率ではなく、永遠を選び続けてきました。\"}\n            </p>\n          </div>\n\n          <a\n            href=\"#\"\n            className=\"mt-10 inline-flex items-center gap-2 text-[11px] uppercase tracking-[0.3em] text-amber-200 transition-colors hover:text-amber-100\"\n          >\n            {en ? \"Read the Maison's history\" : \"メゾンの歴史を読む\"}\n            <ArrowUpRight className=\"h-3.5 w-3.5\" />\n          </a>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"w-full bg-[#0a0a0a] px-6 py-24 text-stone-100\">\n      <div class=\"mx-auto grid max-w-5xl items-center gap-12 lg:grid-cols-2\">\n        <div class=\"relative aspect-[4/5] overflow-hidden border border-amber-400/20 bg-gradient-to-br from-[#161310] via-[#0c0c0c] to-[#080808]\">\n          <div class=\"pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_30%_20%,rgba(217,179,90,0.18),transparent_60%)]\">\n          </div>\n          <div class=\"pointer-events-none absolute inset-0 opacity-[0.06] [background-image:linear-gradient(115deg,transparent_46%,#d4af37_50%,transparent_54%)] [background-size:24px_24px]\">\n          </div>\n          <div class=\"absolute inset-0 flex items-center justify-center\">\n            <span class=\"bg-gradient-to-r from-amber-200 via-yellow-400 to-amber-500 bg-clip-text font-display text-9xl font-light text-transparent\">\n              1924\n            </span>\n          </div>\n          <span class=\"absolute bottom-6 left-6 text-[10px] uppercase tracking-[0.3em] text-stone-500\">\n            Maison Founded\n          </span>\n        </div>\n        <div>\n          <p class=\"text-[11px] uppercase tracking-[0.4em] text-amber-300/80\">\n            Our Heritage\n          </p>\n          <h2 class=\"mt-6 font-display text-4xl font-light leading-tight tracking-tight sm:text-5xl\">\n            ひとつの哲学から\n            <br/>\n            始まった物語\n          </h2>\n          <div class=\"mt-8 h-px w-16 bg-gradient-to-r from-amber-400/60 to-transparent\">\n          </div>\n          <div class=\"mt-8 space-y-5 text-sm leading-relaxed text-stone-400\">\n            <p>\n              パリの小さなアトリエで、創業者は一つの信念を掲げました。「美は、時に屈しない」と。その精神は一世紀を超えて、今も変わることなく受け継がれています。\n            </p>\n            <p>\n              機械では決して生み出せない、人の手の温度。私たちは効率ではなく、永遠を選び続けてきました。\n            </p>\n          </div>\n          <a href=\"#\" class=\"mt-10 inline-flex items-center gap-2 text-[11px] uppercase tracking-[0.3em] text-amber-200 transition-colors hover:text-amber-100\">\n            メゾンの歴史を読む\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-up-right h-3.5 w-3.5\">\n              <path d=\"M7 7h10v10\">\n              </path>\n              <path d=\"M7 17 17 7\">\n              </path>\n            </svg>\n          </a>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"w-full bg-[#0a0a0a] px-6 py-24 text-stone-100\">\n      <div class=\"mx-auto grid max-w-5xl items-center gap-12 lg:grid-cols-2\">\n        <div class=\"relative aspect-[4/5] overflow-hidden border border-amber-400/20 bg-gradient-to-br from-[#161310] via-[#0c0c0c] to-[#080808]\">\n          <div class=\"pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_30%_20%,rgba(217,179,90,0.18),transparent_60%)]\">\n          </div>\n          <div class=\"pointer-events-none absolute inset-0 opacity-[0.06] [background-image:linear-gradient(115deg,transparent_46%,#d4af37_50%,transparent_54%)] [background-size:24px_24px]\">\n          </div>\n          <div class=\"absolute inset-0 flex items-center justify-center\">\n            <span class=\"bg-gradient-to-r from-amber-200 via-yellow-400 to-amber-500 bg-clip-text font-display text-9xl font-light text-transparent\">\n              1924\n            </span>\n          </div>\n          <span class=\"absolute bottom-6 left-6 text-[10px] uppercase tracking-[0.3em] text-stone-500\">\n            Maison Founded\n          </span>\n        </div>\n        <div>\n          <p class=\"text-[11px] uppercase tracking-[0.4em] text-amber-300/80\">\n            Our Heritage\n          </p>\n          <h2 class=\"mt-6 font-display text-4xl font-light leading-tight tracking-tight sm:text-5xl\">\n            ひとつの哲学から\n            <br/>\n            始まった物語\n          </h2>\n          <div class=\"mt-8 h-px w-16 bg-gradient-to-r from-amber-400/60 to-transparent\">\n          </div>\n          <div class=\"mt-8 space-y-5 text-sm leading-relaxed text-stone-400\">\n            <p>\n              パリの小さなアトリエで、創業者は一つの信念を掲げました。「美は、時に屈しない」と。その精神は一世紀を超えて、今も変わることなく受け継がれています。\n            </p>\n            <p>\n              機械では決して生み出せない、人の手の温度。私たちは効率ではなく、永遠を選び続けてきました。\n            </p>\n          </div>\n          <a href=\"#\" class=\"mt-10 inline-flex items-center gap-2 text-[11px] uppercase tracking-[0.3em] text-amber-200 transition-colors hover:text-amber-100\">\n            メゾンの歴史を読む\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-up-right h-3.5 w-3.5\">\n              <path d=\"M7 7h10v10\">\n              </path>\n              <path d=\"M7 17 17 7\">\n              </path>\n            </svg>\n          </a>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "luxury-gold-testimonial",
@@ -908,7 +908,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"ゴールド・テスティモニアル\",\n  category: \"ラグジュアリー\",\n  description: \"金の引用符を添えた、洗練された顧客の声。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"luxury\", \"premium\", \"gold\", \"testimonial\"],\n  principle: \"大きな金の引用符と十分な余白が、言葉そのものに重みと権威を与える。\",\n};\n\nexport default function GoldTestimonial() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <figure className=\"relative w-full max-w-2xl overflow-hidden border border-amber-400/20 bg-[#0a0a0a] px-10 py-14 text-center text-stone-100\">\n      <div className=\"pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(217,179,90,0.08),transparent_60%)]\" />\n\n      <span\n        aria-hidden=\"true\"\n        className=\"block bg-gradient-to-r from-amber-200 via-yellow-400 to-amber-500 bg-clip-text font-display text-7xl leading-none text-transparent\"\n      >\n        &ldquo;\n      </span>\n\n      <blockquote className=\"relative -mt-4\">\n        <p className=\"font-display text-2xl font-light leading-relaxed tracking-tight text-stone-100 sm:text-3xl\">\n          {en\n            ? \"The moment it touches you, you feel the weight of the real. This is not adornment — it is a chapter of my own story.\"\n            : \"身に纏った瞬間に分かる、本物の重み。これは装飾ではなく、私自身の物語の一部です。\"}\n        </p>\n      </blockquote>\n\n      <div className=\"mx-auto mt-9 h-px w-12 bg-gradient-to-r from-transparent via-amber-400/60 to-transparent\" />\n\n      <figcaption className=\"mt-6\">\n        <p className=\"font-display text-lg tracking-[0.1em] text-amber-200\">\n          Isabella Moreau\n        </p>\n        <p className=\"mt-1 text-[11px] uppercase tracking-[0.3em] text-stone-500\">\n          Art Collector · Paris\n        </p>\n      </figcaption>\n    </figure>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <figure class=\"relative w-full max-w-2xl overflow-hidden border border-amber-400/20 bg-[#0a0a0a] px-10 py-14 text-center text-stone-100\">\n      <div class=\"pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(217,179,90,0.08),transparent_60%)]\">\n      </div>\n      <span aria-hidden=\"true\" class=\"block bg-gradient-to-r from-amber-200 via-yellow-400 to-amber-500 bg-clip-text font-display text-7xl leading-none text-transparent\">\n        “\n      </span>\n      <blockquote class=\"relative -mt-4\">\n        <p class=\"font-display text-2xl font-light leading-relaxed tracking-tight text-stone-100 sm:text-3xl\">\n          身に纏った瞬間に分かる、本物の重み。これは装飾ではなく、私自身の物語の一部です。\n        </p>\n      </blockquote>\n      <div class=\"mx-auto mt-9 h-px w-12 bg-gradient-to-r from-transparent via-amber-400/60 to-transparent\">\n      </div>\n      <figcaption class=\"mt-6\">\n        <p class=\"font-display text-lg tracking-[0.1em] text-amber-200\">\n          Isabella Moreau\n        </p>\n        <p class=\"mt-1 text-[11px] uppercase tracking-[0.3em] text-stone-500\">\n          Art Collector · Paris\n        </p>\n      </figcaption>\n    </figure>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <figure class=\"relative w-full max-w-2xl overflow-hidden border border-amber-400/20 bg-[#0a0a0a] px-10 py-14 text-center text-stone-100\">\n      <div class=\"pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(217,179,90,0.08),transparent_60%)]\">\n      </div>\n      <span aria-hidden=\"true\" class=\"block bg-gradient-to-r from-amber-200 via-yellow-400 to-amber-500 bg-clip-text font-display text-7xl leading-none text-transparent\">\n        “\n      </span>\n      <blockquote class=\"relative -mt-4\">\n        <p class=\"font-display text-2xl font-light leading-relaxed tracking-tight text-stone-100 sm:text-3xl\">\n          身に纏った瞬間に分かる、本物の重み。これは装飾ではなく、私自身の物語の一部です。\n        </p>\n      </blockquote>\n      <div class=\"mx-auto mt-9 h-px w-12 bg-gradient-to-r from-transparent via-amber-400/60 to-transparent\">\n      </div>\n      <figcaption class=\"mt-6\">\n        <p class=\"font-display text-lg tracking-[0.1em] text-amber-200\">\n          Isabella Moreau\n        </p>\n        <p class=\"mt-1 text-[11px] uppercase tracking-[0.3em] text-stone-500\">\n          Art Collector · Paris\n        </p>\n      </figcaption>\n    </figure>\n  </body>\n</html>"
     },
     {
       "id": "luxury-luxury-feature",
@@ -923,7 +923,7 @@
       ],
       "standalone": true,
       "source": "import { Gem, Hammer, Leaf, ShieldCheck } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"ラグジュアリー・フィーチャー\",\n  category: \"ラグジュアリー\",\n  description: \"細罫の仕切りで区切る、上質で端正な特徴セクション。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"luxury\", \"premium\", \"gold\", \"feature\"],\n  principle: \"ヘアラインの仕切りと均等な余白が、整然とした秩序と作り手の誠実さを語る。\",\n};\n\nconst features = [\n  {\n    icon: Hammer,\n    title: \"熟練の手仕事\",\n    titleEn: \"Master Craftsmanship\",\n    body: \"一点ごとに数百時間を費やす、マイスターによる完全なハンドメイド。\",\n    bodyEn: \"Entirely handmade by master artisans, with hundreds of hours devoted to every single piece.\",\n  },\n  {\n    icon: Gem,\n    title: \"厳選された素材\",\n    titleEn: \"Curated Materials\",\n    body: \"世界の鉱区から選び抜いた、最高品質の原石と貴金属のみを使用。\",\n    bodyEn: \"Only the finest stones and precious metals, hand-selected from mines around the world.\",\n  },\n  {\n    icon: ShieldCheck,\n    title: \"生涯保証\",\n    titleEn: \"Lifetime Guarantee\",\n    body: \"所有される限り続く、無償のメンテナンスと修復のお約束。\",\n    bodyEn: \"Complimentary maintenance and restoration, promised for as long as the piece is yours.\",\n  },\n  {\n    icon: Leaf,\n    title: \"持続可能性\",\n    titleEn: \"Sustainability\",\n    body: \"倫理的に調達された素材と、責任ある製造へのたゆまぬ取り組み。\",\n    bodyEn: \"An unwavering commitment to ethically sourced materials and responsible craftsmanship.\",\n  },\n];\n\nexport default function LuxuryFeature() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"w-full bg-[#0a0a0a] px-6 py-24 text-stone-100\">\n      <div className=\"mx-auto max-w-2xl text-center\">\n        <p className=\"text-[11px] uppercase tracking-[0.4em] text-amber-300/80\">\n          The Maison\n        </p>\n        <h2 className=\"mt-5 font-display text-4xl font-light tracking-tight sm:text-5xl\">\n          {en ? \"Excellence, Promised\" : \"約束された卓越\"}\n        </h2>\n        <div className=\"mx-auto mt-6 h-px w-16 bg-gradient-to-r from-transparent via-amber-400/60 to-transparent\" />\n      </div>\n\n      <div className=\"mx-auto mt-16 grid max-w-5xl border-t border-stone-800 sm:grid-cols-2 lg:grid-cols-4\">\n        {features.map((f) => (\n          <div\n            key={f.title}\n            className=\"group border-b border-stone-800 p-9 transition-colors hover:bg-[#101010] sm:[&:nth-child(odd)]:border-r lg:border-r lg:[&:last-child]:border-r-0\"\n          >\n            <f.icon className=\"h-6 w-6 text-amber-300 transition-transform duration-300 group-hover:scale-110\" />\n            <h3 className=\"mt-6 font-display text-xl tracking-tight text-stone-100\">\n              {en ? f.titleEn : f.title}\n            </h3>\n            <div className=\"mt-4 h-px w-10 bg-amber-400/30 transition-all duration-300 group-hover:w-16\" />\n            <p className=\"mt-4 text-sm leading-relaxed text-stone-400\">\n              {en ? f.bodyEn : f.body}\n            </p>\n          </div>\n        ))}\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"w-full bg-[#0a0a0a] px-6 py-24 text-stone-100\">\n      <div class=\"mx-auto max-w-2xl text-center\">\n        <p class=\"text-[11px] uppercase tracking-[0.4em] text-amber-300/80\">\n          The Maison\n        </p>\n        <h2 class=\"mt-5 font-display text-4xl font-light tracking-tight sm:text-5xl\">\n          約束された卓越\n        </h2>\n        <div class=\"mx-auto mt-6 h-px w-16 bg-gradient-to-r from-transparent via-amber-400/60 to-transparent\">\n        </div>\n      </div>\n      <div class=\"mx-auto mt-16 grid max-w-5xl border-t border-stone-800 sm:grid-cols-2 lg:grid-cols-4\">\n        <div class=\"group border-b border-stone-800 p-9 transition-colors hover:bg-[#101010] sm:[&amp;:nth-child(odd)]:border-r lg:border-r lg:[&amp;:last-child]:border-r-0\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-hammer h-6 w-6 text-amber-300 transition-transform duration-300 group-hover:scale-110\">\n            <path d=\"m15 12-8.373 8.373a1 1 0 1 1-3-3L12 9\">\n            </path>\n            <path d=\"m18 15 4-4\">\n            </path>\n            <path d=\"m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172V7l-2.26-2.26a6 6 0 0 0-4.202-1.756L9 2.96l.92.82A6.18 6.18 0 0 1 12 8.4V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5\">\n            </path>\n          </svg>\n          <h3 class=\"mt-6 font-display text-xl tracking-tight text-stone-100\">\n            熟練の手仕事\n          </h3>\n          <div class=\"mt-4 h-px w-10 bg-amber-400/30 transition-all duration-300 group-hover:w-16\">\n          </div>\n          <p class=\"mt-4 text-sm leading-relaxed text-stone-400\">\n            一点ごとに数百時間を費やす、マイスターによる完全なハンドメイド。\n          </p>\n        </div>\n        <div class=\"group border-b border-stone-800 p-9 transition-colors hover:bg-[#101010] sm:[&amp;:nth-child(odd)]:border-r lg:border-r lg:[&amp;:last-child]:border-r-0\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-gem h-6 w-6 text-amber-300 transition-transform duration-300 group-hover:scale-110\">\n            <path d=\"M6 3h12l4 6-10 13L2 9Z\">\n            </path>\n            <path d=\"M11 3 8 9l4 13 4-13-3-6\">\n            </path>\n            <path d=\"M2 9h20\">\n            </path>\n          </svg>\n          <h3 class=\"mt-6 font-display text-xl tracking-tight text-stone-100\">\n            厳選された素材\n          </h3>\n          <div class=\"mt-4 h-px w-10 bg-amber-400/30 transition-all duration-300 group-hover:w-16\">\n          </div>\n          <p class=\"mt-4 text-sm leading-relaxed text-stone-400\">\n            世界の鉱区から選び抜いた、最高品質の原石と貴金属のみを使用。\n          </p>\n        </div>\n        <div class=\"group border-b border-stone-800 p-9 transition-colors hover:bg-[#101010] sm:[&amp;:nth-child(odd)]:border-r lg:border-r lg:[&amp;:last-child]:border-r-0\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-shield-check h-6 w-6 text-amber-300 transition-transform duration-300 group-hover:scale-110\">\n            <path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\n            </path>\n            <path d=\"m9 12 2 2 4-4\">\n            </path>\n          </svg>\n          <h3 class=\"mt-6 font-display text-xl tracking-tight text-stone-100\">\n            生涯保証\n          </h3>\n          <div class=\"mt-4 h-px w-10 bg-amber-400/30 transition-all duration-300 group-hover:w-16\">\n          </div>\n          <p class=\"mt-4 text-sm leading-relaxed text-stone-400\">\n            所有される限り続く、無償のメンテナンスと修復のお約束。\n          </p>\n        </div>\n        <div class=\"group border-b border-stone-800 p-9 transition-colors hover:bg-[#101010] sm:[&amp;:nth-child(odd)]:border-r lg:border-r lg:[&amp;:last-child]:border-r-0\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-leaf h-6 w-6 text-amber-300 transition-transform duration-300 group-hover:scale-110\">\n            <path d=\"M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z\">\n            </path>\n            <path d=\"M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12\">\n            </path>\n          </svg>\n          <h3 class=\"mt-6 font-display text-xl tracking-tight text-stone-100\">\n            持続可能性\n          </h3>\n          <div class=\"mt-4 h-px w-10 bg-amber-400/30 transition-all duration-300 group-hover:w-16\">\n          </div>\n          <p class=\"mt-4 text-sm leading-relaxed text-stone-400\">\n            倫理的に調達された素材と、責任ある製造へのたゆまぬ取り組み。\n          </p>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"w-full bg-[#0a0a0a] px-6 py-24 text-stone-100\">\n      <div class=\"mx-auto max-w-2xl text-center\">\n        <p class=\"text-[11px] uppercase tracking-[0.4em] text-amber-300/80\">\n          The Maison\n        </p>\n        <h2 class=\"mt-5 font-display text-4xl font-light tracking-tight sm:text-5xl\">\n          約束された卓越\n        </h2>\n        <div class=\"mx-auto mt-6 h-px w-16 bg-gradient-to-r from-transparent via-amber-400/60 to-transparent\">\n        </div>\n      </div>\n      <div class=\"mx-auto mt-16 grid max-w-5xl border-t border-stone-800 sm:grid-cols-2 lg:grid-cols-4\">\n        <div class=\"group border-b border-stone-800 p-9 transition-colors hover:bg-[#101010] sm:[&amp;:nth-child(odd)]:border-r lg:border-r lg:[&amp;:last-child]:border-r-0\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-hammer h-6 w-6 text-amber-300 transition-transform duration-300 group-hover:scale-110\">\n            <path d=\"m15 12-8.373 8.373a1 1 0 1 1-3-3L12 9\">\n            </path>\n            <path d=\"m18 15 4-4\">\n            </path>\n            <path d=\"m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172V7l-2.26-2.26a6 6 0 0 0-4.202-1.756L9 2.96l.92.82A6.18 6.18 0 0 1 12 8.4V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5\">\n            </path>\n          </svg>\n          <h3 class=\"mt-6 font-display text-xl tracking-tight text-stone-100\">\n            熟練の手仕事\n          </h3>\n          <div class=\"mt-4 h-px w-10 bg-amber-400/30 transition-all duration-300 group-hover:w-16\">\n          </div>\n          <p class=\"mt-4 text-sm leading-relaxed text-stone-400\">\n            一点ごとに数百時間を費やす、マイスターによる完全なハンドメイド。\n          </p>\n        </div>\n        <div class=\"group border-b border-stone-800 p-9 transition-colors hover:bg-[#101010] sm:[&amp;:nth-child(odd)]:border-r lg:border-r lg:[&amp;:last-child]:border-r-0\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-gem h-6 w-6 text-amber-300 transition-transform duration-300 group-hover:scale-110\">\n            <path d=\"M6 3h12l4 6-10 13L2 9Z\">\n            </path>\n            <path d=\"M11 3 8 9l4 13 4-13-3-6\">\n            </path>\n            <path d=\"M2 9h20\">\n            </path>\n          </svg>\n          <h3 class=\"mt-6 font-display text-xl tracking-tight text-stone-100\">\n            厳選された素材\n          </h3>\n          <div class=\"mt-4 h-px w-10 bg-amber-400/30 transition-all duration-300 group-hover:w-16\">\n          </div>\n          <p class=\"mt-4 text-sm leading-relaxed text-stone-400\">\n            世界の鉱区から選び抜いた、最高品質の原石と貴金属のみを使用。\n          </p>\n        </div>\n        <div class=\"group border-b border-stone-800 p-9 transition-colors hover:bg-[#101010] sm:[&amp;:nth-child(odd)]:border-r lg:border-r lg:[&amp;:last-child]:border-r-0\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-shield-check h-6 w-6 text-amber-300 transition-transform duration-300 group-hover:scale-110\">\n            <path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\n            </path>\n            <path d=\"m9 12 2 2 4-4\">\n            </path>\n          </svg>\n          <h3 class=\"mt-6 font-display text-xl tracking-tight text-stone-100\">\n            生涯保証\n          </h3>\n          <div class=\"mt-4 h-px w-10 bg-amber-400/30 transition-all duration-300 group-hover:w-16\">\n          </div>\n          <p class=\"mt-4 text-sm leading-relaxed text-stone-400\">\n            所有される限り続く、無償のメンテナンスと修復のお約束。\n          </p>\n        </div>\n        <div class=\"group border-b border-stone-800 p-9 transition-colors hover:bg-[#101010] sm:[&amp;:nth-child(odd)]:border-r lg:border-r lg:[&amp;:last-child]:border-r-0\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-leaf h-6 w-6 text-amber-300 transition-transform duration-300 group-hover:scale-110\">\n            <path d=\"M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z\">\n            </path>\n            <path d=\"M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12\">\n            </path>\n          </svg>\n          <h3 class=\"mt-6 font-display text-xl tracking-tight text-stone-100\">\n            持続可能性\n          </h3>\n          <div class=\"mt-4 h-px w-10 bg-amber-400/30 transition-all duration-300 group-hover:w-16\">\n          </div>\n          <p class=\"mt-4 text-sm leading-relaxed text-stone-400\">\n            倫理的に調達された素材と、責任ある製造へのたゆまぬ取り組み。\n          </p>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "marquee-avatar-marquee",
@@ -938,7 +938,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"アバターマーキー\",\n  category: \"マーキー\",\n  description: \"イニシャルアバターが流れる「N 人に信頼されています」帯。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"marquee\", \"animation\", \"infinite\", \"avatar\"],\n};\n\nconst USERS = [\n  { initials: \"MS\", color: \"bg-rose-500\" },\n  { initials: \"LC\", color: \"bg-sky-500\" },\n  { initials: \"TK\", color: \"bg-violet-500\" },\n  { initials: \"AN\", color: \"bg-amber-500\" },\n  { initials: \"YA\", color: \"bg-emerald-500\" },\n  { initials: \"JD\", color: \"bg-indigo-500\" },\n  { initials: \"RB\", color: \"bg-fuchsia-500\" },\n  { initials: \"KS\", color: \"bg-teal-500\" },\n  { initials: \"EL\", color: \"bg-orange-500\" },\n  { initials: \"PW\", color: \"bg-cyan-500\" },\n];\n\nexport default function AvatarMarquee() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <div className=\"w-full py-8\">\n      <style>{`\n        @keyframes avatarMarqueeScroll {\n          from { transform: translateX(0); }\n          to { transform: translateX(-50%); }\n        }\n        .avatar-track { animation: avatarMarqueeScroll 24s linear infinite; }\n        .avatar-mask:hover .avatar-track { animation-play-state: paused; }\n      `}</style>\n      <p className=\"mb-5 text-center text-sm font-medium text-muted-foreground\">\n        <span className=\"font-bold text-foreground\">28,000+</span>{\" \"}\n        {en ? \"users trust us\" : \"人のユーザーに信頼されています\"}\n      </p>\n      <div\n        className=\"avatar-mask group relative overflow-hidden\"\n        style={{\n          maskImage:\n            \"linear-gradient(to right, transparent, black 10%, black 90%, transparent)\",\n          WebkitMaskImage:\n            \"linear-gradient(to right, transparent, black 10%, black 90%, transparent)\",\n        }}\n      >\n        <div className=\"avatar-track flex w-max items-center gap-3 pr-3\">\n          {[...USERS, ...USERS].map((u, i) => (\n            <span\n              key={`${u.initials}-${i}`}\n              className={`flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background ${u.color}`}\n            >\n              {u.initials}\n            </span>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"w-full py-8\">\n      <style>\n        @keyframes avatarMarqueeScroll {\n              from { transform: translateX(0); }\n              to { transform: translateX(-50%); }\n            }\n            .avatar-track { animation: avatarMarqueeScroll 24s linear infinite; }\n            .avatar-mask:hover .avatar-track { animation-play-state: paused; }\n      </style>\n      <p class=\"mb-5 text-center text-sm font-medium text-muted-foreground\">\n        <span class=\"font-bold text-foreground\">\n          28,000+\n        </span>\n        人のユーザーに信頼されています\n      </p>\n      <div class=\"avatar-mask group relative overflow-hidden\" style=\"mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent);-webkit-mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent)\">\n        <div class=\"avatar-track flex w-max items-center gap-3 pr-3\">\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-rose-500\">\n            MS\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-sky-500\">\n            LC\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-violet-500\">\n            TK\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-amber-500\">\n            AN\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-emerald-500\">\n            YA\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-indigo-500\">\n            JD\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-fuchsia-500\">\n            RB\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-teal-500\">\n            KS\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-orange-500\">\n            EL\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-cyan-500\">\n            PW\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-rose-500\">\n            MS\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-sky-500\">\n            LC\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-violet-500\">\n            TK\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-amber-500\">\n            AN\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-emerald-500\">\n            YA\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-indigo-500\">\n            JD\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-fuchsia-500\">\n            RB\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-teal-500\">\n            KS\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-orange-500\">\n            EL\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-cyan-500\">\n            PW\n          </span>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"w-full py-8\">\n      <style>\n        @keyframes avatarMarqueeScroll {\n              from { transform: translateX(0); }\n              to { transform: translateX(-50%); }\n            }\n            .avatar-track { animation: avatarMarqueeScroll 24s linear infinite; }\n            .avatar-mask:hover .avatar-track { animation-play-state: paused; }\n      </style>\n      <p class=\"mb-5 text-center text-sm font-medium text-muted-foreground\">\n        <span class=\"font-bold text-foreground\">\n          28,000+\n        </span>\n        人のユーザーに信頼されています\n      </p>\n      <div class=\"avatar-mask group relative overflow-hidden\" style=\"mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent);-webkit-mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent)\">\n        <div class=\"avatar-track flex w-max items-center gap-3 pr-3\">\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-rose-500\">\n            MS\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-sky-500\">\n            LC\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-violet-500\">\n            TK\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-amber-500\">\n            AN\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-emerald-500\">\n            YA\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-indigo-500\">\n            JD\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-fuchsia-500\">\n            RB\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-teal-500\">\n            KS\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-orange-500\">\n            EL\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-cyan-500\">\n            PW\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-rose-500\">\n            MS\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-sky-500\">\n            LC\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-violet-500\">\n            TK\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-amber-500\">\n            AN\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-emerald-500\">\n            YA\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-indigo-500\">\n            JD\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-fuchsia-500\">\n            RB\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-teal-500\">\n            KS\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-orange-500\">\n            EL\n          </span>\n          <span class=\"flex size-12 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ring-2 ring-background bg-cyan-500\">\n            PW\n          </span>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "marquee-brand-ticker",
@@ -953,7 +953,7 @@
       ],
       "standalone": true,
       "source": "import { Sparkles } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"ブランドティッカー\",\n  category: \"マーキー\",\n  description: \"ニュース速報風の細いスクロールテキスト帯。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"marquee\", \"animation\", \"infinite\", \"ticker\"],\n};\n\nconst HEADLINES = [\n  { ja: \"新機能をリリースしました\", en: \"New feature just shipped\" },\n  { ja: \"ユーザー数 100,000 突破\", en: \"Over 100,000 users\" },\n  { ja: \"今週末限定セール開催中\", en: \"Weekend-only sale on now\" },\n  { ja: \"新しいインテグレーションに対応\", en: \"New integrations supported\" },\n  { ja: \"カンファレンスのチケット販売開始\", en: \"Conference tickets on sale\" },\n  { ja: \"アップタイム 99.99% を達成\", en: \"Achieved 99.99% uptime\" },\n];\n\nexport default function BrandTicker() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  const line = [...HEADLINES, ...HEADLINES];\n  return (\n    <div className=\"w-full py-8\">\n      <style>{`\n        @keyframes brandTickerScroll {\n          from { transform: translateX(0); }\n          to { transform: translateX(-50%); }\n        }\n        .brand-ticker-track { animation: brandTickerScroll 22s linear infinite; }\n        .brand-ticker-band:hover .brand-ticker-track { animation-play-state: paused; }\n      `}</style>\n      <div className=\"brand-ticker-band group relative flex items-center overflow-hidden bg-primary text-primary-foreground\">\n        <span className=\"z-10 flex shrink-0 items-center gap-1.5 bg-primary px-4 py-2 text-xs font-bold uppercase tracking-widest shadow-[8px_0_12px_-4px_rgba(0,0,0,0.4)]\">\n          <Sparkles className=\"size-3.5\" />\n          NEWS\n        </span>\n        <div className=\"relative flex-1 overflow-hidden\">\n          <div className=\"brand-ticker-track flex w-max items-center\">\n            {line.map((h, i) => (\n              <span key={i} className=\"flex shrink-0 items-center text-sm font-medium\">\n                <span className=\"px-6\">{en ? h.en : h.ja}</span>\n                <span className=\"text-primary-foreground/50\">•</span>\n              </span>\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"w-full py-8\">\n      <style>\n        @keyframes brandTickerScroll {\n              from { transform: translateX(0); }\n              to { transform: translateX(-50%); }\n            }\n            .brand-ticker-track { animation: brandTickerScroll 22s linear infinite; }\n            .brand-ticker-band:hover .brand-ticker-track { animation-play-state: paused; }\n      </style>\n      <div class=\"brand-ticker-band group relative flex items-center overflow-hidden bg-primary text-primary-foreground\">\n        <span class=\"z-10 flex shrink-0 items-center gap-1.5 bg-primary px-4 py-2 text-xs font-bold uppercase tracking-widest shadow-[8px_0_12px_-4px_rgba(0,0,0,0.4)]\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5\">\n            <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n            </path>\n            <path d=\"M20 3v4\">\n            </path>\n            <path d=\"M22 5h-4\">\n            </path>\n            <path d=\"M4 17v2\">\n            </path>\n            <path d=\"M5 18H3\">\n            </path>\n          </svg>\n          NEWS\n        </span>\n        <div class=\"relative flex-1 overflow-hidden\">\n          <div class=\"brand-ticker-track flex w-max items-center\">\n            <span class=\"flex shrink-0 items-center text-sm font-medium\">\n              <span class=\"px-6\">\n                新機能をリリースしました\n              </span>\n              <span class=\"text-primary-foreground/50\">\n                •\n              </span>\n            </span>\n            <span class=\"flex shrink-0 items-center text-sm font-medium\">\n              <span class=\"px-6\">\n                ユーザー数 100,000 突破\n              </span>\n              <span class=\"text-primary-foreground/50\">\n                •\n              </span>\n            </span>\n            <span class=\"flex shrink-0 items-center text-sm font-medium\">\n              <span class=\"px-6\">\n                今週末限定セール開催中\n              </span>\n              <span class=\"text-primary-foreground/50\">\n                •\n              </span>\n            </span>\n            <span class=\"flex shrink-0 items-center text-sm font-medium\">\n              <span class=\"px-6\">\n                新しいインテグレーションに対応\n              </span>\n              <span class=\"text-primary-foreground/50\">\n                •\n              </span>\n            </span>\n            <span class=\"flex shrink-0 items-center text-sm font-medium\">\n              <span class=\"px-6\">\n                カンファレンスのチケット販売開始\n              </span>\n              <span class=\"text-primary-foreground/50\">\n                •\n              </span>\n            </span>\n            <span class=\"flex shrink-0 items-center text-sm font-medium\">\n              <span class=\"px-6\">\n                アップタイム 99.99% を達成\n              </span>\n              <span class=\"text-primary-foreground/50\">\n                •\n              </span>\n            </span>\n            <span class=\"flex shrink-0 items-center text-sm font-medium\">\n              <span class=\"px-6\">\n                新機能をリリースしました\n              </span>\n              <span class=\"text-primary-foreground/50\">\n                •\n              </span>\n            </span>\n            <span class=\"flex shrink-0 items-center text-sm font-medium\">\n              <span class=\"px-6\">\n                ユーザー数 100,000 突破\n              </span>\n              <span class=\"text-primary-foreground/50\">\n                •\n              </span>\n            </span>\n            <span class=\"flex shrink-0 items-center text-sm font-medium\">\n              <span class=\"px-6\">\n                今週末限定セール開催中\n              </span>\n              <span class=\"text-primary-foreground/50\">\n                •\n              </span>\n            </span>\n            <span class=\"flex shrink-0 items-center text-sm font-medium\">\n              <span class=\"px-6\">\n                新しいインテグレーションに対応\n              </span>\n              <span class=\"text-primary-foreground/50\">\n                •\n              </span>\n            </span>\n            <span class=\"flex shrink-0 items-center text-sm font-medium\">\n              <span class=\"px-6\">\n                カンファレンスのチケット販売開始\n              </span>\n              <span class=\"text-primary-foreground/50\">\n                •\n              </span>\n            </span>\n            <span class=\"flex shrink-0 items-center text-sm font-medium\">\n              <span class=\"px-6\">\n                アップタイム 99.99% を達成\n              </span>\n              <span class=\"text-primary-foreground/50\">\n                •\n              </span>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"w-full py-8\">\n      <style>\n        @keyframes brandTickerScroll {\n              from { transform: translateX(0); }\n              to { transform: translateX(-50%); }\n            }\n            .brand-ticker-track { animation: brandTickerScroll 22s linear infinite; }\n            .brand-ticker-band:hover .brand-ticker-track { animation-play-state: paused; }\n      </style>\n      <div class=\"brand-ticker-band group relative flex items-center overflow-hidden bg-primary text-primary-foreground\">\n        <span class=\"z-10 flex shrink-0 items-center gap-1.5 bg-primary px-4 py-2 text-xs font-bold uppercase tracking-widest shadow-[8px_0_12px_-4px_rgba(0,0,0,0.4)]\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5\">\n            <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n            </path>\n            <path d=\"M20 3v4\">\n            </path>\n            <path d=\"M22 5h-4\">\n            </path>\n            <path d=\"M4 17v2\">\n            </path>\n            <path d=\"M5 18H3\">\n            </path>\n          </svg>\n          NEWS\n        </span>\n        <div class=\"relative flex-1 overflow-hidden\">\n          <div class=\"brand-ticker-track flex w-max items-center\">\n            <span class=\"flex shrink-0 items-center text-sm font-medium\">\n              <span class=\"px-6\">\n                新機能をリリースしました\n              </span>\n              <span class=\"text-primary-foreground/50\">\n                •\n              </span>\n            </span>\n            <span class=\"flex shrink-0 items-center text-sm font-medium\">\n              <span class=\"px-6\">\n                ユーザー数 100,000 突破\n              </span>\n              <span class=\"text-primary-foreground/50\">\n                •\n              </span>\n            </span>\n            <span class=\"flex shrink-0 items-center text-sm font-medium\">\n              <span class=\"px-6\">\n                今週末限定セール開催中\n              </span>\n              <span class=\"text-primary-foreground/50\">\n                •\n              </span>\n            </span>\n            <span class=\"flex shrink-0 items-center text-sm font-medium\">\n              <span class=\"px-6\">\n                新しいインテグレーションに対応\n              </span>\n              <span class=\"text-primary-foreground/50\">\n                •\n              </span>\n            </span>\n            <span class=\"flex shrink-0 items-center text-sm font-medium\">\n              <span class=\"px-6\">\n                カンファレンスのチケット販売開始\n              </span>\n              <span class=\"text-primary-foreground/50\">\n                •\n              </span>\n            </span>\n            <span class=\"flex shrink-0 items-center text-sm font-medium\">\n              <span class=\"px-6\">\n                アップタイム 99.99% を達成\n              </span>\n              <span class=\"text-primary-foreground/50\">\n                •\n              </span>\n            </span>\n            <span class=\"flex shrink-0 items-center text-sm font-medium\">\n              <span class=\"px-6\">\n                新機能をリリースしました\n              </span>\n              <span class=\"text-primary-foreground/50\">\n                •\n              </span>\n            </span>\n            <span class=\"flex shrink-0 items-center text-sm font-medium\">\n              <span class=\"px-6\">\n                ユーザー数 100,000 突破\n              </span>\n              <span class=\"text-primary-foreground/50\">\n                •\n              </span>\n            </span>\n            <span class=\"flex shrink-0 items-center text-sm font-medium\">\n              <span class=\"px-6\">\n                今週末限定セール開催中\n              </span>\n              <span class=\"text-primary-foreground/50\">\n                •\n              </span>\n            </span>\n            <span class=\"flex shrink-0 items-center text-sm font-medium\">\n              <span class=\"px-6\">\n                新しいインテグレーションに対応\n              </span>\n              <span class=\"text-primary-foreground/50\">\n                •\n              </span>\n            </span>\n            <span class=\"flex shrink-0 items-center text-sm font-medium\">\n              <span class=\"px-6\">\n                カンファレンスのチケット販売開始\n              </span>\n              <span class=\"text-primary-foreground/50\">\n                •\n              </span>\n            </span>\n            <span class=\"flex shrink-0 items-center text-sm font-medium\">\n              <span class=\"px-6\">\n                アップタイム 99.99% を達成\n              </span>\n              <span class=\"text-primary-foreground/50\">\n                •\n              </span>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "marquee-dual-marquee",
@@ -968,7 +968,7 @@
       ],
       "standalone": true,
       "source": "import { Atom, Cloud, Cpu, Database, Globe, Layers, Shield, Workflow } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"デュアルマーキー\",\n  category: \"マーキー\",\n  description: \"上下で逆方向にスクロールする2列のロゴ帯。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"marquee\", \"animation\", \"infinite\", \"dual\"],\n};\n\nconst ROW_A = [\n  { name: \"Cloudly\", Icon: Cloud },\n  { name: \"Atomix\", Icon: Atom },\n  { name: \"Globex\", Icon: Globe },\n  { name: \"Layerly\", Icon: Layers },\n];\nconst ROW_B = [\n  { name: \"Coreon\", Icon: Cpu },\n  { name: \"Datavault\", Icon: Database },\n  { name: \"Shieldr\", Icon: Shield },\n  { name: \"Flowly\", Icon: Workflow },\n];\n\ntype Item = { name: string; Icon: typeof Cloud };\n\nfunction Row({ items, reverse }: { items: Item[]; reverse?: boolean }) {\n  return (\n    <div\n      className=\"dual-marquee-mask group relative overflow-hidden\"\n      style={{\n        maskImage:\n          \"linear-gradient(to right, transparent, black 10%, black 90%, transparent)\",\n        WebkitMaskImage:\n          \"linear-gradient(to right, transparent, black 10%, black 90%, transparent)\",\n      }}\n    >\n      <div\n        className=\"flex w-max items-center gap-10 pr-10\"\n        style={{\n          animation: `dualMarqueeScroll 24s linear infinite${reverse ? \" reverse\" : \"\"}`,\n        }}\n      >\n        {[...items, ...items].map(({ name, Icon }, i) => (\n          <div\n            key={`${name}-${i}`}\n            className=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\"\n          >\n            <Icon className=\"size-5 text-primary\" />\n            <span className=\"text-base font-semibold tracking-tight\">{name}</span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nexport default function DualMarquee() {\n  return (\n    <div className=\"w-full space-y-4 py-8 [&_.group:hover_*]:[animation-play-state:paused]\">\n      <style>{`\n        @keyframes dualMarqueeScroll {\n          from { transform: translateX(0); }\n          to { transform: translateX(-50%); }\n        }\n      `}</style>\n      <Row items={ROW_A} />\n      <Row items={ROW_B} reverse />\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"w-full space-y-4 py-8 [&amp;_.group:hover_*]:[animation-play-state:paused]\">\n      <style>\n        @keyframes dualMarqueeScroll {\n              from { transform: translateX(0); }\n              to { transform: translateX(-50%); }\n            }\n      </style>\n      <div class=\"dual-marquee-mask group relative overflow-hidden\" style=\"mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent);-webkit-mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent)\">\n        <div class=\"flex w-max items-center gap-10 pr-10\" style=\"animation:dualMarqueeScroll 24s linear infinite\">\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-cloud size-5 text-primary\">\n              <path d=\"M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z\">\n              </path>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Cloudly\n            </span>\n          </div>\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-atom size-5 text-primary\">\n              <circle cx=\"12\" cy=\"12\" r=\"1\">\n              </circle>\n              <path d=\"M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z\">\n              </path>\n              <path d=\"M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z\">\n              </path>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Atomix\n            </span>\n          </div>\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-globe size-5 text-primary\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\">\n              </circle>\n              <path d=\"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20\">\n              </path>\n              <path d=\"M2 12h20\">\n              </path>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Globex\n            </span>\n          </div>\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-layers size-5 text-primary\">\n              <path d=\"m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z\">\n              </path>\n              <path d=\"m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65\">\n              </path>\n              <path d=\"m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65\">\n              </path>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Layerly\n            </span>\n          </div>\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-cloud size-5 text-primary\">\n              <path d=\"M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z\">\n              </path>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Cloudly\n            </span>\n          </div>\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-atom size-5 text-primary\">\n              <circle cx=\"12\" cy=\"12\" r=\"1\">\n              </circle>\n              <path d=\"M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z\">\n              </path>\n              <path d=\"M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z\">\n              </path>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Atomix\n            </span>\n          </div>\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-globe size-5 text-primary\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\">\n              </circle>\n              <path d=\"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20\">\n              </path>\n              <path d=\"M2 12h20\">\n              </path>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Globex\n            </span>\n          </div>\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-layers size-5 text-primary\">\n              <path d=\"m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z\">\n              </path>\n              <path d=\"m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65\">\n              </path>\n              <path d=\"m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65\">\n              </path>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Layerly\n            </span>\n          </div>\n        </div>\n      </div>\n      <div class=\"dual-marquee-mask group relative overflow-hidden\" style=\"mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent);-webkit-mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent)\">\n        <div class=\"flex w-max items-center gap-10 pr-10\" style=\"animation:dualMarqueeScroll 24s linear infinite reverse\">\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-cpu size-5 text-primary\">\n              <rect width=\"16\" height=\"16\" x=\"4\" y=\"4\" rx=\"2\">\n              </rect>\n              <rect width=\"6\" height=\"6\" x=\"9\" y=\"9\" rx=\"1\">\n              </rect>\n              <path d=\"M15 2v2\">\n              </path>\n              <path d=\"M15 20v2\">\n              </path>\n              <path d=\"M2 15h2\">\n              </path>\n              <path d=\"M2 9h2\">\n              </path>\n              <path d=\"M20 15h2\">\n              </path>\n              <path d=\"M20 9h2\">\n              </path>\n              <path d=\"M9 2v2\">\n              </path>\n              <path d=\"M9 20v2\">\n              </path>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Coreon\n            </span>\n          </div>\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-database size-5 text-primary\">\n              <ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\">\n              </ellipse>\n              <path d=\"M3 5V19A9 3 0 0 0 21 19V5\">\n              </path>\n              <path d=\"M3 12A9 3 0 0 0 21 12\">\n              </path>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Datavault\n            </span>\n          </div>\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-shield size-5 text-primary\">\n              <path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\n              </path>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Shieldr\n            </span>\n          </div>\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-workflow size-5 text-primary\">\n              <rect width=\"8\" height=\"8\" x=\"3\" y=\"3\" rx=\"2\">\n              </rect>\n              <path d=\"M7 11v4a2 2 0 0 0 2 2h4\">\n              </path>\n              <rect width=\"8\" height=\"8\" x=\"13\" y=\"13\" rx=\"2\">\n              </rect>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Flowly\n            </span>\n          </div>\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-cpu size-5 text-primary\">\n              <rect width=\"16\" height=\"16\" x=\"4\" y=\"4\" rx=\"2\">\n              </rect>\n              <rect width=\"6\" height=\"6\" x=\"9\" y=\"9\" rx=\"1\">\n              </rect>\n              <path d=\"M15 2v2\">\n              </path>\n              <path d=\"M15 20v2\">\n              </path>\n              <path d=\"M2 15h2\">\n              </path>\n              <path d=\"M2 9h2\">\n              </path>\n              <path d=\"M20 15h2\">\n              </path>\n              <path d=\"M20 9h2\">\n              </path>\n              <path d=\"M9 2v2\">\n              </path>\n              <path d=\"M9 20v2\">\n              </path>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Coreon\n            </span>\n          </div>\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-database size-5 text-primary\">\n              <ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\">\n              </ellipse>\n              <path d=\"M3 5V19A9 3 0 0 0 21 19V5\">\n              </path>\n              <path d=\"M3 12A9 3 0 0 0 21 12\">\n              </path>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Datavault\n            </span>\n          </div>\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-shield size-5 text-primary\">\n              <path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\n              </path>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Shieldr\n            </span>\n          </div>\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-workflow size-5 text-primary\">\n              <rect width=\"8\" height=\"8\" x=\"3\" y=\"3\" rx=\"2\">\n              </rect>\n              <path d=\"M7 11v4a2 2 0 0 0 2 2h4\">\n              </path>\n              <rect width=\"8\" height=\"8\" x=\"13\" y=\"13\" rx=\"2\">\n              </rect>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Flowly\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"w-full space-y-4 py-8 [&amp;_.group:hover_*]:[animation-play-state:paused]\">\n      <style>\n        @keyframes dualMarqueeScroll {\n              from { transform: translateX(0); }\n              to { transform: translateX(-50%); }\n            }\n      </style>\n      <div class=\"dual-marquee-mask group relative overflow-hidden\" style=\"mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent);-webkit-mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent)\">\n        <div class=\"flex w-max items-center gap-10 pr-10\" style=\"animation:dualMarqueeScroll 24s linear infinite\">\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-cloud size-5 text-primary\">\n              <path d=\"M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z\">\n              </path>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Cloudly\n            </span>\n          </div>\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-atom size-5 text-primary\">\n              <circle cx=\"12\" cy=\"12\" r=\"1\">\n              </circle>\n              <path d=\"M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z\">\n              </path>\n              <path d=\"M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z\">\n              </path>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Atomix\n            </span>\n          </div>\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-globe size-5 text-primary\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\">\n              </circle>\n              <path d=\"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20\">\n              </path>\n              <path d=\"M2 12h20\">\n              </path>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Globex\n            </span>\n          </div>\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-layers size-5 text-primary\">\n              <path d=\"m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z\">\n              </path>\n              <path d=\"m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65\">\n              </path>\n              <path d=\"m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65\">\n              </path>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Layerly\n            </span>\n          </div>\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-cloud size-5 text-primary\">\n              <path d=\"M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z\">\n              </path>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Cloudly\n            </span>\n          </div>\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-atom size-5 text-primary\">\n              <circle cx=\"12\" cy=\"12\" r=\"1\">\n              </circle>\n              <path d=\"M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z\">\n              </path>\n              <path d=\"M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z\">\n              </path>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Atomix\n            </span>\n          </div>\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-globe size-5 text-primary\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\">\n              </circle>\n              <path d=\"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20\">\n              </path>\n              <path d=\"M2 12h20\">\n              </path>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Globex\n            </span>\n          </div>\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-layers size-5 text-primary\">\n              <path d=\"m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z\">\n              </path>\n              <path d=\"m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65\">\n              </path>\n              <path d=\"m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65\">\n              </path>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Layerly\n            </span>\n          </div>\n        </div>\n      </div>\n      <div class=\"dual-marquee-mask group relative overflow-hidden\" style=\"mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent);-webkit-mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent)\">\n        <div class=\"flex w-max items-center gap-10 pr-10\" style=\"animation:dualMarqueeScroll 24s linear infinite reverse\">\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-cpu size-5 text-primary\">\n              <rect width=\"16\" height=\"16\" x=\"4\" y=\"4\" rx=\"2\">\n              </rect>\n              <rect width=\"6\" height=\"6\" x=\"9\" y=\"9\" rx=\"1\">\n              </rect>\n              <path d=\"M15 2v2\">\n              </path>\n              <path d=\"M15 20v2\">\n              </path>\n              <path d=\"M2 15h2\">\n              </path>\n              <path d=\"M2 9h2\">\n              </path>\n              <path d=\"M20 15h2\">\n              </path>\n              <path d=\"M20 9h2\">\n              </path>\n              <path d=\"M9 2v2\">\n              </path>\n              <path d=\"M9 20v2\">\n              </path>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Coreon\n            </span>\n          </div>\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-database size-5 text-primary\">\n              <ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\">\n              </ellipse>\n              <path d=\"M3 5V19A9 3 0 0 0 21 19V5\">\n              </path>\n              <path d=\"M3 12A9 3 0 0 0 21 12\">\n              </path>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Datavault\n            </span>\n          </div>\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-shield size-5 text-primary\">\n              <path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\n              </path>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Shieldr\n            </span>\n          </div>\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-workflow size-5 text-primary\">\n              <rect width=\"8\" height=\"8\" x=\"3\" y=\"3\" rx=\"2\">\n              </rect>\n              <path d=\"M7 11v4a2 2 0 0 0 2 2h4\">\n              </path>\n              <rect width=\"8\" height=\"8\" x=\"13\" y=\"13\" rx=\"2\">\n              </rect>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Flowly\n            </span>\n          </div>\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-cpu size-5 text-primary\">\n              <rect width=\"16\" height=\"16\" x=\"4\" y=\"4\" rx=\"2\">\n              </rect>\n              <rect width=\"6\" height=\"6\" x=\"9\" y=\"9\" rx=\"1\">\n              </rect>\n              <path d=\"M15 2v2\">\n              </path>\n              <path d=\"M15 20v2\">\n              </path>\n              <path d=\"M2 15h2\">\n              </path>\n              <path d=\"M2 9h2\">\n              </path>\n              <path d=\"M20 15h2\">\n              </path>\n              <path d=\"M20 9h2\">\n              </path>\n              <path d=\"M9 2v2\">\n              </path>\n              <path d=\"M9 20v2\">\n              </path>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Coreon\n            </span>\n          </div>\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-database size-5 text-primary\">\n              <ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\">\n              </ellipse>\n              <path d=\"M3 5V19A9 3 0 0 0 21 19V5\">\n              </path>\n              <path d=\"M3 12A9 3 0 0 0 21 12\">\n              </path>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Datavault\n            </span>\n          </div>\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-shield size-5 text-primary\">\n              <path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\n              </path>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Shieldr\n            </span>\n          </div>\n          <div class=\"flex shrink-0 items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 text-foreground shadow-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-workflow size-5 text-primary\">\n              <rect width=\"8\" height=\"8\" x=\"3\" y=\"3\" rx=\"2\">\n              </rect>\n              <path d=\"M7 11v4a2 2 0 0 0 2 2h4\">\n              </path>\n              <rect width=\"8\" height=\"8\" x=\"13\" y=\"13\" rx=\"2\">\n              </rect>\n            </svg>\n            <span class=\"text-base font-semibold tracking-tight\">\n              Flowly\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "marquee-icon-marquee",
@@ -983,7 +983,7 @@
       ],
       "standalone": true,
       "source": "import {\n  Boxes,\n  Cloud,\n  Code2,\n  Database,\n  Figma,\n  GitBranch,\n  Github,\n  Globe,\n  Mail,\n  MessageCircle,\n  Slack,\n  Terminal,\n} from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"アイコンマーキー\",\n  category: \"マーキー\",\n  description: \"連携サービスのアイコンが一列に流れる。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"marquee\", \"animation\", \"infinite\", \"icons\"],\n};\n\nconst ICONS = [\n  { Icon: Github, name: \"GitHub\" },\n  { Icon: Slack, name: \"Slack\" },\n  { Icon: Figma, name: \"Figma\" },\n  { Icon: Database, name: \"Postgres\" },\n  { Icon: Cloud, name: \"Cloud\" },\n  { Icon: GitBranch, name: \"Git\" },\n  { Icon: Terminal, name: \"CLI\" },\n  { Icon: Code2, name: \"SDK\" },\n  { Icon: Mail, name: \"Mail\" },\n  { Icon: Globe, name: \"Web\" },\n  { Icon: MessageCircle, name: \"Chat\" },\n  { Icon: Boxes, name: \"Containers\" },\n];\n\nexport default function IconMarquee() {\n  return (\n    <div className=\"w-full py-8\">\n      <style>{`\n        @keyframes iconMarqueeScroll {\n          from { transform: translateX(0); }\n          to { transform: translateX(-50%); }\n        }\n        .icon-track { animation: iconMarqueeScroll 26s linear infinite; }\n        .icon-mask:hover .icon-track { animation-play-state: paused; }\n      `}</style>\n      <div\n        className=\"icon-mask group relative overflow-hidden\"\n        style={{\n          maskImage:\n            \"linear-gradient(to right, transparent, black 10%, black 90%, transparent)\",\n          WebkitMaskImage:\n            \"linear-gradient(to right, transparent, black 10%, black 90%, transparent)\",\n        }}\n      >\n        <div className=\"icon-track flex w-max items-center gap-4 pr-4\">\n          {[...ICONS, ...ICONS].map(({ Icon, name }, i) => (\n            <div\n              key={`${name}-${i}`}\n              className=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\"\n              title={name}\n            >\n              <Icon className=\"size-6\" />\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"w-full py-8\">\n      <style>\n        @keyframes iconMarqueeScroll {\n              from { transform: translateX(0); }\n              to { transform: translateX(-50%); }\n            }\n            .icon-track { animation: iconMarqueeScroll 26s linear infinite; }\n            .icon-mask:hover .icon-track { animation-play-state: paused; }\n      </style>\n      <div class=\"icon-mask group relative overflow-hidden\" style=\"mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent);-webkit-mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent)\">\n        <div class=\"icon-track flex w-max items-center gap-4 pr-4\">\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"GitHub\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-github size-6\">\n              <path d=\"M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4\">\n              </path>\n              <path d=\"M9 18c-4.51 2-5-2-7-2\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Slack\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-slack size-6\">\n              <rect width=\"3\" height=\"8\" x=\"13\" y=\"2\" rx=\"1.5\">\n              </rect>\n              <path d=\"M19 8.5V10h1.5A1.5 1.5 0 1 0 19 8.5\">\n              </path>\n              <rect width=\"3\" height=\"8\" x=\"8\" y=\"14\" rx=\"1.5\">\n              </rect>\n              <path d=\"M5 15.5V14H3.5A1.5 1.5 0 1 0 5 15.5\">\n              </path>\n              <rect width=\"8\" height=\"3\" x=\"14\" y=\"13\" rx=\"1.5\">\n              </rect>\n              <path d=\"M15.5 19H14v1.5a1.5 1.5 0 1 0 1.5-1.5\">\n              </path>\n              <rect width=\"8\" height=\"3\" x=\"2\" y=\"8\" rx=\"1.5\">\n              </rect>\n              <path d=\"M8.5 5H10V3.5A1.5 1.5 0 1 0 8.5 5\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Figma\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-figma size-6\">\n              <path d=\"M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z\">\n              </path>\n              <path d=\"M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z\">\n              </path>\n              <path d=\"M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z\">\n              </path>\n              <path d=\"M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z\">\n              </path>\n              <path d=\"M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Postgres\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-database size-6\">\n              <ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\">\n              </ellipse>\n              <path d=\"M3 5V19A9 3 0 0 0 21 19V5\">\n              </path>\n              <path d=\"M3 12A9 3 0 0 0 21 12\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Cloud\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-cloud size-6\">\n              <path d=\"M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Git\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-git-branch size-6\">\n              <line x1=\"6\" x2=\"6\" y1=\"3\" y2=\"15\">\n              </line>\n              <circle cx=\"18\" cy=\"6\" r=\"3\">\n              </circle>\n              <circle cx=\"6\" cy=\"18\" r=\"3\">\n              </circle>\n              <path d=\"M18 9a9 9 0 0 1-9 9\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"CLI\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-terminal size-6\">\n              <polyline points=\"4 17 10 11 4 5\">\n              </polyline>\n              <line x1=\"12\" x2=\"20\" y1=\"19\" y2=\"19\">\n              </line>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"SDK\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-code-xml size-6\">\n              <path d=\"m18 16 4-4-4-4\">\n              </path>\n              <path d=\"m6 8-4 4 4 4\">\n              </path>\n              <path d=\"m14.5 4-5 16\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Mail\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-mail size-6\">\n              <rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\">\n              </rect>\n              <path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Web\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-globe size-6\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\">\n              </circle>\n              <path d=\"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20\">\n              </path>\n              <path d=\"M2 12h20\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Chat\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-message-circle size-6\">\n              <path d=\"M7.9 20A9 9 0 1 0 4 16.1L2 22Z\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Containers\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-boxes size-6\">\n              <path d=\"M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z\">\n              </path>\n              <path d=\"m7 16.5-4.74-2.85\">\n              </path>\n              <path d=\"m7 16.5 5-3\">\n              </path>\n              <path d=\"M7 16.5v5.17\">\n              </path>\n              <path d=\"M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z\">\n              </path>\n              <path d=\"m17 16.5-5-3\">\n              </path>\n              <path d=\"m17 16.5 4.74-2.85\">\n              </path>\n              <path d=\"M17 16.5v5.17\">\n              </path>\n              <path d=\"M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z\">\n              </path>\n              <path d=\"M12 8 7.26 5.15\">\n              </path>\n              <path d=\"m12 8 4.74-2.85\">\n              </path>\n              <path d=\"M12 13.5V8\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"GitHub\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-github size-6\">\n              <path d=\"M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4\">\n              </path>\n              <path d=\"M9 18c-4.51 2-5-2-7-2\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Slack\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-slack size-6\">\n              <rect width=\"3\" height=\"8\" x=\"13\" y=\"2\" rx=\"1.5\">\n              </rect>\n              <path d=\"M19 8.5V10h1.5A1.5 1.5 0 1 0 19 8.5\">\n              </path>\n              <rect width=\"3\" height=\"8\" x=\"8\" y=\"14\" rx=\"1.5\">\n              </rect>\n              <path d=\"M5 15.5V14H3.5A1.5 1.5 0 1 0 5 15.5\">\n              </path>\n              <rect width=\"8\" height=\"3\" x=\"14\" y=\"13\" rx=\"1.5\">\n              </rect>\n              <path d=\"M15.5 19H14v1.5a1.5 1.5 0 1 0 1.5-1.5\">\n              </path>\n              <rect width=\"8\" height=\"3\" x=\"2\" y=\"8\" rx=\"1.5\">\n              </rect>\n              <path d=\"M8.5 5H10V3.5A1.5 1.5 0 1 0 8.5 5\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Figma\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-figma size-6\">\n              <path d=\"M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z\">\n              </path>\n              <path d=\"M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z\">\n              </path>\n              <path d=\"M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z\">\n              </path>\n              <path d=\"M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z\">\n              </path>\n              <path d=\"M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Postgres\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-database size-6\">\n              <ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\">\n              </ellipse>\n              <path d=\"M3 5V19A9 3 0 0 0 21 19V5\">\n              </path>\n              <path d=\"M3 12A9 3 0 0 0 21 12\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Cloud\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-cloud size-6\">\n              <path d=\"M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Git\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-git-branch size-6\">\n              <line x1=\"6\" x2=\"6\" y1=\"3\" y2=\"15\">\n              </line>\n              <circle cx=\"18\" cy=\"6\" r=\"3\">\n              </circle>\n              <circle cx=\"6\" cy=\"18\" r=\"3\">\n              </circle>\n              <path d=\"M18 9a9 9 0 0 1-9 9\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"CLI\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-terminal size-6\">\n              <polyline points=\"4 17 10 11 4 5\">\n              </polyline>\n              <line x1=\"12\" x2=\"20\" y1=\"19\" y2=\"19\">\n              </line>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"SDK\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-code-xml size-6\">\n              <path d=\"m18 16 4-4-4-4\">\n              </path>\n              <path d=\"m6 8-4 4 4 4\">\n              </path>\n              <path d=\"m14.5 4-5 16\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Mail\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-mail size-6\">\n              <rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\">\n              </rect>\n              <path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Web\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-globe size-6\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\">\n              </circle>\n              <path d=\"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20\">\n              </path>\n              <path d=\"M2 12h20\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Chat\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-message-circle size-6\">\n              <path d=\"M7.9 20A9 9 0 1 0 4 16.1L2 22Z\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Containers\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-boxes size-6\">\n              <path d=\"M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z\">\n              </path>\n              <path d=\"m7 16.5-4.74-2.85\">\n              </path>\n              <path d=\"m7 16.5 5-3\">\n              </path>\n              <path d=\"M7 16.5v5.17\">\n              </path>\n              <path d=\"M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z\">\n              </path>\n              <path d=\"m17 16.5-5-3\">\n              </path>\n              <path d=\"m17 16.5 4.74-2.85\">\n              </path>\n              <path d=\"M17 16.5v5.17\">\n              </path>\n              <path d=\"M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z\">\n              </path>\n              <path d=\"M12 8 7.26 5.15\">\n              </path>\n              <path d=\"m12 8 4.74-2.85\">\n              </path>\n              <path d=\"M12 13.5V8\">\n              </path>\n            </svg>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"w-full py-8\">\n      <style>\n        @keyframes iconMarqueeScroll {\n              from { transform: translateX(0); }\n              to { transform: translateX(-50%); }\n            }\n            .icon-track { animation: iconMarqueeScroll 26s linear infinite; }\n            .icon-mask:hover .icon-track { animation-play-state: paused; }\n      </style>\n      <div class=\"icon-mask group relative overflow-hidden\" style=\"mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent);-webkit-mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent)\">\n        <div class=\"icon-track flex w-max items-center gap-4 pr-4\">\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"GitHub\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-github size-6\">\n              <path d=\"M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4\">\n              </path>\n              <path d=\"M9 18c-4.51 2-5-2-7-2\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Slack\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-slack size-6\">\n              <rect width=\"3\" height=\"8\" x=\"13\" y=\"2\" rx=\"1.5\">\n              </rect>\n              <path d=\"M19 8.5V10h1.5A1.5 1.5 0 1 0 19 8.5\">\n              </path>\n              <rect width=\"3\" height=\"8\" x=\"8\" y=\"14\" rx=\"1.5\">\n              </rect>\n              <path d=\"M5 15.5V14H3.5A1.5 1.5 0 1 0 5 15.5\">\n              </path>\n              <rect width=\"8\" height=\"3\" x=\"14\" y=\"13\" rx=\"1.5\">\n              </rect>\n              <path d=\"M15.5 19H14v1.5a1.5 1.5 0 1 0 1.5-1.5\">\n              </path>\n              <rect width=\"8\" height=\"3\" x=\"2\" y=\"8\" rx=\"1.5\">\n              </rect>\n              <path d=\"M8.5 5H10V3.5A1.5 1.5 0 1 0 8.5 5\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Figma\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-figma size-6\">\n              <path d=\"M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z\">\n              </path>\n              <path d=\"M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z\">\n              </path>\n              <path d=\"M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z\">\n              </path>\n              <path d=\"M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z\">\n              </path>\n              <path d=\"M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Postgres\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-database size-6\">\n              <ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\">\n              </ellipse>\n              <path d=\"M3 5V19A9 3 0 0 0 21 19V5\">\n              </path>\n              <path d=\"M3 12A9 3 0 0 0 21 12\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Cloud\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-cloud size-6\">\n              <path d=\"M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Git\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-git-branch size-6\">\n              <line x1=\"6\" x2=\"6\" y1=\"3\" y2=\"15\">\n              </line>\n              <circle cx=\"18\" cy=\"6\" r=\"3\">\n              </circle>\n              <circle cx=\"6\" cy=\"18\" r=\"3\">\n              </circle>\n              <path d=\"M18 9a9 9 0 0 1-9 9\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"CLI\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-terminal size-6\">\n              <polyline points=\"4 17 10 11 4 5\">\n              </polyline>\n              <line x1=\"12\" x2=\"20\" y1=\"19\" y2=\"19\">\n              </line>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"SDK\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-code-xml size-6\">\n              <path d=\"m18 16 4-4-4-4\">\n              </path>\n              <path d=\"m6 8-4 4 4 4\">\n              </path>\n              <path d=\"m14.5 4-5 16\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Mail\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-mail size-6\">\n              <rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\">\n              </rect>\n              <path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Web\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-globe size-6\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\">\n              </circle>\n              <path d=\"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20\">\n              </path>\n              <path d=\"M2 12h20\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Chat\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-message-circle size-6\">\n              <path d=\"M7.9 20A9 9 0 1 0 4 16.1L2 22Z\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Containers\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-boxes size-6\">\n              <path d=\"M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z\">\n              </path>\n              <path d=\"m7 16.5-4.74-2.85\">\n              </path>\n              <path d=\"m7 16.5 5-3\">\n              </path>\n              <path d=\"M7 16.5v5.17\">\n              </path>\n              <path d=\"M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z\">\n              </path>\n              <path d=\"m17 16.5-5-3\">\n              </path>\n              <path d=\"m17 16.5 4.74-2.85\">\n              </path>\n              <path d=\"M17 16.5v5.17\">\n              </path>\n              <path d=\"M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z\">\n              </path>\n              <path d=\"M12 8 7.26 5.15\">\n              </path>\n              <path d=\"m12 8 4.74-2.85\">\n              </path>\n              <path d=\"M12 13.5V8\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"GitHub\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-github size-6\">\n              <path d=\"M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4\">\n              </path>\n              <path d=\"M9 18c-4.51 2-5-2-7-2\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Slack\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-slack size-6\">\n              <rect width=\"3\" height=\"8\" x=\"13\" y=\"2\" rx=\"1.5\">\n              </rect>\n              <path d=\"M19 8.5V10h1.5A1.5 1.5 0 1 0 19 8.5\">\n              </path>\n              <rect width=\"3\" height=\"8\" x=\"8\" y=\"14\" rx=\"1.5\">\n              </rect>\n              <path d=\"M5 15.5V14H3.5A1.5 1.5 0 1 0 5 15.5\">\n              </path>\n              <rect width=\"8\" height=\"3\" x=\"14\" y=\"13\" rx=\"1.5\">\n              </rect>\n              <path d=\"M15.5 19H14v1.5a1.5 1.5 0 1 0 1.5-1.5\">\n              </path>\n              <rect width=\"8\" height=\"3\" x=\"2\" y=\"8\" rx=\"1.5\">\n              </rect>\n              <path d=\"M8.5 5H10V3.5A1.5 1.5 0 1 0 8.5 5\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Figma\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-figma size-6\">\n              <path d=\"M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z\">\n              </path>\n              <path d=\"M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z\">\n              </path>\n              <path d=\"M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z\">\n              </path>\n              <path d=\"M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z\">\n              </path>\n              <path d=\"M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Postgres\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-database size-6\">\n              <ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\">\n              </ellipse>\n              <path d=\"M3 5V19A9 3 0 0 0 21 19V5\">\n              </path>\n              <path d=\"M3 12A9 3 0 0 0 21 12\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Cloud\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-cloud size-6\">\n              <path d=\"M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Git\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-git-branch size-6\">\n              <line x1=\"6\" x2=\"6\" y1=\"3\" y2=\"15\">\n              </line>\n              <circle cx=\"18\" cy=\"6\" r=\"3\">\n              </circle>\n              <circle cx=\"6\" cy=\"18\" r=\"3\">\n              </circle>\n              <path d=\"M18 9a9 9 0 0 1-9 9\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"CLI\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-terminal size-6\">\n              <polyline points=\"4 17 10 11 4 5\">\n              </polyline>\n              <line x1=\"12\" x2=\"20\" y1=\"19\" y2=\"19\">\n              </line>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"SDK\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-code-xml size-6\">\n              <path d=\"m18 16 4-4-4-4\">\n              </path>\n              <path d=\"m6 8-4 4 4 4\">\n              </path>\n              <path d=\"m14.5 4-5 16\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Mail\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-mail size-6\">\n              <rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\">\n              </rect>\n              <path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Web\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-globe size-6\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\">\n              </circle>\n              <path d=\"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20\">\n              </path>\n              <path d=\"M2 12h20\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Chat\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-message-circle size-6\">\n              <path d=\"M7.9 20A9 9 0 1 0 4 16.1L2 22Z\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"flex size-16 shrink-0 flex-col items-center justify-center gap-1 rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-primary\" title=\"Containers\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-boxes size-6\">\n              <path d=\"M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z\">\n              </path>\n              <path d=\"m7 16.5-4.74-2.85\">\n              </path>\n              <path d=\"m7 16.5 5-3\">\n              </path>\n              <path d=\"M7 16.5v5.17\">\n              </path>\n              <path d=\"M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z\">\n              </path>\n              <path d=\"m17 16.5-5-3\">\n              </path>\n              <path d=\"m17 16.5 4.74-2.85\">\n              </path>\n              <path d=\"M17 16.5v5.17\">\n              </path>\n              <path d=\"M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z\">\n              </path>\n              <path d=\"M12 8 7.26 5.15\">\n              </path>\n              <path d=\"m12 8 4.74-2.85\">\n              </path>\n              <path d=\"M12 13.5V8\">\n              </path>\n            </svg>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "mat3d-gloss-crystal-gem-facet",
@@ -998,7 +998,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"クリスタル ジェムファセット\",\n  category: \"3Dアニメ\",\n  description:\n    \"CSSのperspectiveとpreserve-3dで組んだ多面カット宝石が回転。星形グリントと縁の虹色分散できらめく。\",\n  align: \"center\",\n  isNew: true,\n  level: \"advanced\",\n  tags: [\"3d\", \"gloss\", \"materials\", \"animation\"],\n  principle:\n    \"多面体のきらめきと虹の分散は希少な宝石の合図。眩しさのピーク＝価値のピークと脳が結びつける。\",\n};\n\n/**\n * 真の立体ジェム（ブリリアントカット）。\n * 縦軸まわりに N 個のファセットを放射状に並べる（rotateY(i*360/N) translateZ(R)）ので、\n * どの回転角でもシルエットが宝石のまま＝細い板に潰れない。\n *  - テーブル（頂上の平らな多角形）\n *  - クラウン（上部リング：外へ開く台形ファセット）\n *  - ガードル（中央のくびれ）\n *  - パビリオン（下部リング：底のキューレットへ収束する三角ファセット）\n */\n\nconst N = 10; // ファセット数\nconst R = 56; // 軸からファセットまでの半径(px)\nconst CROWN_H = 40; // クラウン（上半身）の高さ\nconst PAV_H = 78; // パビリオン（下半身）の高さ\nconst FACET_W = (2 * Math.PI * R) / N + 6; // リングを隙間なく埋める弦幅 + のりしろ\n\n// ファセットごとに明るさ・色相を少し変えて、回転で「光を拾う面」が変わって見えるようにする\nconst FACETS = Array.from({ length: N }, (_, i) => {\n  const angle = (i * 360) / N;\n  // 0..1 の波で明暗を作る（隣り合う面が交互に明るい）\n  const wave = (Math.sin((i / N) * Math.PI * 2) + 1) / 2;\n  const crownBright = 0.55 + wave * 0.45;\n  const pavBright = 0.4 + (1 - wave) * 0.4;\n  return { i, angle, crownBright, pavBright };\n});\n\nfunction crownGradient(b: number): string {\n  // 上が明るく下（ガードル側）がやや濃い、氷青〜クリア〜淡い菫\n  const top = `rgba(${Math.round(196 * b + 40)}, ${Math.round(\n    222 * b + 30\n  )}, 255, ${0.42 + b * 0.3})`;\n  const mid = `rgba(${Math.round(150 * b + 30)}, ${Math.round(\n    180 * b + 24\n  )}, ${Math.round(236 * b + 19)}, ${0.34 + b * 0.26})`;\n  const bot = `rgba(${Math.round(120 * b + 24)}, ${Math.round(\n    138 * b + 20\n  )}, ${Math.round(214 * b + 30)}, ${0.3 + b * 0.22})`;\n  return `linear-gradient(180deg, ${top} 0%, ${mid} 52%, ${bot} 100%)`;\n}\n\nfunction pavilionGradient(b: number): string {\n  // ガードル側が明るく、キューレット（先端）へ向け深い藍に沈む\n  const top = `rgba(${Math.round(130 * b + 30)}, ${Math.round(\n    160 * b + 26\n  )}, ${Math.round(236 * b + 19)}, ${0.4 + b * 0.28})`;\n  const tip = `rgba(${Math.round(60 * b + 14)}, ${Math.round(\n    84 * b + 16\n  )}, ${Math.round(168 * b + 28)}, ${0.5 + b * 0.28})`;\n  return `linear-gradient(180deg, ${top} 0%, ${tip} 100%)`;\n}\n\n// テーブル（多角形）の clip-path：N 角形\nconst TABLE_CLIP =\n  \"polygon(\" +\n  Array.from({ length: N }, (_, i) => {\n    const a = (i / N) * Math.PI * 2 - Math.PI / 2;\n    const x = 50 + Math.cos(a) * 50;\n    const y = 50 + Math.sin(a) * 50;\n    return `${x.toFixed(1)}% ${y.toFixed(1)}%`;\n  }).join(\", \") +\n  \")\";\n\n// 漂う虹グリント（虹色分散）。面の上できらめく小さな閃光。\nconst GLINTS = [\n  { x: 30, y: 30, s: 16, dur: 4.2, delay: 0, hue: 0 },\n  { x: 66, y: 42, s: 12, dur: 5.1, delay: 1.4, hue: 140 },\n  { x: 46, y: 60, s: 14, dur: 4.6, delay: 2.6, hue: 260 },\n  { x: 58, y: 24, s: 10, dur: 5.6, delay: 3.4, hue: 60 },\n];\n\nexport default function CrystalGemFacet() {\n  const en =\n    typeof document !== \"undefined\" && document.documentElement.lang === \"en\";\n\n  return (\n    <div\n      className=\"flex w-full flex-col items-center gap-8 rounded-3xl py-16\"\n      style={{\n        background:\n          \"radial-gradient(120% 110% at 50% 8%, #11142a 0%, #080a18 60%, #03040a 100%)\",\n      }}\n    >\n      <style>{`\n        @keyframes cg-spin   { to { transform: rotateY(360deg); } }\n        @keyframes cg-bob    { 0%,100% { transform: translateY(-7px); } 50% { transform: translateY(7px); } }\n        @keyframes cg-bloom  { 0%,100% { opacity: 0.35; transform: translate(-50%,-50%) scale(0.92) rotate(0deg); }\n                               50%     { opacity: 0.7;  transform: translate(-50%,-50%) scale(1.06) rotate(180deg); } }\n        @keyframes cg-glint  {\n          0%, 70%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(0.4) rotate(0deg); }\n          82%, 90%      { opacity: 1; transform: translate(-50%,-50%) scale(1)   rotate(45deg); }\n        }\n        @keyframes cg-drift  { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }\n        @media (prefers-reduced-motion: reduce) {\n          .cg-gem    { animation: none !important; transform: rotateX(14deg) rotateY(26deg) !important; }\n          .cg-bob    { animation: none !important; }\n          .cg-bloom  { animation: none !important; opacity: 0.55 !important; transform: translate(-50%,-50%) scale(1) !important; }\n          .cg-glint  { animation: none !important; opacity: 0.85 !important; transform: translate(-50%,-50%) scale(1) rotate(45deg) !important; }\n          .cg-band   { animation: none !important; }\n        }\n      `}</style>\n\n      {/* シーン：perspective を与えて立体回転させる */}\n      <div\n        className=\"cg-bob relative\"\n        style={{\n          width: 220,\n          height: 260,\n          perspective: \"720px\",\n          animation: \"cg-bob 4.4s ease-in-out infinite\",\n        }}\n      >\n        {/* 背後の虹ブルーム（細い帯にならない円形） */}\n        <div\n          className=\"cg-bloom pointer-events-none absolute left-1/2 top-1/2 h-44 w-44 rounded-full\"\n          style={{\n            background:\n              \"conic-gradient(from 0deg, #ff5d8f, #ffd45d, #5dff9e, #5dd8ff, #9a5dff, #ff5dd0, #ff5d8f)\",\n            filter: \"blur(30px)\",\n            animation: \"cg-bloom 7s ease-in-out infinite\",\n          }}\n        />\n\n        {/* 回転する宝石本体 */}\n        <div\n          className=\"cg-gem absolute left-1/2 top-1/2\"\n          style={{\n            width: 0,\n            height: 0,\n            transformStyle: \"preserve-3d\",\n            transform: \"rotateX(14deg)\",\n            animation: \"cg-spin 9s linear infinite\",\n            willChange: \"transform\",\n          }}\n        >\n          {/* 内側のコア：奥のファセットが透けたとき、空洞ではなく結晶の芯が見えるように */}\n          <div\n            className=\"absolute rounded-full\"\n            style={{\n              width: 96,\n              height: 96,\n              left: -48,\n              top: -54,\n              background:\n                \"radial-gradient(circle at 42% 36%, rgba(190,220,255,0.5), rgba(90,120,210,0.28) 55%, rgba(30,40,90,0.12) 100%)\",\n              transform: \"translateZ(0)\",\n              filter: \"blur(2px)\",\n            }}\n          />\n\n          {/* テーブル（頂上の平らな多角形） */}\n          <div\n            className=\"absolute\"\n            style={{\n              width: R * 1.7,\n              height: R * 1.7,\n              left: -(R * 1.7) / 2,\n              top: -(R * 1.7) / 2,\n              transform: `translateY(-${CROWN_H + 4}px) rotateX(90deg)`,\n              clipPath: TABLE_CLIP,\n              background:\n                \"radial-gradient(circle at 40% 34%, rgba(232,244,255,0.92) 0%, rgba(176,206,255,0.7) 46%, rgba(120,150,230,0.6) 100%)\",\n              boxShadow: \"inset 0 0 18px rgba(255,255,255,0.55)\",\n            }}\n          >\n            {/* テーブル上の漂う虹（ドリフトする線形虹で、潰れない面光沢） */}\n            <div\n              className=\"cg-band absolute inset-0\"\n              style={{\n                clipPath: TABLE_CLIP,\n                background:\n                  \"linear-gradient(115deg, transparent 30%, rgba(255,93,143,0.5), rgba(255,212,93,0.5), rgba(93,255,158,0.5), rgba(93,216,255,0.5), rgba(154,93,255,0.5), transparent 70%)\",\n                backgroundSize: \"200% 100%\",\n                mixBlendMode: \"screen\",\n                animation: \"cg-drift 6s linear infinite\",\n                opacity: 0.7,\n              }}\n            />\n          </div>\n\n          {/* クラウン：上部リングのファセット（外へ開く台形） */}\n          {FACETS.map(({ i, angle, crownBright }) => (\n            <div\n              key={`crown-${i}`}\n              className=\"absolute origin-top\"\n              style={{\n                width: FACET_W,\n                height: CROWN_H,\n                left: -FACET_W / 2,\n                top: -CROWN_H,\n                transform: `rotateY(${angle}deg) translateZ(${R * 0.62}px) rotateX(34deg)`,\n                background: crownGradient(crownBright),\n                // 内側にテーパー：上(テーブル側)を狭く、下(ガードル側)を広く見せる台形\n                clipPath: \"polygon(26% 0%, 74% 0%, 100% 100%, 0% 100%)\",\n                borderTop: \"1px solid rgba(255,255,255,0.7)\",\n                boxShadow: `inset 0 6px 10px -6px rgba(255,255,255,${\n                  0.5 * crownBright\n                })`,\n                backfaceVisibility: \"visible\",\n              }}\n            />\n          ))}\n\n          {/* クラウンの間を埋める三角ファセット（半オフセットの放射で多面感を強める） */}\n          {FACETS.map(({ i, angle, crownBright }) => (\n            <div\n              key={`crown-x-${i}`}\n              className=\"absolute origin-top\"\n              style={{\n                width: FACET_W,\n                height: CROWN_H * 0.92,\n                left: -FACET_W / 2,\n                top: -CROWN_H,\n                transform: `rotateY(${angle + 360 / N / 2}deg) translateZ(${\n                  R * 0.6\n                }px) rotateX(40deg)`,\n                background: crownGradient(0.4 + (1 - crownBright) * 0.5),\n                clipPath: \"polygon(50% 0%, 100% 100%, 0% 100%)\",\n                opacity: 0.85,\n                backfaceVisibility: \"visible\",\n              }}\n            />\n          ))}\n\n          {/* パビリオン：下部リングのファセット（底のキューレットへ収束する三角） */}\n          {FACETS.map(({ i, angle, pavBright }) => (\n            <div\n              key={`pav-${i}`}\n              className=\"absolute origin-top\"\n              style={{\n                width: FACET_W,\n                height: PAV_H,\n                left: -FACET_W / 2,\n                top: 0,\n                transform: `rotateY(${angle}deg) translateZ(${R * 0.62}px) rotateX(-52deg)`,\n                background: pavilionGradient(pavBright),\n                // 上(ガードル)が広く、下が尖るキューレット三角\n                clipPath: \"polygon(0% 0%, 100% 0%, 50% 100%)\",\n                boxShadow: `inset 0 -8px 14px -8px rgba(120,150,255,${\n                  0.4 * pavBright\n                })`,\n                borderLeft: \"1px solid rgba(180,205,255,0.35)\",\n                borderRight: \"1px solid rgba(180,205,255,0.35)\",\n                backfaceVisibility: \"visible\",\n              }}\n            />\n          ))}\n\n          {/* ガードル：中央のくびれを示す光沢リング */}\n          {FACETS.map(({ i, angle, crownBright }) => (\n            <div\n              key={`girdle-${i}`}\n              className=\"absolute\"\n              style={{\n                width: FACET_W,\n                height: 7,\n                left: -FACET_W / 2,\n                top: -3,\n                transform: `rotateY(${angle}deg) translateZ(${R * 0.66}px)`,\n                background: `linear-gradient(180deg, rgba(255,255,255,${\n                  0.6 * crownBright\n                }), rgba(150,180,255,0.2))`,\n                backfaceVisibility: \"visible\",\n              }}\n            />\n          ))}\n\n          {/* 漂う虹グリント（面の上できらめく小さな閃光・虹色分散） */}\n          {GLINTS.map((g, i) => (\n            <span\n              key={`glint-${i}`}\n              className=\"cg-glint absolute\"\n              style={{\n                left: `${g.x - 50}px`,\n                top: `${g.y - 60}px`,\n                width: g.s,\n                height: g.s,\n                transform: \"translate(-50%,-50%)\",\n                background: `radial-gradient(circle, hsla(${g.hue},100%,80%,0.95) 0%, rgba(255,255,255,0.6) 40%, transparent 68%)`,\n                animation: `cg-glint ${g.dur}s ease-in-out ${g.delay}s infinite`,\n              }}\n            >\n              <span\n                className=\"absolute left-1/2 top-1/2\"\n                style={{\n                  width: g.s * 2.6,\n                  height: 2,\n                  transform: \"translate(-50%,-50%)\",\n                  background:\n                    \"linear-gradient(90deg, transparent, #fff, transparent)\",\n                }}\n              />\n              <span\n                className=\"absolute left-1/2 top-1/2\"\n                style={{\n                  width: 2,\n                  height: g.s * 2.6,\n                  transform: \"translate(-50%,-50%)\",\n                  background:\n                    \"linear-gradient(180deg, transparent, #fff, transparent)\",\n                }}\n              />\n            </span>\n          ))}\n        </div>\n      </div>\n\n      <p className=\"text-xs font-medium uppercase tracking-[0.32em] text-indigo-200/65\">\n        {en ? \"Brilliant cut · 1.2 ct\" : \"ブリリアントカット · 1.2 カラット\"}\n      </p>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"flex w-full flex-col items-center gap-8 rounded-3xl py-16\" style=\"background:radial-gradient(120% 110% at 50% 8%, #11142a 0%, #080a18 60%, #03040a 100%)\">\n      <style>\n        @keyframes cg-spin   { to { transform: rotateY(360deg); } }\n            @keyframes cg-bob    { 0%,100% { transform: translateY(-7px); } 50% { transform: translateY(7px); } }\n            @keyframes cg-bloom  { 0%,100% { opacity: 0.35; transform: translate(-50%,-50%) scale(0.92) rotate(0deg); }\n                                   50%     { opacity: 0.7;  transform: translate(-50%,-50%) scale(1.06) rotate(180deg); } }\n            @keyframes cg-glint  {\n              0%, 70%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(0.4) rotate(0deg); }\n              82%, 90%      { opacity: 1; transform: translate(-50%,-50%) scale(1)   rotate(45deg); }\n            }\n            @keyframes cg-drift  { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }\n            @media (prefers-reduced-motion: reduce) {\n              .cg-gem    { animation: none !important; transform: rotateX(14deg) rotateY(26deg) !important; }\n              .cg-bob    { animation: none !important; }\n              .cg-bloom  { animation: none !important; opacity: 0.55 !important; transform: translate(-50%,-50%) scale(1) !important; }\n              .cg-glint  { animation: none !important; opacity: 0.85 !important; transform: translate(-50%,-50%) scale(1) rotate(45deg) !important; }\n              .cg-band   { animation: none !important; }\n            }\n      </style>\n      <div class=\"cg-bob relative\" style=\"width:220px;height:260px;perspective:720px;animation:cg-bob 4.4s ease-in-out infinite\">\n        <div class=\"cg-bloom pointer-events-none absolute left-1/2 top-1/2 h-44 w-44 rounded-full\" style=\"background:conic-gradient(from 0deg, #ff5d8f, #ffd45d, #5dff9e, #5dd8ff, #9a5dff, #ff5dd0, #ff5d8f);filter:blur(30px);animation:cg-bloom 7s ease-in-out infinite\">\n        </div>\n        <div class=\"cg-gem absolute left-1/2 top-1/2\" style=\"width:0;height:0;transform-style:preserve-3d;transform:rotateX(14deg);animation:cg-spin 9s linear infinite;will-change:transform\">\n          <div class=\"absolute rounded-full\" style=\"width:96px;height:96px;left:-48px;top:-54px;background:radial-gradient(circle at 42% 36%, rgba(190,220,255,0.5), rgba(90,120,210,0.28) 55%, rgba(30,40,90,0.12) 100%);transform:translateZ(0);filter:blur(2px)\">\n          </div>\n          <div class=\"absolute\" style=\"width:95.2px;height:95.2px;left:-47.6px;top:-47.6px;transform:translateY(-44px) rotateX(90deg);clip-path:polygon(50.0% 0.0%, 79.4% 9.5%, 97.6% 34.5%, 97.6% 65.5%, 79.4% 90.5%, 50.0% 100.0%, 20.6% 90.5%, 2.4% 65.5%, 2.4% 34.5%, 20.6% 9.5%);background:radial-gradient(circle at 40% 34%, rgba(232,244,255,0.92) 0%, rgba(176,206,255,0.7) 46%, rgba(120,150,230,0.6) 100%);box-shadow:inset 0 0 18px rgba(255,255,255,0.55)\">\n            <div class=\"cg-band absolute inset-0\" style=\"clip-path:polygon(50.0% 0.0%, 79.4% 9.5%, 97.6% 34.5%, 97.6% 65.5%, 79.4% 90.5%, 50.0% 100.0%, 20.6% 90.5%, 2.4% 65.5%, 2.4% 34.5%, 20.6% 9.5%);background:linear-gradient(115deg, transparent 30%, rgba(255,93,143,0.5), rgba(255,212,93,0.5), rgba(93,255,158,0.5), rgba(93,216,255,0.5), rgba(154,93,255,0.5), transparent 70%);background-size:200% 100%;mix-blend-mode:screen;animation:cg-drift 6s linear infinite;opacity:0.7\">\n            </div>\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:40px;left:-20.59291886010284px;top:-40px;transform:rotateY(0deg) translateZ(34.72px) rotateX(34deg);background:linear-gradient(180deg, rgba(192, 202, 255, 0.6525) 0%, rgba(146, 164, 202, 0.5415000000000001) 52%, rgba(117, 127, 196, 0.47050000000000003) 100%);clip-path:polygon(26% 0%, 74% 0%, 100% 100%, 0% 100%);border-top:1px solid rgba(255,255,255,0.7);box-shadow:inset 0 6px 10px -6px rgba(255,255,255,0.3875);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:40px;left:-20.59291886010284px;top:-40px;transform:rotateY(36deg) translateZ(34.72px) rotateX(34deg);background:linear-gradient(180deg, rgba(218, 231, 255, 0.692175504529742) 0%, rgba(166, 187, 233, 0.5758854372591098) 52%, rgba(133, 145, 224, 0.4995953699884774) 100%);clip-path:polygon(26% 0%, 74% 0%, 100% 100%, 0% 100%);border-top:1px solid rgba(255,255,255,0.7);box-shadow:inset 0 6px 10px -6px rgba(255,255,255,0.45362584088290325);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:40px;left:-20.59291886010284px;top:-40px;transform:rotateY(72deg) translateZ(34.72px) rotateX(34deg);background:linear-gradient(180deg, rgba(234, 250, 255, 0.7166963148499228) 0%, rgba(178, 202, 252, 0.5971368062032665) 52%, rgba(143, 156, 242, 0.5175772975566101) 100%);clip-path:polygon(26% 0%, 74% 0%, 100% 100%, 0% 100%);border-top:1px solid rgba(255,255,255,0.7);box-shadow:inset 0 6px 10px -6px rgba(255,255,255,0.4944938580832048);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:40px;left:-20.59291886010284px;top:-40px;transform:rotateY(108deg) translateZ(34.72px) rotateX(34deg);background:linear-gradient(180deg, rgba(234, 250, 255, 0.7166963148499228) 0%, rgba(178, 202, 252, 0.5971368062032665) 52%, rgba(143, 156, 242, 0.5175772975566101) 100%);clip-path:polygon(26% 0%, 74% 0%, 100% 100%, 0% 100%);border-top:1px solid rgba(255,255,255,0.7);box-shadow:inset 0 6px 10px -6px rgba(255,255,255,0.4944938580832048);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:40px;left:-20.59291886010284px;top:-40px;transform:rotateY(144deg) translateZ(34.72px) rotateX(34deg);background:linear-gradient(180deg, rgba(218, 231, 255, 0.692175504529742) 0%, rgba(166, 187, 233, 0.5758854372591098) 52%, rgba(133, 145, 224, 0.4995953699884774) 100%);clip-path:polygon(26% 0%, 74% 0%, 100% 100%, 0% 100%);border-top:1px solid rgba(255,255,255,0.7);box-shadow:inset 0 6px 10px -6px rgba(255,255,255,0.45362584088290325);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:40px;left:-20.59291886010284px;top:-40px;transform:rotateY(180deg) translateZ(34.72px) rotateX(34deg);background:linear-gradient(180deg, rgba(192, 202, 255, 0.6525000000000001) 0%, rgba(146, 164, 202, 0.5415000000000001) 52%, rgba(117, 127, 196, 0.47050000000000003) 100%);clip-path:polygon(26% 0%, 74% 0%, 100% 100%, 0% 100%);border-top:1px solid rgba(255,255,255,0.7);box-shadow:inset 0 6px 10px -6px rgba(255,255,255,0.38750000000000007);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:40px;left:-20.59291886010284px;top:-40px;transform:rotateY(216deg) translateZ(34.72px) rotateX(34deg);background:linear-gradient(180deg, rgba(166, 173, 255, 0.6128244954702581) 0%, rgba(126, 140, 171, 0.5071145627408904) 52%, rgba(101, 109, 168, 0.4414046300115226) 100%);clip-path:polygon(26% 0%, 74% 0%, 100% 100%, 0% 100%);border-top:1px solid rgba(255,255,255,0.7);box-shadow:inset 0 6px 10px -6px rgba(255,255,255,0.3213741591170968);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:40px;left:-20.59291886010284px;top:-40px;transform:rotateY(252deg) translateZ(34.72px) rotateX(34deg);background:linear-gradient(180deg, rgba(150, 155, 255, 0.5883036851500771) 0%, rgba(114, 125, 151, 0.48586319379673354) 52%, rgba(91, 97, 150, 0.42342270244338986) 100%);clip-path:polygon(26% 0%, 74% 0%, 100% 100%, 0% 100%);border-top:1px solid rgba(255,255,255,0.7);box-shadow:inset 0 6px 10px -6px rgba(255,255,255,0.28050614191679524);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:40px;left:-20.59291886010284px;top:-40px;transform:rotateY(288deg) translateZ(34.72px) rotateX(34deg);background:linear-gradient(180deg, rgba(150, 155, 255, 0.5883036851500771) 0%, rgba(114, 125, 151, 0.48586319379673354) 52%, rgba(91, 97, 150, 0.42342270244338986) 100%);clip-path:polygon(26% 0%, 74% 0%, 100% 100%, 0% 100%);border-top:1px solid rgba(255,255,255,0.7);box-shadow:inset 0 6px 10px -6px rgba(255,255,255,0.28050614191679524);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:40px;left:-20.59291886010284px;top:-40px;transform:rotateY(324deg) translateZ(34.72px) rotateX(34deg);background:linear-gradient(180deg, rgba(166, 173, 255, 0.6128244954702581) 0%, rgba(126, 140, 171, 0.5071145627408904) 52%, rgba(101, 109, 168, 0.4414046300115226) 100%);clip-path:polygon(26% 0%, 74% 0%, 100% 100%, 0% 100%);border-top:1px solid rgba(255,255,255,0.7);box-shadow:inset 0 6px 10px -6px rgba(255,255,255,0.32137415911709677);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:36.800000000000004px;left:-20.59291886010284px;top:-40px;transform:rotateY(18deg) translateZ(33.6px) rotateX(40deg);background:linear-gradient(180deg, rgba(140, 144, 255, 0.57375) 0%, rgba(107, 116, 140, 0.47325) 52%, rgba(86, 91, 140, 0.41274999999999995) 100%);clip-path:polygon(50% 0%, 100% 100%, 0% 100%);opacity:0.85;backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:36.800000000000004px;left:-20.59291886010284px;top:-40px;transform:rotateY(54deg) translateZ(33.6px) rotateX(40deg);background:linear-gradient(180deg, rgba(127, 129, 255, 0.553912247735129) 0%, rgba(97, 104, 124, 0.4560572813704452) 52%, rgba(78, 82, 126, 0.3982023150057613) 100%);clip-path:polygon(50% 0%, 100% 100%, 0% 100%);opacity:0.85;backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:36.800000000000004px;left:-20.59291886010284px;top:-40px;transform:rotateY(90deg) translateZ(33.6px) rotateX(40deg);background:linear-gradient(180deg, rgba(119, 120, 255, 0.5416518425750385) 0%, rgba(91, 97, 115, 0.44543159689836676) 52%, rgba(73, 76, 117, 0.3892113512216949) 100%);clip-path:polygon(50% 0%, 100% 100%, 0% 100%);opacity:0.85;backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:36.800000000000004px;left:-20.59291886010284px;top:-40px;transform:rotateY(126deg) translateZ(33.6px) rotateX(40deg);background:linear-gradient(180deg, rgba(119, 120, 255, 0.5416518425750385) 0%, rgba(91, 97, 115, 0.44543159689836676) 52%, rgba(73, 76, 117, 0.3892113512216949) 100%);clip-path:polygon(50% 0%, 100% 100%, 0% 100%);opacity:0.85;backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:36.800000000000004px;left:-20.59291886010284px;top:-40px;transform:rotateY(162deg) translateZ(33.6px) rotateX(40deg);background:linear-gradient(180deg, rgba(127, 129, 255, 0.553912247735129) 0%, rgba(97, 104, 124, 0.4560572813704452) 52%, rgba(78, 82, 126, 0.3982023150057613) 100%);clip-path:polygon(50% 0%, 100% 100%, 0% 100%);opacity:0.85;backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:36.800000000000004px;left:-20.59291886010284px;top:-40px;transform:rotateY(198deg) translateZ(33.6px) rotateX(40deg);background:linear-gradient(180deg, rgba(140, 144, 255, 0.57375) 0%, rgba(107, 116, 140, 0.47325) 52%, rgba(86, 91, 140, 0.41274999999999995) 100%);clip-path:polygon(50% 0%, 100% 100%, 0% 100%);opacity:0.85;backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:36.800000000000004px;left:-20.59291886010284px;top:-40px;transform:rotateY(234deg) translateZ(33.6px) rotateX(40deg);background:linear-gradient(180deg, rgba(153, 158, 255, 0.5935877522648709) 0%, rgba(117, 128, 156, 0.4904427186295549) 52%, rgba(93, 100, 154, 0.4272976849942387) 100%);clip-path:polygon(50% 0%, 100% 100%, 0% 100%);opacity:0.85;backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:36.800000000000004px;left:-20.59291886010284px;top:-40px;transform:rotateY(270deg) translateZ(33.6px) rotateX(40deg);background:linear-gradient(180deg, rgba(161, 168, 255, 0.6058481574249615) 0%, rgba(123, 136, 165, 0.5010684031016333) 52%, rgba(98, 105, 163, 0.43628864877830503) 100%);clip-path:polygon(50% 0%, 100% 100%, 0% 100%);opacity:0.85;backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:36.800000000000004px;left:-20.59291886010284px;top:-40px;transform:rotateY(306deg) translateZ(33.6px) rotateX(40deg);background:linear-gradient(180deg, rgba(161, 168, 255, 0.6058481574249615) 0%, rgba(123, 136, 165, 0.5010684031016333) 52%, rgba(98, 105, 163, 0.43628864877830503) 100%);clip-path:polygon(50% 0%, 100% 100%, 0% 100%);opacity:0.85;backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:36.800000000000004px;left:-20.59291886010284px;top:-40px;transform:rotateY(342deg) translateZ(33.6px) rotateX(40deg);background:linear-gradient(180deg, rgba(153, 158, 255, 0.5935877522648709) 0%, rgba(117, 128, 156, 0.4904427186295549) 52%, rgba(93, 100, 154, 0.4272976849942387) 100%);clip-path:polygon(50% 0%, 100% 100%, 0% 100%);opacity:0.85;backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:78px;left:-20.59291886010284px;top:0;transform:rotateY(0deg) translateZ(34.72px) rotateX(-52deg);background:linear-gradient(180deg, rgba(108, 122, 161, 0.5680000000000001) 0%, rgba(50, 66, 129, 0.668) 100%);clip-path:polygon(0% 0%, 100% 0%, 50% 100%);box-shadow:inset 0 -8px 14px -8px rgba(120,150,255,0.24000000000000005);border-left:1px solid rgba(180,205,255,0.35);border-right:1px solid rgba(180,205,255,0.35);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:78px;left:-20.59291886010284px;top:0;transform:rotateY(36deg) translateZ(34.72px) rotateX(-52deg);background:linear-gradient(180deg, rgba(93, 103, 133, 0.5350840258716215) 0%, rgba(43, 57, 109, 0.6350840258716215) 100%);clip-path:polygon(0% 0%, 100% 0%, 50% 100%);box-shadow:inset 0 -8px 14px -8px rgba(120,150,255,0.19297717981660217);border-left:1px solid rgba(180,205,255,0.35);border-right:1px solid rgba(180,205,255,0.35);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:78px;left:-20.59291886010284px;top:0;transform:rotateY(72deg) translateZ(34.72px) rotateX(-52deg);background:linear-gradient(180deg, rgba(83, 92, 116, 0.5147408350874715) 0%, rgba(39, 50, 97, 0.6147408350874715) 100%);clip-path:polygon(0% 0%, 100% 0%, 50% 100%);box-shadow:inset 0 -8px 14px -8px rgba(120,150,255,0.16391547869638773);border-left:1px solid rgba(180,205,255,0.35);border-right:1px solid rgba(180,205,255,0.35);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:78px;left:-20.59291886010284px;top:0;transform:rotateY(108deg) translateZ(34.72px) rotateX(-52deg);background:linear-gradient(180deg, rgba(83, 92, 116, 0.5147408350874715) 0%, rgba(39, 50, 97, 0.6147408350874715) 100%);clip-path:polygon(0% 0%, 100% 0%, 50% 100%);box-shadow:inset 0 -8px 14px -8px rgba(120,150,255,0.16391547869638773);border-left:1px solid rgba(180,205,255,0.35);border-right:1px solid rgba(180,205,255,0.35);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:78px;left:-20.59291886010284px;top:0;transform:rotateY(144deg) translateZ(34.72px) rotateX(-52deg);background:linear-gradient(180deg, rgba(93, 103, 133, 0.5350840258716215) 0%, rgba(43, 57, 109, 0.6350840258716215) 100%);clip-path:polygon(0% 0%, 100% 0%, 50% 100%);box-shadow:inset 0 -8px 14px -8px rgba(120,150,255,0.19297717981660215);border-left:1px solid rgba(180,205,255,0.35);border-right:1px solid rgba(180,205,255,0.35);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:78px;left:-20.59291886010284px;top:0;transform:rotateY(180deg) translateZ(34.72px) rotateX(-52deg);background:linear-gradient(180deg, rgba(108, 122, 161, 0.5680000000000001) 0%, rgba(50, 66, 129, 0.668) 100%);clip-path:polygon(0% 0%, 100% 0%, 50% 100%);box-shadow:inset 0 -8px 14px -8px rgba(120,150,255,0.24);border-left:1px solid rgba(180,205,255,0.35);border-right:1px solid rgba(180,205,255,0.35);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:78px;left:-20.59291886010284px;top:0;transform:rotateY(216deg) translateZ(34.72px) rotateX(-52deg);background:linear-gradient(180deg, rgba(123, 141, 188, 0.6009159741283785) 0%, rgba(57, 76, 149, 0.7009159741283785) 100%);clip-path:polygon(0% 0%, 100% 0%, 50% 100%);box-shadow:inset 0 -8px 14px -8px rgba(120,150,255,0.28702282018339786);border-left:1px solid rgba(180,205,255,0.35);border-right:1px solid rgba(180,205,255,0.35);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:78px;left:-20.59291886010284px;top:0;transform:rotateY(252deg) translateZ(34.72px) rotateX(-52deg);background:linear-gradient(180deg, rgba(133, 152, 205, 0.6212591649125286) 0%, rgba(61, 82, 161, 0.7212591649125286) 100%);clip-path:polygon(0% 0%, 100% 0%, 50% 100%);box-shadow:inset 0 -8px 14px -8px rgba(120,150,255,0.3160845213036123);border-left:1px solid rgba(180,205,255,0.35);border-right:1px solid rgba(180,205,255,0.35);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:78px;left:-20.59291886010284px;top:0;transform:rotateY(288deg) translateZ(34.72px) rotateX(-52deg);background:linear-gradient(180deg, rgba(133, 152, 205, 0.6212591649125286) 0%, rgba(61, 82, 161, 0.7212591649125286) 100%);clip-path:polygon(0% 0%, 100% 0%, 50% 100%);box-shadow:inset 0 -8px 14px -8px rgba(120,150,255,0.3160845213036123);border-left:1px solid rgba(180,205,255,0.35);border-right:1px solid rgba(180,205,255,0.35);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:78px;left:-20.59291886010284px;top:0;transform:rotateY(324deg) translateZ(34.72px) rotateX(-52deg);background:linear-gradient(180deg, rgba(123, 141, 188, 0.6009159741283785) 0%, rgba(57, 76, 149, 0.7009159741283786) 100%);clip-path:polygon(0% 0%, 100% 0%, 50% 100%);box-shadow:inset 0 -8px 14px -8px rgba(120,150,255,0.2870228201833979);border-left:1px solid rgba(180,205,255,0.35);border-right:1px solid rgba(180,205,255,0.35);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute\" style=\"width:41.18583772020568px;height:7px;left:-20.59291886010284px;top:-3px;transform:rotateY(0deg) translateZ(36.96px);background:linear-gradient(180deg, rgba(255,255,255,0.46499999999999997), rgba(150,180,255,0.2));backface-visibility:visible\">\n          </div>\n          <div class=\"absolute\" style=\"width:41.18583772020568px;height:7px;left:-20.59291886010284px;top:-3px;transform:rotateY(36deg) translateZ(36.96px);background:linear-gradient(180deg, rgba(255,255,255,0.5443510090594839), rgba(150,180,255,0.2));backface-visibility:visible\">\n          </div>\n          <div class=\"absolute\" style=\"width:41.18583772020568px;height:7px;left:-20.59291886010284px;top:-3px;transform:rotateY(72deg) translateZ(36.96px);background:linear-gradient(180deg, rgba(255,255,255,0.5933926296998457), rgba(150,180,255,0.2));backface-visibility:visible\">\n          </div>\n          <div class=\"absolute\" style=\"width:41.18583772020568px;height:7px;left:-20.59291886010284px;top:-3px;transform:rotateY(108deg) translateZ(36.96px);background:linear-gradient(180deg, rgba(255,255,255,0.5933926296998457), rgba(150,180,255,0.2));backface-visibility:visible\">\n          </div>\n          <div class=\"absolute\" style=\"width:41.18583772020568px;height:7px;left:-20.59291886010284px;top:-3px;transform:rotateY(144deg) translateZ(36.96px);background:linear-gradient(180deg, rgba(255,255,255,0.5443510090594839), rgba(150,180,255,0.2));backface-visibility:visible\">\n          </div>\n          <div class=\"absolute\" style=\"width:41.18583772020568px;height:7px;left:-20.59291886010284px;top:-3px;transform:rotateY(180deg) translateZ(36.96px);background:linear-gradient(180deg, rgba(255,255,255,0.4650000000000001), rgba(150,180,255,0.2));backface-visibility:visible\">\n          </div>\n          <div class=\"absolute\" style=\"width:41.18583772020568px;height:7px;left:-20.59291886010284px;top:-3px;transform:rotateY(216deg) translateZ(36.96px);background:linear-gradient(180deg, rgba(255,255,255,0.3856489909405162), rgba(150,180,255,0.2));backface-visibility:visible\">\n          </div>\n          <div class=\"absolute\" style=\"width:41.18583772020568px;height:7px;left:-20.59291886010284px;top:-3px;transform:rotateY(252deg) translateZ(36.96px);background:linear-gradient(180deg, rgba(255,255,255,0.33660737030015425), rgba(150,180,255,0.2));backface-visibility:visible\">\n          </div>\n          <div class=\"absolute\" style=\"width:41.18583772020568px;height:7px;left:-20.59291886010284px;top:-3px;transform:rotateY(288deg) translateZ(36.96px);background:linear-gradient(180deg, rgba(255,255,255,0.33660737030015425), rgba(150,180,255,0.2));backface-visibility:visible\">\n          </div>\n          <div class=\"absolute\" style=\"width:41.18583772020568px;height:7px;left:-20.59291886010284px;top:-3px;transform:rotateY(324deg) translateZ(36.96px);background:linear-gradient(180deg, rgba(255,255,255,0.38564899094051613), rgba(150,180,255,0.2));backface-visibility:visible\">\n          </div>\n          <span class=\"cg-glint absolute\" style=\"left:-20px;top:-30px;width:16px;height:16px;transform:translate(-50%,-50%);background:radial-gradient(circle, hsla(0,100%,80%,0.95) 0%, rgba(255,255,255,0.6) 40%, transparent 68%);animation:cg-glint 4.2s ease-in-out 0s infinite\">\n            <span class=\"absolute left-1/2 top-1/2\" style=\"width:41.6px;height:2px;transform:translate(-50%,-50%);background:linear-gradient(90deg, transparent, #fff, transparent)\">\n            </span>\n            <span class=\"absolute left-1/2 top-1/2\" style=\"width:2px;height:41.6px;transform:translate(-50%,-50%);background:linear-gradient(180deg, transparent, #fff, transparent)\">\n            </span>\n          </span>\n          <span class=\"cg-glint absolute\" style=\"left:16px;top:-18px;width:12px;height:12px;transform:translate(-50%,-50%);background:radial-gradient(circle, hsla(140,100%,80%,0.95) 0%, rgba(255,255,255,0.6) 40%, transparent 68%);animation:cg-glint 5.1s ease-in-out 1.4s infinite\">\n            <span class=\"absolute left-1/2 top-1/2\" style=\"width:31.200000000000003px;height:2px;transform:translate(-50%,-50%);background:linear-gradient(90deg, transparent, #fff, transparent)\">\n            </span>\n            <span class=\"absolute left-1/2 top-1/2\" style=\"width:2px;height:31.200000000000003px;transform:translate(-50%,-50%);background:linear-gradient(180deg, transparent, #fff, transparent)\">\n            </span>\n          </span>\n          <span class=\"cg-glint absolute\" style=\"left:-4px;top:0px;width:14px;height:14px;transform:translate(-50%,-50%);background:radial-gradient(circle, hsla(260,100%,80%,0.95) 0%, rgba(255,255,255,0.6) 40%, transparent 68%);animation:cg-glint 4.6s ease-in-out 2.6s infinite\">\n            <span class=\"absolute left-1/2 top-1/2\" style=\"width:36.4px;height:2px;transform:translate(-50%,-50%);background:linear-gradient(90deg, transparent, #fff, transparent)\">\n            </span>\n            <span class=\"absolute left-1/2 top-1/2\" style=\"width:2px;height:36.4px;transform:translate(-50%,-50%);background:linear-gradient(180deg, transparent, #fff, transparent)\">\n            </span>\n          </span>\n          <span class=\"cg-glint absolute\" style=\"left:8px;top:-36px;width:10px;height:10px;transform:translate(-50%,-50%);background:radial-gradient(circle, hsla(60,100%,80%,0.95) 0%, rgba(255,255,255,0.6) 40%, transparent 68%);animation:cg-glint 5.6s ease-in-out 3.4s infinite\">\n            <span class=\"absolute left-1/2 top-1/2\" style=\"width:26px;height:2px;transform:translate(-50%,-50%);background:linear-gradient(90deg, transparent, #fff, transparent)\">\n            </span>\n            <span class=\"absolute left-1/2 top-1/2\" style=\"width:2px;height:26px;transform:translate(-50%,-50%);background:linear-gradient(180deg, transparent, #fff, transparent)\">\n            </span>\n          </span>\n        </div>\n      </div>\n      <p class=\"text-xs font-medium uppercase tracking-[0.32em] text-indigo-200/65\">\n        ブリリアントカット · 1.2 カラット\n      </p>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"flex w-full flex-col items-center gap-8 rounded-3xl py-16\" style=\"background:radial-gradient(120% 110% at 50% 8%, #11142a 0%, #080a18 60%, #03040a 100%)\">\n      <style>\n        @keyframes cg-spin   { to { transform: rotateY(360deg); } }\n            @keyframes cg-bob    { 0%,100% { transform: translateY(-7px); } 50% { transform: translateY(7px); } }\n            @keyframes cg-bloom  { 0%,100% { opacity: 0.35; transform: translate(-50%,-50%) scale(0.92) rotate(0deg); }\n                                   50%     { opacity: 0.7;  transform: translate(-50%,-50%) scale(1.06) rotate(180deg); } }\n            @keyframes cg-glint  {\n              0%, 70%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(0.4) rotate(0deg); }\n              82%, 90%      { opacity: 1; transform: translate(-50%,-50%) scale(1)   rotate(45deg); }\n            }\n            @keyframes cg-drift  { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }\n            @media (prefers-reduced-motion: reduce) {\n              .cg-gem    { animation: none !important; transform: rotateX(14deg) rotateY(26deg) !important; }\n              .cg-bob    { animation: none !important; }\n              .cg-bloom  { animation: none !important; opacity: 0.55 !important; transform: translate(-50%,-50%) scale(1) !important; }\n              .cg-glint  { animation: none !important; opacity: 0.85 !important; transform: translate(-50%,-50%) scale(1) rotate(45deg) !important; }\n              .cg-band   { animation: none !important; }\n            }\n      </style>\n      <div class=\"cg-bob relative\" style=\"width:220px;height:260px;perspective:720px;animation:cg-bob 4.4s ease-in-out infinite\">\n        <div class=\"cg-bloom pointer-events-none absolute left-1/2 top-1/2 h-44 w-44 rounded-full\" style=\"background:conic-gradient(from 0deg, #ff5d8f, #ffd45d, #5dff9e, #5dd8ff, #9a5dff, #ff5dd0, #ff5d8f);filter:blur(30px);animation:cg-bloom 7s ease-in-out infinite\">\n        </div>\n        <div class=\"cg-gem absolute left-1/2 top-1/2\" style=\"width:0;height:0;transform-style:preserve-3d;transform:rotateX(14deg);animation:cg-spin 9s linear infinite;will-change:transform\">\n          <div class=\"absolute rounded-full\" style=\"width:96px;height:96px;left:-48px;top:-54px;background:radial-gradient(circle at 42% 36%, rgba(190,220,255,0.5), rgba(90,120,210,0.28) 55%, rgba(30,40,90,0.12) 100%);transform:translateZ(0);filter:blur(2px)\">\n          </div>\n          <div class=\"absolute\" style=\"width:95.2px;height:95.2px;left:-47.6px;top:-47.6px;transform:translateY(-44px) rotateX(90deg);clip-path:polygon(50.0% 0.0%, 79.4% 9.5%, 97.6% 34.5%, 97.6% 65.5%, 79.4% 90.5%, 50.0% 100.0%, 20.6% 90.5%, 2.4% 65.5%, 2.4% 34.5%, 20.6% 9.5%);background:radial-gradient(circle at 40% 34%, rgba(232,244,255,0.92) 0%, rgba(176,206,255,0.7) 46%, rgba(120,150,230,0.6) 100%);box-shadow:inset 0 0 18px rgba(255,255,255,0.55)\">\n            <div class=\"cg-band absolute inset-0\" style=\"clip-path:polygon(50.0% 0.0%, 79.4% 9.5%, 97.6% 34.5%, 97.6% 65.5%, 79.4% 90.5%, 50.0% 100.0%, 20.6% 90.5%, 2.4% 65.5%, 2.4% 34.5%, 20.6% 9.5%);background:linear-gradient(115deg, transparent 30%, rgba(255,93,143,0.5), rgba(255,212,93,0.5), rgba(93,255,158,0.5), rgba(93,216,255,0.5), rgba(154,93,255,0.5), transparent 70%);background-size:200% 100%;mix-blend-mode:screen;animation:cg-drift 6s linear infinite;opacity:0.7\">\n            </div>\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:40px;left:-20.59291886010284px;top:-40px;transform:rotateY(0deg) translateZ(34.72px) rotateX(34deg);background:linear-gradient(180deg, rgba(192, 202, 255, 0.6525) 0%, rgba(146, 164, 202, 0.5415000000000001) 52%, rgba(117, 127, 196, 0.47050000000000003) 100%);clip-path:polygon(26% 0%, 74% 0%, 100% 100%, 0% 100%);border-top:1px solid rgba(255,255,255,0.7);box-shadow:inset 0 6px 10px -6px rgba(255,255,255,0.3875);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:40px;left:-20.59291886010284px;top:-40px;transform:rotateY(36deg) translateZ(34.72px) rotateX(34deg);background:linear-gradient(180deg, rgba(218, 231, 255, 0.692175504529742) 0%, rgba(166, 187, 233, 0.5758854372591098) 52%, rgba(133, 145, 224, 0.4995953699884774) 100%);clip-path:polygon(26% 0%, 74% 0%, 100% 100%, 0% 100%);border-top:1px solid rgba(255,255,255,0.7);box-shadow:inset 0 6px 10px -6px rgba(255,255,255,0.45362584088290325);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:40px;left:-20.59291886010284px;top:-40px;transform:rotateY(72deg) translateZ(34.72px) rotateX(34deg);background:linear-gradient(180deg, rgba(234, 250, 255, 0.7166963148499228) 0%, rgba(178, 202, 252, 0.5971368062032665) 52%, rgba(143, 156, 242, 0.5175772975566101) 100%);clip-path:polygon(26% 0%, 74% 0%, 100% 100%, 0% 100%);border-top:1px solid rgba(255,255,255,0.7);box-shadow:inset 0 6px 10px -6px rgba(255,255,255,0.4944938580832048);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:40px;left:-20.59291886010284px;top:-40px;transform:rotateY(108deg) translateZ(34.72px) rotateX(34deg);background:linear-gradient(180deg, rgba(234, 250, 255, 0.7166963148499228) 0%, rgba(178, 202, 252, 0.5971368062032665) 52%, rgba(143, 156, 242, 0.5175772975566101) 100%);clip-path:polygon(26% 0%, 74% 0%, 100% 100%, 0% 100%);border-top:1px solid rgba(255,255,255,0.7);box-shadow:inset 0 6px 10px -6px rgba(255,255,255,0.4944938580832048);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:40px;left:-20.59291886010284px;top:-40px;transform:rotateY(144deg) translateZ(34.72px) rotateX(34deg);background:linear-gradient(180deg, rgba(218, 231, 255, 0.692175504529742) 0%, rgba(166, 187, 233, 0.5758854372591098) 52%, rgba(133, 145, 224, 0.4995953699884774) 100%);clip-path:polygon(26% 0%, 74% 0%, 100% 100%, 0% 100%);border-top:1px solid rgba(255,255,255,0.7);box-shadow:inset 0 6px 10px -6px rgba(255,255,255,0.45362584088290325);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:40px;left:-20.59291886010284px;top:-40px;transform:rotateY(180deg) translateZ(34.72px) rotateX(34deg);background:linear-gradient(180deg, rgba(192, 202, 255, 0.6525000000000001) 0%, rgba(146, 164, 202, 0.5415000000000001) 52%, rgba(117, 127, 196, 0.47050000000000003) 100%);clip-path:polygon(26% 0%, 74% 0%, 100% 100%, 0% 100%);border-top:1px solid rgba(255,255,255,0.7);box-shadow:inset 0 6px 10px -6px rgba(255,255,255,0.38750000000000007);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:40px;left:-20.59291886010284px;top:-40px;transform:rotateY(216deg) translateZ(34.72px) rotateX(34deg);background:linear-gradient(180deg, rgba(166, 173, 255, 0.6128244954702581) 0%, rgba(126, 140, 171, 0.5071145627408904) 52%, rgba(101, 109, 168, 0.4414046300115226) 100%);clip-path:polygon(26% 0%, 74% 0%, 100% 100%, 0% 100%);border-top:1px solid rgba(255,255,255,0.7);box-shadow:inset 0 6px 10px -6px rgba(255,255,255,0.3213741591170968);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:40px;left:-20.59291886010284px;top:-40px;transform:rotateY(252deg) translateZ(34.72px) rotateX(34deg);background:linear-gradient(180deg, rgba(150, 155, 255, 0.5883036851500771) 0%, rgba(114, 125, 151, 0.48586319379673354) 52%, rgba(91, 97, 150, 0.42342270244338986) 100%);clip-path:polygon(26% 0%, 74% 0%, 100% 100%, 0% 100%);border-top:1px solid rgba(255,255,255,0.7);box-shadow:inset 0 6px 10px -6px rgba(255,255,255,0.28050614191679524);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:40px;left:-20.59291886010284px;top:-40px;transform:rotateY(288deg) translateZ(34.72px) rotateX(34deg);background:linear-gradient(180deg, rgba(150, 155, 255, 0.5883036851500771) 0%, rgba(114, 125, 151, 0.48586319379673354) 52%, rgba(91, 97, 150, 0.42342270244338986) 100%);clip-path:polygon(26% 0%, 74% 0%, 100% 100%, 0% 100%);border-top:1px solid rgba(255,255,255,0.7);box-shadow:inset 0 6px 10px -6px rgba(255,255,255,0.28050614191679524);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:40px;left:-20.59291886010284px;top:-40px;transform:rotateY(324deg) translateZ(34.72px) rotateX(34deg);background:linear-gradient(180deg, rgba(166, 173, 255, 0.6128244954702581) 0%, rgba(126, 140, 171, 0.5071145627408904) 52%, rgba(101, 109, 168, 0.4414046300115226) 100%);clip-path:polygon(26% 0%, 74% 0%, 100% 100%, 0% 100%);border-top:1px solid rgba(255,255,255,0.7);box-shadow:inset 0 6px 10px -6px rgba(255,255,255,0.32137415911709677);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:36.800000000000004px;left:-20.59291886010284px;top:-40px;transform:rotateY(18deg) translateZ(33.6px) rotateX(40deg);background:linear-gradient(180deg, rgba(140, 144, 255, 0.57375) 0%, rgba(107, 116, 140, 0.47325) 52%, rgba(86, 91, 140, 0.41274999999999995) 100%);clip-path:polygon(50% 0%, 100% 100%, 0% 100%);opacity:0.85;backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:36.800000000000004px;left:-20.59291886010284px;top:-40px;transform:rotateY(54deg) translateZ(33.6px) rotateX(40deg);background:linear-gradient(180deg, rgba(127, 129, 255, 0.553912247735129) 0%, rgba(97, 104, 124, 0.4560572813704452) 52%, rgba(78, 82, 126, 0.3982023150057613) 100%);clip-path:polygon(50% 0%, 100% 100%, 0% 100%);opacity:0.85;backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:36.800000000000004px;left:-20.59291886010284px;top:-40px;transform:rotateY(90deg) translateZ(33.6px) rotateX(40deg);background:linear-gradient(180deg, rgba(119, 120, 255, 0.5416518425750385) 0%, rgba(91, 97, 115, 0.44543159689836676) 52%, rgba(73, 76, 117, 0.3892113512216949) 100%);clip-path:polygon(50% 0%, 100% 100%, 0% 100%);opacity:0.85;backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:36.800000000000004px;left:-20.59291886010284px;top:-40px;transform:rotateY(126deg) translateZ(33.6px) rotateX(40deg);background:linear-gradient(180deg, rgba(119, 120, 255, 0.5416518425750385) 0%, rgba(91, 97, 115, 0.44543159689836676) 52%, rgba(73, 76, 117, 0.3892113512216949) 100%);clip-path:polygon(50% 0%, 100% 100%, 0% 100%);opacity:0.85;backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:36.800000000000004px;left:-20.59291886010284px;top:-40px;transform:rotateY(162deg) translateZ(33.6px) rotateX(40deg);background:linear-gradient(180deg, rgba(127, 129, 255, 0.553912247735129) 0%, rgba(97, 104, 124, 0.4560572813704452) 52%, rgba(78, 82, 126, 0.3982023150057613) 100%);clip-path:polygon(50% 0%, 100% 100%, 0% 100%);opacity:0.85;backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:36.800000000000004px;left:-20.59291886010284px;top:-40px;transform:rotateY(198deg) translateZ(33.6px) rotateX(40deg);background:linear-gradient(180deg, rgba(140, 144, 255, 0.57375) 0%, rgba(107, 116, 140, 0.47325) 52%, rgba(86, 91, 140, 0.41274999999999995) 100%);clip-path:polygon(50% 0%, 100% 100%, 0% 100%);opacity:0.85;backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:36.800000000000004px;left:-20.59291886010284px;top:-40px;transform:rotateY(234deg) translateZ(33.6px) rotateX(40deg);background:linear-gradient(180deg, rgba(153, 158, 255, 0.5935877522648709) 0%, rgba(117, 128, 156, 0.4904427186295549) 52%, rgba(93, 100, 154, 0.4272976849942387) 100%);clip-path:polygon(50% 0%, 100% 100%, 0% 100%);opacity:0.85;backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:36.800000000000004px;left:-20.59291886010284px;top:-40px;transform:rotateY(270deg) translateZ(33.6px) rotateX(40deg);background:linear-gradient(180deg, rgba(161, 168, 255, 0.6058481574249615) 0%, rgba(123, 136, 165, 0.5010684031016333) 52%, rgba(98, 105, 163, 0.43628864877830503) 100%);clip-path:polygon(50% 0%, 100% 100%, 0% 100%);opacity:0.85;backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:36.800000000000004px;left:-20.59291886010284px;top:-40px;transform:rotateY(306deg) translateZ(33.6px) rotateX(40deg);background:linear-gradient(180deg, rgba(161, 168, 255, 0.6058481574249615) 0%, rgba(123, 136, 165, 0.5010684031016333) 52%, rgba(98, 105, 163, 0.43628864877830503) 100%);clip-path:polygon(50% 0%, 100% 100%, 0% 100%);opacity:0.85;backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:36.800000000000004px;left:-20.59291886010284px;top:-40px;transform:rotateY(342deg) translateZ(33.6px) rotateX(40deg);background:linear-gradient(180deg, rgba(153, 158, 255, 0.5935877522648709) 0%, rgba(117, 128, 156, 0.4904427186295549) 52%, rgba(93, 100, 154, 0.4272976849942387) 100%);clip-path:polygon(50% 0%, 100% 100%, 0% 100%);opacity:0.85;backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:78px;left:-20.59291886010284px;top:0;transform:rotateY(0deg) translateZ(34.72px) rotateX(-52deg);background:linear-gradient(180deg, rgba(108, 122, 161, 0.5680000000000001) 0%, rgba(50, 66, 129, 0.668) 100%);clip-path:polygon(0% 0%, 100% 0%, 50% 100%);box-shadow:inset 0 -8px 14px -8px rgba(120,150,255,0.24000000000000005);border-left:1px solid rgba(180,205,255,0.35);border-right:1px solid rgba(180,205,255,0.35);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:78px;left:-20.59291886010284px;top:0;transform:rotateY(36deg) translateZ(34.72px) rotateX(-52deg);background:linear-gradient(180deg, rgba(93, 103, 133, 0.5350840258716215) 0%, rgba(43, 57, 109, 0.6350840258716215) 100%);clip-path:polygon(0% 0%, 100% 0%, 50% 100%);box-shadow:inset 0 -8px 14px -8px rgba(120,150,255,0.19297717981660217);border-left:1px solid rgba(180,205,255,0.35);border-right:1px solid rgba(180,205,255,0.35);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:78px;left:-20.59291886010284px;top:0;transform:rotateY(72deg) translateZ(34.72px) rotateX(-52deg);background:linear-gradient(180deg, rgba(83, 92, 116, 0.5147408350874715) 0%, rgba(39, 50, 97, 0.6147408350874715) 100%);clip-path:polygon(0% 0%, 100% 0%, 50% 100%);box-shadow:inset 0 -8px 14px -8px rgba(120,150,255,0.16391547869638773);border-left:1px solid rgba(180,205,255,0.35);border-right:1px solid rgba(180,205,255,0.35);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:78px;left:-20.59291886010284px;top:0;transform:rotateY(108deg) translateZ(34.72px) rotateX(-52deg);background:linear-gradient(180deg, rgba(83, 92, 116, 0.5147408350874715) 0%, rgba(39, 50, 97, 0.6147408350874715) 100%);clip-path:polygon(0% 0%, 100% 0%, 50% 100%);box-shadow:inset 0 -8px 14px -8px rgba(120,150,255,0.16391547869638773);border-left:1px solid rgba(180,205,255,0.35);border-right:1px solid rgba(180,205,255,0.35);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:78px;left:-20.59291886010284px;top:0;transform:rotateY(144deg) translateZ(34.72px) rotateX(-52deg);background:linear-gradient(180deg, rgba(93, 103, 133, 0.5350840258716215) 0%, rgba(43, 57, 109, 0.6350840258716215) 100%);clip-path:polygon(0% 0%, 100% 0%, 50% 100%);box-shadow:inset 0 -8px 14px -8px rgba(120,150,255,0.19297717981660215);border-left:1px solid rgba(180,205,255,0.35);border-right:1px solid rgba(180,205,255,0.35);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:78px;left:-20.59291886010284px;top:0;transform:rotateY(180deg) translateZ(34.72px) rotateX(-52deg);background:linear-gradient(180deg, rgba(108, 122, 161, 0.5680000000000001) 0%, rgba(50, 66, 129, 0.668) 100%);clip-path:polygon(0% 0%, 100% 0%, 50% 100%);box-shadow:inset 0 -8px 14px -8px rgba(120,150,255,0.24);border-left:1px solid rgba(180,205,255,0.35);border-right:1px solid rgba(180,205,255,0.35);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:78px;left:-20.59291886010284px;top:0;transform:rotateY(216deg) translateZ(34.72px) rotateX(-52deg);background:linear-gradient(180deg, rgba(123, 141, 188, 0.6009159741283785) 0%, rgba(57, 76, 149, 0.7009159741283785) 100%);clip-path:polygon(0% 0%, 100% 0%, 50% 100%);box-shadow:inset 0 -8px 14px -8px rgba(120,150,255,0.28702282018339786);border-left:1px solid rgba(180,205,255,0.35);border-right:1px solid rgba(180,205,255,0.35);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:78px;left:-20.59291886010284px;top:0;transform:rotateY(252deg) translateZ(34.72px) rotateX(-52deg);background:linear-gradient(180deg, rgba(133, 152, 205, 0.6212591649125286) 0%, rgba(61, 82, 161, 0.7212591649125286) 100%);clip-path:polygon(0% 0%, 100% 0%, 50% 100%);box-shadow:inset 0 -8px 14px -8px rgba(120,150,255,0.3160845213036123);border-left:1px solid rgba(180,205,255,0.35);border-right:1px solid rgba(180,205,255,0.35);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:78px;left:-20.59291886010284px;top:0;transform:rotateY(288deg) translateZ(34.72px) rotateX(-52deg);background:linear-gradient(180deg, rgba(133, 152, 205, 0.6212591649125286) 0%, rgba(61, 82, 161, 0.7212591649125286) 100%);clip-path:polygon(0% 0%, 100% 0%, 50% 100%);box-shadow:inset 0 -8px 14px -8px rgba(120,150,255,0.3160845213036123);border-left:1px solid rgba(180,205,255,0.35);border-right:1px solid rgba(180,205,255,0.35);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute origin-top\" style=\"width:41.18583772020568px;height:78px;left:-20.59291886010284px;top:0;transform:rotateY(324deg) translateZ(34.72px) rotateX(-52deg);background:linear-gradient(180deg, rgba(123, 141, 188, 0.6009159741283785) 0%, rgba(57, 76, 149, 0.7009159741283786) 100%);clip-path:polygon(0% 0%, 100% 0%, 50% 100%);box-shadow:inset 0 -8px 14px -8px rgba(120,150,255,0.2870228201833979);border-left:1px solid rgba(180,205,255,0.35);border-right:1px solid rgba(180,205,255,0.35);backface-visibility:visible\">\n          </div>\n          <div class=\"absolute\" style=\"width:41.18583772020568px;height:7px;left:-20.59291886010284px;top:-3px;transform:rotateY(0deg) translateZ(36.96px);background:linear-gradient(180deg, rgba(255,255,255,0.46499999999999997), rgba(150,180,255,0.2));backface-visibility:visible\">\n          </div>\n          <div class=\"absolute\" style=\"width:41.18583772020568px;height:7px;left:-20.59291886010284px;top:-3px;transform:rotateY(36deg) translateZ(36.96px);background:linear-gradient(180deg, rgba(255,255,255,0.5443510090594839), rgba(150,180,255,0.2));backface-visibility:visible\">\n          </div>\n          <div class=\"absolute\" style=\"width:41.18583772020568px;height:7px;left:-20.59291886010284px;top:-3px;transform:rotateY(72deg) translateZ(36.96px);background:linear-gradient(180deg, rgba(255,255,255,0.5933926296998457), rgba(150,180,255,0.2));backface-visibility:visible\">\n          </div>\n          <div class=\"absolute\" style=\"width:41.18583772020568px;height:7px;left:-20.59291886010284px;top:-3px;transform:rotateY(108deg) translateZ(36.96px);background:linear-gradient(180deg, rgba(255,255,255,0.5933926296998457), rgba(150,180,255,0.2));backface-visibility:visible\">\n          </div>\n          <div class=\"absolute\" style=\"width:41.18583772020568px;height:7px;left:-20.59291886010284px;top:-3px;transform:rotateY(144deg) translateZ(36.96px);background:linear-gradient(180deg, rgba(255,255,255,0.5443510090594839), rgba(150,180,255,0.2));backface-visibility:visible\">\n          </div>\n          <div class=\"absolute\" style=\"width:41.18583772020568px;height:7px;left:-20.59291886010284px;top:-3px;transform:rotateY(180deg) translateZ(36.96px);background:linear-gradient(180deg, rgba(255,255,255,0.4650000000000001), rgba(150,180,255,0.2));backface-visibility:visible\">\n          </div>\n          <div class=\"absolute\" style=\"width:41.18583772020568px;height:7px;left:-20.59291886010284px;top:-3px;transform:rotateY(216deg) translateZ(36.96px);background:linear-gradient(180deg, rgba(255,255,255,0.3856489909405162), rgba(150,180,255,0.2));backface-visibility:visible\">\n          </div>\n          <div class=\"absolute\" style=\"width:41.18583772020568px;height:7px;left:-20.59291886010284px;top:-3px;transform:rotateY(252deg) translateZ(36.96px);background:linear-gradient(180deg, rgba(255,255,255,0.33660737030015425), rgba(150,180,255,0.2));backface-visibility:visible\">\n          </div>\n          <div class=\"absolute\" style=\"width:41.18583772020568px;height:7px;left:-20.59291886010284px;top:-3px;transform:rotateY(288deg) translateZ(36.96px);background:linear-gradient(180deg, rgba(255,255,255,0.33660737030015425), rgba(150,180,255,0.2));backface-visibility:visible\">\n          </div>\n          <div class=\"absolute\" style=\"width:41.18583772020568px;height:7px;left:-20.59291886010284px;top:-3px;transform:rotateY(324deg) translateZ(36.96px);background:linear-gradient(180deg, rgba(255,255,255,0.38564899094051613), rgba(150,180,255,0.2));backface-visibility:visible\">\n          </div>\n          <span class=\"cg-glint absolute\" style=\"left:-20px;top:-30px;width:16px;height:16px;transform:translate(-50%,-50%);background:radial-gradient(circle, hsla(0,100%,80%,0.95) 0%, rgba(255,255,255,0.6) 40%, transparent 68%);animation:cg-glint 4.2s ease-in-out 0s infinite\">\n            <span class=\"absolute left-1/2 top-1/2\" style=\"width:41.6px;height:2px;transform:translate(-50%,-50%);background:linear-gradient(90deg, transparent, #fff, transparent)\">\n            </span>\n            <span class=\"absolute left-1/2 top-1/2\" style=\"width:2px;height:41.6px;transform:translate(-50%,-50%);background:linear-gradient(180deg, transparent, #fff, transparent)\">\n            </span>\n          </span>\n          <span class=\"cg-glint absolute\" style=\"left:16px;top:-18px;width:12px;height:12px;transform:translate(-50%,-50%);background:radial-gradient(circle, hsla(140,100%,80%,0.95) 0%, rgba(255,255,255,0.6) 40%, transparent 68%);animation:cg-glint 5.1s ease-in-out 1.4s infinite\">\n            <span class=\"absolute left-1/2 top-1/2\" style=\"width:31.200000000000003px;height:2px;transform:translate(-50%,-50%);background:linear-gradient(90deg, transparent, #fff, transparent)\">\n            </span>\n            <span class=\"absolute left-1/2 top-1/2\" style=\"width:2px;height:31.200000000000003px;transform:translate(-50%,-50%);background:linear-gradient(180deg, transparent, #fff, transparent)\">\n            </span>\n          </span>\n          <span class=\"cg-glint absolute\" style=\"left:-4px;top:0px;width:14px;height:14px;transform:translate(-50%,-50%);background:radial-gradient(circle, hsla(260,100%,80%,0.95) 0%, rgba(255,255,255,0.6) 40%, transparent 68%);animation:cg-glint 4.6s ease-in-out 2.6s infinite\">\n            <span class=\"absolute left-1/2 top-1/2\" style=\"width:36.4px;height:2px;transform:translate(-50%,-50%);background:linear-gradient(90deg, transparent, #fff, transparent)\">\n            </span>\n            <span class=\"absolute left-1/2 top-1/2\" style=\"width:2px;height:36.4px;transform:translate(-50%,-50%);background:linear-gradient(180deg, transparent, #fff, transparent)\">\n            </span>\n          </span>\n          <span class=\"cg-glint absolute\" style=\"left:8px;top:-36px;width:10px;height:10px;transform:translate(-50%,-50%);background:radial-gradient(circle, hsla(60,100%,80%,0.95) 0%, rgba(255,255,255,0.6) 40%, transparent 68%);animation:cg-glint 5.6s ease-in-out 3.4s infinite\">\n            <span class=\"absolute left-1/2 top-1/2\" style=\"width:26px;height:2px;transform:translate(-50%,-50%);background:linear-gradient(90deg, transparent, #fff, transparent)\">\n            </span>\n            <span class=\"absolute left-1/2 top-1/2\" style=\"width:2px;height:26px;transform:translate(-50%,-50%);background:linear-gradient(180deg, transparent, #fff, transparent)\">\n            </span>\n          </span>\n        </div>\n      </div>\n      <p class=\"text-xs font-medium uppercase tracking-[0.32em] text-indigo-200/65\">\n        ブリリアントカット · 1.2 カラット\n      </p>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "mat3d-gloss-liquid-chrome-headline",
@@ -1013,7 +1013,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"リキッドクローム 見出し\",\n  category: \"3Dアニメ\",\n  description:\n    \"立体的に押し出した巨大見出し。流れるクローム/液体金属グラデと横切るミラー帯で動く。\",\n  align: \"full\",\n  isNew: true,\n  level: \"advanced\",\n  tags: [\"3d\", \"gloss\", \"materials\", \"animation\"],\n  principle:\n    \"重く磨かれた金属の艶は“高性能・プレミアム”の連想を起こし、キネティックな反射が視線を掴む。\",\n};\n\nexport default function LiquidChromeHeadline() {\n  const en =\n    typeof document !== \"undefined\" && document.documentElement.lang === \"en\";\n\n  const word = en ? \"CHROME\" : \"クローム\";\n  const sub = en\n    ? \"Liquid metal, kinetic shine\"\n    : \"液体金属の、動くきらめき\";\n\n  return (\n    <section\n      className=\"relative flex w-full flex-col items-center justify-center gap-8 overflow-hidden rounded-[28px] px-6 py-24\"\n      style={{\n        background:\n          \"radial-gradient(120% 100% at 50% 0%, #1b1f29 0%, #0d0f15 60%, #050609 100%)\",\n      }}\n    >\n      <style>{`\n        @keyframes lc-flow {\n          0%   { background-position:   0% 50%; }\n          100% { background-position: 200% 50%; }\n        }\n        @keyframes lc-mirror {\n          0%   { transform: translateX(-140%) skewX(-18deg); }\n          100% { transform: translateX(260%)  skewX(-18deg); }\n        }\n        .lc-fill {\n          background-image: linear-gradient(\n            100deg,\n            #6b7280 0%, #e8edf5 14%, #9aa6b8 26%, #ffffff 38%,\n            #7b8696 52%, #cdd6e3 64%, #5a6472 78%, #eef2f8 90%, #8b96a6 100%\n          );\n          background-size: 200% 100%;\n          -webkit-background-clip: text;\n          background-clip: text;\n          -webkit-text-fill-color: transparent;\n          color: transparent;\n          animation: lc-flow 6s linear infinite;\n        }\n        @media (prefers-reduced-motion: reduce) {\n          .lc-fill   { animation: none !important; background-position: 40% 50% !important; }\n          .lc-mirror { animation: none !important; transform: translateX(70%) skewX(-18deg) !important; }\n        }\n      `}</style>\n\n      <div className=\"relative\" style={{ perspective: \"700px\" }}>\n        {/* extruded depth copies (behind) */}\n        <div className=\"pointer-events-none absolute inset-0\" aria-hidden=\"true\">\n          {EXTRUDE.map((z, i) => (\n            <span\n              key={`ext-${i}`}\n              className=\"absolute inset-0 select-none whitespace-nowrap text-center text-6xl font-black tracking-tight sm:text-8xl\"\n              style={{\n                transform: `translate(${z}px, ${z}px)`,\n                color: `rgba(15,18,24,${1 - i * 0.07})`,\n              }}\n            >\n              {word}\n            </span>\n          ))}\n        </div>\n\n        {/* chrome flowing face */}\n        <h2\n          className=\"lc-fill relative select-none whitespace-nowrap text-center text-6xl font-black tracking-tight sm:text-8xl\"\n          style={{\n            filter: \"drop-shadow(0 8px 14px rgba(0,0,0,0.55))\",\n          }}\n        >\n          {word}\n        </h2>\n\n        {/* moving mirror band over the text */}\n        <div\n          className=\"pointer-events-none absolute inset-0 overflow-hidden\"\n          style={{\n            WebkitMaskImage:\n              \"linear-gradient(180deg, #000 0%, #000 48%, transparent 100%)\",\n            maskImage:\n              \"linear-gradient(180deg, #000 0%, #000 48%, transparent 100%)\",\n          }}\n        >\n          <div\n            className=\"lc-mirror absolute inset-y-0 left-0 w-1/4\"\n            style={{\n              background:\n                \"linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%)\",\n              mixBlendMode: \"overlay\",\n              animation: \"lc-mirror 3.8s ease-in-out infinite\",\n            }}\n          />\n        </div>\n      </div>\n\n      <p className=\"text-xs font-semibold uppercase tracking-[0.4em] text-slate-300/55\">\n        {sub}\n      </p>\n    </section>\n  );\n}\n\nconst EXTRUDE = [2, 4, 6, 8, 10, 12, 14];\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"relative flex w-full flex-col items-center justify-center gap-8 overflow-hidden rounded-[28px] px-6 py-24\" style=\"background:radial-gradient(120% 100% at 50% 0%, #1b1f29 0%, #0d0f15 60%, #050609 100%)\">\n      <style>\n        @keyframes lc-flow {\n              0%   { background-position:   0% 50%; }\n              100% { background-position: 200% 50%; }\n            }\n            @keyframes lc-mirror {\n              0%   { transform: translateX(-140%) skewX(-18deg); }\n              100% { transform: translateX(260%)  skewX(-18deg); }\n            }\n            .lc-fill {\n              background-image: linear-gradient(\n                100deg,\n                #6b7280 0%, #e8edf5 14%, #9aa6b8 26%, #ffffff 38%,\n                #7b8696 52%, #cdd6e3 64%, #5a6472 78%, #eef2f8 90%, #8b96a6 100%\n              );\n              background-size: 200% 100%;\n              -webkit-background-clip: text;\n              background-clip: text;\n              -webkit-text-fill-color: transparent;\n              color: transparent;\n              animation: lc-flow 6s linear infinite;\n            }\n            @media (prefers-reduced-motion: reduce) {\n              .lc-fill   { animation: none !important; background-position: 40% 50% !important; }\n              .lc-mirror { animation: none !important; transform: translateX(70%) skewX(-18deg) !important; }\n            }\n      </style>\n      <div class=\"relative\" style=\"perspective:700px\">\n        <div class=\"pointer-events-none absolute inset-0\" aria-hidden=\"true\">\n          <span class=\"absolute inset-0 select-none whitespace-nowrap text-center text-6xl font-black tracking-tight sm:text-8xl\" style=\"transform:translate(2px, 2px);color:rgba(15,18,24,1)\">\n            クローム\n          </span>\n          <span class=\"absolute inset-0 select-none whitespace-nowrap text-center text-6xl font-black tracking-tight sm:text-8xl\" style=\"transform:translate(4px, 4px);color:rgba(15,18,24,0.9299999999999999)\">\n            クローム\n          </span>\n          <span class=\"absolute inset-0 select-none whitespace-nowrap text-center text-6xl font-black tracking-tight sm:text-8xl\" style=\"transform:translate(6px, 6px);color:rgba(15,18,24,0.86)\">\n            クローム\n          </span>\n          <span class=\"absolute inset-0 select-none whitespace-nowrap text-center text-6xl font-black tracking-tight sm:text-8xl\" style=\"transform:translate(8px, 8px);color:rgba(15,18,24,0.79)\">\n            クローム\n          </span>\n          <span class=\"absolute inset-0 select-none whitespace-nowrap text-center text-6xl font-black tracking-tight sm:text-8xl\" style=\"transform:translate(10px, 10px);color:rgba(15,18,24,0.72)\">\n            クローム\n          </span>\n          <span class=\"absolute inset-0 select-none whitespace-nowrap text-center text-6xl font-black tracking-tight sm:text-8xl\" style=\"transform:translate(12px, 12px);color:rgba(15,18,24,0.6499999999999999)\">\n            クローム\n          </span>\n          <span class=\"absolute inset-0 select-none whitespace-nowrap text-center text-6xl font-black tracking-tight sm:text-8xl\" style=\"transform:translate(14px, 14px);color:rgba(15,18,24,0.58)\">\n            クローム\n          </span>\n        </div>\n        <h2 class=\"lc-fill relative select-none whitespace-nowrap text-center text-6xl font-black tracking-tight sm:text-8xl\" style=\"filter:drop-shadow(0 8px 14px rgba(0,0,0,0.55))\">\n          クローム\n        </h2>\n        <div class=\"pointer-events-none absolute inset-0 overflow-hidden\" style=\"-webkit-mask-image:linear-gradient(180deg, #000 0%, #000 48%, transparent 100%);mask-image:linear-gradient(180deg, #000 0%, #000 48%, transparent 100%)\">\n          <div class=\"lc-mirror absolute inset-y-0 left-0 w-1/4\" style=\"background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%);mix-blend-mode:overlay;animation:lc-mirror 3.8s ease-in-out infinite\">\n          </div>\n        </div>\n      </div>\n      <p class=\"text-xs font-semibold uppercase tracking-[0.4em] text-slate-300/55\">\n        液体金属の、動くきらめき\n      </p>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"relative flex w-full flex-col items-center justify-center gap-8 overflow-hidden rounded-[28px] px-6 py-24\" style=\"background:radial-gradient(120% 100% at 50% 0%, #1b1f29 0%, #0d0f15 60%, #050609 100%)\">\n      <style>\n        @keyframes lc-flow {\n              0%   { background-position:   0% 50%; }\n              100% { background-position: 200% 50%; }\n            }\n            @keyframes lc-mirror {\n              0%   { transform: translateX(-140%) skewX(-18deg); }\n              100% { transform: translateX(260%)  skewX(-18deg); }\n            }\n            .lc-fill {\n              background-image: linear-gradient(\n                100deg,\n                #6b7280 0%, #e8edf5 14%, #9aa6b8 26%, #ffffff 38%,\n                #7b8696 52%, #cdd6e3 64%, #5a6472 78%, #eef2f8 90%, #8b96a6 100%\n              );\n              background-size: 200% 100%;\n              -webkit-background-clip: text;\n              background-clip: text;\n              -webkit-text-fill-color: transparent;\n              color: transparent;\n              animation: lc-flow 6s linear infinite;\n            }\n            @media (prefers-reduced-motion: reduce) {\n              .lc-fill   { animation: none !important; background-position: 40% 50% !important; }\n              .lc-mirror { animation: none !important; transform: translateX(70%) skewX(-18deg) !important; }\n            }\n      </style>\n      <div class=\"relative\" style=\"perspective:700px\">\n        <div class=\"pointer-events-none absolute inset-0\" aria-hidden=\"true\">\n          <span class=\"absolute inset-0 select-none whitespace-nowrap text-center text-6xl font-black tracking-tight sm:text-8xl\" style=\"transform:translate(2px, 2px);color:rgba(15,18,24,1)\">\n            クローム\n          </span>\n          <span class=\"absolute inset-0 select-none whitespace-nowrap text-center text-6xl font-black tracking-tight sm:text-8xl\" style=\"transform:translate(4px, 4px);color:rgba(15,18,24,0.9299999999999999)\">\n            クローム\n          </span>\n          <span class=\"absolute inset-0 select-none whitespace-nowrap text-center text-6xl font-black tracking-tight sm:text-8xl\" style=\"transform:translate(6px, 6px);color:rgba(15,18,24,0.86)\">\n            クローム\n          </span>\n          <span class=\"absolute inset-0 select-none whitespace-nowrap text-center text-6xl font-black tracking-tight sm:text-8xl\" style=\"transform:translate(8px, 8px);color:rgba(15,18,24,0.79)\">\n            クローム\n          </span>\n          <span class=\"absolute inset-0 select-none whitespace-nowrap text-center text-6xl font-black tracking-tight sm:text-8xl\" style=\"transform:translate(10px, 10px);color:rgba(15,18,24,0.72)\">\n            クローム\n          </span>\n          <span class=\"absolute inset-0 select-none whitespace-nowrap text-center text-6xl font-black tracking-tight sm:text-8xl\" style=\"transform:translate(12px, 12px);color:rgba(15,18,24,0.6499999999999999)\">\n            クローム\n          </span>\n          <span class=\"absolute inset-0 select-none whitespace-nowrap text-center text-6xl font-black tracking-tight sm:text-8xl\" style=\"transform:translate(14px, 14px);color:rgba(15,18,24,0.58)\">\n            クローム\n          </span>\n        </div>\n        <h2 class=\"lc-fill relative select-none whitespace-nowrap text-center text-6xl font-black tracking-tight sm:text-8xl\" style=\"filter:drop-shadow(0 8px 14px rgba(0,0,0,0.55))\">\n          クローム\n        </h2>\n        <div class=\"pointer-events-none absolute inset-0 overflow-hidden\" style=\"-webkit-mask-image:linear-gradient(180deg, #000 0%, #000 48%, transparent 100%);mask-image:linear-gradient(180deg, #000 0%, #000 48%, transparent 100%)\">\n          <div class=\"lc-mirror absolute inset-y-0 left-0 w-1/4\" style=\"background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%);mix-blend-mode:overlay;animation:lc-mirror 3.8s ease-in-out infinite\">\n          </div>\n        </div>\n      </div>\n      <p class=\"text-xs font-semibold uppercase tracking-[0.4em] text-slate-300/55\">\n        液体金属の、動くきらめき\n      </p>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "mat3d-gloss-urushi-lacquer-hero",
@@ -1028,7 +1028,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\nimport { Sparkles } from \"lucide-react\";\n\nexport const meta: DemoMeta = {\n  name: \"漆 ラッカーヒーロー\",\n  category: \"3Dアニメ\",\n  description:\n    \"深い漆黒の漆面に金箔のアクセント。白いスペキュラ帯がゆっくり横切る和の高級ヒーロー。\",\n  align: \"full\",\n  isNew: true,\n  level: \"advanced\",\n  tags: [\"3d\", \"gloss\", \"materials\", \"animation\"],\n  principle:\n    \"鏡面のツヤと金の艶めきは“手間をかけた本物＝高級”を一瞬で伝え、価格を正当化する。\",\n};\n\nexport default function UrushiLacquerHero() {\n  const en =\n    typeof document !== \"undefined\" && document.documentElement.lang === \"en\";\n\n  return (\n    <section\n      className=\"relative w-full overflow-hidden rounded-[28px] px-8 py-20 sm:px-14 sm:py-28\"\n      style={{\n        background:\n          \"radial-gradient(140% 120% at 22% 0%, #25140f 0%, #120705 46%, #050202 100%)\",\n      }}\n    >\n      <style>{`\n        @keyframes urushi-sweep {\n          0%   { transform: translateX(-60%) rotate(14deg); opacity: 0; }\n          12%  { opacity: 0.9; }\n          50%  { opacity: 0.9; }\n          88%  { opacity: 0; }\n          100% { transform: translateX(160%) rotate(14deg); opacity: 0; }\n        }\n        @keyframes urushi-gold {\n          0%,100% { opacity: 0.55; }\n          50%     { opacity: 1; }\n        }\n        @media (prefers-reduced-motion: reduce) {\n          .urushi-sweep { animation: none !important; opacity: 0.5 !important; transform: translateX(48%) rotate(14deg) !important; }\n          .urushi-gold  { animation: none !important; opacity: 0.9 !important; }\n        }\n      `}</style>\n\n      {/* lacquer depth sheen */}\n      <div\n        className=\"pointer-events-none absolute inset-0\"\n        style={{\n          background:\n            \"radial-gradient(80% 60% at 70% 110%, rgba(120,30,18,0.45) 0%, rgba(0,0,0,0) 60%)\",\n        }}\n      />\n\n      {/* gold-leaf flecks */}\n      <div className=\"pointer-events-none absolute inset-0\">\n        {GOLD_FLECKS.map((f, i) => (\n          <span\n            key={`fleck-${i}`}\n            className=\"urushi-gold absolute rounded-[2px]\"\n            style={{\n              left: `${f.x}%`,\n              top: `${f.y}%`,\n              width: f.s,\n              height: f.s * 0.7,\n              transform: `rotate(${f.r}deg)`,\n              background:\n                \"linear-gradient(135deg, #fff3c4 0%, #e8b84b 45%, #b3801f 100%)\",\n              boxShadow: \"0 0 6px rgba(232,184,75,0.6)\",\n              animation: `urushi-gold ${f.d}s ease-in-out ${f.delay}s infinite`,\n            }}\n          />\n        ))}\n      </div>\n\n      {/* moving white specular band */}\n      <div\n        className=\"urushi-sweep pointer-events-none absolute -inset-y-10 left-0 w-2/5\"\n        style={{\n          background:\n            \"linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.16) 38%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.16) 62%, rgba(255,255,255,0) 100%)\",\n          mixBlendMode: \"screen\",\n          filter: \"blur(2px)\",\n          animation: \"urushi-sweep 7s ease-in-out infinite\",\n        }}\n      />\n\n      <div className=\"relative z-10 mx-auto max-w-3xl\">\n        <span\n          className=\"mb-6 inline-flex items-center gap-2 rounded-full border border-amber-300/30 bg-amber-300/5 px-4 py-1.5 text-[11px] font-semibold uppercase tracking-[0.32em] text-amber-200/90\"\n          style={{ textShadow: \"0 1px 8px rgba(232,184,75,0.4)\" }}\n        >\n          <Sparkles className=\"h-3.5 w-3.5\" strokeWidth={2.2} />\n          {en ? \"Maki-e Edition\" : \"蒔絵 限定\"}\n        </span>\n\n        <h1\n          className=\"text-4xl font-black leading-[1.05] tracking-tight text-amber-50 sm:text-6xl\"\n          style={{\n            textShadow:\n              \"0 1px 0 rgba(255,255,255,0.18), 0 18px 40px rgba(0,0,0,0.6)\",\n          }}\n        >\n          {en ? (\n            <>\n              The depth of{\" \"}\n              <span\n                style={{\n                  background:\n                    \"linear-gradient(100deg, #ffe7a6 0%, #e8b84b 40%, #fff3c4 70%, #c8902a 100%)\",\n                  WebkitBackgroundClip: \"text\",\n                  backgroundClip: \"text\",\n                  WebkitTextFillColor: \"transparent\",\n                }}\n              >\n                black lacquer\n              </span>\n            </>\n          ) : (\n            <>\n              漆黒に宿る\n              <span\n                style={{\n                  background:\n                    \"linear-gradient(100deg, #ffe7a6 0%, #e8b84b 40%, #fff3c4 70%, #c8902a 100%)\",\n                  WebkitBackgroundClip: \"text\",\n                  backgroundClip: \"text\",\n                  WebkitTextFillColor: \"transparent\",\n                }}\n              >\n                黄金の艶\n              </span>\n            </>\n          )}\n        </h1>\n\n        <p className=\"mt-6 max-w-xl text-base leading-relaxed text-amber-100/55 sm:text-lg\">\n          {en\n            ? \"Hand-burnished over many coats, the surface holds light like still water — a luster only time and craft can give.\"\n            : \"幾度も塗り重ね、丹念に磨き上げた面は、静かな水のように光を湛える。時と技だけが生む、本物の艶。\"}\n        </p>\n\n        <div className=\"mt-9 flex flex-wrap items-center gap-4\">\n          <span\n            className=\"rounded-full px-7 py-3 text-sm font-bold text-[#1a0d06]\"\n            style={{\n              background:\n                \"linear-gradient(135deg, #fff3c4 0%, #e8b84b 50%, #c8902a 100%)\",\n              boxShadow:\n                \"0 10px 30px rgba(200,144,42,0.4), inset 0 1px 0 rgba(255,255,255,0.7)\",\n            }}\n          >\n            {en ? \"Discover the craft\" : \"技を知る\"}\n          </span>\n          <span className=\"text-xs uppercase tracking-[0.3em] text-amber-200/45\">\n            {en ? \"Kyoto · Since 1789\" : \"京都 · 寛政元年創業\"}\n          </span>\n        </div>\n      </div>\n    </section>\n  );\n}\n\nconst GOLD_FLECKS: {\n  x: number;\n  y: number;\n  s: number;\n  r: number;\n  d: number;\n  delay: number;\n}[] = [\n  { x: 10, y: 22, s: 7, r: 18, d: 3.2, delay: 0 },\n  { x: 26, y: 70, s: 5, r: -32, d: 4.1, delay: 0.6 },\n  { x: 78, y: 30, s: 9, r: 44, d: 3.6, delay: 1.1 },\n  { x: 88, y: 64, s: 6, r: -12, d: 4.4, delay: 0.3 },\n  { x: 62, y: 14, s: 4, r: 70, d: 2.9, delay: 1.4 },\n  { x: 44, y: 84, s: 8, r: -50, d: 3.9, delay: 0.9 },\n  { x: 70, y: 88, s: 5, r: 24, d: 4.2, delay: 1.7 },\n  { x: 16, y: 50, s: 6, r: -8, d: 3.4, delay: 2.0 },\n];\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"relative w-full overflow-hidden rounded-[28px] px-8 py-20 sm:px-14 sm:py-28\" style=\"background:radial-gradient(140% 120% at 22% 0%, #25140f 0%, #120705 46%, #050202 100%)\">\n      <style>\n        @keyframes urushi-sweep {\n              0%   { transform: translateX(-60%) rotate(14deg); opacity: 0; }\n              12%  { opacity: 0.9; }\n              50%  { opacity: 0.9; }\n              88%  { opacity: 0; }\n              100% { transform: translateX(160%) rotate(14deg); opacity: 0; }\n            }\n            @keyframes urushi-gold {\n              0%,100% { opacity: 0.55; }\n              50%     { opacity: 1; }\n            }\n            @media (prefers-reduced-motion: reduce) {\n              .urushi-sweep { animation: none !important; opacity: 0.5 !important; transform: translateX(48%) rotate(14deg) !important; }\n              .urushi-gold  { animation: none !important; opacity: 0.9 !important; }\n            }\n      </style>\n      <div class=\"pointer-events-none absolute inset-0\" style=\"background:radial-gradient(80% 60% at 70% 110%, rgba(120,30,18,0.45) 0%, rgba(0,0,0,0) 60%)\">\n      </div>\n      <div class=\"pointer-events-none absolute inset-0\">\n        <span class=\"urushi-gold absolute rounded-[2px]\" style=\"left:10%;top:22%;width:7px;height:4.8999999999999995px;transform:rotate(18deg);background:linear-gradient(135deg, #fff3c4 0%, #e8b84b 45%, #b3801f 100%);box-shadow:0 0 6px rgba(232,184,75,0.6);animation:urushi-gold 3.2s ease-in-out 0s infinite\">\n        </span>\n        <span class=\"urushi-gold absolute rounded-[2px]\" style=\"left:26%;top:70%;width:5px;height:3.5px;transform:rotate(-32deg);background:linear-gradient(135deg, #fff3c4 0%, #e8b84b 45%, #b3801f 100%);box-shadow:0 0 6px rgba(232,184,75,0.6);animation:urushi-gold 4.1s ease-in-out 0.6s infinite\">\n        </span>\n        <span class=\"urushi-gold absolute rounded-[2px]\" style=\"left:78%;top:30%;width:9px;height:6.3px;transform:rotate(44deg);background:linear-gradient(135deg, #fff3c4 0%, #e8b84b 45%, #b3801f 100%);box-shadow:0 0 6px rgba(232,184,75,0.6);animation:urushi-gold 3.6s ease-in-out 1.1s infinite\">\n        </span>\n        <span class=\"urushi-gold absolute rounded-[2px]\" style=\"left:88%;top:64%;width:6px;height:4.199999999999999px;transform:rotate(-12deg);background:linear-gradient(135deg, #fff3c4 0%, #e8b84b 45%, #b3801f 100%);box-shadow:0 0 6px rgba(232,184,75,0.6);animation:urushi-gold 4.4s ease-in-out 0.3s infinite\">\n        </span>\n        <span class=\"urushi-gold absolute rounded-[2px]\" style=\"left:62%;top:14%;width:4px;height:2.8px;transform:rotate(70deg);background:linear-gradient(135deg, #fff3c4 0%, #e8b84b 45%, #b3801f 100%);box-shadow:0 0 6px rgba(232,184,75,0.6);animation:urushi-gold 2.9s ease-in-out 1.4s infinite\">\n        </span>\n        <span class=\"urushi-gold absolute rounded-[2px]\" style=\"left:44%;top:84%;width:8px;height:5.6px;transform:rotate(-50deg);background:linear-gradient(135deg, #fff3c4 0%, #e8b84b 45%, #b3801f 100%);box-shadow:0 0 6px rgba(232,184,75,0.6);animation:urushi-gold 3.9s ease-in-out 0.9s infinite\">\n        </span>\n        <span class=\"urushi-gold absolute rounded-[2px]\" style=\"left:70%;top:88%;width:5px;height:3.5px;transform:rotate(24deg);background:linear-gradient(135deg, #fff3c4 0%, #e8b84b 45%, #b3801f 100%);box-shadow:0 0 6px rgba(232,184,75,0.6);animation:urushi-gold 4.2s ease-in-out 1.7s infinite\">\n        </span>\n        <span class=\"urushi-gold absolute rounded-[2px]\" style=\"left:16%;top:50%;width:6px;height:4.199999999999999px;transform:rotate(-8deg);background:linear-gradient(135deg, #fff3c4 0%, #e8b84b 45%, #b3801f 100%);box-shadow:0 0 6px rgba(232,184,75,0.6);animation:urushi-gold 3.4s ease-in-out 2s infinite\">\n        </span>\n      </div>\n      <div class=\"urushi-sweep pointer-events-none absolute -inset-y-10 left-0 w-2/5\" style=\"background:linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.16) 38%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.16) 62%, rgba(255,255,255,0) 100%);mix-blend-mode:screen;filter:blur(2px);animation:urushi-sweep 7s ease-in-out infinite\">\n      </div>\n      <div class=\"relative z-10 mx-auto max-w-3xl\">\n        <span class=\"mb-6 inline-flex items-center gap-2 rounded-full border border-amber-300/30 bg-amber-300/5 px-4 py-1.5 text-[11px] font-semibold uppercase tracking-[0.32em] text-amber-200/90\" style=\"text-shadow:0 1px 8px rgba(232,184,75,0.4)\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles h-3.5 w-3.5\">\n            <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n            </path>\n            <path d=\"M20 3v4\">\n            </path>\n            <path d=\"M22 5h-4\">\n            </path>\n            <path d=\"M4 17v2\">\n            </path>\n            <path d=\"M5 18H3\">\n            </path>\n          </svg>\n          蒔絵 限定\n        </span>\n        <h1 class=\"text-4xl font-black leading-[1.05] tracking-tight text-amber-50 sm:text-6xl\" style=\"text-shadow:0 1px 0 rgba(255,255,255,0.18), 0 18px 40px rgba(0,0,0,0.6)\">\n          漆黒に宿る\n          <span style=\"background:linear-gradient(100deg, #ffe7a6 0%, #e8b84b 40%, #fff3c4 70%, #c8902a 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent\">\n            黄金の艶\n          </span>\n        </h1>\n        <p class=\"mt-6 max-w-xl text-base leading-relaxed text-amber-100/55 sm:text-lg\">\n          幾度も塗り重ね、丹念に磨き上げた面は、静かな水のように光を湛える。時と技だけが生む、本物の艶。\n        </p>\n        <div class=\"mt-9 flex flex-wrap items-center gap-4\">\n          <span class=\"rounded-full px-7 py-3 text-sm font-bold text-[#1a0d06]\" style=\"background:linear-gradient(135deg, #fff3c4 0%, #e8b84b 50%, #c8902a 100%);box-shadow:0 10px 30px rgba(200,144,42,0.4), inset 0 1px 0 rgba(255,255,255,0.7)\">\n            技を知る\n          </span>\n          <span class=\"text-xs uppercase tracking-[0.3em] text-amber-200/45\">\n            京都 · 寛政元年創業\n          </span>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"relative w-full overflow-hidden rounded-[28px] px-8 py-20 sm:px-14 sm:py-28\" style=\"background:radial-gradient(140% 120% at 22% 0%, #25140f 0%, #120705 46%, #050202 100%)\">\n      <style>\n        @keyframes urushi-sweep {\n              0%   { transform: translateX(-60%) rotate(14deg); opacity: 0; }\n              12%  { opacity: 0.9; }\n              50%  { opacity: 0.9; }\n              88%  { opacity: 0; }\n              100% { transform: translateX(160%) rotate(14deg); opacity: 0; }\n            }\n            @keyframes urushi-gold {\n              0%,100% { opacity: 0.55; }\n              50%     { opacity: 1; }\n            }\n            @media (prefers-reduced-motion: reduce) {\n              .urushi-sweep { animation: none !important; opacity: 0.5 !important; transform: translateX(48%) rotate(14deg) !important; }\n              .urushi-gold  { animation: none !important; opacity: 0.9 !important; }\n            }\n      </style>\n      <div class=\"pointer-events-none absolute inset-0\" style=\"background:radial-gradient(80% 60% at 70% 110%, rgba(120,30,18,0.45) 0%, rgba(0,0,0,0) 60%)\">\n      </div>\n      <div class=\"pointer-events-none absolute inset-0\">\n        <span class=\"urushi-gold absolute rounded-[2px]\" style=\"left:10%;top:22%;width:7px;height:4.8999999999999995px;transform:rotate(18deg);background:linear-gradient(135deg, #fff3c4 0%, #e8b84b 45%, #b3801f 100%);box-shadow:0 0 6px rgba(232,184,75,0.6);animation:urushi-gold 3.2s ease-in-out 0s infinite\">\n        </span>\n        <span class=\"urushi-gold absolute rounded-[2px]\" style=\"left:26%;top:70%;width:5px;height:3.5px;transform:rotate(-32deg);background:linear-gradient(135deg, #fff3c4 0%, #e8b84b 45%, #b3801f 100%);box-shadow:0 0 6px rgba(232,184,75,0.6);animation:urushi-gold 4.1s ease-in-out 0.6s infinite\">\n        </span>\n        <span class=\"urushi-gold absolute rounded-[2px]\" style=\"left:78%;top:30%;width:9px;height:6.3px;transform:rotate(44deg);background:linear-gradient(135deg, #fff3c4 0%, #e8b84b 45%, #b3801f 100%);box-shadow:0 0 6px rgba(232,184,75,0.6);animation:urushi-gold 3.6s ease-in-out 1.1s infinite\">\n        </span>\n        <span class=\"urushi-gold absolute rounded-[2px]\" style=\"left:88%;top:64%;width:6px;height:4.199999999999999px;transform:rotate(-12deg);background:linear-gradient(135deg, #fff3c4 0%, #e8b84b 45%, #b3801f 100%);box-shadow:0 0 6px rgba(232,184,75,0.6);animation:urushi-gold 4.4s ease-in-out 0.3s infinite\">\n        </span>\n        <span class=\"urushi-gold absolute rounded-[2px]\" style=\"left:62%;top:14%;width:4px;height:2.8px;transform:rotate(70deg);background:linear-gradient(135deg, #fff3c4 0%, #e8b84b 45%, #b3801f 100%);box-shadow:0 0 6px rgba(232,184,75,0.6);animation:urushi-gold 2.9s ease-in-out 1.4s infinite\">\n        </span>\n        <span class=\"urushi-gold absolute rounded-[2px]\" style=\"left:44%;top:84%;width:8px;height:5.6px;transform:rotate(-50deg);background:linear-gradient(135deg, #fff3c4 0%, #e8b84b 45%, #b3801f 100%);box-shadow:0 0 6px rgba(232,184,75,0.6);animation:urushi-gold 3.9s ease-in-out 0.9s infinite\">\n        </span>\n        <span class=\"urushi-gold absolute rounded-[2px]\" style=\"left:70%;top:88%;width:5px;height:3.5px;transform:rotate(24deg);background:linear-gradient(135deg, #fff3c4 0%, #e8b84b 45%, #b3801f 100%);box-shadow:0 0 6px rgba(232,184,75,0.6);animation:urushi-gold 4.2s ease-in-out 1.7s infinite\">\n        </span>\n        <span class=\"urushi-gold absolute rounded-[2px]\" style=\"left:16%;top:50%;width:6px;height:4.199999999999999px;transform:rotate(-8deg);background:linear-gradient(135deg, #fff3c4 0%, #e8b84b 45%, #b3801f 100%);box-shadow:0 0 6px rgba(232,184,75,0.6);animation:urushi-gold 3.4s ease-in-out 2s infinite\">\n        </span>\n      </div>\n      <div class=\"urushi-sweep pointer-events-none absolute -inset-y-10 left-0 w-2/5\" style=\"background:linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.16) 38%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.16) 62%, rgba(255,255,255,0) 100%);mix-blend-mode:screen;filter:blur(2px);animation:urushi-sweep 7s ease-in-out infinite\">\n      </div>\n      <div class=\"relative z-10 mx-auto max-w-3xl\">\n        <span class=\"mb-6 inline-flex items-center gap-2 rounded-full border border-amber-300/30 bg-amber-300/5 px-4 py-1.5 text-[11px] font-semibold uppercase tracking-[0.32em] text-amber-200/90\" style=\"text-shadow:0 1px 8px rgba(232,184,75,0.4)\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles h-3.5 w-3.5\">\n            <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n            </path>\n            <path d=\"M20 3v4\">\n            </path>\n            <path d=\"M22 5h-4\">\n            </path>\n            <path d=\"M4 17v2\">\n            </path>\n            <path d=\"M5 18H3\">\n            </path>\n          </svg>\n          蒔絵 限定\n        </span>\n        <h1 class=\"text-4xl font-black leading-[1.05] tracking-tight text-amber-50 sm:text-6xl\" style=\"text-shadow:0 1px 0 rgba(255,255,255,0.18), 0 18px 40px rgba(0,0,0,0.6)\">\n          漆黒に宿る\n          <span style=\"background:linear-gradient(100deg, #ffe7a6 0%, #e8b84b 40%, #fff3c4 70%, #c8902a 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent\">\n            黄金の艶\n          </span>\n        </h1>\n        <p class=\"mt-6 max-w-xl text-base leading-relaxed text-amber-100/55 sm:text-lg\">\n          幾度も塗り重ね、丹念に磨き上げた面は、静かな水のように光を湛える。時と技だけが生む、本物の艶。\n        </p>\n        <div class=\"mt-9 flex flex-wrap items-center gap-4\">\n          <span class=\"rounded-full px-7 py-3 text-sm font-bold text-[#1a0d06]\" style=\"background:linear-gradient(135deg, #fff3c4 0%, #e8b84b 50%, #c8902a 100%);box-shadow:0 10px 30px rgba(200,144,42,0.4), inset 0 1px 0 rgba(255,255,255,0.7)\">\n            技を知る\n          </span>\n          <span class=\"text-xs uppercase tracking-[0.3em] text-amber-200/45\">\n            京都 · 寛政元年創業\n          </span>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "mat3d-gloss-wet-glass-product",
@@ -1043,7 +1043,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\nimport { Droplets } from \"lucide-react\";\n\nexport const meta: DemoMeta = {\n  name: \"ウェットグラス プロダクト\",\n  category: \"3Dアニメ\",\n  description:\n    \"濡れたガラス層の下に置いた製品カード。ぼかしたハイライトが反射のように滑り、水滴がきらめく。\",\n  align: \"center\",\n  isNew: true,\n  level: \"advanced\",\n  tags: [\"3d\", \"gloss\", \"materials\", \"animation\"],\n  principle:\n    \"水濡れのような艶は鮮度・清潔・上質の連想を呼び、触れたくなる衝動（タッチ欲求）を高める。\",\n};\n\nexport default function WetGlassProduct() {\n  const en =\n    typeof document !== \"undefined\" && document.documentElement.lang === \"en\";\n\n  return (\n    <div className=\"flex w-full flex-col items-center gap-5 py-6\">\n      <style>{`\n        @keyframes wg-glide {\n          0%   { transform: translateX(-120%) skewX(-12deg); }\n          100% { transform: translateX(220%) skewX(-12deg); }\n        }\n        @keyframes wg-drop {\n          0%,100% { opacity: 0.35; transform: scale(0.85); }\n          50%     { opacity: 1;    transform: scale(1.1); }\n        }\n        @media (prefers-reduced-motion: reduce) {\n          .wg-glide { animation: none !important; transform: translateX(60%) skewX(-12deg) !important; }\n          .wg-drop  { animation: none !important; opacity: 0.8 !important; }\n        }\n      `}</style>\n\n      <div\n        className=\"relative w-72 overflow-hidden rounded-[26px]\"\n        style={{\n          background:\n            \"linear-gradient(160deg, #14313a 0%, #0c1f27 55%, #061318 100%)\",\n          boxShadow:\n            \"0 28px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.12)\",\n        }}\n      >\n        {/* product surface */}\n        <div className=\"relative px-7 pb-7 pt-10\">\n          <div\n            className=\"mx-auto mb-6 grid h-36 w-36 place-items-center rounded-3xl\"\n            style={{\n              background:\n                \"radial-gradient(circle at 34% 26%, #5be0c8 0%, #1ea98f 42%, #0c6b58 100%)\",\n              boxShadow:\n                \"inset 0 2px 10px rgba(255,255,255,0.45), inset 0 -10px 20px rgba(0,0,0,0.35), 0 12px 26px rgba(0,0,0,0.4)\",\n            }}\n          >\n            <span\n              className=\"text-5xl font-black text-emerald-950/80\"\n              style={{ textShadow: \"0 1px 0 rgba(255,255,255,0.4)\" }}\n            >\n              {en ? \"AQ\" : \"潤\"}\n            </span>\n          </div>\n\n          <h3 className=\"text-center text-lg font-bold text-cyan-50\">\n            {en ? \"Aqua Serum\" : \"アクア セラム\"}\n          </h3>\n          <p className=\"mt-1 text-center text-xs text-cyan-100/55\">\n            {en ? \"Deep hydration · 30ml\" : \"ディープ保湿 · 30ml\"}\n          </p>\n\n          {/* clipped reflection of the product */}\n          <div\n            className=\"pointer-events-none absolute inset-x-7 bottom-0 h-10 overflow-hidden opacity-25\"\n            style={{\n              transform: \"scaleY(-1)\",\n              maskImage: \"linear-gradient(to bottom, #000 0%, transparent 90%)\",\n              WebkitMaskImage:\n                \"linear-gradient(to bottom, #000 0%, transparent 90%)\",\n            }}\n          >\n            <div\n              className=\"mx-auto h-36 w-36 rounded-3xl\"\n              style={{\n                background:\n                  \"radial-gradient(circle at 34% 26%, #5be0c8 0%, #1ea98f 60%, #0c6b58 100%)\",\n              }}\n            />\n          </div>\n        </div>\n\n        {/* droplet sparkles */}\n        {DROPS.map((d, i) => (\n          <span\n            key={`drop-${i}`}\n            className=\"wg-drop pointer-events-none absolute rounded-full\"\n            style={{\n              left: `${d.x}%`,\n              top: `${d.y}%`,\n              width: d.s,\n              height: d.s,\n              background:\n                \"radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95) 0%, rgba(180,230,240,0.5) 45%, rgba(255,255,255,0) 72%)\",\n              boxShadow:\n                \"inset 0 -1px 2px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.25)\",\n              animation: `wg-drop ${d.dur}s ease-in-out ${d.delay}s infinite`,\n            }}\n          />\n        ))}\n\n        {/* wet-glass moving highlight */}\n        <div\n          className=\"wg-glide pointer-events-none absolute inset-y-0 left-0 w-1/3\"\n          style={{\n            background:\n              \"linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%)\",\n            filter: \"blur(10px)\",\n            mixBlendMode: \"screen\",\n            animation: \"wg-glide 4.5s ease-in-out infinite\",\n          }}\n        />\n\n        {/* top glaze */}\n        <div\n          className=\"pointer-events-none absolute inset-0\"\n          style={{\n            background:\n              \"linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 30%)\",\n          }}\n        />\n      </div>\n\n      <p className=\"flex items-center gap-2 text-xs font-medium uppercase tracking-[0.25em] text-cyan-200/60\">\n        <Droplets className=\"h-3.5 w-3.5\" strokeWidth={2.2} />\n        {en ? \"Wet-glass finish\" : \"ウェットグラス仕上げ\"}\n      </p>\n    </div>\n  );\n}\n\nconst DROPS: { x: number; y: number; s: number; dur: number; delay: number }[] =\n  [\n    { x: 18, y: 30, s: 8, dur: 2.6, delay: 0 },\n    { x: 74, y: 24, s: 6, dur: 3.1, delay: 0.5 },\n    { x: 82, y: 58, s: 10, dur: 2.9, delay: 1.0 },\n    { x: 30, y: 66, s: 5, dur: 3.4, delay: 0.7 },\n    { x: 60, y: 78, s: 7, dur: 2.7, delay: 1.3 },\n  ];\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"flex w-full flex-col items-center gap-5 py-6\">\n      <style>\n        @keyframes wg-glide {\n              0%   { transform: translateX(-120%) skewX(-12deg); }\n              100% { transform: translateX(220%) skewX(-12deg); }\n            }\n            @keyframes wg-drop {\n              0%,100% { opacity: 0.35; transform: scale(0.85); }\n              50%     { opacity: 1;    transform: scale(1.1); }\n            }\n            @media (prefers-reduced-motion: reduce) {\n              .wg-glide { animation: none !important; transform: translateX(60%) skewX(-12deg) !important; }\n              .wg-drop  { animation: none !important; opacity: 0.8 !important; }\n            }\n      </style>\n      <div class=\"relative w-72 overflow-hidden rounded-[26px]\" style=\"background:linear-gradient(160deg, #14313a 0%, #0c1f27 55%, #061318 100%);box-shadow:0 28px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.12)\">\n        <div class=\"relative px-7 pb-7 pt-10\">\n          <div class=\"mx-auto mb-6 grid h-36 w-36 place-items-center rounded-3xl\" style=\"background:radial-gradient(circle at 34% 26%, #5be0c8 0%, #1ea98f 42%, #0c6b58 100%);box-shadow:inset 0 2px 10px rgba(255,255,255,0.45), inset 0 -10px 20px rgba(0,0,0,0.35), 0 12px 26px rgba(0,0,0,0.4)\">\n            <span class=\"text-5xl font-black text-emerald-950/80\" style=\"text-shadow:0 1px 0 rgba(255,255,255,0.4)\">\n              潤\n            </span>\n          </div>\n          <h3 class=\"text-center text-lg font-bold text-cyan-50\">\n            アクア セラム\n          </h3>\n          <p class=\"mt-1 text-center text-xs text-cyan-100/55\">\n            ディープ保湿 · 30ml\n          </p>\n          <div class=\"pointer-events-none absolute inset-x-7 bottom-0 h-10 overflow-hidden opacity-25\" style=\"transform:scaleY(-1);mask-image:linear-gradient(to bottom, #000 0%, transparent 90%);-webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 90%)\">\n            <div class=\"mx-auto h-36 w-36 rounded-3xl\" style=\"background:radial-gradient(circle at 34% 26%, #5be0c8 0%, #1ea98f 60%, #0c6b58 100%)\">\n            </div>\n          </div>\n        </div>\n        <span class=\"wg-drop pointer-events-none absolute rounded-full\" style=\"left:18%;top:30%;width:8px;height:8px;background:radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95) 0%, rgba(180,230,240,0.5) 45%, rgba(255,255,255,0) 72%);box-shadow:inset 0 -1px 2px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.25);animation:wg-drop 2.6s ease-in-out 0s infinite\">\n        </span>\n        <span class=\"wg-drop pointer-events-none absolute rounded-full\" style=\"left:74%;top:24%;width:6px;height:6px;background:radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95) 0%, rgba(180,230,240,0.5) 45%, rgba(255,255,255,0) 72%);box-shadow:inset 0 -1px 2px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.25);animation:wg-drop 3.1s ease-in-out 0.5s infinite\">\n        </span>\n        <span class=\"wg-drop pointer-events-none absolute rounded-full\" style=\"left:82%;top:58%;width:10px;height:10px;background:radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95) 0%, rgba(180,230,240,0.5) 45%, rgba(255,255,255,0) 72%);box-shadow:inset 0 -1px 2px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.25);animation:wg-drop 2.9s ease-in-out 1s infinite\">\n        </span>\n        <span class=\"wg-drop pointer-events-none absolute rounded-full\" style=\"left:30%;top:66%;width:5px;height:5px;background:radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95) 0%, rgba(180,230,240,0.5) 45%, rgba(255,255,255,0) 72%);box-shadow:inset 0 -1px 2px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.25);animation:wg-drop 3.4s ease-in-out 0.7s infinite\">\n        </span>\n        <span class=\"wg-drop pointer-events-none absolute rounded-full\" style=\"left:60%;top:78%;width:7px;height:7px;background:radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95) 0%, rgba(180,230,240,0.5) 45%, rgba(255,255,255,0) 72%);box-shadow:inset 0 -1px 2px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.25);animation:wg-drop 2.7s ease-in-out 1.3s infinite\">\n        </span>\n        <div class=\"wg-glide pointer-events-none absolute inset-y-0 left-0 w-1/3\" style=\"background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);filter:blur(10px);mix-blend-mode:screen;animation:wg-glide 4.5s ease-in-out infinite\">\n        </div>\n        <div class=\"pointer-events-none absolute inset-0\" style=\"background:linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 30%)\">\n        </div>\n      </div>\n      <p class=\"flex items-center gap-2 text-xs font-medium uppercase tracking-[0.25em] text-cyan-200/60\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-droplets h-3.5 w-3.5\">\n          <path d=\"M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z\">\n          </path>\n          <path d=\"M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97\">\n          </path>\n        </svg>\n        ウェットグラス仕上げ\n      </p>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"flex w-full flex-col items-center gap-5 py-6\">\n      <style>\n        @keyframes wg-glide {\n              0%   { transform: translateX(-120%) skewX(-12deg); }\n              100% { transform: translateX(220%) skewX(-12deg); }\n            }\n            @keyframes wg-drop {\n              0%,100% { opacity: 0.35; transform: scale(0.85); }\n              50%     { opacity: 1;    transform: scale(1.1); }\n            }\n            @media (prefers-reduced-motion: reduce) {\n              .wg-glide { animation: none !important; transform: translateX(60%) skewX(-12deg) !important; }\n              .wg-drop  { animation: none !important; opacity: 0.8 !important; }\n            }\n      </style>\n      <div class=\"relative w-72 overflow-hidden rounded-[26px]\" style=\"background:linear-gradient(160deg, #14313a 0%, #0c1f27 55%, #061318 100%);box-shadow:0 28px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.12)\">\n        <div class=\"relative px-7 pb-7 pt-10\">\n          <div class=\"mx-auto mb-6 grid h-36 w-36 place-items-center rounded-3xl\" style=\"background:radial-gradient(circle at 34% 26%, #5be0c8 0%, #1ea98f 42%, #0c6b58 100%);box-shadow:inset 0 2px 10px rgba(255,255,255,0.45), inset 0 -10px 20px rgba(0,0,0,0.35), 0 12px 26px rgba(0,0,0,0.4)\">\n            <span class=\"text-5xl font-black text-emerald-950/80\" style=\"text-shadow:0 1px 0 rgba(255,255,255,0.4)\">\n              潤\n            </span>\n          </div>\n          <h3 class=\"text-center text-lg font-bold text-cyan-50\">\n            アクア セラム\n          </h3>\n          <p class=\"mt-1 text-center text-xs text-cyan-100/55\">\n            ディープ保湿 · 30ml\n          </p>\n          <div class=\"pointer-events-none absolute inset-x-7 bottom-0 h-10 overflow-hidden opacity-25\" style=\"transform:scaleY(-1);mask-image:linear-gradient(to bottom, #000 0%, transparent 90%);-webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 90%)\">\n            <div class=\"mx-auto h-36 w-36 rounded-3xl\" style=\"background:radial-gradient(circle at 34% 26%, #5be0c8 0%, #1ea98f 60%, #0c6b58 100%)\">\n            </div>\n          </div>\n        </div>\n        <span class=\"wg-drop pointer-events-none absolute rounded-full\" style=\"left:18%;top:30%;width:8px;height:8px;background:radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95) 0%, rgba(180,230,240,0.5) 45%, rgba(255,255,255,0) 72%);box-shadow:inset 0 -1px 2px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.25);animation:wg-drop 2.6s ease-in-out 0s infinite\">\n        </span>\n        <span class=\"wg-drop pointer-events-none absolute rounded-full\" style=\"left:74%;top:24%;width:6px;height:6px;background:radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95) 0%, rgba(180,230,240,0.5) 45%, rgba(255,255,255,0) 72%);box-shadow:inset 0 -1px 2px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.25);animation:wg-drop 3.1s ease-in-out 0.5s infinite\">\n        </span>\n        <span class=\"wg-drop pointer-events-none absolute rounded-full\" style=\"left:82%;top:58%;width:10px;height:10px;background:radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95) 0%, rgba(180,230,240,0.5) 45%, rgba(255,255,255,0) 72%);box-shadow:inset 0 -1px 2px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.25);animation:wg-drop 2.9s ease-in-out 1s infinite\">\n        </span>\n        <span class=\"wg-drop pointer-events-none absolute rounded-full\" style=\"left:30%;top:66%;width:5px;height:5px;background:radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95) 0%, rgba(180,230,240,0.5) 45%, rgba(255,255,255,0) 72%);box-shadow:inset 0 -1px 2px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.25);animation:wg-drop 3.4s ease-in-out 0.7s infinite\">\n        </span>\n        <span class=\"wg-drop pointer-events-none absolute rounded-full\" style=\"left:60%;top:78%;width:7px;height:7px;background:radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95) 0%, rgba(180,230,240,0.5) 45%, rgba(255,255,255,0) 72%);box-shadow:inset 0 -1px 2px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.25);animation:wg-drop 2.7s ease-in-out 1.3s infinite\">\n        </span>\n        <div class=\"wg-glide pointer-events-none absolute inset-y-0 left-0 w-1/3\" style=\"background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);filter:blur(10px);mix-blend-mode:screen;animation:wg-glide 4.5s ease-in-out infinite\">\n        </div>\n        <div class=\"pointer-events-none absolute inset-0\" style=\"background:linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 30%)\">\n        </div>\n      </div>\n      <p class=\"flex items-center gap-2 text-xs font-medium uppercase tracking-[0.25em] text-cyan-200/60\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-droplets h-3.5 w-3.5\">\n          <path d=\"M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z\">\n          </path>\n          <path d=\"M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97\">\n          </path>\n        </svg>\n        ウェットグラス仕上げ\n      </p>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "memphis-memphis-badge-set",
@@ -1057,7 +1057,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\nimport { Sparkles, Flame, Star, Tag } from \"lucide-react\";\n\nexport const meta: DemoMeta = {\n  name: \"メンフィス・バッジ集\",\n  category: \"メンフィス\",\n  description: \"幾何学バッジ・タグとパターンスウォッチのセット。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"memphis\", \"geometric\", \"80s\"],\n};\n\n/** パターンスウォッチ（背景パターンの見本タイル） */\nfunction Swatch({ children, label }: { children: React.ReactNode; label: string }) {\n  return (\n    <div className=\"flex flex-col items-center gap-1.5\">\n      <div className=\"relative h-16 w-16 overflow-hidden rounded-xl border-[3px] border-black bg-white shadow-[3px_3px_0_0_#000]\">\n        {children}\n      </div>\n      <span className=\"text-[10px] font-black uppercase tracking-wide text-black/60\">{label}</span>\n    </div>\n  );\n}\n\nexport default function MemphisBadgeSet() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <div className=\"w-full max-w-md rounded-2xl border-[3px] border-black bg-[#fdf6e3] p-8 shadow-[7px_7px_0_0_#000]\">\n      {/* バッジ・タグ */}\n      <h3 className=\"mb-4 text-xs font-black uppercase tracking-widest text-black/50\">{en ? \"Badges & Tags\" : \"バッジ & タグ\"}</h3>\n      <div className=\"flex flex-wrap gap-2.5\">\n        <span className=\"inline-flex items-center gap-1 rounded-full border-[3px] border-black bg-[#ff5c8a] px-3 py-1 text-xs font-black uppercase text-white shadow-[2px_2px_0_0_#000]\">\n          <Flame className=\"size-3.5\" strokeWidth={3} />\n          {en ? \"Hot\" : \"話題\"}\n        </span>\n        <span className=\"inline-flex items-center gap-1 -rotate-2 rounded-md border-[3px] border-black bg-[#ffd23f] px-3 py-1 text-xs font-black uppercase shadow-[2px_2px_0_0_#000]\">\n          <Star className=\"size-3.5\" strokeWidth={3} />\n          {en ? \"Pick\" : \"おすすめ\"}\n        </span>\n        <span className=\"inline-flex items-center gap-1 rounded-full border-[3px] border-black bg-[#1fb6c1] px-3 py-1 text-xs font-black uppercase text-white shadow-[2px_2px_0_0_#000]\">\n          <Sparkles className=\"size-3.5\" strokeWidth={3} />\n          {en ? \"New\" : \"新着\"}\n        </span>\n        <span className=\"inline-flex items-center gap-1 rotate-2 rounded-md border-[3px] border-black bg-[#7b5cff] px-3 py-1 text-xs font-black uppercase text-white shadow-[2px_2px_0_0_#000]\">\n          <Tag className=\"size-3.5\" strokeWidth={3} />\n          ¥980\n        </span>\n        <span className=\"inline-flex items-center rounded-full border-[3px] border-black bg-white px-3 py-1 text-xs font-black uppercase text-black shadow-[2px_2px_0_0_#ff8c42]\">\n          {en ? \"Limited\" : \"限定\"}\n        </span>\n      </div>\n\n      {/* ステータスドット */}\n      <div className=\"mt-6 flex flex-wrap items-center gap-3\">\n        {[\n          { c: \"#1fb6c1\", t: \"稼働中\", en: \"Active\" },\n          { c: \"#ffd23f\", t: \"保留\", en: \"Pending\" },\n          { c: \"#ff5c8a\", t: \"停止\", en: \"Down\" },\n        ].map((s) => (\n          <span key={s.en} className=\"inline-flex items-center gap-1.5 text-xs font-bold text-black/70\">\n            <span className=\"size-3 rounded-full border-2 border-black\" style={{ backgroundColor: s.c }} />\n            {en ? s.en : s.t}\n          </span>\n        ))}\n      </div>\n\n      {/* パターンスウォッチセット */}\n      <h3 className=\"mb-4 mt-7 text-xs font-black uppercase tracking-widest text-black/50\">{en ? \"Patterns\" : \"パターン\"}</h3>\n      <div className=\"flex flex-wrap gap-4\">\n        <Swatch label={en ? \"Dots\" : \"ドット\"}>\n          <svg viewBox=\"0 0 64 64\" className=\"h-full w-full\" aria-hidden>\n            {[0, 1, 2, 3].map((r) =>\n              [0, 1, 2, 3].map((c) => (\n                <circle key={`${r}-${c}`} cx={10 + c * 15} cy={10 + r * 15} r={3.5} fill=\"#ff5c8a\" />\n              ))\n            )}\n          </svg>\n        </Swatch>\n        <Swatch label={en ? \"Zigzag\" : \"ジグザグ\"}>\n          <svg viewBox=\"0 0 64 64\" className=\"h-full w-full\" aria-hidden>\n            {[14, 34, 54].map((y) => (\n              <path key={y} d={`M2 ${y}L16 ${y - 10}L30 ${y}L44 ${y - 10}L58 ${y}`} stroke=\"#1fb6c1\" strokeWidth={3} fill=\"none\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n            ))}\n          </svg>\n        </Swatch>\n        <Swatch label={en ? \"Stripes\" : \"ストライプ\"}>\n          <div className=\"flex h-full w-full\">\n            {[\"#7b5cff\", \"#fff\", \"#ffd23f\", \"#fff\", \"#ff8c42\", \"#fff\"].map((c, i) => (\n              <div key={i} className=\"flex-1\" style={{ backgroundColor: c }} />\n            ))}\n          </div>\n        </Swatch>\n        <Swatch label={en ? \"Tris\" : \"トライ\"}>\n          <svg viewBox=\"0 0 64 64\" className=\"h-full w-full\" aria-hidden>\n            {[8, 32, 56].map((x) =>\n              [20, 44].map((y) => (\n                <path key={`${x}-${y}`} d={`M${x} ${y - 8}L${x + 8} ${y + 6}L${x - 8} ${y + 6}Z`} fill=\"#ff8c42\" stroke=\"#000\" strokeWidth={1.5} />\n              ))\n            )}\n          </svg>\n        </Swatch>\n      </div>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"w-full max-w-md rounded-2xl border-[3px] border-black bg-[#fdf6e3] p-8 shadow-[7px_7px_0_0_#000]\">\n      <h3 class=\"mb-4 text-xs font-black uppercase tracking-widest text-black/50\">\n        バッジ &amp; タグ\n      </h3>\n      <div class=\"flex flex-wrap gap-2.5\">\n        <span class=\"inline-flex items-center gap-1 rounded-full border-[3px] border-black bg-[#ff5c8a] px-3 py-1 text-xs font-black uppercase text-white shadow-[2px_2px_0_0_#000]\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-flame size-3.5\">\n            <path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\">\n            </path>\n          </svg>\n          話題\n        </span>\n        <span class=\"inline-flex items-center gap-1 -rotate-2 rounded-md border-[3px] border-black bg-[#ffd23f] px-3 py-1 text-xs font-black uppercase shadow-[2px_2px_0_0_#000]\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5\">\n            <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n            </path>\n          </svg>\n          おすすめ\n        </span>\n        <span class=\"inline-flex items-center gap-1 rounded-full border-[3px] border-black bg-[#1fb6c1] px-3 py-1 text-xs font-black uppercase text-white shadow-[2px_2px_0_0_#000]\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5\">\n            <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n            </path>\n            <path d=\"M20 3v4\">\n            </path>\n            <path d=\"M22 5h-4\">\n            </path>\n            <path d=\"M4 17v2\">\n            </path>\n            <path d=\"M5 18H3\">\n            </path>\n          </svg>\n          新着\n        </span>\n        <span class=\"inline-flex items-center gap-1 rotate-2 rounded-md border-[3px] border-black bg-[#7b5cff] px-3 py-1 text-xs font-black uppercase text-white shadow-[2px_2px_0_0_#000]\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-tag size-3.5\">\n            <path d=\"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z\">\n            </path>\n            <circle cx=\"7.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\">\n            </circle>\n          </svg>\n          ¥980\n        </span>\n        <span class=\"inline-flex items-center rounded-full border-[3px] border-black bg-white px-3 py-1 text-xs font-black uppercase text-black shadow-[2px_2px_0_0_#ff8c42]\">\n          限定\n        </span>\n      </div>\n      <div class=\"mt-6 flex flex-wrap items-center gap-3\">\n        <span class=\"inline-flex items-center gap-1.5 text-xs font-bold text-black/70\">\n          <span class=\"size-3 rounded-full border-2 border-black\" style=\"background-color:#1fb6c1\">\n          </span>\n          稼働中\n        </span>\n        <span class=\"inline-flex items-center gap-1.5 text-xs font-bold text-black/70\">\n          <span class=\"size-3 rounded-full border-2 border-black\" style=\"background-color:#ffd23f\">\n          </span>\n          保留\n        </span>\n        <span class=\"inline-flex items-center gap-1.5 text-xs font-bold text-black/70\">\n          <span class=\"size-3 rounded-full border-2 border-black\" style=\"background-color:#ff5c8a\">\n          </span>\n          停止\n        </span>\n      </div>\n      <h3 class=\"mb-4 mt-7 text-xs font-black uppercase tracking-widest text-black/50\">\n        パターン\n      </h3>\n      <div class=\"flex flex-wrap gap-4\">\n        <div class=\"flex flex-col items-center gap-1.5\">\n          <div class=\"relative h-16 w-16 overflow-hidden rounded-xl border-[3px] border-black bg-white shadow-[3px_3px_0_0_#000]\">\n            <svg viewBox=\"0 0 64 64\" class=\"h-full w-full\" aria-hidden=\"true\">\n              <circle cx=\"10\" cy=\"10\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"25\" cy=\"10\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"40\" cy=\"10\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"55\" cy=\"10\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"10\" cy=\"25\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"25\" cy=\"25\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"40\" cy=\"25\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"55\" cy=\"25\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"10\" cy=\"40\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"25\" cy=\"40\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"40\" cy=\"40\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"55\" cy=\"40\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"10\" cy=\"55\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"25\" cy=\"55\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"40\" cy=\"55\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"55\" cy=\"55\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n            </svg>\n          </div>\n          <span class=\"text-[10px] font-black uppercase tracking-wide text-black/60\">\n            ドット\n          </span>\n        </div>\n        <div class=\"flex flex-col items-center gap-1.5\">\n          <div class=\"relative h-16 w-16 overflow-hidden rounded-xl border-[3px] border-black bg-white shadow-[3px_3px_0_0_#000]\">\n            <svg viewBox=\"0 0 64 64\" class=\"h-full w-full\" aria-hidden=\"true\">\n              <path d=\"M2 14L16 4L30 14L44 4L58 14\" stroke=\"#1fb6c1\" stroke-width=\"3\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              </path>\n              <path d=\"M2 34L16 24L30 34L44 24L58 34\" stroke=\"#1fb6c1\" stroke-width=\"3\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              </path>\n              <path d=\"M2 54L16 44L30 54L44 44L58 54\" stroke=\"#1fb6c1\" stroke-width=\"3\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              </path>\n            </svg>\n          </div>\n          <span class=\"text-[10px] font-black uppercase tracking-wide text-black/60\">\n            ジグザグ\n          </span>\n        </div>\n        <div class=\"flex flex-col items-center gap-1.5\">\n          <div class=\"relative h-16 w-16 overflow-hidden rounded-xl border-[3px] border-black bg-white shadow-[3px_3px_0_0_#000]\">\n            <div class=\"flex h-full w-full\">\n              <div class=\"flex-1\" style=\"background-color:#7b5cff\">\n              </div>\n              <div class=\"flex-1\" style=\"background-color:#fff\">\n              </div>\n              <div class=\"flex-1\" style=\"background-color:#ffd23f\">\n              </div>\n              <div class=\"flex-1\" style=\"background-color:#fff\">\n              </div>\n              <div class=\"flex-1\" style=\"background-color:#ff8c42\">\n              </div>\n              <div class=\"flex-1\" style=\"background-color:#fff\">\n              </div>\n            </div>\n          </div>\n          <span class=\"text-[10px] font-black uppercase tracking-wide text-black/60\">\n            ストライプ\n          </span>\n        </div>\n        <div class=\"flex flex-col items-center gap-1.5\">\n          <div class=\"relative h-16 w-16 overflow-hidden rounded-xl border-[3px] border-black bg-white shadow-[3px_3px_0_0_#000]\">\n            <svg viewBox=\"0 0 64 64\" class=\"h-full w-full\" aria-hidden=\"true\">\n              <path d=\"M8 12L16 26L0 26Z\" fill=\"#ff8c42\" stroke=\"#000\" stroke-width=\"1.5\">\n              </path>\n              <path d=\"M8 36L16 50L0 50Z\" fill=\"#ff8c42\" stroke=\"#000\" stroke-width=\"1.5\">\n              </path>\n              <path d=\"M32 12L40 26L24 26Z\" fill=\"#ff8c42\" stroke=\"#000\" stroke-width=\"1.5\">\n              </path>\n              <path d=\"M32 36L40 50L24 50Z\" fill=\"#ff8c42\" stroke=\"#000\" stroke-width=\"1.5\">\n              </path>\n              <path d=\"M56 12L64 26L48 26Z\" fill=\"#ff8c42\" stroke=\"#000\" stroke-width=\"1.5\">\n              </path>\n              <path d=\"M56 36L64 50L48 50Z\" fill=\"#ff8c42\" stroke=\"#000\" stroke-width=\"1.5\">\n              </path>\n            </svg>\n          </div>\n          <span class=\"text-[10px] font-black uppercase tracking-wide text-black/60\">\n            トライ\n          </span>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"w-full max-w-md rounded-2xl border-[3px] border-black bg-[#fdf6e3] p-8 shadow-[7px_7px_0_0_#000]\">\n      <h3 class=\"mb-4 text-xs font-black uppercase tracking-widest text-black/50\">\n        バッジ &amp; タグ\n      </h3>\n      <div class=\"flex flex-wrap gap-2.5\">\n        <span class=\"inline-flex items-center gap-1 rounded-full border-[3px] border-black bg-[#ff5c8a] px-3 py-1 text-xs font-black uppercase text-white shadow-[2px_2px_0_0_#000]\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-flame size-3.5\">\n            <path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\">\n            </path>\n          </svg>\n          話題\n        </span>\n        <span class=\"inline-flex items-center gap-1 -rotate-2 rounded-md border-[3px] border-black bg-[#ffd23f] px-3 py-1 text-xs font-black uppercase shadow-[2px_2px_0_0_#000]\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3.5\">\n            <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n            </path>\n          </svg>\n          おすすめ\n        </span>\n        <span class=\"inline-flex items-center gap-1 rounded-full border-[3px] border-black bg-[#1fb6c1] px-3 py-1 text-xs font-black uppercase text-white shadow-[2px_2px_0_0_#000]\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5\">\n            <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n            </path>\n            <path d=\"M20 3v4\">\n            </path>\n            <path d=\"M22 5h-4\">\n            </path>\n            <path d=\"M4 17v2\">\n            </path>\n            <path d=\"M5 18H3\">\n            </path>\n          </svg>\n          新着\n        </span>\n        <span class=\"inline-flex items-center gap-1 rotate-2 rounded-md border-[3px] border-black bg-[#7b5cff] px-3 py-1 text-xs font-black uppercase text-white shadow-[2px_2px_0_0_#000]\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-tag size-3.5\">\n            <path d=\"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z\">\n            </path>\n            <circle cx=\"7.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\">\n            </circle>\n          </svg>\n          ¥980\n        </span>\n        <span class=\"inline-flex items-center rounded-full border-[3px] border-black bg-white px-3 py-1 text-xs font-black uppercase text-black shadow-[2px_2px_0_0_#ff8c42]\">\n          限定\n        </span>\n      </div>\n      <div class=\"mt-6 flex flex-wrap items-center gap-3\">\n        <span class=\"inline-flex items-center gap-1.5 text-xs font-bold text-black/70\">\n          <span class=\"size-3 rounded-full border-2 border-black\" style=\"background-color:#1fb6c1\">\n          </span>\n          稼働中\n        </span>\n        <span class=\"inline-flex items-center gap-1.5 text-xs font-bold text-black/70\">\n          <span class=\"size-3 rounded-full border-2 border-black\" style=\"background-color:#ffd23f\">\n          </span>\n          保留\n        </span>\n        <span class=\"inline-flex items-center gap-1.5 text-xs font-bold text-black/70\">\n          <span class=\"size-3 rounded-full border-2 border-black\" style=\"background-color:#ff5c8a\">\n          </span>\n          停止\n        </span>\n      </div>\n      <h3 class=\"mb-4 mt-7 text-xs font-black uppercase tracking-widest text-black/50\">\n        パターン\n      </h3>\n      <div class=\"flex flex-wrap gap-4\">\n        <div class=\"flex flex-col items-center gap-1.5\">\n          <div class=\"relative h-16 w-16 overflow-hidden rounded-xl border-[3px] border-black bg-white shadow-[3px_3px_0_0_#000]\">\n            <svg viewBox=\"0 0 64 64\" class=\"h-full w-full\" aria-hidden=\"true\">\n              <circle cx=\"10\" cy=\"10\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"25\" cy=\"10\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"40\" cy=\"10\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"55\" cy=\"10\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"10\" cy=\"25\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"25\" cy=\"25\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"40\" cy=\"25\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"55\" cy=\"25\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"10\" cy=\"40\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"25\" cy=\"40\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"40\" cy=\"40\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"55\" cy=\"40\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"10\" cy=\"55\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"25\" cy=\"55\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"40\" cy=\"55\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n              <circle cx=\"55\" cy=\"55\" r=\"3.5\" fill=\"#ff5c8a\">\n              </circle>\n            </svg>\n          </div>\n          <span class=\"text-[10px] font-black uppercase tracking-wide text-black/60\">\n            ドット\n          </span>\n        </div>\n        <div class=\"flex flex-col items-center gap-1.5\">\n          <div class=\"relative h-16 w-16 overflow-hidden rounded-xl border-[3px] border-black bg-white shadow-[3px_3px_0_0_#000]\">\n            <svg viewBox=\"0 0 64 64\" class=\"h-full w-full\" aria-hidden=\"true\">\n              <path d=\"M2 14L16 4L30 14L44 4L58 14\" stroke=\"#1fb6c1\" stroke-width=\"3\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              </path>\n              <path d=\"M2 34L16 24L30 34L44 24L58 34\" stroke=\"#1fb6c1\" stroke-width=\"3\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              </path>\n              <path d=\"M2 54L16 44L30 54L44 44L58 54\" stroke=\"#1fb6c1\" stroke-width=\"3\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              </path>\n            </svg>\n          </div>\n          <span class=\"text-[10px] font-black uppercase tracking-wide text-black/60\">\n            ジグザグ\n          </span>\n        </div>\n        <div class=\"flex flex-col items-center gap-1.5\">\n          <div class=\"relative h-16 w-16 overflow-hidden rounded-xl border-[3px] border-black bg-white shadow-[3px_3px_0_0_#000]\">\n            <div class=\"flex h-full w-full\">\n              <div class=\"flex-1\" style=\"background-color:#7b5cff\">\n              </div>\n              <div class=\"flex-1\" style=\"background-color:#fff\">\n              </div>\n              <div class=\"flex-1\" style=\"background-color:#ffd23f\">\n              </div>\n              <div class=\"flex-1\" style=\"background-color:#fff\">\n              </div>\n              <div class=\"flex-1\" style=\"background-color:#ff8c42\">\n              </div>\n              <div class=\"flex-1\" style=\"background-color:#fff\">\n              </div>\n            </div>\n          </div>\n          <span class=\"text-[10px] font-black uppercase tracking-wide text-black/60\">\n            ストライプ\n          </span>\n        </div>\n        <div class=\"flex flex-col items-center gap-1.5\">\n          <div class=\"relative h-16 w-16 overflow-hidden rounded-xl border-[3px] border-black bg-white shadow-[3px_3px_0_0_#000]\">\n            <svg viewBox=\"0 0 64 64\" class=\"h-full w-full\" aria-hidden=\"true\">\n              <path d=\"M8 12L16 26L0 26Z\" fill=\"#ff8c42\" stroke=\"#000\" stroke-width=\"1.5\">\n              </path>\n              <path d=\"M8 36L16 50L0 50Z\" fill=\"#ff8c42\" stroke=\"#000\" stroke-width=\"1.5\">\n              </path>\n              <path d=\"M32 12L40 26L24 26Z\" fill=\"#ff8c42\" stroke=\"#000\" stroke-width=\"1.5\">\n              </path>\n              <path d=\"M32 36L40 50L24 50Z\" fill=\"#ff8c42\" stroke=\"#000\" stroke-width=\"1.5\">\n              </path>\n              <path d=\"M56 12L64 26L48 26Z\" fill=\"#ff8c42\" stroke=\"#000\" stroke-width=\"1.5\">\n              </path>\n              <path d=\"M56 36L64 50L48 50Z\" fill=\"#ff8c42\" stroke=\"#000\" stroke-width=\"1.5\">\n              </path>\n            </svg>\n          </div>\n          <span class=\"text-[10px] font-black uppercase tracking-wide text-black/60\">\n            トライ\n          </span>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "memphis-memphis-button-set",
@@ -1071,7 +1071,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\nimport { Heart, Star, Zap, Plus } from \"lucide-react\";\n\nexport const meta: DemoMeta = {\n  name: \"メンフィス・ボタン集\",\n  category: \"メンフィス\",\n  description: \"アウトラインのプレイフルなボタンとシェイプバッジ。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"memphis\", \"geometric\", \"80s\"],\n};\n\nexport default function MemphisButtonSet() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <div className=\"flex w-full justify-center px-5\">\n      {/* 角の装飾と影が箱の外に出るので、そのぶんの余白を外側に確保する */}\n      <div className=\"relative w-full max-w-md rounded-2xl border-[3px] border-black bg-[#fdf6e3] p-8 shadow-[7px_7px_0_0_#000]\">\n      <div className=\"pointer-events-none absolute -right-3 -top-3 h-9 w-9 rotate-12 rounded-[30%] border-[3px] border-black bg-[#ffd23f]\" />\n\n      {/* ソリッドボタン */}\n      <div className=\"flex flex-wrap gap-3\">\n        <button className=\"rounded-xl border-[3px] border-black bg-[#ff5c8a] px-5 py-2.5 text-sm font-extrabold text-white shadow-[4px_4px_0_0_#000] transition-transform hover:-translate-y-0.5 active:translate-y-0.5\">\n          {en ? \"Primary\" : \"プライマリ\"}\n        </button>\n        <button className=\"rounded-xl border-[3px] border-black bg-[#7b5cff] px-5 py-2.5 text-sm font-extrabold text-white shadow-[4px_4px_0_0_#000] transition-transform hover:-translate-y-0.5 active:translate-y-0.5\">\n          {en ? \"Secondary\" : \"セカンダリ\"}\n        </button>\n        <button className=\"inline-flex items-center gap-1.5 rounded-xl border-[3px] border-black bg-[#1fb6c1] px-5 py-2.5 text-sm font-extrabold text-white shadow-[4px_4px_0_0_#000] transition-transform hover:-translate-y-0.5 active:translate-y-0.5\">\n          <Zap className=\"size-4\" strokeWidth={3} />\n          {en ? \"Action\" : \"アクション\"}\n        </button>\n      </div>\n\n      {/* アウトラインボタン */}\n      <div className=\"mt-4 flex flex-wrap gap-3\">\n        <button className=\"rounded-xl border-[3px] border-black bg-white px-5 py-2.5 text-sm font-extrabold text-black shadow-[4px_4px_0_0_#ff5c8a] transition-transform hover:-translate-y-0.5 active:translate-y-0.5\">\n          {en ? \"Outline\" : \"アウトライン\"}\n        </button>\n        <button className=\"inline-flex items-center gap-1.5 rounded-full border-[3px] border-black bg-white px-5 py-2.5 text-sm font-extrabold text-black shadow-[4px_4px_0_0_#7b5cff] transition-transform hover:-translate-y-0.5 active:translate-y-0.5\">\n          <Plus className=\"size-4\" strokeWidth={3} />\n          {en ? \"Add\" : \"追加\"}\n        </button>\n        <button\n          className=\"flex size-11 items-center justify-center rounded-xl border-[3px] border-black bg-[#ffd23f] shadow-[4px_4px_0_0_#000] transition-transform hover:-translate-y-0.5 active:translate-y-0.5\"\n          aria-label={en ? \"Favorite\" : \"お気に入り\"}\n        >\n          <Heart className=\"size-5 text-black\" strokeWidth={2.5} />\n        </button>\n      </div>\n\n      {/* シェイプバッジ */}\n      <div className=\"mt-6 border-t-[3px] border-dashed border-black/30 pt-5\">\n        <div className=\"flex flex-wrap items-center gap-2.5\">\n          <span className=\"inline-flex items-center gap-1 -rotate-2 rounded-md border-2 border-black bg-[#ff8c42] px-2.5 py-1 text-xs font-black uppercase text-white\">\n            <Star className=\"size-3\" strokeWidth={3} />\n            {en ? \"Popular\" : \"人気\"}\n          </span>\n          <span className=\"rounded-full border-2 border-black bg-[#1fb6c1] px-3 py-1 text-xs font-black uppercase text-white\">\n            {en ? \"New\" : \"新着\"}\n          </span>\n          <span className=\"rotate-2 rounded-md border-2 border-black bg-[#ffd23f] px-2.5 py-1 text-xs font-black uppercase\">\n            {en ? \"Sale\" : \"セール\"}\n          </span>\n          <span\n            className=\"flex h-6 w-6 items-center justify-center border-2 border-black bg-[#ff5c8a]\"\n            style={{ clipPath: \"polygon(50% 0, 100% 100%, 0 100%)\" }}\n            aria-hidden\n          />\n        </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"flex w-full justify-center px-5\">\n      <div class=\"relative w-full max-w-md rounded-2xl border-[3px] border-black bg-[#fdf6e3] p-8 shadow-[7px_7px_0_0_#000]\">\n        <div class=\"pointer-events-none absolute -right-3 -top-3 h-9 w-9 rotate-12 rounded-[30%] border-[3px] border-black bg-[#ffd23f]\">\n        </div>\n        <div class=\"flex flex-wrap gap-3\">\n          <button class=\"rounded-xl border-[3px] border-black bg-[#ff5c8a] px-5 py-2.5 text-sm font-extrabold text-white shadow-[4px_4px_0_0_#000] transition-transform hover:-translate-y-0.5 active:translate-y-0.5\">\n            プライマリ\n          </button>\n          <button class=\"rounded-xl border-[3px] border-black bg-[#7b5cff] px-5 py-2.5 text-sm font-extrabold text-white shadow-[4px_4px_0_0_#000] transition-transform hover:-translate-y-0.5 active:translate-y-0.5\">\n            セカンダリ\n          </button>\n          <button class=\"inline-flex items-center gap-1.5 rounded-xl border-[3px] border-black bg-[#1fb6c1] px-5 py-2.5 text-sm font-extrabold text-white shadow-[4px_4px_0_0_#000] transition-transform hover:-translate-y-0.5 active:translate-y-0.5\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-zap size-4\">\n              <path d=\"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z\">\n              </path>\n            </svg>\n            アクション\n          </button>\n        </div>\n        <div class=\"mt-4 flex flex-wrap gap-3\">\n          <button class=\"rounded-xl border-[3px] border-black bg-white px-5 py-2.5 text-sm font-extrabold text-black shadow-[4px_4px_0_0_#ff5c8a] transition-transform hover:-translate-y-0.5 active:translate-y-0.5\">\n            アウトライン\n          </button>\n          <button class=\"inline-flex items-center gap-1.5 rounded-full border-[3px] border-black bg-white px-5 py-2.5 text-sm font-extrabold text-black shadow-[4px_4px_0_0_#7b5cff] transition-transform hover:-translate-y-0.5 active:translate-y-0.5\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-plus size-4\">\n              <path d=\"M5 12h14\">\n              </path>\n              <path d=\"M12 5v14\">\n              </path>\n            </svg>\n            追加\n          </button>\n          <button class=\"flex size-11 items-center justify-center rounded-xl border-[3px] border-black bg-[#ffd23f] shadow-[4px_4px_0_0_#000] transition-transform hover:-translate-y-0.5 active:translate-y-0.5\" aria-label=\"お気に入り\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-heart size-5 text-black\">\n              <path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\n              </path>\n            </svg>\n          </button>\n        </div>\n        <div class=\"mt-6 border-t-[3px] border-dashed border-black/30 pt-5\">\n          <div class=\"flex flex-wrap items-center gap-2.5\">\n            <span class=\"inline-flex items-center gap-1 -rotate-2 rounded-md border-2 border-black bg-[#ff8c42] px-2.5 py-1 text-xs font-black uppercase text-white\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              人気\n            </span>\n            <span class=\"rounded-full border-2 border-black bg-[#1fb6c1] px-3 py-1 text-xs font-black uppercase text-white\">\n              新着\n            </span>\n            <span class=\"rotate-2 rounded-md border-2 border-black bg-[#ffd23f] px-2.5 py-1 text-xs font-black uppercase\">\n              セール\n            </span>\n            <span class=\"flex h-6 w-6 items-center justify-center border-2 border-black bg-[#ff5c8a]\" style=\"clip-path:polygon(50% 0, 100% 100%, 0 100%)\" aria-hidden=\"true\">\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"flex w-full justify-center px-5\">\n      <div class=\"relative w-full max-w-md rounded-2xl border-[3px] border-black bg-[#fdf6e3] p-8 shadow-[7px_7px_0_0_#000]\">\n        <div class=\"pointer-events-none absolute -right-3 -top-3 h-9 w-9 rotate-12 rounded-[30%] border-[3px] border-black bg-[#ffd23f]\">\n        </div>\n        <div class=\"flex flex-wrap gap-3\">\n          <button class=\"rounded-xl border-[3px] border-black bg-[#ff5c8a] px-5 py-2.5 text-sm font-extrabold text-white shadow-[4px_4px_0_0_#000] transition-transform hover:-translate-y-0.5 active:translate-y-0.5\">\n            プライマリ\n          </button>\n          <button class=\"rounded-xl border-[3px] border-black bg-[#7b5cff] px-5 py-2.5 text-sm font-extrabold text-white shadow-[4px_4px_0_0_#000] transition-transform hover:-translate-y-0.5 active:translate-y-0.5\">\n            セカンダリ\n          </button>\n          <button class=\"inline-flex items-center gap-1.5 rounded-xl border-[3px] border-black bg-[#1fb6c1] px-5 py-2.5 text-sm font-extrabold text-white shadow-[4px_4px_0_0_#000] transition-transform hover:-translate-y-0.5 active:translate-y-0.5\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-zap size-4\">\n              <path d=\"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z\">\n              </path>\n            </svg>\n            アクション\n          </button>\n        </div>\n        <div class=\"mt-4 flex flex-wrap gap-3\">\n          <button class=\"rounded-xl border-[3px] border-black bg-white px-5 py-2.5 text-sm font-extrabold text-black shadow-[4px_4px_0_0_#ff5c8a] transition-transform hover:-translate-y-0.5 active:translate-y-0.5\">\n            アウトライン\n          </button>\n          <button class=\"inline-flex items-center gap-1.5 rounded-full border-[3px] border-black bg-white px-5 py-2.5 text-sm font-extrabold text-black shadow-[4px_4px_0_0_#7b5cff] transition-transform hover:-translate-y-0.5 active:translate-y-0.5\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-plus size-4\">\n              <path d=\"M5 12h14\">\n              </path>\n              <path d=\"M12 5v14\">\n              </path>\n            </svg>\n            追加\n          </button>\n          <button class=\"flex size-11 items-center justify-center rounded-xl border-[3px] border-black bg-[#ffd23f] shadow-[4px_4px_0_0_#000] transition-transform hover:-translate-y-0.5 active:translate-y-0.5\" aria-label=\"お気に入り\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-heart size-5 text-black\">\n              <path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\n              </path>\n            </svg>\n          </button>\n        </div>\n        <div class=\"mt-6 border-t-[3px] border-dashed border-black/30 pt-5\">\n          <div class=\"flex flex-wrap items-center gap-2.5\">\n            <span class=\"inline-flex items-center gap-1 -rotate-2 rounded-md border-2 border-black bg-[#ff8c42] px-2.5 py-1 text-xs font-black uppercase text-white\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-3\">\n                <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n                </path>\n              </svg>\n              人気\n            </span>\n            <span class=\"rounded-full border-2 border-black bg-[#1fb6c1] px-3 py-1 text-xs font-black uppercase text-white\">\n              新着\n            </span>\n            <span class=\"rotate-2 rounded-md border-2 border-black bg-[#ffd23f] px-2.5 py-1 text-xs font-black uppercase\">\n              セール\n            </span>\n            <span class=\"flex h-6 w-6 items-center justify-center border-2 border-black bg-[#ff5c8a]\" style=\"clip-path:polygon(50% 0, 100% 100%, 0 100%)\" aria-hidden=\"true\">\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "memphis-memphis-card",
@@ -1085,7 +1085,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\nimport { ArrowUpRight } from \"lucide-react\";\n\nexport const meta: DemoMeta = {\n  name: \"メンフィス・カード\",\n  category: \"メンフィス\",\n  description: \"シェイプアクセント付きのコンテンツカード。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"memphis\", \"geometric\", \"80s\"],\n};\n\nexport default function MemphisCard() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <div className=\"w-full px-6\">\n      {/* 装飾が箱の外に出る設計なので、はみ出すぶんの余白を外側に確保する */}\n      <div className=\"relative w-full max-w-sm\">\n      {/* 外側に飛び出す装飾シェイプ */}\n      <div className=\"pointer-events-none absolute -left-4 -top-4 z-10 h-12 w-12 rotate-12 rounded-[30%] border-[4px] border-black bg-[#ffd23f]\" />\n      <div className=\"pointer-events-none absolute -right-5 top-1/3 z-10 h-9 w-9 rounded-full border-[4px] border-black bg-[#1fb6c1]\" />\n      <div\n        className=\"pointer-events-none absolute -bottom-4 left-10 z-10 h-10 w-10 border-[4px] border-black bg-[#ff5c8a]\"\n        style={{ clipPath: \"polygon(50% 0, 100% 100%, 0 100%)\" }}\n      />\n\n      <div className=\"relative overflow-hidden rounded-2xl border-[3px] border-black bg-white shadow-[7px_7px_0_0_#000]\">\n        {/* 上部のパターンバンド */}\n        <div className=\"relative h-28 overflow-hidden border-b-[3px] border-black bg-[#7b5cff]\">\n          <svg viewBox=\"0 0 120 30\" className=\"absolute left-4 top-6 w-28\" fill=\"none\" aria-hidden>\n            <path d=\"M2 24L22 6l20 18L62 6l20 18L102 6l16 14\" stroke=\"#ffd23f\" strokeWidth={5} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n          </svg>\n          <div className=\"absolute right-5 top-4 h-10 w-10 rounded-full border-[3px] border-black bg-[#ff8c42]\" />\n          <div className=\"absolute bottom-3 right-16 h-6 w-6 rotate-12 border-[3px] border-black bg-[#ff5c8a]\" />\n        </div>\n\n        <div className=\"p-6\">\n          <span className=\"inline-block -rotate-2 rounded-md border-2 border-black bg-[#ffd23f] px-2.5 py-0.5 text-xs font-black uppercase tracking-wide\">\n            {en ? \"New\" : \"新着\"}\n          </span>\n          <h3 className=\"mt-3 text-2xl font-black leading-tight text-black\">\n            {en ? \"Geometric Studio\" : \"ジオメトリック・スタジオ\"}\n          </h3>\n          <p className=\"mt-2 text-sm font-semibold leading-relaxed text-black/65\">\n            {en\n              ? \"Bold shapes and primary colors for postmodern visuals that grab every eye.\"\n              : \"大胆なシェイプとプライマリーカラーで、見る人の目を引きつけるポストモダンなビジュアルを。\"}\n          </p>\n          <button className=\"group mt-5 inline-flex items-center gap-1.5 rounded-xl border-[3px] border-black bg-[#ff5c8a] px-5 py-2.5 text-sm font-extrabold text-white shadow-[4px_4px_0_0_#000] transition-transform hover:-translate-y-0.5 active:translate-y-0.5\">\n            {en ? \"Learn more\" : \"詳しく見る\"}\n            <ArrowUpRight className=\"size-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\" />\n          </button>\n        </div>\n      </div>\n      </div>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"w-full px-6\">\n      <div class=\"relative w-full max-w-sm\">\n        <div class=\"pointer-events-none absolute -left-4 -top-4 z-10 h-12 w-12 rotate-12 rounded-[30%] border-[4px] border-black bg-[#ffd23f]\">\n        </div>\n        <div class=\"pointer-events-none absolute -right-5 top-1/3 z-10 h-9 w-9 rounded-full border-[4px] border-black bg-[#1fb6c1]\">\n        </div>\n        <div class=\"pointer-events-none absolute -bottom-4 left-10 z-10 h-10 w-10 border-[4px] border-black bg-[#ff5c8a]\" style=\"clip-path:polygon(50% 0, 100% 100%, 0 100%)\">\n        </div>\n        <div class=\"relative overflow-hidden rounded-2xl border-[3px] border-black bg-white shadow-[7px_7px_0_0_#000]\">\n          <div class=\"relative h-28 overflow-hidden border-b-[3px] border-black bg-[#7b5cff]\">\n            <svg viewBox=\"0 0 120 30\" class=\"absolute left-4 top-6 w-28\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M2 24L22 6l20 18L62 6l20 18L102 6l16 14\" stroke=\"#ffd23f\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              </path>\n            </svg>\n            <div class=\"absolute right-5 top-4 h-10 w-10 rounded-full border-[3px] border-black bg-[#ff8c42]\">\n            </div>\n            <div class=\"absolute bottom-3 right-16 h-6 w-6 rotate-12 border-[3px] border-black bg-[#ff5c8a]\">\n            </div>\n          </div>\n          <div class=\"p-6\">\n            <span class=\"inline-block -rotate-2 rounded-md border-2 border-black bg-[#ffd23f] px-2.5 py-0.5 text-xs font-black uppercase tracking-wide\">\n              新着\n            </span>\n            <h3 class=\"mt-3 text-2xl font-black leading-tight text-black\">\n              ジオメトリック・スタジオ\n            </h3>\n            <p class=\"mt-2 text-sm font-semibold leading-relaxed text-black/65\">\n              大胆なシェイプとプライマリーカラーで、見る人の目を引きつけるポストモダンなビジュアルを。\n            </p>\n            <button class=\"group mt-5 inline-flex items-center gap-1.5 rounded-xl border-[3px] border-black bg-[#ff5c8a] px-5 py-2.5 text-sm font-extrabold text-white shadow-[4px_4px_0_0_#000] transition-transform hover:-translate-y-0.5 active:translate-y-0.5\">\n              詳しく見る\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-up-right size-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\">\n                <path d=\"M7 7h10v10\">\n                </path>\n                <path d=\"M7 17 17 7\">\n                </path>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"w-full px-6\">\n      <div class=\"relative w-full max-w-sm\">\n        <div class=\"pointer-events-none absolute -left-4 -top-4 z-10 h-12 w-12 rotate-12 rounded-[30%] border-[4px] border-black bg-[#ffd23f]\">\n        </div>\n        <div class=\"pointer-events-none absolute -right-5 top-1/3 z-10 h-9 w-9 rounded-full border-[4px] border-black bg-[#1fb6c1]\">\n        </div>\n        <div class=\"pointer-events-none absolute -bottom-4 left-10 z-10 h-10 w-10 border-[4px] border-black bg-[#ff5c8a]\" style=\"clip-path:polygon(50% 0, 100% 100%, 0 100%)\">\n        </div>\n        <div class=\"relative overflow-hidden rounded-2xl border-[3px] border-black bg-white shadow-[7px_7px_0_0_#000]\">\n          <div class=\"relative h-28 overflow-hidden border-b-[3px] border-black bg-[#7b5cff]\">\n            <svg viewBox=\"0 0 120 30\" class=\"absolute left-4 top-6 w-28\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M2 24L22 6l20 18L62 6l20 18L102 6l16 14\" stroke=\"#ffd23f\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              </path>\n            </svg>\n            <div class=\"absolute right-5 top-4 h-10 w-10 rounded-full border-[3px] border-black bg-[#ff8c42]\">\n            </div>\n            <div class=\"absolute bottom-3 right-16 h-6 w-6 rotate-12 border-[3px] border-black bg-[#ff5c8a]\">\n            </div>\n          </div>\n          <div class=\"p-6\">\n            <span class=\"inline-block -rotate-2 rounded-md border-2 border-black bg-[#ffd23f] px-2.5 py-0.5 text-xs font-black uppercase tracking-wide\">\n              新着\n            </span>\n            <h3 class=\"mt-3 text-2xl font-black leading-tight text-black\">\n              ジオメトリック・スタジオ\n            </h3>\n            <p class=\"mt-2 text-sm font-semibold leading-relaxed text-black/65\">\n              大胆なシェイプとプライマリーカラーで、見る人の目を引きつけるポストモダンなビジュアルを。\n            </p>\n            <button class=\"group mt-5 inline-flex items-center gap-1.5 rounded-xl border-[3px] border-black bg-[#ff5c8a] px-5 py-2.5 text-sm font-extrabold text-white shadow-[4px_4px_0_0_#000] transition-transform hover:-translate-y-0.5 active:translate-y-0.5\">\n              詳しく見る\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-up-right size-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\">\n                <path d=\"M7 7h10v10\">\n                </path>\n                <path d=\"M7 17 17 7\">\n                </path>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "memphis-memphis-cta",
@@ -1099,7 +1099,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\nimport { ArrowRight } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nexport const meta: DemoMeta = {\n  name: \"メンフィス・CTA\",\n  category: \"メンフィス\",\n  description: \"紙吹雪シェイプが弾けるエネルギッシュなCTAバンド。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"memphis\", \"geometric\", \"80s\"],\n};\n\n/** 紙吹雪シェイプ一片 */\nfunction Confetti({\n  className,\n  color,\n  shape = \"square\",\n}: {\n  className?: string;\n  color: string;\n  shape?: \"square\" | \"circle\" | \"triangle\";\n}) {\n  if (shape === \"circle\") {\n    return <span className={cn(\"absolute rounded-full border-2 border-black\", className)} style={{ backgroundColor: color }} />;\n  }\n  if (shape === \"triangle\") {\n    return (\n      <span\n        className={cn(\"absolute border-2 border-black\", className)}\n        style={{ backgroundColor: color, clipPath: \"polygon(50% 0, 100% 100%, 0 100%)\" }}\n      />\n    );\n  }\n  return <span className={cn(\"absolute border-2 border-black\", className)} style={{ backgroundColor: color }} />;\n}\n\nexport default function MemphisCTA() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"w-full bg-[#fdf6e3] px-6 py-16\">\n      <div className=\"relative mx-auto max-w-4xl overflow-hidden rounded-3xl border-[3px] border-black bg-[#7b5cff] px-8 py-16 text-center shadow-[10px_10px_0_0_#000]\">\n        {/* 紙吹雪 */}\n        <Confetti className=\"left-[8%] top-[14%] h-7 w-7 rotate-12\" color=\"#ffd23f\" />\n        <Confetti className=\"left-[20%] top-[60%] h-5 w-5\" color=\"#ff5c8a\" shape=\"circle\" />\n        <Confetti className=\"left-[12%] top-[78%] h-6 w-6\" color=\"#1fb6c1\" shape=\"triangle\" />\n        <Confetti className=\"right-[10%] top-[18%] h-6 w-6 -rotate-12\" color=\"#ff8c42\" />\n        <Confetti className=\"right-[18%] top-[62%] h-7 w-7\" color=\"#ffd23f\" shape=\"circle\" />\n        <Confetti className=\"right-[8%] top-[80%] h-5 w-5\" color=\"#ff5c8a\" shape=\"triangle\" />\n        <svg viewBox=\"0 0 120 40\" className=\"absolute left-1/2 top-3 w-32 -translate-x-1/2\" fill=\"none\" aria-hidden>\n          <path d=\"M2 20c10-22 24 22 34 0s24-22 34 0 24 22 34 0\" stroke=\"#ffd23f\" strokeWidth={5} strokeLinecap=\"round\" />\n        </svg>\n\n        <div className=\"relative\">\n          <h2 className=\"mx-auto max-w-2xl text-4xl font-black leading-tight text-white sm:text-5xl\">\n            {en ? (\n              <>\n                Make your design{\" \"}\n                <span className=\"ml-2 inline-block -rotate-2 bg-[#ffd23f] px-2 text-black\">pop today.</span>\n              </>\n            ) : (\n              <>\n                今日から、デザインを\n                <span className=\"ml-2 inline-block -rotate-2 bg-[#ffd23f] px-2 text-black\">弾けさせよう。</span>\n              </>\n            )}\n          </h2>\n          <p className=\"mx-auto mt-5 max-w-md text-lg font-semibold text-white/85\">\n            {en\n              ? \"Start free, upgrade anytime. No credit card needed.\"\n              : \"無料で始めて、いつでもアップグレード。クレジットカード不要。\"}\n          </p>\n          <div className=\"mt-9 flex flex-col items-center justify-center gap-4 sm:flex-row\">\n            <button className=\"group inline-flex items-center gap-2 rounded-xl border-[3px] border-black bg-white px-8 py-3.5 text-base font-extrabold text-black shadow-[5px_5px_0_0_#000] transition-transform hover:-translate-y-0.5 active:translate-y-0.5\">\n              {en ? \"Start free\" : \"無料で始める\"}\n              <ArrowRight className=\"size-5 transition-transform group-hover:translate-x-1\" />\n            </button>\n            <button className=\"rounded-xl border-[3px] border-black bg-[#ff5c8a] px-8 py-3.5 text-base font-extrabold text-white shadow-[5px_5px_0_0_#000] transition-transform hover:-translate-y-0.5 active:translate-y-0.5\">\n              {en ? \"See pricing\" : \"料金を見る\"}\n            </button>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"w-full bg-[#fdf6e3] px-6 py-16\">\n      <div class=\"relative mx-auto max-w-4xl overflow-hidden rounded-3xl border-[3px] border-black bg-[#7b5cff] px-8 py-16 text-center shadow-[10px_10px_0_0_#000]\">\n        <span class=\"absolute border-2 border-black left-[8%] top-[14%] h-7 w-7 rotate-12\" style=\"background-color:#ffd23f\">\n        </span>\n        <span class=\"absolute rounded-full border-2 border-black left-[20%] top-[60%] h-5 w-5\" style=\"background-color:#ff5c8a\">\n        </span>\n        <span class=\"absolute border-2 border-black left-[12%] top-[78%] h-6 w-6\" style=\"background-color:#1fb6c1;clip-path:polygon(50% 0, 100% 100%, 0 100%)\">\n        </span>\n        <span class=\"absolute border-2 border-black right-[10%] top-[18%] h-6 w-6 -rotate-12\" style=\"background-color:#ff8c42\">\n        </span>\n        <span class=\"absolute rounded-full border-2 border-black right-[18%] top-[62%] h-7 w-7\" style=\"background-color:#ffd23f\">\n        </span>\n        <span class=\"absolute border-2 border-black right-[8%] top-[80%] h-5 w-5\" style=\"background-color:#ff5c8a;clip-path:polygon(50% 0, 100% 100%, 0 100%)\">\n        </span>\n        <svg viewBox=\"0 0 120 40\" class=\"absolute left-1/2 top-3 w-32 -translate-x-1/2\" fill=\"none\" aria-hidden=\"true\">\n          <path d=\"M2 20c10-22 24 22 34 0s24-22 34 0 24 22 34 0\" stroke=\"#ffd23f\" stroke-width=\"5\" stroke-linecap=\"round\">\n          </path>\n        </svg>\n        <div class=\"relative\">\n          <h2 class=\"mx-auto max-w-2xl text-4xl font-black leading-tight text-white sm:text-5xl\">\n            今日から、デザインを\n            <span class=\"ml-2 inline-block -rotate-2 bg-[#ffd23f] px-2 text-black\">\n              弾けさせよう。\n            </span>\n          </h2>\n          <p class=\"mx-auto mt-5 max-w-md text-lg font-semibold text-white/85\">\n            無料で始めて、いつでもアップグレード。クレジットカード不要。\n          </p>\n          <div class=\"mt-9 flex flex-col items-center justify-center gap-4 sm:flex-row\">\n            <button class=\"group inline-flex items-center gap-2 rounded-xl border-[3px] border-black bg-white px-8 py-3.5 text-base font-extrabold text-black shadow-[5px_5px_0_0_#000] transition-transform hover:-translate-y-0.5 active:translate-y-0.5\">\n              無料で始める\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right size-5 transition-transform group-hover:translate-x-1\">\n                <path d=\"M5 12h14\">\n                </path>\n                <path d=\"m12 5 7 7-7 7\">\n                </path>\n              </svg>\n            </button>\n            <button class=\"rounded-xl border-[3px] border-black bg-[#ff5c8a] px-8 py-3.5 text-base font-extrabold text-white shadow-[5px_5px_0_0_#000] transition-transform hover:-translate-y-0.5 active:translate-y-0.5\">\n              料金を見る\n            </button>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"w-full bg-[#fdf6e3] px-6 py-16\">\n      <div class=\"relative mx-auto max-w-4xl overflow-hidden rounded-3xl border-[3px] border-black bg-[#7b5cff] px-8 py-16 text-center shadow-[10px_10px_0_0_#000]\">\n        <span class=\"absolute border-2 border-black left-[8%] top-[14%] h-7 w-7 rotate-12\" style=\"background-color:#ffd23f\">\n        </span>\n        <span class=\"absolute rounded-full border-2 border-black left-[20%] top-[60%] h-5 w-5\" style=\"background-color:#ff5c8a\">\n        </span>\n        <span class=\"absolute border-2 border-black left-[12%] top-[78%] h-6 w-6\" style=\"background-color:#1fb6c1;clip-path:polygon(50% 0, 100% 100%, 0 100%)\">\n        </span>\n        <span class=\"absolute border-2 border-black right-[10%] top-[18%] h-6 w-6 -rotate-12\" style=\"background-color:#ff8c42\">\n        </span>\n        <span class=\"absolute rounded-full border-2 border-black right-[18%] top-[62%] h-7 w-7\" style=\"background-color:#ffd23f\">\n        </span>\n        <span class=\"absolute border-2 border-black right-[8%] top-[80%] h-5 w-5\" style=\"background-color:#ff5c8a;clip-path:polygon(50% 0, 100% 100%, 0 100%)\">\n        </span>\n        <svg viewBox=\"0 0 120 40\" class=\"absolute left-1/2 top-3 w-32 -translate-x-1/2\" fill=\"none\" aria-hidden=\"true\">\n          <path d=\"M2 20c10-22 24 22 34 0s24-22 34 0 24 22 34 0\" stroke=\"#ffd23f\" stroke-width=\"5\" stroke-linecap=\"round\">\n          </path>\n        </svg>\n        <div class=\"relative\">\n          <h2 class=\"mx-auto max-w-2xl text-4xl font-black leading-tight text-white sm:text-5xl\">\n            今日から、デザインを\n            <span class=\"ml-2 inline-block -rotate-2 bg-[#ffd23f] px-2 text-black\">\n              弾けさせよう。\n            </span>\n          </h2>\n          <p class=\"mx-auto mt-5 max-w-md text-lg font-semibold text-white/85\">\n            無料で始めて、いつでもアップグレード。クレジットカード不要。\n          </p>\n          <div class=\"mt-9 flex flex-col items-center justify-center gap-4 sm:flex-row\">\n            <button class=\"group inline-flex items-center gap-2 rounded-xl border-[3px] border-black bg-white px-8 py-3.5 text-base font-extrabold text-black shadow-[5px_5px_0_0_#000] transition-transform hover:-translate-y-0.5 active:translate-y-0.5\">\n              無料で始める\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right size-5 transition-transform group-hover:translate-x-1\">\n                <path d=\"M5 12h14\">\n                </path>\n                <path d=\"m12 5 7 7-7 7\">\n                </path>\n              </svg>\n            </button>\n            <button class=\"rounded-xl border-[3px] border-black bg-[#ff5c8a] px-8 py-3.5 text-base font-extrabold text-white shadow-[5px_5px_0_0_#000] transition-transform hover:-translate-y-0.5 active:translate-y-0.5\">\n              料金を見る\n            </button>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "minimal-editorial-list",
@@ -1113,7 +1113,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"エディトリアル・インデックス\",\n  category: \"ミニマル\",\n  description: \"罫線で区切った番号付き目次。書籍のような構成。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"minimal\", \"swiss\", \"editorial\"],\n  principle: \"通し番号と罫線が走査を助け、一覧の階層を明確にする。\",\n};\n\nconst items = [\n  { no: \"01\", ja: \"グリッドの規律\", en: \"Grid discipline\", meta: \"Foundations\", page: \"012\" },\n  { no: \"02\", ja: \"タイポグラフィの階層\", en: \"Type hierarchy\", meta: \"Type\", page: \"028\" },\n  { no: \"03\", ja: \"余白とリズム\", en: \"Whitespace & rhythm\", meta: \"Space\", page: \"046\" },\n  { no: \"04\", ja: \"モノクロームの色設計\", en: \"Monochrome color\", meta: \"Color\", page: \"061\" },\n  { no: \"05\", ja: \"ヘアラインと境界\", en: \"Hairlines & borders\", meta: \"Detail\", page: \"079\" },\n  { no: \"06\", ja: \"反転とコントラスト\", en: \"Inversion & contrast\", meta: \"Inversion\", page: \"094\" },\n];\n\nexport default function EditorialList() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"w-full bg-white font-sans text-neutral-900\">\n      <div className=\"mx-auto max-w-4xl px-6 py-24\">\n        <header className=\"mb-12 flex items-baseline justify-between border-b border-neutral-900 pb-4\">\n          <h2 className=\"text-2xl font-medium tracking-tight\">{en ? \"Contents\" : \"目次\"}</h2>\n          <span className=\"text-[11px] uppercase tracking-[0.25em] text-neutral-500\">\n            Contents — 06\n          </span>\n        </header>\n\n        <ol className=\"border-t border-neutral-200\">\n          {items.map((it) => (\n            <li key={it.no}>\n              <a\n                href=\"#\"\n                className=\"group grid grid-cols-12 items-baseline gap-4 border-b border-neutral-200 py-6 transition-colors hover:bg-neutral-50\"\n              >\n                <span className=\"col-span-2 text-sm tabular-nums tracking-[0.2em] text-neutral-400 md:col-span-1\">\n                  {it.no}\n                </span>\n                <span className=\"col-span-7 text-lg font-medium tracking-tight md:col-span-7\">\n                  {en ? it.en : it.ja}\n                </span>\n                <span className=\"col-span-3 hidden text-[11px] uppercase tracking-[0.2em] text-neutral-500 md:block\">\n                  {it.meta}\n                </span>\n                <span className=\"col-span-3 text-right text-sm tabular-nums text-neutral-400 md:col-span-1\">\n                  {it.page}\n                </span>\n              </a>\n            </li>\n          ))}\n        </ol>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"w-full bg-white font-sans text-neutral-900\">\n      <div class=\"mx-auto max-w-4xl px-6 py-24\">\n        <header class=\"mb-12 flex items-baseline justify-between border-b border-neutral-900 pb-4\">\n          <h2 class=\"text-2xl font-medium tracking-tight\">\n            目次\n          </h2>\n          <span class=\"text-[11px] uppercase tracking-[0.25em] text-neutral-500\">\n            Contents — 06\n          </span>\n        </header>\n        <ol class=\"border-t border-neutral-200\">\n          <li>\n            <a href=\"#\" class=\"group grid grid-cols-12 items-baseline gap-4 border-b border-neutral-200 py-6 transition-colors hover:bg-neutral-50\">\n              <span class=\"col-span-2 text-sm tabular-nums tracking-[0.2em] text-neutral-400 md:col-span-1\">\n                01\n              </span>\n              <span class=\"col-span-7 text-lg font-medium tracking-tight md:col-span-7\">\n                グリッドの規律\n              </span>\n              <span class=\"col-span-3 hidden text-[11px] uppercase tracking-[0.2em] text-neutral-500 md:block\">\n                Foundations\n              </span>\n              <span class=\"col-span-3 text-right text-sm tabular-nums text-neutral-400 md:col-span-1\">\n                012\n              </span>\n            </a>\n          </li>\n          <li>\n            <a href=\"#\" class=\"group grid grid-cols-12 items-baseline gap-4 border-b border-neutral-200 py-6 transition-colors hover:bg-neutral-50\">\n              <span class=\"col-span-2 text-sm tabular-nums tracking-[0.2em] text-neutral-400 md:col-span-1\">\n                02\n              </span>\n              <span class=\"col-span-7 text-lg font-medium tracking-tight md:col-span-7\">\n                タイポグラフィの階層\n              </span>\n              <span class=\"col-span-3 hidden text-[11px] uppercase tracking-[0.2em] text-neutral-500 md:block\">\n                Type\n              </span>\n              <span class=\"col-span-3 text-right text-sm tabular-nums text-neutral-400 md:col-span-1\">\n                028\n              </span>\n            </a>\n          </li>\n          <li>\n            <a href=\"#\" class=\"group grid grid-cols-12 items-baseline gap-4 border-b border-neutral-200 py-6 transition-colors hover:bg-neutral-50\">\n              <span class=\"col-span-2 text-sm tabular-nums tracking-[0.2em] text-neutral-400 md:col-span-1\">\n                03\n              </span>\n              <span class=\"col-span-7 text-lg font-medium tracking-tight md:col-span-7\">\n                余白とリズム\n              </span>\n              <span class=\"col-span-3 hidden text-[11px] uppercase tracking-[0.2em] text-neutral-500 md:block\">\n                Space\n              </span>\n              <span class=\"col-span-3 text-right text-sm tabular-nums text-neutral-400 md:col-span-1\">\n                046\n              </span>\n            </a>\n          </li>\n          <li>\n            <a href=\"#\" class=\"group grid grid-cols-12 items-baseline gap-4 border-b border-neutral-200 py-6 transition-colors hover:bg-neutral-50\">\n              <span class=\"col-span-2 text-sm tabular-nums tracking-[0.2em] text-neutral-400 md:col-span-1\">\n                04\n              </span>\n              <span class=\"col-span-7 text-lg font-medium tracking-tight md:col-span-7\">\n                モノクロームの色設計\n              </span>\n              <span class=\"col-span-3 hidden text-[11px] uppercase tracking-[0.2em] text-neutral-500 md:block\">\n                Color\n              </span>\n              <span class=\"col-span-3 text-right text-sm tabular-nums text-neutral-400 md:col-span-1\">\n                061\n              </span>\n            </a>\n          </li>\n          <li>\n            <a href=\"#\" class=\"group grid grid-cols-12 items-baseline gap-4 border-b border-neutral-200 py-6 transition-colors hover:bg-neutral-50\">\n              <span class=\"col-span-2 text-sm tabular-nums tracking-[0.2em] text-neutral-400 md:col-span-1\">\n                05\n              </span>\n              <span class=\"col-span-7 text-lg font-medium tracking-tight md:col-span-7\">\n                ヘアラインと境界\n              </span>\n              <span class=\"col-span-3 hidden text-[11px] uppercase tracking-[0.2em] text-neutral-500 md:block\">\n                Detail\n              </span>\n              <span class=\"col-span-3 text-right text-sm tabular-nums text-neutral-400 md:col-span-1\">\n                079\n              </span>\n            </a>\n          </li>\n          <li>\n            <a href=\"#\" class=\"group grid grid-cols-12 items-baseline gap-4 border-b border-neutral-200 py-6 transition-colors hover:bg-neutral-50\">\n              <span class=\"col-span-2 text-sm tabular-nums tracking-[0.2em] text-neutral-400 md:col-span-1\">\n                06\n              </span>\n              <span class=\"col-span-7 text-lg font-medium tracking-tight md:col-span-7\">\n                反転とコントラスト\n              </span>\n              <span class=\"col-span-3 hidden text-[11px] uppercase tracking-[0.2em] text-neutral-500 md:block\">\n                Inversion\n              </span>\n              <span class=\"col-span-3 text-right text-sm tabular-nums text-neutral-400 md:col-span-1\">\n                094\n              </span>\n            </a>\n          </li>\n        </ol>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"w-full bg-white font-sans text-neutral-900\">\n      <div class=\"mx-auto max-w-4xl px-6 py-24\">\n        <header class=\"mb-12 flex items-baseline justify-between border-b border-neutral-900 pb-4\">\n          <h2 class=\"text-2xl font-medium tracking-tight\">\n            目次\n          </h2>\n          <span class=\"text-[11px] uppercase tracking-[0.25em] text-neutral-500\">\n            Contents — 06\n          </span>\n        </header>\n        <ol class=\"border-t border-neutral-200\">\n          <li>\n            <a href=\"#\" class=\"group grid grid-cols-12 items-baseline gap-4 border-b border-neutral-200 py-6 transition-colors hover:bg-neutral-50\">\n              <span class=\"col-span-2 text-sm tabular-nums tracking-[0.2em] text-neutral-400 md:col-span-1\">\n                01\n              </span>\n              <span class=\"col-span-7 text-lg font-medium tracking-tight md:col-span-7\">\n                グリッドの規律\n              </span>\n              <span class=\"col-span-3 hidden text-[11px] uppercase tracking-[0.2em] text-neutral-500 md:block\">\n                Foundations\n              </span>\n              <span class=\"col-span-3 text-right text-sm tabular-nums text-neutral-400 md:col-span-1\">\n                012\n              </span>\n            </a>\n          </li>\n          <li>\n            <a href=\"#\" class=\"group grid grid-cols-12 items-baseline gap-4 border-b border-neutral-200 py-6 transition-colors hover:bg-neutral-50\">\n              <span class=\"col-span-2 text-sm tabular-nums tracking-[0.2em] text-neutral-400 md:col-span-1\">\n                02\n              </span>\n              <span class=\"col-span-7 text-lg font-medium tracking-tight md:col-span-7\">\n                タイポグラフィの階層\n              </span>\n              <span class=\"col-span-3 hidden text-[11px] uppercase tracking-[0.2em] text-neutral-500 md:block\">\n                Type\n              </span>\n              <span class=\"col-span-3 text-right text-sm tabular-nums text-neutral-400 md:col-span-1\">\n                028\n              </span>\n            </a>\n          </li>\n          <li>\n            <a href=\"#\" class=\"group grid grid-cols-12 items-baseline gap-4 border-b border-neutral-200 py-6 transition-colors hover:bg-neutral-50\">\n              <span class=\"col-span-2 text-sm tabular-nums tracking-[0.2em] text-neutral-400 md:col-span-1\">\n                03\n              </span>\n              <span class=\"col-span-7 text-lg font-medium tracking-tight md:col-span-7\">\n                余白とリズム\n              </span>\n              <span class=\"col-span-3 hidden text-[11px] uppercase tracking-[0.2em] text-neutral-500 md:block\">\n                Space\n              </span>\n              <span class=\"col-span-3 text-right text-sm tabular-nums text-neutral-400 md:col-span-1\">\n                046\n              </span>\n            </a>\n          </li>\n          <li>\n            <a href=\"#\" class=\"group grid grid-cols-12 items-baseline gap-4 border-b border-neutral-200 py-6 transition-colors hover:bg-neutral-50\">\n              <span class=\"col-span-2 text-sm tabular-nums tracking-[0.2em] text-neutral-400 md:col-span-1\">\n                04\n              </span>\n              <span class=\"col-span-7 text-lg font-medium tracking-tight md:col-span-7\">\n                モノクロームの色設計\n              </span>\n              <span class=\"col-span-3 hidden text-[11px] uppercase tracking-[0.2em] text-neutral-500 md:block\">\n                Color\n              </span>\n              <span class=\"col-span-3 text-right text-sm tabular-nums text-neutral-400 md:col-span-1\">\n                061\n              </span>\n            </a>\n          </li>\n          <li>\n            <a href=\"#\" class=\"group grid grid-cols-12 items-baseline gap-4 border-b border-neutral-200 py-6 transition-colors hover:bg-neutral-50\">\n              <span class=\"col-span-2 text-sm tabular-nums tracking-[0.2em] text-neutral-400 md:col-span-1\">\n                05\n              </span>\n              <span class=\"col-span-7 text-lg font-medium tracking-tight md:col-span-7\">\n                ヘアラインと境界\n              </span>\n              <span class=\"col-span-3 hidden text-[11px] uppercase tracking-[0.2em] text-neutral-500 md:block\">\n                Detail\n              </span>\n              <span class=\"col-span-3 text-right text-sm tabular-nums text-neutral-400 md:col-span-1\">\n                079\n              </span>\n            </a>\n          </li>\n          <li>\n            <a href=\"#\" class=\"group grid grid-cols-12 items-baseline gap-4 border-b border-neutral-200 py-6 transition-colors hover:bg-neutral-50\">\n              <span class=\"col-span-2 text-sm tabular-nums tracking-[0.2em] text-neutral-400 md:col-span-1\">\n                06\n              </span>\n              <span class=\"col-span-7 text-lg font-medium tracking-tight md:col-span-7\">\n                反転とコントラスト\n              </span>\n              <span class=\"col-span-3 hidden text-[11px] uppercase tracking-[0.2em] text-neutral-500 md:block\">\n                Inversion\n              </span>\n              <span class=\"col-span-3 text-right text-sm tabular-nums text-neutral-400 md:col-span-1\">\n                094\n              </span>\n            </a>\n          </li>\n        </ol>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "minimal-feature-grid-swiss",
@@ -1127,7 +1127,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"スイス・フィーチャー\",\n  category: \"ミニマル\",\n  description: \"通し番号を持つ、厳格なモジュラー機能グリッド。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"minimal\", \"swiss\", \"grid\"],\n  principle: \"均等なモジュールと番号で、機能群を体系的に読み解かせる。\",\n};\n\nconst features = [\n  {\n    no: \"01\",\n    ja: \"グリッド設計\",\n    en: \"Grid system\",\n    bodyJa: \"8pt基準のモジュラーグリッドで、すべての要素を整然と配置する。\",\n    bodyEn: \"An 8pt modular grid keeps every element in precise order.\",\n  },\n  {\n    no: \"02\",\n    ja: \"タイプスケール\",\n    en: \"Type scale\",\n    bodyJa: \"比率に基づく明快な見出し階層が、読みやすさを担保する。\",\n    bodyEn: \"A ratio-based heading hierarchy ensures clear readability.\",\n  },\n  {\n    no: \"03\",\n    ja: \"ヘアライン\",\n    en: \"Hairlines\",\n    bodyJa: \"1pxの罫線のみで領域を区切り、影や塗りに頼らない。\",\n    bodyEn: \"Only 1px rules divide regions — no shadows, no fills.\",\n  },\n  {\n    no: \"04\",\n    ja: \"余白の設計\",\n    en: \"Whitespace\",\n    bodyJa: \"意図的な空白がリズムを生み、密度を制御する。\",\n    bodyEn: \"Deliberate space creates rhythm and controls density.\",\n  },\n  {\n    no: \"05\",\n    ja: \"モノクローム\",\n    en: \"Monochrome\",\n    bodyJa: \"無彩色を基調に、ただ一点のアクセントだけを許容する。\",\n    bodyEn: \"An achromatic base allows just a single accent.\",\n  },\n  {\n    no: \"06\",\n    ja: \"反転テーマ\",\n    en: \"Inverted theme\",\n    bodyJa: \"明暗を入れ替えても破綻しない、対称的な配色設計。\",\n    bodyEn: \"A symmetric palette that holds up when light and dark swap.\",\n  },\n];\n\nexport default function FeatureGridSwiss() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"w-full bg-white font-sans text-neutral-900\">\n      <div className=\"mx-auto max-w-6xl px-6 py-24\">\n        <header className=\"mb-16 grid grid-cols-12 items-end gap-6 border-b border-neutral-200 pb-6\">\n          <h2 className=\"col-span-12 text-3xl font-medium tracking-tight md:col-span-8 md:text-4xl\">\n            {en ? \"Design principles\" : \"設計の原理\"}\n          </h2>\n          <p className=\"col-span-12 text-sm text-neutral-500 md:col-span-4 md:text-right\">\n            Six principles of the International Typographic Style.\n          </p>\n        </header>\n\n        <div className=\"grid grid-cols-1 border-l border-t border-neutral-200 sm:grid-cols-2 lg:grid-cols-3\">\n          {features.map((f) => (\n            <article\n              key={f.no}\n              className=\"flex min-h-56 flex-col border-b border-r border-neutral-200 p-8 transition-colors hover:bg-neutral-50\"\n            >\n              <span className=\"mb-10 text-[11px] tabular-nums tracking-[0.25em] text-neutral-400\">\n                {f.no}\n              </span>\n              <h3 className=\"mb-3 text-lg font-medium tracking-tight\">\n                {en ? f.en : f.ja}\n              </h3>\n              <p className=\"text-sm leading-relaxed text-neutral-600\">\n                {en ? f.bodyEn : f.bodyJa}\n              </p>\n            </article>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"w-full bg-white font-sans text-neutral-900\">\n      <div class=\"mx-auto max-w-6xl px-6 py-24\">\n        <header class=\"mb-16 grid grid-cols-12 items-end gap-6 border-b border-neutral-200 pb-6\">\n          <h2 class=\"col-span-12 text-3xl font-medium tracking-tight md:col-span-8 md:text-4xl\">\n            設計の原理\n          </h2>\n          <p class=\"col-span-12 text-sm text-neutral-500 md:col-span-4 md:text-right\">\n            Six principles of the International Typographic Style.\n          </p>\n        </header>\n        <div class=\"grid grid-cols-1 border-l border-t border-neutral-200 sm:grid-cols-2 lg:grid-cols-3\">\n          <article class=\"flex min-h-56 flex-col border-b border-r border-neutral-200 p-8 transition-colors hover:bg-neutral-50\">\n            <span class=\"mb-10 text-[11px] tabular-nums tracking-[0.25em] text-neutral-400\">\n              01\n            </span>\n            <h3 class=\"mb-3 text-lg font-medium tracking-tight\">\n              グリッド設計\n            </h3>\n            <p class=\"text-sm leading-relaxed text-neutral-600\">\n              8pt基準のモジュラーグリッドで、すべての要素を整然と配置する。\n            </p>\n          </article>\n          <article class=\"flex min-h-56 flex-col border-b border-r border-neutral-200 p-8 transition-colors hover:bg-neutral-50\">\n            <span class=\"mb-10 text-[11px] tabular-nums tracking-[0.25em] text-neutral-400\">\n              02\n            </span>\n            <h3 class=\"mb-3 text-lg font-medium tracking-tight\">\n              タイプスケール\n            </h3>\n            <p class=\"text-sm leading-relaxed text-neutral-600\">\n              比率に基づく明快な見出し階層が、読みやすさを担保する。\n            </p>\n          </article>\n          <article class=\"flex min-h-56 flex-col border-b border-r border-neutral-200 p-8 transition-colors hover:bg-neutral-50\">\n            <span class=\"mb-10 text-[11px] tabular-nums tracking-[0.25em] text-neutral-400\">\n              03\n            </span>\n            <h3 class=\"mb-3 text-lg font-medium tracking-tight\">\n              ヘアライン\n            </h3>\n            <p class=\"text-sm leading-relaxed text-neutral-600\">\n              1pxの罫線のみで領域を区切り、影や塗りに頼らない。\n            </p>\n          </article>\n          <article class=\"flex min-h-56 flex-col border-b border-r border-neutral-200 p-8 transition-colors hover:bg-neutral-50\">\n            <span class=\"mb-10 text-[11px] tabular-nums tracking-[0.25em] text-neutral-400\">\n              04\n            </span>\n            <h3 class=\"mb-3 text-lg font-medium tracking-tight\">\n              余白の設計\n            </h3>\n            <p class=\"text-sm leading-relaxed text-neutral-600\">\n              意図的な空白がリズムを生み、密度を制御する。\n            </p>\n          </article>\n          <article class=\"flex min-h-56 flex-col border-b border-r border-neutral-200 p-8 transition-colors hover:bg-neutral-50\">\n            <span class=\"mb-10 text-[11px] tabular-nums tracking-[0.25em] text-neutral-400\">\n              05\n            </span>\n            <h3 class=\"mb-3 text-lg font-medium tracking-tight\">\n              モノクローム\n            </h3>\n            <p class=\"text-sm leading-relaxed text-neutral-600\">\n              無彩色を基調に、ただ一点のアクセントだけを許容する。\n            </p>\n          </article>\n          <article class=\"flex min-h-56 flex-col border-b border-r border-neutral-200 p-8 transition-colors hover:bg-neutral-50\">\n            <span class=\"mb-10 text-[11px] tabular-nums tracking-[0.25em] text-neutral-400\">\n              06\n            </span>\n            <h3 class=\"mb-3 text-lg font-medium tracking-tight\">\n              反転テーマ\n            </h3>\n            <p class=\"text-sm leading-relaxed text-neutral-600\">\n              明暗を入れ替えても破綻しない、対称的な配色設計。\n            </p>\n          </article>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"w-full bg-white font-sans text-neutral-900\">\n      <div class=\"mx-auto max-w-6xl px-6 py-24\">\n        <header class=\"mb-16 grid grid-cols-12 items-end gap-6 border-b border-neutral-200 pb-6\">\n          <h2 class=\"col-span-12 text-3xl font-medium tracking-tight md:col-span-8 md:text-4xl\">\n            設計の原理\n          </h2>\n          <p class=\"col-span-12 text-sm text-neutral-500 md:col-span-4 md:text-right\">\n            Six principles of the International Typographic Style.\n          </p>\n        </header>\n        <div class=\"grid grid-cols-1 border-l border-t border-neutral-200 sm:grid-cols-2 lg:grid-cols-3\">\n          <article class=\"flex min-h-56 flex-col border-b border-r border-neutral-200 p-8 transition-colors hover:bg-neutral-50\">\n            <span class=\"mb-10 text-[11px] tabular-nums tracking-[0.25em] text-neutral-400\">\n              01\n            </span>\n            <h3 class=\"mb-3 text-lg font-medium tracking-tight\">\n              グリッド設計\n            </h3>\n            <p class=\"text-sm leading-relaxed text-neutral-600\">\n              8pt基準のモジュラーグリッドで、すべての要素を整然と配置する。\n            </p>\n          </article>\n          <article class=\"flex min-h-56 flex-col border-b border-r border-neutral-200 p-8 transition-colors hover:bg-neutral-50\">\n            <span class=\"mb-10 text-[11px] tabular-nums tracking-[0.25em] text-neutral-400\">\n              02\n            </span>\n            <h3 class=\"mb-3 text-lg font-medium tracking-tight\">\n              タイプスケール\n            </h3>\n            <p class=\"text-sm leading-relaxed text-neutral-600\">\n              比率に基づく明快な見出し階層が、読みやすさを担保する。\n            </p>\n          </article>\n          <article class=\"flex min-h-56 flex-col border-b border-r border-neutral-200 p-8 transition-colors hover:bg-neutral-50\">\n            <span class=\"mb-10 text-[11px] tabular-nums tracking-[0.25em] text-neutral-400\">\n              03\n            </span>\n            <h3 class=\"mb-3 text-lg font-medium tracking-tight\">\n              ヘアライン\n            </h3>\n            <p class=\"text-sm leading-relaxed text-neutral-600\">\n              1pxの罫線のみで領域を区切り、影や塗りに頼らない。\n            </p>\n          </article>\n          <article class=\"flex min-h-56 flex-col border-b border-r border-neutral-200 p-8 transition-colors hover:bg-neutral-50\">\n            <span class=\"mb-10 text-[11px] tabular-nums tracking-[0.25em] text-neutral-400\">\n              04\n            </span>\n            <h3 class=\"mb-3 text-lg font-medium tracking-tight\">\n              余白の設計\n            </h3>\n            <p class=\"text-sm leading-relaxed text-neutral-600\">\n              意図的な空白がリズムを生み、密度を制御する。\n            </p>\n          </article>\n          <article class=\"flex min-h-56 flex-col border-b border-r border-neutral-200 p-8 transition-colors hover:bg-neutral-50\">\n            <span class=\"mb-10 text-[11px] tabular-nums tracking-[0.25em] text-neutral-400\">\n              05\n            </span>\n            <h3 class=\"mb-3 text-lg font-medium tracking-tight\">\n              モノクローム\n            </h3>\n            <p class=\"text-sm leading-relaxed text-neutral-600\">\n              無彩色を基調に、ただ一点のアクセントだけを許容する。\n            </p>\n          </article>\n          <article class=\"flex min-h-56 flex-col border-b border-r border-neutral-200 p-8 transition-colors hover:bg-neutral-50\">\n            <span class=\"mb-10 text-[11px] tabular-nums tracking-[0.25em] text-neutral-400\">\n              06\n            </span>\n            <h3 class=\"mb-3 text-lg font-medium tracking-tight\">\n              反転テーマ\n            </h3>\n            <p class=\"text-sm leading-relaxed text-neutral-600\">\n              明暗を入れ替えても破綻しない、対称的な配色設計。\n            </p>\n          </article>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "minimal-invert-hero",
@@ -1141,7 +1141,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"反転ヒーロー\",\n  category: \"ミニマル\",\n  description: \"暗転したダーク基調のヒーロー。明暗反転の対称設計。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"minimal\", \"swiss\", \"dark\"],\n  principle: \"明暗の反転が強いコントラストを生み、見出しに重みを与える。\",\n};\n\nexport default function InvertHero() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"w-full bg-neutral-950 font-sans text-neutral-50\">\n      <div className=\"mx-auto max-w-6xl px-6 py-24 md:py-32\">\n        <div className=\"grid grid-cols-12 gap-x-6 gap-y-16\">\n          <div className=\"col-span-12 flex items-baseline justify-between border-b border-neutral-800 pb-6\">\n            <span className=\"text-[11px] uppercase tracking-[0.25em] text-neutral-500\">\n              Inverted / Dark\n            </span>\n            <span className=\"text-[11px] tabular-nums uppercase tracking-[0.25em] text-neutral-500\">\n              09 — 12\n            </span>\n          </div>\n\n          <div className=\"col-span-12 md:col-span-10\">\n            <h1 className=\"text-[clamp(2.5rem,7.5vw,6.5rem)] font-medium leading-[0.95] tracking-tight\">\n              {en ? (\n                <>\n                  In the dark,\n                  <br />\n                  form becomes clear.\n                </>\n              ) : (\n                <>\n                  闇の中でこそ、\n                  <br />\n                  形は明瞭になる。\n                </>\n              )}\n            </h1>\n          </div>\n\n          <div className=\"col-span-12 grid grid-cols-1 gap-x-6 gap-y-8 border-t border-neutral-800 pt-8 md:grid-cols-12\">\n            <p className=\"col-span-12 max-w-md text-sm leading-relaxed text-neutral-400 md:col-span-6\">\n              {en\n                ? \"Truly minimal design holds together even when light and dark are reversed — same grid, same discipline.\"\n                : \"明暗を反転しても崩れない設計こそ、真にミニマルである。同じグリッド、同じ規律。\"}\n            </p>\n            <div className=\"col-span-12 flex items-center gap-6 md:col-span-6 md:justify-end\">\n              <a\n                href=\"#\"\n                className=\"inline-flex h-11 items-center justify-center bg-neutral-50 px-7 text-sm font-medium text-neutral-950 transition-colors hover:bg-neutral-200\"\n              >\n                {en ? \"Get started\" : \"はじめる\"}\n              </a>\n              <a\n                href=\"#\"\n                className=\"text-sm text-neutral-300 underline-offset-4 hover:underline\"\n              >\n                {en ? \"Docs →\" : \"ドキュメント →\"}\n              </a>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"w-full bg-neutral-950 font-sans text-neutral-50\">\n      <div class=\"mx-auto max-w-6xl px-6 py-24 md:py-32\">\n        <div class=\"grid grid-cols-12 gap-x-6 gap-y-16\">\n          <div class=\"col-span-12 flex items-baseline justify-between border-b border-neutral-800 pb-6\">\n            <span class=\"text-[11px] uppercase tracking-[0.25em] text-neutral-500\">\n              Inverted / Dark\n            </span>\n            <span class=\"text-[11px] tabular-nums uppercase tracking-[0.25em] text-neutral-500\">\n              09 — 12\n            </span>\n          </div>\n          <div class=\"col-span-12 md:col-span-10\">\n            <h1 class=\"text-[clamp(2.5rem,7.5vw,6.5rem)] font-medium leading-[0.95] tracking-tight\">\n              闇の中でこそ、\n              <br/>\n              形は明瞭になる。\n            </h1>\n          </div>\n          <div class=\"col-span-12 grid grid-cols-1 gap-x-6 gap-y-8 border-t border-neutral-800 pt-8 md:grid-cols-12\">\n            <p class=\"col-span-12 max-w-md text-sm leading-relaxed text-neutral-400 md:col-span-6\">\n              明暗を反転しても崩れない設計こそ、真にミニマルである。同じグリッド、同じ規律。\n            </p>\n            <div class=\"col-span-12 flex items-center gap-6 md:col-span-6 md:justify-end\">\n              <a href=\"#\" class=\"inline-flex h-11 items-center justify-center bg-neutral-50 px-7 text-sm font-medium text-neutral-950 transition-colors hover:bg-neutral-200\">\n                はじめる\n              </a>\n              <a href=\"#\" class=\"text-sm text-neutral-300 underline-offset-4 hover:underline\">\n                ドキュメント →\n              </a>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"w-full bg-neutral-950 font-sans text-neutral-50\">\n      <div class=\"mx-auto max-w-6xl px-6 py-24 md:py-32\">\n        <div class=\"grid grid-cols-12 gap-x-6 gap-y-16\">\n          <div class=\"col-span-12 flex items-baseline justify-between border-b border-neutral-800 pb-6\">\n            <span class=\"text-[11px] uppercase tracking-[0.25em] text-neutral-500\">\n              Inverted / Dark\n            </span>\n            <span class=\"text-[11px] tabular-nums uppercase tracking-[0.25em] text-neutral-500\">\n              09 — 12\n            </span>\n          </div>\n          <div class=\"col-span-12 md:col-span-10\">\n            <h1 class=\"text-[clamp(2.5rem,7.5vw,6.5rem)] font-medium leading-[0.95] tracking-tight\">\n              闇の中でこそ、\n              <br/>\n              形は明瞭になる。\n            </h1>\n          </div>\n          <div class=\"col-span-12 grid grid-cols-1 gap-x-6 gap-y-8 border-t border-neutral-800 pt-8 md:grid-cols-12\">\n            <p class=\"col-span-12 max-w-md text-sm leading-relaxed text-neutral-400 md:col-span-6\">\n              明暗を反転しても崩れない設計こそ、真にミニマルである。同じグリッド、同じ規律。\n            </p>\n            <div class=\"col-span-12 flex items-center gap-6 md:col-span-6 md:justify-end\">\n              <a href=\"#\" class=\"inline-flex h-11 items-center justify-center bg-neutral-50 px-7 text-sm font-medium text-neutral-950 transition-colors hover:bg-neutral-200\">\n                はじめる\n              </a>\n              <a href=\"#\" class=\"text-sm text-neutral-300 underline-offset-4 hover:underline\">\n                ドキュメント →\n              </a>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "minimal-label-badge-set",
@@ -1155,7 +1155,7 @@
       ],
       "standalone": true,
       "source": "import { ArrowUpRight, Check } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"ラベル・バッジ集\",\n  category: \"ミニマル\",\n  description: \"ミニマルなラベル・タグ・バッジの一式。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"minimal\", \"swiss\", \"badge\"],\n  principle: \"形状を最小化し、種別差を罫線と無彩色の濃淡だけで表現する。\",\n};\n\nexport default function LabelBadgeSet() {\n  return (\n    <div className=\"w-full max-w-md space-y-10 bg-white font-sans text-neutral-900\">\n      <section>\n        <div className=\"mb-4 text-[11px] uppercase tracking-[0.25em] text-neutral-400\">\n          Labels\n        </div>\n        <div className=\"flex flex-wrap gap-2\">\n          {[\"Design\", \"Type\", \"Grid\", \"Color\", \"Motion\"].map((l) => (\n            <span\n              key={l}\n              className=\"border border-neutral-200 px-3 py-1 text-[11px] uppercase tracking-[0.15em] text-neutral-600\"\n            >\n              {l}\n            </span>\n          ))}\n        </div>\n      </section>\n\n      <section>\n        <div className=\"mb-4 text-[11px] uppercase tracking-[0.25em] text-neutral-400\">\n          Status\n        </div>\n        <div className=\"flex flex-wrap items-center gap-2\">\n          <span className=\"inline-flex items-center gap-1.5 bg-neutral-900 px-2.5 py-1 text-[11px] font-medium uppercase tracking-[0.15em] text-neutral-50\">\n            <Check className=\"size-3\" />\n            Stable\n          </span>\n          <span className=\"inline-flex items-center gap-1.5 border border-neutral-300 px-2.5 py-1 text-[11px] font-medium uppercase tracking-[0.15em] text-neutral-700\">\n            Beta\n          </span>\n          <span className=\"inline-flex items-center gap-1.5 px-1 text-[11px] font-medium uppercase tracking-[0.15em] text-[#e5341a]\">\n            <span className=\"size-1.5 rounded-full bg-[#e5341a]\" />\n            New\n          </span>\n        </div>\n      </section>\n\n      <section>\n        <div className=\"mb-4 text-[11px] uppercase tracking-[0.25em] text-neutral-400\">\n          Counters\n        </div>\n        <div className=\"flex flex-wrap items-center gap-2\">\n          {[\n            { k: \"Issues\", v: \"012\" },\n            { k: \"PRs\", v: \"07\" },\n            { k: \"Stars\", v: \"248\" },\n          ].map((c) => (\n            <span\n              key={c.k}\n              className=\"inline-flex items-center gap-2 border border-neutral-200 py-1 pl-3 pr-1 text-[11px] uppercase tracking-[0.15em] text-neutral-600\"\n            >\n              {c.k}\n              <span className=\"bg-neutral-100 px-2 py-0.5 tabular-nums text-neutral-900\">\n                {c.v}\n              </span>\n            </span>\n          ))}\n        </div>\n      </section>\n\n      <section>\n        <div className=\"mb-4 text-[11px] uppercase tracking-[0.25em] text-neutral-400\">\n          Tags\n        </div>\n        <div className=\"flex flex-wrap gap-x-4 gap-y-1\">\n          {[\"minimal\", \"swiss\", \"monochrome\", \"grid\"].map((t) => (\n            <a\n              key={t}\n              href=\"#\"\n              className=\"group inline-flex items-center gap-0.5 text-sm text-neutral-700 hover:text-neutral-900\"\n            >\n              <span className=\"text-neutral-400\">#</span>\n              {t}\n              <ArrowUpRight className=\"size-3 text-neutral-300 transition-colors group-hover:text-neutral-900\" />\n            </a>\n          ))}\n        </div>\n      </section>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"w-full max-w-md space-y-10 bg-white font-sans text-neutral-900\">\n      <section>\n        <div class=\"mb-4 text-[11px] uppercase tracking-[0.25em] text-neutral-400\">\n          Labels\n        </div>\n        <div class=\"flex flex-wrap gap-2\">\n          <span class=\"border border-neutral-200 px-3 py-1 text-[11px] uppercase tracking-[0.15em] text-neutral-600\">\n            Design\n          </span>\n          <span class=\"border border-neutral-200 px-3 py-1 text-[11px] uppercase tracking-[0.15em] text-neutral-600\">\n            Type\n          </span>\n          <span class=\"border border-neutral-200 px-3 py-1 text-[11px] uppercase tracking-[0.15em] text-neutral-600\">\n            Grid\n          </span>\n          <span class=\"border border-neutral-200 px-3 py-1 text-[11px] uppercase tracking-[0.15em] text-neutral-600\">\n            Color\n          </span>\n          <span class=\"border border-neutral-200 px-3 py-1 text-[11px] uppercase tracking-[0.15em] text-neutral-600\">\n            Motion\n          </span>\n        </div>\n      </section>\n      <section>\n        <div class=\"mb-4 text-[11px] uppercase tracking-[0.25em] text-neutral-400\">\n          Status\n        </div>\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <span class=\"inline-flex items-center gap-1.5 bg-neutral-900 px-2.5 py-1 text-[11px] font-medium uppercase tracking-[0.15em] text-neutral-50\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3\">\n              <path d=\"M20 6 9 17l-5-5\">\n              </path>\n            </svg>\n            Stable\n          </span>\n          <span class=\"inline-flex items-center gap-1.5 border border-neutral-300 px-2.5 py-1 text-[11px] font-medium uppercase tracking-[0.15em] text-neutral-700\">\n            Beta\n          </span>\n          <span class=\"inline-flex items-center gap-1.5 px-1 text-[11px] font-medium uppercase tracking-[0.15em] text-[#e5341a]\">\n            <span class=\"size-1.5 rounded-full bg-[#e5341a]\">\n            </span>\n            New\n          </span>\n        </div>\n      </section>\n      <section>\n        <div class=\"mb-4 text-[11px] uppercase tracking-[0.25em] text-neutral-400\">\n          Counters\n        </div>\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <span class=\"inline-flex items-center gap-2 border border-neutral-200 py-1 pl-3 pr-1 text-[11px] uppercase tracking-[0.15em] text-neutral-600\">\n            Issues\n            <span class=\"bg-neutral-100 px-2 py-0.5 tabular-nums text-neutral-900\">\n              012\n            </span>\n          </span>\n          <span class=\"inline-flex items-center gap-2 border border-neutral-200 py-1 pl-3 pr-1 text-[11px] uppercase tracking-[0.15em] text-neutral-600\">\n            PRs\n            <span class=\"bg-neutral-100 px-2 py-0.5 tabular-nums text-neutral-900\">\n              07\n            </span>\n          </span>\n          <span class=\"inline-flex items-center gap-2 border border-neutral-200 py-1 pl-3 pr-1 text-[11px] uppercase tracking-[0.15em] text-neutral-600\">\n            Stars\n            <span class=\"bg-neutral-100 px-2 py-0.5 tabular-nums text-neutral-900\">\n              248\n            </span>\n          </span>\n        </div>\n      </section>\n      <section>\n        <div class=\"mb-4 text-[11px] uppercase tracking-[0.25em] text-neutral-400\">\n          Tags\n        </div>\n        <div class=\"flex flex-wrap gap-x-4 gap-y-1\">\n          <a href=\"#\" class=\"group inline-flex items-center gap-0.5 text-sm text-neutral-700 hover:text-neutral-900\">\n            <span class=\"text-neutral-400\">\n              #\n            </span>\n            minimal\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-up-right size-3 text-neutral-300 transition-colors group-hover:text-neutral-900\">\n              <path d=\"M7 7h10v10\">\n              </path>\n              <path d=\"M7 17 17 7\">\n              </path>\n            </svg>\n          </a>\n          <a href=\"#\" class=\"group inline-flex items-center gap-0.5 text-sm text-neutral-700 hover:text-neutral-900\">\n            <span class=\"text-neutral-400\">\n              #\n            </span>\n            swiss\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-up-right size-3 text-neutral-300 transition-colors group-hover:text-neutral-900\">\n              <path d=\"M7 7h10v10\">\n              </path>\n              <path d=\"M7 17 17 7\">\n              </path>\n            </svg>\n          </a>\n          <a href=\"#\" class=\"group inline-flex items-center gap-0.5 text-sm text-neutral-700 hover:text-neutral-900\">\n            <span class=\"text-neutral-400\">\n              #\n            </span>\n            monochrome\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-up-right size-3 text-neutral-300 transition-colors group-hover:text-neutral-900\">\n              <path d=\"M7 7h10v10\">\n              </path>\n              <path d=\"M7 17 17 7\">\n              </path>\n            </svg>\n          </a>\n          <a href=\"#\" class=\"group inline-flex items-center gap-0.5 text-sm text-neutral-700 hover:text-neutral-900\">\n            <span class=\"text-neutral-400\">\n              #\n            </span>\n            grid\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-up-right size-3 text-neutral-300 transition-colors group-hover:text-neutral-900\">\n              <path d=\"M7 7h10v10\">\n              </path>\n              <path d=\"M7 17 17 7\">\n              </path>\n            </svg>\n          </a>\n        </div>\n      </section>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"w-full max-w-md space-y-10 bg-white font-sans text-neutral-900\">\n      <section>\n        <div class=\"mb-4 text-[11px] uppercase tracking-[0.25em] text-neutral-400\">\n          Labels\n        </div>\n        <div class=\"flex flex-wrap gap-2\">\n          <span class=\"border border-neutral-200 px-3 py-1 text-[11px] uppercase tracking-[0.15em] text-neutral-600\">\n            Design\n          </span>\n          <span class=\"border border-neutral-200 px-3 py-1 text-[11px] uppercase tracking-[0.15em] text-neutral-600\">\n            Type\n          </span>\n          <span class=\"border border-neutral-200 px-3 py-1 text-[11px] uppercase tracking-[0.15em] text-neutral-600\">\n            Grid\n          </span>\n          <span class=\"border border-neutral-200 px-3 py-1 text-[11px] uppercase tracking-[0.15em] text-neutral-600\">\n            Color\n          </span>\n          <span class=\"border border-neutral-200 px-3 py-1 text-[11px] uppercase tracking-[0.15em] text-neutral-600\">\n            Motion\n          </span>\n        </div>\n      </section>\n      <section>\n        <div class=\"mb-4 text-[11px] uppercase tracking-[0.25em] text-neutral-400\">\n          Status\n        </div>\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <span class=\"inline-flex items-center gap-1.5 bg-neutral-900 px-2.5 py-1 text-[11px] font-medium uppercase tracking-[0.15em] text-neutral-50\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3\">\n              <path d=\"M20 6 9 17l-5-5\">\n              </path>\n            </svg>\n            Stable\n          </span>\n          <span class=\"inline-flex items-center gap-1.5 border border-neutral-300 px-2.5 py-1 text-[11px] font-medium uppercase tracking-[0.15em] text-neutral-700\">\n            Beta\n          </span>\n          <span class=\"inline-flex items-center gap-1.5 px-1 text-[11px] font-medium uppercase tracking-[0.15em] text-[#e5341a]\">\n            <span class=\"size-1.5 rounded-full bg-[#e5341a]\">\n            </span>\n            New\n          </span>\n        </div>\n      </section>\n      <section>\n        <div class=\"mb-4 text-[11px] uppercase tracking-[0.25em] text-neutral-400\">\n          Counters\n        </div>\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <span class=\"inline-flex items-center gap-2 border border-neutral-200 py-1 pl-3 pr-1 text-[11px] uppercase tracking-[0.15em] text-neutral-600\">\n            Issues\n            <span class=\"bg-neutral-100 px-2 py-0.5 tabular-nums text-neutral-900\">\n              012\n            </span>\n          </span>\n          <span class=\"inline-flex items-center gap-2 border border-neutral-200 py-1 pl-3 pr-1 text-[11px] uppercase tracking-[0.15em] text-neutral-600\">\n            PRs\n            <span class=\"bg-neutral-100 px-2 py-0.5 tabular-nums text-neutral-900\">\n              07\n            </span>\n          </span>\n          <span class=\"inline-flex items-center gap-2 border border-neutral-200 py-1 pl-3 pr-1 text-[11px] uppercase tracking-[0.15em] text-neutral-600\">\n            Stars\n            <span class=\"bg-neutral-100 px-2 py-0.5 tabular-nums text-neutral-900\">\n              248\n            </span>\n          </span>\n        </div>\n      </section>\n      <section>\n        <div class=\"mb-4 text-[11px] uppercase tracking-[0.25em] text-neutral-400\">\n          Tags\n        </div>\n        <div class=\"flex flex-wrap gap-x-4 gap-y-1\">\n          <a href=\"#\" class=\"group inline-flex items-center gap-0.5 text-sm text-neutral-700 hover:text-neutral-900\">\n            <span class=\"text-neutral-400\">\n              #\n            </span>\n            minimal\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-up-right size-3 text-neutral-300 transition-colors group-hover:text-neutral-900\">\n              <path d=\"M7 7h10v10\">\n              </path>\n              <path d=\"M7 17 17 7\">\n              </path>\n            </svg>\n          </a>\n          <a href=\"#\" class=\"group inline-flex items-center gap-0.5 text-sm text-neutral-700 hover:text-neutral-900\">\n            <span class=\"text-neutral-400\">\n              #\n            </span>\n            swiss\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-up-right size-3 text-neutral-300 transition-colors group-hover:text-neutral-900\">\n              <path d=\"M7 7h10v10\">\n              </path>\n              <path d=\"M7 17 17 7\">\n              </path>\n            </svg>\n          </a>\n          <a href=\"#\" class=\"group inline-flex items-center gap-0.5 text-sm text-neutral-700 hover:text-neutral-900\">\n            <span class=\"text-neutral-400\">\n              #\n            </span>\n            monochrome\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-up-right size-3 text-neutral-300 transition-colors group-hover:text-neutral-900\">\n              <path d=\"M7 7h10v10\">\n              </path>\n              <path d=\"M7 17 17 7\">\n              </path>\n            </svg>\n          </a>\n          <a href=\"#\" class=\"group inline-flex items-center gap-0.5 text-sm text-neutral-700 hover:text-neutral-900\">\n            <span class=\"text-neutral-400\">\n              #\n            </span>\n            grid\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-up-right size-3 text-neutral-300 transition-colors group-hover:text-neutral-900\">\n              <path d=\"M7 7h10v10\">\n              </path>\n              <path d=\"M7 17 17 7\">\n              </path>\n            </svg>\n          </a>\n        </div>\n      </section>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "neumorphism-soft-pricing",
@@ -1169,7 +1169,7 @@
       ],
       "standalone": true,
       "source": "import { Check, Sparkles } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"ソフトUI価格表\",\n  category: \"ニューモーフィズム\",\n  description: \"中央のプランをインセットで強調した、3枚の柔らかな価格カード。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"neumorphism\", \"soft-ui\", \"pricing\"],\n};\n\nconst RAISED = \"shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]\";\nconst INSET = \"shadow-[inset_6px_6px_12px_#a3b1c6,inset_-6px_-6px_12px_#ffffff]\";\n\nconst plans = [\n  {\n    name: \"スターター\",\n    nameEn: \"Starter\",\n    price: \"¥0\",\n    period: \"/月\",\n    periodEn: \"/mo\",\n    desc: \"個人で始める方に\",\n    descEn: \"For individuals getting started\",\n    features: [\n      { ja: \"3プロジェクト\", en: \"3 projects\" },\n      { ja: \"1GB ストレージ\", en: \"1GB storage\" },\n      { ja: \"コミュニティ支援\", en: \"Community support\" },\n    ],\n    featured: false,\n  },\n  {\n    name: \"プロ\",\n    nameEn: \"Pro\",\n    price: \"¥1,800\",\n    period: \"/月\",\n    periodEn: \"/mo\",\n    desc: \"成長するチームに\",\n    descEn: \"For growing teams\",\n    features: [\n      { ja: \"無制限プロジェクト\", en: \"Unlimited projects\" },\n      { ja: \"100GB ストレージ\", en: \"100GB storage\" },\n      { ja: \"優先サポート\", en: \"Priority support\" },\n      { ja: \"高度な分析\", en: \"Advanced analytics\" },\n    ],\n    featured: true,\n  },\n  {\n    name: \"エンタープライズ\",\n    nameEn: \"Enterprise\",\n    price: \"¥6,400\",\n    period: \"/月\",\n    periodEn: \"/mo\",\n    desc: \"大規模組織に\",\n    descEn: \"For large organizations\",\n    features: [\n      { ja: \"SSO / SAML\", en: \"SSO / SAML\" },\n      { ja: \"専任担当\", en: \"Dedicated manager\" },\n      { ja: \"SLA 99.9%\", en: \"99.9% SLA\" },\n      { ja: \"監査ログ\", en: \"Audit logs\" },\n    ],\n    featured: false,\n  },\n];\n\nexport default function SoftPricing() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <div className=\"w-full rounded-3xl bg-[#e0e5ec] p-6 text-slate-600 sm:p-10\">\n      <div className=\"text-center\">\n        <h3 className=\"text-2xl font-bold tracking-tight text-slate-700\">\n          {en ? \"Pricing plans\" : \"料金プラン\"}\n        </h3>\n        <p className=\"mt-2 text-sm text-slate-500\">\n          {en\n            ? \"Upgrade or downgrade anytime.\"\n            : \"いつでもアップグレード・ダウングレード可能。\"}\n        </p>\n      </div>\n\n      <div className=\"mt-8 grid items-center gap-6 lg:grid-cols-3\">\n        {plans.map((p) => (\n          <div\n            key={p.name}\n            className={cn(\n              \"rounded-3xl bg-[#e0e5ec] p-7 transition\",\n              p.featured ? cn(INSET, \"lg:scale-105\") : RAISED,\n            )}\n          >\n            {p.featured && (\n              <span className=\"inline-flex items-center gap-1.5 rounded-full bg-[#e0e5ec] px-3 py-1 text-xs font-semibold text-indigo-500 shadow-[3px_3px_6px_#a3b1c6,-3px_-3px_6px_#ffffff]\">\n                <Sparkles className=\"size-3.5\" />\n                {en ? \"Popular\" : \"人気\"}\n              </span>\n            )}\n            <h4 className=\"mt-4 text-lg font-semibold text-slate-700\">{en ? p.nameEn : p.name}</h4>\n            <p className=\"text-sm text-slate-500\">{en ? p.descEn : p.desc}</p>\n            <div className=\"mt-5 flex items-end gap-1\">\n              <span className=\"text-4xl font-bold tracking-tight text-slate-700\">{p.price}</span>\n              <span className=\"pb-1 text-sm text-slate-500\">{en ? p.periodEn : p.period}</span>\n            </div>\n\n            <ul className=\"mt-6 space-y-3\">\n              {p.features.map((f) => (\n                <li key={f.en} className=\"flex items-center gap-3 text-sm text-slate-600\">\n                  <span\n                    className={cn(\n                      \"grid size-6 shrink-0 place-items-center rounded-full bg-[#e0e5ec] text-indigo-500\",\n                      \"shadow-[2px_2px_4px_#a3b1c6,-2px_-2px_4px_#ffffff]\",\n                    )}\n                  >\n                    <Check className=\"size-3.5\" />\n                  </span>\n                  {en ? f.en : f.ja}\n                </li>\n              ))}\n            </ul>\n\n            <button\n              className={cn(\n                \"mt-7 w-full rounded-2xl bg-[#e0e5ec] py-3 text-sm font-semibold transition active:scale-[0.98]\",\n                p.featured\n                  ? \"text-indigo-600 shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]\"\n                  : cn(\"text-slate-600\", RAISED),\n              )}\n            >\n              {p.featured ? (en ? \"Choose Pro\" : \"プロを選ぶ\") : en ? \"Select\" : \"選択する\"}\n            </button>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"w-full rounded-3xl bg-[#e0e5ec] p-6 text-slate-600 sm:p-10\">\n      <div class=\"text-center\">\n        <h3 class=\"text-2xl font-bold tracking-tight text-slate-700\">\n          料金プラン\n        </h3>\n        <p class=\"mt-2 text-sm text-slate-500\">\n          いつでもアップグレード・ダウングレード可能。\n        </p>\n      </div>\n      <div class=\"mt-8 grid items-center gap-6 lg:grid-cols-3\">\n        <div class=\"rounded-3xl bg-[#e0e5ec] p-7 transition shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]\">\n          <h4 class=\"mt-4 text-lg font-semibold text-slate-700\">\n            スターター\n          </h4>\n          <p class=\"text-sm text-slate-500\">\n            個人で始める方に\n          </p>\n          <div class=\"mt-5 flex items-end gap-1\">\n            <span class=\"text-4xl font-bold tracking-tight text-slate-700\">\n              ¥0\n            </span>\n            <span class=\"pb-1 text-sm text-slate-500\">\n              /月\n            </span>\n          </div>\n          <ul class=\"mt-6 space-y-3\">\n            <li class=\"flex items-center gap-3 text-sm text-slate-600\">\n              <span class=\"grid size-6 shrink-0 place-items-center rounded-full bg-[#e0e5ec] text-indigo-500 shadow-[2px_2px_4px_#a3b1c6,-2px_-2px_4px_#ffffff]\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3.5\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n              3プロジェクト\n            </li>\n            <li class=\"flex items-center gap-3 text-sm text-slate-600\">\n              <span class=\"grid size-6 shrink-0 place-items-center rounded-full bg-[#e0e5ec] text-indigo-500 shadow-[2px_2px_4px_#a3b1c6,-2px_-2px_4px_#ffffff]\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3.5\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n              1GB ストレージ\n            </li>\n            <li class=\"flex items-center gap-3 text-sm text-slate-600\">\n              <span class=\"grid size-6 shrink-0 place-items-center rounded-full bg-[#e0e5ec] text-indigo-500 shadow-[2px_2px_4px_#a3b1c6,-2px_-2px_4px_#ffffff]\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3.5\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n              コミュニティ支援\n            </li>\n          </ul>\n          <button class=\"mt-7 w-full rounded-2xl bg-[#e0e5ec] py-3 text-sm font-semibold transition active:scale-[0.98] text-slate-600 shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]\">\n            選択する\n          </button>\n        </div>\n        <div class=\"rounded-3xl bg-[#e0e5ec] p-7 transition shadow-[inset_6px_6px_12px_#a3b1c6,inset_-6px_-6px_12px_#ffffff] lg:scale-105\">\n          <span class=\"inline-flex items-center gap-1.5 rounded-full bg-[#e0e5ec] px-3 py-1 text-xs font-semibold text-indigo-500 shadow-[3px_3px_6px_#a3b1c6,-3px_-3px_6px_#ffffff]\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5\">\n              <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n              </path>\n              <path d=\"M20 3v4\">\n              </path>\n              <path d=\"M22 5h-4\">\n              </path>\n              <path d=\"M4 17v2\">\n              </path>\n              <path d=\"M5 18H3\">\n              </path>\n            </svg>\n            人気\n          </span>\n          <h4 class=\"mt-4 text-lg font-semibold text-slate-700\">\n            プロ\n          </h4>\n          <p class=\"text-sm text-slate-500\">\n            成長するチームに\n          </p>\n          <div class=\"mt-5 flex items-end gap-1\">\n            <span class=\"text-4xl font-bold tracking-tight text-slate-700\">\n              ¥1,800\n            </span>\n            <span class=\"pb-1 text-sm text-slate-500\">\n              /月\n            </span>\n          </div>\n          <ul class=\"mt-6 space-y-3\">\n            <li class=\"flex items-center gap-3 text-sm text-slate-600\">\n              <span class=\"grid size-6 shrink-0 place-items-center rounded-full bg-[#e0e5ec] text-indigo-500 shadow-[2px_2px_4px_#a3b1c6,-2px_-2px_4px_#ffffff]\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3.5\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n              無制限プロジェクト\n            </li>\n            <li class=\"flex items-center gap-3 text-sm text-slate-600\">\n              <span class=\"grid size-6 shrink-0 place-items-center rounded-full bg-[#e0e5ec] text-indigo-500 shadow-[2px_2px_4px_#a3b1c6,-2px_-2px_4px_#ffffff]\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3.5\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n              100GB ストレージ\n            </li>\n            <li class=\"flex items-center gap-3 text-sm text-slate-600\">\n              <span class=\"grid size-6 shrink-0 place-items-center rounded-full bg-[#e0e5ec] text-indigo-500 shadow-[2px_2px_4px_#a3b1c6,-2px_-2px_4px_#ffffff]\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3.5\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n              優先サポート\n            </li>\n            <li class=\"flex items-center gap-3 text-sm text-slate-600\">\n              <span class=\"grid size-6 shrink-0 place-items-center rounded-full bg-[#e0e5ec] text-indigo-500 shadow-[2px_2px_4px_#a3b1c6,-2px_-2px_4px_#ffffff]\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3.5\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n              高度な分析\n            </li>\n          </ul>\n          <button class=\"mt-7 w-full rounded-2xl bg-[#e0e5ec] py-3 text-sm font-semibold transition active:scale-[0.98] text-indigo-600 shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]\">\n            プロを選ぶ\n          </button>\n        </div>\n        <div class=\"rounded-3xl bg-[#e0e5ec] p-7 transition shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]\">\n          <h4 class=\"mt-4 text-lg font-semibold text-slate-700\">\n            エンタープライズ\n          </h4>\n          <p class=\"text-sm text-slate-500\">\n            大規模組織に\n          </p>\n          <div class=\"mt-5 flex items-end gap-1\">\n            <span class=\"text-4xl font-bold tracking-tight text-slate-700\">\n              ¥6,400\n            </span>\n            <span class=\"pb-1 text-sm text-slate-500\">\n              /月\n            </span>\n          </div>\n          <ul class=\"mt-6 space-y-3\">\n            <li class=\"flex items-center gap-3 text-sm text-slate-600\">\n              <span class=\"grid size-6 shrink-0 place-items-center rounded-full bg-[#e0e5ec] text-indigo-500 shadow-[2px_2px_4px_#a3b1c6,-2px_-2px_4px_#ffffff]\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3.5\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n              SSO / SAML\n            </li>\n            <li class=\"flex items-center gap-3 text-sm text-slate-600\">\n              <span class=\"grid size-6 shrink-0 place-items-center rounded-full bg-[#e0e5ec] text-indigo-500 shadow-[2px_2px_4px_#a3b1c6,-2px_-2px_4px_#ffffff]\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3.5\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n              専任担当\n            </li>\n            <li class=\"flex items-center gap-3 text-sm text-slate-600\">\n              <span class=\"grid size-6 shrink-0 place-items-center rounded-full bg-[#e0e5ec] text-indigo-500 shadow-[2px_2px_4px_#a3b1c6,-2px_-2px_4px_#ffffff]\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3.5\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n              SLA 99.9%\n            </li>\n            <li class=\"flex items-center gap-3 text-sm text-slate-600\">\n              <span class=\"grid size-6 shrink-0 place-items-center rounded-full bg-[#e0e5ec] text-indigo-500 shadow-[2px_2px_4px_#a3b1c6,-2px_-2px_4px_#ffffff]\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3.5\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n              監査ログ\n            </li>\n          </ul>\n          <button class=\"mt-7 w-full rounded-2xl bg-[#e0e5ec] py-3 text-sm font-semibold transition active:scale-[0.98] text-slate-600 shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]\">\n            選択する\n          </button>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"w-full rounded-3xl bg-[#e0e5ec] p-6 text-slate-600 sm:p-10\">\n      <div class=\"text-center\">\n        <h3 class=\"text-2xl font-bold tracking-tight text-slate-700\">\n          料金プラン\n        </h3>\n        <p class=\"mt-2 text-sm text-slate-500\">\n          いつでもアップグレード・ダウングレード可能。\n        </p>\n      </div>\n      <div class=\"mt-8 grid items-center gap-6 lg:grid-cols-3\">\n        <div class=\"rounded-3xl bg-[#e0e5ec] p-7 transition shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]\">\n          <h4 class=\"mt-4 text-lg font-semibold text-slate-700\">\n            スターター\n          </h4>\n          <p class=\"text-sm text-slate-500\">\n            個人で始める方に\n          </p>\n          <div class=\"mt-5 flex items-end gap-1\">\n            <span class=\"text-4xl font-bold tracking-tight text-slate-700\">\n              ¥0\n            </span>\n            <span class=\"pb-1 text-sm text-slate-500\">\n              /月\n            </span>\n          </div>\n          <ul class=\"mt-6 space-y-3\">\n            <li class=\"flex items-center gap-3 text-sm text-slate-600\">\n              <span class=\"grid size-6 shrink-0 place-items-center rounded-full bg-[#e0e5ec] text-indigo-500 shadow-[2px_2px_4px_#a3b1c6,-2px_-2px_4px_#ffffff]\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3.5\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n              3プロジェクト\n            </li>\n            <li class=\"flex items-center gap-3 text-sm text-slate-600\">\n              <span class=\"grid size-6 shrink-0 place-items-center rounded-full bg-[#e0e5ec] text-indigo-500 shadow-[2px_2px_4px_#a3b1c6,-2px_-2px_4px_#ffffff]\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3.5\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n              1GB ストレージ\n            </li>\n            <li class=\"flex items-center gap-3 text-sm text-slate-600\">\n              <span class=\"grid size-6 shrink-0 place-items-center rounded-full bg-[#e0e5ec] text-indigo-500 shadow-[2px_2px_4px_#a3b1c6,-2px_-2px_4px_#ffffff]\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3.5\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n              コミュニティ支援\n            </li>\n          </ul>\n          <button class=\"mt-7 w-full rounded-2xl bg-[#e0e5ec] py-3 text-sm font-semibold transition active:scale-[0.98] text-slate-600 shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]\">\n            選択する\n          </button>\n        </div>\n        <div class=\"rounded-3xl bg-[#e0e5ec] p-7 transition shadow-[inset_6px_6px_12px_#a3b1c6,inset_-6px_-6px_12px_#ffffff] lg:scale-105\">\n          <span class=\"inline-flex items-center gap-1.5 rounded-full bg-[#e0e5ec] px-3 py-1 text-xs font-semibold text-indigo-500 shadow-[3px_3px_6px_#a3b1c6,-3px_-3px_6px_#ffffff]\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5\">\n              <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n              </path>\n              <path d=\"M20 3v4\">\n              </path>\n              <path d=\"M22 5h-4\">\n              </path>\n              <path d=\"M4 17v2\">\n              </path>\n              <path d=\"M5 18H3\">\n              </path>\n            </svg>\n            人気\n          </span>\n          <h4 class=\"mt-4 text-lg font-semibold text-slate-700\">\n            プロ\n          </h4>\n          <p class=\"text-sm text-slate-500\">\n            成長するチームに\n          </p>\n          <div class=\"mt-5 flex items-end gap-1\">\n            <span class=\"text-4xl font-bold tracking-tight text-slate-700\">\n              ¥1,800\n            </span>\n            <span class=\"pb-1 text-sm text-slate-500\">\n              /月\n            </span>\n          </div>\n          <ul class=\"mt-6 space-y-3\">\n            <li class=\"flex items-center gap-3 text-sm text-slate-600\">\n              <span class=\"grid size-6 shrink-0 place-items-center rounded-full bg-[#e0e5ec] text-indigo-500 shadow-[2px_2px_4px_#a3b1c6,-2px_-2px_4px_#ffffff]\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3.5\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n              無制限プロジェクト\n            </li>\n            <li class=\"flex items-center gap-3 text-sm text-slate-600\">\n              <span class=\"grid size-6 shrink-0 place-items-center rounded-full bg-[#e0e5ec] text-indigo-500 shadow-[2px_2px_4px_#a3b1c6,-2px_-2px_4px_#ffffff]\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3.5\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n              100GB ストレージ\n            </li>\n            <li class=\"flex items-center gap-3 text-sm text-slate-600\">\n              <span class=\"grid size-6 shrink-0 place-items-center rounded-full bg-[#e0e5ec] text-indigo-500 shadow-[2px_2px_4px_#a3b1c6,-2px_-2px_4px_#ffffff]\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3.5\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n              優先サポート\n            </li>\n            <li class=\"flex items-center gap-3 text-sm text-slate-600\">\n              <span class=\"grid size-6 shrink-0 place-items-center rounded-full bg-[#e0e5ec] text-indigo-500 shadow-[2px_2px_4px_#a3b1c6,-2px_-2px_4px_#ffffff]\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3.5\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n              高度な分析\n            </li>\n          </ul>\n          <button class=\"mt-7 w-full rounded-2xl bg-[#e0e5ec] py-3 text-sm font-semibold transition active:scale-[0.98] text-indigo-600 shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]\">\n            プロを選ぶ\n          </button>\n        </div>\n        <div class=\"rounded-3xl bg-[#e0e5ec] p-7 transition shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]\">\n          <h4 class=\"mt-4 text-lg font-semibold text-slate-700\">\n            エンタープライズ\n          </h4>\n          <p class=\"text-sm text-slate-500\">\n            大規模組織に\n          </p>\n          <div class=\"mt-5 flex items-end gap-1\">\n            <span class=\"text-4xl font-bold tracking-tight text-slate-700\">\n              ¥6,400\n            </span>\n            <span class=\"pb-1 text-sm text-slate-500\">\n              /月\n            </span>\n          </div>\n          <ul class=\"mt-6 space-y-3\">\n            <li class=\"flex items-center gap-3 text-sm text-slate-600\">\n              <span class=\"grid size-6 shrink-0 place-items-center rounded-full bg-[#e0e5ec] text-indigo-500 shadow-[2px_2px_4px_#a3b1c6,-2px_-2px_4px_#ffffff]\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3.5\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n              SSO / SAML\n            </li>\n            <li class=\"flex items-center gap-3 text-sm text-slate-600\">\n              <span class=\"grid size-6 shrink-0 place-items-center rounded-full bg-[#e0e5ec] text-indigo-500 shadow-[2px_2px_4px_#a3b1c6,-2px_-2px_4px_#ffffff]\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3.5\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n              専任担当\n            </li>\n            <li class=\"flex items-center gap-3 text-sm text-slate-600\">\n              <span class=\"grid size-6 shrink-0 place-items-center rounded-full bg-[#e0e5ec] text-indigo-500 shadow-[2px_2px_4px_#a3b1c6,-2px_-2px_4px_#ffffff]\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3.5\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n              SLA 99.9%\n            </li>\n            <li class=\"flex items-center gap-3 text-sm text-slate-600\">\n              <span class=\"grid size-6 shrink-0 place-items-center rounded-full bg-[#e0e5ec] text-indigo-500 shadow-[2px_2px_4px_#a3b1c6,-2px_-2px_4px_#ffffff]\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-3.5\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </span>\n              監査ログ\n            </li>\n          </ul>\n          <button class=\"mt-7 w-full rounded-2xl bg-[#e0e5ec] py-3 text-sm font-semibold transition active:scale-[0.98] text-slate-600 shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]\">\n            選択する\n          </button>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "neumorphism-soft-stats",
@@ -1184,7 +1184,7 @@
       ],
       "standalone": true,
       "source": "import { Activity, Droplet, Flame, Footprints } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"ソフト統計リング\",\n  category: \"ニューモーフィズム\",\n  description: \"押し込み式の進捗リング（SVG）を備えた、柔らかな統計タイル。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"neumorphism\", \"soft-ui\", \"stats\", \"rings\"],\n};\n\nconst RAISED = \"shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]\";\n\nconst stats = [\n  { icon: Footprints, label: \"歩数\", labelEn: \"Steps\", value: \"8,420\", pct: 72, accent: false },\n  { icon: Flame, label: \"消費カロリー\", labelEn: \"Calories\", value: \"612\", unit: \"kcal\", pct: 58, accent: true },\n  { icon: Activity, label: \"心拍\", labelEn: \"Heart rate\", value: \"74\", unit: \"bpm\", pct: 49, accent: false },\n  { icon: Droplet, label: \"水分\", labelEn: \"Water\", value: \"1.6\", unit: \"L\", pct: 64, accent: false },\n];\n\nfunction Ring({ pct, accent }: { pct: number; accent: boolean }) {\n  const r = 30;\n  const c = 2 * Math.PI * r;\n  const offset = c - (pct / 100) * c;\n  return (\n    <div className=\"relative grid size-[84px] place-items-center rounded-full bg-[#e0e5ec] shadow-[inset_4px_4px_8px_#a3b1c6,inset_-4px_-4px_8px_#ffffff]\">\n      <svg viewBox=\"0 0 80 80\" className=\"size-[72px] -rotate-90\">\n        <circle cx=\"40\" cy=\"40\" r={r} fill=\"none\" stroke=\"#cdd4de\" strokeWidth=\"7\" />\n        <circle\n          cx=\"40\"\n          cy=\"40\"\n          r={r}\n          fill=\"none\"\n          stroke={accent ? \"#6366f1\" : \"#94a3b8\"}\n          strokeWidth=\"7\"\n          strokeLinecap=\"round\"\n          strokeDasharray={c}\n          strokeDashoffset={offset}\n        />\n      </svg>\n      <span className=\"absolute text-sm font-bold text-slate-700\">{pct}%</span>\n    </div>\n  );\n}\n\nexport default function SoftStats() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <div className=\"w-full rounded-3xl bg-[#e0e5ec] p-6 text-slate-600 sm:p-8\">\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <h3 className=\"text-lg font-semibold text-slate-700\">\n            {en ? \"Today's activity\" : \"今日のアクティビティ\"}\n          </h3>\n          <p className=\"text-sm text-slate-500\">\n            {en ? \"Almost at your goal.\" : \"目標まであと一息。\"}\n          </p>\n        </div>\n        <span className=\"rounded-full bg-[#e0e5ec] px-3 py-1.5 text-xs font-semibold text-indigo-500 shadow-[3px_3px_6px_#a3b1c6,-3px_-3px_6px_#ffffff]\">\n          {en ? \"61% done\" : \"61% 達成\"}\n        </span>\n      </div>\n\n      <div className=\"mt-6 grid gap-5 sm:grid-cols-2 lg:grid-cols-4\">\n        {stats.map((s) => (\n          <div key={s.labelEn} className={cn(\"flex flex-col items-center rounded-2xl bg-[#e0e5ec] p-5 text-center\", RAISED)}>\n            <Ring pct={s.pct} accent={s.accent} />\n            <span className={cn(\"mt-4 inline-flex items-center gap-1.5 text-xs font-medium\", s.accent ? \"text-indigo-500\" : \"text-slate-500\")}>\n              <s.icon className=\"size-4\" />\n              {en ? s.labelEn : s.label}\n            </span>\n            <p className=\"mt-1 text-xl font-bold tracking-tight text-slate-700\">\n              {s.value}\n              {s.unit && <span className=\"ml-1 text-sm font-medium text-slate-500\">{s.unit}</span>}\n            </p>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"w-full rounded-3xl bg-[#e0e5ec] p-6 text-slate-600 sm:p-8\">\n      <div class=\"flex items-center justify-between\">\n        <div>\n          <h3 class=\"text-lg font-semibold text-slate-700\">\n            今日のアクティビティ\n          </h3>\n          <p class=\"text-sm text-slate-500\">\n            目標まであと一息。\n          </p>\n        </div>\n        <span class=\"rounded-full bg-[#e0e5ec] px-3 py-1.5 text-xs font-semibold text-indigo-500 shadow-[3px_3px_6px_#a3b1c6,-3px_-3px_6px_#ffffff]\">\n          61% 達成\n        </span>\n      </div>\n      <div class=\"mt-6 grid gap-5 sm:grid-cols-2 lg:grid-cols-4\">\n        <div class=\"flex flex-col items-center rounded-2xl bg-[#e0e5ec] p-5 text-center shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]\">\n          <div class=\"relative grid size-[84px] place-items-center rounded-full bg-[#e0e5ec] shadow-[inset_4px_4px_8px_#a3b1c6,inset_-4px_-4px_8px_#ffffff]\">\n            <svg viewBox=\"0 0 80 80\" class=\"size-[72px] -rotate-90\">\n              <circle cx=\"40\" cy=\"40\" r=\"30\" fill=\"none\" stroke=\"#cdd4de\" stroke-width=\"7\">\n              </circle>\n              <circle cx=\"40\" cy=\"40\" r=\"30\" fill=\"none\" stroke=\"#94a3b8\" stroke-width=\"7\" stroke-linecap=\"round\" stroke-dasharray=\"188.49555921538757\" stroke-dashoffset=\"52.77875658030854\">\n              </circle>\n            </svg>\n            <span class=\"absolute text-sm font-bold text-slate-700\">\n              72%\n            </span>\n          </div>\n          <span class=\"mt-4 inline-flex items-center gap-1.5 text-xs font-medium text-slate-500\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-footprints size-4\">\n              <path d=\"M4 16v-2.38C4 11.5 2.97 10.5 3 8c.03-2.72 1.49-6 4.5-6C9.37 2 10 3.8 10 5.5c0 3.11-2 5.66-2 8.68V16a2 2 0 1 1-4 0Z\">\n              </path>\n              <path d=\"M20 20v-2.38c0-2.12 1.03-3.12 1-5.62-.03-2.72-1.49-6-4.5-6C14.63 6 14 7.8 14 9.5c0 3.11 2 5.66 2 8.68V20a2 2 0 1 0 4 0Z\">\n              </path>\n              <path d=\"M16 17h4\">\n              </path>\n              <path d=\"M4 13h4\">\n              </path>\n            </svg>\n            歩数\n          </span>\n          <p class=\"mt-1 text-xl font-bold tracking-tight text-slate-700\">\n            8,420\n          </p>\n        </div>\n        <div class=\"flex flex-col items-center rounded-2xl bg-[#e0e5ec] p-5 text-center shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]\">\n          <div class=\"relative grid size-[84px] place-items-center rounded-full bg-[#e0e5ec] shadow-[inset_4px_4px_8px_#a3b1c6,inset_-4px_-4px_8px_#ffffff]\">\n            <svg viewBox=\"0 0 80 80\" class=\"size-[72px] -rotate-90\">\n              <circle cx=\"40\" cy=\"40\" r=\"30\" fill=\"none\" stroke=\"#cdd4de\" stroke-width=\"7\">\n              </circle>\n              <circle cx=\"40\" cy=\"40\" r=\"30\" fill=\"none\" stroke=\"#6366f1\" stroke-width=\"7\" stroke-linecap=\"round\" stroke-dasharray=\"188.49555921538757\" stroke-dashoffset=\"79.1681348704628\">\n              </circle>\n            </svg>\n            <span class=\"absolute text-sm font-bold text-slate-700\">\n              58%\n            </span>\n          </div>\n          <span class=\"mt-4 inline-flex items-center gap-1.5 text-xs font-medium text-indigo-500\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-flame size-4\">\n              <path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\">\n              </path>\n            </svg>\n            消費カロリー\n          </span>\n          <p class=\"mt-1 text-xl font-bold tracking-tight text-slate-700\">\n            612\n            <span class=\"ml-1 text-sm font-medium text-slate-500\">\n              kcal\n            </span>\n          </p>\n        </div>\n        <div class=\"flex flex-col items-center rounded-2xl bg-[#e0e5ec] p-5 text-center shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]\">\n          <div class=\"relative grid size-[84px] place-items-center rounded-full bg-[#e0e5ec] shadow-[inset_4px_4px_8px_#a3b1c6,inset_-4px_-4px_8px_#ffffff]\">\n            <svg viewBox=\"0 0 80 80\" class=\"size-[72px] -rotate-90\">\n              <circle cx=\"40\" cy=\"40\" r=\"30\" fill=\"none\" stroke=\"#cdd4de\" stroke-width=\"7\">\n              </circle>\n              <circle cx=\"40\" cy=\"40\" r=\"30\" fill=\"none\" stroke=\"#94a3b8\" stroke-width=\"7\" stroke-linecap=\"round\" stroke-dasharray=\"188.49555921538757\" stroke-dashoffset=\"96.13273519984766\">\n              </circle>\n            </svg>\n            <span class=\"absolute text-sm font-bold text-slate-700\">\n              49%\n            </span>\n          </div>\n          <span class=\"mt-4 inline-flex items-center gap-1.5 text-xs font-medium text-slate-500\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-activity size-4\">\n              <path d=\"M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2\">\n              </path>\n            </svg>\n            心拍\n          </span>\n          <p class=\"mt-1 text-xl font-bold tracking-tight text-slate-700\">\n            74\n            <span class=\"ml-1 text-sm font-medium text-slate-500\">\n              bpm\n            </span>\n          </p>\n        </div>\n        <div class=\"flex flex-col items-center rounded-2xl bg-[#e0e5ec] p-5 text-center shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]\">\n          <div class=\"relative grid size-[84px] place-items-center rounded-full bg-[#e0e5ec] shadow-[inset_4px_4px_8px_#a3b1c6,inset_-4px_-4px_8px_#ffffff]\">\n            <svg viewBox=\"0 0 80 80\" class=\"size-[72px] -rotate-90\">\n              <circle cx=\"40\" cy=\"40\" r=\"30\" fill=\"none\" stroke=\"#cdd4de\" stroke-width=\"7\">\n              </circle>\n              <circle cx=\"40\" cy=\"40\" r=\"30\" fill=\"none\" stroke=\"#94a3b8\" stroke-width=\"7\" stroke-linecap=\"round\" stroke-dasharray=\"188.49555921538757\" stroke-dashoffset=\"67.85840131753952\">\n              </circle>\n            </svg>\n            <span class=\"absolute text-sm font-bold text-slate-700\">\n              64%\n            </span>\n          </div>\n          <span class=\"mt-4 inline-flex items-center gap-1.5 text-xs font-medium text-slate-500\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-droplet size-4\">\n              <path d=\"M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z\">\n              </path>\n            </svg>\n            水分\n          </span>\n          <p class=\"mt-1 text-xl font-bold tracking-tight text-slate-700\">\n            1.6\n            <span class=\"ml-1 text-sm font-medium text-slate-500\">\n              L\n            </span>\n          </p>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"w-full rounded-3xl bg-[#e0e5ec] p-6 text-slate-600 sm:p-8\">\n      <div class=\"flex items-center justify-between\">\n        <div>\n          <h3 class=\"text-lg font-semibold text-slate-700\">\n            今日のアクティビティ\n          </h3>\n          <p class=\"text-sm text-slate-500\">\n            目標まであと一息。\n          </p>\n        </div>\n        <span class=\"rounded-full bg-[#e0e5ec] px-3 py-1.5 text-xs font-semibold text-indigo-500 shadow-[3px_3px_6px_#a3b1c6,-3px_-3px_6px_#ffffff]\">\n          61% 達成\n        </span>\n      </div>\n      <div class=\"mt-6 grid gap-5 sm:grid-cols-2 lg:grid-cols-4\">\n        <div class=\"flex flex-col items-center rounded-2xl bg-[#e0e5ec] p-5 text-center shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]\">\n          <div class=\"relative grid size-[84px] place-items-center rounded-full bg-[#e0e5ec] shadow-[inset_4px_4px_8px_#a3b1c6,inset_-4px_-4px_8px_#ffffff]\">\n            <svg viewBox=\"0 0 80 80\" class=\"size-[72px] -rotate-90\">\n              <circle cx=\"40\" cy=\"40\" r=\"30\" fill=\"none\" stroke=\"#cdd4de\" stroke-width=\"7\">\n              </circle>\n              <circle cx=\"40\" cy=\"40\" r=\"30\" fill=\"none\" stroke=\"#94a3b8\" stroke-width=\"7\" stroke-linecap=\"round\" stroke-dasharray=\"188.49555921538757\" stroke-dashoffset=\"52.77875658030854\">\n              </circle>\n            </svg>\n            <span class=\"absolute text-sm font-bold text-slate-700\">\n              72%\n            </span>\n          </div>\n          <span class=\"mt-4 inline-flex items-center gap-1.5 text-xs font-medium text-slate-500\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-footprints size-4\">\n              <path d=\"M4 16v-2.38C4 11.5 2.97 10.5 3 8c.03-2.72 1.49-6 4.5-6C9.37 2 10 3.8 10 5.5c0 3.11-2 5.66-2 8.68V16a2 2 0 1 1-4 0Z\">\n              </path>\n              <path d=\"M20 20v-2.38c0-2.12 1.03-3.12 1-5.62-.03-2.72-1.49-6-4.5-6C14.63 6 14 7.8 14 9.5c0 3.11 2 5.66 2 8.68V20a2 2 0 1 0 4 0Z\">\n              </path>\n              <path d=\"M16 17h4\">\n              </path>\n              <path d=\"M4 13h4\">\n              </path>\n            </svg>\n            歩数\n          </span>\n          <p class=\"mt-1 text-xl font-bold tracking-tight text-slate-700\">\n            8,420\n          </p>\n        </div>\n        <div class=\"flex flex-col items-center rounded-2xl bg-[#e0e5ec] p-5 text-center shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]\">\n          <div class=\"relative grid size-[84px] place-items-center rounded-full bg-[#e0e5ec] shadow-[inset_4px_4px_8px_#a3b1c6,inset_-4px_-4px_8px_#ffffff]\">\n            <svg viewBox=\"0 0 80 80\" class=\"size-[72px] -rotate-90\">\n              <circle cx=\"40\" cy=\"40\" r=\"30\" fill=\"none\" stroke=\"#cdd4de\" stroke-width=\"7\">\n              </circle>\n              <circle cx=\"40\" cy=\"40\" r=\"30\" fill=\"none\" stroke=\"#6366f1\" stroke-width=\"7\" stroke-linecap=\"round\" stroke-dasharray=\"188.49555921538757\" stroke-dashoffset=\"79.1681348704628\">\n              </circle>\n            </svg>\n            <span class=\"absolute text-sm font-bold text-slate-700\">\n              58%\n            </span>\n          </div>\n          <span class=\"mt-4 inline-flex items-center gap-1.5 text-xs font-medium text-indigo-500\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-flame size-4\">\n              <path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\">\n              </path>\n            </svg>\n            消費カロリー\n          </span>\n          <p class=\"mt-1 text-xl font-bold tracking-tight text-slate-700\">\n            612\n            <span class=\"ml-1 text-sm font-medium text-slate-500\">\n              kcal\n            </span>\n          </p>\n        </div>\n        <div class=\"flex flex-col items-center rounded-2xl bg-[#e0e5ec] p-5 text-center shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]\">\n          <div class=\"relative grid size-[84px] place-items-center rounded-full bg-[#e0e5ec] shadow-[inset_4px_4px_8px_#a3b1c6,inset_-4px_-4px_8px_#ffffff]\">\n            <svg viewBox=\"0 0 80 80\" class=\"size-[72px] -rotate-90\">\n              <circle cx=\"40\" cy=\"40\" r=\"30\" fill=\"none\" stroke=\"#cdd4de\" stroke-width=\"7\">\n              </circle>\n              <circle cx=\"40\" cy=\"40\" r=\"30\" fill=\"none\" stroke=\"#94a3b8\" stroke-width=\"7\" stroke-linecap=\"round\" stroke-dasharray=\"188.49555921538757\" stroke-dashoffset=\"96.13273519984766\">\n              </circle>\n            </svg>\n            <span class=\"absolute text-sm font-bold text-slate-700\">\n              49%\n            </span>\n          </div>\n          <span class=\"mt-4 inline-flex items-center gap-1.5 text-xs font-medium text-slate-500\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-activity size-4\">\n              <path d=\"M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2\">\n              </path>\n            </svg>\n            心拍\n          </span>\n          <p class=\"mt-1 text-xl font-bold tracking-tight text-slate-700\">\n            74\n            <span class=\"ml-1 text-sm font-medium text-slate-500\">\n              bpm\n            </span>\n          </p>\n        </div>\n        <div class=\"flex flex-col items-center rounded-2xl bg-[#e0e5ec] p-5 text-center shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]\">\n          <div class=\"relative grid size-[84px] place-items-center rounded-full bg-[#e0e5ec] shadow-[inset_4px_4px_8px_#a3b1c6,inset_-4px_-4px_8px_#ffffff]\">\n            <svg viewBox=\"0 0 80 80\" class=\"size-[72px] -rotate-90\">\n              <circle cx=\"40\" cy=\"40\" r=\"30\" fill=\"none\" stroke=\"#cdd4de\" stroke-width=\"7\">\n              </circle>\n              <circle cx=\"40\" cy=\"40\" r=\"30\" fill=\"none\" stroke=\"#94a3b8\" stroke-width=\"7\" stroke-linecap=\"round\" stroke-dasharray=\"188.49555921538757\" stroke-dashoffset=\"67.85840131753952\">\n              </circle>\n            </svg>\n            <span class=\"absolute text-sm font-bold text-slate-700\">\n              64%\n            </span>\n          </div>\n          <span class=\"mt-4 inline-flex items-center gap-1.5 text-xs font-medium text-slate-500\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-droplet size-4\">\n              <path d=\"M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z\">\n              </path>\n            </svg>\n            水分\n          </span>\n          <p class=\"mt-1 text-xl font-bold tracking-tight text-slate-700\">\n            1.6\n            <span class=\"ml-1 text-sm font-medium text-slate-500\">\n              L\n            </span>\n          </p>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "nordic-nordic-card",
@@ -1198,7 +1198,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"北欧コンテンツカード\",\n  category: \"北欧\",\n  description: \"ぬくもりのあるコンテンツカード。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"nordic\", \"scandinavian\", \"hygge\"],\n  principle: \"やわらかな角丸と淡い影が安心感を与え、読み進めを促す。\",\n};\n\nexport default function NordicCard() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <article className=\"w-full max-w-sm overflow-hidden rounded-[1.75rem] bg-[#faf8f3] font-sans text-[#3a3a38] shadow-[0_30px_70px_-46px_rgba(58,58,56,0.45)]\">\n      {/* line-art landscape header */}\n      <div className=\"relative h-44 bg-[#eae5d8]\">\n        <svg viewBox=\"0 0 400 180\" className=\"absolute inset-0 h-full w-full\" fill=\"none\" preserveAspectRatio=\"xMidYMid slice\">\n          <circle cx=\"300\" cy=\"55\" r=\"30\" stroke=\"#c08457\" strokeWidth=\"2\" />\n          <path d=\"M0 150 L90 80 L150 130 L230 60 L310 130 L400 90 L400 180 L0 180 Z\" fill=\"#8a9a7b\" fillOpacity=\"0.18\" stroke=\"#8a9a7b\" strokeWidth=\"1.5\" />\n          <path d=\"M0 170 L120 120 L220 165 L340 115 L400 150\" stroke=\"#7d92a3\" strokeWidth=\"1.5\" opacity=\"0.5\" />\n        </svg>\n        <span className=\"absolute left-5 top-5 rounded-full bg-[#faf8f3]/85 px-3 py-1 text-[11px] font-medium uppercase tracking-[0.15em] text-[#8a9a7b] backdrop-blur\">\n          Journal\n        </span>\n      </div>\n\n      <div className=\"p-6\">\n        <p className=\"text-xs text-[#3a3a38]/45\">\n          {en ? \"June 2026 · 4 min read\" : \"2026年6月 · 読了 4分\"}\n        </p>\n        <h3 className=\"mt-2 text-xl font-medium leading-snug\">\n          {en\n            ? \"Light and space: making winter feel warm\"\n            : \"冬を心地よく過ごす、灯りと余白の整え方\"}\n        </h3>\n        <p className=\"mt-3 text-sm leading-relaxed text-[#3a3a38]/65\">\n          {en\n            ? \"In the dark season, cherish the rhythm of daily life. With candlelight and roomy, unhurried spaces, here are small ways to welcome hygge into the home.\"\n            : \"暗い季節こそ、暮らしのリズムを大切に。キャンドルの灯りとゆったりとした間取りで、家のなかにhyggeを招き入れる小さな工夫を。\"}\n        </p>\n\n        <div className=\"mt-6 flex items-center justify-between\">\n          <div className=\"flex items-center gap-3\">\n            <span className=\"flex h-9 w-9 items-center justify-center rounded-full bg-[#c08457]/15 text-sm font-medium text-[#c08457]\">\n              A\n            </span>\n            <div className=\"text-sm\">\n              <p className=\"font-medium\">{en ? \"Astrid\" : \"アストリッド\"}</p>\n              <p className=\"text-xs text-[#3a3a38]/45\">\n                {en ? \"Editorial\" : \"編集部\"}\n              </p>\n            </div>\n          </div>\n          <button className=\"flex items-center gap-1.5 text-sm font-medium text-[#3a3a38]/70 transition-colors hover:text-[#3a3a38]\">\n            {en ? \"Read more\" : \"続きを読む\"}\n            <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n              <path d=\"M5 12h14M13 6l6 6-6 6\" />\n            </svg>\n          </button>\n        </div>\n      </div>\n    </article>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <article class=\"w-full max-w-sm overflow-hidden rounded-[1.75rem] bg-[#faf8f3] font-sans text-[#3a3a38] shadow-[0_30px_70px_-46px_rgba(58,58,56,0.45)]\">\n      <div class=\"relative h-44 bg-[#eae5d8]\">\n        <svg viewBox=\"0 0 400 180\" class=\"absolute inset-0 h-full w-full\" fill=\"none\" preserveAspectRatio=\"xMidYMid slice\">\n          <circle cx=\"300\" cy=\"55\" r=\"30\" stroke=\"#c08457\" stroke-width=\"2\">\n          </circle>\n          <path d=\"M0 150 L90 80 L150 130 L230 60 L310 130 L400 90 L400 180 L0 180 Z\" fill=\"#8a9a7b\" fill-opacity=\"0.18\" stroke=\"#8a9a7b\" stroke-width=\"1.5\">\n          </path>\n          <path d=\"M0 170 L120 120 L220 165 L340 115 L400 150\" stroke=\"#7d92a3\" stroke-width=\"1.5\" opacity=\"0.5\">\n          </path>\n        </svg>\n        <span class=\"absolute left-5 top-5 rounded-full bg-[#faf8f3]/85 px-3 py-1 text-[11px] font-medium uppercase tracking-[0.15em] text-[#8a9a7b] backdrop-blur\">\n          Journal\n        </span>\n      </div>\n      <div class=\"p-6\">\n        <p class=\"text-xs text-[#3a3a38]/45\">\n          2026年6月 · 読了 4分\n        </p>\n        <h3 class=\"mt-2 text-xl font-medium leading-snug\">\n          冬を心地よく過ごす、灯りと余白の整え方\n        </h3>\n        <p class=\"mt-3 text-sm leading-relaxed text-[#3a3a38]/65\">\n          暗い季節こそ、暮らしのリズムを大切に。キャンドルの灯りとゆったりとした間取りで、家のなかにhyggeを招き入れる小さな工夫を。\n        </p>\n        <div class=\"mt-6 flex items-center justify-between\">\n          <div class=\"flex items-center gap-3\">\n            <span class=\"flex h-9 w-9 items-center justify-center rounded-full bg-[#c08457]/15 text-sm font-medium text-[#c08457]\">\n              A\n            </span>\n            <div class=\"text-sm\">\n              <p class=\"font-medium\">\n                アストリッド\n              </p>\n              <p class=\"text-xs text-[#3a3a38]/45\">\n                編集部\n              </p>\n            </div>\n          </div>\n          <button class=\"flex items-center gap-1.5 text-sm font-medium text-[#3a3a38]/70 transition-colors hover:text-[#3a3a38]\">\n            続きを読む\n            <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M5 12h14M13 6l6 6-6 6\">\n              </path>\n            </svg>\n          </button>\n        </div>\n      </div>\n    </article>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <article class=\"w-full max-w-sm overflow-hidden rounded-[1.75rem] bg-[#faf8f3] font-sans text-[#3a3a38] shadow-[0_30px_70px_-46px_rgba(58,58,56,0.45)]\">\n      <div class=\"relative h-44 bg-[#eae5d8]\">\n        <svg viewBox=\"0 0 400 180\" class=\"absolute inset-0 h-full w-full\" fill=\"none\" preserveAspectRatio=\"xMidYMid slice\">\n          <circle cx=\"300\" cy=\"55\" r=\"30\" stroke=\"#c08457\" stroke-width=\"2\">\n          </circle>\n          <path d=\"M0 150 L90 80 L150 130 L230 60 L310 130 L400 90 L400 180 L0 180 Z\" fill=\"#8a9a7b\" fill-opacity=\"0.18\" stroke=\"#8a9a7b\" stroke-width=\"1.5\">\n          </path>\n          <path d=\"M0 170 L120 120 L220 165 L340 115 L400 150\" stroke=\"#7d92a3\" stroke-width=\"1.5\" opacity=\"0.5\">\n          </path>\n        </svg>\n        <span class=\"absolute left-5 top-5 rounded-full bg-[#faf8f3]/85 px-3 py-1 text-[11px] font-medium uppercase tracking-[0.15em] text-[#8a9a7b] backdrop-blur\">\n          Journal\n        </span>\n      </div>\n      <div class=\"p-6\">\n        <p class=\"text-xs text-[#3a3a38]/45\">\n          2026年6月 · 読了 4分\n        </p>\n        <h3 class=\"mt-2 text-xl font-medium leading-snug\">\n          冬を心地よく過ごす、灯りと余白の整え方\n        </h3>\n        <p class=\"mt-3 text-sm leading-relaxed text-[#3a3a38]/65\">\n          暗い季節こそ、暮らしのリズムを大切に。キャンドルの灯りとゆったりとした間取りで、家のなかにhyggeを招き入れる小さな工夫を。\n        </p>\n        <div class=\"mt-6 flex items-center justify-between\">\n          <div class=\"flex items-center gap-3\">\n            <span class=\"flex h-9 w-9 items-center justify-center rounded-full bg-[#c08457]/15 text-sm font-medium text-[#c08457]\">\n              A\n            </span>\n            <div class=\"text-sm\">\n              <p class=\"font-medium\">\n                アストリッド\n              </p>\n              <p class=\"text-xs text-[#3a3a38]/45\">\n                編集部\n              </p>\n            </div>\n          </div>\n          <button class=\"flex items-center gap-1.5 text-sm font-medium text-[#3a3a38]/70 transition-colors hover:text-[#3a3a38]\">\n            続きを読む\n            <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M5 12h14M13 6l6 6-6 6\">\n              </path>\n            </svg>\n          </button>\n        </div>\n      </div>\n    </article>\n  </body>\n</html>"
     },
     {
       "id": "nordic-nordic-feature",
@@ -1212,7 +1212,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"北欧フィーチャー\",\n  category: \"北欧\",\n  description: \"ラインアイコンを添えた穏やかな機能セクション。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"nordic\", \"scandinavian\", \"hygge\"],\n  principle: \"細線アイコンと均等な間隔が、価値の並列を静かに整理して伝える。\",\n};\n\ntype IconKey = \"leaf\" | \"mountain\" | \"sun\" | \"weave\";\n\nconst features: { icon: IconKey; ja: string; en: string; bodyJa: string; bodyEn: string; tint: string }[] = [\n  {\n    icon: \"leaf\",\n    ja: \"自然由来の素材\",\n    en: \"Natural materials\",\n    bodyJa: \"持続可能な森から届く木材とリネン。手に触れるたび温もりを感じます。\",\n    bodyEn: \"Wood and linen from sustainable forests — warmth you feel with every touch.\",\n    tint: \"#8a9a7b\",\n  },\n  {\n    icon: \"sun\",\n    ja: \"やわらかな光設計\",\n    en: \"Soft lighting\",\n    bodyJa: \"北欧の長い夜に寄り添う、目にやさしい灯りの色味を追求しました。\",\n    bodyEn: \"A gentle light tone crafted to ease the long Nordic nights.\",\n    tint: \"#c08457\",\n  },\n  {\n    icon: \"mountain\",\n    ja: \"長く使える堅牢さ\",\n    en: \"Built to last\",\n    bodyJa: \"飽きのこない形と確かな作り。世代を越えて受け継げる道具です。\",\n    bodyEn: \"Timeless forms and solid craft — tools to pass down through generations.\",\n    tint: \"#7d92a3\",\n  },\n  {\n    icon: \"weave\",\n    ja: \"職人の手仕事\",\n    en: \"Artisan handcraft\",\n    bodyJa: \"小さな工房で一つひとつ丁寧に。folkの模様に物語を編み込みます。\",\n    bodyEn: \"Made one by one in a small workshop, weaving stories into folk patterns.\",\n    tint: \"#c08457\",\n  },\n];\n\nexport default function NordicFeature() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"w-full bg-[#faf8f3] font-sans text-[#3a3a38]\">\n      <div className=\"mx-auto max-w-6xl px-6 py-24\">\n        <div className=\"max-w-xl\">\n          <span className=\"text-[11px] font-medium uppercase tracking-[0.2em] text-[#8a9a7b]\">\n            Our Philosophy\n          </span>\n          <h2 className=\"mt-4 text-3xl font-medium tracking-tight md:text-4xl\">\n            {en\n              ? \"True comfort, found within simplicity.\"\n              : \"シンプルさのなかに、確かな心地よさを。\"}\n          </h2>\n        </div>\n\n        <div className=\"mt-16 grid gap-x-10 gap-y-12 sm:grid-cols-2 lg:grid-cols-4\">\n          {features.map((f) => (\n            <div key={f.icon}>\n              <div\n                className=\"flex h-14 w-14 items-center justify-center rounded-2xl\"\n                style={{ backgroundColor: f.tint + \"1f\", color: f.tint }}\n              >\n                <LineIcon name={f.icon} />\n              </div>\n              <h3 className=\"mt-5 text-lg font-medium\">{en ? f.en : f.ja}</h3>\n              <p className=\"mt-2 text-sm leading-relaxed text-[#3a3a38]/65\">\n                {en ? f.bodyEn : f.bodyJa}\n              </p>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n\nfunction LineIcon({ name }: { name: IconKey }) {\n  const common = {\n    className: \"h-7 w-7\",\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: 1.8,\n    strokeLinecap: \"round\" as const,\n    strokeLinejoin: \"round\" as const,\n    viewBox: \"0 0 24 24\",\n  };\n  switch (name) {\n    case \"leaf\":\n      return (\n        <svg {...common}>\n          <path d=\"M5 21c0-9 6-15 14-15 0 9-6 14-14 14z\" />\n          <path d=\"M5 21C9 16 13 13 17 11\" />\n        </svg>\n      );\n    case \"mountain\":\n      return (\n        <svg {...common}>\n          <path d=\"M3 19l6-11 4 6 2-3 6 8z\" />\n          <path d=\"M8 8l1.5 2.5\" />\n        </svg>\n      );\n    case \"sun\":\n      return (\n        <svg {...common}>\n          <circle cx=\"12\" cy=\"12\" r=\"4\" />\n          <path d=\"M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M18.4 5.6L17 7M7 17l-1.4 1.4\" />\n        </svg>\n      );\n    case \"weave\":\n      return (\n        <svg {...common}>\n          <path d=\"M4 8c4 0 4 8 8 8s4-8 8-8M4 16c4 0 4-8 8-8s4 8 8 8\" />\n        </svg>\n      );\n  }\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"w-full bg-[#faf8f3] font-sans text-[#3a3a38]\">\n      <div class=\"mx-auto max-w-6xl px-6 py-24\">\n        <div class=\"max-w-xl\">\n          <span class=\"text-[11px] font-medium uppercase tracking-[0.2em] text-[#8a9a7b]\">\n            Our Philosophy\n          </span>\n          <h2 class=\"mt-4 text-3xl font-medium tracking-tight md:text-4xl\">\n            シンプルさのなかに、確かな心地よさを。\n          </h2>\n        </div>\n        <div class=\"mt-16 grid gap-x-10 gap-y-12 sm:grid-cols-2 lg:grid-cols-4\">\n          <div>\n            <div class=\"flex h-14 w-14 items-center justify-center rounded-2xl\" style=\"background-color:#8a9a7b1f;color:#8a9a7b\">\n              <svg class=\"h-7 w-7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                <path d=\"M5 21c0-9 6-15 14-15 0 9-6 14-14 14z\">\n                </path>\n                <path d=\"M5 21C9 16 13 13 17 11\">\n                </path>\n              </svg>\n            </div>\n            <h3 class=\"mt-5 text-lg font-medium\">\n              自然由来の素材\n            </h3>\n            <p class=\"mt-2 text-sm leading-relaxed text-[#3a3a38]/65\">\n              持続可能な森から届く木材とリネン。手に触れるたび温もりを感じます。\n            </p>\n          </div>\n          <div>\n            <div class=\"flex h-14 w-14 items-center justify-center rounded-2xl\" style=\"background-color:#c084571f;color:#c08457\">\n              <svg class=\"h-7 w-7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                <circle cx=\"12\" cy=\"12\" r=\"4\">\n                </circle>\n                <path d=\"M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M18.4 5.6L17 7M7 17l-1.4 1.4\">\n                </path>\n              </svg>\n            </div>\n            <h3 class=\"mt-5 text-lg font-medium\">\n              やわらかな光設計\n            </h3>\n            <p class=\"mt-2 text-sm leading-relaxed text-[#3a3a38]/65\">\n              北欧の長い夜に寄り添う、目にやさしい灯りの色味を追求しました。\n            </p>\n          </div>\n          <div>\n            <div class=\"flex h-14 w-14 items-center justify-center rounded-2xl\" style=\"background-color:#7d92a31f;color:#7d92a3\">\n              <svg class=\"h-7 w-7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                <path d=\"M3 19l6-11 4 6 2-3 6 8z\">\n                </path>\n                <path d=\"M8 8l1.5 2.5\">\n                </path>\n              </svg>\n            </div>\n            <h3 class=\"mt-5 text-lg font-medium\">\n              長く使える堅牢さ\n            </h3>\n            <p class=\"mt-2 text-sm leading-relaxed text-[#3a3a38]/65\">\n              飽きのこない形と確かな作り。世代を越えて受け継げる道具です。\n            </p>\n          </div>\n          <div>\n            <div class=\"flex h-14 w-14 items-center justify-center rounded-2xl\" style=\"background-color:#c084571f;color:#c08457\">\n              <svg class=\"h-7 w-7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                <path d=\"M4 8c4 0 4 8 8 8s4-8 8-8M4 16c4 0 4-8 8-8s4 8 8 8\">\n                </path>\n              </svg>\n            </div>\n            <h3 class=\"mt-5 text-lg font-medium\">\n              職人の手仕事\n            </h3>\n            <p class=\"mt-2 text-sm leading-relaxed text-[#3a3a38]/65\">\n              小さな工房で一つひとつ丁寧に。folkの模様に物語を編み込みます。\n            </p>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"w-full bg-[#faf8f3] font-sans text-[#3a3a38]\">\n      <div class=\"mx-auto max-w-6xl px-6 py-24\">\n        <div class=\"max-w-xl\">\n          <span class=\"text-[11px] font-medium uppercase tracking-[0.2em] text-[#8a9a7b]\">\n            Our Philosophy\n          </span>\n          <h2 class=\"mt-4 text-3xl font-medium tracking-tight md:text-4xl\">\n            シンプルさのなかに、確かな心地よさを。\n          </h2>\n        </div>\n        <div class=\"mt-16 grid gap-x-10 gap-y-12 sm:grid-cols-2 lg:grid-cols-4\">\n          <div>\n            <div class=\"flex h-14 w-14 items-center justify-center rounded-2xl\" style=\"background-color:#8a9a7b1f;color:#8a9a7b\">\n              <svg class=\"h-7 w-7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                <path d=\"M5 21c0-9 6-15 14-15 0 9-6 14-14 14z\">\n                </path>\n                <path d=\"M5 21C9 16 13 13 17 11\">\n                </path>\n              </svg>\n            </div>\n            <h3 class=\"mt-5 text-lg font-medium\">\n              自然由来の素材\n            </h3>\n            <p class=\"mt-2 text-sm leading-relaxed text-[#3a3a38]/65\">\n              持続可能な森から届く木材とリネン。手に触れるたび温もりを感じます。\n            </p>\n          </div>\n          <div>\n            <div class=\"flex h-14 w-14 items-center justify-center rounded-2xl\" style=\"background-color:#c084571f;color:#c08457\">\n              <svg class=\"h-7 w-7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                <circle cx=\"12\" cy=\"12\" r=\"4\">\n                </circle>\n                <path d=\"M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M18.4 5.6L17 7M7 17l-1.4 1.4\">\n                </path>\n              </svg>\n            </div>\n            <h3 class=\"mt-5 text-lg font-medium\">\n              やわらかな光設計\n            </h3>\n            <p class=\"mt-2 text-sm leading-relaxed text-[#3a3a38]/65\">\n              北欧の長い夜に寄り添う、目にやさしい灯りの色味を追求しました。\n            </p>\n          </div>\n          <div>\n            <div class=\"flex h-14 w-14 items-center justify-center rounded-2xl\" style=\"background-color:#7d92a31f;color:#7d92a3\">\n              <svg class=\"h-7 w-7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                <path d=\"M3 19l6-11 4 6 2-3 6 8z\">\n                </path>\n                <path d=\"M8 8l1.5 2.5\">\n                </path>\n              </svg>\n            </div>\n            <h3 class=\"mt-5 text-lg font-medium\">\n              長く使える堅牢さ\n            </h3>\n            <p class=\"mt-2 text-sm leading-relaxed text-[#3a3a38]/65\">\n              飽きのこない形と確かな作り。世代を越えて受け継げる道具です。\n            </p>\n          </div>\n          <div>\n            <div class=\"flex h-14 w-14 items-center justify-center rounded-2xl\" style=\"background-color:#c084571f;color:#c08457\">\n              <svg class=\"h-7 w-7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                <path d=\"M4 8c4 0 4 8 8 8s4-8 8-8M4 16c4 0 4-8 8-8s4 8 8 8\">\n                </path>\n              </svg>\n            </div>\n            <h3 class=\"mt-5 text-lg font-medium\">\n              職人の手仕事\n            </h3>\n            <p class=\"mt-2 text-sm leading-relaxed text-[#3a3a38]/65\">\n              小さな工房で一つひとつ丁寧に。folkの模様に物語を編み込みます。\n            </p>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "nordic-nordic-footer",
@@ -1226,7 +1226,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"北欧フッター\",\n  category: \"北欧\",\n  description: \"ぬくもりのあるミニマルなフッター。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"nordic\", \"scandinavian\", \"hygge\"],\n  principle: \"整理された列と淡い区切りで、情報量があっても圧迫感を与えない。\",\n};\n\nconst groups: {\n  id: string;\n  titleJa: string;\n  titleEn: string;\n  links: { ja: string; en: string }[];\n}[] = [\n  {\n    id: \"collection\",\n    titleJa: \"コレクション\",\n    titleEn: \"Collection\",\n    links: [\n      { ja: \"椅子と座\", en: \"Chairs & seating\" },\n      { ja: \"灯り\", en: \"Lighting\" },\n      { ja: \"テキスタイル\", en: \"Textiles\" },\n      { ja: \"器\", en: \"Tableware\" },\n    ],\n  },\n  {\n    id: \"brand\",\n    titleJa: \"ブランド\",\n    titleEn: \"Brand\",\n    links: [\n      { ja: \"わたしたちの物語\", en: \"Our story\" },\n      { ja: \"工房を訪ねる\", en: \"Visit the workshop\" },\n      { ja: \"持続可能性\", en: \"Sustainability\" },\n      { ja: \"採用\", en: \"Careers\" },\n    ],\n  },\n  {\n    id: \"support\",\n    titleJa: \"サポート\",\n    titleEn: \"Support\",\n    links: [\n      { ja: \"配送と返品\", en: \"Shipping & returns\" },\n      { ja: \"お手入れ方法\", en: \"Care guide\" },\n      { ja: \"よくある質問\", en: \"FAQ\" },\n      { ja: \"お問い合わせ\", en: \"Contact\" },\n    ],\n  },\n];\n\nexport default function NordicFooter() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <footer className=\"w-full bg-[#3a3a38] font-sans text-[#f4f1ea]\">\n      <div className=\"mx-auto max-w-6xl px-6 py-16\">\n        <div className=\"grid gap-12 md:grid-cols-[1.4fr_1fr_1fr_1fr]\">\n          <div>\n            <div className=\"flex items-center gap-2.5\">\n              <svg viewBox=\"0 0 32 32\" className=\"h-7 w-7\" fill=\"none\">\n                <path d=\"M16 5 L26 27 L6 27 Z\" stroke=\"#8a9a7b\" strokeWidth=\"2\" strokeLinejoin=\"round\" />\n                <path d=\"M16 14 L21 27 L11 27 Z\" stroke=\"#c08457\" strokeWidth=\"2\" strokeLinejoin=\"round\" />\n              </svg>\n              <span className=\"text-lg font-medium\">Bjørk</span>\n            </div>\n            <p className=\"mt-4 max-w-xs text-sm leading-relaxed text-[#f4f1ea]/55\">\n              {en\n                ? \"Quiet comfort at the center of daily life — tools born of Nordic wisdom.\"\n                : \"静かな心地よさを、暮らしのまんなかに。北欧の知恵から生まれた道具たち。\"}\n            </p>\n            <div className=\"mt-6 flex gap-3\">\n              {[\"instagram\", \"pin\", \"mail\"].map((s) => (\n                <a\n                  key={s}\n                  href=\"#\"\n                  aria-label={s}\n                  className=\"flex h-9 w-9 items-center justify-center rounded-full bg-[#f4f1ea]/10 text-[#f4f1ea]/70 transition-colors hover:bg-[#f4f1ea]/20 hover:text-[#f4f1ea]\"\n                >\n                  <Social name={s} />\n                </a>\n              ))}\n            </div>\n          </div>\n\n          {groups.map((g) => (\n            <div key={g.id}>\n              <h3 className=\"text-[11px] font-medium uppercase tracking-[0.2em] text-[#f4f1ea]/50\">\n                {en ? g.titleEn : g.titleJa}\n              </h3>\n              <ul className=\"mt-4 space-y-2.5\">\n                {g.links.map((l) => (\n                  <li key={l.en}>\n                    <a\n                      href=\"#\"\n                      className=\"text-sm text-[#f4f1ea]/70 underline-offset-4 transition-colors hover:text-[#f4f1ea] hover:underline\"\n                    >\n                      {en ? l.en : l.ja}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n\n        <div className=\"mt-14 flex flex-col gap-3 border-t border-[#f4f1ea]/10 pt-6 text-xs text-[#f4f1ea]/45 sm:flex-row sm:items-center sm:justify-between\">\n          <p>\n            {en\n              ? \"© 2026 Bjørk. Gentle, in every season.\"\n              : \"© 2026 Bjørk. すべての季節に、やさしく。\"}\n          </p>\n          <div className=\"flex gap-5\">\n            <a href=\"#\" className=\"transition-colors hover:text-[#f4f1ea]/80\">\n              {en ? \"Privacy\" : \"プライバシー\"}\n            </a>\n            <a href=\"#\" className=\"transition-colors hover:text-[#f4f1ea]/80\">\n              {en ? \"Terms\" : \"利用規約\"}\n            </a>\n          </div>\n        </div>\n      </div>\n    </footer>\n  );\n}\n\nfunction Social({ name }: { name: string }) {\n  const p = {\n    className: \"h-4 w-4\",\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: 1.8,\n    strokeLinecap: \"round\" as const,\n    strokeLinejoin: \"round\" as const,\n    viewBox: \"0 0 24 24\",\n  };\n  if (name === \"mail\")\n    return (\n      <svg {...p}>\n        <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2.5\" />\n        <path d=\"M4 7l8 6 8-6\" />\n      </svg>\n    );\n  if (name === \"pin\")\n    return (\n      <svg {...p}>\n        <path d=\"M12 21s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11z\" />\n        <circle cx=\"12\" cy=\"10\" r=\"2.5\" />\n      </svg>\n    );\n  return (\n    <svg {...p}>\n      <rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"4.5\" />\n      <circle cx=\"12\" cy=\"12\" r=\"3.5\" />\n      <circle cx=\"17\" cy=\"7\" r=\"0.6\" fill=\"currentColor\" />\n    </svg>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <footer class=\"w-full bg-[#3a3a38] font-sans text-[#f4f1ea]\">\n      <div class=\"mx-auto max-w-6xl px-6 py-16\">\n        <div class=\"grid gap-12 md:grid-cols-[1.4fr_1fr_1fr_1fr]\">\n          <div>\n            <div class=\"flex items-center gap-2.5\">\n              <svg viewBox=\"0 0 32 32\" class=\"h-7 w-7\" fill=\"none\">\n                <path d=\"M16 5 L26 27 L6 27 Z\" stroke=\"#8a9a7b\" stroke-width=\"2\" stroke-linejoin=\"round\">\n                </path>\n                <path d=\"M16 14 L21 27 L11 27 Z\" stroke=\"#c08457\" stroke-width=\"2\" stroke-linejoin=\"round\">\n                </path>\n              </svg>\n              <span class=\"text-lg font-medium\">\n                Bjørk\n              </span>\n            </div>\n            <p class=\"mt-4 max-w-xs text-sm leading-relaxed text-[#f4f1ea]/55\">\n              静かな心地よさを、暮らしのまんなかに。北欧の知恵から生まれた道具たち。\n            </p>\n            <div class=\"mt-6 flex gap-3\">\n              <a href=\"#\" aria-label=\"instagram\" class=\"flex h-9 w-9 items-center justify-center rounded-full bg-[#f4f1ea]/10 text-[#f4f1ea]/70 transition-colors hover:bg-[#f4f1ea]/20 hover:text-[#f4f1ea]\">\n                <svg class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                  <rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"4.5\">\n                  </rect>\n                  <circle cx=\"12\" cy=\"12\" r=\"3.5\">\n                  </circle>\n                  <circle cx=\"17\" cy=\"7\" r=\"0.6\" fill=\"currentColor\">\n                  </circle>\n                </svg>\n              </a>\n              <a href=\"#\" aria-label=\"pin\" class=\"flex h-9 w-9 items-center justify-center rounded-full bg-[#f4f1ea]/10 text-[#f4f1ea]/70 transition-colors hover:bg-[#f4f1ea]/20 hover:text-[#f4f1ea]\">\n                <svg class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                  <path d=\"M12 21s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11z\">\n                  </path>\n                  <circle cx=\"12\" cy=\"10\" r=\"2.5\">\n                  </circle>\n                </svg>\n              </a>\n              <a href=\"#\" aria-label=\"mail\" class=\"flex h-9 w-9 items-center justify-center rounded-full bg-[#f4f1ea]/10 text-[#f4f1ea]/70 transition-colors hover:bg-[#f4f1ea]/20 hover:text-[#f4f1ea]\">\n                <svg class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                  <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2.5\">\n                  </rect>\n                  <path d=\"M4 7l8 6 8-6\">\n                  </path>\n                </svg>\n              </a>\n            </div>\n          </div>\n          <div>\n            <h3 class=\"text-[11px] font-medium uppercase tracking-[0.2em] text-[#f4f1ea]/50\">\n              コレクション\n            </h3>\n            <ul class=\"mt-4 space-y-2.5\">\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#f4f1ea]/70 underline-offset-4 transition-colors hover:text-[#f4f1ea] hover:underline\">\n                  椅子と座\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#f4f1ea]/70 underline-offset-4 transition-colors hover:text-[#f4f1ea] hover:underline\">\n                  灯り\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#f4f1ea]/70 underline-offset-4 transition-colors hover:text-[#f4f1ea] hover:underline\">\n                  テキスタイル\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#f4f1ea]/70 underline-offset-4 transition-colors hover:text-[#f4f1ea] hover:underline\">\n                  器\n                </a>\n              </li>\n            </ul>\n          </div>\n          <div>\n            <h3 class=\"text-[11px] font-medium uppercase tracking-[0.2em] text-[#f4f1ea]/50\">\n              ブランド\n            </h3>\n            <ul class=\"mt-4 space-y-2.5\">\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#f4f1ea]/70 underline-offset-4 transition-colors hover:text-[#f4f1ea] hover:underline\">\n                  わたしたちの物語\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#f4f1ea]/70 underline-offset-4 transition-colors hover:text-[#f4f1ea] hover:underline\">\n                  工房を訪ねる\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#f4f1ea]/70 underline-offset-4 transition-colors hover:text-[#f4f1ea] hover:underline\">\n                  持続可能性\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#f4f1ea]/70 underline-offset-4 transition-colors hover:text-[#f4f1ea] hover:underline\">\n                  採用\n                </a>\n              </li>\n            </ul>\n          </div>\n          <div>\n            <h3 class=\"text-[11px] font-medium uppercase tracking-[0.2em] text-[#f4f1ea]/50\">\n              サポート\n            </h3>\n            <ul class=\"mt-4 space-y-2.5\">\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#f4f1ea]/70 underline-offset-4 transition-colors hover:text-[#f4f1ea] hover:underline\">\n                  配送と返品\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#f4f1ea]/70 underline-offset-4 transition-colors hover:text-[#f4f1ea] hover:underline\">\n                  お手入れ方法\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#f4f1ea]/70 underline-offset-4 transition-colors hover:text-[#f4f1ea] hover:underline\">\n                  よくある質問\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#f4f1ea]/70 underline-offset-4 transition-colors hover:text-[#f4f1ea] hover:underline\">\n                  お問い合わせ\n                </a>\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"mt-14 flex flex-col gap-3 border-t border-[#f4f1ea]/10 pt-6 text-xs text-[#f4f1ea]/45 sm:flex-row sm:items-center sm:justify-between\">\n          <p>\n            © 2026 Bjørk. すべての季節に、やさしく。\n          </p>\n          <div class=\"flex gap-5\">\n            <a href=\"#\" class=\"transition-colors hover:text-[#f4f1ea]/80\">\n              プライバシー\n            </a>\n            <a href=\"#\" class=\"transition-colors hover:text-[#f4f1ea]/80\">\n              利用規約\n            </a>\n          </div>\n        </div>\n      </div>\n    </footer>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <footer class=\"w-full bg-[#3a3a38] font-sans text-[#f4f1ea]\">\n      <div class=\"mx-auto max-w-6xl px-6 py-16\">\n        <div class=\"grid gap-12 md:grid-cols-[1.4fr_1fr_1fr_1fr]\">\n          <div>\n            <div class=\"flex items-center gap-2.5\">\n              <svg viewBox=\"0 0 32 32\" class=\"h-7 w-7\" fill=\"none\">\n                <path d=\"M16 5 L26 27 L6 27 Z\" stroke=\"#8a9a7b\" stroke-width=\"2\" stroke-linejoin=\"round\">\n                </path>\n                <path d=\"M16 14 L21 27 L11 27 Z\" stroke=\"#c08457\" stroke-width=\"2\" stroke-linejoin=\"round\">\n                </path>\n              </svg>\n              <span class=\"text-lg font-medium\">\n                Bjørk\n              </span>\n            </div>\n            <p class=\"mt-4 max-w-xs text-sm leading-relaxed text-[#f4f1ea]/55\">\n              静かな心地よさを、暮らしのまんなかに。北欧の知恵から生まれた道具たち。\n            </p>\n            <div class=\"mt-6 flex gap-3\">\n              <a href=\"#\" aria-label=\"instagram\" class=\"flex h-9 w-9 items-center justify-center rounded-full bg-[#f4f1ea]/10 text-[#f4f1ea]/70 transition-colors hover:bg-[#f4f1ea]/20 hover:text-[#f4f1ea]\">\n                <svg class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                  <rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"4.5\">\n                  </rect>\n                  <circle cx=\"12\" cy=\"12\" r=\"3.5\">\n                  </circle>\n                  <circle cx=\"17\" cy=\"7\" r=\"0.6\" fill=\"currentColor\">\n                  </circle>\n                </svg>\n              </a>\n              <a href=\"#\" aria-label=\"pin\" class=\"flex h-9 w-9 items-center justify-center rounded-full bg-[#f4f1ea]/10 text-[#f4f1ea]/70 transition-colors hover:bg-[#f4f1ea]/20 hover:text-[#f4f1ea]\">\n                <svg class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                  <path d=\"M12 21s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11z\">\n                  </path>\n                  <circle cx=\"12\" cy=\"10\" r=\"2.5\">\n                  </circle>\n                </svg>\n              </a>\n              <a href=\"#\" aria-label=\"mail\" class=\"flex h-9 w-9 items-center justify-center rounded-full bg-[#f4f1ea]/10 text-[#f4f1ea]/70 transition-colors hover:bg-[#f4f1ea]/20 hover:text-[#f4f1ea]\">\n                <svg class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                  <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2.5\">\n                  </rect>\n                  <path d=\"M4 7l8 6 8-6\">\n                  </path>\n                </svg>\n              </a>\n            </div>\n          </div>\n          <div>\n            <h3 class=\"text-[11px] font-medium uppercase tracking-[0.2em] text-[#f4f1ea]/50\">\n              コレクション\n            </h3>\n            <ul class=\"mt-4 space-y-2.5\">\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#f4f1ea]/70 underline-offset-4 transition-colors hover:text-[#f4f1ea] hover:underline\">\n                  椅子と座\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#f4f1ea]/70 underline-offset-4 transition-colors hover:text-[#f4f1ea] hover:underline\">\n                  灯り\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#f4f1ea]/70 underline-offset-4 transition-colors hover:text-[#f4f1ea] hover:underline\">\n                  テキスタイル\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#f4f1ea]/70 underline-offset-4 transition-colors hover:text-[#f4f1ea] hover:underline\">\n                  器\n                </a>\n              </li>\n            </ul>\n          </div>\n          <div>\n            <h3 class=\"text-[11px] font-medium uppercase tracking-[0.2em] text-[#f4f1ea]/50\">\n              ブランド\n            </h3>\n            <ul class=\"mt-4 space-y-2.5\">\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#f4f1ea]/70 underline-offset-4 transition-colors hover:text-[#f4f1ea] hover:underline\">\n                  わたしたちの物語\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#f4f1ea]/70 underline-offset-4 transition-colors hover:text-[#f4f1ea] hover:underline\">\n                  工房を訪ねる\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#f4f1ea]/70 underline-offset-4 transition-colors hover:text-[#f4f1ea] hover:underline\">\n                  持続可能性\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#f4f1ea]/70 underline-offset-4 transition-colors hover:text-[#f4f1ea] hover:underline\">\n                  採用\n                </a>\n              </li>\n            </ul>\n          </div>\n          <div>\n            <h3 class=\"text-[11px] font-medium uppercase tracking-[0.2em] text-[#f4f1ea]/50\">\n              サポート\n            </h3>\n            <ul class=\"mt-4 space-y-2.5\">\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#f4f1ea]/70 underline-offset-4 transition-colors hover:text-[#f4f1ea] hover:underline\">\n                  配送と返品\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#f4f1ea]/70 underline-offset-4 transition-colors hover:text-[#f4f1ea] hover:underline\">\n                  お手入れ方法\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#f4f1ea]/70 underline-offset-4 transition-colors hover:text-[#f4f1ea] hover:underline\">\n                  よくある質問\n                </a>\n              </li>\n              <li>\n                <a href=\"#\" class=\"text-sm text-[#f4f1ea]/70 underline-offset-4 transition-colors hover:text-[#f4f1ea] hover:underline\">\n                  お問い合わせ\n                </a>\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"mt-14 flex flex-col gap-3 border-t border-[#f4f1ea]/10 pt-6 text-xs text-[#f4f1ea]/45 sm:flex-row sm:items-center sm:justify-between\">\n          <p>\n            © 2026 Bjørk. すべての季節に、やさしく。\n          </p>\n          <div class=\"flex gap-5\">\n            <a href=\"#\" class=\"transition-colors hover:text-[#f4f1ea]/80\">\n              プライバシー\n            </a>\n            <a href=\"#\" class=\"transition-colors hover:text-[#f4f1ea]/80\">\n              利用規約\n            </a>\n          </div>\n        </div>\n      </div>\n    </footer>\n  </body>\n</html>"
     },
     {
       "id": "nordic-nordic-gallery",
@@ -1240,7 +1240,7 @@
       ],
       "standalone": true,
       "source": "import type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"北欧ギャラリー\",\n  category: \"北欧\",\n  description: \"キャプション付きのやわらかなインテリアギャラリー。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"nordic\", \"scandinavian\", \"hygge\"],\n  principle: \"落ち着いた色面のグリッドとキャプションで、世界観を一貫して見せる。\",\n};\n\ntype Scene = \"window\" | \"shelf\" | \"plant\" | \"lamp\" | \"rug\" | \"chair\";\n\nconst items: { scene: Scene; ja: string; en: string; place: string; bg: string; ink: string; span: string }[] = [\n  { scene: \"window\", ja: \"朝の光\", en: \"Morning light\", place: \"Living Room\", bg: \"#eae5d8\", ink: \"#c08457\", span: \"sm:col-span-2 sm:row-span-2\" },\n  { scene: \"plant\", ja: \"緑のある角\", en: \"A green corner\", place: \"Corner\", bg: \"#e3e7dd\", ink: \"#8a9a7b\", span: \"\" },\n  { scene: \"lamp\", ja: \"やわらかな灯り\", en: \"Soft glow\", place: \"Reading Nook\", bg: \"#e7e3da\", ink: \"#c08457\", span: \"\" },\n  { scene: \"shelf\", ja: \"余白の棚\", en: \"Open shelving\", place: \"Hallway\", bg: \"#e1e6e9\", ink: \"#7d92a3\", span: \"\" },\n  { scene: \"rug\", ja: \"編みのラグ\", en: \"Woven rug\", place: \"Bedroom\", bg: \"#eae5d8\", ink: \"#8a9a7b\", span: \"\" },\n];\n\nexport default function NordicGallery() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"w-full bg-[#f4f1ea] font-sans text-[#3a3a38]\">\n      <div className=\"mx-auto max-w-6xl px-6 py-24\">\n        <div className=\"flex flex-wrap items-end justify-between gap-4\">\n          <div>\n            <span className=\"text-[11px] font-medium uppercase tracking-[0.2em] text-[#8a9a7b]\">\n              Interiors\n            </span>\n            <h2 className=\"mt-3 text-3xl font-medium tracking-tight md:text-4xl\">\n              {en ? \"Scenes of everyday life\" : \"暮らしの一場面\"}\n            </h2>\n          </div>\n          <button className=\"text-sm font-medium text-[#3a3a38]/70 underline-offset-4 hover:text-[#3a3a38] hover:underline\">\n            {en ? \"View all\" : \"すべて見る\"}\n          </button>\n        </div>\n\n        <div className=\"mt-12 grid auto-rows-[180px] grid-cols-2 gap-4 sm:grid-cols-3\">\n          {items.map((it) => (\n            <figure\n              key={it.scene}\n              className={\n                \"group relative overflow-hidden rounded-[1.5rem] \" + it.span\n              }\n              style={{ backgroundColor: it.bg }}\n            >\n              <SceneArt scene={it.scene} ink={it.ink} />\n              <figcaption className=\"absolute inset-x-0 bottom-0 bg-gradient-to-t from-[#3a3a38]/30 to-transparent p-5\">\n                <p className=\"text-[11px] uppercase tracking-[0.15em] text-[#faf8f3]/85\">\n                  {it.place}\n                </p>\n                <p className=\"text-sm font-medium text-[#faf8f3]\">\n                  {en ? it.en : it.ja}\n                </p>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n\nfunction SceneArt({ scene, ink }: { scene: Scene; ink: string }) {\n  const p = {\n    className: \"absolute inset-0 h-full w-full p-8\",\n    fill: \"none\",\n    stroke: ink,\n    strokeWidth: 2,\n    strokeLinecap: \"round\" as const,\n    strokeLinejoin: \"round\" as const,\n    viewBox: \"0 0 120 120\",\n    preserveAspectRatio: \"xMidYMid meet\",\n  };\n  switch (scene) {\n    case \"window\":\n      return (\n        <svg {...p}>\n          <rect x=\"30\" y=\"20\" width=\"60\" height=\"70\" rx=\"4\" />\n          <path d=\"M60 20v70M30 55h60\" />\n          <circle cx=\"48\" cy=\"38\" r=\"6\" />\n        </svg>\n      );\n    case \"plant\":\n      return (\n        <svg {...p}>\n          <path d=\"M50 95h20l-3-25H53z\" />\n          <path d=\"M60 70c0-15-8-22-18-24 2 12 8 20 18 24zM60 70c0-15 8-22 18-24-2 12-8 20-18 24z\" />\n        </svg>\n      );\n    case \"lamp\":\n      return (\n        <svg {...p}>\n          <path d=\"M45 35h30l8 25H37z\" />\n          <path d=\"M60 60v30M48 90h24\" />\n        </svg>\n      );\n    case \"shelf\":\n      return (\n        <svg {...p}>\n          <path d=\"M30 45h60M30 70h60\" />\n          <rect x=\"38\" y=\"33\" width=\"10\" height=\"12\" />\n          <circle cx=\"70\" cy=\"39\" r=\"6\" />\n          <rect x=\"50\" y=\"58\" width=\"14\" height=\"12\" />\n        </svg>\n      );\n    case \"rug\":\n      return (\n        <svg {...p}>\n          <rect x=\"28\" y=\"40\" width=\"64\" height=\"40\" rx=\"4\" />\n          <path d=\"M28 53h64M28 67h64M44 40v40M76 40v40\" opacity=\"0.6\" />\n        </svg>\n      );\n    case \"chair\":\n      return (\n        <svg {...p}>\n          <path d=\"M45 35v30M75 35v30M45 35q15-6 30 0M40 65h40l-6 25M40 65l6 25\" />\n        </svg>\n      );\n  }\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"w-full bg-[#f4f1ea] font-sans text-[#3a3a38]\">\n      <div class=\"mx-auto max-w-6xl px-6 py-24\">\n        <div class=\"flex flex-wrap items-end justify-between gap-4\">\n          <div>\n            <span class=\"text-[11px] font-medium uppercase tracking-[0.2em] text-[#8a9a7b]\">\n              Interiors\n            </span>\n            <h2 class=\"mt-3 text-3xl font-medium tracking-tight md:text-4xl\">\n              暮らしの一場面\n            </h2>\n          </div>\n          <button class=\"text-sm font-medium text-[#3a3a38]/70 underline-offset-4 hover:text-[#3a3a38] hover:underline\">\n            すべて見る\n          </button>\n        </div>\n        <div class=\"mt-12 grid auto-rows-[180px] grid-cols-2 gap-4 sm:grid-cols-3\">\n          <figure class=\"group relative overflow-hidden rounded-[1.5rem] sm:col-span-2 sm:row-span-2\" style=\"background-color:#eae5d8\">\n            <svg class=\"absolute inset-0 h-full w-full p-8\" fill=\"none\" stroke=\"#c08457\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 120 120\" preserveAspectRatio=\"xMidYMid meet\">\n              <rect x=\"30\" y=\"20\" width=\"60\" height=\"70\" rx=\"4\">\n              </rect>\n              <path d=\"M60 20v70M30 55h60\">\n              </path>\n              <circle cx=\"48\" cy=\"38\" r=\"6\">\n              </circle>\n            </svg>\n            <figcaption class=\"absolute inset-x-0 bottom-0 bg-gradient-to-t from-[#3a3a38]/30 to-transparent p-5\">\n              <p class=\"text-[11px] uppercase tracking-[0.15em] text-[#faf8f3]/85\">\n                Living Room\n              </p>\n              <p class=\"text-sm font-medium text-[#faf8f3]\">\n                朝の光\n              </p>\n            </figcaption>\n          </figure>\n          <figure class=\"group relative overflow-hidden rounded-[1.5rem] \" style=\"background-color:#e3e7dd\">\n            <svg class=\"absolute inset-0 h-full w-full p-8\" fill=\"none\" stroke=\"#8a9a7b\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 120 120\" preserveAspectRatio=\"xMidYMid meet\">\n              <path d=\"M50 95h20l-3-25H53z\">\n              </path>\n              <path d=\"M60 70c0-15-8-22-18-24 2 12 8 20 18 24zM60 70c0-15 8-22 18-24-2 12-8 20-18 24z\">\n              </path>\n            </svg>\n            <figcaption class=\"absolute inset-x-0 bottom-0 bg-gradient-to-t from-[#3a3a38]/30 to-transparent p-5\">\n              <p class=\"text-[11px] uppercase tracking-[0.15em] text-[#faf8f3]/85\">\n                Corner\n              </p>\n              <p class=\"text-sm font-medium text-[#faf8f3]\">\n                緑のある角\n              </p>\n            </figcaption>\n          </figure>\n          <figure class=\"group relative overflow-hidden rounded-[1.5rem] \" style=\"background-color:#e7e3da\">\n            <svg class=\"absolute inset-0 h-full w-full p-8\" fill=\"none\" stroke=\"#c08457\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 120 120\" preserveAspectRatio=\"xMidYMid meet\">\n              <path d=\"M45 35h30l8 25H37z\">\n              </path>\n              <path d=\"M60 60v30M48 90h24\">\n              </path>\n            </svg>\n            <figcaption class=\"absolute inset-x-0 bottom-0 bg-gradient-to-t from-[#3a3a38]/30 to-transparent p-5\">\n              <p class=\"text-[11px] uppercase tracking-[0.15em] text-[#faf8f3]/85\">\n                Reading Nook\n              </p>\n              <p class=\"text-sm font-medium text-[#faf8f3]\">\n                やわらかな灯り\n              </p>\n            </figcaption>\n          </figure>\n          <figure class=\"group relative overflow-hidden rounded-[1.5rem] \" style=\"background-color:#e1e6e9\">\n            <svg class=\"absolute inset-0 h-full w-full p-8\" fill=\"none\" stroke=\"#7d92a3\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 120 120\" preserveAspectRatio=\"xMidYMid meet\">\n              <path d=\"M30 45h60M30 70h60\">\n              </path>\n              <rect x=\"38\" y=\"33\" width=\"10\" height=\"12\">\n              </rect>\n              <circle cx=\"70\" cy=\"39\" r=\"6\">\n              </circle>\n              <rect x=\"50\" y=\"58\" width=\"14\" height=\"12\">\n              </rect>\n            </svg>\n            <figcaption class=\"absolute inset-x-0 bottom-0 bg-gradient-to-t from-[#3a3a38]/30 to-transparent p-5\">\n              <p class=\"text-[11px] uppercase tracking-[0.15em] text-[#faf8f3]/85\">\n                Hallway\n              </p>\n              <p class=\"text-sm font-medium text-[#faf8f3]\">\n                余白の棚\n              </p>\n            </figcaption>\n          </figure>\n          <figure class=\"group relative overflow-hidden rounded-[1.5rem] \" style=\"background-color:#eae5d8\">\n            <svg class=\"absolute inset-0 h-full w-full p-8\" fill=\"none\" stroke=\"#8a9a7b\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 120 120\" preserveAspectRatio=\"xMidYMid meet\">\n              <rect x=\"28\" y=\"40\" width=\"64\" height=\"40\" rx=\"4\">\n              </rect>\n              <path d=\"M28 53h64M28 67h64M44 40v40M76 40v40\" opacity=\"0.6\">\n              </path>\n            </svg>\n            <figcaption class=\"absolute inset-x-0 bottom-0 bg-gradient-to-t from-[#3a3a38]/30 to-transparent p-5\">\n              <p class=\"text-[11px] uppercase tracking-[0.15em] text-[#faf8f3]/85\">\n                Bedroom\n              </p>\n              <p class=\"text-sm font-medium text-[#faf8f3]\">\n                編みのラグ\n              </p>\n            </figcaption>\n          </figure>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"w-full bg-[#f4f1ea] font-sans text-[#3a3a38]\">\n      <div class=\"mx-auto max-w-6xl px-6 py-24\">\n        <div class=\"flex flex-wrap items-end justify-between gap-4\">\n          <div>\n            <span class=\"text-[11px] font-medium uppercase tracking-[0.2em] text-[#8a9a7b]\">\n              Interiors\n            </span>\n            <h2 class=\"mt-3 text-3xl font-medium tracking-tight md:text-4xl\">\n              暮らしの一場面\n            </h2>\n          </div>\n          <button class=\"text-sm font-medium text-[#3a3a38]/70 underline-offset-4 hover:text-[#3a3a38] hover:underline\">\n            すべて見る\n          </button>\n        </div>\n        <div class=\"mt-12 grid auto-rows-[180px] grid-cols-2 gap-4 sm:grid-cols-3\">\n          <figure class=\"group relative overflow-hidden rounded-[1.5rem] sm:col-span-2 sm:row-span-2\" style=\"background-color:#eae5d8\">\n            <svg class=\"absolute inset-0 h-full w-full p-8\" fill=\"none\" stroke=\"#c08457\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 120 120\" preserveAspectRatio=\"xMidYMid meet\">\n              <rect x=\"30\" y=\"20\" width=\"60\" height=\"70\" rx=\"4\">\n              </rect>\n              <path d=\"M60 20v70M30 55h60\">\n              </path>\n              <circle cx=\"48\" cy=\"38\" r=\"6\">\n              </circle>\n            </svg>\n            <figcaption class=\"absolute inset-x-0 bottom-0 bg-gradient-to-t from-[#3a3a38]/30 to-transparent p-5\">\n              <p class=\"text-[11px] uppercase tracking-[0.15em] text-[#faf8f3]/85\">\n                Living Room\n              </p>\n              <p class=\"text-sm font-medium text-[#faf8f3]\">\n                朝の光\n              </p>\n            </figcaption>\n          </figure>\n          <figure class=\"group relative overflow-hidden rounded-[1.5rem] \" style=\"background-color:#e3e7dd\">\n            <svg class=\"absolute inset-0 h-full w-full p-8\" fill=\"none\" stroke=\"#8a9a7b\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 120 120\" preserveAspectRatio=\"xMidYMid meet\">\n              <path d=\"M50 95h20l-3-25H53z\">\n              </path>\n              <path d=\"M60 70c0-15-8-22-18-24 2 12 8 20 18 24zM60 70c0-15 8-22 18-24-2 12-8 20-18 24z\">\n              </path>\n            </svg>\n            <figcaption class=\"absolute inset-x-0 bottom-0 bg-gradient-to-t from-[#3a3a38]/30 to-transparent p-5\">\n              <p class=\"text-[11px] uppercase tracking-[0.15em] text-[#faf8f3]/85\">\n                Corner\n              </p>\n              <p class=\"text-sm font-medium text-[#faf8f3]\">\n                緑のある角\n              </p>\n            </figcaption>\n          </figure>\n          <figure class=\"group relative overflow-hidden rounded-[1.5rem] \" style=\"background-color:#e7e3da\">\n            <svg class=\"absolute inset-0 h-full w-full p-8\" fill=\"none\" stroke=\"#c08457\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 120 120\" preserveAspectRatio=\"xMidYMid meet\">\n              <path d=\"M45 35h30l8 25H37z\">\n              </path>\n              <path d=\"M60 60v30M48 90h24\">\n              </path>\n            </svg>\n            <figcaption class=\"absolute inset-x-0 bottom-0 bg-gradient-to-t from-[#3a3a38]/30 to-transparent p-5\">\n              <p class=\"text-[11px] uppercase tracking-[0.15em] text-[#faf8f3]/85\">\n                Reading Nook\n              </p>\n              <p class=\"text-sm font-medium text-[#faf8f3]\">\n                やわらかな灯り\n              </p>\n            </figcaption>\n          </figure>\n          <figure class=\"group relative overflow-hidden rounded-[1.5rem] \" style=\"background-color:#e1e6e9\">\n            <svg class=\"absolute inset-0 h-full w-full p-8\" fill=\"none\" stroke=\"#7d92a3\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 120 120\" preserveAspectRatio=\"xMidYMid meet\">\n              <path d=\"M30 45h60M30 70h60\">\n              </path>\n              <rect x=\"38\" y=\"33\" width=\"10\" height=\"12\">\n              </rect>\n              <circle cx=\"70\" cy=\"39\" r=\"6\">\n              </circle>\n              <rect x=\"50\" y=\"58\" width=\"14\" height=\"12\">\n              </rect>\n            </svg>\n            <figcaption class=\"absolute inset-x-0 bottom-0 bg-gradient-to-t from-[#3a3a38]/30 to-transparent p-5\">\n              <p class=\"text-[11px] uppercase tracking-[0.15em] text-[#faf8f3]/85\">\n                Hallway\n              </p>\n              <p class=\"text-sm font-medium text-[#faf8f3]\">\n                余白の棚\n              </p>\n            </figcaption>\n          </figure>\n          <figure class=\"group relative overflow-hidden rounded-[1.5rem] \" style=\"background-color:#eae5d8\">\n            <svg class=\"absolute inset-0 h-full w-full p-8\" fill=\"none\" stroke=\"#8a9a7b\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 120 120\" preserveAspectRatio=\"xMidYMid meet\">\n              <rect x=\"28\" y=\"40\" width=\"64\" height=\"40\" rx=\"4\">\n              </rect>\n              <path d=\"M28 53h64M28 67h64M44 40v40M76 40v40\" opacity=\"0.6\">\n              </path>\n            </svg>\n            <figcaption class=\"absolute inset-x-0 bottom-0 bg-gradient-to-t from-[#3a3a38]/30 to-transparent p-5\">\n              <p class=\"text-[11px] uppercase tracking-[0.15em] text-[#faf8f3]/85\">\n                Bedroom\n              </p>\n              <p class=\"text-sm font-medium text-[#faf8f3]\">\n                編みのラグ\n              </p>\n            </figcaption>\n          </figure>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "offers-comparison-matrix",
@@ -1254,7 +1254,7 @@
       ],
       "standalone": true,
       "source": "import { Fragment } from \"react\";\nimport { Check, Minus, Sparkles } from \"lucide-react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"プラン比較マトリクス\",\n  category: \"価格・オファー\",\n  description:\n    \"3プランの機能をチェック/ダッシュで比較。固定ヘッダーとおすすめ列のハイライト付き。\",\n  align: \"full\",\n  level: \"advanced\",\n  isNew: true,\n  tags: [\"pricing\", \"comparison\", \"matrix\"],\n  principle:\n    \"選択のパラドックス回避。機能差を一目で可視化し、おすすめ列を強調することで認知負荷を下げ、迷いによる離脱を防ぐ。\",\n};\n\ntype Cell = boolean | string;\n\nconst PLANS = [\"Starter\", \"Pro\", \"Enterprise\"] as const;\nconst RECOMMENDED = 1; // Pro\n\nconst PRICES = [\"¥980\", \"¥4,800\", \"お問い合わせ\"];\nconst PRICES_EN = [\"$9\", \"$48\", \"Contact us\"];\n\nconst GROUPS: {\n  group: string;\n  groupEn: string;\n  rows: { label: string; labelEn: string; cells: Cell[]; cellsEn: Cell[] }[];\n}[] = [\n  {\n    group: \"基本機能\",\n    groupEn: \"Core features\",\n    rows: [\n      { label: \"プロジェクト数\", labelEn: \"Projects\", cells: [\"3\", \"無制限\", \"無制限\"], cellsEn: [\"3\", \"Unlimited\", \"Unlimited\"] },\n      { label: \"メンバー\", labelEn: \"Members\", cells: [\"1\", \"10\", \"無制限\"], cellsEn: [\"1\", \"10\", \"Unlimited\"] },\n      { label: \"ストレージ\", labelEn: \"Storage\", cells: [\"5GB\", \"200GB\", \"1TB+\"], cellsEn: [\"5GB\", \"200GB\", \"1TB+\"] },\n    ],\n  },\n  {\n    group: \"コラボレーション\",\n    groupEn: \"Collaboration\",\n    rows: [\n      { label: \"共同編集\", labelEn: \"Real-time editing\", cells: [false, true, true], cellsEn: [false, true, true] },\n      { label: \"コメント / レビュー\", labelEn: \"Comments / reviews\", cells: [false, true, true], cellsEn: [false, true, true] },\n      { label: \"バージョン履歴\", labelEn: \"Version history\", cells: [\"7日\", \"90日\", \"無期限\"], cellsEn: [\"7 days\", \"90 days\", \"Unlimited\"] },\n    ],\n  },\n  {\n    group: \"セキュリティ・運用\",\n    groupEn: \"Security & operations\",\n    rows: [\n      { label: \"SSO / SAML\", labelEn: \"SSO / SAML\", cells: [false, false, true], cellsEn: [false, false, true] },\n      { label: \"監査ログ\", labelEn: \"Audit logs\", cells: [false, false, true], cellsEn: [false, false, true] },\n      { label: \"SLA 保証\", labelEn: \"SLA guarantee\", cells: [false, false, \"99.99%\"], cellsEn: [false, false, \"99.99%\"] },\n      { label: \"専任サポート\", labelEn: \"Dedicated support\", cells: [false, true, true], cellsEn: [false, true, true] },\n    ],\n  },\n];\n\nfunction CellView({ value, highlight }: { value: Cell; highlight: boolean }) {\n  if (value === true)\n    return (\n      <Check\n        className={cn(\n          \"mx-auto size-4\",\n          highlight ? \"text-primary\" : \"text-emerald-500\"\n        )}\n      />\n    );\n  if (value === false)\n    return <Minus className=\"mx-auto size-4 text-muted-foreground/40\" />;\n  return (\n    <span\n      className={cn(\n        \"text-sm\",\n        highlight ? \"font-semibold text-foreground\" : \"text-foreground/80\"\n      )}\n    >\n      {value}\n    </span>\n  );\n}\n\nexport default function ComparisonMatrix() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <div className=\"w-full overflow-hidden rounded-xl border bg-card\">\n      <div className=\"max-h-[34rem] overflow-auto\">\n        <table className=\"w-full border-collapse text-left\">\n          <thead className=\"sticky top-0 z-10\">\n            <tr className=\"bg-card/95 backdrop-blur\">\n              <th className=\"w-1/3 p-4 align-bottom text-sm font-medium text-muted-foreground\">\n                {en ? \"Feature\" : \"機能\"}\n              </th>\n              {PLANS.map((plan, i) => (\n                <th\n                  key={plan}\n                  className={cn(\n                    \"p-4 text-center align-bottom\",\n                    i === RECOMMENDED && \"bg-primary/5\"\n                  )}\n                >\n                  <div className=\"flex flex-col items-center gap-1.5\">\n                    {i === RECOMMENDED && (\n                      <Badge className=\"gap-1\">\n                        <Sparkles className=\"size-3\" /> {en ? \"Recommended\" : \"おすすめ\"}\n                      </Badge>\n                    )}\n                    <span className=\"text-base font-semibold\">{plan}</span>\n                    <span\n                      className={cn(\n                        \"text-sm\",\n                        i === RECOMMENDED\n                          ? \"font-semibold text-primary\"\n                          : \"text-muted-foreground\"\n                      )}\n                    >\n                      {en ? PRICES_EN[i] : PRICES[i]}\n                    </span>\n                  </div>\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {GROUPS.map((g) => (\n              <Fragment key={g.groupEn}>\n                <tr className=\"bg-muted/40\">\n                  <td\n                    colSpan={PLANS.length + 1}\n                    className=\"px-4 py-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground\"\n                  >\n                    {en ? g.groupEn : g.group}\n                  </td>\n                </tr>\n                {g.rows.map((row) => (\n                  <tr\n                    key={row.labelEn}\n                    className=\"border-t border-border/60 transition-colors hover:bg-muted/30\"\n                  >\n                    <td className=\"p-4 text-sm font-medium\">{en ? row.labelEn : row.label}</td>\n                    {(en ? row.cellsEn : row.cells).map((cell, i) => (\n                      <td\n                        key={i}\n                        className={cn(\n                          \"p-4 text-center\",\n                          i === RECOMMENDED && \"bg-primary/5\"\n                        )}\n                      >\n                        <CellView value={cell} highlight={i === RECOMMENDED} />\n                      </td>\n                    ))}\n                  </tr>\n                ))}\n              </Fragment>\n            ))}\n          </tbody>\n          <tfoot>\n            <tr className=\"border-t bg-card\">\n              <td className=\"p-4\" />\n              {PLANS.map((plan, i) => (\n                <td\n                  key={plan}\n                  className={cn(\"p-4\", i === RECOMMENDED && \"bg-primary/5\")}\n                >\n                  <Button\n                    className=\"w-full\"\n                    variant={i === RECOMMENDED ? \"default\" : \"outline\"}\n                  >\n                    {i === PLANS.length - 1 ? (en ? \"Contact us\" : \"相談する\") : (en ? \"Choose\" : \"選ぶ\")}\n                  </Button>\n                </td>\n              ))}\n            </tr>\n          </tfoot>\n        </table>\n      </div>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"w-full overflow-hidden rounded-xl border bg-card\">\n      <div class=\"max-h-[34rem] overflow-auto\">\n        <table class=\"w-full border-collapse text-left\">\n          <thead class=\"sticky top-0 z-10\">\n            <tr class=\"bg-card/95 backdrop-blur\">\n              <th class=\"w-1/3 p-4 align-bottom text-sm font-medium text-muted-foreground\">\n                機能\n              </th>\n              <th class=\"p-4 text-center align-bottom\">\n                <div class=\"flex flex-col items-center gap-1.5\">\n                  <span class=\"text-base font-semibold\">\n                    Starter\n                  </span>\n                  <span class=\"text-sm text-muted-foreground\">\n                    ¥980\n                  </span>\n                </div>\n              </th>\n              <th class=\"p-4 text-center align-bottom bg-primary/5\">\n                <div class=\"flex flex-col items-center gap-1.5\">\n                  <div class=\"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80 gap-1\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3\">\n                      <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                      </path>\n                      <path d=\"M20 3v4\">\n                      </path>\n                      <path d=\"M22 5h-4\">\n                      </path>\n                      <path d=\"M4 17v2\">\n                      </path>\n                      <path d=\"M5 18H3\">\n                      </path>\n                    </svg>\n                    おすすめ\n                  </div>\n                  <span class=\"text-base font-semibold\">\n                    Pro\n                  </span>\n                  <span class=\"text-sm font-semibold text-primary\">\n                    ¥4,800\n                  </span>\n                </div>\n              </th>\n              <th class=\"p-4 text-center align-bottom\">\n                <div class=\"flex flex-col items-center gap-1.5\">\n                  <span class=\"text-base font-semibold\">\n                    Enterprise\n                  </span>\n                  <span class=\"text-sm text-muted-foreground\">\n                    お問い合わせ\n                  </span>\n                </div>\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr class=\"bg-muted/40\">\n              <td colSpan=\"4\" class=\"px-4 py-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n                基本機能\n              </td>\n            </tr>\n            <tr class=\"border-t border-border/60 transition-colors hover:bg-muted/30\">\n              <td class=\"p-4 text-sm font-medium\">\n                プロジェクト数\n              </td>\n              <td class=\"p-4 text-center\">\n                <span class=\"text-sm text-foreground/80\">\n                  3\n                </span>\n              </td>\n              <td class=\"p-4 text-center bg-primary/5\">\n                <span class=\"text-sm font-semibold text-foreground\">\n                  無制限\n                </span>\n              </td>\n              <td class=\"p-4 text-center\">\n                <span class=\"text-sm text-foreground/80\">\n                  無制限\n                </span>\n              </td>\n            </tr>\n            <tr class=\"border-t border-border/60 transition-colors hover:bg-muted/30\">\n              <td class=\"p-4 text-sm font-medium\">\n                メンバー\n              </td>\n              <td class=\"p-4 text-center\">\n                <span class=\"text-sm text-foreground/80\">\n                  1\n                </span>\n              </td>\n              <td class=\"p-4 text-center bg-primary/5\">\n                <span class=\"text-sm font-semibold text-foreground\">\n                  10\n                </span>\n              </td>\n              <td class=\"p-4 text-center\">\n                <span class=\"text-sm text-foreground/80\">\n                  無制限\n                </span>\n              </td>\n            </tr>\n            <tr class=\"border-t border-border/60 transition-colors hover:bg-muted/30\">\n              <td class=\"p-4 text-sm font-medium\">\n                ストレージ\n              </td>\n              <td class=\"p-4 text-center\">\n                <span class=\"text-sm text-foreground/80\">\n                  5GB\n                </span>\n              </td>\n              <td class=\"p-4 text-center bg-primary/5\">\n                <span class=\"text-sm font-semibold text-foreground\">\n                  200GB\n                </span>\n              </td>\n              <td class=\"p-4 text-center\">\n                <span class=\"text-sm text-foreground/80\">\n                  1TB+\n                </span>\n              </td>\n            </tr>\n            <tr class=\"bg-muted/40\">\n              <td colSpan=\"4\" class=\"px-4 py-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n                コラボレーション\n              </td>\n            </tr>\n            <tr class=\"border-t border-border/60 transition-colors hover:bg-muted/30\">\n              <td class=\"p-4 text-sm font-medium\">\n                共同編集\n              </td>\n              <td class=\"p-4 text-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minus mx-auto size-4 text-muted-foreground/40\">\n                  <path d=\"M5 12h14\">\n                  </path>\n                </svg>\n              </td>\n              <td class=\"p-4 text-center bg-primary/5\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mx-auto size-4 text-primary\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </td>\n              <td class=\"p-4 text-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mx-auto size-4 text-emerald-500\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </td>\n            </tr>\n            <tr class=\"border-t border-border/60 transition-colors hover:bg-muted/30\">\n              <td class=\"p-4 text-sm font-medium\">\n                コメント / レビュー\n              </td>\n              <td class=\"p-4 text-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minus mx-auto size-4 text-muted-foreground/40\">\n                  <path d=\"M5 12h14\">\n                  </path>\n                </svg>\n              </td>\n              <td class=\"p-4 text-center bg-primary/5\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mx-auto size-4 text-primary\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </td>\n              <td class=\"p-4 text-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mx-auto size-4 text-emerald-500\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </td>\n            </tr>\n            <tr class=\"border-t border-border/60 transition-colors hover:bg-muted/30\">\n              <td class=\"p-4 text-sm font-medium\">\n                バージョン履歴\n              </td>\n              <td class=\"p-4 text-center\">\n                <span class=\"text-sm text-foreground/80\">\n                  7日\n                </span>\n              </td>\n              <td class=\"p-4 text-center bg-primary/5\">\n                <span class=\"text-sm font-semibold text-foreground\">\n                  90日\n                </span>\n              </td>\n              <td class=\"p-4 text-center\">\n                <span class=\"text-sm text-foreground/80\">\n                  無期限\n                </span>\n              </td>\n            </tr>\n            <tr class=\"bg-muted/40\">\n              <td colSpan=\"4\" class=\"px-4 py-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n                セキュリティ・運用\n              </td>\n            </tr>\n            <tr class=\"border-t border-border/60 transition-colors hover:bg-muted/30\">\n              <td class=\"p-4 text-sm font-medium\">\n                SSO / SAML\n              </td>\n              <td class=\"p-4 text-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minus mx-auto size-4 text-muted-foreground/40\">\n                  <path d=\"M5 12h14\">\n                  </path>\n                </svg>\n              </td>\n              <td class=\"p-4 text-center bg-primary/5\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minus mx-auto size-4 text-muted-foreground/40\">\n                  <path d=\"M5 12h14\">\n                  </path>\n                </svg>\n              </td>\n              <td class=\"p-4 text-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mx-auto size-4 text-emerald-500\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </td>\n            </tr>\n            <tr class=\"border-t border-border/60 transition-colors hover:bg-muted/30\">\n              <td class=\"p-4 text-sm font-medium\">\n                監査ログ\n              </td>\n              <td class=\"p-4 text-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minus mx-auto size-4 text-muted-foreground/40\">\n                  <path d=\"M5 12h14\">\n                  </path>\n                </svg>\n              </td>\n              <td class=\"p-4 text-center bg-primary/5\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minus mx-auto size-4 text-muted-foreground/40\">\n                  <path d=\"M5 12h14\">\n                  </path>\n                </svg>\n              </td>\n              <td class=\"p-4 text-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mx-auto size-4 text-emerald-500\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </td>\n            </tr>\n            <tr class=\"border-t border-border/60 transition-colors hover:bg-muted/30\">\n              <td class=\"p-4 text-sm font-medium\">\n                SLA 保証\n              </td>\n              <td class=\"p-4 text-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minus mx-auto size-4 text-muted-foreground/40\">\n                  <path d=\"M5 12h14\">\n                  </path>\n                </svg>\n              </td>\n              <td class=\"p-4 text-center bg-primary/5\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minus mx-auto size-4 text-muted-foreground/40\">\n                  <path d=\"M5 12h14\">\n                  </path>\n                </svg>\n              </td>\n              <td class=\"p-4 text-center\">\n                <span class=\"text-sm text-foreground/80\">\n                  99.99%\n                </span>\n              </td>\n            </tr>\n            <tr class=\"border-t border-border/60 transition-colors hover:bg-muted/30\">\n              <td class=\"p-4 text-sm font-medium\">\n                専任サポート\n              </td>\n              <td class=\"p-4 text-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minus mx-auto size-4 text-muted-foreground/40\">\n                  <path d=\"M5 12h14\">\n                  </path>\n                </svg>\n              </td>\n              <td class=\"p-4 text-center bg-primary/5\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mx-auto size-4 text-primary\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </td>\n              <td class=\"p-4 text-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mx-auto size-4 text-emerald-500\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </td>\n            </tr>\n          </tbody>\n          <tfoot>\n            <tr class=\"border-t bg-card\">\n              <td class=\"p-4\">\n              </td>\n              <td class=\"p-4\">\n                <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 w-full\">\n                  選ぶ\n                </button>\n              </td>\n              <td class=\"p-4 bg-primary/5\">\n                <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 w-full\">\n                  選ぶ\n                </button>\n              </td>\n              <td class=\"p-4\">\n                <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 w-full\">\n                  相談する\n                </button>\n              </td>\n            </tr>\n          </tfoot>\n        </table>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"w-full overflow-hidden rounded-xl border bg-card\">\n      <div class=\"max-h-[34rem] overflow-auto\">\n        <table class=\"w-full border-collapse text-left\">\n          <thead class=\"sticky top-0 z-10\">\n            <tr class=\"bg-card/95 backdrop-blur\">\n              <th class=\"w-1/3 p-4 align-bottom text-sm font-medium text-muted-foreground\">\n                機能\n              </th>\n              <th class=\"p-4 text-center align-bottom\">\n                <div class=\"flex flex-col items-center gap-1.5\">\n                  <span class=\"text-base font-semibold\">\n                    Starter\n                  </span>\n                  <span class=\"text-sm text-muted-foreground\">\n                    ¥980\n                  </span>\n                </div>\n              </th>\n              <th class=\"p-4 text-center align-bottom bg-primary/5\">\n                <div class=\"flex flex-col items-center gap-1.5\">\n                  <div class=\"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80 gap-1\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3\">\n                      <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n                      </path>\n                      <path d=\"M20 3v4\">\n                      </path>\n                      <path d=\"M22 5h-4\">\n                      </path>\n                      <path d=\"M4 17v2\">\n                      </path>\n                      <path d=\"M5 18H3\">\n                      </path>\n                    </svg>\n                    おすすめ\n                  </div>\n                  <span class=\"text-base font-semibold\">\n                    Pro\n                  </span>\n                  <span class=\"text-sm font-semibold text-primary\">\n                    ¥4,800\n                  </span>\n                </div>\n              </th>\n              <th class=\"p-4 text-center align-bottom\">\n                <div class=\"flex flex-col items-center gap-1.5\">\n                  <span class=\"text-base font-semibold\">\n                    Enterprise\n                  </span>\n                  <span class=\"text-sm text-muted-foreground\">\n                    お問い合わせ\n                  </span>\n                </div>\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr class=\"bg-muted/40\">\n              <td colSpan=\"4\" class=\"px-4 py-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n                基本機能\n              </td>\n            </tr>\n            <tr class=\"border-t border-border/60 transition-colors hover:bg-muted/30\">\n              <td class=\"p-4 text-sm font-medium\">\n                プロジェクト数\n              </td>\n              <td class=\"p-4 text-center\">\n                <span class=\"text-sm text-foreground/80\">\n                  3\n                </span>\n              </td>\n              <td class=\"p-4 text-center bg-primary/5\">\n                <span class=\"text-sm font-semibold text-foreground\">\n                  無制限\n                </span>\n              </td>\n              <td class=\"p-4 text-center\">\n                <span class=\"text-sm text-foreground/80\">\n                  無制限\n                </span>\n              </td>\n            </tr>\n            <tr class=\"border-t border-border/60 transition-colors hover:bg-muted/30\">\n              <td class=\"p-4 text-sm font-medium\">\n                メンバー\n              </td>\n              <td class=\"p-4 text-center\">\n                <span class=\"text-sm text-foreground/80\">\n                  1\n                </span>\n              </td>\n              <td class=\"p-4 text-center bg-primary/5\">\n                <span class=\"text-sm font-semibold text-foreground\">\n                  10\n                </span>\n              </td>\n              <td class=\"p-4 text-center\">\n                <span class=\"text-sm text-foreground/80\">\n                  無制限\n                </span>\n              </td>\n            </tr>\n            <tr class=\"border-t border-border/60 transition-colors hover:bg-muted/30\">\n              <td class=\"p-4 text-sm font-medium\">\n                ストレージ\n              </td>\n              <td class=\"p-4 text-center\">\n                <span class=\"text-sm text-foreground/80\">\n                  5GB\n                </span>\n              </td>\n              <td class=\"p-4 text-center bg-primary/5\">\n                <span class=\"text-sm font-semibold text-foreground\">\n                  200GB\n                </span>\n              </td>\n              <td class=\"p-4 text-center\">\n                <span class=\"text-sm text-foreground/80\">\n                  1TB+\n                </span>\n              </td>\n            </tr>\n            <tr class=\"bg-muted/40\">\n              <td colSpan=\"4\" class=\"px-4 py-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n                コラボレーション\n              </td>\n            </tr>\n            <tr class=\"border-t border-border/60 transition-colors hover:bg-muted/30\">\n              <td class=\"p-4 text-sm font-medium\">\n                共同編集\n              </td>\n              <td class=\"p-4 text-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minus mx-auto size-4 text-muted-foreground/40\">\n                  <path d=\"M5 12h14\">\n                  </path>\n                </svg>\n              </td>\n              <td class=\"p-4 text-center bg-primary/5\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mx-auto size-4 text-primary\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </td>\n              <td class=\"p-4 text-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mx-auto size-4 text-emerald-500\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </td>\n            </tr>\n            <tr class=\"border-t border-border/60 transition-colors hover:bg-muted/30\">\n              <td class=\"p-4 text-sm font-medium\">\n                コメント / レビュー\n              </td>\n              <td class=\"p-4 text-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minus mx-auto size-4 text-muted-foreground/40\">\n                  <path d=\"M5 12h14\">\n                  </path>\n                </svg>\n              </td>\n              <td class=\"p-4 text-center bg-primary/5\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mx-auto size-4 text-primary\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </td>\n              <td class=\"p-4 text-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mx-auto size-4 text-emerald-500\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </td>\n            </tr>\n            <tr class=\"border-t border-border/60 transition-colors hover:bg-muted/30\">\n              <td class=\"p-4 text-sm font-medium\">\n                バージョン履歴\n              </td>\n              <td class=\"p-4 text-center\">\n                <span class=\"text-sm text-foreground/80\">\n                  7日\n                </span>\n              </td>\n              <td class=\"p-4 text-center bg-primary/5\">\n                <span class=\"text-sm font-semibold text-foreground\">\n                  90日\n                </span>\n              </td>\n              <td class=\"p-4 text-center\">\n                <span class=\"text-sm text-foreground/80\">\n                  無期限\n                </span>\n              </td>\n            </tr>\n            <tr class=\"bg-muted/40\">\n              <td colSpan=\"4\" class=\"px-4 py-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n                セキュリティ・運用\n              </td>\n            </tr>\n            <tr class=\"border-t border-border/60 transition-colors hover:bg-muted/30\">\n              <td class=\"p-4 text-sm font-medium\">\n                SSO / SAML\n              </td>\n              <td class=\"p-4 text-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minus mx-auto size-4 text-muted-foreground/40\">\n                  <path d=\"M5 12h14\">\n                  </path>\n                </svg>\n              </td>\n              <td class=\"p-4 text-center bg-primary/5\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minus mx-auto size-4 text-muted-foreground/40\">\n                  <path d=\"M5 12h14\">\n                  </path>\n                </svg>\n              </td>\n              <td class=\"p-4 text-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mx-auto size-4 text-emerald-500\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </td>\n            </tr>\n            <tr class=\"border-t border-border/60 transition-colors hover:bg-muted/30\">\n              <td class=\"p-4 text-sm font-medium\">\n                監査ログ\n              </td>\n              <td class=\"p-4 text-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minus mx-auto size-4 text-muted-foreground/40\">\n                  <path d=\"M5 12h14\">\n                  </path>\n                </svg>\n              </td>\n              <td class=\"p-4 text-center bg-primary/5\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minus mx-auto size-4 text-muted-foreground/40\">\n                  <path d=\"M5 12h14\">\n                  </path>\n                </svg>\n              </td>\n              <td class=\"p-4 text-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mx-auto size-4 text-emerald-500\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </td>\n            </tr>\n            <tr class=\"border-t border-border/60 transition-colors hover:bg-muted/30\">\n              <td class=\"p-4 text-sm font-medium\">\n                SLA 保証\n              </td>\n              <td class=\"p-4 text-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minus mx-auto size-4 text-muted-foreground/40\">\n                  <path d=\"M5 12h14\">\n                  </path>\n                </svg>\n              </td>\n              <td class=\"p-4 text-center bg-primary/5\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minus mx-auto size-4 text-muted-foreground/40\">\n                  <path d=\"M5 12h14\">\n                  </path>\n                </svg>\n              </td>\n              <td class=\"p-4 text-center\">\n                <span class=\"text-sm text-foreground/80\">\n                  99.99%\n                </span>\n              </td>\n            </tr>\n            <tr class=\"border-t border-border/60 transition-colors hover:bg-muted/30\">\n              <td class=\"p-4 text-sm font-medium\">\n                専任サポート\n              </td>\n              <td class=\"p-4 text-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minus mx-auto size-4 text-muted-foreground/40\">\n                  <path d=\"M5 12h14\">\n                  </path>\n                </svg>\n              </td>\n              <td class=\"p-4 text-center bg-primary/5\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mx-auto size-4 text-primary\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </td>\n              <td class=\"p-4 text-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mx-auto size-4 text-emerald-500\">\n                  <path d=\"M20 6 9 17l-5-5\">\n                  </path>\n                </svg>\n              </td>\n            </tr>\n          </tbody>\n          <tfoot>\n            <tr class=\"border-t bg-card\">\n              <td class=\"p-4\">\n              </td>\n              <td class=\"p-4\">\n                <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 w-full\">\n                  選ぶ\n                </button>\n              </td>\n              <td class=\"p-4 bg-primary/5\">\n                <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 w-full\">\n                  選ぶ\n                </button>\n              </td>\n              <td class=\"p-4\">\n                <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 w-full\">\n                  相談する\n                </button>\n              </td>\n            </tr>\n          </tfoot>\n        </table>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "offers-enterprise-contact",
@@ -1268,7 +1268,7 @@
       ],
       "standalone": true,
       "source": "import { Building2, ShieldCheck, Headset, Plug, ArrowRight } from \"lucide-react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"エンタープライズ問い合わせ\",\n  category: \"価格・オファー\",\n  description:\n    \"価格を表示せず、機能と専任サポートを訴求して商談につなげるエンタープライズ向けカード。\",\n  align: \"center\",\n  level: \"advanced\",\n  isNew: true,\n  tags: [\"enterprise\", \"contact\", \"sales\"],\n  principle:\n    \"価格の非提示（アンカー回避）。価格を出さず価値を会話で伝えることで価格基準点の固定を避け、要件に応じた高単価提案を可能にする。\",\n};\n\nconst FEATURES = [\n  { icon: ShieldCheck, label: \"SSO / SAML・監査ログ・SLA 99.99%\", labelEn: \"SSO / SAML, audit logs, 99.99% SLA\" },\n  { icon: Headset, label: \"専任カスタマーサクセス担当 (CSM)\", labelEn: \"Dedicated customer success manager (CSM)\" },\n  { icon: Plug, label: \"カスタム連携・オンプレ / 専用クラウド\", labelEn: \"Custom integrations, on-prem / private cloud\" },\n  { icon: Building2, label: \"全社導入・ボリューム割引・請求書払い\", labelEn: \"Company-wide rollout, volume discounts, invoicing\" },\n];\n\nexport default function EnterpriseContact() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <Card className=\"w-full max-w-md overflow-hidden\">\n      <CardHeader className=\"space-y-3\">\n        <div className=\"flex items-center justify-between\">\n          <div className=\"flex size-11 items-center justify-center rounded-xl bg-primary/10 text-primary\">\n            <Building2 className=\"size-5\" />\n          </div>\n          <Badge variant=\"secondary\">Enterprise</Badge>\n        </div>\n        <h3 className=\"text-xl font-bold tracking-tight\">\n          {en ? \"A dedicated plan for large organizations\" : \"大規模組織のための専用プラン\"}\n        </h3>\n        <p className=\"text-sm text-muted-foreground\">\n          {en\n            ? \"We tailor it to your requirements. Let's start with a conversation.\"\n            : \"要件に合わせて設計します。まずはお話を聞かせてください。\"}\n        </p>\n        <div className=\"flex items-baseline gap-2 pt-1\">\n          <span className=\"text-3xl font-bold tracking-tight\">\n            {en ? \"Custom quote\" : \"カスタム見積もり\"}\n          </span>\n        </div>\n        <p className=\"text-xs text-muted-foreground\">\n          {en\n            ? \"We propose the best price based on your scale and requirements.\"\n            : \"利用規模・必要要件に応じて最適な価格をご提案します。\"}\n        </p>\n      </CardHeader>\n\n      <CardContent>\n        <ul className=\"space-y-3 text-sm\">\n          {FEATURES.map(({ icon: Icon, label, labelEn }) => (\n            <li key={labelEn} className=\"flex items-start gap-3\">\n              <span className=\"mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-md bg-emerald-500/10 text-emerald-500\">\n                <Icon className=\"size-3.5\" />\n              </span>\n              <span>{en ? labelEn : label}</span>\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n\n      <CardFooter className=\"flex-col gap-2\">\n        <Button className=\"w-full\">\n          {en ? \"Contact sales\" : \"営業に問い合わせる\"} <ArrowRight className=\"size-4\" />\n        </Button>\n        <Button variant=\"ghost\" className=\"w-full\">\n          {en ? \"Download the brochure\" : \"資料をダウンロード\"}\n        </Button>\n        <p className=\"pt-1 text-center text-xs text-muted-foreground\">\n          {en ? \"We usually reply within one business day.\" : \"通常1営業日以内にご返信します。\"}\n        </p>\n      </CardFooter>\n    </Card>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"rounded-lg border bg-card text-card-foreground shadow-sm w-full max-w-md overflow-hidden\">\n      <div class=\"flex flex-col p-6 space-y-3\">\n        <div class=\"flex items-center justify-between\">\n          <div class=\"flex size-11 items-center justify-center rounded-xl bg-primary/10 text-primary\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-building2 size-5\">\n              <path d=\"M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z\">\n              </path>\n              <path d=\"M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2\">\n              </path>\n              <path d=\"M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2\">\n              </path>\n              <path d=\"M10 6h4\">\n              </path>\n              <path d=\"M10 10h4\">\n              </path>\n              <path d=\"M10 14h4\">\n              </path>\n              <path d=\"M10 18h4\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\">\n            Enterprise\n          </div>\n        </div>\n        <h3 class=\"text-xl font-bold tracking-tight\">\n          大規模組織のための専用プラン\n        </h3>\n        <p class=\"text-sm text-muted-foreground\">\n          要件に合わせて設計します。まずはお話を聞かせてください。\n        </p>\n        <div class=\"flex items-baseline gap-2 pt-1\">\n          <span class=\"text-3xl font-bold tracking-tight\">\n            カスタム見積もり\n          </span>\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          利用規模・必要要件に応じて最適な価格をご提案します。\n        </p>\n      </div>\n      <div class=\"p-6 pt-0\">\n        <ul class=\"space-y-3 text-sm\">\n          <li class=\"flex items-start gap-3\">\n            <span class=\"mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-md bg-emerald-500/10 text-emerald-500\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-shield-check size-3.5\">\n                <path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\n                </path>\n                <path d=\"m9 12 2 2 4-4\">\n                </path>\n              </svg>\n            </span>\n            <span>\n              SSO / SAML・監査ログ・SLA 99.99%\n            </span>\n          </li>\n          <li class=\"flex items-start gap-3\">\n            <span class=\"mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-md bg-emerald-500/10 text-emerald-500\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-headset size-3.5\">\n                <path d=\"M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Zm0 0a9 9 0 1 1 18 0m0 0v5a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3Z\">\n                </path>\n                <path d=\"M21 16v2a4 4 0 0 1-4 4h-5\">\n                </path>\n              </svg>\n            </span>\n            <span>\n              専任カスタマーサクセス担当 (CSM)\n            </span>\n          </li>\n          <li class=\"flex items-start gap-3\">\n            <span class=\"mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-md bg-emerald-500/10 text-emerald-500\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-plug size-3.5\">\n                <path d=\"M12 22v-5\">\n                </path>\n                <path d=\"M9 8V2\">\n                </path>\n                <path d=\"M15 8V2\">\n                </path>\n                <path d=\"M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z\">\n                </path>\n              </svg>\n            </span>\n            <span>\n              カスタム連携・オンプレ / 専用クラウド\n            </span>\n          </li>\n          <li class=\"flex items-start gap-3\">\n            <span class=\"mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-md bg-emerald-500/10 text-emerald-500\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-building2 size-3.5\">\n                <path d=\"M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z\">\n                </path>\n                <path d=\"M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2\">\n                </path>\n                <path d=\"M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2\">\n                </path>\n                <path d=\"M10 6h4\">\n                </path>\n                <path d=\"M10 10h4\">\n                </path>\n                <path d=\"M10 14h4\">\n                </path>\n                <path d=\"M10 18h4\">\n                </path>\n              </svg>\n            </span>\n            <span>\n              全社導入・ボリューム割引・請求書払い\n            </span>\n          </li>\n        </ul>\n      </div>\n      <div class=\"flex items-center p-6 pt-0 flex-col gap-2\">\n        <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 w-full\">\n          営業に問い合わせる\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right size-4\">\n            <path d=\"M5 12h14\">\n            </path>\n            <path d=\"m12 5 7 7-7 7\">\n            </path>\n          </svg>\n        </button>\n        <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 w-full\">\n          資料をダウンロード\n        </button>\n        <p class=\"pt-1 text-center text-xs text-muted-foreground\">\n          通常1営業日以内にご返信します。\n        </p>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"rounded-lg border bg-card text-card-foreground shadow-sm w-full max-w-md overflow-hidden\">\n      <div class=\"flex flex-col p-6 space-y-3\">\n        <div class=\"flex items-center justify-between\">\n          <div class=\"flex size-11 items-center justify-center rounded-xl bg-primary/10 text-primary\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-building2 size-5\">\n              <path d=\"M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z\">\n              </path>\n              <path d=\"M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2\">\n              </path>\n              <path d=\"M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2\">\n              </path>\n              <path d=\"M10 6h4\">\n              </path>\n              <path d=\"M10 10h4\">\n              </path>\n              <path d=\"M10 14h4\">\n              </path>\n              <path d=\"M10 18h4\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\">\n            Enterprise\n          </div>\n        </div>\n        <h3 class=\"text-xl font-bold tracking-tight\">\n          大規模組織のための専用プラン\n        </h3>\n        <p class=\"text-sm text-muted-foreground\">\n          要件に合わせて設計します。まずはお話を聞かせてください。\n        </p>\n        <div class=\"flex items-baseline gap-2 pt-1\">\n          <span class=\"text-3xl font-bold tracking-tight\">\n            カスタム見積もり\n          </span>\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          利用規模・必要要件に応じて最適な価格をご提案します。\n        </p>\n      </div>\n      <div class=\"p-6 pt-0\">\n        <ul class=\"space-y-3 text-sm\">\n          <li class=\"flex items-start gap-3\">\n            <span class=\"mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-md bg-emerald-500/10 text-emerald-500\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-shield-check size-3.5\">\n                <path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\n                </path>\n                <path d=\"m9 12 2 2 4-4\">\n                </path>\n              </svg>\n            </span>\n            <span>\n              SSO / SAML・監査ログ・SLA 99.99%\n            </span>\n          </li>\n          <li class=\"flex items-start gap-3\">\n            <span class=\"mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-md bg-emerald-500/10 text-emerald-500\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-headset size-3.5\">\n                <path d=\"M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Zm0 0a9 9 0 1 1 18 0m0 0v5a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3Z\">\n                </path>\n                <path d=\"M21 16v2a4 4 0 0 1-4 4h-5\">\n                </path>\n              </svg>\n            </span>\n            <span>\n              専任カスタマーサクセス担当 (CSM)\n            </span>\n          </li>\n          <li class=\"flex items-start gap-3\">\n            <span class=\"mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-md bg-emerald-500/10 text-emerald-500\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-plug size-3.5\">\n                <path d=\"M12 22v-5\">\n                </path>\n                <path d=\"M9 8V2\">\n                </path>\n                <path d=\"M15 8V2\">\n                </path>\n                <path d=\"M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z\">\n                </path>\n              </svg>\n            </span>\n            <span>\n              カスタム連携・オンプレ / 専用クラウド\n            </span>\n          </li>\n          <li class=\"flex items-start gap-3\">\n            <span class=\"mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-md bg-emerald-500/10 text-emerald-500\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-building2 size-3.5\">\n                <path d=\"M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z\">\n                </path>\n                <path d=\"M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2\">\n                </path>\n                <path d=\"M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2\">\n                </path>\n                <path d=\"M10 6h4\">\n                </path>\n                <path d=\"M10 10h4\">\n                </path>\n                <path d=\"M10 14h4\">\n                </path>\n                <path d=\"M10 18h4\">\n                </path>\n              </svg>\n            </span>\n            <span>\n              全社導入・ボリューム割引・請求書払い\n            </span>\n          </li>\n        </ul>\n      </div>\n      <div class=\"flex items-center p-6 pt-0 flex-col gap-2\">\n        <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 w-full\">\n          営業に問い合わせる\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right size-4\">\n            <path d=\"M5 12h14\">\n            </path>\n            <path d=\"m12 5 7 7-7 7\">\n            </path>\n          </svg>\n        </button>\n        <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 w-full\">\n          資料をダウンロード\n        </button>\n        <p class=\"pt-1 text-center text-xs text-muted-foreground\">\n          通常1営業日以内にご返信します。\n        </p>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "offers-money-back-card",
@@ -1282,7 +1282,7 @@
       ],
       "standalone": true,
       "source": "import { Check, ShieldCheck, RotateCcw } from \"lucide-react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"返金保証つき料金カード\",\n  category: \"価格・オファー\",\n  description:\n    \"30日返金保証を前面に出してリスクを取り除く料金カード。保証シール付き。\",\n  align: \"center\",\n  level: \"advanced\",\n  isNew: true,\n  tags: [\"pricing\", \"guarantee\", \"risk-reversal\"],\n  principle:\n    \"リスクリバーサル（損失回避の中和）。返金保証で購入の損失リスクを売り手側へ移し、決断の心理的ハードルを下げる。\",\n};\n\nconst FEATURES = [\n  { ja: \"全機能フルアクセス\", en: \"Full access to all features\" },\n  { ja: \"メンバー無制限\", en: \"Unlimited members\" },\n  { ja: \"優先サポート\", en: \"Priority support\" },\n  { ja: \"毎週の新テンプレート\", en: \"New templates every week\" },\n];\n\nexport default function MoneyBackCard() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <div className=\"flex w-full justify-center px-5\">\n      {/* 保証シールが箱の外に出るので、そのぶんの余白を外側に確保する */}\n      <Card className=\"relative w-full max-w-sm overflow-visible\">\n      {/* 保証シール */}\n      <div className=\"absolute -right-3 -top-3 z-10\">\n        <div className=\"flex size-[68px] flex-col items-center justify-center rounded-full border-2 border-dashed border-emerald-500/60 bg-emerald-500 text-center text-white shadow-lg\">\n          <span className=\"text-[15px] font-extrabold leading-none\">30</span>\n          <span className=\"text-[8px] font-semibold leading-tight\">\n            DAY\n            <br />\n            GUARANTEE\n          </span>\n        </div>\n      </div>\n\n      <CardHeader className=\"space-y-2\">\n        <Badge variant=\"secondary\" className=\"w-fit\">\n          {en ? \"Pro plan\" : \"Proプラン\"}\n        </Badge>\n        <div className=\"flex items-baseline gap-1 pt-1\">\n          <span className=\"text-4xl font-bold tracking-tight\">¥4,800</span>\n          <span className=\"text-sm text-muted-foreground\">{en ? \"/ mo\" : \"/ 月\"}</span>\n        </div>\n        <p className=\"text-sm text-muted-foreground\">\n          {en\n            ? \"Try it first — if it's not for you, we'll refund every yen.\"\n            : \"まずは試して、合わなければ全額返金します。\"}\n        </p>\n      </CardHeader>\n\n      <CardContent className=\"space-y-4\">\n        <ul className=\"space-y-2.5 text-sm\">\n          {FEATURES.map((f) => (\n            <li key={f.en} className=\"flex items-center gap-2\">\n              <Check className=\"size-4 shrink-0 text-emerald-500\" />\n              <span>{en ? f.en : f.ja}</span>\n            </li>\n          ))}\n        </ul>\n\n        <div className=\"flex items-start gap-3 rounded-lg border border-emerald-500/30 bg-emerald-500/10 p-3\">\n          <ShieldCheck className=\"mt-0.5 size-5 shrink-0 text-emerald-500\" />\n          <div className=\"space-y-0.5\">\n            <p className=\"text-sm font-semibold text-emerald-600 dark:text-emerald-400\">\n              {en ? \"30-day full money-back guarantee\" : \"30日間 全額返金保証\"}\n            </p>\n            <p className=\"text-xs text-muted-foreground\">\n              {en\n                ? \"Full refund within 30 days, no questions asked. There's no risk to you.\"\n                : \"理由を問わず、30日以内なら全額返金。あなたにリスクはありません。\"}\n            </p>\n          </div>\n        </div>\n      </CardContent>\n\n      <CardFooter className=\"flex-col gap-2\">\n        <Button className=\"w-full\">{en ? \"Start risk-free\" : \"リスクなしで始める\"}</Button>\n        <p className=\"flex items-center justify-center gap-1.5 text-xs text-muted-foreground\">\n          <RotateCcw className=\"size-3.5\" />\n          {en ? \"Cancel anytime in one click\" : \"解約はいつでもワンクリック\"}\n        </p>\n      </CardFooter>\n      </Card>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"flex w-full justify-center px-5\">\n      <div class=\"rounded-lg border bg-card text-card-foreground shadow-sm relative w-full max-w-sm overflow-visible\">\n        <div class=\"absolute -right-3 -top-3 z-10\">\n          <div class=\"flex size-[68px] flex-col items-center justify-center rounded-full border-2 border-dashed border-emerald-500/60 bg-emerald-500 text-center text-white shadow-lg\">\n            <span class=\"text-[15px] font-extrabold leading-none\">\n              30\n            </span>\n            <span class=\"text-[8px] font-semibold leading-tight\">\n              DAY\n              <br/>\n              GUARANTEE\n            </span>\n          </div>\n        </div>\n        <div class=\"flex flex-col p-6 space-y-2\">\n          <div class=\"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 w-fit\">\n            Proプラン\n          </div>\n          <div class=\"flex items-baseline gap-1 pt-1\">\n            <span class=\"text-4xl font-bold tracking-tight\">\n              ¥4,800\n            </span>\n            <span class=\"text-sm text-muted-foreground\">\n              / 月\n            </span>\n          </div>\n          <p class=\"text-sm text-muted-foreground\">\n            まずは試して、合わなければ全額返金します。\n          </p>\n        </div>\n        <div class=\"p-6 pt-0 space-y-4\">\n          <ul class=\"space-y-2.5 text-sm\">\n            <li class=\"flex items-center gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-emerald-500\">\n                <path d=\"M20 6 9 17l-5-5\">\n                </path>\n              </svg>\n              <span>\n                全機能フルアクセス\n              </span>\n            </li>\n            <li class=\"flex items-center gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-emerald-500\">\n                <path d=\"M20 6 9 17l-5-5\">\n                </path>\n              </svg>\n              <span>\n                メンバー無制限\n              </span>\n            </li>\n            <li class=\"flex items-center gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-emerald-500\">\n                <path d=\"M20 6 9 17l-5-5\">\n                </path>\n              </svg>\n              <span>\n                優先サポート\n              </span>\n            </li>\n            <li class=\"flex items-center gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-emerald-500\">\n                <path d=\"M20 6 9 17l-5-5\">\n                </path>\n              </svg>\n              <span>\n                毎週の新テンプレート\n              </span>\n            </li>\n          </ul>\n          <div class=\"flex items-start gap-3 rounded-lg border border-emerald-500/30 bg-emerald-500/10 p-3\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-shield-check mt-0.5 size-5 shrink-0 text-emerald-500\">\n              <path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\n              </path>\n              <path d=\"m9 12 2 2 4-4\">\n              </path>\n            </svg>\n            <div class=\"space-y-0.5\">\n              <p class=\"text-sm font-semibold text-emerald-600 dark:text-emerald-400\">\n                30日間 全額返金保証\n              </p>\n              <p class=\"text-xs text-muted-foreground\">\n                理由を問わず、30日以内なら全額返金。あなたにリスクはありません。\n              </p>\n            </div>\n          </div>\n        </div>\n        <div class=\"flex items-center p-6 pt-0 flex-col gap-2\">\n          <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 w-full\">\n            リスクなしで始める\n          </button>\n          <p class=\"flex items-center justify-center gap-1.5 text-xs text-muted-foreground\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-rotate-ccw size-3.5\">\n              <path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\">\n              </path>\n              <path d=\"M3 3v5h5\">\n              </path>\n            </svg>\n            解約はいつでもワンクリック\n          </p>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"flex w-full justify-center px-5\">\n      <div class=\"rounded-lg border bg-card text-card-foreground shadow-sm relative w-full max-w-sm overflow-visible\">\n        <div class=\"absolute -right-3 -top-3 z-10\">\n          <div class=\"flex size-[68px] flex-col items-center justify-center rounded-full border-2 border-dashed border-emerald-500/60 bg-emerald-500 text-center text-white shadow-lg\">\n            <span class=\"text-[15px] font-extrabold leading-none\">\n              30\n            </span>\n            <span class=\"text-[8px] font-semibold leading-tight\">\n              DAY\n              <br/>\n              GUARANTEE\n            </span>\n          </div>\n        </div>\n        <div class=\"flex flex-col p-6 space-y-2\">\n          <div class=\"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 w-fit\">\n            Proプラン\n          </div>\n          <div class=\"flex items-baseline gap-1 pt-1\">\n            <span class=\"text-4xl font-bold tracking-tight\">\n              ¥4,800\n            </span>\n            <span class=\"text-sm text-muted-foreground\">\n              / 月\n            </span>\n          </div>\n          <p class=\"text-sm text-muted-foreground\">\n            まずは試して、合わなければ全額返金します。\n          </p>\n        </div>\n        <div class=\"p-6 pt-0 space-y-4\">\n          <ul class=\"space-y-2.5 text-sm\">\n            <li class=\"flex items-center gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-emerald-500\">\n                <path d=\"M20 6 9 17l-5-5\">\n                </path>\n              </svg>\n              <span>\n                全機能フルアクセス\n              </span>\n            </li>\n            <li class=\"flex items-center gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-emerald-500\">\n                <path d=\"M20 6 9 17l-5-5\">\n                </path>\n              </svg>\n              <span>\n                メンバー無制限\n              </span>\n            </li>\n            <li class=\"flex items-center gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-emerald-500\">\n                <path d=\"M20 6 9 17l-5-5\">\n                </path>\n              </svg>\n              <span>\n                優先サポート\n              </span>\n            </li>\n            <li class=\"flex items-center gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4 shrink-0 text-emerald-500\">\n                <path d=\"M20 6 9 17l-5-5\">\n                </path>\n              </svg>\n              <span>\n                毎週の新テンプレート\n              </span>\n            </li>\n          </ul>\n          <div class=\"flex items-start gap-3 rounded-lg border border-emerald-500/30 bg-emerald-500/10 p-3\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-shield-check mt-0.5 size-5 shrink-0 text-emerald-500\">\n              <path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\n              </path>\n              <path d=\"m9 12 2 2 4-4\">\n              </path>\n            </svg>\n            <div class=\"space-y-0.5\">\n              <p class=\"text-sm font-semibold text-emerald-600 dark:text-emerald-400\">\n                30日間 全額返金保証\n              </p>\n              <p class=\"text-xs text-muted-foreground\">\n                理由を問わず、30日以内なら全額返金。あなたにリスクはありません。\n              </p>\n            </div>\n          </div>\n        </div>\n        <div class=\"flex items-center p-6 pt-0 flex-col gap-2\">\n          <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 w-full\">\n            リスクなしで始める\n          </button>\n          <p class=\"flex items-center justify-center gap-1.5 text-xs text-muted-foreground\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-rotate-ccw size-3.5\">\n              <path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\">\n              </path>\n              <path d=\"M3 3v5h5\">\n              </path>\n            </svg>\n            解約はいつでもワンクリック\n          </p>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "offers-value-stack-offer",
@@ -1296,7 +1296,7 @@
       ],
       "standalone": true,
       "source": "import { Check, Gift } from \"lucide-react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"バリュースタック・オファー\",\n  category: \"価格・オファー\",\n  description:\n    \"同梱特典を1つずつ金額化して総額を提示し、それを大きく下回る価格で見せるオファー。\",\n  align: \"center\",\n  level: \"advanced\",\n  isNew: true,\n  tags: [\"pricing\", \"value-stack\", \"bundle\"],\n  principle:\n    \"価値の積み上げ（バリュースタッキング）。個々の価値を可視化して総額を膨らませ、最終価格との差を「圧倒的なお得感」として知覚させる。\",\n};\n\nconst ITEMS = [\n  { label: \"コアプラットフォーム（年間ライセンス）\", labelEn: \"Core platform (annual license)\", value: 48000 },\n  { label: \"プレミアムテンプレート集 120点\", labelEn: \"120 premium templates\", value: 24000 },\n  { label: \"1対1オンボーディング（90分）\", labelEn: \"1-on-1 onboarding (90 min)\", value: 30000 },\n  { label: \"限定コミュニティへの永久アクセス\", labelEn: \"Lifetime access to the private community\", value: 18000 },\n  { label: \"四半期ごとの戦略レビュー\", labelEn: \"Quarterly strategy reviews\", value: 36000 },\n];\n\nfunction yen(n: number) {\n  return \"¥\" + n.toLocaleString(\"ja-JP\");\n}\n\nexport default function ValueStackOffer() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  const total = ITEMS.reduce((s, i) => s + i.value, 0);\n  const price = 49800;\n  const saved = total - price;\n\n  return (\n    <Card className=\"w-full max-w-md overflow-hidden\">\n      <CardHeader className=\"space-y-2 bg-gradient-to-b from-emerald-500/10 to-transparent\">\n        <div className=\"flex items-center justify-between\">\n          <Badge className=\"gap-1 bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-transparent\">\n            <Gift className=\"size-3\" /> {en ? \"Limited-time bundle\" : \"期間限定バンドル\"}\n          </Badge>\n          <span className=\"text-xs text-muted-foreground\">{en ? \"Ends today\" : \"本日締切\"}</span>\n        </div>\n        <h3 className=\"text-xl font-bold tracking-tight\">\n          {en ? \"The complete growth package\" : \"グロース完全パッケージ\"}\n        </h3>\n        <p className=\"text-sm text-muted-foreground\">\n          {en\n            ? \"Everything you need to get results, bundled into one.\"\n            : \"成果に必要なものを、ひとつにまとめました。\"}\n        </p>\n      </CardHeader>\n\n      <CardContent className=\"space-y-3 pt-5\">\n        <ul className=\"space-y-2.5\">\n          {ITEMS.map((item) => (\n            <li\n              key={item.labelEn}\n              className=\"flex items-center justify-between gap-3 text-sm\"\n            >\n              <span className=\"flex items-start gap-2\">\n                <Check className=\"mt-0.5 size-4 shrink-0 text-emerald-500\" />\n                <span>{en ? item.labelEn : item.label}</span>\n              </span>\n              <span className=\"shrink-0 font-medium tabular-nums text-muted-foreground\">\n                {yen(item.value)}\n              </span>\n            </li>\n          ))}\n        </ul>\n\n        <div className=\"flex items-center justify-between border-t pt-3 text-sm\">\n          <span className=\"font-medium text-muted-foreground\">{en ? \"Total value\" : \"総額\"}</span>\n          <span className=\"font-semibold tabular-nums text-muted-foreground line-through decoration-rose-500/70 decoration-2\">\n            {yen(total)}\n          </span>\n        </div>\n\n        <div className=\"rounded-lg border border-emerald-500/30 bg-emerald-500/10 p-4 text-center\">\n          <p className=\"text-xs font-medium uppercase tracking-wide text-emerald-600 dark:text-emerald-400\">\n            {en ? \"Your price\" : \"あなたの価格\"}\n          </p>\n          <p className=\"mt-1 text-4xl font-bold tracking-tight text-emerald-600 dark:text-emerald-400\">\n            {yen(price)}\n          </p>\n          <p className=\"mt-1 text-sm font-semibold text-emerald-600 dark:text-emerald-400\">\n            {en\n              ? `Save ${yen(saved)} (${Math.round((saved / total) * 100)}% off)`\n              : `${yen(saved)} お得（${Math.round((saved / total) * 100)}% OFF）`}\n          </p>\n        </div>\n      </CardContent>\n\n      <CardFooter className=\"flex-col gap-2\">\n        <Button className=\"w-full bg-emerald-600 text-white hover:bg-emerald-600/90\">\n          {en ? \"Claim it now\" : \"今すぐ受け取る\"}\n        </Button>\n        <p className=\"text-center text-xs text-muted-foreground\">\n          {en\n            ? \"Includes a 30-day money-back guarantee · cancel anytime\"\n            : \"30日間の返金保証付き・いつでもキャンセル可\"}\n        </p>\n      </CardFooter>\n    </Card>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"rounded-lg border bg-card text-card-foreground shadow-sm w-full max-w-md overflow-hidden\">\n      <div class=\"flex flex-col p-6 space-y-2 bg-gradient-to-b from-emerald-500/10 to-transparent\">\n        <div class=\"flex items-center justify-between\">\n          <div class=\"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 gap-1 bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-transparent\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-gift size-3\">\n              <rect x=\"3\" y=\"8\" width=\"18\" height=\"4\" rx=\"1\">\n              </rect>\n              <path d=\"M12 8v13\">\n              </path>\n              <path d=\"M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7\">\n              </path>\n              <path d=\"M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5\">\n              </path>\n            </svg>\n            期間限定バンドル\n          </div>\n          <span class=\"text-xs text-muted-foreground\">\n            本日締切\n          </span>\n        </div>\n        <h3 class=\"text-xl font-bold tracking-tight\">\n          グロース完全パッケージ\n        </h3>\n        <p class=\"text-sm text-muted-foreground\">\n          成果に必要なものを、ひとつにまとめました。\n        </p>\n      </div>\n      <div class=\"p-6 space-y-3 pt-5\">\n        <ul class=\"space-y-2.5\">\n          <li class=\"flex items-center justify-between gap-3 text-sm\">\n            <span class=\"flex items-start gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-emerald-500\">\n                <path d=\"M20 6 9 17l-5-5\">\n                </path>\n              </svg>\n              <span>\n                コアプラットフォーム（年間ライセンス）\n              </span>\n            </span>\n            <span class=\"shrink-0 font-medium tabular-nums text-muted-foreground\">\n              ¥48,000\n            </span>\n          </li>\n          <li class=\"flex items-center justify-between gap-3 text-sm\">\n            <span class=\"flex items-start gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-emerald-500\">\n                <path d=\"M20 6 9 17l-5-5\">\n                </path>\n              </svg>\n              <span>\n                プレミアムテンプレート集 120点\n              </span>\n            </span>\n            <span class=\"shrink-0 font-medium tabular-nums text-muted-foreground\">\n              ¥24,000\n            </span>\n          </li>\n          <li class=\"flex items-center justify-between gap-3 text-sm\">\n            <span class=\"flex items-start gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-emerald-500\">\n                <path d=\"M20 6 9 17l-5-5\">\n                </path>\n              </svg>\n              <span>\n                1対1オンボーディング（90分）\n              </span>\n            </span>\n            <span class=\"shrink-0 font-medium tabular-nums text-muted-foreground\">\n              ¥30,000\n            </span>\n          </li>\n          <li class=\"flex items-center justify-between gap-3 text-sm\">\n            <span class=\"flex items-start gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-emerald-500\">\n                <path d=\"M20 6 9 17l-5-5\">\n                </path>\n              </svg>\n              <span>\n                限定コミュニティへの永久アクセス\n              </span>\n            </span>\n            <span class=\"shrink-0 font-medium tabular-nums text-muted-foreground\">\n              ¥18,000\n            </span>\n          </li>\n          <li class=\"flex items-center justify-between gap-3 text-sm\">\n            <span class=\"flex items-start gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-emerald-500\">\n                <path d=\"M20 6 9 17l-5-5\">\n                </path>\n              </svg>\n              <span>\n                四半期ごとの戦略レビュー\n              </span>\n            </span>\n            <span class=\"shrink-0 font-medium tabular-nums text-muted-foreground\">\n              ¥36,000\n            </span>\n          </li>\n        </ul>\n        <div class=\"flex items-center justify-between border-t pt-3 text-sm\">\n          <span class=\"font-medium text-muted-foreground\">\n            総額\n          </span>\n          <span class=\"font-semibold tabular-nums text-muted-foreground line-through decoration-rose-500/70 decoration-2\">\n            ¥156,000\n          </span>\n        </div>\n        <div class=\"rounded-lg border border-emerald-500/30 bg-emerald-500/10 p-4 text-center\">\n          <p class=\"text-xs font-medium uppercase tracking-wide text-emerald-600 dark:text-emerald-400\">\n            あなたの価格\n          </p>\n          <p class=\"mt-1 text-4xl font-bold tracking-tight text-emerald-600 dark:text-emerald-400\">\n            ¥49,800\n          </p>\n          <p class=\"mt-1 text-sm font-semibold text-emerald-600 dark:text-emerald-400\">\n            ¥106,200 お得（68% OFF）\n          </p>\n        </div>\n      </div>\n      <div class=\"flex items-center p-6 pt-0 flex-col gap-2\">\n        <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 h-9 px-4 py-2 w-full bg-emerald-600 text-white hover:bg-emerald-600/90\">\n          今すぐ受け取る\n        </button>\n        <p class=\"text-center text-xs text-muted-foreground\">\n          30日間の返金保証付き・いつでもキャンセル可\n        </p>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"rounded-lg border bg-card text-card-foreground shadow-sm w-full max-w-md overflow-hidden\">\n      <div class=\"flex flex-col p-6 space-y-2 bg-gradient-to-b from-emerald-500/10 to-transparent\">\n        <div class=\"flex items-center justify-between\">\n          <div class=\"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 gap-1 bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-transparent\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-gift size-3\">\n              <rect x=\"3\" y=\"8\" width=\"18\" height=\"4\" rx=\"1\">\n              </rect>\n              <path d=\"M12 8v13\">\n              </path>\n              <path d=\"M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7\">\n              </path>\n              <path d=\"M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5\">\n              </path>\n            </svg>\n            期間限定バンドル\n          </div>\n          <span class=\"text-xs text-muted-foreground\">\n            本日締切\n          </span>\n        </div>\n        <h3 class=\"text-xl font-bold tracking-tight\">\n          グロース完全パッケージ\n        </h3>\n        <p class=\"text-sm text-muted-foreground\">\n          成果に必要なものを、ひとつにまとめました。\n        </p>\n      </div>\n      <div class=\"p-6 space-y-3 pt-5\">\n        <ul class=\"space-y-2.5\">\n          <li class=\"flex items-center justify-between gap-3 text-sm\">\n            <span class=\"flex items-start gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-emerald-500\">\n                <path d=\"M20 6 9 17l-5-5\">\n                </path>\n              </svg>\n              <span>\n                コアプラットフォーム（年間ライセンス）\n              </span>\n            </span>\n            <span class=\"shrink-0 font-medium tabular-nums text-muted-foreground\">\n              ¥48,000\n            </span>\n          </li>\n          <li class=\"flex items-center justify-between gap-3 text-sm\">\n            <span class=\"flex items-start gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-emerald-500\">\n                <path d=\"M20 6 9 17l-5-5\">\n                </path>\n              </svg>\n              <span>\n                プレミアムテンプレート集 120点\n              </span>\n            </span>\n            <span class=\"shrink-0 font-medium tabular-nums text-muted-foreground\">\n              ¥24,000\n            </span>\n          </li>\n          <li class=\"flex items-center justify-between gap-3 text-sm\">\n            <span class=\"flex items-start gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-emerald-500\">\n                <path d=\"M20 6 9 17l-5-5\">\n                </path>\n              </svg>\n              <span>\n                1対1オンボーディング（90分）\n              </span>\n            </span>\n            <span class=\"shrink-0 font-medium tabular-nums text-muted-foreground\">\n              ¥30,000\n            </span>\n          </li>\n          <li class=\"flex items-center justify-between gap-3 text-sm\">\n            <span class=\"flex items-start gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-emerald-500\">\n                <path d=\"M20 6 9 17l-5-5\">\n                </path>\n              </svg>\n              <span>\n                限定コミュニティへの永久アクセス\n              </span>\n            </span>\n            <span class=\"shrink-0 font-medium tabular-nums text-muted-foreground\">\n              ¥18,000\n            </span>\n          </li>\n          <li class=\"flex items-center justify-between gap-3 text-sm\">\n            <span class=\"flex items-start gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check mt-0.5 size-4 shrink-0 text-emerald-500\">\n                <path d=\"M20 6 9 17l-5-5\">\n                </path>\n              </svg>\n              <span>\n                四半期ごとの戦略レビュー\n              </span>\n            </span>\n            <span class=\"shrink-0 font-medium tabular-nums text-muted-foreground\">\n              ¥36,000\n            </span>\n          </li>\n        </ul>\n        <div class=\"flex items-center justify-between border-t pt-3 text-sm\">\n          <span class=\"font-medium text-muted-foreground\">\n            総額\n          </span>\n          <span class=\"font-semibold tabular-nums text-muted-foreground line-through decoration-rose-500/70 decoration-2\">\n            ¥156,000\n          </span>\n        </div>\n        <div class=\"rounded-lg border border-emerald-500/30 bg-emerald-500/10 p-4 text-center\">\n          <p class=\"text-xs font-medium uppercase tracking-wide text-emerald-600 dark:text-emerald-400\">\n            あなたの価格\n          </p>\n          <p class=\"mt-1 text-4xl font-bold tracking-tight text-emerald-600 dark:text-emerald-400\">\n            ¥49,800\n          </p>\n          <p class=\"mt-1 text-sm font-semibold text-emerald-600 dark:text-emerald-400\">\n            ¥106,200 お得（68% OFF）\n          </p>\n        </div>\n      </div>\n      <div class=\"flex items-center p-6 pt-0 flex-col gap-2\">\n        <button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 h-9 px-4 py-2 w-full bg-emerald-600 text-white hover:bg-emerald-600/90\">\n          今すぐ受け取る\n        </button>\n        <p class=\"text-center text-xs text-muted-foreground\">\n          30日間の返金保証付き・いつでもキャンセル可\n        </p>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "playful-emoji-feature-grid",
@@ -1310,7 +1310,7 @@
       ],
       "standalone": true,
       "source": "import { Wand2, Palette, Rocket, Users, Shield, Sparkles } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"ポップ機能グリッド\",\n  category: \"プレイフル\",\n  description: \"カラフルなバブルにlucideアイコンを入れた機能グリッド。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"playful\", \"rounded\", \"features\"],\n};\n\nconst features = [\n  { icon: Wand2, color: \"#ff8fab\", title: \"かんたん作成\", titleEn: \"Easy to build\", desc: \"ドラッグするだけ。コード知識はいりません。\", descEn: \"Just drag and drop. No code required.\" },\n  { icon: Palette, color: \"#4cc9f0\", title: \"カラフルテーマ\", titleEn: \"Colorful themes\", desc: \"気分でガラッと着せ替えできます。\", descEn: \"Restyle the whole thing on a whim.\" },\n  { icon: Rocket, color: \"#06d6a0\", title: \"サクッと公開\", titleEn: \"Ship in a snap\", desc: \"ワンクリックで世界に届けよう。\", descEn: \"Go live with a single click.\" },\n  { icon: Users, color: \"#ffd166\", title: \"みんなで編集\", titleEn: \"Edit together\", desc: \"チームでリアルタイムにワイワイ。\", descEn: \"Real-time fun with your whole team.\" },\n  { icon: Shield, color: \"#b388ff\", title: \"安心セキュリティ\", titleEn: \"Safe & secure\", desc: \"大事なデータをしっかり守ります。\", descEn: \"Your important data stays protected.\" },\n  { icon: Sparkles, color: \"#ff8fab\", title: \"AIのおてつだい\", titleEn: \"AI helper\", desc: \"アイデア出しもおまかせください。\", descEn: \"Stuck for ideas? Leave it to us.\" },\n];\n\nexport default function EmojiFeatureGrid() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"font-rounded w-full rounded-3xl bg-[#f7fcff] px-5 py-14 sm:px-8\">\n      <div className=\"mb-10 text-center\">\n        <span\n          className=\"mb-3 inline-block rounded-full px-4 py-1 text-sm font-extrabold text-white\"\n          style={{ backgroundColor: \"#06d6a0\" }}\n        >\n          {en ? \"What you can do\" : \"できること\"}\n        </span>\n        <h2 className=\"text-3xl font-extrabold tracking-tight text-slate-800 sm:text-4xl\">\n          {en ? \"Everything fun, all in one\" : \"わくわくが、ぜんぶ揃う\"}\n        </h2>\n      </div>\n\n      <div className=\"mx-auto grid max-w-5xl gap-5 sm:grid-cols-2 lg:grid-cols-3\">\n        {features.map((f) => {\n          const Icon = f.icon;\n          return (\n            <div\n              key={f.titleEn}\n              className=\"group rounded-3xl border-2 border-slate-100 bg-white p-6 shadow-[0_8px_0_#eef1f4] transition-all duration-200 hover:-translate-y-1.5\"\n            >\n              <div\n                className=\"mb-4 inline-flex size-14 items-center justify-center rounded-2xl text-white transition-transform duration-200 group-hover:rotate-6 group-hover:scale-105\"\n                style={{ backgroundColor: f.color }}\n              >\n                <Icon className=\"size-7\" />\n              </div>\n              <h3 className=\"text-lg font-extrabold text-slate-800\">{en ? f.titleEn : f.title}</h3>\n              <p className=\"mt-1.5 text-sm leading-relaxed text-slate-500\">{en ? f.descEn : f.desc}</p>\n            </div>\n          );\n        })}\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"font-rounded w-full rounded-3xl bg-[#f7fcff] px-5 py-14 sm:px-8\">\n      <div class=\"mb-10 text-center\">\n        <span class=\"mb-3 inline-block rounded-full px-4 py-1 text-sm font-extrabold text-white\" style=\"background-color:#06d6a0\">\n          できること\n        </span>\n        <h2 class=\"text-3xl font-extrabold tracking-tight text-slate-800 sm:text-4xl\">\n          わくわくが、ぜんぶ揃う\n        </h2>\n      </div>\n      <div class=\"mx-auto grid max-w-5xl gap-5 sm:grid-cols-2 lg:grid-cols-3\">\n        <div class=\"group rounded-3xl border-2 border-slate-100 bg-white p-6 shadow-[0_8px_0_#eef1f4] transition-all duration-200 hover:-translate-y-1.5\">\n          <div class=\"mb-4 inline-flex size-14 items-center justify-center rounded-2xl text-white transition-transform duration-200 group-hover:rotate-6 group-hover:scale-105\" style=\"background-color:#ff8fab\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-wand-sparkles size-7\">\n              <path d=\"m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72\">\n              </path>\n              <path d=\"m14 7 3 3\">\n              </path>\n              <path d=\"M5 6v4\">\n              </path>\n              <path d=\"M19 14v4\">\n              </path>\n              <path d=\"M10 2v2\">\n              </path>\n              <path d=\"M7 8H3\">\n              </path>\n              <path d=\"M21 16h-4\">\n              </path>\n              <path d=\"M11 3H9\">\n              </path>\n            </svg>\n          </div>\n          <h3 class=\"text-lg font-extrabold text-slate-800\">\n            かんたん作成\n          </h3>\n          <p class=\"mt-1.5 text-sm leading-relaxed text-slate-500\">\n            ドラッグするだけ。コード知識はいりません。\n          </p>\n        </div>\n        <div class=\"group rounded-3xl border-2 border-slate-100 bg-white p-6 shadow-[0_8px_0_#eef1f4] transition-all duration-200 hover:-translate-y-1.5\">\n          <div class=\"mb-4 inline-flex size-14 items-center justify-center rounded-2xl text-white transition-transform duration-200 group-hover:rotate-6 group-hover:scale-105\" style=\"background-color:#4cc9f0\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-palette size-7\">\n              <circle cx=\"13.5\" cy=\"6.5\" r=\".5\" fill=\"currentColor\">\n              </circle>\n              <circle cx=\"17.5\" cy=\"10.5\" r=\".5\" fill=\"currentColor\">\n              </circle>\n              <circle cx=\"8.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\">\n              </circle>\n              <circle cx=\"6.5\" cy=\"12.5\" r=\".5\" fill=\"currentColor\">\n              </circle>\n              <path d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z\">\n              </path>\n            </svg>\n          </div>\n          <h3 class=\"text-lg font-extrabold text-slate-800\">\n            カラフルテーマ\n          </h3>\n          <p class=\"mt-1.5 text-sm leading-relaxed text-slate-500\">\n            気分でガラッと着せ替えできます。\n          </p>\n        </div>\n        <div class=\"group rounded-3xl border-2 border-slate-100 bg-white p-6 shadow-[0_8px_0_#eef1f4] transition-all duration-200 hover:-translate-y-1.5\">\n          <div class=\"mb-4 inline-flex size-14 items-center justify-center rounded-2xl text-white transition-transform duration-200 group-hover:rotate-6 group-hover:scale-105\" style=\"background-color:#06d6a0\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-rocket size-7\">\n              <path d=\"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z\">\n              </path>\n              <path d=\"m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z\">\n              </path>\n              <path d=\"M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0\">\n              </path>\n              <path d=\"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5\">\n              </path>\n            </svg>\n          </div>\n          <h3 class=\"text-lg font-extrabold text-slate-800\">\n            サクッと公開\n          </h3>\n          <p class=\"mt-1.5 text-sm leading-relaxed text-slate-500\">\n            ワンクリックで世界に届けよう。\n          </p>\n        </div>\n        <div class=\"group rounded-3xl border-2 border-slate-100 bg-white p-6 shadow-[0_8px_0_#eef1f4] transition-all duration-200 hover:-translate-y-1.5\">\n          <div class=\"mb-4 inline-flex size-14 items-center justify-center rounded-2xl text-white transition-transform duration-200 group-hover:rotate-6 group-hover:scale-105\" style=\"background-color:#ffd166\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-users size-7\">\n              <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\">\n              </path>\n              <circle cx=\"9\" cy=\"7\" r=\"4\">\n              </circle>\n              <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\">\n              </path>\n              <path d=\"M16 3.13a4 4 0 0 1 0 7.75\">\n              </path>\n            </svg>\n          </div>\n          <h3 class=\"text-lg font-extrabold text-slate-800\">\n            みんなで編集\n          </h3>\n          <p class=\"mt-1.5 text-sm leading-relaxed text-slate-500\">\n            チームでリアルタイムにワイワイ。\n          </p>\n        </div>\n        <div class=\"group rounded-3xl border-2 border-slate-100 bg-white p-6 shadow-[0_8px_0_#eef1f4] transition-all duration-200 hover:-translate-y-1.5\">\n          <div class=\"mb-4 inline-flex size-14 items-center justify-center rounded-2xl text-white transition-transform duration-200 group-hover:rotate-6 group-hover:scale-105\" style=\"background-color:#b388ff\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-shield size-7\">\n              <path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\n              </path>\n            </svg>\n          </div>\n          <h3 class=\"text-lg font-extrabold text-slate-800\">\n            安心セキュリティ\n          </h3>\n          <p class=\"mt-1.5 text-sm leading-relaxed text-slate-500\">\n            大事なデータをしっかり守ります。\n          </p>\n        </div>\n        <div class=\"group rounded-3xl border-2 border-slate-100 bg-white p-6 shadow-[0_8px_0_#eef1f4] transition-all duration-200 hover:-translate-y-1.5\">\n          <div class=\"mb-4 inline-flex size-14 items-center justify-center rounded-2xl text-white transition-transform duration-200 group-hover:rotate-6 group-hover:scale-105\" style=\"background-color:#ff8fab\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-7\">\n              <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n              </path>\n              <path d=\"M20 3v4\">\n              </path>\n              <path d=\"M22 5h-4\">\n              </path>\n              <path d=\"M4 17v2\">\n              </path>\n              <path d=\"M5 18H3\">\n              </path>\n            </svg>\n          </div>\n          <h3 class=\"text-lg font-extrabold text-slate-800\">\n            AIのおてつだい\n          </h3>\n          <p class=\"mt-1.5 text-sm leading-relaxed text-slate-500\">\n            アイデア出しもおまかせください。\n          </p>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"font-rounded w-full rounded-3xl bg-[#f7fcff] px-5 py-14 sm:px-8\">\n      <div class=\"mb-10 text-center\">\n        <span class=\"mb-3 inline-block rounded-full px-4 py-1 text-sm font-extrabold text-white\" style=\"background-color:#06d6a0\">\n          できること\n        </span>\n        <h2 class=\"text-3xl font-extrabold tracking-tight text-slate-800 sm:text-4xl\">\n          わくわくが、ぜんぶ揃う\n        </h2>\n      </div>\n      <div class=\"mx-auto grid max-w-5xl gap-5 sm:grid-cols-2 lg:grid-cols-3\">\n        <div class=\"group rounded-3xl border-2 border-slate-100 bg-white p-6 shadow-[0_8px_0_#eef1f4] transition-all duration-200 hover:-translate-y-1.5\">\n          <div class=\"mb-4 inline-flex size-14 items-center justify-center rounded-2xl text-white transition-transform duration-200 group-hover:rotate-6 group-hover:scale-105\" style=\"background-color:#ff8fab\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-wand-sparkles size-7\">\n              <path d=\"m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72\">\n              </path>\n              <path d=\"m14 7 3 3\">\n              </path>\n              <path d=\"M5 6v4\">\n              </path>\n              <path d=\"M19 14v4\">\n              </path>\n              <path d=\"M10 2v2\">\n              </path>\n              <path d=\"M7 8H3\">\n              </path>\n              <path d=\"M21 16h-4\">\n              </path>\n              <path d=\"M11 3H9\">\n              </path>\n            </svg>\n          </div>\n          <h3 class=\"text-lg font-extrabold text-slate-800\">\n            かんたん作成\n          </h3>\n          <p class=\"mt-1.5 text-sm leading-relaxed text-slate-500\">\n            ドラッグするだけ。コード知識はいりません。\n          </p>\n        </div>\n        <div class=\"group rounded-3xl border-2 border-slate-100 bg-white p-6 shadow-[0_8px_0_#eef1f4] transition-all duration-200 hover:-translate-y-1.5\">\n          <div class=\"mb-4 inline-flex size-14 items-center justify-center rounded-2xl text-white transition-transform duration-200 group-hover:rotate-6 group-hover:scale-105\" style=\"background-color:#4cc9f0\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-palette size-7\">\n              <circle cx=\"13.5\" cy=\"6.5\" r=\".5\" fill=\"currentColor\">\n              </circle>\n              <circle cx=\"17.5\" cy=\"10.5\" r=\".5\" fill=\"currentColor\">\n              </circle>\n              <circle cx=\"8.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\">\n              </circle>\n              <circle cx=\"6.5\" cy=\"12.5\" r=\".5\" fill=\"currentColor\">\n              </circle>\n              <path d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z\">\n              </path>\n            </svg>\n          </div>\n          <h3 class=\"text-lg font-extrabold text-slate-800\">\n            カラフルテーマ\n          </h3>\n          <p class=\"mt-1.5 text-sm leading-relaxed text-slate-500\">\n            気分でガラッと着せ替えできます。\n          </p>\n        </div>\n        <div class=\"group rounded-3xl border-2 border-slate-100 bg-white p-6 shadow-[0_8px_0_#eef1f4] transition-all duration-200 hover:-translate-y-1.5\">\n          <div class=\"mb-4 inline-flex size-14 items-center justify-center rounded-2xl text-white transition-transform duration-200 group-hover:rotate-6 group-hover:scale-105\" style=\"background-color:#06d6a0\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-rocket size-7\">\n              <path d=\"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z\">\n              </path>\n              <path d=\"m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z\">\n              </path>\n              <path d=\"M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0\">\n              </path>\n              <path d=\"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5\">\n              </path>\n            </svg>\n          </div>\n          <h3 class=\"text-lg font-extrabold text-slate-800\">\n            サクッと公開\n          </h3>\n          <p class=\"mt-1.5 text-sm leading-relaxed text-slate-500\">\n            ワンクリックで世界に届けよう。\n          </p>\n        </div>\n        <div class=\"group rounded-3xl border-2 border-slate-100 bg-white p-6 shadow-[0_8px_0_#eef1f4] transition-all duration-200 hover:-translate-y-1.5\">\n          <div class=\"mb-4 inline-flex size-14 items-center justify-center rounded-2xl text-white transition-transform duration-200 group-hover:rotate-6 group-hover:scale-105\" style=\"background-color:#ffd166\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-users size-7\">\n              <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\">\n              </path>\n              <circle cx=\"9\" cy=\"7\" r=\"4\">\n              </circle>\n              <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\">\n              </path>\n              <path d=\"M16 3.13a4 4 0 0 1 0 7.75\">\n              </path>\n            </svg>\n          </div>\n          <h3 class=\"text-lg font-extrabold text-slate-800\">\n            みんなで編集\n          </h3>\n          <p class=\"mt-1.5 text-sm leading-relaxed text-slate-500\">\n            チームでリアルタイムにワイワイ。\n          </p>\n        </div>\n        <div class=\"group rounded-3xl border-2 border-slate-100 bg-white p-6 shadow-[0_8px_0_#eef1f4] transition-all duration-200 hover:-translate-y-1.5\">\n          <div class=\"mb-4 inline-flex size-14 items-center justify-center rounded-2xl text-white transition-transform duration-200 group-hover:rotate-6 group-hover:scale-105\" style=\"background-color:#b388ff\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-shield size-7\">\n              <path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\n              </path>\n            </svg>\n          </div>\n          <h3 class=\"text-lg font-extrabold text-slate-800\">\n            安心セキュリティ\n          </h3>\n          <p class=\"mt-1.5 text-sm leading-relaxed text-slate-500\">\n            大事なデータをしっかり守ります。\n          </p>\n        </div>\n        <div class=\"group rounded-3xl border-2 border-slate-100 bg-white p-6 shadow-[0_8px_0_#eef1f4] transition-all duration-200 hover:-translate-y-1.5\">\n          <div class=\"mb-4 inline-flex size-14 items-center justify-center rounded-2xl text-white transition-transform duration-200 group-hover:rotate-6 group-hover:scale-105\" style=\"background-color:#ff8fab\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-7\">\n              <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n              </path>\n              <path d=\"M20 3v4\">\n              </path>\n              <path d=\"M22 5h-4\">\n              </path>\n              <path d=\"M4 17v2\">\n              </path>\n              <path d=\"M5 18H3\">\n              </path>\n            </svg>\n          </div>\n          <h3 class=\"text-lg font-extrabold text-slate-800\">\n            AIのおてつだい\n          </h3>\n          <p class=\"mt-1.5 text-sm leading-relaxed text-slate-500\">\n            アイデア出しもおまかせください。\n          </p>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "playful-mascot-card",
@@ -1324,7 +1324,7 @@
       ],
       "standalone": true,
       "source": "import { Sparkles } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"マスコットカード\",\n  category: \"プレイフル\",\n  description: \"SVGで描いたかわいいマスコット入りカード。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"playful\", \"rounded\", \"mascot\"],\n};\n\nfunction Mascot() {\n  return (\n    <svg viewBox=\"0 0 160 160\" className=\"size-40\" aria-hidden role=\"img\">\n      {/* body */}\n      <ellipse cx=\"80\" cy=\"92\" rx=\"52\" ry=\"50\" fill=\"#4cc9f0\" />\n      <ellipse cx=\"80\" cy=\"100\" rx=\"36\" ry=\"34\" fill=\"#bff0ff\" />\n      {/* ears */}\n      <circle cx=\"44\" cy=\"48\" r=\"16\" fill=\"#4cc9f0\" />\n      <circle cx=\"116\" cy=\"48\" r=\"16\" fill=\"#4cc9f0\" />\n      <circle cx=\"44\" cy=\"48\" r=\"8\" fill=\"#ff8fab\" />\n      <circle cx=\"116\" cy=\"48\" r=\"8\" fill=\"#ff8fab\" />\n      {/* cheeks */}\n      <circle cx=\"52\" cy=\"100\" r=\"9\" fill=\"#ff8fab\" opacity=\"0.6\" />\n      <circle cx=\"108\" cy=\"100\" r=\"9\" fill=\"#ff8fab\" opacity=\"0.6\" />\n      {/* eyes */}\n      <circle cx=\"64\" cy=\"84\" r=\"7\" fill=\"#2a3340\" />\n      <circle cx=\"96\" cy=\"84\" r=\"7\" fill=\"#2a3340\" />\n      <circle cx=\"66\" cy=\"82\" r=\"2.5\" fill=\"#fff\" />\n      <circle cx=\"98\" cy=\"82\" r=\"2.5\" fill=\"#fff\" />\n      {/* smile */}\n      <path\n        d=\"M68 98 Q80 110 92 98\"\n        fill=\"none\"\n        stroke=\"#2a3340\"\n        strokeWidth=\"4\"\n        strokeLinecap=\"round\"\n      />\n      {/* sparkle */}\n      <path\n        d=\"M128 78l3 7 7 3-7 3-3 7-3-7-7-3 7-3z\"\n        fill=\"#ffd166\"\n      />\n    </svg>\n  );\n}\n\nexport default function MascotCard() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <div className=\"font-rounded w-full max-w-sm overflow-hidden rounded-3xl border-2 border-slate-100 bg-white shadow-[0_12px_0_#eef1f4]\">\n      <div\n        className=\"flex justify-center pt-8\"\n        style={{ background: \"linear-gradient(180deg,#f0fbff 0%,#ffffff 100%)\" }}\n      >\n        <div className=\"animate-bounce\" style={{ animationDuration: \"2.4s\" }}>\n          <Mascot />\n        </div>\n      </div>\n      <div className=\"p-7 pt-4 text-center\">\n        <h3 className=\"text-xl font-extrabold text-slate-800\">{en ? \"Hi, I'm Piyo!\" : \"こんにちは、ぴよすけ！\"}</h3>\n        <p className=\"mt-2 text-sm leading-relaxed text-slate-500\">\n          {en\n            ? \"Your trusty sidekick for getting things done. Give me a shout anytime you're stuck.\"\n            : \"あなたの作業をサポートする相棒です。困ったらいつでも声をかけてね。\"}\n        </p>\n        <button\n          className=\"mt-5 inline-flex items-center gap-2 rounded-full px-7 py-3 text-sm font-extrabold text-white transition-all hover:-translate-y-0.5 active:translate-y-1\"\n          style={{ backgroundColor: \"#4cc9f0\", boxShadow: \"0 6px 0 #37a8cc\" }}\n        >\n          <Sparkles className=\"size-4\" /> {en ? \"Say hi\" : \"なかよくなる\"}\n        </button>\n      </div>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"font-rounded w-full max-w-sm overflow-hidden rounded-3xl border-2 border-slate-100 bg-white shadow-[0_12px_0_#eef1f4]\">\n      <div class=\"flex justify-center pt-8\" style=\"background:linear-gradient(180deg,#f0fbff 0%,#ffffff 100%)\">\n        <div class=\"animate-bounce\" style=\"animation-duration:2.4s\">\n          <svg viewBox=\"0 0 160 160\" class=\"size-40\" aria-hidden=\"true\" role=\"img\">\n            <ellipse cx=\"80\" cy=\"92\" rx=\"52\" ry=\"50\" fill=\"#4cc9f0\">\n            </ellipse>\n            <ellipse cx=\"80\" cy=\"100\" rx=\"36\" ry=\"34\" fill=\"#bff0ff\">\n            </ellipse>\n            <circle cx=\"44\" cy=\"48\" r=\"16\" fill=\"#4cc9f0\">\n            </circle>\n            <circle cx=\"116\" cy=\"48\" r=\"16\" fill=\"#4cc9f0\">\n            </circle>\n            <circle cx=\"44\" cy=\"48\" r=\"8\" fill=\"#ff8fab\">\n            </circle>\n            <circle cx=\"116\" cy=\"48\" r=\"8\" fill=\"#ff8fab\">\n            </circle>\n            <circle cx=\"52\" cy=\"100\" r=\"9\" fill=\"#ff8fab\" opacity=\"0.6\">\n            </circle>\n            <circle cx=\"108\" cy=\"100\" r=\"9\" fill=\"#ff8fab\" opacity=\"0.6\">\n            </circle>\n            <circle cx=\"64\" cy=\"84\" r=\"7\" fill=\"#2a3340\">\n            </circle>\n            <circle cx=\"96\" cy=\"84\" r=\"7\" fill=\"#2a3340\">\n            </circle>\n            <circle cx=\"66\" cy=\"82\" r=\"2.5\" fill=\"#fff\">\n            </circle>\n            <circle cx=\"98\" cy=\"82\" r=\"2.5\" fill=\"#fff\">\n            </circle>\n            <path d=\"M68 98 Q80 110 92 98\" fill=\"none\" stroke=\"#2a3340\" stroke-width=\"4\" stroke-linecap=\"round\">\n            </path>\n            <path d=\"M128 78l3 7 7 3-7 3-3 7-3-7-7-3 7-3z\" fill=\"#ffd166\">\n            </path>\n          </svg>\n        </div>\n      </div>\n      <div class=\"p-7 pt-4 text-center\">\n        <h3 class=\"text-xl font-extrabold text-slate-800\">\n          こんにちは、ぴよすけ！\n        </h3>\n        <p class=\"mt-2 text-sm leading-relaxed text-slate-500\">\n          あなたの作業をサポートする相棒です。困ったらいつでも声をかけてね。\n        </p>\n        <button class=\"mt-5 inline-flex items-center gap-2 rounded-full px-7 py-3 text-sm font-extrabold text-white transition-all hover:-translate-y-0.5 active:translate-y-1\" style=\"background-color:#4cc9f0;box-shadow:0 6px 0 #37a8cc\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-4\">\n            <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n            </path>\n            <path d=\"M20 3v4\">\n            </path>\n            <path d=\"M22 5h-4\">\n            </path>\n            <path d=\"M4 17v2\">\n            </path>\n            <path d=\"M5 18H3\">\n            </path>\n          </svg>\n          なかよくなる\n        </button>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"font-rounded w-full max-w-sm overflow-hidden rounded-3xl border-2 border-slate-100 bg-white shadow-[0_12px_0_#eef1f4]\">\n      <div class=\"flex justify-center pt-8\" style=\"background:linear-gradient(180deg,#f0fbff 0%,#ffffff 100%)\">\n        <div class=\"animate-bounce\" style=\"animation-duration:2.4s\">\n          <svg viewBox=\"0 0 160 160\" class=\"size-40\" aria-hidden=\"true\" role=\"img\">\n            <ellipse cx=\"80\" cy=\"92\" rx=\"52\" ry=\"50\" fill=\"#4cc9f0\">\n            </ellipse>\n            <ellipse cx=\"80\" cy=\"100\" rx=\"36\" ry=\"34\" fill=\"#bff0ff\">\n            </ellipse>\n            <circle cx=\"44\" cy=\"48\" r=\"16\" fill=\"#4cc9f0\">\n            </circle>\n            <circle cx=\"116\" cy=\"48\" r=\"16\" fill=\"#4cc9f0\">\n            </circle>\n            <circle cx=\"44\" cy=\"48\" r=\"8\" fill=\"#ff8fab\">\n            </circle>\n            <circle cx=\"116\" cy=\"48\" r=\"8\" fill=\"#ff8fab\">\n            </circle>\n            <circle cx=\"52\" cy=\"100\" r=\"9\" fill=\"#ff8fab\" opacity=\"0.6\">\n            </circle>\n            <circle cx=\"108\" cy=\"100\" r=\"9\" fill=\"#ff8fab\" opacity=\"0.6\">\n            </circle>\n            <circle cx=\"64\" cy=\"84\" r=\"7\" fill=\"#2a3340\">\n            </circle>\n            <circle cx=\"96\" cy=\"84\" r=\"7\" fill=\"#2a3340\">\n            </circle>\n            <circle cx=\"66\" cy=\"82\" r=\"2.5\" fill=\"#fff\">\n            </circle>\n            <circle cx=\"98\" cy=\"82\" r=\"2.5\" fill=\"#fff\">\n            </circle>\n            <path d=\"M68 98 Q80 110 92 98\" fill=\"none\" stroke=\"#2a3340\" stroke-width=\"4\" stroke-linecap=\"round\">\n            </path>\n            <path d=\"M128 78l3 7 7 3-7 3-3 7-3-7-7-3 7-3z\" fill=\"#ffd166\">\n            </path>\n          </svg>\n        </div>\n      </div>\n      <div class=\"p-7 pt-4 text-center\">\n        <h3 class=\"text-xl font-extrabold text-slate-800\">\n          こんにちは、ぴよすけ！\n        </h3>\n        <p class=\"mt-2 text-sm leading-relaxed text-slate-500\">\n          あなたの作業をサポートする相棒です。困ったらいつでも声をかけてね。\n        </p>\n        <button class=\"mt-5 inline-flex items-center gap-2 rounded-full px-7 py-3 text-sm font-extrabold text-white transition-all hover:-translate-y-0.5 active:translate-y-1\" style=\"background-color:#4cc9f0;box-shadow:0 6px 0 #37a8cc\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-4\">\n            <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n            </path>\n            <path d=\"M20 3v4\">\n            </path>\n            <path d=\"M22 5h-4\">\n            </path>\n            <path d=\"M4 17v2\">\n            </path>\n            <path d=\"M5 18H3\">\n            </path>\n          </svg>\n          なかよくなる\n        </button>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "playful-playful-button-set",
@@ -1338,7 +1338,7 @@
       ],
       "standalone": true,
       "source": "import { Heart, Plus, Check, ArrowRight, Star } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"ポップ・ボタン集\",\n  category: \"プレイフル\",\n  description: \"丸くて弾むボタンとチップのセット。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"playful\", \"rounded\", \"button\"],\n};\n\nfunction BounceButton({\n  children,\n  color,\n  shadow,\n}: {\n  children: React.ReactNode;\n  color: string;\n  shadow: string;\n}) {\n  return (\n    <button\n      className=\"inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 text-sm font-extrabold text-white transition-all duration-150 hover:-translate-y-0.5 active:translate-y-1\"\n      style={{ backgroundColor: color, boxShadow: `0 6px 0 ${shadow}` }}\n    >\n      {children}\n    </button>\n  );\n}\n\nconst chips = [\n  { t: \"デザイン\", en: \"Design\", c: \"#ff8fab\" },\n  { t: \"開発\", en: \"Dev\", c: \"#4cc9f0\" },\n  { t: \"マーケ\", en: \"Marketing\", c: \"#06d6a0\" },\n  { t: \"リサーチ\", en: \"Research\", c: \"#ffd166\" },\n  { t: \"AI\", en: \"AI\", c: \"#b388ff\" },\n];\n\nexport default function PlayfulButtonSet() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <div className=\"font-rounded w-full max-w-md rounded-3xl border-2 border-slate-100 bg-white p-8 shadow-[0_12px_0_#eef1f4]\">\n      <p className=\"mb-3 text-xs font-extrabold uppercase tracking-wide text-slate-400\">\n        {en ? \"Buttons\" : \"ボタン\"}\n      </p>\n      <div className=\"flex flex-wrap gap-3\">\n        <BounceButton color=\"#ff8fab\" shadow=\"#e26d8c\">\n          <Heart className=\"size-4\" /> {en ? \"Like\" : \"いいね\"}\n        </BounceButton>\n        <BounceButton color=\"#4cc9f0\" shadow=\"#37a8cc\">\n          {en ? \"Continue\" : \"つづける\"} <ArrowRight className=\"size-4\" />\n        </BounceButton>\n        <BounceButton color=\"#06d6a0\" shadow=\"#05ab80\">\n          <Check className=\"size-4\" strokeWidth={3} /> {en ? \"Done\" : \"完了\"}\n        </BounceButton>\n      </div>\n\n      <div className=\"mt-5 flex flex-wrap gap-3\">\n        <button className=\"inline-flex items-center gap-2 rounded-full border-2 border-slate-200 bg-white px-6 py-3 text-sm font-extrabold text-slate-600 shadow-[0_6px_0_#eef1f4] transition-all hover:-translate-y-0.5 active:translate-y-1\">\n          <Plus className=\"size-4\" /> {en ? \"Add\" : \"追加する\"}\n        </button>\n        <button\n          className=\"inline-flex items-center gap-2 rounded-full px-6 py-3 text-sm font-extrabold transition-all hover:-translate-y-0.5 active:translate-y-1\"\n          style={{ backgroundColor: \"#fff0c2\", color: \"#b8860b\", boxShadow: \"0 6px 0 #f2dd97\" }}\n        >\n          <Star className=\"size-4 fill-current\" /> {en ? \"Featured\" : \"おすすめ\"}\n        </button>\n      </div>\n\n      <p className=\"mb-3 mt-7 text-xs font-extrabold uppercase tracking-wide text-slate-400\">\n        {en ? \"Chips\" : \"チップ\"}\n      </p>\n      <div className=\"flex flex-wrap gap-2\">\n        {chips.map((chip, i) => (\n          <span\n            key={chip.en}\n            className={cn(\n              \"rounded-full px-4 py-1.5 text-sm font-bold text-white transition-transform hover:scale-105\",\n              i === 0 && \"ring-2 ring-offset-2\"\n            )}\n            style={{\n              backgroundColor: chip.c,\n              ...(i === 0 ? { boxShadow: `0 0 0 2px #fff, 0 0 0 4px ${chip.c}` } : {}),\n            }}\n          >\n            {en ? chip.en : chip.t}\n          </span>\n        ))}\n      </div>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"font-rounded w-full max-w-md rounded-3xl border-2 border-slate-100 bg-white p-8 shadow-[0_12px_0_#eef1f4]\">\n      <p class=\"mb-3 text-xs font-extrabold uppercase tracking-wide text-slate-400\">\n        ボタン\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        <button class=\"inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 text-sm font-extrabold text-white transition-all duration-150 hover:-translate-y-0.5 active:translate-y-1\" style=\"background-color:#ff8fab;box-shadow:0 6px 0 #e26d8c\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-heart size-4\">\n            <path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\n            </path>\n          </svg>\n          いいね\n        </button>\n        <button class=\"inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 text-sm font-extrabold text-white transition-all duration-150 hover:-translate-y-0.5 active:translate-y-1\" style=\"background-color:#4cc9f0;box-shadow:0 6px 0 #37a8cc\">\n          つづける\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right size-4\">\n            <path d=\"M5 12h14\">\n            </path>\n            <path d=\"m12 5 7 7-7 7\">\n            </path>\n          </svg>\n        </button>\n        <button class=\"inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 text-sm font-extrabold text-white transition-all duration-150 hover:-translate-y-0.5 active:translate-y-1\" style=\"background-color:#06d6a0;box-shadow:0 6px 0 #05ab80\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4\">\n            <path d=\"M20 6 9 17l-5-5\">\n            </path>\n          </svg>\n          完了\n        </button>\n      </div>\n      <div class=\"mt-5 flex flex-wrap gap-3\">\n        <button class=\"inline-flex items-center gap-2 rounded-full border-2 border-slate-200 bg-white px-6 py-3 text-sm font-extrabold text-slate-600 shadow-[0_6px_0_#eef1f4] transition-all hover:-translate-y-0.5 active:translate-y-1\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-plus size-4\">\n            <path d=\"M5 12h14\">\n            </path>\n            <path d=\"M12 5v14\">\n            </path>\n          </svg>\n          追加する\n        </button>\n        <button class=\"inline-flex items-center gap-2 rounded-full px-6 py-3 text-sm font-extrabold transition-all hover:-translate-y-0.5 active:translate-y-1\" style=\"background-color:#fff0c2;color:#b8860b;box-shadow:0 6px 0 #f2dd97\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-4 fill-current\">\n            <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n            </path>\n          </svg>\n          おすすめ\n        </button>\n      </div>\n      <p class=\"mb-3 mt-7 text-xs font-extrabold uppercase tracking-wide text-slate-400\">\n        チップ\n      </p>\n      <div class=\"flex flex-wrap gap-2\">\n        <span class=\"rounded-full px-4 py-1.5 text-sm font-bold text-white transition-transform hover:scale-105 ring-2 ring-offset-2\" style=\"background-color:#ff8fab;box-shadow:0 0 0 2px #fff, 0 0 0 4px #ff8fab\">\n          デザイン\n        </span>\n        <span class=\"rounded-full px-4 py-1.5 text-sm font-bold text-white transition-transform hover:scale-105\" style=\"background-color:#4cc9f0\">\n          開発\n        </span>\n        <span class=\"rounded-full px-4 py-1.5 text-sm font-bold text-white transition-transform hover:scale-105\" style=\"background-color:#06d6a0\">\n          マーケ\n        </span>\n        <span class=\"rounded-full px-4 py-1.5 text-sm font-bold text-white transition-transform hover:scale-105\" style=\"background-color:#ffd166\">\n          リサーチ\n        </span>\n        <span class=\"rounded-full px-4 py-1.5 text-sm font-bold text-white transition-transform hover:scale-105\" style=\"background-color:#b388ff\">\n          AI\n        </span>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"font-rounded w-full max-w-md rounded-3xl border-2 border-slate-100 bg-white p-8 shadow-[0_12px_0_#eef1f4]\">\n      <p class=\"mb-3 text-xs font-extrabold uppercase tracking-wide text-slate-400\">\n        ボタン\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        <button class=\"inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 text-sm font-extrabold text-white transition-all duration-150 hover:-translate-y-0.5 active:translate-y-1\" style=\"background-color:#ff8fab;box-shadow:0 6px 0 #e26d8c\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-heart size-4\">\n            <path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\n            </path>\n          </svg>\n          いいね\n        </button>\n        <button class=\"inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 text-sm font-extrabold text-white transition-all duration-150 hover:-translate-y-0.5 active:translate-y-1\" style=\"background-color:#4cc9f0;box-shadow:0 6px 0 #37a8cc\">\n          つづける\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right size-4\">\n            <path d=\"M5 12h14\">\n            </path>\n            <path d=\"m12 5 7 7-7 7\">\n            </path>\n          </svg>\n        </button>\n        <button class=\"inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 text-sm font-extrabold text-white transition-all duration-150 hover:-translate-y-0.5 active:translate-y-1\" style=\"background-color:#06d6a0;box-shadow:0 6px 0 #05ab80\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check size-4\">\n            <path d=\"M20 6 9 17l-5-5\">\n            </path>\n          </svg>\n          完了\n        </button>\n      </div>\n      <div class=\"mt-5 flex flex-wrap gap-3\">\n        <button class=\"inline-flex items-center gap-2 rounded-full border-2 border-slate-200 bg-white px-6 py-3 text-sm font-extrabold text-slate-600 shadow-[0_6px_0_#eef1f4] transition-all hover:-translate-y-0.5 active:translate-y-1\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-plus size-4\">\n            <path d=\"M5 12h14\">\n            </path>\n            <path d=\"M12 5v14\">\n            </path>\n          </svg>\n          追加する\n        </button>\n        <button class=\"inline-flex items-center gap-2 rounded-full px-6 py-3 text-sm font-extrabold transition-all hover:-translate-y-0.5 active:translate-y-1\" style=\"background-color:#fff0c2;color:#b8860b;box-shadow:0 6px 0 #f2dd97\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-4 fill-current\">\n            <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n            </path>\n          </svg>\n          おすすめ\n        </button>\n      </div>\n      <p class=\"mb-3 mt-7 text-xs font-extrabold uppercase tracking-wide text-slate-400\">\n        チップ\n      </p>\n      <div class=\"flex flex-wrap gap-2\">\n        <span class=\"rounded-full px-4 py-1.5 text-sm font-bold text-white transition-transform hover:scale-105 ring-2 ring-offset-2\" style=\"background-color:#ff8fab;box-shadow:0 0 0 2px #fff, 0 0 0 4px #ff8fab\">\n          デザイン\n        </span>\n        <span class=\"rounded-full px-4 py-1.5 text-sm font-bold text-white transition-transform hover:scale-105\" style=\"background-color:#4cc9f0\">\n          開発\n        </span>\n        <span class=\"rounded-full px-4 py-1.5 text-sm font-bold text-white transition-transform hover:scale-105\" style=\"background-color:#06d6a0\">\n          マーケ\n        </span>\n        <span class=\"rounded-full px-4 py-1.5 text-sm font-bold text-white transition-transform hover:scale-105\" style=\"background-color:#ffd166\">\n          リサーチ\n        </span>\n        <span class=\"rounded-full px-4 py-1.5 text-sm font-bold text-white transition-transform hover:scale-105\" style=\"background-color:#b388ff\">\n          AI\n        </span>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "playful-playful-cta",
@@ -1352,7 +1352,7 @@
       ],
       "standalone": true,
       "source": "import { ArrowRight } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"ポップCTAバンド\",\n  category: \"プレイフル\",\n  description: \"紙吹雪SVG付きの陽気なCTAバンド。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"playful\", \"rounded\", \"cta\"],\n};\n\nconst confetti = [\n  { x: 8, y: 20, r: 8, c: \"#ffd166\", rot: 20 },\n  { x: 20, y: 70, r: 6, c: \"#06d6a0\", rot: -15 },\n  { x: 34, y: 30, r: 5, c: \"#fff\", rot: 40 },\n  { x: 50, y: 80, r: 7, c: \"#b388ff\", rot: 0 },\n  { x: 66, y: 25, r: 6, c: \"#fff\", rot: -30 },\n  { x: 80, y: 65, r: 8, c: \"#ffd166\", rot: 15 },\n  { x: 92, y: 35, r: 5, c: \"#06d6a0\", rot: -45 },\n  { x: 14, y: 50, r: 5, c: \"#fff\", rot: 30 },\n  { x: 74, y: 18, r: 6, c: \"#b388ff\", rot: -20 },\n];\n\nexport default function PlayfulCTA() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section\n      className=\"font-rounded relative w-full overflow-hidden rounded-3xl px-6 py-16 text-center sm:px-12\"\n      style={{ background: \"linear-gradient(120deg,#ff8fab 0%,#b388ff 100%)\" }}\n    >\n      {/* confetti */}\n      <svg\n        viewBox=\"0 0 100 100\"\n        preserveAspectRatio=\"none\"\n        className=\"pointer-events-none absolute inset-0 h-full w-full opacity-80\"\n        aria-hidden\n      >\n        {confetti.map((c, i) => (\n          <rect\n            key={i}\n            x={c.x}\n            y={c.y}\n            width={c.r}\n            height={c.r}\n            rx={c.r / 3}\n            fill={c.c}\n            transform={`rotate(${c.rot} ${c.x + c.r / 2} ${c.y + c.r / 2})`}\n          />\n        ))}\n      </svg>\n\n      <div className=\"relative z-10 mx-auto max-w-2xl\">\n        <h2 className=\"text-3xl font-extrabold leading-tight tracking-tight text-white sm:text-5xl\">\n          {en ? \"Let's get started!\" : \"さあ、はじめよう！\"}\n        </h2>\n        <p className=\"mx-auto mt-4 max-w-md text-base text-white/90 sm:text-lg\">\n          {en\n            ? \"No credit card needed. Your studio is up and running in 30 seconds.\"\n            : \"クレジットカードは不要。30秒であなたのスタジオが立ち上がります。\"}\n        </p>\n        <div className=\"mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row\">\n          <button className=\"group inline-flex items-center gap-2 rounded-full bg-white px-8 py-3.5 text-base font-extrabold text-slate-800 shadow-[0_8px_0_rgba(0,0,0,0.15)] transition-all duration-150 hover:-translate-y-0.5 active:translate-y-1\">\n            {en ? \"Start for free\" : \"無料ではじめる\"}\n            <ArrowRight className=\"size-5 transition-transform group-hover:translate-x-1\" />\n          </button>\n          <button className=\"rounded-full border-2 border-white/70 px-8 py-3.5 text-base font-extrabold text-white transition-all hover:bg-white/15\">\n            {en ? \"See the deck\" : \"資料をみる\"}\n          </button>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"font-rounded relative w-full overflow-hidden rounded-3xl px-6 py-16 text-center sm:px-12\" style=\"background:linear-gradient(120deg,#ff8fab 0%,#b388ff 100%)\">\n      <svg viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" class=\"pointer-events-none absolute inset-0 h-full w-full opacity-80\" aria-hidden=\"true\">\n        <rect x=\"8\" y=\"20\" width=\"8\" height=\"8\" rx=\"2.6666666666666665\" fill=\"#ffd166\" transform=\"rotate(20 12 24)\">\n        </rect>\n        <rect x=\"20\" y=\"70\" width=\"6\" height=\"6\" rx=\"2\" fill=\"#06d6a0\" transform=\"rotate(-15 23 73)\">\n        </rect>\n        <rect x=\"34\" y=\"30\" width=\"5\" height=\"5\" rx=\"1.6666666666666667\" fill=\"#fff\" transform=\"rotate(40 36.5 32.5)\">\n        </rect>\n        <rect x=\"50\" y=\"80\" width=\"7\" height=\"7\" rx=\"2.3333333333333335\" fill=\"#b388ff\" transform=\"rotate(0 53.5 83.5)\">\n        </rect>\n        <rect x=\"66\" y=\"25\" width=\"6\" height=\"6\" rx=\"2\" fill=\"#fff\" transform=\"rotate(-30 69 28)\">\n        </rect>\n        <rect x=\"80\" y=\"65\" width=\"8\" height=\"8\" rx=\"2.6666666666666665\" fill=\"#ffd166\" transform=\"rotate(15 84 69)\">\n        </rect>\n        <rect x=\"92\" y=\"35\" width=\"5\" height=\"5\" rx=\"1.6666666666666667\" fill=\"#06d6a0\" transform=\"rotate(-45 94.5 37.5)\">\n        </rect>\n        <rect x=\"14\" y=\"50\" width=\"5\" height=\"5\" rx=\"1.6666666666666667\" fill=\"#fff\" transform=\"rotate(30 16.5 52.5)\">\n        </rect>\n        <rect x=\"74\" y=\"18\" width=\"6\" height=\"6\" rx=\"2\" fill=\"#b388ff\" transform=\"rotate(-20 77 21)\">\n        </rect>\n      </svg>\n      <div class=\"relative z-10 mx-auto max-w-2xl\">\n        <h2 class=\"text-3xl font-extrabold leading-tight tracking-tight text-white sm:text-5xl\">\n          さあ、はじめよう！\n        </h2>\n        <p class=\"mx-auto mt-4 max-w-md text-base text-white/90 sm:text-lg\">\n          クレジットカードは不要。30秒であなたのスタジオが立ち上がります。\n        </p>\n        <div class=\"mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row\">\n          <button class=\"group inline-flex items-center gap-2 rounded-full bg-white px-8 py-3.5 text-base font-extrabold text-slate-800 shadow-[0_8px_0_rgba(0,0,0,0.15)] transition-all duration-150 hover:-translate-y-0.5 active:translate-y-1\">\n            無料ではじめる\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right size-5 transition-transform group-hover:translate-x-1\">\n              <path d=\"M5 12h14\">\n              </path>\n              <path d=\"m12 5 7 7-7 7\">\n              </path>\n            </svg>\n          </button>\n          <button class=\"rounded-full border-2 border-white/70 px-8 py-3.5 text-base font-extrabold text-white transition-all hover:bg-white/15\">\n            資料をみる\n          </button>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"font-rounded relative w-full overflow-hidden rounded-3xl px-6 py-16 text-center sm:px-12\" style=\"background:linear-gradient(120deg,#ff8fab 0%,#b388ff 100%)\">\n      <svg viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" class=\"pointer-events-none absolute inset-0 h-full w-full opacity-80\" aria-hidden=\"true\">\n        <rect x=\"8\" y=\"20\" width=\"8\" height=\"8\" rx=\"2.6666666666666665\" fill=\"#ffd166\" transform=\"rotate(20 12 24)\">\n        </rect>\n        <rect x=\"20\" y=\"70\" width=\"6\" height=\"6\" rx=\"2\" fill=\"#06d6a0\" transform=\"rotate(-15 23 73)\">\n        </rect>\n        <rect x=\"34\" y=\"30\" width=\"5\" height=\"5\" rx=\"1.6666666666666667\" fill=\"#fff\" transform=\"rotate(40 36.5 32.5)\">\n        </rect>\n        <rect x=\"50\" y=\"80\" width=\"7\" height=\"7\" rx=\"2.3333333333333335\" fill=\"#b388ff\" transform=\"rotate(0 53.5 83.5)\">\n        </rect>\n        <rect x=\"66\" y=\"25\" width=\"6\" height=\"6\" rx=\"2\" fill=\"#fff\" transform=\"rotate(-30 69 28)\">\n        </rect>\n        <rect x=\"80\" y=\"65\" width=\"8\" height=\"8\" rx=\"2.6666666666666665\" fill=\"#ffd166\" transform=\"rotate(15 84 69)\">\n        </rect>\n        <rect x=\"92\" y=\"35\" width=\"5\" height=\"5\" rx=\"1.6666666666666667\" fill=\"#06d6a0\" transform=\"rotate(-45 94.5 37.5)\">\n        </rect>\n        <rect x=\"14\" y=\"50\" width=\"5\" height=\"5\" rx=\"1.6666666666666667\" fill=\"#fff\" transform=\"rotate(30 16.5 52.5)\">\n        </rect>\n        <rect x=\"74\" y=\"18\" width=\"6\" height=\"6\" rx=\"2\" fill=\"#b388ff\" transform=\"rotate(-20 77 21)\">\n        </rect>\n      </svg>\n      <div class=\"relative z-10 mx-auto max-w-2xl\">\n        <h2 class=\"text-3xl font-extrabold leading-tight tracking-tight text-white sm:text-5xl\">\n          さあ、はじめよう！\n        </h2>\n        <p class=\"mx-auto mt-4 max-w-md text-base text-white/90 sm:text-lg\">\n          クレジットカードは不要。30秒であなたのスタジオが立ち上がります。\n        </p>\n        <div class=\"mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row\">\n          <button class=\"group inline-flex items-center gap-2 rounded-full bg-white px-8 py-3.5 text-base font-extrabold text-slate-800 shadow-[0_8px_0_rgba(0,0,0,0.15)] transition-all duration-150 hover:-translate-y-0.5 active:translate-y-1\">\n            無料ではじめる\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right size-5 transition-transform group-hover:translate-x-1\">\n              <path d=\"M5 12h14\">\n              </path>\n              <path d=\"m12 5 7 7-7 7\">\n              </path>\n            </svg>\n          </button>\n          <button class=\"rounded-full border-2 border-white/70 px-8 py-3.5 text-base font-extrabold text-white transition-all hover:bg-white/15\">\n            資料をみる\n          </button>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "retro-arcade-card",
@@ -1367,7 +1367,7 @@
       ],
       "standalone": true,
       "source": "import { Gamepad2, Star, Trophy } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"アーケード・カード\",\n  category: \"レトロ・Y2K\",\n  description: \"ゲーム筐体風のスコア表示とネオングローを持つアーケードカード。\",\n  align: \"center\",\n  isNew: true,\n  tags: [\"retro\", \"y2k\", \"neon\", \"arcade\"],\n};\n\nexport default function ArcadeCard() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <div className=\"bg-[#0d0221] p-5 sm:p-10\">\n      <div\n        className=\"relative w-full max-w-[340px] overflow-hidden rounded-2xl border-2 border-[#ff2e97] bg-gradient-to-b from-[#1a0b2e] to-[#0d0221] p-6\"\n        style={{ boxShadow: \"0 0 30px rgba(255,46,151,0.5), inset 0 0 30px rgba(124,58,237,0.2)\" }}\n      >\n        {/* scanline overlay */}\n        <div\n          aria-hidden\n          className=\"pointer-events-none absolute inset-0 opacity-20\"\n          style={{\n            backgroundImage:\n              \"repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.6) 2px 4px)\",\n          }}\n        />\n\n        <div className=\"relative flex items-center justify-between\">\n          <span className=\"inline-flex items-center gap-1.5 rounded bg-[#05d9e8]/15 px-2 py-1 font-mono text-[10px] font-bold uppercase tracking-widest text-[#05d9e8]\">\n            <Gamepad2 className=\"size-3\" />\n            Stage 4\n          </span>\n          <div className=\"flex gap-0.5\">\n            {[0, 1, 2].map((i) => (\n              <Star\n                key={i}\n                className=\"size-4 fill-[#fde047] text-[#fde047]\"\n                style={{ filter: \"drop-shadow(0 0 4px rgba(253,224,71,0.9))\" }}\n              />\n            ))}\n          </div>\n        </div>\n\n        <div\n          className=\"relative mx-auto my-6 grid size-24 place-items-center rounded-xl border border-[#05d9e8]/40 bg-[#0d0221]\"\n          style={{ boxShadow: \"inset 0 0 20px rgba(5,217,232,0.3)\" }}\n        >\n          <Trophy\n            className=\"size-12 text-[#fde047]\"\n            style={{ filter: \"drop-shadow(0 0 10px rgba(253,224,71,0.8))\" }}\n          />\n        </div>\n\n        <h3\n          className=\"relative text-center font-mono text-xl font-black uppercase tracking-wide text-white\"\n          style={{ textShadow: \"0 0 10px rgba(5,217,232,0.8)\" }}\n        >\n          {en ? \"High Score!\" : \"ハイスコア達成\"}\n        </h3>\n\n        <div className=\"relative mt-4 rounded-lg border border-[#ff2e97]/40 bg-black/40 p-4 text-center font-mono\">\n          <p className=\"text-[10px] uppercase tracking-[0.3em] text-[#d8b4fe]\">Score</p>\n          <p\n            className=\"text-3xl font-black text-[#ff2e97]\"\n            style={{ textShadow: \"0 0 14px rgba(255,46,151,0.9)\" }}\n          >\n            999,950\n          </p>\n        </div>\n\n        <button className=\"relative mt-5 w-full rounded-md bg-[#ff2e97] py-2.5 font-mono text-sm font-bold uppercase tracking-widest text-white shadow-[0_0_20px_rgba(255,46,151,0.6)] transition-all hover:shadow-[0_0_32px_rgba(255,46,151,0.9)]\">\n          Press Start\n        </button>\n      </div>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"bg-[#0d0221] p-5 sm:p-10\">\n      <div class=\"relative w-full max-w-[340px] overflow-hidden rounded-2xl border-2 border-[#ff2e97] bg-gradient-to-b from-[#1a0b2e] to-[#0d0221] p-6\" style=\"box-shadow:0 0 30px rgba(255,46,151,0.5), inset 0 0 30px rgba(124,58,237,0.2)\">\n        <div aria-hidden=\"true\" class=\"pointer-events-none absolute inset-0 opacity-20\" style=\"background-image:repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.6) 2px 4px)\">\n        </div>\n        <div class=\"relative flex items-center justify-between\">\n          <span class=\"inline-flex items-center gap-1.5 rounded bg-[#05d9e8]/15 px-2 py-1 font-mono text-[10px] font-bold uppercase tracking-widest text-[#05d9e8]\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-gamepad2 size-3\">\n              <line x1=\"6\" x2=\"10\" y1=\"11\" y2=\"11\">\n              </line>\n              <line x1=\"8\" x2=\"8\" y1=\"9\" y2=\"13\">\n              </line>\n              <line x1=\"15\" x2=\"15.01\" y1=\"12\" y2=\"12\">\n              </line>\n              <line x1=\"18\" x2=\"18.01\" y1=\"10\" y2=\"10\">\n              </line>\n              <path d=\"M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z\">\n              </path>\n            </svg>\n            Stage 4\n          </span>\n          <div class=\"flex gap-0.5\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-4 fill-[#fde047] text-[#fde047]\" style=\"filter:drop-shadow(0 0 4px rgba(253,224,71,0.9))\">\n              <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n              </path>\n            </svg>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-4 fill-[#fde047] text-[#fde047]\" style=\"filter:drop-shadow(0 0 4px rgba(253,224,71,0.9))\">\n              <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n              </path>\n            </svg>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-4 fill-[#fde047] text-[#fde047]\" style=\"filter:drop-shadow(0 0 4px rgba(253,224,71,0.9))\">\n              <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n              </path>\n            </svg>\n          </div>\n        </div>\n        <div class=\"relative mx-auto my-6 grid size-24 place-items-center rounded-xl border border-[#05d9e8]/40 bg-[#0d0221]\" style=\"box-shadow:inset 0 0 20px rgba(5,217,232,0.3)\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trophy size-12 text-[#fde047]\" style=\"filter:drop-shadow(0 0 10px rgba(253,224,71,0.8))\">\n            <path d=\"M6 9H4.5a2.5 2.5 0 0 1 0-5H6\">\n            </path>\n            <path d=\"M18 9h1.5a2.5 2.5 0 0 0 0-5H18\">\n            </path>\n            <path d=\"M4 22h16\">\n            </path>\n            <path d=\"M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22\">\n            </path>\n            <path d=\"M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22\">\n            </path>\n            <path d=\"M18 2H6v7a6 6 0 0 0 12 0V2Z\">\n            </path>\n          </svg>\n        </div>\n        <h3 class=\"relative text-center font-mono text-xl font-black uppercase tracking-wide text-white\" style=\"text-shadow:0 0 10px rgba(5,217,232,0.8)\">\n          ハイスコア達成\n        </h3>\n        <div class=\"relative mt-4 rounded-lg border border-[#ff2e97]/40 bg-black/40 p-4 text-center font-mono\">\n          <p class=\"text-[10px] uppercase tracking-[0.3em] text-[#d8b4fe]\">\n            Score\n          </p>\n          <p class=\"text-3xl font-black text-[#ff2e97]\" style=\"text-shadow:0 0 14px rgba(255,46,151,0.9)\">\n            999,950\n          </p>\n        </div>\n        <button class=\"relative mt-5 w-full rounded-md bg-[#ff2e97] py-2.5 font-mono text-sm font-bold uppercase tracking-widest text-white shadow-[0_0_20px_rgba(255,46,151,0.6)] transition-all hover:shadow-[0_0_32px_rgba(255,46,151,0.9)]\">\n          Press Start\n        </button>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"bg-[#0d0221] p-5 sm:p-10\">\n      <div class=\"relative w-full max-w-[340px] overflow-hidden rounded-2xl border-2 border-[#ff2e97] bg-gradient-to-b from-[#1a0b2e] to-[#0d0221] p-6\" style=\"box-shadow:0 0 30px rgba(255,46,151,0.5), inset 0 0 30px rgba(124,58,237,0.2)\">\n        <div aria-hidden=\"true\" class=\"pointer-events-none absolute inset-0 opacity-20\" style=\"background-image:repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.6) 2px 4px)\">\n        </div>\n        <div class=\"relative flex items-center justify-between\">\n          <span class=\"inline-flex items-center gap-1.5 rounded bg-[#05d9e8]/15 px-2 py-1 font-mono text-[10px] font-bold uppercase tracking-widest text-[#05d9e8]\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-gamepad2 size-3\">\n              <line x1=\"6\" x2=\"10\" y1=\"11\" y2=\"11\">\n              </line>\n              <line x1=\"8\" x2=\"8\" y1=\"9\" y2=\"13\">\n              </line>\n              <line x1=\"15\" x2=\"15.01\" y1=\"12\" y2=\"12\">\n              </line>\n              <line x1=\"18\" x2=\"18.01\" y1=\"10\" y2=\"10\">\n              </line>\n              <path d=\"M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z\">\n              </path>\n            </svg>\n            Stage 4\n          </span>\n          <div class=\"flex gap-0.5\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-4 fill-[#fde047] text-[#fde047]\" style=\"filter:drop-shadow(0 0 4px rgba(253,224,71,0.9))\">\n              <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n              </path>\n            </svg>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-4 fill-[#fde047] text-[#fde047]\" style=\"filter:drop-shadow(0 0 4px rgba(253,224,71,0.9))\">\n              <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n              </path>\n            </svg>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-star size-4 fill-[#fde047] text-[#fde047]\" style=\"filter:drop-shadow(0 0 4px rgba(253,224,71,0.9))\">\n              <path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\">\n              </path>\n            </svg>\n          </div>\n        </div>\n        <div class=\"relative mx-auto my-6 grid size-24 place-items-center rounded-xl border border-[#05d9e8]/40 bg-[#0d0221]\" style=\"box-shadow:inset 0 0 20px rgba(5,217,232,0.3)\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trophy size-12 text-[#fde047]\" style=\"filter:drop-shadow(0 0 10px rgba(253,224,71,0.8))\">\n            <path d=\"M6 9H4.5a2.5 2.5 0 0 1 0-5H6\">\n            </path>\n            <path d=\"M18 9h1.5a2.5 2.5 0 0 0 0-5H18\">\n            </path>\n            <path d=\"M4 22h16\">\n            </path>\n            <path d=\"M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22\">\n            </path>\n            <path d=\"M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22\">\n            </path>\n            <path d=\"M18 2H6v7a6 6 0 0 0 12 0V2Z\">\n            </path>\n          </svg>\n        </div>\n        <h3 class=\"relative text-center font-mono text-xl font-black uppercase tracking-wide text-white\" style=\"text-shadow:0 0 10px rgba(5,217,232,0.8)\">\n          ハイスコア達成\n        </h3>\n        <div class=\"relative mt-4 rounded-lg border border-[#ff2e97]/40 bg-black/40 p-4 text-center font-mono\">\n          <p class=\"text-[10px] uppercase tracking-[0.3em] text-[#d8b4fe]\">\n            Score\n          </p>\n          <p class=\"text-3xl font-black text-[#ff2e97]\" style=\"text-shadow:0 0 14px rgba(255,46,151,0.9)\">\n            999,950\n          </p>\n        </div>\n        <button class=\"relative mt-5 w-full rounded-md bg-[#ff2e97] py-2.5 font-mono text-sm font-bold uppercase tracking-widest text-white shadow-[0_0_20px_rgba(255,46,151,0.6)] transition-all hover:shadow-[0_0_32px_rgba(255,46,151,0.9)]\">\n          Press Start\n        </button>\n      </div>\n    </div>\n  </body>\n</html>"
     },
     {
       "id": "retro-neon-cta",
@@ -1382,7 +1382,7 @@
       ],
       "standalone": true,
       "source": "import { ArrowRight, Rocket } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"ネオンCTA\",\n  category: \"レトロ・Y2K\",\n  description: \"グリッド背景と発光する縁取りで誘導する、ネオンのCTAバンド。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"retro\", \"y2k\", \"neon\", \"cta\"],\n};\n\nexport default function NeonCTA() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"w-full bg-[#0d0221] px-6 py-16\">\n      <div\n        className=\"relative mx-auto max-w-4xl overflow-hidden rounded-3xl border-2 border-[#05d9e8] px-8 py-14 text-center\"\n        style={{\n          background: \"linear-gradient(135deg, #1a0b2e 0%, #2a0b4e 100%)\",\n          boxShadow: \"0 0 40px rgba(5,217,232,0.4), inset 0 0 60px rgba(255,46,151,0.15)\",\n        }}\n      >\n        {/* grid */}\n        <div\n          aria-hidden\n          className=\"pointer-events-none absolute inset-0 opacity-25\"\n          style={{\n            backgroundImage:\n              \"linear-gradient(rgba(5,217,232,0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(5,217,232,0.4) 1px, transparent 1px)\",\n            backgroundSize: \"36px 36px\",\n            maskImage: \"radial-gradient(ellipse at center, black, transparent 75%)\",\n            WebkitMaskImage: \"radial-gradient(ellipse at center, black, transparent 75%)\",\n          }}\n        />\n        {/* corner glow */}\n        <div\n          aria-hidden\n          className=\"pointer-events-none absolute -left-20 -top-20 size-60 rounded-full bg-[radial-gradient(circle,rgba(255,46,151,0.5),transparent_60%)] blur-2xl\"\n        />\n\n        <div className=\"relative\">\n          <span className=\"inline-flex items-center gap-2 rounded-full border border-[#ff2e97]/60 bg-[#ff2e97]/10 px-4 py-1 font-mono text-xs uppercase tracking-[0.3em] text-[#ff2e97] shadow-[0_0_16px_rgba(255,46,151,0.5)]\">\n            <Rocket className=\"size-3.5\" />\n            launch ready\n          </span>\n\n          <h2\n            className=\"mt-6 text-balance text-4xl font-black uppercase italic text-white sm:text-5xl\"\n            style={{ textShadow: \"0 0 18px rgba(5,217,232,0.8), 3px 3px 0 #ff2e97\" }}\n          >\n            {en ? \"Level up your game\" : \"次のレベルへ、いこう\"}\n          </h2>\n          <p className=\"mx-auto mt-4 max-w-md text-pretty text-[#d8b4fe]\">\n            {en\n              ? \"Neon-charged components to take your product to the next stage.\"\n              : \"ネオンに輝くコンポーネントで、あなたのプロダクトを一段上の体験に。\"}\n          </p>\n\n          <div className=\"mt-9 flex flex-col items-center justify-center gap-4 sm:flex-row\">\n            <button className=\"group inline-flex items-center gap-2 rounded-md bg-[#05d9e8] px-7 py-3 font-mono text-sm font-bold uppercase tracking-wider text-[#0d0221] shadow-[0_0_25px_rgba(5,217,232,0.7)] transition-all hover:shadow-[0_0_40px_rgba(5,217,232,0.95)]\">\n              {en ? \"Start free\" : \"無料で始める\"}\n              <ArrowRight className=\"size-4 transition-transform group-hover:translate-x-1\" />\n            </button>\n            <button className=\"inline-flex items-center rounded-md border border-[#ff2e97] px-7 py-3 font-mono text-sm font-bold uppercase tracking-wider text-[#ff2e97] shadow-[0_0_15px_rgba(255,46,151,0.4)] transition-all hover:bg-[#ff2e97]/10\">\n              {en ? \"See pricing\" : \"料金を見る\"}\n            </button>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"w-full bg-[#0d0221] px-6 py-16\">\n      <div class=\"relative mx-auto max-w-4xl overflow-hidden rounded-3xl border-2 border-[#05d9e8] px-8 py-14 text-center\" style=\"background:linear-gradient(135deg, #1a0b2e 0%, #2a0b4e 100%);box-shadow:0 0 40px rgba(5,217,232,0.4), inset 0 0 60px rgba(255,46,151,0.15)\">\n        <div aria-hidden=\"true\" class=\"pointer-events-none absolute inset-0 opacity-25\" style=\"background-image:linear-gradient(rgba(5,217,232,0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(5,217,232,0.4) 1px, transparent 1px);background-size:36px 36px;mask-image:radial-gradient(ellipse at center, black, transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center, black, transparent 75%)\">\n        </div>\n        <div aria-hidden=\"true\" class=\"pointer-events-none absolute -left-20 -top-20 size-60 rounded-full bg-[radial-gradient(circle,rgba(255,46,151,0.5),transparent_60%)] blur-2xl\">\n        </div>\n        <div class=\"relative\">\n          <span class=\"inline-flex items-center gap-2 rounded-full border border-[#ff2e97]/60 bg-[#ff2e97]/10 px-4 py-1 font-mono text-xs uppercase tracking-[0.3em] text-[#ff2e97] shadow-[0_0_16px_rgba(255,46,151,0.5)]\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-rocket size-3.5\">\n              <path d=\"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z\">\n              </path>\n              <path d=\"m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z\">\n              </path>\n              <path d=\"M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0\">\n              </path>\n              <path d=\"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5\">\n              </path>\n            </svg>\n            launch ready\n          </span>\n          <h2 class=\"mt-6 text-balance text-4xl font-black uppercase italic text-white sm:text-5xl\" style=\"text-shadow:0 0 18px rgba(5,217,232,0.8), 3px 3px 0 #ff2e97\">\n            次のレベルへ、いこう\n          </h2>\n          <p class=\"mx-auto mt-4 max-w-md text-pretty text-[#d8b4fe]\">\n            ネオンに輝くコンポーネントで、あなたのプロダクトを一段上の体験に。\n          </p>\n          <div class=\"mt-9 flex flex-col items-center justify-center gap-4 sm:flex-row\">\n            <button class=\"group inline-flex items-center gap-2 rounded-md bg-[#05d9e8] px-7 py-3 font-mono text-sm font-bold uppercase tracking-wider text-[#0d0221] shadow-[0_0_25px_rgba(5,217,232,0.7)] transition-all hover:shadow-[0_0_40px_rgba(5,217,232,0.95)]\">\n              無料で始める\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right size-4 transition-transform group-hover:translate-x-1\">\n                <path d=\"M5 12h14\">\n                </path>\n                <path d=\"m12 5 7 7-7 7\">\n                </path>\n              </svg>\n            </button>\n            <button class=\"inline-flex items-center rounded-md border border-[#ff2e97] px-7 py-3 font-mono text-sm font-bold uppercase tracking-wider text-[#ff2e97] shadow-[0_0_15px_rgba(255,46,151,0.4)] transition-all hover:bg-[#ff2e97]/10\">\n              料金を見る\n            </button>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"w-full bg-[#0d0221] px-6 py-16\">\n      <div class=\"relative mx-auto max-w-4xl overflow-hidden rounded-3xl border-2 border-[#05d9e8] px-8 py-14 text-center\" style=\"background:linear-gradient(135deg, #1a0b2e 0%, #2a0b4e 100%);box-shadow:0 0 40px rgba(5,217,232,0.4), inset 0 0 60px rgba(255,46,151,0.15)\">\n        <div aria-hidden=\"true\" class=\"pointer-events-none absolute inset-0 opacity-25\" style=\"background-image:linear-gradient(rgba(5,217,232,0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(5,217,232,0.4) 1px, transparent 1px);background-size:36px 36px;mask-image:radial-gradient(ellipse at center, black, transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center, black, transparent 75%)\">\n        </div>\n        <div aria-hidden=\"true\" class=\"pointer-events-none absolute -left-20 -top-20 size-60 rounded-full bg-[radial-gradient(circle,rgba(255,46,151,0.5),transparent_60%)] blur-2xl\">\n        </div>\n        <div class=\"relative\">\n          <span class=\"inline-flex items-center gap-2 rounded-full border border-[#ff2e97]/60 bg-[#ff2e97]/10 px-4 py-1 font-mono text-xs uppercase tracking-[0.3em] text-[#ff2e97] shadow-[0_0_16px_rgba(255,46,151,0.5)]\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-rocket size-3.5\">\n              <path d=\"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z\">\n              </path>\n              <path d=\"m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z\">\n              </path>\n              <path d=\"M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0\">\n              </path>\n              <path d=\"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5\">\n              </path>\n            </svg>\n            launch ready\n          </span>\n          <h2 class=\"mt-6 text-balance text-4xl font-black uppercase italic text-white sm:text-5xl\" style=\"text-shadow:0 0 18px rgba(5,217,232,0.8), 3px 3px 0 #ff2e97\">\n            次のレベルへ、いこう\n          </h2>\n          <p class=\"mx-auto mt-4 max-w-md text-pretty text-[#d8b4fe]\">\n            ネオンに輝くコンポーネントで、あなたのプロダクトを一段上の体験に。\n          </p>\n          <div class=\"mt-9 flex flex-col items-center justify-center gap-4 sm:flex-row\">\n            <button class=\"group inline-flex items-center gap-2 rounded-md bg-[#05d9e8] px-7 py-3 font-mono text-sm font-bold uppercase tracking-wider text-[#0d0221] shadow-[0_0_25px_rgba(5,217,232,0.7)] transition-all hover:shadow-[0_0_40px_rgba(5,217,232,0.95)]\">\n              無料で始める\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right size-4 transition-transform group-hover:translate-x-1\">\n                <path d=\"M5 12h14\">\n                </path>\n                <path d=\"m12 5 7 7-7 7\">\n                </path>\n              </svg>\n            </button>\n            <button class=\"inline-flex items-center rounded-md border border-[#ff2e97] px-7 py-3 font-mono text-sm font-bold uppercase tracking-wider text-[#ff2e97] shadow-[0_0_15px_rgba(255,46,151,0.4)] transition-all hover:bg-[#ff2e97]/10\">\n              料金を見る\n            </button>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "retro-neon-hero",
@@ -1397,7 +1397,7 @@
       ],
       "standalone": true,
       "source": "import { ArrowRight, Play, Sparkles } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"ネオン・ヒーロー\",\n  category: \"レトロ・Y2K\",\n  description:\n    \"夕焼けパースペクティブグリッドと発光する見出しを組み合わせたシンセウェイヴ・ヒーロー。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"retro\", \"y2k\", \"neon\", \"synthwave\"],\n};\n\nexport default function NeonHero() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"relative w-full overflow-hidden bg-[#0d0221] px-6 py-28 sm:py-36\">\n      {/* sun */}\n      <div\n        aria-hidden\n        className=\"pointer-events-none absolute left-1/2 top-16 -translate-x-1/2\"\n      >\n        <svg width=\"320\" height=\"320\" viewBox=\"0 0 320 320\" className=\"opacity-90\">\n          <defs>\n            <linearGradient id=\"nh-sun\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stopColor=\"#fde047\" />\n              <stop offset=\"45%\" stopColor=\"#ff2e97\" />\n              <stop offset=\"100%\" stopColor=\"#7c3aed\" />\n            </linearGradient>\n            <clipPath id=\"nh-clip\">\n              <circle cx=\"160\" cy=\"160\" r=\"150\" />\n            </clipPath>\n          </defs>\n          <circle cx=\"160\" cy=\"160\" r=\"150\" fill=\"url(#nh-sun)\" />\n          <g clipPath=\"url(#nh-clip)\" stroke=\"#0d0221\" strokeWidth=\"8\">\n            {[200, 224, 252, 284].map((y) => (\n              <line key={y} x1=\"0\" y1={y} x2=\"320\" y2={y} />\n            ))}\n          </g>\n        </svg>\n      </div>\n\n      {/* glow halo */}\n      <div\n        aria-hidden\n        className=\"pointer-events-none absolute left-1/2 top-0 size-[36rem] -translate-x-1/2 rounded-full bg-[radial-gradient(circle,rgba(255,46,151,0.35),transparent_60%)] blur-2xl\"\n      />\n\n      {/* perspective grid floor */}\n      <div\n        aria-hidden\n        className=\"pointer-events-none absolute inset-x-0 bottom-0 h-1/2 overflow-hidden\"\n        style={{ perspective: \"300px\" }}\n      >\n        <div\n          className=\"absolute inset-0 origin-bottom\"\n          style={{\n            transform: \"rotateX(72deg)\",\n            backgroundImage:\n              \"linear-gradient(rgba(5,217,232,0.6) 1px, transparent 1px), linear-gradient(90deg, rgba(5,217,232,0.6) 1px, transparent 1px)\",\n            backgroundSize: \"44px 44px\",\n            maskImage: \"linear-gradient(to top, black 10%, transparent 80%)\",\n            WebkitMaskImage: \"linear-gradient(to top, black 10%, transparent 80%)\",\n          }}\n        />\n      </div>\n\n      <div className=\"relative mx-auto max-w-3xl text-center\">\n        <span className=\"inline-flex items-center gap-2 rounded-full border border-[#05d9e8]/50 bg-[#05d9e8]/10 px-4 py-1 font-mono text-xs uppercase tracking-[0.3em] text-[#05d9e8] shadow-[0_0_20px_rgba(5,217,232,0.4)]\">\n          <Sparkles className=\"size-3.5\" />\n          insert coin\n        </span>\n\n        <h1\n          className=\"mt-8 text-balance text-5xl font-black uppercase italic tracking-tight text-white sm:text-7xl\"\n          style={{\n            textShadow:\n              \"0 0 12px rgba(255,46,151,0.9), 0 0 36px rgba(255,46,151,0.6), 4px 4px 0 #05d9e8\",\n          }}\n        >\n          {en ? (\n            <>\n              The future\n              <br />\n              glows in neon\n            </>\n          ) : (\n            <>\n              未来は、\n              <br />\n              ネオンに輝く\n            </>\n          )}\n        </h1>\n\n        <p className=\"mx-auto mt-6 max-w-lg text-pretty text-lg text-[#d8b4fe]\">\n          {en\n            ? \"An '80s dream burned into pixels — a new digital experience where every edge lights up.\"\n            : \"80年代の夢をピクセルに焼き付けた、新しいデジタル体験。境界線は、すべて発光する。\"}\n        </p>\n\n        <div className=\"mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row\">\n          <button className=\"group inline-flex items-center gap-2 rounded-md bg-[#ff2e97] px-7 py-3 font-mono text-sm font-bold uppercase tracking-wider text-white shadow-[0_0_25px_rgba(255,46,151,0.7)] transition-all hover:shadow-[0_0_40px_rgba(255,46,151,0.95)]\">\n            {en ? \"Start\" : \"スタート\"}\n            <ArrowRight className=\"size-4 transition-transform group-hover:translate-x-1\" />\n          </button>\n          <button className=\"inline-flex items-center gap-2 rounded-md border border-[#05d9e8] bg-transparent px-7 py-3 font-mono text-sm font-bold uppercase tracking-wider text-[#05d9e8] shadow-[0_0_15px_rgba(5,217,232,0.4)] transition-all hover:bg-[#05d9e8]/10\">\n            <Play className=\"size-4\" />\n            {en ? \"Watch demo\" : \"デモを見る\"}\n          </button>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"relative w-full overflow-hidden bg-[#0d0221] px-6 py-28 sm:py-36\">\n      <div aria-hidden=\"true\" class=\"pointer-events-none absolute left-1/2 top-16 -translate-x-1/2\">\n        <svg width=\"320\" height=\"320\" viewBox=\"0 0 320 320\" class=\"opacity-90\">\n          <defs>\n            <linearGradient id=\"nh-sun\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stop-color=\"#fde047\">\n              </stop>\n              <stop offset=\"45%\" stop-color=\"#ff2e97\">\n              </stop>\n              <stop offset=\"100%\" stop-color=\"#7c3aed\">\n              </stop>\n            </linearGradient>\n            <clipPath id=\"nh-clip\">\n              <circle cx=\"160\" cy=\"160\" r=\"150\">\n              </circle>\n            </clipPath>\n          </defs>\n          <circle cx=\"160\" cy=\"160\" r=\"150\" fill=\"url(#nh-sun)\">\n          </circle>\n          <g clip-path=\"url(#nh-clip)\" stroke=\"#0d0221\" stroke-width=\"8\">\n            <line x1=\"0\" y1=\"200\" x2=\"320\" y2=\"200\">\n            </line>\n            <line x1=\"0\" y1=\"224\" x2=\"320\" y2=\"224\">\n            </line>\n            <line x1=\"0\" y1=\"252\" x2=\"320\" y2=\"252\">\n            </line>\n            <line x1=\"0\" y1=\"284\" x2=\"320\" y2=\"284\">\n            </line>\n          </g>\n        </svg>\n      </div>\n      <div aria-hidden=\"true\" class=\"pointer-events-none absolute left-1/2 top-0 size-[36rem] -translate-x-1/2 rounded-full bg-[radial-gradient(circle,rgba(255,46,151,0.35),transparent_60%)] blur-2xl\">\n      </div>\n      <div aria-hidden=\"true\" class=\"pointer-events-none absolute inset-x-0 bottom-0 h-1/2 overflow-hidden\" style=\"perspective:300px\">\n        <div class=\"absolute inset-0 origin-bottom\" style=\"transform:rotateX(72deg);background-image:linear-gradient(rgba(5,217,232,0.6) 1px, transparent 1px), linear-gradient(90deg, rgba(5,217,232,0.6) 1px, transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to top, black 10%, transparent 80%);-webkit-mask-image:linear-gradient(to top, black 10%, transparent 80%)\">\n        </div>\n      </div>\n      <div class=\"relative mx-auto max-w-3xl text-center\">\n        <span class=\"inline-flex items-center gap-2 rounded-full border border-[#05d9e8]/50 bg-[#05d9e8]/10 px-4 py-1 font-mono text-xs uppercase tracking-[0.3em] text-[#05d9e8] shadow-[0_0_20px_rgba(5,217,232,0.4)]\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5\">\n            <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n            </path>\n            <path d=\"M20 3v4\">\n            </path>\n            <path d=\"M22 5h-4\">\n            </path>\n            <path d=\"M4 17v2\">\n            </path>\n            <path d=\"M5 18H3\">\n            </path>\n          </svg>\n          insert coin\n        </span>\n        <h1 class=\"mt-8 text-balance text-5xl font-black uppercase italic tracking-tight text-white sm:text-7xl\" style=\"text-shadow:0 0 12px rgba(255,46,151,0.9), 0 0 36px rgba(255,46,151,0.6), 4px 4px 0 #05d9e8\">\n          未来は、\n          <br/>\n          ネオンに輝く\n        </h1>\n        <p class=\"mx-auto mt-6 max-w-lg text-pretty text-lg text-[#d8b4fe]\">\n          80年代の夢をピクセルに焼き付けた、新しいデジタル体験。境界線は、すべて発光する。\n        </p>\n        <div class=\"mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row\">\n          <button class=\"group inline-flex items-center gap-2 rounded-md bg-[#ff2e97] px-7 py-3 font-mono text-sm font-bold uppercase tracking-wider text-white shadow-[0_0_25px_rgba(255,46,151,0.7)] transition-all hover:shadow-[0_0_40px_rgba(255,46,151,0.95)]\">\n            スタート\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right size-4 transition-transform group-hover:translate-x-1\">\n              <path d=\"M5 12h14\">\n              </path>\n              <path d=\"m12 5 7 7-7 7\">\n              </path>\n            </svg>\n          </button>\n          <button class=\"inline-flex items-center gap-2 rounded-md border border-[#05d9e8] bg-transparent px-7 py-3 font-mono text-sm font-bold uppercase tracking-wider text-[#05d9e8] shadow-[0_0_15px_rgba(5,217,232,0.4)] transition-all hover:bg-[#05d9e8]/10\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-play size-4\">\n              <polygon points=\"6 3 20 12 6 21 6 3\">\n              </polygon>\n            </svg>\n            デモを見る\n          </button>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"relative w-full overflow-hidden bg-[#0d0221] px-6 py-28 sm:py-36\">\n      <div aria-hidden=\"true\" class=\"pointer-events-none absolute left-1/2 top-16 -translate-x-1/2\">\n        <svg width=\"320\" height=\"320\" viewBox=\"0 0 320 320\" class=\"opacity-90\">\n          <defs>\n            <linearGradient id=\"nh-sun\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stop-color=\"#fde047\">\n              </stop>\n              <stop offset=\"45%\" stop-color=\"#ff2e97\">\n              </stop>\n              <stop offset=\"100%\" stop-color=\"#7c3aed\">\n              </stop>\n            </linearGradient>\n            <clipPath id=\"nh-clip\">\n              <circle cx=\"160\" cy=\"160\" r=\"150\">\n              </circle>\n            </clipPath>\n          </defs>\n          <circle cx=\"160\" cy=\"160\" r=\"150\" fill=\"url(#nh-sun)\">\n          </circle>\n          <g clip-path=\"url(#nh-clip)\" stroke=\"#0d0221\" stroke-width=\"8\">\n            <line x1=\"0\" y1=\"200\" x2=\"320\" y2=\"200\">\n            </line>\n            <line x1=\"0\" y1=\"224\" x2=\"320\" y2=\"224\">\n            </line>\n            <line x1=\"0\" y1=\"252\" x2=\"320\" y2=\"252\">\n            </line>\n            <line x1=\"0\" y1=\"284\" x2=\"320\" y2=\"284\">\n            </line>\n          </g>\n        </svg>\n      </div>\n      <div aria-hidden=\"true\" class=\"pointer-events-none absolute left-1/2 top-0 size-[36rem] -translate-x-1/2 rounded-full bg-[radial-gradient(circle,rgba(255,46,151,0.35),transparent_60%)] blur-2xl\">\n      </div>\n      <div aria-hidden=\"true\" class=\"pointer-events-none absolute inset-x-0 bottom-0 h-1/2 overflow-hidden\" style=\"perspective:300px\">\n        <div class=\"absolute inset-0 origin-bottom\" style=\"transform:rotateX(72deg);background-image:linear-gradient(rgba(5,217,232,0.6) 1px, transparent 1px), linear-gradient(90deg, rgba(5,217,232,0.6) 1px, transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to top, black 10%, transparent 80%);-webkit-mask-image:linear-gradient(to top, black 10%, transparent 80%)\">\n        </div>\n      </div>\n      <div class=\"relative mx-auto max-w-3xl text-center\">\n        <span class=\"inline-flex items-center gap-2 rounded-full border border-[#05d9e8]/50 bg-[#05d9e8]/10 px-4 py-1 font-mono text-xs uppercase tracking-[0.3em] text-[#05d9e8] shadow-[0_0_20px_rgba(5,217,232,0.4)]\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles size-3.5\">\n            <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\">\n            </path>\n            <path d=\"M20 3v4\">\n            </path>\n            <path d=\"M22 5h-4\">\n            </path>\n            <path d=\"M4 17v2\">\n            </path>\n            <path d=\"M5 18H3\">\n            </path>\n          </svg>\n          insert coin\n        </span>\n        <h1 class=\"mt-8 text-balance text-5xl font-black uppercase italic tracking-tight text-white sm:text-7xl\" style=\"text-shadow:0 0 12px rgba(255,46,151,0.9), 0 0 36px rgba(255,46,151,0.6), 4px 4px 0 #05d9e8\">\n          未来は、\n          <br/>\n          ネオンに輝く\n        </h1>\n        <p class=\"mx-auto mt-6 max-w-lg text-pretty text-lg text-[#d8b4fe]\">\n          80年代の夢をピクセルに焼き付けた、新しいデジタル体験。境界線は、すべて発光する。\n        </p>\n        <div class=\"mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row\">\n          <button class=\"group inline-flex items-center gap-2 rounded-md bg-[#ff2e97] px-7 py-3 font-mono text-sm font-bold uppercase tracking-wider text-white shadow-[0_0_25px_rgba(255,46,151,0.7)] transition-all hover:shadow-[0_0_40px_rgba(255,46,151,0.95)]\">\n            スタート\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right size-4 transition-transform group-hover:translate-x-1\">\n              <path d=\"M5 12h14\">\n              </path>\n              <path d=\"m12 5 7 7-7 7\">\n              </path>\n            </svg>\n          </button>\n          <button class=\"inline-flex items-center gap-2 rounded-md border border-[#05d9e8] bg-transparent px-7 py-3 font-mono text-sm font-bold uppercase tracking-wider text-[#05d9e8] shadow-[0_0_15px_rgba(5,217,232,0.4)] transition-all hover:bg-[#05d9e8]/10\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-play size-4\">\n              <polygon points=\"6 3 20 12 6 21 6 3\">\n              </polygon>\n            </svg>\n            デモを見る\n          </button>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "retro-neon-stats",
@@ -1412,7 +1412,7 @@
       ],
       "standalone": true,
       "source": "import { Cpu, Users, Zap, Trophy } from \"lucide-react\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"ネオン・スタッツ\",\n  category: \"レトロ・Y2K\",\n  description: \"発光する数値とアイコンを並べた、レトロフューチャーな実績スタッツ。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"retro\", \"y2k\", \"neon\", \"stats\"],\n};\n\nconst stats = [\n  { icon: Users, value: \"120K+\", label: \"プレイヤー\", labelEn: \"Players\", color: \"#ff2e97\" },\n  { icon: Zap, value: \"9.9M\", label: \"総スコア\", labelEn: \"Total score\", color: \"#05d9e8\" },\n  { icon: Trophy, value: \"4,200\", label: \"達成バッジ\", labelEn: \"Badges earned\", color: \"#bef264\" },\n  { icon: Cpu, value: \"99.9%\", label: \"稼働率\", labelEn: \"Uptime\", color: \"#c084fc\" },\n];\n\nexport default function NeonStats() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <section className=\"relative w-full overflow-hidden bg-[#0d0221] px-6 py-16\">\n      <div\n        aria-hidden\n        className=\"pointer-events-none absolute inset-0 opacity-20\"\n        style={{\n          backgroundImage:\n            \"linear-gradient(rgba(124,58,237,0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(124,58,237,0.4) 1px, transparent 1px)\",\n          backgroundSize: \"50px 50px\",\n        }}\n      />\n      <div className=\"relative mx-auto grid max-w-5xl gap-5 sm:grid-cols-2 lg:grid-cols-4\">\n        {stats.map(({ icon: Icon, value, label, labelEn, color }) => (\n          <div\n            key={labelEn}\n            className=\"rounded-xl border bg-[#1a0b2e]/70 p-6 text-center backdrop-blur transition-transform hover:-translate-y-1\"\n            style={{\n              borderColor: `${color}66`,\n              boxShadow: `0 0 22px ${color}40`,\n            }}\n          >\n            <div\n              className=\"mx-auto grid size-12 place-items-center rounded-full\"\n              style={{\n                background: `${color}1a`,\n                boxShadow: `inset 0 0 16px ${color}55`,\n              }}\n            >\n              <Icon className=\"size-6\" style={{ color, filter: `drop-shadow(0 0 6px ${color})` }} />\n            </div>\n            <p\n              className=\"mt-4 font-mono text-3xl font-black tracking-tight text-white\"\n              style={{ textShadow: `0 0 16px ${color}` }}\n            >\n              {value}\n            </p>\n            <p className=\"mt-1 font-mono text-xs uppercase tracking-[0.2em] text-[#d8b4fe]\">\n              {en ? labelEn : label}\n            </p>\n          </div>\n        ))}\n      </div>\n    </section>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <section class=\"relative w-full overflow-hidden bg-[#0d0221] px-6 py-16\">\n      <div aria-hidden=\"true\" class=\"pointer-events-none absolute inset-0 opacity-20\" style=\"background-image:linear-gradient(rgba(124,58,237,0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(124,58,237,0.4) 1px, transparent 1px);background-size:50px 50px\">\n      </div>\n      <div class=\"relative mx-auto grid max-w-5xl gap-5 sm:grid-cols-2 lg:grid-cols-4\">\n        <div class=\"rounded-xl border bg-[#1a0b2e]/70 p-6 text-center backdrop-blur transition-transform hover:-translate-y-1\" style=\"border-color:#ff2e9766;box-shadow:0 0 22px #ff2e9740\">\n          <div class=\"mx-auto grid size-12 place-items-center rounded-full\" style=\"background:#ff2e971a;box-shadow:inset 0 0 16px #ff2e9755\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-users size-6\" style=\"color:#ff2e97;filter:drop-shadow(0 0 6px #ff2e97)\">\n              <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\">\n              </path>\n              <circle cx=\"9\" cy=\"7\" r=\"4\">\n              </circle>\n              <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\">\n              </path>\n              <path d=\"M16 3.13a4 4 0 0 1 0 7.75\">\n              </path>\n            </svg>\n          </div>\n          <p class=\"mt-4 font-mono text-3xl font-black tracking-tight text-white\" style=\"text-shadow:0 0 16px #ff2e97\">\n            120K+\n          </p>\n          <p class=\"mt-1 font-mono text-xs uppercase tracking-[0.2em] text-[#d8b4fe]\">\n            プレイヤー\n          </p>\n        </div>\n        <div class=\"rounded-xl border bg-[#1a0b2e]/70 p-6 text-center backdrop-blur transition-transform hover:-translate-y-1\" style=\"border-color:#05d9e866;box-shadow:0 0 22px #05d9e840\">\n          <div class=\"mx-auto grid size-12 place-items-center rounded-full\" style=\"background:#05d9e81a;box-shadow:inset 0 0 16px #05d9e855\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-zap size-6\" style=\"color:#05d9e8;filter:drop-shadow(0 0 6px #05d9e8)\">\n              <path d=\"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z\">\n              </path>\n            </svg>\n          </div>\n          <p class=\"mt-4 font-mono text-3xl font-black tracking-tight text-white\" style=\"text-shadow:0 0 16px #05d9e8\">\n            9.9M\n          </p>\n          <p class=\"mt-1 font-mono text-xs uppercase tracking-[0.2em] text-[#d8b4fe]\">\n            総スコア\n          </p>\n        </div>\n        <div class=\"rounded-xl border bg-[#1a0b2e]/70 p-6 text-center backdrop-blur transition-transform hover:-translate-y-1\" style=\"border-color:#bef26466;box-shadow:0 0 22px #bef26440\">\n          <div class=\"mx-auto grid size-12 place-items-center rounded-full\" style=\"background:#bef2641a;box-shadow:inset 0 0 16px #bef26455\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trophy size-6\" style=\"color:#bef264;filter:drop-shadow(0 0 6px #bef264)\">\n              <path d=\"M6 9H4.5a2.5 2.5 0 0 1 0-5H6\">\n              </path>\n              <path d=\"M18 9h1.5a2.5 2.5 0 0 0 0-5H18\">\n              </path>\n              <path d=\"M4 22h16\">\n              </path>\n              <path d=\"M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22\">\n              </path>\n              <path d=\"M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22\">\n              </path>\n              <path d=\"M18 2H6v7a6 6 0 0 0 12 0V2Z\">\n              </path>\n            </svg>\n          </div>\n          <p class=\"mt-4 font-mono text-3xl font-black tracking-tight text-white\" style=\"text-shadow:0 0 16px #bef264\">\n            4,200\n          </p>\n          <p class=\"mt-1 font-mono text-xs uppercase tracking-[0.2em] text-[#d8b4fe]\">\n            達成バッジ\n          </p>\n        </div>\n        <div class=\"rounded-xl border bg-[#1a0b2e]/70 p-6 text-center backdrop-blur transition-transform hover:-translate-y-1\" style=\"border-color:#c084fc66;box-shadow:0 0 22px #c084fc40\">\n          <div class=\"mx-auto grid size-12 place-items-center rounded-full\" style=\"background:#c084fc1a;box-shadow:inset 0 0 16px #c084fc55\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-cpu size-6\" style=\"color:#c084fc;filter:drop-shadow(0 0 6px #c084fc)\">\n              <rect width=\"16\" height=\"16\" x=\"4\" y=\"4\" rx=\"2\">\n              </rect>\n              <rect width=\"6\" height=\"6\" x=\"9\" y=\"9\" rx=\"1\">\n              </rect>\n              <path d=\"M15 2v2\">\n              </path>\n              <path d=\"M15 20v2\">\n              </path>\n              <path d=\"M2 15h2\">\n              </path>\n              <path d=\"M2 9h2\">\n              </path>\n              <path d=\"M20 15h2\">\n              </path>\n              <path d=\"M20 9h2\">\n              </path>\n              <path d=\"M9 2v2\">\n              </path>\n              <path d=\"M9 20v2\">\n              </path>\n            </svg>\n          </div>\n          <p class=\"mt-4 font-mono text-3xl font-black tracking-tight text-white\" style=\"text-shadow:0 0 16px #c084fc\">\n            99.9%\n          </p>\n          <p class=\"mt-1 font-mono text-xs uppercase tracking-[0.2em] text-[#d8b4fe]\">\n            稼働率\n          </p>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <section class=\"relative w-full overflow-hidden bg-[#0d0221] px-6 py-16\">\n      <div aria-hidden=\"true\" class=\"pointer-events-none absolute inset-0 opacity-20\" style=\"background-image:linear-gradient(rgba(124,58,237,0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(124,58,237,0.4) 1px, transparent 1px);background-size:50px 50px\">\n      </div>\n      <div class=\"relative mx-auto grid max-w-5xl gap-5 sm:grid-cols-2 lg:grid-cols-4\">\n        <div class=\"rounded-xl border bg-[#1a0b2e]/70 p-6 text-center backdrop-blur transition-transform hover:-translate-y-1\" style=\"border-color:#ff2e9766;box-shadow:0 0 22px #ff2e9740\">\n          <div class=\"mx-auto grid size-12 place-items-center rounded-full\" style=\"background:#ff2e971a;box-shadow:inset 0 0 16px #ff2e9755\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-users size-6\" style=\"color:#ff2e97;filter:drop-shadow(0 0 6px #ff2e97)\">\n              <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\">\n              </path>\n              <circle cx=\"9\" cy=\"7\" r=\"4\">\n              </circle>\n              <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\">\n              </path>\n              <path d=\"M16 3.13a4 4 0 0 1 0 7.75\">\n              </path>\n            </svg>\n          </div>\n          <p class=\"mt-4 font-mono text-3xl font-black tracking-tight text-white\" style=\"text-shadow:0 0 16px #ff2e97\">\n            120K+\n          </p>\n          <p class=\"mt-1 font-mono text-xs uppercase tracking-[0.2em] text-[#d8b4fe]\">\n            プレイヤー\n          </p>\n        </div>\n        <div class=\"rounded-xl border bg-[#1a0b2e]/70 p-6 text-center backdrop-blur transition-transform hover:-translate-y-1\" style=\"border-color:#05d9e866;box-shadow:0 0 22px #05d9e840\">\n          <div class=\"mx-auto grid size-12 place-items-center rounded-full\" style=\"background:#05d9e81a;box-shadow:inset 0 0 16px #05d9e855\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-zap size-6\" style=\"color:#05d9e8;filter:drop-shadow(0 0 6px #05d9e8)\">\n              <path d=\"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z\">\n              </path>\n            </svg>\n          </div>\n          <p class=\"mt-4 font-mono text-3xl font-black tracking-tight text-white\" style=\"text-shadow:0 0 16px #05d9e8\">\n            9.9M\n          </p>\n          <p class=\"mt-1 font-mono text-xs uppercase tracking-[0.2em] text-[#d8b4fe]\">\n            総スコア\n          </p>\n        </div>\n        <div class=\"rounded-xl border bg-[#1a0b2e]/70 p-6 text-center backdrop-blur transition-transform hover:-translate-y-1\" style=\"border-color:#bef26466;box-shadow:0 0 22px #bef26440\">\n          <div class=\"mx-auto grid size-12 place-items-center rounded-full\" style=\"background:#bef2641a;box-shadow:inset 0 0 16px #bef26455\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trophy size-6\" style=\"color:#bef264;filter:drop-shadow(0 0 6px #bef264)\">\n              <path d=\"M6 9H4.5a2.5 2.5 0 0 1 0-5H6\">\n              </path>\n              <path d=\"M18 9h1.5a2.5 2.5 0 0 0 0-5H18\">\n              </path>\n              <path d=\"M4 22h16\">\n              </path>\n              <path d=\"M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22\">\n              </path>\n              <path d=\"M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22\">\n              </path>\n              <path d=\"M18 2H6v7a6 6 0 0 0 12 0V2Z\">\n              </path>\n            </svg>\n          </div>\n          <p class=\"mt-4 font-mono text-3xl font-black tracking-tight text-white\" style=\"text-shadow:0 0 16px #bef264\">\n            4,200\n          </p>\n          <p class=\"mt-1 font-mono text-xs uppercase tracking-[0.2em] text-[#d8b4fe]\">\n            達成バッジ\n          </p>\n        </div>\n        <div class=\"rounded-xl border bg-[#1a0b2e]/70 p-6 text-center backdrop-blur transition-transform hover:-translate-y-1\" style=\"border-color:#c084fc66;box-shadow:0 0 22px #c084fc40\">\n          <div class=\"mx-auto grid size-12 place-items-center rounded-full\" style=\"background:#c084fc1a;box-shadow:inset 0 0 16px #c084fc55\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-cpu size-6\" style=\"color:#c084fc;filter:drop-shadow(0 0 6px #c084fc)\">\n              <rect width=\"16\" height=\"16\" x=\"4\" y=\"4\" rx=\"2\">\n              </rect>\n              <rect width=\"6\" height=\"6\" x=\"9\" y=\"9\" rx=\"1\">\n              </rect>\n              <path d=\"M15 2v2\">\n              </path>\n              <path d=\"M15 20v2\">\n              </path>\n              <path d=\"M2 15h2\">\n              </path>\n              <path d=\"M2 9h2\">\n              </path>\n              <path d=\"M20 15h2\">\n              </path>\n              <path d=\"M20 9h2\">\n              </path>\n              <path d=\"M9 2v2\">\n              </path>\n              <path d=\"M9 20v2\">\n              </path>\n            </svg>\n          </div>\n          <p class=\"mt-4 font-mono text-3xl font-black tracking-tight text-white\" style=\"text-shadow:0 0 16px #c084fc\">\n            99.9%\n          </p>\n          <p class=\"mt-1 font-mono text-xs uppercase tracking-[0.2em] text-[#d8b4fe]\">\n            稼働率\n          </p>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>"
     },
     {
       "id": "scroll-anim-sticky-stack-cards",
@@ -1426,7 +1426,7 @@
       ],
       "standalone": true,
       "source": "import { cn } from \"@/lib/utils\";\nimport type { DemoMeta } from \"@/registry\";\n\nexport const meta: DemoMeta = {\n  name: \"スタッキングカード\",\n  category: \"スクロール演出\",\n  description: \"スクロールでカードがピン留めされ重なって積み上がる。\",\n  align: \"full\",\n  isNew: true,\n  tags: [\"scroll\", \"animation\", \"sticky\"],\n};\n\nconst CARDS = [\n  { t: \"Plan\", d: \"目標とスコープを定義する。\", dEn: \"Define goals and scope.\", c: \"bg-gradient-to-br from-indigo-500 to-blue-600\" },\n  { t: \"Design\", d: \"体験とUIを設計する。\", dEn: \"Design the experience and UI.\", c: \"bg-gradient-to-br from-emerald-500 to-teal-600\" },\n  { t: \"Build\", d: \"コンポーネントを実装する。\", dEn: \"Implement the components.\", c: \"bg-gradient-to-br from-amber-500 to-orange-600\" },\n  { t: \"Ship\", d: \"本番へリリースする。\", dEn: \"Release to production.\", c: \"bg-gradient-to-br from-pink-500 to-rose-600\" },\n];\n\nexport default function StickyStackCards() {\n  const en =\n    typeof document !== \"undefined\" &&\n    document.documentElement.lang === \"en\";\n  return (\n    <div className=\"w-full\">\n      <div className=\"h-[420px] w-full overflow-y-auto rounded-2xl border bg-background\">\n        <div className=\"px-6 pt-6 text-center text-sm text-muted-foreground\">\n          {en ? \"↓ Scroll to stack\" : \"↓ スクロールで重なる\"}\n        </div>\n        <div className=\"px-6 pb-[120px] pt-4\">\n          {CARDS.map((card, i) => (\n            <div\n              key={card.t}\n              className=\"sticky\"\n              style={{ top: `${24 + i * 18}px` }}\n            >\n              <div\n                className={cn(\n                  \"mb-6 flex h-44 flex-col justify-end rounded-2xl p-6 text-white shadow-xl\",\n                  card.c,\n                )}\n              >\n                <span className=\"text-xs font-semibold uppercase tracking-widest opacity-80\">\n                  0{i + 1}\n                </span>\n                <h3 className=\"text-2xl font-black\">{card.t}</h3>\n                <p className=\"text-sm text-white/90\">{en ? card.dEn : card.d}</p>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
-      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <div class=\"w-full\">\n      <div class=\"h-[420px] w-full overflow-y-auto rounded-2xl border bg-background\">\n        <div class=\"px-6 pt-6 text-center text-sm text-muted-foreground\">\n          ↓ スクロールで重なる\n        </div>\n        <div class=\"px-6 pb-[120px] pt-4\">\n          <div class=\"sticky\" style=\"top:24px\">\n            <div class=\"mb-6 flex h-44 flex-col justify-end rounded-2xl p-6 text-white shadow-xl bg-gradient-to-br from-indigo-500 to-blue-600\">\n              <span class=\"text-xs font-semibold uppercase tracking-widest opacity-80\">\n                01\n              </span>\n              <h3 class=\"text-2xl font-black\">\n                Plan\n              </h3>\n              <p class=\"text-sm text-white/90\">\n                目標とスコープを定義する。\n              </p>\n            </div>\n          </div>\n          <div class=\"sticky\" style=\"top:42px\">\n            <div class=\"mb-6 flex h-44 flex-col justify-end rounded-2xl p-6 text-white shadow-xl bg-gradient-to-br from-emerald-500 to-teal-600\">\n              <span class=\"text-xs font-semibold uppercase tracking-widest opacity-80\">\n                02\n              </span>\n              <h3 class=\"text-2xl font-black\">\n                Design\n              </h3>\n              <p class=\"text-sm text-white/90\">\n                体験とUIを設計する。\n              </p>\n            </div>\n          </div>\n          <div class=\"sticky\" style=\"top:60px\">\n            <div class=\"mb-6 flex h-44 flex-col justify-end rounded-2xl p-6 text-white shadow-xl bg-gradient-to-br from-amber-500 to-orange-600\">\n              <span class=\"text-xs font-semibold uppercase tracking-widest opacity-80\">\n                03\n              </span>\n              <h3 class=\"text-2xl font-black\">\n                Build\n              </h3>\n              <p class=\"text-sm text-white/90\">\n                コンポーネントを実装する。\n              </p>\n            </div>\n          </div>\n          <div class=\"sticky\" style=\"top:78px\">\n            <div class=\"mb-6 flex h-44 flex-col justify-end rounded-2xl p-6 text-white shadow-xl bg-gradient-to-br from-pink-500 to-rose-600\">\n              <span class=\"text-xs font-semibold uppercase tracking-widest opacity-80\">\n                04\n              </span>\n              <h3 class=\"text-2xl font-black\">\n                Ship\n              </h3>\n              <p class=\"text-sm text-white/90\">\n                本番へリリースする。\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
+      "html": "<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <!-- このコンポーネント集のデザイントークン。\n         bg-card / text-muted-foreground などは素の Tailwind には無いので、\n         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->\n    <script>\n      tailwind.config = {\n        \"darkMode\": \"class\",\n        \"theme\": {\n          \"extend\": {\n            \"fontFamily\": {\n              \"mincho\": [\n                \"\\\"Shippori Mincho\\\"\",\n                \"\\\"Noto Serif JP\\\"\",\n                \"serif\"\n              ],\n              \"display\": [\n                \"\\\"Playfair Display\\\"\",\n                \"ui-serif\",\n                \"Georgia\",\n                \"serif\"\n              ],\n              \"rounded\": [\n                \"\\\"M PLUS Rounded 1c\\\"\",\n                \"ui-rounded\",\n                \"\\\"Hiragino Maru Gothic ProN\\\"\",\n                \"sans-serif\"\n              ]\n            },\n            \"colors\": {\n              \"border\": \"hsl(var(--border))\",\n              \"input\": \"hsl(var(--input))\",\n              \"ring\": \"hsl(var(--ring))\",\n              \"background\": \"hsl(var(--background))\",\n              \"foreground\": \"hsl(var(--foreground))\",\n              \"primary\": {\n                \"DEFAULT\": \"hsl(var(--primary))\",\n                \"foreground\": \"hsl(var(--primary-foreground))\"\n              },\n              \"secondary\": {\n                \"DEFAULT\": \"hsl(var(--secondary))\",\n                \"foreground\": \"hsl(var(--secondary-foreground))\"\n              },\n              \"destructive\": {\n                \"DEFAULT\": \"hsl(var(--destructive))\",\n                \"foreground\": \"hsl(var(--destructive-foreground))\"\n              },\n              \"muted\": {\n                \"DEFAULT\": \"hsl(var(--muted))\",\n                \"foreground\": \"hsl(var(--muted-foreground))\"\n              },\n              \"accent\": {\n                \"DEFAULT\": \"hsl(var(--accent))\",\n                \"foreground\": \"hsl(var(--accent-foreground))\"\n              },\n              \"card\": {\n                \"DEFAULT\": \"hsl(var(--card))\",\n                \"foreground\": \"hsl(var(--card-foreground))\"\n              }\n            },\n            \"borderRadius\": {\n              \"lg\": \"var(--radius)\",\n              \"md\": \"calc(var(--radius) - 2px)\",\n              \"sm\": \"calc(var(--radius) - 4px)\"\n            }\n          }\n        }\n      };\n    </script>\n    <style>\n      :root {\n        --background: 0 0% 100%;\n        --foreground: 240 10% 3.9%;\n        --card: 0 0% 100%;\n        --card-foreground: 240 10% 3.9%;\n        --primary: 243 75% 59%;\n        --primary-foreground: 0 0% 98%;\n        --secondary: 240 4.8% 95.9%;\n        --secondary-foreground: 240 5.9% 10%;\n        --muted: 240 4.8% 95.9%;\n        --muted-foreground: 240 3.8% 46.1%;\n        --accent: 240 4.8% 95.9%;\n        --accent-foreground: 240 5.9% 10%;\n        --destructive: 0 84.2% 48.9%;\n        --destructive-foreground: 0 0% 98%;\n        --border: 240 5.9% 90%;\n        --input: 240 5.9% 60.3%;\n        --ring: 243 75% 59%;\n        --radius: 0.6rem;\n      }\n      .dark {\n        --background: 240 10% 3.9%;\n        --foreground: 0 0% 98%;\n        --card: 240 8% 6%;\n        --card-foreground: 0 0% 98%;\n        --primary: 243 75% 66.5%;\n        --primary-foreground: 240 10% 3.9%;\n        --secondary: 240 3.7% 15.9%;\n        --secondary-foreground: 0 0% 98%;\n        --muted: 240 3.7% 13%;\n        --muted-foreground: 240 5% 64.9%;\n        --accent: 240 3.7% 15.9%;\n        --accent-foreground: 0 0% 98%;\n        --destructive: 0 62.8% 56.3%;\n        --destructive-foreground: 0 60% 7.3%;\n        --border: 240 3.7% 17%;\n        --input: 240 3.7% 38.4%;\n        --ring: 243 75% 65%;\n      }\n      * { border-color: hsl(var(--border)); }\n      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }\n    </style>\n  </head>\n  <body>\n    <div class=\"w-full\">\n      <div class=\"h-[420px] w-full overflow-y-auto rounded-2xl border bg-background\">\n        <div class=\"px-6 pt-6 text-center text-sm text-muted-foreground\">\n          ↓ スクロールで重なる\n        </div>\n        <div class=\"px-6 pb-[120px] pt-4\">\n          <div class=\"sticky\" style=\"top:24px\">\n            <div class=\"mb-6 flex h-44 flex-col justify-end rounded-2xl p-6 text-white shadow-xl bg-gradient-to-br from-indigo-500 to-blue-600\">\n              <span class=\"text-xs font-semibold uppercase tracking-widest opacity-80\">\n                01\n              </span>\n              <h3 class=\"text-2xl font-black\">\n                Plan\n              </h3>\n              <p class=\"text-sm text-white/90\">\n                目標とスコープを定義する。\n              </p>\n            </div>\n          </div>\n          <div class=\"sticky\" style=\"top:42px\">\n            <div class=\"mb-6 flex h-44 flex-col justify-end rounded-2xl p-6 text-white shadow-xl bg-gradient-to-br from-emerald-500 to-teal-600\">\n              <span class=\"text-xs font-semibold uppercase tracking-widest opacity-80\">\n                02\n              </span>\n              <h3 class=\"text-2xl font-black\">\n                Design\n              </h3>\n              <p class=\"text-sm text-white/90\">\n                体験とUIを設計する。\n              </p>\n            </div>\n          </div>\n          <div class=\"sticky\" style=\"top:60px\">\n            <div class=\"mb-6 flex h-44 flex-col justify-end rounded-2xl p-6 text-white shadow-xl bg-gradient-to-br from-amber-500 to-orange-600\">\n              <span class=\"text-xs font-semibold uppercase tracking-widest opacity-80\">\n                03\n              </span>\n              <h3 class=\"text-2xl font-black\">\n                Build\n              </h3>\n              <p class=\"text-sm text-white/90\">\n                コンポーネントを実装する。\n              </p>\n            </div>\n          </div>\n          <div class=\"sticky\" style=\"top:78px\">\n            <div class=\"mb-6 flex h-44 flex-col justify-end rounded-2xl p-6 text-white shadow-xl bg-gradient-to-br from-pink-500 to-rose-600\">\n              <span class=\"text-xs font-semibold uppercase tracking-widest opacity-80\">\n                04\n              </span>\n              <h3 class=\"text-2xl font-black\">\n                Ship\n              </h3>\n              <p class=\"text-sm text-white/90\">\n                本番へリリースする。\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>"
     }
   ]
 }
diff --git a/package.json b/package.json
index 1aa9cec..2887792 100644
--- a/package.json
+++ b/package.json
@@ -5,21 +5,22 @@
   "type": "module",
   "description": "自分専用の無料コンポーネント・スタジオ（21st.dev の代替）",
   "scripts": {
-    "predev": "node scripts/build-manifest.mjs && node scripts/build-free-ids.mjs",
+    "predev": "node scripts/build-manifest.mjs && node scripts/build-free-ids.mjs && node scripts/build-vanilla-head.mjs",
     "dev": "vite",
-    "build": "npm run registry && npm run manifest && npm run freeids && tsc -b && npm run build:client && npm run build:server && npm run prerender",
+    "build": "npm run registry && npm run manifest && npm run freeids && npm run vanillahead && tsc -b && npm run build:client && npm run build:server && npm run prerender",
     "build:client": "vite build",
     "build:server": "vite build --ssr src/entry-server.tsx --outDir dist-ssr --logLevel warn",
     "prerender": "node scripts/prerender.mjs",
     "preview": "vite preview",
-    "typecheck": "node scripts/build-manifest.mjs && node scripts/build-free-ids.mjs && tsc -b --noEmit",
+    "typecheck": "node scripts/build-manifest.mjs && node scripts/build-free-ids.mjs && node scripts/build-vanilla-head.mjs && tsc -b --noEmit",
     "registry": "node scripts/build-registry.mjs",
     "manifest": "node scripts/build-manifest.mjs",
     "freeids": "node scripts/build-free-ids.mjs",
-    "test": "node scripts/build-manifest.mjs && node scripts/build-free-ids.mjs && node scripts/check-contrast.mjs --quiet && vitest run",
+    "vanillahead": "node scripts/build-vanilla-head.mjs",
+    "test": "node scripts/build-manifest.mjs && node scripts/build-free-ids.mjs && node scripts/build-vanilla-head.mjs && node scripts/check-contrast.mjs --quiet && vitest run",
     "check:contrast": "node scripts/check-contrast.mjs",
     "check:overflow": "node scripts/build-manifest.mjs && node scripts/check-overflow.mjs",
-    "html": "node scripts/build-manifest.mjs && node scripts/build-static-html.mjs",
+    "html": "node scripts/build-manifest.mjs && node scripts/build-vanilla-head.mjs && node scripts/build-static-html.mjs",
     "mcp:bundle": "node scripts/build-mcp-bundle.mjs"
   },
   "dependencies": {
diff --git a/scripts/build-release.mjs b/scripts/build-release.mjs
index 30b3736..7d63726 100644
--- a/scripts/build-release.mjs
+++ b/scripts/build-release.mjs
@@ -38,7 +38,6 @@ import {
 } from "node:fs";
 import { join, resolve, dirname, relative } from "node:path";
 import { execFileSync } from "node:child_process";
-import { pathToFileURL } from "node:url";
 
 const ROOT = resolve(import.meta.dirname, "..");
 const arg = (name, fallback) => {
@@ -70,90 +69,31 @@ if (missing.length > 0) {
 }
 
 // ──────────────────────────────────────────────────────────────────────────
-// 静的HTML への Tailwind 設定の注入
+// デザイントークンが HTML に入っているかの確認
 //
-// 生成された静的HTML は cdn.tailwindcss.com を1行読むだけになっているが、
 // bg-card / text-muted-foreground のような**このプロジェクト固有のトークン**は
-// 素の Tailwind には存在しない。実測したところ 880 件中 430 件がこれらを使って
-// おり、そのままではその分の色が一切当たらない（bg-card → transparent）。
+// 素の Tailwind には存在しない（880 件中 430 件が使っている）。そのため
+// cdn.tailwindcss.com を1行読むだけの HTML では色が一切当たらない。
 //
-// そこで配布時に、tailwind.config.js の extend と src/index.css の :root/.dark を
-// HTML の <head> に埋め込む。Play CDN が公式に用意している設定方法で、
-// 「Tailwind を1行読むだけ」という売り文句を保ったまま色が正しく出る。
+// この注入は書き出しの**源流**（src/lib/vanilla.ts の wrapDocument。設定は
+// scripts/build-vanilla-head.mjs が生成する src/lib/vanillaHead.generated.ts）で
+// 行うので、ここで配布時に足すことはしない。同じ内容を2箇所に持つと、
+// 片方だけ直したときに配布物とスタジオの書き出しが食い違うため。
 //
-// 値は tailwind.config.js と src/index.css から毎回読み直すので、
-// トークンを直したら再生成するだけで配布物にも反映される。
+// 代わりに「入っているか」だけを検める。入っていなければ材料が古い。
 // ──────────────────────────────────────────────────────────────────────────
 
-/** CSS から `selector { ... }` の中身を括弧の対応を数えて取り出す */
-function extractCssBlock(css, selector) {
-  const at = css.indexOf(selector);
-  if (at === -1) return null;
-  const open = css.indexOf("{", at);
-  if (open === -1) return null;
-  let depth = 0;
-  for (let i = open; i < css.length; i++) {
-    if (css[i] === "{") depth++;
-    else if (css[i] === "}") {
-      depth--;
-      if (depth === 0) return css.slice(open + 1, i);
-    }
+/** トークン設定が入っていない HTML を洗い出し、あれば止める */
+function assertTokensInjected(label, htmls, how) {
+  const broken = htmls.filter(([, html]) => html && !html.includes("tailwind.config"));
+  if (broken.length > 0) {
+    console.error(
+      `${label}: デザイントークンの設定が入っていない HTML が ${broken.length} 件あります。\n` +
+        `  例: ${broken.slice(0, 3).map(([name]) => name).join(", ")}\n` +
+        `  bg-card / text-muted-foreground などの色が出ない状態です。${how} を実行して作り直してください。`
+    );
+    process.exit(1);
   }
-  return null;
-}
-
-/** CSS コメントを落として1行1宣言に整える */
-function tidyDeclarations(body, indent) {
-  return body
-    .replace(/\/\*[\s\S]*?\*\//g, "")
-    .split(";")
-    .map((s) => s.trim())
-    .filter(Boolean)
-    .map((s) => `${indent}${s};`)
-    .join("\n");
-}
-
-async function buildHeadInjection() {
-  const cfg = (await import(pathToFileURL(resolve(ROOT, "tailwind.config.js")).href))
-    .default;
-  const css = readFileSync(resolve(ROOT, "src/index.css"), "utf-8");
-  const root = extractCssBlock(css, ":root");
-  const dark = extractCssBlock(css, ".dark");
-  if (!root || !dark) {
-    throw new Error("src/index.css から :root / .dark を取り出せませんでした");
-  }
-  const config = JSON.stringify(
-    { darkMode: cfg.darkMode, theme: { extend: cfg.theme.extend } },
-    null,
-    2
-  )
-    .split("\n")
-    .map((l, i) => (i === 0 ? l : `      ${l}`))
-    .join("\n");
-
-  return `    <!-- このコンポーネント集のデザイントークン。
-         bg-card / text-muted-foreground などは素の Tailwind には無いので、
-         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->
-    <script>
-      tailwind.config = ${config};
-    </script>
-    <style>
-      :root {
-${tidyDeclarations(root, "        ")}
-      }
-      .dark {
-${tidyDeclarations(dark, "        ")}
-      }
-      * { border-color: hsl(var(--border)); }
-      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }
-    </style>
-`;
-}
-
-/** <head> の末尾に設定を差し込む。既に入っていれば何もしない。 */
-function injectHead(html, injection) {
-  if (html.includes("tailwind.config")) return html;
-  return html.replace("  </head>", `${injection}  </head>`);
 }
 
 // ──────────────────────────────────────────────────────────────────────────
@@ -210,8 +150,6 @@ console.log(`${NAME} を組み立てます…\n`);
 rmSync(STAGE, { recursive: true, force: true });
 mkdirSync(STAGE, { recursive: true });
 
-const injection = await buildHeadInjection();
-
 // --- README / LICENSE ---
 copyOne("docs/dist-README.md", join(STAGE, "README.md"));
 copyOne("LICENSE", join(STAGE, "LICENSE"));
@@ -248,19 +186,22 @@ const demoCount = readdirSync(join(STAGE, "components/demos"), { recursive: true
   .filter((f) => String(f).endsWith(".tsx"))
   .length;
 
-// --- html/ : 880件 + index.json（Tailwind 設定を注入したもの） ---
+// --- html/ : 880件 + index.json ---
 const htmlSrc = resolve(ROOT, "public/html");
 const htmlDst = join(STAGE, "html");
 mkdirSync(htmlDst, { recursive: true });
-let htmlCount = 0;
+const htmlFiles = readdirSync(htmlSrc).filter((f) => f.endsWith(".html"));
+assertTokensInjected(
+  "html/",
+  htmlFiles.map((f) => [f, readFileSync(join(htmlSrc, f), "utf-8")]),
+  "npm run html"
+);
 for (const f of readdirSync(htmlSrc)) {
-  if (f.endsWith(".html")) {
-    writeFileSync(join(htmlDst, f), injectHead(readFileSync(join(htmlSrc, f), "utf-8"), injection));
-    htmlCount++;
-  } else if (f === "index.json") {
+  if (f.endsWith(".html") || f === "index.json") {
     copyFileSync(join(htmlSrc, f), join(htmlDst, f));
   }
 }
+const htmlCount = htmlFiles.length;
 copied += htmlCount + 1;
 
 // --- registry/ : shadcn 互換 JSON ---
@@ -284,10 +225,12 @@ try {
 if (fullBundle.edition !== "full") {
   throw new Error(`MCP バンドルが full になっていません: ${fullBundle.edition}`);
 }
-// MCP が返す HTML も配布物と同じものにする
-for (const item of fullBundle.items) {
-  if (item.html) item.html = injectHead(item.html, injection);
-}
+// MCP が返す HTML も public/html/ から来るので、同じ検査を通す
+assertTokensInjected(
+  "mcp/data/components.json",
+  fullBundle.items.map((i) => [i.id, i.html]),
+  "npm run html"
+);
 copyTree(resolve(ROOT, "mcp/src"), join(STAGE, "mcp/src"));
 copyOne("mcp/package.json", join(STAGE, "mcp/package.json"));
 copyOne("mcp/README.md", join(STAGE, "mcp/README.md"));
@@ -301,8 +244,7 @@ copied++;
 
 // --- studio/ : ビルド済み ---
 // Vite は public/ をそのまま dist/ にコピーするので、dist/r と dist/html は
-// registry/ と html/ の丸ごと重複になる（合わせて 12MB）。しかも dist/html は
-// Tailwind 設定を注入する前の版なので、残すと配布物の中で食い違う。
+// registry/ と html/ の丸ごと重複になる（合わせて 12MB）。
 // スタジオ本体はどちらも実行時に参照していないので外す。
 const DIST = resolve(ROOT, "dist");
 const DIST_DUPES = new Set(["r", "html"]);
diff --git a/scripts/build-vanilla-head.mjs b/scripts/build-vanilla-head.mjs
new file mode 100644
index 0000000..3d9b403
--- /dev/null
+++ b/scripts/build-vanilla-head.mjs
@@ -0,0 +1,129 @@
+/**
+ * build-vanilla-head.mjs
+ *
+ * バニラHTML書き出し（src/lib/vanilla.ts）が <head> に差し込む
+ * **デザイントークン定義**を `src/lib/vanillaHead.generated.ts` に生成する。
+ *
+ * なぜ生成物にするのか:
+ *   bg-card / text-muted-foreground / bg-background などはこのプロジェクト固有の
+ *   トークンで、素の Tailwind には存在しない（tailwind.config.js の theme.extend と
+ *   src/index.css の :root / .dark が定義の出所）。書き出したHTMLが
+ *   cdn.tailwindcss.com を1行読むだけだと、これらのクラスは一切当たらず
+ *   bg-card → transparent、text-muted-foreground → 真っ黒になる（880件中430件が該当）。
+ *   Play CDN 公式の方法どおり `tailwind.config = {...}` と CSS 変数を <head> に
+ *   埋めれば直るが、`wrapDocument` はスタジオの書き出し機能としてブラウザ上でも
+ *   走るため、実行時にファイルを読むことができない。よってビルド前に定数化する。
+ *
+ *   （src/index.css を `?raw` で直接 import する手もあるが、vitest は既定で
+ *    CSS の import を空文字に差し替えるためテスト環境で成立しない。
+ *    manifest.ts / stats.generated.ts / freeIds.ts と同じ生成物方式に揃える。）
+ *
+ * 使い方: node scripts/build-vanilla-head.mjs
+ * 元データ: tailwind.config.js（darkMode / theme.extend）, src/index.css（:root / .dark）
+ * ドリフト検査: src/lib/vanillaHead.test.ts が元データから組み直して突き合わせる。
+ *
+ * 注: 他の scripts と違い shebang を付けていない。この検査から import するが、
+ *     Vite の SSR 変換は `#!` を解析できず "Expected ident" で落ちるため。
+ */
+import { readFileSync, writeFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+
+const root = join(dirname(fileURLToPath(import.meta.url)), "..");
+
+/** CSS から `selector { ... }` の中身を、括弧の対応を数えて取り出す */
+function extractCssBlock(css, selector) {
+  const at = css.indexOf(selector);
+  if (at === -1) return null;
+  const open = css.indexOf("{", at);
+  if (open === -1) return null;
+  let depth = 0;
+  for (let i = open; i < css.length; i++) {
+    if (css[i] === "{") depth++;
+    else if (css[i] === "}") {
+      depth--;
+      if (depth === 0) return css.slice(open + 1, i);
+    }
+  }
+  return null;
+}
+
+/** CSS コメントを落として1行1宣言に整える */
+function tidyDeclarations(body, indent) {
+  return body
+    .replace(/\/\*[\s\S]*?\*\//g, "")
+    .split(";")
+    .map((s) => s.trim())
+    .filter(Boolean)
+    .map((s) => `${indent}${s};`)
+    .join("\n");
+}
+
+/**
+ * <head> に差し込む文字列を組み立てる。
+ * scripts と src/lib/vanillaHead.test.ts の両方から使えるよう export している。
+ */
+export async function buildHeadInjection(rootDir = root) {
+  const cfg = (await import(pathToFileURL(join(rootDir, "tailwind.config.js")).href))
+    .default;
+  const css = readFileSync(join(rootDir, "src", "index.css"), "utf-8");
+  const cssRoot = extractCssBlock(css, ":root");
+  const dark = extractCssBlock(css, ".dark");
+  if (!cssRoot || !dark) {
+    throw new Error("src/index.css から :root / .dark を取り出せませんでした");
+  }
+  const config = JSON.stringify(
+    { darkMode: cfg.darkMode, theme: { extend: cfg.theme.extend } },
+    null,
+    2
+  )
+    .split("\n")
+    .map((l, i) => (i === 0 ? l : `      ${l}`))
+    .join("\n");
+
+  return `    <!-- このコンポーネント集のデザイントークン。
+         bg-card / text-muted-foreground などは素の Tailwind には無いので、
+         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->
+    <script>
+      tailwind.config = ${config};
+    </script>
+    <style>
+      :root {
+${tidyDeclarations(cssRoot, "        ")}
+      }
+      .dark {
+${tidyDeclarations(dark, "        ")}
+      }
+      * { border-color: hsl(var(--border)); }
+      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }
+    </style>
+`;
+}
+
+/** テンプレートリテラルに埋め込める形へ逃がす */
+function escapeTemplate(s) {
+  return s.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/g, "\\${");
+}
+
+// このモジュールを直接実行したときだけ生成する（test からは import して使う）
+if (process.argv[1] && pathToFileURL(process.argv[1]).href === import.meta.url) {
+  const injection = await buildHeadInjection();
+  const out = join(root, "src", "lib", "vanillaHead.generated.ts");
+  writeFileSync(
+    out,
+    `// このファイルは scripts/build-vanilla-head.mjs により自動生成されます。直接編集しないでください。
+// 元データ: tailwind.config.js（darkMode / theme.extend）と src/index.css（:root / .dark）
+
+/**
+ * バニラHTML書き出しの <head> に差し込むデザイントークン定義。
+ * 素の Tailwind に無い bg-card / text-muted-foreground などを CDN 版でも
+ * 解決させるための設定（Play CDN 公式の方法）。
+ * Tailwind CDN の <script> より**後ろ**に置くこと。
+ */
+export const HEAD_TOKEN_INJECTION = \`${escapeTemplate(injection)}\`;
+`
+  );
+  console.log(
+    `✓ バニラHTML用のトークン定義を生成しました: ${(injection.length / 1024).toFixed(1)} KB → src/lib/vanillaHead.generated.ts`
+  );
+}
diff --git a/scripts/verify-release.mjs b/scripts/verify-release.mjs
index a3a5847..a127b03 100644
--- a/scripts/verify-release.mjs
+++ b/scripts/verify-release.mjs
@@ -190,11 +190,13 @@ if (simCss) {
   // セマンティックトークン（bg-card など）を使うものにする。埋め込んだ
   // Tailwind 設定が効いているかは、それを使う HTML でしか確かめられない。
   const standalone = htmlIndex.items.filter((i) => i.standalone);
-  // <head> に埋めた設定の中にもトークン名が出てくるので、<body> だけを見る
+  // <head> に埋めた設定の中にもトークン名が出てくるので、<body> だけを見る。
+  // 対象は下の SAMPLE_MEASURE が DOM から拾えるクラスに合わせてある
+  // （拾えないクラスを選んでしまうと、色を実測できず検査にならない）。
   const usesToken = (id) => {
     const html = readFileSync(join(PKG, "html", `${id}.html`), "utf-8");
     const body = html.slice(html.indexOf("<body"));
-    return /(?:^|[\s"])(?:bg|text|border|ring|from|to|via|hover:bg|dark:bg)-(?:card|primary|muted|muted-foreground|background|foreground|accent|secondary|destructive|border|input)(?:[\s"/]|$)/.test(
+    return /(?:^|[\s"])(?:bg-(?:card|primary|muted|background)|text-(?:muted-foreground|card-foreground|foreground|primary))(?:[\s"]|$)/.test(
       body
     );
   };
@@ -211,7 +213,10 @@ if (simCss) {
   const SAMPLE_MEASURE = `(() => {
     const cs = (el) => (el ? getComputedStyle(el) : null);
     const q = (sel) => document.querySelector(sel);
-    const tokenEl = q('[class*="bg-card"], [class*="bg-primary"], [class*="bg-muted"], [class*="bg-background"]');
+    // 背景トークンが無ければ文字色トークンを見る（どちらも素の Tailwind には無い）
+    const bgEl = q('[class*="bg-card"], [class*="bg-primary"], [class*="bg-muted"], [class*="bg-background"]');
+    const fgEl = q('[class*="text-muted-foreground"], [class*="text-card-foreground"], [class*="text-foreground"], [class*="text-primary"]');
+    const tokenEl = bgEl ?? fgEl;
     const styled = [...document.body.querySelectorAll("*")].filter((el) => {
       const s = getComputedStyle(el);
       return s.backgroundColor !== "rgba(0, 0, 0, 0)" || s.borderTopWidth !== "0px" || s.padding !== "0px";
@@ -223,8 +228,13 @@ if (simCss) {
       height: document.body.scrollHeight,
       width: document.documentElement.scrollWidth,
       rootVar: getComputedStyle(document.documentElement).getPropertyValue("--card").trim(),
-      tokenClass: tokenEl ? [...tokenEl.classList].find((c) => /^bg-(card|primary|muted|background)$/.test(c)) : null,
-      tokenBg: tokenEl ? cs(tokenEl).backgroundColor : null,
+      tokenClass: tokenEl
+        ? [...tokenEl.classList].find((c) =>
+            /^(bg-(card|primary|muted|background)|text-(muted-foreground|card-foreground|foreground|primary))$/.test(c)
+          )
+        : null,
+      // 背景トークンなら背景色を、文字色トークンなら文字色を測る
+      tokenBg: tokenEl ? (bgEl ? cs(tokenEl).backgroundColor : cs(tokenEl).color) : null,
       fontSize: cs(q("h1, h2, h3, p, span, div")).fontSize,
     };
   })()`;
@@ -241,6 +251,13 @@ if (simCss) {
       );
       await page.goto(`file://${join(PKG, "html", `${item.id}.html`)}`, { waitUntil: "load" });
       if (withCss) await page.addStyleTag({ content: simCss });
+      // CSS を後から差し込むと transition-colors 等が走り出し、getComputedStyle が
+      // 補間中の値（背景が rgba(255,255,255,0.17) など）を返して測定が揺れる。
+      // 測る前にアニメーションを止めて確定値にする。
+      await page.addStyleTag({
+        content: "*, *::before, *::after { transition: none !important; animation: none !important; }",
+      });
+      await page.waitForTimeout(120);
       const m = await page.evaluate(SAMPLE_MEASURE);
       await page.close();
       return m;
@@ -258,7 +275,9 @@ if (simCss) {
     const unstyled = m.styled <= bare.styled && m.height === bare.height;
     // 埋め込んだトークン定義が届いているか（--card が空なら <style> が効いていない）
     const tokensMissing = m.rootVar === "";
-    const tokenBroken = m.tokenClass !== null && m.tokenBg === "rgba(0, 0, 0, 0)";
+    // トークンが解決したか。素の状態（Tailwind 無し）と同じ色のままなら、
+    // そのクラスは何も効いていない＝定義が届いていない。
+    const tokenBroken = m.tokenClass !== null && m.tokenBg === bare.tokenBg;
     check(!blank && !unstyled && !tokensMissing && !tokenBroken, item.id, detail);
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
index 01492e8..3191459 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,4 @@
 import { Suspense, lazy, useEffect, useState } from "react";
-import { LangToggle } from "@/components/LangToggle";
 import Landing from "@/pages/Landing";
 import Pricing from "@/pages/Pricing";
 import { getStats } from "@/lib/stats";
@@ -87,6 +86,7 @@ export default function App({ ssrRoute }: { ssrRoute?: Route } = {}) {
       <Pricing
         currentPlan={plan}
         lang={lang}
+        setLang={setLang}
         onChoosePlan={setPlan}
         onOpenStudio={() => go("studio")}
       />
@@ -94,22 +94,12 @@ export default function App({ ssrRoute }: { ssrRoute?: Route } = {}) {
       <Landing
         stats={stats}
         lang={lang}
+        setLang={setLang}
         onOpenStudio={() => go("studio")}
         onOpenPricing={() => go("pricing")}
       />
     );
 
-  return (
-    <>
-      {page}
-      {/* スタジオはヘッダー内に言語切替を持つ。料金は右上に固定表示。 */}
-      {route !== "studio" && (
-        <LangToggle
-          lang={lang}
-          setLang={setLang}
-          className="fixed right-3 top-3 z-50 shadow-lg"
-        />
-      )}
-    </>
-  );
+  // 言語切替は各画面のヘッダー内に置く（固定配置だと CTA に重なるため）
+  return page;
 }
diff --git a/src/Studio.tsx b/src/Studio.tsx
index be3e37d..4a73b0d 100644
--- a/src/Studio.tsx
+++ b/src/Studio.tsx
@@ -27,6 +27,7 @@ import {
   ListChecks,
   Loader,
   MessageSquare,
+  MoreHorizontal,
   MousePointerClick,
   MoveVertical,
   Navigation,
@@ -61,6 +62,7 @@ import { registry, categories } from "@/registry";
 import { tCategory, tName } from "@/registry/i18n";
 import { THEME_CATEGORIES } from "@/lib/stats";
 import { isFreeComponent } from "@/lib/free";
+import { variantLabel } from "@/lib/variant";
 import { FREE_EDITION_COUNT } from "@/registry/freeCount";
 import { type PlanId } from "@/lib/plan";
 import { type Lang } from "@/lib/i18n";
@@ -130,6 +132,7 @@ function useFavorites() {
 // スタジオのUI文言（ナビ・ラベル）の二言語辞書
 const STUDIO_COPY = {
   ja: {
+    brandShort: "LP Studio",
     subtitle: "ランディングページが完成する部品ライブラリ",
     viewPlan: "プランを見る",
     detail: "詳細",
@@ -137,9 +140,12 @@ const STUDIO_COPY = {
     home: "ホーム",
     pricing: "料金",
     repo: "リポジトリ",
+    menu: "メニュー",
     searchPlaceholder: "検索（名前・タグ）...",
     favorites: "お気に入り",
-    items: "件",
+    // 「お気に入りが880件」と誤読されないよう、何の件数かを明示する
+    shown: (n: number) => `表示中 ${n} 件`,
+    collection: "コレクション",
     noResults: "該当なし",
     all: "すべて",
     back: "一覧に戻る",
@@ -158,6 +164,7 @@ const STUDIO_COPY = {
     empty: "コンポーネントがありません",
   },
   en: {
+    brandShort: "LP Studio",
     subtitle: "The section library that finishes your landing page",
     viewPlan: "View plans",
     detail: "Detail",
@@ -165,9 +172,11 @@ const STUDIO_COPY = {
     home: "Home",
     pricing: "Pricing",
     repo: "Repo",
+    menu: "Menu",
     searchPlaceholder: "Search (name, tag)…",
     favorites: "Favorites",
-    items: "items",
+    shown: (n: number) => `${n} shown`,
+    collection: "Collection",
     noResults: "No results",
     all: "All",
     back: "Back to list",
@@ -187,6 +196,92 @@ const STUDIO_COPY = {
   },
 } as const;
 
+/**
+ * 狭い画面でヘッダーに収まらない導線（ホーム・料金・リポジトリ）を畳むメニュー。
+ * md 以上ではヘッダーに直接並ぶので、こちらは非表示になる。
+ */
+function OverflowMenu({
+  label,
+  items,
+}: {
+  label: string;
+  items: {
+    key: string;
+    icon: typeof Home;
+    label: string;
+    onSelect?: () => void;
+    href?: string;
+  }[];
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (e: MouseEvent) => {
+      if (!ref.current?.contains(e.target as Node)) setOpen(false);
+    };
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+
+  const itemClass =
+    "flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-left text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+
+  return (
+    <div ref={ref} className="relative md:hidden">
+      <Button
+        size="icon"
+        variant="ghost"
+        className="size-8"
+        aria-label={label}
+        aria-expanded={open}
+        onClick={() => setOpen((v) => !v)}
+      >
+        <MoreHorizontal />
+      </Button>
+      {open && (
+        <div className="absolute right-0 top-full z-30 mt-1 min-w-44 rounded-lg border bg-background p-1 shadow-lg">
+          {items.map((item) => {
+            const Icon = item.icon;
+            return item.href ? (
+              <a
+                key={item.key}
+                href={item.href}
+                target="_blank"
+                rel="noreferrer"
+                className={itemClass}
+                onClick={() => setOpen(false)}
+              >
+                <Icon className="size-4" /> {item.label}
+              </a>
+            ) : (
+              <button
+                key={item.key}
+                type="button"
+                className={itemClass}
+                onClick={() => {
+                  setOpen(false);
+                  item.onSelect?.();
+                }}
+              >
+                <Icon className="size-4" /> {item.label}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
 function Stat({ value, label }: { value: string; label: string }) {
   return (
     <div className="flex flex-col">
@@ -276,7 +371,7 @@ export default function Studio({
   // 件数表示（無料版で絞り込み中は「無料100個のうち n 件」）
   const countLabel = onlyFree
     ? s.freeOf(filtered.length)
-    : `${filtered.length} ${s.items}`;
+    : s.shown(filtered.length);
 
   const active =
     registry.find((e) => e.id === activeId) ?? filtered[0] ?? registry[0];
@@ -317,55 +412,68 @@ export default function Studio({
   return (
     <div className="min-h-screen">
       <header className="sticky top-0 z-20 border-b bg-background/80 backdrop-blur">
-        <div className="mx-auto flex max-w-6xl items-center gap-3 px-4 py-3">
-          <div className="flex items-center gap-2 font-semibold">
-            <div className="flex size-8 items-center justify-center rounded-md bg-primary text-primary-foreground">
+        {/* 狭い画面でも1行に収める: ブランドは縮み、ラベルはアイコンに畳み、
+            はみ出す導線は「…」メニューへ入れる（375px で横スクロールしない） */}
+        <div className="mx-auto flex max-w-6xl items-center gap-2 px-3 py-2.5 sm:gap-3 sm:px-4 sm:py-3">
+          <div className="flex min-w-0 items-center gap-2 font-semibold">
+            <div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground">
               <Boxes className="size-4" />
             </div>
-            <div className="leading-tight">
-              <div>LP Section Studio</div>
-              <div className="hidden text-[10px] font-normal text-muted-foreground sm:block">
+            <div className="min-w-0 leading-tight">
+              <div className="truncate text-sm sm:text-base">
+                <span className="sm:hidden">{s.brandShort}</span>
+                <span className="hidden sm:inline">LP Section Studio</span>
+              </div>
+              <div className="hidden truncate text-[10px] font-normal text-muted-foreground sm:block">
                 {s.subtitle}
               </div>
             </div>
           </div>
-          <Badge variant="secondary" className="hidden sm:inline-flex">
+          <Badge variant="secondary" className="hidden lg:inline-flex">
             {registry.length} sections
           </Badge>
           <button
             onClick={onPricing}
             className={cn(
-              "hidden rounded-full px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide sm:inline-flex",
+              "hidden rounded-full px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide lg:inline-flex",
               plan === "free"
-                ? "bg-muted text-muted-foreground"
+                ? "bg-muted text-foreground/70"
                 : "bg-violet-500/15 text-violet-500"
             )}
             title={s.viewPlan}
           >
             {plan}
           </button>
-          <div className="ml-auto flex items-center gap-2">
+          <div className="ml-auto flex shrink-0 items-center gap-1 sm:gap-2">
             <div className="flex rounded-md border p-0.5">
               <Button
                 size="sm"
                 variant={view === "gallery" ? "secondary" : "ghost"}
                 onClick={() => setView("gallery")}
+                aria-label={s.gallery}
+                title={s.gallery}
+                className="px-2 md:px-3"
               >
-                <LayoutGrid /> {s.gallery}
+                <LayoutGrid />
+                <span className="hidden md:inline">{s.gallery}</span>
               </Button>
               <Button
                 size="sm"
                 variant={view === "detail" ? "secondary" : "ghost"}
                 onClick={() => setView("detail")}
+                aria-label={s.detail}
+                title={s.detail}
+                className="px-2 md:px-3"
               >
-                <PanelsTopLeft /> {s.detail}
+                <PanelsTopLeft />
+                <span className="hidden md:inline">{s.detail}</span>
               </Button>
             </div>
             <Button
               size="sm"
               variant="ghost"
               onClick={onHome}
-              className="hidden sm:flex"
+              className="hidden md:flex"
             >
               <Home /> {s.home}
             </Button>
@@ -373,7 +481,7 @@ export default function Studio({
               size="sm"
               variant="ghost"
               onClick={onPricing}
-              className="hidden sm:flex"
+              className="hidden md:flex"
             >
               <Tag /> {s.pricing}
             </Button>
@@ -387,6 +495,24 @@ export default function Studio({
             </a>
             <LangToggle lang={lang} setLang={setLang} />
             <ThemeToggle />
+            <OverflowMenu
+              label={s.menu}
+              items={[
+                { key: "home", icon: Home, label: s.home, onSelect: onHome },
+                {
+                  key: "pricing",
+                  icon: Tag,
+                  label: s.pricing,
+                  onSelect: onPricing,
+                },
+                {
+                  key: "repo",
+                  icon: Github,
+                  label: s.repo,
+                  href: "https://github.com/ilovewalking7/app-035",
+                },
+              ]}
+            />
           </div>
         </div>
       </header>
@@ -435,50 +561,69 @@ export default function Studio({
                       {tCategory(lang, cat)}
                     </div>
                     <ul className="space-y-0.5">
-                      {items.map((e) => (
-                        <li key={e.id}>
-                          <div
-                            className={cn(
-                              "group flex items-center rounded-md transition-colors",
-                              view === "detail" && active?.id === e.id
-                                ? "bg-accent text-accent-foreground"
-                                : "hover:bg-accent/50"
-                            )}
-                          >
-                            <button
-                              onClick={() => select(e.id)}
+                      {items.map((e) => {
+                        // 同名が他にもある時だけ、どちらのものか分かるよう
+                        // コレクション名（demos 配下のフォルダ）を添える
+                        const variant = variantLabel(e);
+                        return (
+                          <li key={e.id}>
+                            <div
                               className={cn(
-                                "flex-1 truncate px-2 py-1.5 text-left text-sm",
+                                "group flex items-center rounded-md transition-colors",
                                 view === "detail" && active?.id === e.id
-                                  ? "font-medium"
-                                  : "text-muted-foreground group-hover:text-foreground"
+                                  ? "bg-accent text-accent-foreground"
+                                  : "hover:bg-accent/50"
                               )}
                             >
-                              {tName(lang, e.id, e.name)}
-                              {e.level === "advanced" && (
-                                <span className="ml-1.5 text-[10px] text-violet-500">
-                                  ★
-                                </span>
-                              )}
-                            </button>
-                            <button
-                              aria-label="お気に入り"
-                              onClick={() => toggle(e.id)}
-                              className="px-2 opacity-0 transition-opacity group-hover:opacity-100 aria-pressed:opacity-100"
-                              aria-pressed={favs.includes(e.id)}
-                            >
-                              <Star
+                              <button
+                                onClick={() => select(e.id)}
                                 className={cn(
-                                  "size-3.5",
-                                  favs.includes(e.id)
-                                    ? "fill-amber-400 text-amber-400 opacity-100"
-                                    : "text-muted-foreground"
+                                  "flex min-w-0 flex-1 items-center gap-1.5 px-2 py-1.5 text-left text-sm",
+                                  view === "detail" && active?.id === e.id
+                                    ? "font-medium"
+                                    : "text-muted-foreground group-hover:text-foreground"
+                                )}
+                              >
+                                {/* 名前は省略されても、区別用の印は必ず残す */}
+                                <span className="truncate">
+                                  {tName(lang, e.id, e.name)}
+                                </span>
+                                {e.level === "advanced" && (
+                                  <span className="shrink-0 text-[10px] text-violet-500">
+                                    ★
+                                  </span>
+                                )}
+                                {variant && (
+                                  <span
+                                    className="shrink-0 rounded bg-muted px-1 font-mono text-[10px] text-foreground/70"
+                                    title={`${s.collection}: ${variant} · ${e.id}`}
+                                  >
+                                    <span className="sr-only">
+                                      {s.collection}{" "}
+                                    </span>
+                                    {variant}
+                                  </span>
                                 )}
-                              />
-                            </button>
-                          </div>
-                        </li>
-                      ))}
+                              </button>
+                              <button
+                                aria-label="お気に入り"
+                                onClick={() => toggle(e.id)}
+                                className="px-2 opacity-0 transition-opacity group-hover:opacity-100 aria-pressed:opacity-100"
+                                aria-pressed={favs.includes(e.id)}
+                              >
+                                <Star
+                                  className={cn(
+                                    "size-3.5",
+                                    favs.includes(e.id)
+                                      ? "fill-amber-400 text-amber-400 opacity-100"
+                                      : "text-muted-foreground"
+                                  )}
+                                />
+                              </button>
+                            </div>
+                          </li>
+                        );
+                      })}
                     </ul>
                   </div>
                 );
@@ -494,7 +639,8 @@ export default function Studio({
 
         <main ref={mainRef} className="min-w-0 flex-1 scroll-mt-20">
           {/* 数字で訴求するバンド（LP部品ライブラリの規模感） */}
-          <div className="mb-4 flex flex-wrap items-center gap-x-6 gap-y-2 rounded-lg border bg-gradient-to-r from-violet-500/5 via-transparent to-transparent p-4">
+          {/* 狭い画面では2×2に並べる（折り返しで最後の1つだけ余るのを防ぐ） */}
+          <div className="mb-4 grid grid-cols-2 gap-x-6 gap-y-3 rounded-lg border bg-gradient-to-r from-violet-500/5 via-transparent to-transparent p-4 sm:flex sm:flex-wrap sm:items-center sm:gap-y-2">
             <Stat value={`${registry.length}+`} label={s.statSections} />
             <Stat value={`${styleCount}`} label={s.statStyles} />
             <Stat value={`${categories.length}`} label={s.statCategories} />
diff --git a/src/components/GalleryView.tsx b/src/components/GalleryView.tsx
index 72fbdd9..57711a5 100644
--- a/src/components/GalleryView.tsx
+++ b/src/components/GalleryView.tsx
@@ -9,10 +9,19 @@ import {
 import { Loader2, Star } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { isFreeComponent } from "@/lib/free";
+import { variantLabel } from "@/lib/variant";
 import type { RegistryEntry } from "@/registry";
 import { tCategory, tName } from "@/registry/i18n";
 import type { Lang } from "@/lib/i18n";
 
+/** プレビューの縮小率（カード幅の 1/scale の広さでコンポーネントを描く） */
+const PREVIEW_SCALE = 0.5;
+
+const COLLECTION_LABEL: Record<Lang, string> = {
+  ja: "コレクション",
+  en: "Collection",
+};
+
 /** ギャラリー内の1枚が落ちても全体を壊さないための境界 */
 class CardBoundary extends Component<
   { children: ReactNode },
@@ -48,8 +57,12 @@ function GalleryCard({
   onToggleFav: (id: string) => void;
 }) {
   const ref = useRef<HTMLDivElement>(null);
+  const frameRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
   const [visible, setVisible] = useState(false);
   const [Comp, setComp] = useState<ComponentType | null>(null);
+  const [offsetY, setOffsetY] = useState(0);
+  const variant = variantLabel(entry);
 
   // 画面に入ったら初めてマウント（460個を一度に読み込まない）
   useEffect(() => {
@@ -79,6 +92,32 @@ function GalleryCard({
     };
   }, [visible, Comp, entry]);
 
+  // 枠より低いコンポーネント（告知バー等）は上端に張り付き、カードが空に見える。
+  // その場合だけ縦中央に置いて、一覧を眺めたときに中身が伝わるようにする。
+  useEffect(() => {
+    if (!Comp || typeof requestAnimationFrame === "undefined") return;
+    const measure = () => {
+      const frame = frameRef.current;
+      const content = contentRef.current;
+      if (!frame || !content) return;
+      const frameHeight = frame.clientHeight;
+      const contentHeight = content.getBoundingClientRect().height;
+      if (!frameHeight || !contentHeight) return;
+      setOffsetY(
+        contentHeight < frameHeight
+          ? Math.round((frameHeight - contentHeight) / 2)
+          : 0
+      );
+    };
+    const raf = requestAnimationFrame(measure);
+    // 遅れて高さが決まるもの（アニメ・遅延表示）のためにもう一度測る
+    const timer = setTimeout(measure, 600);
+    return () => {
+      cancelAnimationFrame(raf);
+      clearTimeout(timer);
+    };
+  }, [Comp]);
+
   return (
     <div ref={ref} className="group">
       <button
@@ -86,11 +125,19 @@ function GalleryCard({
         className="block w-full text-left"
         aria-label={entry.name}
       >
-        <div className="relative h-56 overflow-hidden rounded-xl border bg-background transition-all duration-300 group-hover:-translate-y-1 group-hover:border-primary/40 group-hover:shadow-xl group-hover:shadow-primary/10">
+        {/* 狭い画面ほど枠を低くして、一覧をひと目で走査できるようにする */}
+        <div
+          ref={frameRef}
+          className="relative h-44 overflow-hidden rounded-xl border bg-background transition-all duration-300 group-hover:-translate-y-1 group-hover:border-primary/40 group-hover:shadow-xl group-hover:shadow-primary/10 sm:h-52 lg:h-56"
+        >
           {Comp ? (
             <div
-              className="pointer-events-none absolute left-0 top-0 origin-top-left transition-transform duration-500 group-hover:scale-[0.56]"
-              style={{ transform: "scale(0.5)", width: "200%" }}
+              ref={contentRef}
+              className="pointer-events-none absolute left-0 top-0 origin-top-left transition-transform duration-300"
+              style={{
+                transform: `translateY(${offsetY}px) scale(${PREVIEW_SCALE})`,
+                width: `${100 / PREVIEW_SCALE}%`,
+              }}
             >
               <CardBoundary>
                 <Comp />
@@ -133,6 +180,19 @@ function GalleryCard({
           </div>
           <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
             <span className="truncate">{tCategory(lang, entry.category)}</span>
+            {/* 同名が他にもある時だけ、どちらのものか分かるようコレクション名を出す */}
+            {variant && (
+              <>
+                <span className="opacity-40">·</span>
+                <span
+                  className="shrink-0 rounded bg-muted px-1 font-mono text-[10px] text-foreground/70"
+                  title={`${COLLECTION_LABEL[lang]}: ${variant} · ${entry.id}`}
+                >
+                  <span className="sr-only">{COLLECTION_LABEL[lang]} </span>
+                  {variant}
+                </span>
+              </>
+            )}
             <span className="opacity-40">·</span>
             <span className="shrink-0 opacity-70">React / HTML</span>
           </div>
diff --git a/src/components/LangToggle.tsx b/src/components/LangToggle.tsx
index 11b6f80..5390ede 100644
--- a/src/components/LangToggle.tsx
+++ b/src/components/LangToggle.tsx
@@ -1,7 +1,7 @@
 import { cn } from "@/lib/utils";
 import { LANGS, type Lang } from "@/lib/i18n";
 
-/** 言語切替トグル（JA / EN）。LP・料金では右上固定、スタジオではヘッダー内に置く。 */
+/** 言語切替トグル（JA / EN）。各画面のヘッダー内に置く（重なりを避けるため固定配置はしない）。 */
 export function LangToggle({
   lang,
   setLang,
@@ -14,7 +14,7 @@ export function LangToggle({
   return (
     <div
       className={cn(
-        "flex rounded-full border bg-background/90 p-0.5 backdrop-blur",
+        "flex shrink-0 rounded-full border bg-background/90 p-0.5 backdrop-blur",
         className
       )}
     >
@@ -24,7 +24,8 @@ export function LangToggle({
           onClick={() => setLang(l.id)}
           aria-pressed={lang === l.id}
           className={cn(
-            "rounded-full px-2.5 py-1 text-xs font-semibold transition-colors",
+            // 狭い画面ではヘッダーの他要素と競合するので一段小さくする
+            "rounded-full px-2 py-0.5 text-[11px] font-semibold transition-colors sm:px-2.5 sm:py-1 sm:text-xs",
             lang === l.id
               ? "bg-primary text-primary-foreground"
               : "text-muted-foreground hover:text-foreground"
diff --git a/src/components/Phrased.tsx b/src/components/Phrased.tsx
new file mode 100644
index 0000000..6c4ae96
--- /dev/null
+++ b/src/components/Phrased.tsx
@@ -0,0 +1,32 @@
+import { cn } from "@/lib/utils";
+
+/**
+ * 日本語の見出し・リード文を「文節」で折り返すためのテキスト。
+ *
+ * 日本語は単語の途中でも改行できてしまうため、放っておくと
+ * 「ランディングペ／ージは、」のように意味の切れ目を無視した改行が起きる。
+ * コピー側では折り返してよい位置に `|` を書き、ここで各文節を inline-block の
+ * span に包む。これで改行は文節の境界だけで起きる。
+ *
+ * `|` を含まない文字列（英語コピーなど）はそのまま＝従来どおり単語単位で折り返る。
+ * 文節が枠より広い場合は inline-block 内部で折り返るだけなので、横溢れはしない。
+ */
+export function Phrased({
+  text,
+  className,
+}: {
+  text: string;
+  className?: string;
+}) {
+  const parts = text.split("|");
+  if (parts.length === 1 && !className) return <>{text}</>;
+  return (
+    <>
+      {parts.map((part, i) => (
+        <span key={`${i}-${part}`} className={cn("inline-block", className)}>
+          {part}
+        </span>
+      ))}
+    </>
+  );
+}
diff --git a/src/components/PreviewCanvas.tsx b/src/components/PreviewCanvas.tsx
index 616426b..8acb479 100644
--- a/src/components/PreviewCanvas.tsx
+++ b/src/components/PreviewCanvas.tsx
@@ -28,6 +28,7 @@ import {
 } from "@/lib/plan";
 import type { Lang } from "@/lib/i18n";
 import { tDesc, tName } from "@/registry/i18n";
+import { variantLabel } from "@/lib/variant";
 import type { RegistryEntry } from "@/registry";
 
 type Tab = "preview" | "code" | "vanilla";
@@ -45,6 +46,7 @@ const PREVIEW_COPY = {
     limitReached: `本日のコピー上限（${FREE_DAILY_COPY_LIMIT}回）に達しました。`,
     makeUnlimited: "無制限にする",
     principle: "なぜ効く？ — 設計意図",
+    collection: "コレクション",
     vStatic: "静的",
     vDynamic: "動的",
   },
@@ -59,6 +61,7 @@ const PREVIEW_COPY = {
     limitReached: `Daily copy limit (${FREE_DAILY_COPY_LIMIT}) reached.`,
     makeUnlimited: "Go unlimited",
     principle: "Why it works — design intent",
+    collection: "Collection",
     vStatic: "Static",
     vDynamic: "Dynamic",
   },
@@ -155,6 +158,7 @@ export function PreviewCanvas({
   onUpgrade: () => void;
 }) {
   const c = PREVIEW_COPY[lang];
+  const variant = variantLabel(entry);
   const [tab, setTab] = useState<Tab>("preview");
   const [viewport, setViewport] = useState<Viewport>("desktop");
   const [source, setSource] = useState<string | null>(null);
@@ -234,6 +238,16 @@ export function PreviewCanvas({
             <h2 className="text-lg font-semibold tracking-tight">
               {tName(lang, entry.id, entry.name)}
             </h2>
+            {/* 同名が他にもある時だけ、どちらを見ているか分かるようにする */}
+            {variant && (
+              <span
+                className="rounded bg-muted px-1.5 py-0.5 font-mono text-[11px] text-foreground/70"
+                title={`${c.collection}: ${variant} · ${entry.id}`}
+              >
+                <span className="sr-only">{c.collection} </span>
+                {variant}
+              </span>
+            )}
             {entry.level === "advanced" && (
               <Badge className="bg-violet-500/15 text-violet-500 hover:bg-violet-500/15">
                 {c.advanced}
@@ -249,9 +263,10 @@ export function PreviewCanvas({
             {tDesc(lang, entry.id, entry.description)}
           </p>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="flex flex-wrap items-center gap-2">
+          {/* 幅の切替は狭い画面では意味が薄い上に行が溢れるので畳む */}
           {tab === "preview" && (
-            <div className="flex rounded-md border p-0.5">
+            <div className="hidden rounded-md border p-0.5 sm:flex">
               {(Object.keys(VIEWPORTS) as Viewport[]).map((v) => {
                 const Icon = VIEWPORTS[v].icon;
                 return (
diff --git a/src/lib/vanilla.ts b/src/lib/vanilla.ts
index 045c472..3f263ac 100644
--- a/src/lib/vanilla.ts
+++ b/src/lib/vanilla.ts
@@ -1,5 +1,6 @@
 import { createElement, type ComponentType } from "react";
 import utilsRaw from "./utils.ts?raw";
+import { HEAD_TOKEN_INJECTION } from "./vanillaHead.generated";
 
 /** UI プリミティブの生ソース（name → source）。dynamic 版で同梱する。 */
 const uiRaw = import.meta.glob("../components/ui/*.tsx", {
@@ -59,7 +60,16 @@ export function formatHtml(html: string): string {
   return out.join("\n");
 }
 
-/** そのまま保存して開ける完結HTML（Tailwind CDN 付き）に包む */
+/**
+ * そのまま保存して開ける完結HTML（Tailwind CDN + デザイントークン付き）に包む。
+ *
+ * bg-card / text-muted-foreground などは**このプロジェクト固有のトークン**で、
+ * 素の Tailwind には存在しない。CDN を1行読むだけでは一切当たらず、
+ * bg-card は transparent、text-muted-foreground は真っ黒になる。
+ * そこで書き出しの源流で HEAD_TOKEN_INJECTION を必ず差し込む。
+ * 位置は Tailwind CDN の <script> より**後ろ**（`tailwind.config` は
+ * CDN が定義するグローバルへの代入なので、先に置くと ReferenceError になる）。
+ */
 function wrapDocument(inner: string): string {
   const indented = inner
     .split("\n")
@@ -72,7 +82,7 @@ function wrapDocument(inner: string): string {
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <!-- これ1行で Tailwind のクラスがそのまま効く（ビルド不要） -->
     <script src="https://cdn.tailwindcss.com"></script>
-  </head>
+${HEAD_TOKEN_INJECTION}  </head>
   <body>
 ${indented}
   </body>
@@ -277,7 +287,7 @@ export function generateDynamicVanillaHtml(demoSource: string): string {
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <!-- Tailwind（ビルド不要） -->
     <script src="https://cdn.tailwindcss.com"></script>
-    <!-- TSX をブラウザ内で変換 -->
+${HEAD_TOKEN_INJECTION}    <!-- TSX をブラウザ内で変換 -->
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
     <script type="importmap">
 ${importMap}
diff --git a/src/lib/vanillaHead.generated.ts b/src/lib/vanillaHead.generated.ts
new file mode 100644
index 0000000..55c08ab
--- /dev/null
+++ b/src/lib/vanillaHead.generated.ts
@@ -0,0 +1,120 @@
+// このファイルは scripts/build-vanilla-head.mjs により自動生成されます。直接編集しないでください。
+// 元データ: tailwind.config.js（darkMode / theme.extend）と src/index.css（:root / .dark）
+
+/**
+ * バニラHTML書き出しの <head> に差し込むデザイントークン定義。
+ * 素の Tailwind に無い bg-card / text-muted-foreground などを CDN 版でも
+ * 解決させるための設定（Play CDN 公式の方法）。
+ * Tailwind CDN の <script> より**後ろ**に置くこと。
+ */
+export const HEAD_TOKEN_INJECTION = `    <!-- このコンポーネント集のデザイントークン。
+         bg-card / text-muted-foreground などは素の Tailwind には無いので、
+         CDN に設定を渡して定義する（Play CDN 公式の方法）。 -->
+    <script>
+      tailwind.config = {
+        "darkMode": "class",
+        "theme": {
+          "extend": {
+            "fontFamily": {
+              "mincho": [
+                "\\"Shippori Mincho\\"",
+                "\\"Noto Serif JP\\"",
+                "serif"
+              ],
+              "display": [
+                "\\"Playfair Display\\"",
+                "ui-serif",
+                "Georgia",
+                "serif"
+              ],
+              "rounded": [
+                "\\"M PLUS Rounded 1c\\"",
+                "ui-rounded",
+                "\\"Hiragino Maru Gothic ProN\\"",
+                "sans-serif"
+              ]
+            },
+            "colors": {
+              "border": "hsl(var(--border))",
+              "input": "hsl(var(--input))",
+              "ring": "hsl(var(--ring))",
+              "background": "hsl(var(--background))",
+              "foreground": "hsl(var(--foreground))",
+              "primary": {
+                "DEFAULT": "hsl(var(--primary))",
+                "foreground": "hsl(var(--primary-foreground))"
+              },
+              "secondary": {
+                "DEFAULT": "hsl(var(--secondary))",
+                "foreground": "hsl(var(--secondary-foreground))"
+              },
+              "destructive": {
+                "DEFAULT": "hsl(var(--destructive))",
+                "foreground": "hsl(var(--destructive-foreground))"
+              },
+              "muted": {
+                "DEFAULT": "hsl(var(--muted))",
+                "foreground": "hsl(var(--muted-foreground))"
+              },
+              "accent": {
+                "DEFAULT": "hsl(var(--accent))",
+                "foreground": "hsl(var(--accent-foreground))"
+              },
+              "card": {
+                "DEFAULT": "hsl(var(--card))",
+                "foreground": "hsl(var(--card-foreground))"
+              }
+            },
+            "borderRadius": {
+              "lg": "var(--radius)",
+              "md": "calc(var(--radius) - 2px)",
+              "sm": "calc(var(--radius) - 4px)"
+            }
+          }
+        }
+      };
+    </script>
+    <style>
+      :root {
+        --background: 0 0% 100%;
+        --foreground: 240 10% 3.9%;
+        --card: 0 0% 100%;
+        --card-foreground: 240 10% 3.9%;
+        --primary: 243 75% 59%;
+        --primary-foreground: 0 0% 98%;
+        --secondary: 240 4.8% 95.9%;
+        --secondary-foreground: 240 5.9% 10%;
+        --muted: 240 4.8% 95.9%;
+        --muted-foreground: 240 3.8% 46.1%;
+        --accent: 240 4.8% 95.9%;
+        --accent-foreground: 240 5.9% 10%;
+        --destructive: 0 84.2% 48.9%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 240 5.9% 90%;
+        --input: 240 5.9% 60.3%;
+        --ring: 243 75% 59%;
+        --radius: 0.6rem;
+      }
+      .dark {
+        --background: 240 10% 3.9%;
+        --foreground: 0 0% 98%;
+        --card: 240 8% 6%;
+        --card-foreground: 0 0% 98%;
+        --primary: 243 75% 66.5%;
+        --primary-foreground: 240 10% 3.9%;
+        --secondary: 240 3.7% 15.9%;
+        --secondary-foreground: 0 0% 98%;
+        --muted: 240 3.7% 13%;
+        --muted-foreground: 240 5% 64.9%;
+        --accent: 240 3.7% 15.9%;
+        --accent-foreground: 0 0% 98%;
+        --destructive: 0 62.8% 56.3%;
+        --destructive-foreground: 0 60% 7.3%;
+        --border: 240 3.7% 17%;
+        --input: 240 3.7% 38.4%;
+        --ring: 243 75% 65%;
+      }
+      * { border-color: hsl(var(--border)); }
+      body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }
+    </style>
+`;
diff --git a/src/lib/vanillaHead.test.ts b/src/lib/vanillaHead.test.ts
new file mode 100644
index 0000000..f737474
--- /dev/null
+++ b/src/lib/vanillaHead.test.ts
@@ -0,0 +1,156 @@
+import { existsSync, readFileSync, readdirSync } from "node:fs";
+import { resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { createElement } from "react";
+import { buildHeadInjection } from "../../scripts/build-vanilla-head.mjs";
+import { HEAD_TOKEN_INJECTION } from "./vanillaHead.generated";
+import { generateVanillaHtml, generateDynamicVanillaHtml } from "./vanilla";
+
+/**
+ * 書き出しHTMLのデザイントークン注入を固定する検査。
+ *
+ * bg-card / text-muted-foreground などはこのプロジェクト固有のトークンで、
+ * 素の Tailwind には無い。CDN を1行読むだけの HTML では bg-card が transparent、
+ * text-muted-foreground が真っ黒になるため、書き出しの源流で必ず注入する。
+ * ここが崩れると「コピペしてそのまま使える」が成立しない。
+ *
+ * `vanillaHead.generated.ts` は tailwind.config.js / src/index.css からの派生物なので、
+ * freeIds.ts と同様に元データから組み直して突き合わせ、黙って腐らないようにする。
+ */
+
+const ROOT = resolve(process.cwd());
+
+describe("vanillaHead.generated.ts が元データとずれていない", () => {
+  it("tailwind.config.js と src/index.css から組み直した内容と一致する", async () => {
+    expect(HEAD_TOKEN_INJECTION).toBe(await buildHeadInjection(ROOT));
+  });
+
+  it("src/index.css の CSS 変数を全て持っている", () => {
+    const css = readFileSync(resolve(ROOT, "src/index.css"), "utf-8");
+    const vars = [...css.matchAll(/^\s*(--[\w-]+):/gm)].map((m) => m[1]);
+    expect(vars.length).toBeGreaterThan(15);
+    for (const v of new Set(vars)) {
+      expect(HEAD_TOKEN_INJECTION, `${v} が注入に含まれていない`).toContain(`${v}:`);
+    }
+  });
+
+  it("素の Tailwind に無い色トークンを tailwind.config で定義している", () => {
+    for (const token of ["card", "muted-foreground", "background", "foreground", "border"]) {
+      expect(HEAD_TOKEN_INJECTION).toContain(token);
+    }
+    expect(HEAD_TOKEN_INJECTION).toContain("tailwind.config = {");
+    expect(HEAD_TOKEN_INJECTION).toContain('"darkMode": "class"');
+  });
+});
+
+/** 固有トークンだけで組んだ、書き出し対象のダミー部品 */
+function TokenCard() {
+  return createElement(
+    "div",
+    { className: "bg-card text-card-foreground border-border rounded-lg border p-6" },
+    createElement("p", { className: "text-muted-foreground" }, "説明文")
+  );
+}
+
+describe("バニラHTML書き出しにトークン定義が入る", () => {
+  it("generateVanillaHtml の出力に tailwind.config と :root の CSS 変数が含まれる", async () => {
+    const html = await generateVanillaHtml(TokenCard);
+    expect(html).toContain("https://cdn.tailwindcss.com");
+    expect(html).toContain("tailwind.config = {");
+    expect(html).toContain(":root {");
+    expect(html).toContain("--card:");
+    expect(html).toContain("--muted-foreground:");
+    expect(html).toContain(".dark {");
+  });
+
+  it("固有トークンを使う部品を書き出しても、そのトークンが定義済みになっている", async () => {
+    const html = await generateVanillaHtml(TokenCard);
+    const body = html.slice(html.indexOf("<body"));
+    // 部品側は固有トークンのクラスを使っている
+    expect(body).toContain("bg-card");
+    expect(body).toContain("text-muted-foreground");
+    // その定義が <head> 側に揃っている
+    const head = html.slice(0, html.indexOf("</head>"));
+    expect(head).toContain('"card"');
+    expect(head).toContain('"muted"');
+    expect(head).toContain("--card-foreground:");
+  });
+
+  it("tailwind.config への代入は CDN の <script> より後ろにある", async () => {
+    const html = await generateVanillaHtml(TokenCard);
+    expect(html.indexOf("cdn.tailwindcss.com")).toBeLessThan(
+      html.indexOf("tailwind.config =")
+    );
+  });
+
+  it("dynamic 版（動くHTML）にも同じ注入が入る", () => {
+    const html = generateDynamicVanillaHtml(
+      `export default function D() { return <div className="bg-card" />; }`
+    );
+    expect(html).toContain("tailwind.config = {");
+    expect(html).toContain("--muted-foreground:");
+    expect(html.indexOf("cdn.tailwindcss.com")).toBeLessThan(
+      html.indexOf("tailwind.config =")
+    );
+  });
+
+  it("注入は1回だけ（二重注入していない）", async () => {
+    const html = await generateVanillaHtml(TokenCard);
+    expect(html.split("tailwind.config =").length - 1).toBe(1);
+    expect(html.split(":root {").length - 1).toBe(1);
+  });
+
+  it("素のマークアップ自体は注入で変わらない", async () => {
+    const html = await generateVanillaHtml(TokenCard);
+    const body = html.slice(html.indexOf("<body"), html.indexOf("</body>"));
+    expect(body).not.toContain("tailwind.config");
+    expect(renderToStaticMarkup(createElement(TokenCard))).toContain("bg-card");
+  });
+});
+
+/**
+ * 生成物のドリフト検査。
+ * 静的HTML（public/html）と MCP バンドルは `npm run html` / `npm run mcp:bundle`
+ * で作り直す派生物なので、トークンを直したのに作り直し忘れると、配る側だけ
+ * 古い（＝色が出ない）状態で出荷されうる。ここで作り直し漏れを止める。
+ */
+describe("生成物にトークン定義が行き渡っている", () => {
+  const bundle = JSON.parse(
+    readFileSync(resolve(ROOT, "mcp/data/components.json"), "utf-8")
+  ) as { included: number; items: { id: string; html: string | null }[] };
+  const withHtml = bundle.items.filter((i) => i.html !== null);
+  const REBUILD = "npm run html && npm run mcp:bundle で作り直してください";
+
+  it("mcp/data/components.json の全アイテムの HTML が注入済み", () => {
+    expect(withHtml.length).toBeGreaterThan(0);
+    const notInjected = withHtml.filter((i) => !i.html?.includes("tailwind.config"));
+    expect(notInjected.map((i) => i.id), `未注入 ${notInjected.length} 件。${REBUILD}`).toEqual(
+      []
+    );
+  });
+
+  it("その注入が現在の HEAD_TOKEN_INJECTION と同一（トークン変更の取り込み漏れが無い）", () => {
+    const stale = withHtml.filter((i) => !i.html?.includes(HEAD_TOKEN_INJECTION));
+    expect(
+      stale.map((i) => i.id).slice(0, 5),
+      `${stale.length} 件が古いトークン定義のままです。${REBUILD}`
+    ).toEqual([]);
+  });
+
+  it("public/html を生成済みなら、そちらも全件注入済み", () => {
+    // public/html は .gitignore 対象（npm run html の生成物）なので、
+    // 未生成の環境ではこの検査を飛ばす。
+    const dir = resolve(ROOT, "public/html");
+    if (!existsSync(dir)) return;
+    const files = readdirSync(dir).filter((f) => f.endsWith(".html"));
+    expect(files.length).toBeGreaterThan(0);
+    const notInjected = files.filter(
+      (f) => !readFileSync(resolve(dir, f), "utf-8").includes(HEAD_TOKEN_INJECTION)
+    );
+    expect(
+      notInjected.slice(0, 5),
+      `${notInjected.length} / ${files.length} 件が未注入または古い。${REBUILD}`
+    ).toEqual([]);
+  });
+});
diff --git a/src/lib/variant.ts b/src/lib/variant.ts
new file mode 100644
index 0000000..4bcd4ae
--- /dev/null
+++ b/src/lib/variant.ts
@@ -0,0 +1,37 @@
+import { registry, type RegistryEntry } from "@/registry";
+
+/**
+ * 同名コンポーネントを見分けるための短い識別子。
+ *
+ * 880個のうち26種の名前が重複している（例「オーロラ・ヒーロー」×2、
+ * 「コマンドパレット」×3）。一覧に同じ名前が並ぶとどちらを選べばよいか
+ * 分からないので、**重複しているものだけ** どのコレクション
+ * （`demos/` 直下のフォルダ）由来かを名前に添える。
+ * 重複が無ければ null＝表示は今までどおり。
+ *
+ * 判定は日本語名（レジストリの name）で行う。ID と 1:1 に対応する翻訳名でも
+ * 同じ組が重複するため、言語ごとに結果が変わらない方が一覧として安定する。
+ */
+const DUPLICATED_NAMES: ReadonlySet<string> = (() => {
+  const seen = new Set<string>();
+  const duplicated = new Set<string>();
+  for (const entry of registry) {
+    if (seen.has(entry.name)) duplicated.add(entry.name);
+    else seen.add(entry.name);
+  }
+  return duplicated;
+})();
+
+/** "./demos/hero2/AuroraHero.tsx" → "hero2"（demos 直下は null） */
+function collectionOf(path: string): string | null {
+  const matched = /^\.\/demos\/(.+)\/[^/]+$/.exec(path);
+  return matched ? matched[1] : null;
+}
+
+/** 同名が他にある場合だけ、区別用のコレクション名を返す */
+export function variantLabel(
+  entry: Pick<RegistryEntry, "name" | "path">
+): string | null {
+  if (!DUPLICATED_NAMES.has(entry.name)) return null;
+  return collectionOf(entry.path);
+}
diff --git a/src/pages/Landing.tsx b/src/pages/Landing.tsx
index 452779a..1677a78 100644
--- a/src/pages/Landing.tsx
+++ b/src/pages/Landing.tsx
@@ -34,6 +34,8 @@ import {
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { LangToggle } from "@/components/LangToggle";
+import { Phrased } from "@/components/Phrased";
 import { cn } from "@/lib/utils";
 import { getPlans } from "@/lib/plan";
 // 数字だけ要るので、ID 一覧を巻き込まないよう生成物から直接読む（LP の初期チャンク対策）
@@ -230,11 +232,15 @@ const HERO_THEMES: HeroThemeDef[] = [
 const COPY = {
   ja: {
     brand: "LP Section Studio",
+    // 狭いヘッダー用の短縮ブランド名
+    brandShort: "LP Studio",
     navFeatures: "機能",
     navPricing: "料金",
     navStudio: "スタジオ",
     navOpenStudio: "スタジオを開く",
     ctaTryFree: "無料で使ってみる",
+    // 狭いヘッダー用の短いラベル
+    ctaTryFreeShort: "無料で試す",
     ctaSeePricing: "料金を見る",
     backToTop: "上に戻る",
 
@@ -246,10 +252,10 @@ const COPY = {
 
     heroBadge: "完全自己完結・追加依存ゼロ",
     heroFocalCaption: "ライブ・プレビュー：これも一覧から1クリック",
-    heroTitleLead: "ランディングページは、",
-    heroTitleHighlight: "“組み立てる”時代へ。",
+    heroTitleLead: "ランディング|ページは、",
+    heroTitleHighlight: "“組み立てる”|時代へ。",
     heroSub:
-      "コピペできる本物のLPセクションと、動く3Dパーツ。検索して、選んで、貼るだけ。LPを完成させる部品が、ぜんぶここにある。",
+      "コピペできる本物の|LPセクションと、|動く3Dパーツ。|検索して、選んで、貼るだけ。|LPを完成させる部品が、|ぜんぶここにある。",
 
     statSections: "セクション",
     statStyles: "スタイル",
@@ -271,8 +277,8 @@ const COPY = {
     ],
 
     howBadge: "使い方",
-    howHeading: "3ステップで、貼るだけ。",
-    howSub: "迷う余地をなくしました。選んで、取り込んで、貼る。それだけ。",
+    howHeading: "3ステップで、|貼るだけ。",
+    howSub: "迷う余地をなくしました。|選んで、取り込んで、貼る。|それだけ。",
     how: [
       {
         title: "一覧から選ぶ",
@@ -290,10 +296,10 @@ const COPY = {
     howStepTags: ["コピペ", "npx shadcn add", "バニラHTML"],
 
     dogfoodBadge: "ライブ・プレビュー",
-    dogfoodHeading: "動く。本物の3D。ぜんぶ一覧から。",
-    dogfoodBodyA: "下に並んでいるのは、すべてライブラリ内の",
-    dogfoodBodyStrong: "本物の3Dコンポーネント",
-    dogfoodBodyB: "。このLP自体が、この一覧でできています。",
+    dogfoodHeading: "動く。|本物の3D。|ぜんぶ一覧から。",
+    dogfoodBodyA: "下に並んでいるのは、|すべてライブラリ内の",
+    dogfoodBodyStrong: "本物の3Dコンポーネント。",
+    dogfoodBodyB: "このLP自体が、|この一覧でできています。",
     dogfoodCaption: "ライブ・プレビュー：これも一覧から1クリックで使えます",
 
     dogfood: {
@@ -307,9 +313,9 @@ const COPY = {
     },
 
     perfBadge: "パフォーマンス",
-    perfHeading: "速い。軽い。SEOに強い。",
+    perfHeading: "速い。軽い。|SEOに強い。",
     perfSub:
-      "CSS中心の設計だから、フレームワーク無しでも動く。中身はHTMLにあるので、そのままクローラブル。",
+      "CSS中心の設計だから、|フレームワーク無しでも動く。|中身はHTMLにあるので、|そのままクローラブル。",
     perfCards: [
       {
         title: "フレームワーク不要で軽い",
@@ -342,8 +348,9 @@ const COPY = {
       "※ 動く3DはCSSアニメ中心。canvas等のJS必須パーツも中身はHTMLにあるので“プログレッシブ・エンハンス”。動的バニラ（React再現）は別用途です。",
 
     featuresBadge: "選ばれる理由",
-    featuresHeading: "なぜ、これを選ぶのか。",
-    featuresSub: "速さと品質を両立し、人の「決め手」に寄り添うように作られています。",
+    featuresHeading: "なぜ、|これを選ぶのか。",
+    featuresSub:
+      "速さと品質を両立し、|人の「決め手」に|寄り添うように作られています。",
     features: [
       {
         title: "時間を買う",
@@ -372,8 +379,9 @@ const COPY = {
     ],
 
     stylesBadge: "スタイル＆3D",
-    stylesHeading: "13の世界観＋動く3D。",
-    stylesSub: "同じセクションでも、テーマを変えればブランドの空気がまるごと変わる。",
+    stylesHeading: "13の世界観＋|動く3D。",
+    stylesSub:
+      "同じセクションでも、|テーマを変えれば|ブランドの空気がまるごと変わる。",
     styleNames: [
       "和風",
       "洋風",
@@ -392,7 +400,7 @@ const COPY = {
     style3dName: "3Dアニメ",
 
     testimonialsBadge: "評価",
-    testimonialsHeading: "AIも、その品質を認めた。",
+    testimonialsHeading: "AIも、|その品質を認めた。",
     testimonials: [
       {
         quote:
@@ -405,9 +413,9 @@ const COPY = {
     ],
 
     pricingBadge: "料金",
-    pricingHeading: "¥0からはじめて、必要なときに。",
+    pricingHeading: "¥0からはじめて、|必要なときに。",
     pricingSub:
-      "個人の試用から、チームの制作現場まで。無料版と買い切り版の2つだけです。",
+      "個人の試用から、|チームの制作現場まで。|無料版と買い切り版の|2つだけです。",
     pricingRecommended: "おすすめ",
     pricingChoose: "選ぶ",
     pricingSeeDetails: "料金の詳細を見る",
@@ -442,9 +450,9 @@ const COPY = {
     ],
 
     finalBadge: "登録不要・今すぐ",
-    finalHeading: "次の LP、今日のうちに公開しよう。",
+    finalHeading: "次の LP、|今日のうちに|公開しよう。",
     finalSubA: "登録不要で、すぐに ",
-    finalSubB: " のセクションと3Dをライブプレビュー。",
+    finalSubB: " のセクションと3Dを|ライブプレビュー。",
 
     footerTaglineLead: "LP を完成させる、",
     footerTaglineTail: " のコピペ可能なセクションと3Dパーツ。",
@@ -459,11 +467,13 @@ const COPY = {
   },
   en: {
     brand: "LP Section Studio",
+    brandShort: "LP Studio",
     navFeatures: "Features",
     navPricing: "Pricing",
     navStudio: "Studio",
     navOpenStudio: "Open Studio",
     ctaTryFree: "Try it free",
+    ctaTryFreeShort: "Try free",
     ctaSeePricing: "See pricing",
     backToTop: "Back to top",
 
@@ -697,11 +707,14 @@ const COPY = {
 export default function Landing({
   stats,
   lang = "ja",
+  setLang,
   onOpenStudio,
   onOpenPricing,
 }: {
   stats: { components: number; styles: number; categories: number };
   lang?: Lang;
+  /** 渡されたときだけヘッダーに言語切替を出す（テスト等の簡易利用では省略可） */
+  setLang?: (l: Lang) => void;
   onOpenStudio: () => void;
   onOpenPricing: () => void;
 }) {
@@ -998,13 +1011,22 @@ export default function Landing({
             scrolled ? "h-14" : "h-16"
           )}
         >
-          <a href="#top" className="group flex items-center gap-2 font-bold tracking-tight">
-            <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-violet-600 to-indigo-600 text-white transition-transform duration-300 group-hover:rotate-6 motion-reduce:transition-none motion-reduce:group-hover:rotate-0">
+          <a
+            href="#top"
+            className="group flex min-w-0 items-center gap-2 font-bold tracking-tight"
+          >
+            <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-violet-600 to-indigo-600 text-white transition-transform duration-300 group-hover:rotate-6 motion-reduce:transition-none motion-reduce:group-hover:rotate-0">
               <Boxes className="h-4 w-4" />
             </span>
-            <span className="text-base sm:text-lg">{t.brand}</span>
+            {/* 狭い画面では短縮名。フル名と CTA と言語切替を1行に収めるため */}
+            <span className="truncate text-base sm:hidden">
+              {t.brandShort}
+            </span>
+            <span className="hidden truncate sm:inline sm:text-lg">
+              {t.brand}
+            </span>
           </a>
-          <div className="flex items-center gap-1 sm:gap-3">
+          <div className="flex shrink-0 items-center gap-1 sm:gap-3">
             <a
               href="#features"
               className="hidden rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground sm:inline-block"
@@ -1024,8 +1046,11 @@ export default function Landing({
             >
               {t.navStudio}
             </a>
-            <Button onClick={onOpenStudio} className="gap-2">
-              {t.ctaTryFree}
+            {/* 言語切替はヘッダー内に置く（固定配置だと CTA に重なる） */}
+            {setLang && <LangToggle lang={lang} setLang={setLang} />}
+            <Button onClick={onOpenStudio} className="gap-2 px-3 sm:px-4">
+              <span className="sm:hidden">{t.ctaTryFreeShort}</span>
+              <span className="hidden sm:inline">{t.ctaTryFree}</span>
               <ArrowRight className="h-4 w-4" />
             </Button>
           </div>
@@ -1081,11 +1106,12 @@ export default function Landing({
             className="pointer-events-none absolute inset-0 -z-10 transition-opacity duration-300"
           />
 
-          <div className="mx-auto max-w-6xl px-4 pb-16 pt-20 text-center sm:px-6 sm:pb-24 sm:pt-28">
+          {/* 狭い画面では上余白を詰め、ファーストビューに見出しとCTAを収める */}
+          <div className="mx-auto max-w-6xl px-4 pb-14 pt-10 text-center sm:px-6 sm:pb-24 sm:pt-20 lg:pt-28">
             <Badge
               variant="secondary"
               className={cn(
-                "mb-6 gap-1.5 px-3 py-1 text-xs",
+                "mb-5 gap-1.5 px-3 py-1 text-xs",
                 theme.dark && "border-white/15 bg-white/10 text-slate-100"
               )}
             >
@@ -1093,24 +1119,27 @@ export default function Landing({
               {t.heroBadge}
             </Badge>
 
-            <h1 className="mx-auto max-w-3xl text-5xl font-bold leading-[1.05] tracking-tight sm:text-7xl">
-              {t.heroTitleLead}
-              <br className="hidden sm:block" />
-              <span className={cn("lp-shimmer inline-block", theme.headline)}>
-                {t.heroTitleHighlight}
-              </span>
+            {/* 見出しは文節単位（Phrased）で折り返す。単語途中で切れないよう
+                max-w も1行が収まる幅にしてある。 */}
+            <h1 className="mx-auto max-w-4xl text-4xl font-bold leading-[1.15] tracking-tight sm:text-6xl sm:leading-[1.08] lg:text-7xl">
+              <Phrased text={t.heroTitleLead} />
+              <br />
+              <Phrased
+                text={t.heroTitleHighlight}
+                className={cn("lp-shimmer", theme.headline)}
+              />
             </h1>
 
             <p
               className={cn(
-                "mx-auto mt-6 max-w-2xl text-balance text-lg sm:text-xl",
+                "mx-auto mt-5 max-w-2xl text-balance text-base sm:mt-6 sm:text-xl",
                 theme.dark ? "text-slate-300" : "text-muted-foreground"
               )}
             >
-              {stats.components}+ / {t.heroSub}
+              {stats.components}+ / <Phrased text={t.heroSub} />
             </p>
 
-            <div className="mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row">
+            <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
               <Button
                 size="lg"
                 onClick={onOpenStudio}
@@ -1256,9 +1285,11 @@ export default function Landing({
               {t.howBadge}
             </Badge>
             <h2 className="text-3xl font-bold tracking-tight sm:text-5xl">
-              {t.howHeading}
+              <Phrased text={t.howHeading} />
             </h2>
-            <p className="mt-4 text-muted-foreground">{t.howSub}</p>
+            <p className="mt-4 text-muted-foreground">
+              <Phrased text={t.howSub} />
+            </p>
           </Reveal>
 
           <ol className="mt-14 grid gap-6 md:grid-cols-3">
@@ -1301,12 +1332,12 @@ export default function Landing({
                 {t.dogfoodBadge}
               </Badge>
               <h2 className="text-3xl font-bold tracking-tight sm:text-5xl">
-                {t.dogfoodHeading}
+                <Phrased text={t.dogfoodHeading} />
               </h2>
               <p className="mt-4 text-muted-foreground">
-                {t.dogfoodBodyA}
-                <strong>{t.dogfoodBodyStrong}</strong>
-                {t.dogfoodBodyB}
+                <Phrased text={t.dogfoodBodyA} />
+                <strong className="inline-block">{t.dogfoodBodyStrong}</strong>
+                <Phrased text={t.dogfoodBodyB} />
               </p>
             </Reveal>
 
@@ -1360,9 +1391,11 @@ export default function Landing({
               {t.perfBadge}
             </Badge>
             <h2 className="text-3xl font-bold tracking-tight sm:text-5xl">
-              {t.perfHeading}
+              <Phrased text={t.perfHeading} />
             </h2>
-            <p className="mt-4 text-balance text-muted-foreground">{t.perfSub}</p>
+            <p className="mt-4 text-balance text-muted-foreground">
+              <Phrased text={t.perfSub} />
+            </p>
           </Reveal>
 
           <div className="mt-14 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
@@ -1455,9 +1488,11 @@ export default function Landing({
               {t.featuresBadge}
             </Badge>
             <h2 className="text-3xl font-bold tracking-tight sm:text-5xl">
-              {t.featuresHeading}
+              <Phrased text={t.featuresHeading} />
             </h2>
-            <p className="mt-4 text-muted-foreground">{t.featuresSub}</p>
+            <p className="mt-4 text-muted-foreground">
+              <Phrased text={t.featuresSub} />
+            </p>
           </Reveal>
 
           <div className="mt-14 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
@@ -1496,9 +1531,11 @@ export default function Landing({
                 {t.stylesBadge}
               </Badge>
               <h2 className="text-3xl font-bold tracking-tight sm:text-5xl">
-                {t.stylesHeading}
+                <Phrased text={t.stylesHeading} />
               </h2>
-              <p className="mt-4 text-muted-foreground">{t.stylesSub}</p>
+              <p className="mt-4 text-muted-foreground">
+                <Phrased text={t.stylesSub} />
+              </p>
             </Reveal>
 
             <ul className="mt-14 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
@@ -1549,7 +1586,7 @@ export default function Landing({
               {t.testimonialsBadge}
             </Badge>
             <h2 className="text-3xl font-bold tracking-tight sm:text-5xl">
-              {t.testimonialsHeading}
+              <Phrased text={t.testimonialsHeading} />
             </h2>
           </Reveal>
 
@@ -1596,9 +1633,11 @@ export default function Landing({
                 {t.pricingBadge}
               </Badge>
               <h2 className="text-3xl font-bold tracking-tight sm:text-5xl">
-                {t.pricingHeading}
+                <Phrased text={t.pricingHeading} />
               </h2>
-              <p className="mt-4 text-muted-foreground">{t.pricingSub}</p>
+              <p className="mt-4 text-muted-foreground">
+                <Phrased text={t.pricingSub} />
+              </p>
             </Reveal>
 
             <div className="mt-14 grid items-start gap-6 lg:grid-cols-3">
@@ -1709,12 +1748,12 @@ export default function Landing({
                 {t.finalBadge}
               </Badge>
               <h2 className="mx-auto max-w-2xl text-3xl font-bold tracking-tight sm:text-5xl">
-                {t.finalHeading}
+                <Phrased text={t.finalHeading} />
               </h2>
               <p className="mx-auto mt-4 max-w-xl text-white/80">
                 {t.finalSubA}
                 {stats.components}+
-                {t.finalSubB}
+                <Phrased text={t.finalSubB} />
               </p>
               <div className="mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row">
                 <Button
diff --git a/src/pages/Pricing.tsx b/src/pages/Pricing.tsx
index 03742d8..1860900 100644
--- a/src/pages/Pricing.tsx
+++ b/src/pages/Pricing.tsx
@@ -17,6 +17,8 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
+import { LangToggle } from "@/components/LangToggle";
+import { Phrased } from "@/components/Phrased";
 import { getPlans, getComparison, type PlanId } from "@/lib/plan";
 import type { Lang } from "@/lib/i18n";
 
@@ -52,9 +54,9 @@ const COPY: { ja: Copy; en: Copy } = {
   ja: {
     back: "スタジオに戻る",
     badgeSections: "880 コンポーネント",
-    title: "買い切り。月額はありません。",
+    title: "買い切り。|月額はありません。",
     subcopy:
-      "一度払えば終わりです。追加も更新も無料で、解約というものがありません。",
+      "一度払えば終わりです。|追加も更新も無料で、|解約というものがありません。",
     free: "¥0",
     oneTime: "買い切り",
     usdNote: (u) => `およそ $${u}`,
@@ -68,7 +70,7 @@ const COPY: { ja: Copy; en: Copy } = {
     noAria: "なし",
     compareTitle: "無料版と買い切り版の違い",
     compareSubtitle:
-      "無料版でも 880 個すべてをブラウザで見られます。違うのは「取り出せる数」です。",
+      "無料版でも 880 個すべてを|ブラウザで見られます。|違うのは「取り出せる数」です。",
     featureCol: "項目",
     faqTitle: "よくある質問",
     faq: [
@@ -99,7 +101,7 @@ const COPY: { ja: Copy; en: Copy } = {
     ],
     ctaTitle: "まず無料の MCP から。",
     ctaSubcopy:
-      "100 個をそのまま使えます。すべて React 不要のものなので、違いはすぐ分かります。",
+      "100 個をそのまま使えます。|すべて React 不要のものなので、|違いはすぐ分かります。",
     ctaButton: "スタジオを開く",
   },
   en: {
@@ -182,11 +184,14 @@ function CompareCell({
 export default function Pricing({
   currentPlan,
   lang = "ja",
+  setLang,
   onChoosePlan,
   onOpenStudio,
 }: {
   currentPlan: PlanId;
   lang?: Lang;
+  /** 渡されたときだけヘッダーに言語切替を出す（テスト等の簡易利用では省略可） */
+  setLang?: (l: Lang) => void;
   onChoosePlan: (p: PlanId) => void;
   onOpenStudio: () => void;
 }) {
@@ -202,8 +207,8 @@ export default function Pricing({
           aria-hidden
           className="pointer-events-none absolute inset-0 bg-[radial-gradient(60%_60%_at_50%_0%,theme(colors.violet.500/0.14),transparent_70%)]"
         />
-        <div className="relative mx-auto max-w-6xl px-6 pb-16 pt-10">
-          <div className="mb-10 flex items-center justify-between">
+        <div className="relative mx-auto max-w-6xl px-4 pb-12 pt-6 sm:px-6 sm:pb-16 sm:pt-10">
+          <div className="mb-8 flex items-center justify-between gap-2 sm:mb-10">
             <Button
               variant="ghost"
               size="sm"
@@ -213,26 +218,32 @@ export default function Pricing({
               <ArrowLeft className="mr-1.5 h-4 w-4" />
               {t.back}
             </Button>
-            <Badge
-              variant="secondary"
-              className="gap-1.5 border-violet-500/20 bg-violet-500/10 text-violet-600 dark:text-violet-300"
-            >
-              <Sparkles className="h-3.5 w-3.5" />
-              {t.badgeSections}
-            </Badge>
+            <div className="flex items-center gap-2">
+              <Badge
+                variant="secondary"
+                className="hidden gap-1.5 border-violet-500/20 bg-violet-500/10 text-violet-600 dark:text-violet-300 sm:inline-flex"
+              >
+                <Sparkles className="h-3.5 w-3.5" />
+                {t.badgeSections}
+              </Badge>
+              {/* 言語切替はヘッダー内に置く（固定配置だと他の要素に重なる） */}
+              {setLang && <LangToggle lang={lang} setLang={setLang} />}
+            </div>
           </div>
 
           <div className="mx-auto max-w-2xl text-center">
             <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
-              {t.title}
+              <Phrased text={t.title} />
             </h1>
-            <p className="mt-4 text-lg text-muted-foreground">{t.subcopy}</p>
+            <p className="mt-4 text-lg text-muted-foreground">
+              <Phrased text={t.subcopy} />
+            </p>
           </div>
         </div>
       </header>
 
       {/* Pricing cards */}
-      <section className="mx-auto max-w-4xl px-6 py-14">
+      <section className="mx-auto max-w-4xl px-4 py-10 sm:px-6 sm:py-14">
         <div className="grid items-start gap-6 md:grid-cols-2">
           {plans.map((plan) => {
             const isFree = plan.id === "free";
@@ -301,9 +312,12 @@ export default function Pricing({
 
                 <CardFooter>
                   {isCurrent ? (
-                    <Button disabled className="w-full" variant="secondary">
+                    // 「利用中」は押せない状態ではなく状態表示。無効ボタン
+                    // （opacity-50）だとライトテーマで読みにくいので静的な印にする
+                    <p className="flex w-full items-center justify-center gap-1.5 rounded-md border border-primary/30 bg-primary/5 px-4 py-2 text-sm font-medium text-primary">
+                      <Check className="h-4 w-4" aria-hidden />
                       {t.currentPlan}
-                    </Button>
+                    </p>
                   ) : (
                     <Button
                       className="w-full"
@@ -334,7 +348,7 @@ export default function Pricing({
             {t.compareTitle}
           </h2>
           <p className="mt-2 text-sm text-muted-foreground">
-            {t.compareSubtitle}
+            <Phrased text={t.compareSubtitle} />
           </p>
         </div>
 
@@ -418,9 +432,11 @@ export default function Pricing({
       {/* Bottom CTA band */}
       <section className="border-t bg-muted/30">
         <div className="mx-auto max-w-4xl px-6 py-16 text-center">
-          <h2 className="text-3xl font-bold tracking-tight">{t.ctaTitle}</h2>
+          <h2 className="text-3xl font-bold tracking-tight">
+            <Phrased text={t.ctaTitle} />
+          </h2>
           <p className="mx-auto mt-3 max-w-xl text-muted-foreground">
-            {t.ctaSubcopy}
+            <Phrased text={t.ctaSubcopy} />
           </p>
           <div className="mt-8">
             <Button size="lg" onClick={onOpenStudio} className="gap-2">