diff --git a/README.md b/README.md
index 4c748d2..04c5a8f 100644
--- a/README.md
+++ b/README.md
@@ -20,7 +20,6 @@ npm install @enumura/glyphflow
 
 ```ts
 import { createKaraokeNarrator } from "@enumura/glyphflow";
-import "@enumura/glyphflow/styles.css";
 
 const narrator = createKaraokeNarrator({
   text: "This is a karaoke caption.",
@@ -34,9 +33,17 @@ Call `pause()`, `resume()`, `cancel()`, `getDiagnostics()`, or `destroy()` on th
 
 ## CSS customization
 
-The library only sets `--kn-progress` inline. Override its appearance normally:
+The default stylesheet is included by the package import. The library only sets
+`--kn-progress` inline. To customize the appearance, import your own stylesheet
+after GlyphFlow and override its classes or variables:
+
+```ts
+import { createKaraokeNarrator } from "@enumura/glyphflow";
+import "./my-caption.css";
+```
 
 ```css
+/* my-caption.css — your application's filename is arbitrary */
 .kn-word {
   --kn-highlight-color: #fff3b0;
   --kn-unhighlight-color: #736a55;
diff --git a/docs-site/docs/api.md b/docs-site/docs/api.md
index d12a3a4..c4839e9 100644
--- a/docs-site/docs/api.md
+++ b/docs-site/docs/api.md
@@ -28,4 +28,6 @@ Returns an object with `speak()`, `pause()`, `resume()`, `cancel()`, `getDiagnos
 
 ## Styling
 
-Import `@enumura/glyphflow/styles.css`. Override `--kn-highlight-color`, `--kn-unhighlight-color`, font, size, and spacing in application CSS.
+The package import includes the default CSS. Override `--kn-highlight-color`,
+`--kn-unhighlight-color`, font, size, and spacing in an application stylesheet
+that you import after GlyphFlow.
diff --git a/docs-site/docs/getting-started.md b/docs-site/docs/getting-started.md
index 8313ab5..cfb3792 100644
--- a/docs-site/docs/getting-started.md
+++ b/docs-site/docs/getting-started.md
@@ -9,11 +9,11 @@ title: Getting started
 npm install @enumura/glyphflow
 ```
 
-Import the API and stylesheet from your application entry point.
+Import the API from your application entry point. The package includes its
+default caption stylesheet automatically.
 
 ```ts
 import { createKaraokeNarrator, getSpeechSynthesisSupport } from "@enumura/glyphflow";
-import "@enumura/glyphflow/styles.css";
 ```
 
 ## Create a caption target
diff --git a/docs-site/docs/intro.md b/docs-site/docs/intro.md
index 7c15102..424e186 100644
--- a/docs-site/docs/intro.md
+++ b/docs-site/docs/intro.md
@@ -57,7 +57,6 @@ npm install @enumura/glyphflow
 
 ```ts
 import { createKaraokeNarrator } from "@enumura/glyphflow";
-import "@enumura/glyphflow/styles.css";
 
 const narrator = createKaraokeNarrator({
   text: "This is a caption.",
@@ -67,7 +66,8 @@ const narrator = createKaraokeNarrator({
 narrator.speak();
 ```
 
-The library renders its own spans inside `target`. Import the included CSS once, then override colors and typography in your application stylesheet.
+The library renders its own spans inside `target`, and the package import includes
+the default CSS. Override colors and typography in your application stylesheet.
 
 ```css
 .kn-word {
diff --git a/docs-site/docs/troubleshooting.md b/docs-site/docs/troubleshooting.md
index 7b51135..37a5186 100644
--- a/docs-site/docs/troubleshooting.md
+++ b/docs-site/docs/troubleshooting.md
@@ -13,7 +13,9 @@ The browser may support Web Speech but the selected voice may not emit usable `w
 
 ## I hear speech but the caption does not move
 
-Confirm that you imported `@enumura/glyphflow/styles.css` and that the selected voice emits word boundaries. The `unsupported` state after speech ends identifies a boundary-free voice.
+Confirm that application CSS does not override GlyphFlow's caption styles and
+that the selected voice emits word boundaries. The `unsupported` state after
+speech ends identifies a boundary-free voice.
 
 ## Speech does not start
 
@@ -27,7 +29,10 @@ The browser exposes one shared speech queue. GlyphFlow uses `speechSynthesis.can
 
 ## The wipe is not visually correct
 
-Start with the bundled stylesheet, then check application CSS for rules that override `background-clip`, `-webkit-text-fill-color`, or the `--kn-progress` property. Use the [Customization](./customization) guide as a known-good base.
+The default stylesheet is included automatically. Check application CSS for rules
+that override `background-clip`, `-webkit-text-fill-color`, or the
+`--kn-progress` property. Use the [Customization](./customization) guide as a
+known-good base.
 
 ## I found a bug
 
diff --git a/docs-site/i18n/ja/docusaurus-plugin-content-docs/current/api.md b/docs-site/i18n/ja/docusaurus-plugin-content-docs/current/api.md
index a8bf028..a1cb5ab 100644
--- a/docs-site/i18n/ja/docusaurus-plugin-content-docs/current/api.md
+++ b/docs-site/i18n/ja/docusaurus-plugin-content-docs/current/api.md
@@ -28,4 +28,4 @@ title: API
 
 ## スタイル
 
-`@enumura/glyphflow/styles.css`をimportしてください。`--kn-highlight-color`、`--kn-unhighlight-color`、フォント、サイズ、余白はアプリケーション側で上書きできます。
+標準CSSはpackage importに含まれます。`--kn-highlight-color`、`--kn-unhighlight-color`、フォント、サイズ、余白は、GlyphFlowの後からアプリケーション側のCSSを読み込んで上書きできます。
diff --git a/docs-site/i18n/ja/docusaurus-plugin-content-docs/current/getting-started.md b/docs-site/i18n/ja/docusaurus-plugin-content-docs/current/getting-started.md
index 0586001..4975540 100644
--- a/docs-site/i18n/ja/docusaurus-plugin-content-docs/current/getting-started.md
+++ b/docs-site/i18n/ja/docusaurus-plugin-content-docs/current/getting-started.md
@@ -9,11 +9,10 @@ title: 使い始める
 npm install @enumura/glyphflow
 ```
 
-アプリケーションのエントリーポイントからAPIとstylesheetをimportします。
+アプリケーションのエントリーポイントからAPIをimportします。標準の字幕CSSは、このpackage importに含まれます。
 
 ```ts
 import { createKaraokeNarrator, getSpeechSynthesisSupport } from "@enumura/glyphflow";
-import "@enumura/glyphflow/styles.css";
 ```
 
 ## 字幕の描画先を用意する
diff --git a/docs-site/i18n/ja/docusaurus-plugin-content-docs/current/intro.md b/docs-site/i18n/ja/docusaurus-plugin-content-docs/current/intro.md
index 6fdc805..ee7080e 100644
--- a/docs-site/i18n/ja/docusaurus-plugin-content-docs/current/intro.md
+++ b/docs-site/i18n/ja/docusaurus-plugin-content-docs/current/intro.md
@@ -57,7 +57,6 @@ npm install @enumura/glyphflow
 
 ```ts
 import { createKaraokeNarrator } from "@enumura/glyphflow";
-import "@enumura/glyphflow/styles.css";
 
 const narrator = createKaraokeNarrator({
   text: "This is a caption.",
@@ -67,7 +66,7 @@ const narrator = createKaraokeNarrator({
 narrator.speak();
 ```
 
-ライブラリが`target`の中に字幕用のspanを描画します。CSSを一度importし、色や書体はアプリケーション側で上書きしてください。
+ライブラリが`target`の中に字幕用のspanを描画します。標準CSSはpackage importに含まれます。色や書体は、アプリケーション側のCSSを後から読み込んで上書きしてください。
 
 ## 向いている用途
 
diff --git a/docs-site/i18n/ja/docusaurus-plugin-content-docs/current/troubleshooting.md b/docs-site/i18n/ja/docusaurus-plugin-content-docs/current/troubleshooting.md
index 7566f73..02e3194 100644
--- a/docs-site/i18n/ja/docusaurus-plugin-content-docs/current/troubleshooting.md
+++ b/docs-site/i18n/ja/docusaurus-plugin-content-docs/current/troubleshooting.md
@@ -13,7 +13,7 @@ Web Speech APIに対応していても、選択したvoiceが利用可能な単
 
 ## 音声は聞こえるが字幕が動かない
 
-`@enumura/glyphflow/styles.css`をimportしたか、選択したvoiceが単語境界を返すかを確認してください。音声終了後に`unsupported`になる場合は境界がないvoiceです。
+アプリケーション側のCSSがGlyphFlowの字幕スタイルを上書きしていないか、選択したvoiceが単語境界を返すかを確認してください。音声終了後に`unsupported`になる場合は境界がないvoiceです。
 
 ## 音声が開始されない
 
@@ -27,7 +27,7 @@ Web Speech APIに対応していても、選択したvoiceが利用可能な単
 
 ## ワイプの見た目が正しくない
 
-まず付属stylesheetを使い、アプリケーションのCSSが`background-clip`、`-webkit-text-fill-color`、`--kn-progress`を上書きしていないか確認してください。[カスタマイズ](./customization)を正常系の基準にできます。
+標準stylesheetは自動で読み込まれます。アプリケーションのCSSが`background-clip`、`-webkit-text-fill-color`、`--kn-progress`を上書きしていないか確認してください。[カスタマイズ](./customization)を正常系の基準にできます。
 
 ## バグを見つけた
 
diff --git a/docs-site/src/components/HeroSpeech.tsx b/docs-site/src/components/HeroSpeech.tsx
index 842a53d..c03b611 100644
--- a/docs-site/src/components/HeroSpeech.tsx
+++ b/docs-site/src/components/HeroSpeech.tsx
@@ -6,8 +6,7 @@ import {
   getSpeechSynthesisSupport,
   type KaraokeNarrator,
   type NarratorState,
-} from "../../../src/index";
-import "../../../src/styles.css";
+} from "../../../src/index.browser";
 
 import { claimSpeech, releaseSpeech } from "./speech-session";
 import styles from "./HeroSpeech.module.css";
