@riebeckite/theme-tokyonight 0.0.3 → 0.0.6

package/README.md

@@ -1,81 +1,102 @@
-# @riebeckite/theme-tokyonight
-
-An assertive Tokyo Night theme for Riebeckite: high-contrast twilight day mode
-and the classic deep-indigo night mode, with an electric-blue accent and
-magenta/neon flourishes.
-
-[日本語](./README_ja.md)
-
-## Overview
-
-`tokyonightTheme()` creates a theme named `tokyonight`, following the same
-`ThemeConfig` API and token contract as the other Riebeckite themes. Design
-tokens are exposed as CSS custom properties (`--rb-color-*`, `--rb-font-*`,
-`--rb-space-*`, `--rb-layout-*`) and mapped into Tailwind theme values in an
-`@theme` block.
-
-Compared with the subtler default theme, Tokyo Night dials up the contrast:
-
-- **Light ("day")** — twilight-white paper (`#e1e2e7`) with a deep indigo ink
-  (`#343b58`) and an electric-blue accent (`#2e7de9`)
-- **Dark ("night")** — the classic Tokyo Night background `#1a1b26` with pale
-  fuji-blue ink (`#c0caf5`) and a glowing `#7aa2f7` accent
-
-Beyond the tokens it also applies assertive base styling: an accent-color
-`caret`/`accent-color`, an electric `:focus-visible` outline, neon-tinted
-`::selection`, and a slim accent-tinted scrollbar.
-
-## Usage
-
-```ts
-import { defineConfig } from "@riebeckite/core";
-import { tokyonightTheme } from "@riebeckite/theme-tokyonight";
-
-export default defineConfig({
-  // ...
-  theme: tokyonightTheme({
-    colorMode: "system",
-    typography: "system",
-    articleLayout: "article",
-    neon: true,
-    userCss: [],
-  }),
-});
-```
-
-Relies on the same `ThemeConfig` API as `defaultTheme()`, so it can replace
-either theme without other configuration changes. The root-level
-`data-theme-name` attribute reports `tokyonight`.
-
-## Options
-
-`tokyonightTheme(options?)` accepts any `ThemeConfig` field except `name`, plus
-the theme-specific `neon` option:
-
-| Option | Type | Default | Description |
-| ------ | ---- | ------- | ----------- |
-| `neon` | `boolean` | `false` | Neon flourish (applied via the `data-tokyonight-neon="on"` attribute): glowing accent `:focus-visible` outline, `::selection`, and accent-tinted scrollbar |
-| `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-tokyonight-neon`). `neon` can also be overridden directly
-from `config` via `attributes: { "data-tokyonight-neon": "on" }`.
-
-See the [`@riebeckite/theme-default`](../default/README.md) README for the
-full token list — the token contract is identical.
-
-## Exports
-
-- `tokyonightTheme(options?)` — theme factory
-- Type: `TokyonightThemeOptions`
-- Styles: `@riebeckite/theme-tokyonight/style.css`
-
-## See also
-
-- [Plugin guide](../../../docs/plugins_en.md)
-- [`@riebeckite/theme-default`](../default/README.md)
-- [`@riebeckite/theme-sakura`](../sakura/README.md)
+# @riebeckite/theme-tokyonight
+
+An assertive Tokyo Night theme for Riebeckite: high-contrast twilight day mode
+and the classic deep-indigo night mode, rebuilt as a technical "developer tool"
+look — mono display headings, a tight rhythm, square hairline-bordered surfaces,
+an electric-blue accent, and an optional neon glow.
+
+[日本語](./README_ja.md)
+
+## Overview
+
+`tokyonightTheme()` creates a theme named `tokyonight`, following the same
+`ThemeConfig` API and token contract as the other Riebeckite themes. Design
+tokens are exposed as CSS custom properties (`--rb-color-*`, `--rb-font-*`,
+`--rb-space-*`, `--rb-layout-*`) and mapped into Tailwind theme values in an
+`@theme` block.
+
+Compared with the subtler default theme, Tokyo Night dials up the contrast:
+
+- **Light ("day")** — twilight-white paper (`#e1e2e7`) with a deep indigo ink
+  (`#343b58`) and an electric-blue accent (`#2e7de9`)
+- **Dark ("night")** — the classic Tokyo Night background `#1a1b26` with pale
+  fuji-blue ink (`#c0caf5`) and a glowing `#7aa2f7` accent
+
+Beyond the palette it carries a distinct visual character rather than being a
+color swap: uppercase mono headings with accent rules, square corners and 1px
+borders, chunky bordered code, hairline tables, underline-on-hover links, and
+flat shadow-free chrome. Latin text uses a self-hosted JetBrains Mono for
+headings and `--rb-font-mono`; Japanese glyphs fall back to the system stack and
+body copy stays sans.
+
+It also applies assertive base styling: an accent-color `caret`/`accent-color`,
+an electric `:focus-visible` outline, neon-tinted `::selection`, and a slim
+accent-tinted scrollbar.
+
+## Usage
+
+```ts
+import { defineConfig } from "@riebeckite/core";
+import { tokyonightTheme } from "@riebeckite/theme-tokyonight";
+
+export default defineConfig({
+  // ...
+  theme: tokyonightTheme({
+    colorMode: "system",
+    typography: "system",
+    articleLayout: "article",
+    density: "cozy",
+    heading: "tech",
+    neon: true,
+    userCss: [],
+  }),
+});
+```
+
+Relies on the same `ThemeConfig` API as `defaultTheme()`, so it can replace
+either theme without other configuration changes. The root-level
+`data-theme-name` attribute reports `tokyonight`.
+
+## Options
+
+`tokyonightTheme(options?)` accepts any `ThemeConfig` field except `name`, plus
+the theme-specific `density`, `heading`, and `neon` options:
+
+| Option | Type | Default | Description |
+| ------ | ---- | ------- | ----------- |
+| `density` | `"cozy" \| "compact"` | `"cozy"` | Vertical rhythm (applied via `data-tokyonight-density`). `compact` tightens the `--rb-space-*` scale and heading, paragraph, and list spacing throughout |
+| `heading` | `"tech" \| "plain"` | `"tech"` | Heading treatment (applied via `data-tokyonight-heading`). `tech` = uppercase mono headings with accent bars; `plain` = normal-case, undecorated headings in the body font |
+| `neon` | `boolean` | `false` | Neon flourish (applied via `data-tokyonight-neon="on"`): glowing accent `:focus-visible` outline, `::selection`, scrollbar, link hover, and heading accents |
+| `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-tokyonight-density`, `data-tokyonight-heading`,
+`data-tokyonight-neon`). `neon` can also be overridden directly from `config`
+via `attributes: { "data-tokyonight-neon": "on" }`.
+
+See the [`@riebeckite/theme-default`](../default/README.md) README for the
+full token list — the token contract is identical.
+
+## Fonts
+
+The Latin subset of [JetBrains Mono](https://www.jetbrains.com/lp/mono/) is
+self-hosted (no network request) and vendored under `styles/fonts/` together
+with its SIL Open Font License (`jetbrains-mono-LICENSE.txt`). It is used for
+mono text and, with `heading: "tech"`, for display headings; CJK glyphs fall
+back to the system font stack.
+
+## Exports
+
+- `tokyonightTheme(options?)` — theme factory
+- Type: `TokyonightThemeOptions`
+- Styles: `@riebeckite/theme-tokyonight/style.css`
+
+## See also
+
+- [Plugin guide](../../../docs/en/plugin-system.md)
+- [`@riebeckite/theme-default`](../default/README.md)
+- [`@riebeckite/theme-sakura`](../sakura/README.md)

package/README_ja.md

@@ -1,47 +1,68 @@
-# @riebeckite/theme-tokyonight
-
-Tokyo Night の濃い藍色と鮮やかな青を使うテーマです。昼向けの明るい配色と、定番の深い夜向け配色を切り替えられます。
-
-[English](./README.md)
-
-## 設定する
-
-```ts
-import { defineConfig } from "@riebeckite/core";
-import { tokyonightTheme } from "@riebeckite/theme-tokyonight";
-
-export default defineConfig({
-  // ...
-  theme: tokyonightTheme({
-    colorMode: "system",
-    neon: true,
-  }),
-});
-```
-
-テーマ名は `tokyonight` です。明るい配色では `#e1e2e7` の背景、`#343b58` の文字、`#2e7de9` のアクセントを使います。暗い配色では `#1a1b26` の背景、`#c0caf5` の文字、`#7aa2f7` のアクセントに切り替わります。
-
-## 変更できる項目
-
-| 項目 | 既定値 | 説明 |
-| --- | --- | --- |
-| `neon` | `false` | 青いフォーカス枠、選択色、スクロールバーを強調する。`data-tokyonight-neon="on"` に反映する |
-| `colorMode` | `"system"` | `"light"`、`"dark"`、`"system"` |
-| `typography` | `"system"` | `"system"`、`"serif"`、`"sans"` |
-| `articleLayout` | `"article"` | 記事レイアウトの値 |
-| `tokens` | `{}` | 共通デザイントークンの上書き |
-| `userCss` | `[]` | 追加のスタイルシート |
-
-このテーマは入力要素のアクセント色、キーボード操作時のフォーカス枠、テキスト選択、スクロールバーにも青系の色を適用します。`neon` は `attributes: { "data-tokyonight-neon": "on" }` として直接指定することもできます。
-
-## 主なエクスポート
-
-- `tokyonightTheme(options?)`: テーマを作成する
-- `TokyonightThemeOptions`: 設定用の型
-- `@riebeckite/theme-tokyonight/style.css`: テーマのスタイルシート
-
-## 関連資料
-
-- [テーマシステム](../../../docs/ja/theme-system.md)
-- [`@riebeckite/theme-default`](../default/README_ja.md)
-- [`@riebeckite/theme-sakura`](../sakura/README_ja.md)
+# @riebeckite/theme-tokyonight
+
+Tokyo Night の濃い藍色と鮮やかな青を、開発ツールらしい見た目に寄せたテーマです。等幅の見出し、詰まった行間、角を立てた1px罫線の面、青いアクセント、任意のネオン発光で構成します。昼向けの明るい配色と、定番の深い夜向け配色を切り替えられます。
+
+[English](./README.md)
+
+## 特長
+
+単なる配色の差し替えではなく、次のような見た目の性格を持たせています。
+
+- **等幅・大文字の見出し** — JetBrains Mono を使い、字間を広げ、アクセントの縦罫を添える
+- **角と罫線** — 面の角は直角、境界は1pxの罫線、影は使わない
+- **コード** — 等幅、1px罫線、アクセントの左罫、余白を広めにとったヘッダー風の体裁
+- **任意のネオン** — フォーカス枠、選択色、スクロールバー、リンクのホバー、見出しのアクセントに控えめな発光を足す
+
+本文はサンセリフのまま、日本語のグリフはシステムフォントにフォールバックします。ラテン文字には同梱の JetBrains Mono を使います。
+
+明るい配色では `#e1e2e7` の背景、`#343b58` の文字、`#2e7de9` のアクセントを使います。暗い配色では `#1a1b26` の背景、`#c0caf5` の文字、`#7aa2f7` のアクセントに切り替わります。
+
+## 設定する
+
+```ts
+import { defineConfig } from "@riebeckite/core";
+import { tokyonightTheme } from "@riebeckite/theme-tokyonight";
+
+export default defineConfig({
+  // ...
+  theme: tokyonightTheme({
+    colorMode: "system",
+    density: "cozy",
+    heading: "tech",
+    neon: true,
+  }),
+});
+```
+
+テーマ名は `tokyonight` です。
+
+## 変更できる項目
+
+| 項目 | 既定値 | 説明 |
+| --- | --- | --- |
+| `density` | `"cozy"` | 行間と余白。`"compact"` にすると `--rb-space-*` と見出し・段落・リストの間隔を詰める（`data-tokyonight-density`） |
+| `heading` | `"tech"` | 見出しの体裁。`"tech"` は等幅・大文字でアクセントの罫を添え、`"plain"` は大文字化と装飾を外して本文フォントに戻す（`data-tokyonight-heading`） |
+| `neon` | `false` | 青いフォーカス枠、選択色、スクロールバー、リンクのホバー、見出しのアクセントを強調する（`data-tokyonight-neon="on"`） |
+| `colorMode` | `"system"` | `"light"`、`"dark"`、`"system"` |
+| `typography` | `"system"` | `"system"`、`"serif"`、`"sans"` |
+| `articleLayout` | `"article"` | 記事レイアウトの値 |
+| `tokens` | `{}` | 共通デザイントークンの上書き |
+| `userCss` | `[]` | 追加のスタイルシート |
+
+このテーマは入力要素のアクセント色、キーボード操作時のフォーカス枠、テキスト選択、スクロールバーにも青系の色を適用します。テーマ固有の項目は `data-tokyonight-density`、`data-tokyonight-heading`、`data-tokyonight-neon` としてルート要素に付きます。`neon` は `attributes: { "data-tokyonight-neon": "on" }` として直接指定することもできます。
+
+## フォント
+
+JetBrains Mono のラテン文字サブセットを同梱しているため、外部へのリクエストは発生しません。ライセンスは SIL Open Font License で、`styles/fonts/jetbrains-mono-LICENSE.txt` に収録しています。等幅テキストと、`heading: "tech"` のときの見出しに使い、日本語のグリフはシステムフォントにフォールバックします。
+
+## 主なエクスポート
+
+- `tokyonightTheme(options?)`: テーマを作成する
+- `TokyonightThemeOptions`: 設定用の型
+- `@riebeckite/theme-tokyonight/style.css`: テーマのスタイルシート
+
+## 関連資料
+
+- [テーマシステム](../../../docs/ja/theme-system.md)
+- [`@riebeckite/theme-default`](../default/README_ja.md)
+- [`@riebeckite/theme-sakura`](../sakura/README_ja.md)

package/dist/src/index.d.ts

@@ -1,5 +1,7 @@
 import { type ThemeConfig } from "@riebeckite/core";
 export type TokyonightThemeOptions = Omit<ThemeConfig, "name" | "userCss"> & {
+    density?: "cozy" | "compact";
+    heading?: "tech" | "plain";
     neon?: boolean;
     userCss?: string[];
 };

package/dist/src/index.js

@@ -1,11 +1,18 @@
 // src/index.ts
 import { defineTheme } from "@riebeckite/core";
 function tokyonightTheme(options = {}) {
-  const { neon = false, ...config } = options;
+  const {
+    density = "cozy",
+    heading = "tech",
+    neon = false,
+    ...config
+  } = options;
   return defineTheme({
     name: "tokyonight",
     options,
     attributes: {
+      "data-tokyonight-density": density,
+      "data-tokyonight-heading": heading,
       "data-tokyonight-neon": neon ? "on" : void 0
     },
     styles: [{ moduleSpecifier: "@riebeckite/theme-tokyonight/style.css" }],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/theme-tokyonight",
-  "version": "0.0.3",
+  "version": "0.0.6",
   "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.3"
+    "@riebeckite/core": "0.0.6"
   },
   "publishConfig": {
     "access": "public"

package/styles/fonts/jetbrains-mono-LICENSE.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono) JetBrainsMono-Italic[wght].ttf: Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
+
+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,162 +1,704 @@
-@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: #e1e2e7;
-    --rb-color-surface: #d6d8df;
-    --rb-color-surface-hover: #cbcdd6;
-    --rb-color-ink: #343b58;
-    --rb-color-muted: #5c6384;
-    --rb-color-accent: #2e7de9;
-    --rb-color-border: color-mix(in srgb, currentColor 18%, transparent);
-    --rb-color-border-strong: color-mix(in srgb, currentColor 28%, transparent);
-    --rb-color-danger: #f52a65;
-    --rb-color-success: #3e8e5a;
-    --rb-color-code-background: color-mix(
-      in srgb,
-      var(--rb-color-ink) 9%,
-      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-theme="dark"] {
-    color-scheme: dark;
-    --rb-color-paper: #1a1b26;
-    --rb-color-surface: #212332;
-    --rb-color-surface-hover: #2a2c40;
-    --rb-color-ink: #c0caf5;
-    --rb-color-muted: #7982a9;
-    --rb-color-accent: #7aa2f7;
-    --rb-color-danger: #f52a65;
-    --rb-color-success: #9ece6a;
-    --rb-color-code-background: color-mix(
-      in srgb,
-      var(--rb-color-ink) 10%,
-      transparent
-    );
-    --rb-color-overlay: rgb(0 0 0 / 0.6);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    :root:not([data-theme]) {
-      color-scheme: dark;
-      --rb-color-paper: #1a1b26;
-      --rb-color-surface: #212332;
-      --rb-color-surface-hover: #2a2c40;
-      --rb-color-ink: #c0caf5;
-      --rb-color-muted: #7982a9;
-      --rb-color-accent: #7aa2f7;
-      --rb-color-danger: #f52a65;
-      --rb-color-success: #9ece6a;
-      --rb-color-code-background: color-mix(
-        in srgb,
-        var(--rb-color-ink) 10%,
-        transparent
-      );
-      --rb-color-overlay: rgb(0 0 0 / 0.6);
-    }
-  }
-
-  :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);
-    accent-color: var(--rb-color-accent);
-    caret-color: var(--rb-color-accent);
-  }
-
-  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;
-  }
-
-  :root[data-tokyonight-neon="on"] :focus-visible {
-    outline-color: var(--rb-color-accent);
-    box-shadow:
-      0 0 0 4px color-mix(in srgb, var(--rb-color-accent) 30%, transparent),
-      0 0 16px color-mix(in srgb, var(--rb-color-accent) 40%, transparent);
-  }
-
-  :root[data-tokyonight-neon="on"] ::selection {
-    background: color-mix(in srgb, var(--rb-color-accent) 85%, transparent);
-    color: color-mix(in srgb, var(--rb-color-paper) 90%, transparent);
-  }
-
-  * {
-    scrollbar-color: var(--rb-color-muted) transparent;
-    scrollbar-width: thin;
-  }
-
-  ::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: var(--rb-color-muted);
-    border-radius: 10px;
-    border: 2px solid var(--rb-color-paper);
-  }
-
-  :root[data-tokyonight-neon="on"] ::-webkit-scrollbar-thumb {
-    background: var(--rb-color-accent);
-  }
-
-  ::-webkit-scrollbar-track {
-    background: transparent;
-  }
-}
+@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 {
+  :is(:root, .rb-theme-root)[data-theme-name="tokyonight"] {
+    color-scheme: light;
+    --rb-color-paper: #e1e2e7;
+    --rb-color-surface: #d6d8df;
+    --rb-color-surface-hover: #cbcdd6;
+    --rb-color-ink: #343b58;
+    --rb-color-muted: #5c6384;
+    --rb-color-accent: #2e7de9;
+    --rb-color-border: color-mix(in srgb, currentColor 18%, transparent);
+    --rb-color-border-strong: color-mix(in srgb, currentColor 28%, transparent);
+    --rb-color-danger: #f52a65;
+    --rb-color-success: #3e8e5a;
+    --rb-color-code-background: color-mix(
+      in srgb,
+      var(--rb-color-ink) 9%,
+      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:
+      "JetBrains 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;
+  }
+
+  :is(:root, .rb-theme-root)[data-theme-name="tokyonight"][data-theme="dark"] {
+    color-scheme: dark;
+    --rb-color-paper: #1a1b26;
+    --rb-color-surface: #212332;
+    --rb-color-surface-hover: #2a2c40;
+    --rb-color-ink: #c0caf5;
+    --rb-color-muted: #7982a9;
+    --rb-color-accent: #7aa2f7;
+    --rb-color-danger: #f52a65;
+    --rb-color-success: #9ece6a;
+    --rb-color-code-background: color-mix(
+      in srgb,
+      var(--rb-color-ink) 10%,
+      transparent
+    );
+    --rb-color-overlay: rgb(0 0 0 / 0.6);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :is(:root, .rb-theme-root)[data-theme-name="tokyonight"]:not([data-theme]) {
+      color-scheme: dark;
+      --rb-color-paper: #1a1b26;
+      --rb-color-surface: #212332;
+      --rb-color-surface-hover: #2a2c40;
+      --rb-color-ink: #c0caf5;
+      --rb-color-muted: #7982a9;
+      --rb-color-accent: #7aa2f7;
+      --rb-color-danger: #f52a65;
+      --rb-color-success: #9ece6a;
+      --rb-color-code-background: color-mix(
+        in srgb,
+        var(--rb-color-ink) 10%,
+        transparent
+      );
+      --rb-color-overlay: rgb(0 0 0 / 0.6);
+    }
+  }
+
+  :is(
+    :root,
+    .rb-theme-root
+  )[data-theme-name="tokyonight"][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;
+  }
+
+  :is(
+    :root,
+    .rb-theme-root
+  )[data-theme-name="tokyonight"][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);
+  }
+
+  :is(:root, .rb-theme-root)[data-theme-name="tokyonight"] {
+    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="tokyonight"] ::selection {
+    background: var(--rb-color-accent);
+    color: var(--rb-color-paper);
+  }
+
+  :is(:root, .rb-theme-root)[data-theme-name="tokyonight"] :focus-visible {
+    outline: 2px solid var(--rb-color-accent);
+    outline-offset: 2px;
+  }
+
+  :is(
+      :root,
+      .rb-theme-root
+    )[data-theme-name="tokyonight"][data-tokyonight-neon="on"]
+    :focus-visible {
+    outline-color: var(--rb-color-accent);
+    box-shadow:
+      0 0 0 4px color-mix(in srgb, var(--rb-color-accent) 30%, transparent),
+      0 0 16px color-mix(in srgb, var(--rb-color-accent) 40%, transparent);
+  }
+
+  :is(
+      :root,
+      .rb-theme-root
+    )[data-theme-name="tokyonight"][data-tokyonight-neon="on"]
+    ::selection {
+    background: color-mix(in srgb, var(--rb-color-accent) 85%, transparent);
+    color: color-mix(in srgb, var(--rb-color-paper) 90%, transparent);
+  }
+
+  :is(:root, .rb-theme-root)[data-theme-name="tokyonight"] * {
+    scrollbar-color: var(--rb-color-muted) transparent;
+    scrollbar-width: thin;
+  }
+
+  :is(:root, .rb-theme-root)[data-theme-name="tokyonight"] ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  :is(:root, .rb-theme-root)[data-theme-name="tokyonight"]
+    ::-webkit-scrollbar-thumb {
+    background: var(--rb-color-muted);
+    border-radius: 10px;
+    border: 2px solid var(--rb-color-paper);
+  }
+
+  :is(
+      :root,
+      .rb-theme-root
+    )[data-theme-name="tokyonight"][data-tokyonight-neon="on"]
+    ::-webkit-scrollbar-thumb {
+    background: var(--rb-color-accent);
+  }
+
+  :is(:root, .rb-theme-root)[data-theme-name="tokyonight"]
+    ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}
+
+/* ------------------------------------------------------------------ *
+ * Character layer
+ *
+ * Tokyo Night identity: technical / neon. Mono display headings,
+ * a tight rhythm, square 1px-bordered surfaces, electric accents and
+ * an optional neon glow. Unlayered on purpose so it wins over the
+ * layered app and plugin stylesheets without `!important`.
+ * ------------------------------------------------------------------ */
+
+@font-face {
+  font-family: "JetBrains Mono";
+  src: url("./fonts/jetbrains-mono-latin-wght-normal.woff2")
+    format("woff2-variations");
+  font-weight: 100 800;
+  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;
+}
+
+/* Display + mono identity (Latin only; CJK falls back to the system stack). */
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"] {
+  --rb-font-heading:
+    "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono",
+    "Hiragino Sans", "Noto Sans JP", "Yu Gothic", ui-monospace, monospace;
+}
+
+/* ---- Body rhythm ---- */
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"] .rb-article-body {
+  font-family: var(--rb-font-body);
+  line-height: 1.7;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"] .rb-article-body p {
+  margin: 0.9em 0;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"]
+  .rb-article-body
+  :is(ul, ol) {
+  margin: 1em 0;
+  padding-left: 1.4em;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"] .rb-article-body li {
+  margin: 0.3em 0;
+}
+
+/* ---- Headings: tech (default) ---- */
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"] .rb-article-header {
+  margin-bottom: 1.5rem;
+  border-bottom: 2px solid var(--rb-color-accent);
+  padding-bottom: 1rem;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"] .rb-article-header h1 {
+  font-family: var(--rb-font-heading);
+  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
+  font-weight: 800;
+  line-height: 1.15;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  text-wrap: balance;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"] .rb-article-body h2 {
+  margin: 2em 0 0.75em;
+  border-left: 3px solid var(--rb-color-accent);
+  padding-left: 0.6em;
+  font-family: var(--rb-font-heading);
+  font-size: 1.25rem;
+  font-weight: 700;
+  line-height: 1.3;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"] .rb-article-body h3 {
+  margin: 1.6em 0 0.5em;
+  border-left: 2px solid var(--rb-color-border-strong);
+  padding-left: 0.5em;
+  font-family: var(--rb-font-heading);
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.35;
+  letter-spacing: 0.045em;
+  text-transform: uppercase;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"] .rb-article-body h4 {
+  margin: 1.4em 0 0.4em;
+  font-family: var(--rb-font-heading);
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--rb-color-muted);
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"]
+  .rb-article-body
+  :is(h5, h6) {
+  margin: 1.2em 0 0.4em;
+  font-family: var(--rb-font-heading);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--rb-color-muted);
+}
+
+/* ---- Headings: plain (opt-out) ---- */
+:is(
+  :root,
+  .rb-theme-root
+)[data-theme-name="tokyonight"][data-tokyonight-heading="plain"] {
+  --rb-font-heading: var(--rb-font-body);
+}
+
+:is(
+    :root,
+    .rb-theme-root
+  )[data-theme-name="tokyonight"][data-tokyonight-heading="plain"]
+  :is(.rb-article-header h1, .rb-article-body h1, .rb-article-body h2),
+:is(
+    :root,
+    .rb-theme-root
+  )[data-theme-name="tokyonight"][data-tokyonight-heading="plain"]
+  .rb-article-body
+  :is(h3, h4, h5, h6) {
+  border-left: 0;
+  padding-left: 0;
+  color: var(--rb-color-ink);
+  font-weight: 600;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+/* ---- Links ---- */
+/* Accent text is mixed toward ink so it clears WCAG AA on the day paper
+   (#2e7de9 alone is ~3.1:1) while staying an electric blue. */
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"]
+  :is(.rb-article-body, .rb-article-footer, .rb-article-meta)
+  a {
+  color: color-mix(in srgb, var(--rb-color-accent) 50%, var(--rb-color-ink));
+  text-decoration: none;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.22em;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"]
+  :is(.rb-article-body, .rb-article-footer, .rb-article-meta)
+  a:hover {
+  text-decoration: underline;
+}
+
+/* ---- Blockquote ---- */
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"]
+  .rb-article-body
+  blockquote {
+  margin: 1.5em 0;
+  border-left: 3px solid var(--rb-color-accent);
+  background: color-mix(in srgb, var(--rb-color-accent) 6%, transparent);
+  padding: 0.75em 1em;
+  color: color-mix(in srgb, var(--rb-color-ink) 85%, var(--rb-color-muted));
+  font-style: normal;
+  font-weight: 400;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"]
+  .rb-article-body
+  blockquote
+  p:first-of-type::before,
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"]
+  .rb-article-body
+  blockquote
+  p:last-of-type::after {
+  content: none;
+}
+
+/* ---- Rules ---- */
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"] .rb-article-body hr {
+  margin: 2.5em 0;
+  border: 0;
+  border-top: 1px solid var(--rb-color-accent);
+}
+
+/* ---- Code ---- */
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"]
+  .rb-article-body
+  :not(pre)
+  > code {
+  border: 1px solid var(--rb-color-border);
+  border-radius: 0;
+  background: var(--rb-color-code-background);
+  padding: 0.15em 0.4em;
+  font-family: var(--rb-font-mono);
+  font-size: 0.85em;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"]
+  .rb-article-body
+  pre:not(:where(.rr-code *)) {
+  margin: 1.5em 0;
+  border: 1px solid var(--rb-color-border);
+  border-left: 3px solid var(--rb-color-accent);
+  border-radius: 0;
+  background: var(--rb-color-code-background);
+  color: var(--rb-color-ink);
+  padding: 0.75rem 1rem;
+  font-family: var(--rb-font-mono);
+  font-size: 0.85rem;
+  line-height: 1.6;
+  overflow-x: auto;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"]
+  .rb-article-body
+  pre
+  code {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  font-size: inherit;
+}
+
+/* ---- Tables ---- */
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"]
+  .rb-article-body
+  table {
+  margin: 1.5em 0;
+  border: 1px solid var(--rb-color-border);
+  border-collapse: collapse;
+  font-size: 0.9em;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"]
+  .rb-article-body
+  thead {
+  background: color-mix(in srgb, var(--rb-color-accent) 8%, transparent);
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"]
+  .rb-article-body
+  :is(th, td) {
+  border: 1px solid var(--rb-color-border);
+  padding: 0.5em 0.75em;
+}
+
+/* ---- Media: square corners ---- */
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"]
+  :is(.rb-article-body img, .rb-article-body video, .rr-media, .rr-attachment) {
+  border-radius: 0;
+}
+
+/* ---- Article chrome ---- */
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"] .rb-article-meta {
+  margin: 0 0 1.5rem;
+  border: 1px solid var(--rb-color-border);
+  border-left: 3px solid var(--rb-color-accent);
+  border-radius: 0;
+  background: color-mix(in srgb, var(--rb-color-surface) 55%, transparent);
+  padding: 0.5rem 0.75rem;
+  font-family: var(--rb-font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--rb-color-muted);
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"] .rb-article-footer {
+  margin-top: 2.5rem;
+  border-top: 1px solid var(--rb-color-border);
+  padding-top: 1rem;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"] .rb-sidebar {
+  border-left: 2px solid var(--rb-color-border-strong);
+  padding-left: 1rem;
+  font-size: 0.9rem;
+}
+
+/* ---- Plugin roots ---- */
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"]
+  :is(.rr-table-of-contents, .rr-backlinks) {
+  margin: 1.5rem 0;
+  border: 1px solid var(--rb-color-border);
+  border-radius: 0;
+  background: color-mix(in srgb, var(--rb-color-surface) 50%, transparent);
+  padding: 0.9rem 1rem;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"]
+  :is(.rr-table-of-contents, .rr-backlinks, .rr-recent-posts)
+  a {
+  color: var(--rb-color-ink);
+  text-decoration: none;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"]
+  :is(.rr-table-of-contents, .rr-backlinks, .rr-recent-posts)
+  a:hover {
+  color: color-mix(in srgb, var(--rb-color-accent) 50%, var(--rb-color-ink));
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"] .rr-recent-posts {
+  margin: 1.5rem 0;
+  border: 1px solid var(--rb-color-border);
+  border-radius: 0;
+  background: color-mix(in srgb, var(--rb-color-surface) 50%, transparent);
+  padding: 0.9rem 1rem;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"]
+  :is(.rr-code, .rr-code-tabs) {
+  margin: 1.5rem 0;
+  border: 1px solid var(--rb-color-border);
+  border-left: 3px solid var(--rb-color-accent);
+  border-radius: 0;
+  background: var(--rb-color-code-background);
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"]
+  :is(.rr-code, .rr-code-tabs)
+  pre {
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--rb-color-ink);
+  font-family: var(--rb-font-mono);
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"] .rr-callout {
+  margin: 1.5rem 0;
+  border: 1px solid var(--rb-color-border);
+  border-left: 3px solid var(--rb-color-accent);
+  border-radius: 0;
+  background: color-mix(in srgb, var(--rb-color-accent) 6%, transparent);
+  padding: 0.9rem 1rem;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"]
+  .rr-callout
+  > :first-child {
+  font-family: var(--rb-font-mono);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--rb-color-accent) 50%, var(--rb-color-ink));
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"]
+  .rr-callout
+  p:last-child {
+  margin-bottom: 0;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"]
+  :is(.rr-local-graph, .rr-mermaid) {
+  border: 1px solid var(--rb-color-border);
+  border-radius: 0;
+  background: var(--rb-color-surface);
+  padding: 1rem;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"] .rr-search {
+  border: 1px solid var(--rb-color-border);
+  border-radius: 0;
+  background: var(--rb-color-surface);
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"]
+  .rr-search
+  :is(input, button) {
+  border-radius: 0;
+  font-family: var(--rb-font-mono);
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"] .rr-cardlink {
+  border: 1px solid var(--rb-color-border);
+  border-left: 3px solid var(--rb-color-accent);
+  border-radius: 0;
+  background: color-mix(in srgb, var(--rb-color-surface) 50%, transparent);
+  padding: 0.9rem 1rem;
+  text-decoration: none;
+}
+
+:is(:root, .rb-theme-root)[data-theme-name="tokyonight"] .rr-cardlink:hover {
+  border-color: var(--rb-color-accent);
+}
+
+/* ---- Density: compact ---- */
+:is(
+  :root,
+  .rb-theme-root
+)[data-theme-name="tokyonight"][data-tokyonight-density="compact"] {
+  --rb-space-1: 0.375rem;
+  --rb-space-2: 0.75rem;
+  --rb-space-3: 1.125rem;
+  --rb-space-4: 1.5rem;
+  --rb-space-6: 2.25rem;
+  --rb-space-8: 3rem;
+  --rb-layout-gap: 1.25rem;
+}
+
+:is(
+    :root,
+    .rb-theme-root
+  )[data-theme-name="tokyonight"][data-tokyonight-density="compact"]
+  .rb-article-body {
+  line-height: 1.6;
+}
+
+:is(
+    :root,
+    .rb-theme-root
+  )[data-theme-name="tokyonight"][data-tokyonight-density="compact"]
+  .rb-article-body
+  p {
+  margin: 0.65em 0;
+}
+
+:is(
+    :root,
+    .rb-theme-root
+  )[data-theme-name="tokyonight"][data-tokyonight-density="compact"]
+  .rb-article-body
+  :is(ul, ol) {
+  margin: 0.75em 0;
+}
+
+:is(
+    :root,
+    .rb-theme-root
+  )[data-theme-name="tokyonight"][data-tokyonight-density="compact"]
+  .rb-article-body
+  li {
+  margin: 0.2em 0;
+}
+
+:is(
+    :root,
+    .rb-theme-root
+  )[data-theme-name="tokyonight"][data-tokyonight-density="compact"]
+  .rb-article-body
+  h2 {
+  margin: 1.4em 0 0.5em;
+}
+
+:is(
+    :root,
+    .rb-theme-root
+  )[data-theme-name="tokyonight"][data-tokyonight-density="compact"]
+  .rb-article-body
+  h3 {
+  margin: 1.15em 0 0.4em;
+}
+
+:is(
+    :root,
+    .rb-theme-root
+  )[data-theme-name="tokyonight"][data-tokyonight-density="compact"]
+  .rb-article-body
+  :is(h4, h5, h6) {
+  margin: 1em 0 0.35em;
+}
+
+:is(
+    :root,
+    .rb-theme-root
+  )[data-theme-name="tokyonight"][data-tokyonight-density="compact"]
+  .rb-article-header {
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+}
+
+:is(
+    :root,
+    .rb-theme-root
+  )[data-theme-name="tokyonight"][data-tokyonight-density="compact"]
+  .rb-article-body
+  :is(pre, blockquote, table) {
+  margin: 1.1em 0;
+}
+
+:is(
+    :root,
+    .rb-theme-root
+  )[data-theme-name="tokyonight"][data-tokyonight-density="compact"]
+  .rb-article-body
+  hr {
+  margin: 1.75em 0;
+}
+
+/* ---- Neon (opt-in) ---- */
+:is(
+    :root,
+    .rb-theme-root
+  )[data-theme-name="tokyonight"][data-tokyonight-neon="on"]
+  :is(.rb-article-header h1, .rb-article-body h2, .rb-article-body h3) {
+  text-shadow: 0 0 8px
+    color-mix(in srgb, var(--rb-color-accent) 35%, transparent);
+}
+
+:is(
+    :root,
+    .rb-theme-root
+  )[data-theme-name="tokyonight"][data-tokyonight-neon="on"]
+  .rb-article-body
+  a:hover {
+  text-shadow: 0 0 6px
+    color-mix(in srgb, var(--rb-color-accent) 55%, transparent);
+}
+
+:is(
+    :root,
+    .rb-theme-root
+  )[data-theme-name="tokyonight"][data-tokyonight-neon="on"]
+  ::-webkit-scrollbar-thumb {
+  box-shadow: 0 0 6px
+    color-mix(in srgb, var(--rb-color-accent) 60%, transparent);
+}