Keep the demo page's body style out of the package

TEMPLATE.md

@@ -133,7 +133,7 @@ yarn dev
 | `index.html` | Demo HTML entry |
 | `.gitignore` | Git ignore patterns |
 | `src/shims-vue.d.ts` | Vue type definitions |
-| `src/style.css` | Base styles |
+| `src/style.css` | Tailwind entry, shipped as `dist/style.css` into the host's page: no `body`/`html` styles |
 | `demo/main.ts` | Demo entry point |
 | `demo/App.vue` | Demo test UI (generic) |
 | `src/index.ts` | Plugin entry point |
@@ -614,7 +614,7 @@ yarn dev
 | `index.html` | デモHTMLエントリ |
 | `.gitignore` | Git除外パターン |
 | `src/shims-vue.d.ts` | Vue型定義 |
-| `src/style.css` | 基本スタイル |
+| `src/style.css` | Tailwind のエントリ。`dist/style.css` としてホストのページに読み込まれるので `body`/`html` にはスタイルを付けない |
 | `demo/main.ts` | デモエントリポイント |
 | `demo/App.vue` | デモ用テストUI（汎用） |
 | `src/index.ts` | プラグインエントリポイント |

demo/vue/main.ts

@@ -1,5 +1,6 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 import "../../src/style.css";
+import "./style.css";
 
 createApp(App).mount("#app");

demo/vue/style.css

@@ -0,0 +1,7 @@
+/* The Vue demo page only: not part of the package (src/style.css is). */
+body {
+  margin: 0;
+  padding: 1.25rem;
+  font-family: ui-sans-serif, system-ui, sans-serif;
+  background-color: #f3f4f6;
+}

docs/ai-development-guide.md

@@ -30,6 +30,7 @@ src/
 2. **toolName property required** in ToolResult return
 3. **Types must be exported** from core/index.ts
 4. **style.css import** must be at top of vue/index.ts and react/index.ts
+5. **No `body`, `html` or `:root` styles in src/style.css**: it ships as `dist/style.css` into the host's page, so they restyle the whole host app (demo page styles go in `demo/`)
 
 ---
 

src/style.css

@@ -1,5 +1,5 @@
 @import "tailwindcss";
 
-body {
-  @apply m-0 p-5 font-sans bg-gray-100;
-}
+/* This file is the package's dist/style.css, which hosts import into their
+   own page: style only this plugin's components here, never body, html or
+   :root. The demo page's own look is in demo/vue/style.css. */