diff --git a/docs-site/src/components/LiveDemo.tsx b/docs-site/src/components/LiveDemo.tsx
index d807081..b616d5a 100644
--- a/docs-site/src/components/LiveDemo.tsx
+++ b/docs-site/src/components/LiveDemo.tsx
@@ -8,8 +8,7 @@ import {
   type NarratorState,
   type SpeechSynthesisSupport,
   type WordTimingSample,
-} from "../../../src/index";
-import "../../../src/styles.css";
+} from "../../../src/index.browser";
 import { tokenize } from "../../../src/core/tokenizer";
 
 import { claimSpeech, releaseSpeech } from "./speech-session";
diff --git a/examples/basic/main.ts b/examples/basic/main.ts
index 8489e98..904ce3b 100644
--- a/examples/basic/main.ts
+++ b/examples/basic/main.ts
@@ -4,8 +4,7 @@ import {
   getVoices,
   type KaraokeNarrator,
   type WordTimingSample,
-} from "../../src/index";
-import "../../src/styles.css";
+} from "@enumura/glyphflow";
 import "./style.css";
 
 const byId = <T extends HTMLElement>(id: string) =>
diff --git a/package-lock.json b/package-lock.json
index 4736553..2452143 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@enumura/glyphflow",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@enumura/glyphflow",
-      "version": "1.0.0",
+      "version": "1.1.0",
       "license": "MIT",
       "devDependencies": {
         "@types/node": "^22.13.1",
diff --git a/package.json b/package.json
index 2ca295b..8b6ac28 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@enumura/glyphflow",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Browser Web Speech narration with smoothly wiping inside-glyph captions.",
   "keywords": [
     "speech-synthesis",
@@ -29,7 +29,9 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "browser": "./dist/index.browser.js",
+      "node": "./dist/index.js",
+      "import": "./dist/index.browser.js"
     },
     "./styles.css": "./dist/styles.css"
   },
