@riebeckite/theme-sakura 0.0.5 → 0.0.7

package/README.md

@@ -1,75 +1,109 @@
-# @riebeckite/theme-sakura
-
-A cherry-blossom (sakura) theme for Riebeckite: soft pink paper, plum ink, and
-a sakura-pink accent across light and dark color modes.
-
-[日本語](./README_ja.md)
-
-## Overview
-
-`sakuraTheme()` creates a theme named `sakura`. Like the default theme, it
-exposes the design system as CSS custom properties (`--rb-color-*`,
-`--rb-font-*`, `--rb-space-*`, `--rb-layout-*`) and maps them into Tailwind
-theme values in an `@theme` block, so the tokens work both from plain CSS and
-from Tailwind-style utilities.
-
-The palette is inspired by cherry blossoms:
-
-- **Light** — blossom-white paper (`#fff8fa`), deep plum ink (`#4a2a3a`), and
-  a sakura-pink accent (`#e8789f`)
-- **Dark** — deep plum-black paper (`#241520`), pale blossom ink
-  (`#f9e4ec`), and a lighter sakura-pink accent (`#f4a3c2`)
-
-## Usage
-
-```ts
-import { defineConfig } from "@riebeckite/core";
-import { sakuraTheme } from "@riebeckite/theme-sakura";
-
-export default defineConfig({
-  // ...
-  theme: sakuraTheme({
-    colorMode: "system",
-    typography: "system",
-    articleLayout: "article",
-    bloom: "vivid",
-    userCss: [],
-  }),
-});
-```
-
-Relies on the same `ThemeConfig` API as `defaultTheme()`, so the two themes can
-be swapped without other configuration changes. The root-level
-`data-theme-name` attribute reports `sakura`.
-
-## Options
-
-`sakuraTheme(options?)` accepts any `ThemeConfig` field except `name`, plus the
-theme-specific `bloom` option:
-
-| Option | Type | Default | Description |
-| ------ | ---- | ------- | ----------- |
-| `bloom` | `"soft" \| "vivid"` | `"soft"` | Accent intensity. `vivid` uses a deeper sakura pink (applied via the `data-sakura-bloom="vivid"` attribute) |
-| `colorMode` | `"light" \| "dark" \| "system"` | `"system"` | Color mode. `system` follows `prefers-color-scheme` unless `data-theme` is set |
-| `typography` | `"system" \| "serif" \| "sans"` | `"system"` | Typography preset, applied via the `data-typography` attribute |
-| `articleLayout` | `"article" \| "sidebar" \| "full-width"` | `"article"` | Article layout preset for consumers that read `data-article-layout` |
-| `tokens` | `ThemeDesignTokens` | `{}` | Override design tokens (colors, fonts, spacing, layout widths) |
-| `userCss` | `string[]` | `[]` | Extra user stylesheets |
-
-Theme-specific options are applied to the root element as safe `data-*`
-attributes (`data-sakura-bloom`). `bloom` can also be overridden directly from
-`config` via `attributes: { "data-sakura-bloom": "vivid" }`.
-
-See the [`@riebeckite/theme-default`](../default/README.md) README for the
-full token list — the token contract is identical.
-
-## Exports
-
-- `sakuraTheme(options?)` — theme factory
-- Type: `SakuraThemeOptions`
-- Styles: `@riebeckite/theme-sakura/style.css`
-
-## See also
-
-- [Plugin guide](../../../docs/plugins_en.md)
-- [`@riebeckite/theme-default`](../default/README.md)
+# @riebeckite/theme-sakura
+
+A cherry-blossom (sakura) theme for Riebeckite: soft pink paper, plum ink, a
+sakura-pink accent, and a warm serif editorial voice.
+
+[日本語](./README_ja.md)
+
+## Overview
+
+`sakuraTheme()` creates a theme named `sakura`. Like the default theme, it
+exposes the design system as CSS custom properties (`--rb-color-*`,
+`--rb-font-*`, `--rb-space-*`, `--rb-layout-*`) and maps them into Tailwind
+theme values in an `@theme` block, so the tokens work both from plain CSS and
+from Tailwind-style utilities.
+
+The palette is inspired by cherry blossoms:
+
+- **Light** — blossom-white paper (`#fff8fa`), deep plum ink (`#4a2a3a`), and
+  a sakura-pink accent (`#e8789f`)
+- **Dark** — deep plum-black paper (`#241520`), pale blossom ink
+  (`#f9e4ec`), and a lighter sakura-pink accent (`#f4a3c2`)
+
+Beyond the palette, `sakura` is a soft, warm editorial theme rather than a
+plain sans skin:
+
+- **Serif body and headings** — Latin text uses the self-hosted variable
+  **Source Serif 4**, with CJK serif fallbacks (`Hiragino Mincho ProN`,
+  `Yu Mincho`, `Noto Serif JP`) and a comfortable `1.9` line-height.
+- **Rounded, quiet surfaces** — code blocks, callouts, tables, blockquotes,
+  and cards share a generous corner radius (`roundness: "soft"`), while soft
+  shadows are reserved for genuinely elevated elements such as images.
+- **Restrained blossom accents** — links, list markers, blockquote rules,
+  callouts, and a short rule under `h2` headings pick up the sakura accent,
+  kept legible in both color modes.
+- **Decorated or plain headings** — the `heading` option toggles the `h2`
+  blossom rule.
+
+All character styling is scoped to the theme root and layered so the theme can
+be swapped without touching the application CSS.
+
+## Usage
+
+```ts
+import { defineConfig } from "@riebeckite/core";
+import { sakuraTheme } from "@riebeckite/theme-sakura";
+
+export default defineConfig({
+  // ...
+  theme: sakuraTheme({
+    colorMode: "system",
+    typography: "system",
+    articleLayout: "article",
+    bloom: "vivid",
+    roundness: "soft",
+    heading: "decorated",
+    userCss: [],
+  }),
+});
+```
+
+Relies on the same `ThemeConfig` API as `defaultTheme()`, so the two themes can
+be swapped without other configuration changes. The root-level
+`data-theme-name` attribute reports `sakura`.
+
+## Options
+
+`sakuraTheme(options?)` accepts any `ThemeConfig` field except `name`, plus the
+theme-specific `bloom`, `roundness`, and `heading` options:
+
+| Option | Type | Default | Description |
+| ------ | ---- | ------- | ----------- |
+| `bloom` | `"soft" \| "vivid"` | `"soft"` | Accent intensity. `vivid` uses a deeper sakura pink (applied via the `data-sakura-bloom="vivid"` attribute) |
+| `roundness` | `"soft" \| "crisp"` | `"soft"` | Surface corner radius. `soft` uses generous radii (~10px); `crisp` uses a small radius (~2px). Applied via `data-sakura-roundness` |
+| `heading` | `"decorated" \| "plain"` | `"decorated"` | Heading decoration. `decorated` adds a short accent rule under `h2`; `plain` leaves headings bare. Applied via `data-sakura-heading` |
+| `colorMode` | `"light" \| "dark" \| "system"` | `"system"` | Color mode. `system` follows `prefers-color-scheme` unless `data-theme` is set |
+| `typography` | `"system" \| "serif" \| "sans"` | `"system"` | Typography preset, applied via the `data-typography` attribute. The default is serif; `sans` switches the body back to a CJK-aware sans stack |
+| `articleLayout` | `"article" \| "sidebar" \| "full-width"` | `"article"` | Article layout preset for consumers that read `data-article-layout` |
+| `tokens` | `ThemeDesignTokens` | `{}` | Override design tokens (colors, fonts, spacing, layout widths) |
+| `userCss` | `string[]` | `[]` | Extra user stylesheets |
+
+Theme-specific options are applied to the root element as safe `data-*`
+attributes (`data-sakura-bloom`, `data-sakura-roundness`,
+`data-sakura-heading`). They can also be overridden directly from `config`, for
+example `attributes: { "data-sakura-roundness": "crisp" }`.
+
+## Fonts
+
+The Latin subset of [Source Serif 4](https://github.com/adobe-fonts/source-serif)
+is vendored under `styles/fonts/source-serif-4-latin-wght-normal.woff2` and
+loaded with `font-display: swap` and a Latin `unicode-range`. Japanese glyphs
+are not in that subset, so CJK text falls back to the system serif stack
+(`Hiragino Mincho ProN`, `Yu Mincho`, `Noto Serif JP`). The font is licensed
+under the SIL Open Font License 1.1 (see
+`styles/fonts/source-serif-4-LICENSE.txt`); it is self-hosted, so no network
+request is made.
+
+See the [`@riebeckite/theme-default`](../default/README.md) README for the
+full token list — the token contract is identical.
+
+## Exports
+
+- `sakuraTheme(options?)` — theme factory
+- Type: `SakuraThemeOptions`
+- Styles: `@riebeckite/theme-sakura/style.css`
+
+## See also
+
+- [Plugin guide](../../../docs/en/plugin-system.md)
+- [`@riebeckite/theme-default`](../default/README.md)

package/README_ja.md

@@ -1,46 +1,61 @@
-# @riebeckite/theme-sakura
-
-桜を思わせる淡い背景と深いプラム色の文字を使うテーマです。明暗どちらの配色でも、ピンクをアクセントとして使います。
-
-[English](./README.md)
-
-## 設定する
-
-```ts
-import { defineConfig } from "@riebeckite/core";
-import { sakuraTheme } from "@riebeckite/theme-sakura";
-
-export default defineConfig({
-  // ...
-  theme: sakuraTheme({
-    colorMode: "system",
-    bloom: "vivid",
-  }),
-});
-```
-
-テーマ名は `sakura` です。明るい配色では `#fff8fa` の背景、`#4a2a3a` の文字、`#e8789f` のアクセントを使います。暗い配色では背景を `#241520`、文字を `#f9e4ec`、アクセントを `#f4a3c2` に切り替えます。
-
-## 変更できる項目
-
-| 項目 | 既定値 | 説明 |
-| --- | --- | --- |
-| `bloom` | `"soft"` | `"soft"` または `"vivid"`。`vivid` はより強いピンクを使い、`data-sakura-bloom` に反映する |
-| `colorMode` | `"system"` | `"light"`、`"dark"`、`"system"` |
-| `typography` | `"system"` | `"system"`、`"serif"`、`"sans"` |
-| `articleLayout` | `"article"` | 記事レイアウトの値 |
-| `tokens` | `{}` | 共通デザイントークンの上書き |
-| `userCss` | `[]` | 追加のスタイルシート |
-
-`bloom` は `attributes: { "data-sakura-bloom": "vivid" }` として直接指定することもできます。ほかのテーマと同じトークンなので、アプリケーション側の CSS を大きく変えずに切り替えられます。
-
-## 主なエクスポート
-
-- `sakuraTheme(options?)`: テーマを作成する
-- `SakuraThemeOptions`: 設定用の型
-- `@riebeckite/theme-sakura/style.css`: テーマのスタイルシート
-
-## 関連資料
-
-- [テーマシステム](../../../docs/ja/theme-system.md)
-- [`@riebeckite/theme-default`](../default/README_ja.md)
+# @riebeckite/theme-sakura
+
+桜を思わせる淡い背景と深いプラム色の文字に、やわらかなセリフ体の本文を組み合わせたテーマです。角丸のやさしい面と控えめな桜のアクセントで、明暗どちらの配色でも落ち着いて読める誌面をつくります。
+
+[English](./README.md)
+
+## 設定する
+
+```ts
+import { defineConfig } from "@riebeckite/core";
+import { sakuraTheme } from "@riebeckite/theme-sakura";
+
+export default defineConfig({
+  // ...
+  theme: sakuraTheme({
+    colorMode: "system",
+    bloom: "vivid",
+    roundness: "soft",
+    heading: "decorated",
+  }),
+});
+```
+
+テーマ名は `sakura` です。明るい配色では `#fff8fa` の背景、`#4a2a3a` の文字、`#e8789f` のアクセントを使います。暗い配色では背景を `#241520`、文字を `#f9e4ec`、アクセントを `#f4a3c2` に切り替えます。
+
+色だけでなく、誌面そのものに次のような性格を持たせています。
+
+- **セリフ体の本文と見出し** — 欧文はセルフホストの可変フォント **Source Serif 4**、和文はシステムの明朝体（`Hiragino Mincho ProN`、`Yu Mincho`、`Noto Serif JP`）にフォールバックします。行間は 1.9 でゆったりと組みます。
+- **角丸の静かな面** — コードブロック、コールアウト、表、引用、カードは `roundness` に応じた角丸にします。影は画像など、本当に浮かせたい要素だけに控えめに使います。
+- **桜のアクセント** — リンク、リストのマーカー、引用のライン、コールアウト、`h2` の下の短い罫線などにアクセント色を効かせます。読みやすさを損なわない範囲に留めています。
+- **見出しの飾り** — `heading` で `h2` の飾り罫を出し分けられます。
+
+## 変更できる項目
+
+| 項目 | 既定値 | 説明 |
+| --- | --- | --- |
+| `bloom` | `"soft"` | `"soft"` または `"vivid"`。`vivid` はより強いピンクを使い、`data-sakura-bloom` に反映する |
+| `roundness` | `"soft"` | `"soft"` または `"crisp"`。面の角丸の大きさを切り替え、`data-sakura-roundness` に反映する |
+| `heading` | `"decorated"` | `"decorated"` または `"plain"`。`h2` の飾り罫を出し分け、`data-sakura-heading` に反映する |
+| `colorMode` | `"system"` | `"light"`、`"dark"`、`"system"` |
+| `typography` | `"system"` | `"system"`、`"serif"`、`"sans"`。既定はセリフ体で、`sans` を選ぶと本文がサンセリフ体に戻る |
+| `articleLayout` | `"article"` | 記事レイアウトの値 |
+| `tokens` | `{}` | 共通デザイントークンの上書き |
+| `userCss` | `[]` | 追加のスタイルシート |
+
+各オプションは `attributes: { "data-sakura-roundness": "crisp" }` のように直接指定することもできます。ほかのテーマと同じトークンなので、アプリケーション側の CSS を大きく変えずに切り替えられます。
+
+## フォント
+
+欧文用の [Source Serif 4](https://github.com/adobe-fonts/source-serif) は `styles/fonts/source-serif-4-latin-wght-normal.woff2` に同梱しています。`font-display: swap` と欧文レンジの `unicode-range` を指定して読み込みます。和文の字形は含まれないため、`Hiragino Mincho ProN`、`Yu Mincho`、`Noto Serif JP` へ順にフォールバックします。ライセンスは SIL Open Font License 1.1（`styles/fonts/source-serif-4-LICENSE.txt`）で、セルフホストのため外部へのリクエストは発生しません。
+
+## 主なエクスポート
+
+- `sakuraTheme(options?)`: テーマを作成する
+- `SakuraThemeOptions`: 設定用の型
+- `@riebeckite/theme-sakura/style.css`: テーマのスタイルシート
+
+## 関連資料
+
+- [テーマシステム](../../../docs/ja/theme-system.md)
+- [`@riebeckite/theme-default`](../default/README_ja.md)

package/dist/src/index.d.ts

@@ -1,6 +1,8 @@
 import { type ThemeConfig } from "@riebeckite/core";
 export type SakuraThemeOptions = Omit<ThemeConfig, "name" | "userCss"> & {
     bloom?: "soft" | "vivid";
+    roundness?: "soft" | "crisp";
+    heading?: "decorated" | "plain";
     userCss?: string[];
 };
 export declare function sakuraTheme(options?: SakuraThemeOptions): import("@riebeckite/core").RiebeckiteTheme<SakuraThemeOptions>;

package/dist/src/index.js

@@ -1,12 +1,19 @@
 // src/index.ts
 import { defineTheme } from "@riebeckite/core";
 function sakuraTheme(options = {}) {
-  const { bloom = "soft", ...config } = options;
+  const {
+    bloom = "soft",
+    roundness = "soft",
+    heading = "decorated",
+    ...config
+  } = options;
   return defineTheme({
     name: "sakura",
     options,
     attributes: {
-      "data-sakura-bloom": bloom
+      "data-sakura-bloom": bloom,
+      "data-sakura-roundness": roundness,
+      "data-sakura-heading": heading
     },
     styles: [{ moduleSpecifier: "@riebeckite/theme-sakura/style.css" }],
     config

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/theme-sakura",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/src/index.js",
@@ -16,7 +16,7 @@
     "./styles/theme.css": "./styles/theme.css"
   },
   "dependencies": {
-    "@riebeckite/core": "0.0.5"
+    "@riebeckite/core": "0.0.7"
   },
   "publishConfig": {
     "access": "public"

package/styles/fonts/source-serif-4-LICENSE.txt

@@ -0,0 +1,93 @@
+Google Inc.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/styles/theme.css

@@ -1,139 +1,647 @@
-@theme {
-  --font-sans: var(--rb-font-body);
-  --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
-  --font-mono: var(--rb-font-mono);
-  --color-rb-paper: var(--rb-color-paper);
-  --color-rb-ink: var(--rb-color-ink);
-  --color-rb-muted: var(--rb-color-muted);
-  --color-rb-accent: var(--rb-color-accent);
-  --color-rb-surface: var(--rb-color-surface);
-  --color-rb-danger: var(--rb-color-danger);
-  --color-rb-success: var(--rb-color-success);
-}
-
-@layer base {
-  :root {
-    color-scheme: light;
-    --rb-color-paper: #fff8fa;
-    --rb-color-surface: #ffffff;
-    --rb-color-surface-hover: #fdf0f5;
-    --rb-color-ink: #4a2a3a;
-    --rb-color-muted: #9a7a88;
-    --rb-color-accent: #e8789f;
-    --rb-color-border: color-mix(in srgb, currentColor 18%, transparent);
-    --rb-color-border-strong: color-mix(in srgb, currentColor 28%, transparent);
-    --rb-color-danger: #b42318;
-    --rb-color-success: #0f7b5f;
-    --rb-color-code-background: color-mix(
-      in srgb,
-      var(--rb-color-ink) 8%,
-      transparent
-    );
-    --rb-color-overlay: rgb(0 0 0 / 0.4);
-    --rb-font-body:
-      ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-      sans-serif;
-    --rb-font-heading: var(--rb-font-body);
-    --rb-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
-    --rb-space-1: 0.5rem;
-    --rb-space-2: 1rem;
-    --rb-space-3: 1.5rem;
-    --rb-space-4: 2rem;
-    --rb-space-6: 3rem;
-    --rb-space-8: 4rem;
-    --rb-rule-width: 1px;
-    --rb-layout-page-max: 80rem;
-    --rb-layout-article-max: 48rem;
-    --rb-layout-sidebar: 14rem;
-    --rb-layout-gap: 2rem;
-  }
-
-  :root[data-sakura-bloom="vivid"] {
-    --rb-color-accent: #d8558a;
-    --rb-color-surface-hover: #fbdce9;
-  }
-
-  :root[data-theme="dark"] {
-    color-scheme: dark;
-    --rb-color-paper: #241520;
-    --rb-color-surface: #2b1a26;
-    --rb-color-surface-hover: #382330;
-    --rb-color-ink: #f9e4ec;
-    --rb-color-muted: #c9a7b6;
-    --rb-color-accent: #f4a3c2;
-    --rb-color-danger: #ff6369;
-    --rb-color-success: #4ccc9a;
-    --rb-color-code-background: color-mix(
-      in srgb,
-      var(--rb-color-ink) 12%,
-      transparent
-    );
-    --rb-color-overlay: rgb(0 0 0 / 0.6);
-  }
-
-  :root[data-theme="dark"][data-sakura-bloom="vivid"] {
-    --rb-color-accent: #f08aae;
-    --rb-color-surface-hover: #42232f;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    :root:not([data-theme]) {
-      color-scheme: dark;
-      --rb-color-paper: #241520;
-      --rb-color-surface: #2b1a26;
-      --rb-color-surface-hover: #382330;
-      --rb-color-ink: #f9e4ec;
-      --rb-color-muted: #c9a7b6;
-      --rb-color-accent: #f4a3c2;
-      --rb-color-danger: #ff6369;
-      --rb-color-success: #4ccc9a;
-      --rb-color-code-background: color-mix(
-        in srgb,
-        var(--rb-color-ink) 12%,
-        transparent
-      );
-      --rb-color-overlay: rgb(0 0 0 / 0.6);
-    }
-
-    :root:not([data-theme])[data-sakura-bloom="vivid"] {
-      --rb-color-accent: #f08aae;
-      --rb-color-surface-hover: #42232f;
-    }
-  }
-
-  :root[data-typography="serif"] {
-    --rb-font-body: Georgia, Cambria, "Times New Roman", Times, serif;
-    --rb-font-heading:
-      ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-      sans-serif;
-  }
-
-  :root[data-typography="sans"] {
-    --rb-font-body:
-      ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-      sans-serif;
-    --rb-font-heading: var(--rb-font-body);
-  }
-
-  html {
-    background: var(--rb-color-paper);
-    color: var(--rb-color-ink);
-    font-family: var(--rb-font-body);
-  }
-
-  body {
-    margin: 0;
-    background: var(--rb-color-paper);
-    color: var(--rb-color-ink);
-  }
-
-  ::selection {
-    background: var(--rb-color-accent);
-    color: var(--rb-color-paper);
-  }
-
-  :focus-visible {
-    outline: 2px solid var(--rb-color-accent);
-    outline-offset: 2px;
-  }
-}
+/* Self-hosted Source Serif 4 (Latin subset, variable weight 100–900).
+   Japanese glyphs are outside this subset and fall back to the system serif. */
+@font-face {
+  font-family: "Source Serif 4";
+  src: url("./fonts/source-serif-4-latin-wght-normal.woff2")
+    format("woff2-variations");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+FEFF, U+FFFD;
+}
+
+@theme {
+  --font-sans: var(--rb-font-body);
+  --font-serif:
+    "Source Serif 4", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP",
+    Georgia, serif;
+  --font-mono: var(--rb-font-mono);
+  --color-rb-paper: var(--rb-color-paper);
+  --color-rb-ink: var(--rb-color-ink);
+  --color-rb-muted: var(--rb-color-muted);
+  --color-rb-accent: var(--rb-color-accent);
+  --color-rb-surface: var(--rb-color-surface);
+  --color-rb-danger: var(--rb-color-danger);
+  --color-rb-success: var(--rb-color-success);
+}
+
+@layer base {
+  :is(:root, .rb-theme-root)[data-theme-name="sakura"] {
+    color-scheme: light;
+    --rb-color-paper: #fff8fa;
+    --rb-color-surface: #ffffff;
+    --rb-color-surface-hover: #fdf0f5;
+    --rb-color-ink: #4a2a3a;
+    --rb-color-muted: #9a7a88;
+    --rb-color-accent: #e8789f;
+    --rb-color-border: color-mix(in srgb, currentColor 18%, transparent);
+    --rb-color-border-strong: color-mix(in srgb, currentColor 28%, transparent);
+    --rb-color-danger: #b42318;
+    --rb-color-success: #0f7b5f;
+    --rb-color-code-background: color-mix(
+      in srgb,
+      var(--rb-color-ink) 8%,
+      transparent
+    );
+    --rb-color-overlay: rgb(0 0 0 / 0.4);
+    --rb-font-body:
+      "Source Serif 4", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP",
+      Georgia, serif;
+    --rb-font-heading: var(--rb-font-body);
+    --rb-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+    --rb-space-1: 0.5rem;
+    --rb-space-2: 1rem;
+    --rb-space-3: 1.5rem;
+    --rb-space-4: 2rem;
+    --rb-space-6: 3rem;
+    --rb-space-8: 4rem;
+    --rb-rule-width: 1px;
+    --rb-layout-page-max: 80rem;
+    --rb-layout-article-max: 46rem;
+    --rb-layout-sidebar: 14rem;
+    --rb-layout-gap: 2rem;
+    /* Character-layer radius. `roundness="soft"` is the default; the crisp
+       override below shrinks both. */
+    --rb-sakura-radius: 0.625rem;
+    --rb-sakura-radius-sm: 0.375rem;
+  }
+
+  :is(
+    :root,
+    .rb-theme-root
+  )[data-theme-name="sakura"][data-sakura-roundness="crisp"] {
+    --rb-sakura-radius: 2px;
+    --rb-sakura-radius-sm: 2px;
+  }
+
+  :is(
+    :root,
+    .rb-theme-root
+  )[data-theme-name="sakura"][data-sakura-bloom="vivid"] {
+    --rb-color-accent: #d8558a;
+    --rb-color-surface-hover: #fbdce9;
+  }
+
+  :is(:root, .rb-theme-root)[data-theme-name="sakura"][data-theme="dark"] {
+    color-scheme: dark;
+    --rb-color-paper: #241520;
+    --rb-color-surface: #2b1a26;
+    --rb-color-surface-hover: #382330;
+    --rb-color-ink: #f9e4ec;
+    --rb-color-muted: #c9a7b6;
+    --rb-color-accent: #f4a3c2;
+    --rb-color-danger: #ff6369;
+    --rb-color-success: #4ccc9a;
+    --rb-color-code-background: color-mix(
+      in srgb,
+      var(--rb-color-ink) 12%,
+      transparent
+    );
+    --rb-color-overlay: rgb(0 0 0 / 0.6);
+  }
+
+  :is(
+    :root,
+    .rb-theme-root
+  )[data-theme-name="sakura"][data-theme="dark"][data-sakura-bloom="vivid"] {
+    --rb-color-accent: #f08aae;
+    --rb-color-surface-hover: #42232f;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :is(:root, .rb-theme-root)[data-theme-name="sakura"]:not([data-theme]) {
+      color-scheme: dark;
+      --rb-color-paper: #241520;
+      --rb-color-surface: #2b1a26;
+      --rb-color-surface-hover: #382330;
+      --rb-color-ink: #f9e4ec;
+      --rb-color-muted: #c9a7b6;
+      --rb-color-accent: #f4a3c2;
+      --rb-color-danger: #ff6369;
+      --rb-color-success: #4ccc9a;
+      --rb-color-code-background: color-mix(
+        in srgb,
+        var(--rb-color-ink) 12%,
+        transparent
+      );
+      --rb-color-overlay: rgb(0 0 0 / 0.6);
+    }
+
+    :is(:root, .rb-theme-root)[data-theme-name="sakura"]:not(
+        [data-theme]
+      )[data-sakura-bloom="vivid"] {
+      --rb-color-accent: #f08aae;
+      --rb-color-surface-hover: #42232f;
+    }
+  }
+
+  :is(
+    :root,
+    .rb-theme-root
+  )[data-theme-name="sakura"][data-typography="serif"] {
+    --rb-font-body:
+      "Source Serif 4", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP",
+      Georgia, serif;
+    --rb-font-heading: var(--rb-font-body);
+  }
+
+  :is(:root, .rb-theme-root)[data-theme-name="sakura"][data-typography="sans"] {
+    --rb-font-body:
+      ui-sans-serif, system-ui, "Hiragino Sans", "Noto Sans JP", "Yu Gothic",
+      sans-serif;
+    --rb-font-heading: var(--rb-font-body);
+  }
+
+  :is(:root, .rb-theme-root)[data-theme-name="sakura"] {
+    background: var(--rb-color-paper);
+    color: var(--rb-color-ink);
+    font-family: var(--rb-font-body);
+    accent-color: var(--rb-color-accent);
+    caret-color: var(--rb-color-accent);
+  }
+
+  :is(:root, .rb-theme-root)[data-theme-name="sakura"] ::selection {
+    background: var(--rb-color-accent);
+    color: var(--rb-color-paper);
+  }
+
+  :is(:root, .rb-theme-root)[data-theme-name="sakura"] :focus-visible {
+    outline: 2px solid var(--rb-color-accent);
+    outline-offset: 2px;
+  }
+}
+
+/* -------------------------------------------------------------------------
+   Character layer — unlayered on purpose.
+   The app's structural CSS and the plugin defaults all live inside @layer,
+   so these unlayered rules win without `!important`. Every selector is
+   scoped to the theme root, so the same styles apply to an embedded preview
+   container (`.rb-theme-root`) as to the document root.
+   ------------------------------------------------------------------------- */
+
+/* Article shell: warm serif body with a generous measure and leading. */
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rb-article {
+  color: var(--rb-color-ink);
+  font-family: var(--rb-font-body);
+  font-size: 1.0625rem;
+  line-height: 1.9;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rb-article-header h1 {
+  margin: 0 0 0.75rem;
+  color: var(--rb-color-ink);
+  font-family: var(--rb-font-heading);
+  font-size: clamp(2rem, 4.5vw, 2.75rem);
+  font-weight: 600;
+  letter-spacing: -0.015em;
+  line-height: 1.18;
+  text-wrap: balance;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rb-article-meta {
+  margin-block: 0 2rem;
+  padding-block: 0.8rem;
+  border-block: 1px solid var(--rb-color-border);
+  color: color-mix(in srgb, var(--rb-color-muted) 72%, var(--rb-color-ink));
+  font-size: 0.9rem;
+  letter-spacing: 0.01em;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rb-article-footer {
+  margin-top: 3rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--rb-color-border);
+  color: color-mix(in srgb, var(--rb-color-muted) 72%, var(--rb-color-ink));
+  font-size: 0.95rem;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rb-sidebar {
+  color: color-mix(in srgb, var(--rb-color-muted) 72%, var(--rb-color-ink));
+  font-size: 0.95rem;
+}
+
+/* Headings: serif, 600, distinguished by size and weight. */
+:is(:root, .rb-theme-root)[data-theme-name="sakura"]
+  .rb-article-body
+  :is(h2, h3, h4) {
+  color: var(--rb-color-ink);
+  font-family: var(--rb-font-heading);
+  font-weight: 600;
+  letter-spacing: -0.008em;
+  line-height: 1.3;
+  text-wrap: balance;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rb-article-body h2 {
+  position: relative;
+  margin-block: 2.75rem 1.1rem;
+  padding-bottom: 0.65rem;
+  font-size: 1.6rem;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rb-article-body h3 {
+  margin-block: 2.1rem 0.8rem;
+  font-size: 1.3rem;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rb-article-body h4 {
+  margin-block: 1.6rem 0.6rem;
+  font-size: 1.1rem;
+  letter-spacing: 0.01em;
+}
+
+/* Blossom rule under h2; removed when `heading="plain"`. */
+:is(:root, .rb-theme-root)[data-theme-name="sakura"]
+  .rb-article-body
+  h2::after {
+  content: "";
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-end: 0;
+  width: 2.75rem;
+  height: 2px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--rb-color-accent) 75%, transparent);
+}
+
+:is(
+    :root,
+    .rb-theme-root
+  )[data-theme-name="sakura"][data-sakura-heading="plain"]
+  .rb-article-body
+  h2 {
+  padding-bottom: 0;
+}
+
+:is(
+    :root,
+    .rb-theme-root
+  )[data-theme-name="sakura"][data-sakura-heading="plain"]
+  .rb-article-body
+  h2::after {
+  content: none;
+}
+
+/* Paragraphs. */
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rb-article-body p {
+  margin-block: 1.4rem;
+  text-wrap: pretty;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"]
+  .rb-article-body
+  > :first-child {
+  margin-block-start: 0;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"]
+  .rb-article-body
+  > :last-child {
+  margin-block-end: 0;
+}
+
+/* Links: accent tone with an offset underline; hover thickens it. */
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rb-article-body a {
+  color: color-mix(in srgb, var(--rb-color-accent) 55%, var(--rb-color-ink));
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-decoration-color: color-mix(
+    in srgb,
+    var(--rb-color-accent) 55%,
+    transparent
+  );
+  text-underline-offset: 0.22em;
+  transition:
+    color 140ms ease,
+    text-decoration-color 140ms ease,
+    text-decoration-thickness 140ms ease;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rb-article-body a:hover {
+  color: color-mix(in srgb, var(--rb-color-accent) 42%, var(--rb-color-ink));
+  text-decoration-thickness: 2px;
+  text-decoration-color: currentColor;
+}
+
+/* Lists: quiet spacing with blossom-tinted markers. */
+:is(:root, .rb-theme-root)[data-theme-name="sakura"]
+  .rb-article-body
+  :is(ul, ol) {
+  margin-block: 1.4rem;
+  padding-inline-start: 1.4em;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rb-article-body li {
+  margin-block: 0.35rem;
+  padding-inline-start: 0.15em;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"]
+  .rb-article-body
+  :is(ul, ol)
+  > li::marker {
+  color: color-mix(in srgb, var(--rb-color-accent) 72%, var(--rb-color-ink));
+}
+
+/* Blockquote: rounded plum-tinted surface with an accent left rule. */
+:is(:root, .rb-theme-root)[data-theme-name="sakura"]
+  .rb-article-body
+  blockquote {
+  margin: 2rem 0;
+  padding: 1.1rem 1.35rem;
+  border: 1px solid color-mix(in srgb, var(--rb-color-accent) 22%, transparent);
+  border-inline-start: 3px solid var(--rb-color-accent);
+  border-radius: var(--rb-sakura-radius);
+  background: color-mix(
+    in srgb,
+    var(--rb-color-accent) 7%,
+    var(--rb-color-surface)
+  );
+  color: color-mix(in srgb, var(--rb-color-ink) 86%, var(--rb-color-accent));
+  font-style: normal;
+  quotes: none;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"]
+  .rb-article-body
+  blockquote
+  p {
+  margin-block: 0.6rem;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"]
+  .rb-article-body
+  blockquote
+  > :first-child {
+  margin-block-start: 0;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"]
+  .rb-article-body
+  blockquote
+  > :last-child {
+  margin-block-end: 0;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"]
+  .rb-article-body
+  blockquote
+  p::before,
+:is(:root, .rb-theme-root)[data-theme-name="sakura"]
+  .rb-article-body
+  blockquote
+  p::after {
+  content: none;
+}
+
+/* hr: a short centered accent rule. */
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rb-article-body hr {
+  width: 4rem;
+  height: 2px;
+  margin-block: 3rem;
+  margin-inline: auto;
+  border: 0;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--rb-color-accent) 55%, transparent);
+}
+
+/* Code. */
+:is(:root, .rb-theme-root)[data-theme-name="sakura"]
+  .rb-article-body
+  :not(pre)
+  > code {
+  padding: 0.18em 0.42em;
+  border: 1px solid color-mix(in srgb, var(--rb-color-accent) 18%, transparent);
+  border-radius: var(--rb-sakura-radius-sm);
+  background: var(--rb-color-code-background);
+  color: color-mix(in srgb, var(--rb-color-ink) 82%, var(--rb-color-accent));
+  font-size: 0.88em;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"]
+  .rb-article-body
+  pre:not(:where(.rr-code *)) {
+  margin-block: 1.75rem;
+  padding: 1.05rem 1.2rem;
+  border: 1px solid var(--rb-color-border);
+  border-radius: var(--rb-sakura-radius);
+  background: var(--rb-color-code-background);
+  line-height: 1.7;
+  box-shadow: 0 8px 22px -18px
+    color-mix(in srgb, var(--rb-color-ink) 60%, transparent);
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rr-code {
+  border: 1px solid var(--rb-color-border);
+  border-radius: var(--rb-sakura-radius);
+  overflow: hidden;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"]
+  .rr-code:not([data-terminal="true"]) {
+  --rr-code-paper: var(--rb-color-code-background);
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rr-code-tabs {
+  border-radius: var(--rb-sakura-radius);
+  overflow: hidden;
+}
+
+/* Tables: hairline rules and a tinted header row. */
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rb-article-body table {
+  margin-block: 1.75rem;
+  border: 1px solid var(--rb-color-border);
+  border-radius: var(--rb-sakura-radius-sm);
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: 0.95em;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"]
+  .rb-article-body
+  :is(th, td) {
+  padding: 0.6rem 0.85rem;
+  border-bottom: 1px solid var(--rb-color-border);
+  text-align: start;
+  vertical-align: top;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rb-article-body thead th {
+  background: color-mix(
+    in srgb,
+    var(--rb-color-accent) 9%,
+    var(--rb-color-surface)
+  );
+  color: var(--rb-color-ink);
+  font-weight: 600;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"]
+  .rb-article-body
+  tbody
+  tr:last-child
+  td {
+  border-bottom: 0;
+}
+
+/* Images: the only elements that get a real soft shadow. */
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rb-article-body > img,
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rb-article-body p > img,
+:is(:root, .rb-theme-root)[data-theme-name="sakura"]
+  .rb-article-body
+  figure
+  img {
+  border: 1px solid var(--rb-color-border);
+  border-radius: var(--rb-sakura-radius);
+  box-shadow: 0 14px 30px -22px
+    color-mix(in srgb, var(--rb-color-ink) 65%, transparent);
+}
+
+/* Plugin roots. */
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rr-callout {
+  margin-block: 1.75rem;
+  padding: 1rem 1.25rem;
+  border: 1px solid color-mix(in srgb, var(--rb-color-accent) 24%, transparent);
+  border-inline-start: 3px solid var(--rb-color-accent);
+  border-radius: var(--rb-sakura-radius);
+  background: color-mix(
+    in srgb,
+    var(--rb-color-accent) 7%,
+    var(--rb-color-surface)
+  );
+  color: var(--rb-color-ink);
+  box-shadow: none;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rr-table-of-contents {
+  padding: 1rem 1.15rem;
+  border: 1px solid var(--rb-color-border);
+  border-radius: var(--rb-sakura-radius);
+  background: color-mix(
+    in srgb,
+    var(--rb-color-accent) 4%,
+    var(--rb-color-surface)
+  );
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rr-table-of-contents a {
+  color: color-mix(in srgb, var(--rb-color-muted) 78%, var(--rb-color-ink));
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rr-backlinks {
+  margin-top: 3.5rem;
+  padding-top: 1.75rem;
+  border-top: 1px solid var(--rb-color-border);
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rr-backlinks a {
+  border-radius: var(--rb-sakura-radius-sm);
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rr-local-graph {
+  margin-top: 3.5rem;
+  padding-top: 1.75rem;
+  border-top: 1px solid var(--rb-color-border);
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rr-recent-posts {
+  margin-top: 3.5rem;
+  padding-top: 1.75rem;
+  border-top: 1px solid var(--rb-color-border);
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rr-recent-posts a {
+  border-radius: var(--rb-sakura-radius-sm);
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rr-search {
+  border-radius: var(--rb-sakura-radius);
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"]
+  .rr-search
+  :is(input, button, a) {
+  border-radius: var(--rb-sakura-radius-sm);
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rr-cardlink {
+  border: 1px solid var(--rb-color-border);
+  border-radius: var(--rb-sakura-radius);
+  overflow: hidden;
+  text-decoration: none;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rr-cardlink:hover,
+:is(:root, .rb-theme-root)[data-theme-name="sakura"]
+  .rr-cardlink:focus-visible {
+  border-color: color-mix(
+    in srgb,
+    var(--rb-color-accent) 55%,
+    var(--rb-color-border)
+  );
+  box-shadow: 0 14px 30px -20px
+    color-mix(in srgb, var(--rb-color-ink) 60%, transparent);
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rr-lightbox img {
+  border-radius: var(--rb-sakura-radius-sm);
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rr-mermaid {
+  border: 1px solid var(--rb-color-border);
+  border-radius: var(--rb-sakura-radius);
+  background: color-mix(
+    in srgb,
+    var(--rb-color-accent) 4%,
+    var(--rb-color-surface)
+  );
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] .rr-attachment {
+  border: 1px solid var(--rb-color-border);
+  border-radius: var(--rb-sakura-radius);
+  background: color-mix(
+    in srgb,
+    var(--rb-color-accent) 4%,
+    var(--rb-color-surface)
+  );
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"]
+  .rr-media
+  :is(img, video, audio) {
+  border-radius: var(--rb-sakura-radius-sm);
+}
+
+/* Slim, accent-tinted scrollbar. */
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] * {
+  scrollbar-color: color-mix(
+      in srgb,
+      var(--rb-color-accent) 50%,
+      var(--rb-color-muted)
+    )
+    transparent;
+  scrollbar-width: thin;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] ::-webkit-scrollbar-thumb {
+  border: 2px solid var(--rb-color-paper);
+  border-radius: 999px;
+  background: color-mix(
+    in srgb,
+    var(--rb-color-accent) 50%,
+    var(--rb-color-muted)
+  );
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="sakura"] ::-webkit-scrollbar-track {
+  background: transparent;
+}