@@ -42,10 +44,10 @@
     "node": ">=20"
   },
   "scripts": {
-    "build": "tsup && cp src/styles.css dist/styles.css",
+    "build": "tsup && node scripts/verify-package-entry.mjs",
     "prepack": "npm run build",
     "lint": "oxlint --deny-warnings",
-    "format:check": "prettier --check \"src/**/*.{ts,css}\" \"tests/**/*.ts\" \"examples/basic/**/*.{ts,css,html}\" tsup.config.ts .oxlintrc.json",
+    "format:check": "prettier --check \"src/**/*.{ts,css}\" \"tests/**/*.ts\" \"examples/basic/**/*.{ts,css,html}\" \"scripts/**/*.mjs\" tsup.config.ts .oxlintrc.json",
     "test": "vitest run",
     "test:watch": "vitest",
     "demo": "vite --config examples/basic/vite.config.ts",
diff --git a/scripts/verify-package-entry.mjs b/scripts/verify-package-entry.mjs
new file mode 100644
index 0000000..2a46344
--- /dev/null
+++ b/scripts/verify-package-entry.mjs
@@ -0,0 +1,11 @@
+import { readFile } from "node:fs/promises";
+
+const browserEntryUrl = new URL("../dist/index.browser.js", import.meta.url);
+const browserEntry = await readFile(browserEntryUrl, "utf8");
+
+if (!browserEntry.includes('import "./styles.css";')) {
+  throw new Error("The browser package entry must import the bundled stylesheet.");
+}
+
+await import(new URL("../dist/index.js", import.meta.url));
+await import("@enumura/glyphflow");
diff --git a/src/index.browser.ts b/src/index.browser.ts
new file mode 100644
index 0000000..aa62543
--- /dev/null
+++ b/src/index.browser.ts
@@ -0,0 +1,3 @@
+import "./styles.css";
+
+export * from "./index";
diff --git a/tsup.config.ts b/tsup.config.ts
index 8dfc31c..6b3dcf4 100644
--- a/tsup.config.ts
+++ b/tsup.config.ts
@@ -1,7 +1,10 @@
 import { defineConfig } from "tsup";
 
 export default defineConfig({
-  entry: ["src/index.ts"],
+  entry: {
+    index: "src/index.ts",
+    "index.browser": "src/index.browser.ts",
+  },
   format: ["esm"],
   dts: true,
   sourcemap: false,
@@ -9,4 +12,7 @@ export default defineConfig({
   splitting: false,
   external: [],
   loader: { ".css": "copy" },
+  esbuildOptions(options) {
+    options.assetNames = "[name]";
+  },
 });