:root {
  color-scheme: light dark;
  --fandhe-color-bg: #ffffff;
  --fandhe-color-bg-subtle: #f7f7f7;
  --fandhe-color-bg-muted: #eeeeee;
  --fandhe-color-fg: #111111;
  --fandhe-color-fg-muted: #4a4a4a;
  --fandhe-color-fg-subtle: #767676;
  --fandhe-color-border: #d9d9d9;
  --fandhe-color-border-muted: #e6e6e6;
  --fandhe-color-accent: #3182ce;
  --fandhe-color-accent-emphasized: #2b6cb0;
  --fandhe-color-accent-fg: #ffffff;
  --fandhe-color-info: #3182ce;
  --fandhe-color-info-emphasized: #2b6cb0;
  --fandhe-color-info-fg: #ffffff;
  --fandhe-color-success: #2f855a;
  --fandhe-color-success-emphasized: #276749;
  --fandhe-color-success-fg: #ffffff;
  --fandhe-color-warning: #b7791f;
  --fandhe-color-warning-emphasized: #975a16;
  --fandhe-color-warning-fg: #ffffff;
  --fandhe-color-danger: #c53030;
  --fandhe-color-danger-emphasized: #9b2c2c;
  --fandhe-color-danger-fg: #ffffff;
  --fandhe-color-chart-1: #3182ce;
  --fandhe-color-chart-2: #dd6b20;
  --fandhe-color-chart-3: #2f855a;
  --fandhe-color-chart-4: #805ad5;
  --fandhe-color-chart-5: #d53f8c;
  --fandhe-color-chart-6: #00a3c4;
  --fandhe-color-docs-accent-bg: #ebf4ff;
  --fandhe-color-docs-scroll-shadow: rgba(15,23,42,0.20);
  --fandhe-color-docs-code-keyword: #8250df;
  --fandhe-color-docs-code-string: #0a7d3f;
  --fandhe-color-docs-code-comment: #6e7781;
  --fandhe-color-docs-code-number: #0550ae;
  --fandhe-color-docs-code-tag: #b35900;
  --fandhe-color-docs-code-attr: #953800;
  --fandhe-space-1: 0.25rem;
  --fandhe-space-2: 0.5rem;
  --fandhe-space-3: 0.75rem;
  --fandhe-space-4: 1rem;
  --fandhe-space-5: 1.25rem;
  --fandhe-space-6: 1.5rem;
  --fandhe-space-8: 2rem;
  --fandhe-space-10: 2.5rem;
  --fandhe-space-12: 3rem;
  --fandhe-space-16: 4rem;
  --fandhe-space-docs-container-width: 88rem;
  --fandhe-space-docs-gutter: 1rem;
  --fandhe-space-docs-sidebar-width: 16rem;
  --fandhe-space-docs-max-content-width: 46rem;
  --fandhe-space-docs-header-height: 3.25rem;
  --fandhe-space-docs-toc-width: 14rem;
  --fandhe-font-font-body: system-ui, -apple-system, sans-serif;
  --fandhe-font-font-mono: ui-monospace, monospace;
  --fandhe-font-font-size-xs: 0.75rem;
  --fandhe-font-font-size-sm: 0.875rem;
  --fandhe-font-font-size-md: 1rem;
  --fandhe-font-font-size-lg: 1.125rem;
  --fandhe-font-font-size-xl: 1.25rem;
  --fandhe-font-font-size-2xl: 1.5rem;
  --fandhe-font-font-size-3xl: 1.875rem;
  --fandhe-font-font-size-4xl: 2.25rem;
  --fandhe-font-font-weight-normal: 400;
  --fandhe-font-font-weight-medium: 500;
  --fandhe-font-font-weight-semibold: 600;
  --fandhe-font-font-weight-bold: 700;
  --fandhe-font-line-height-tight: 1.25;
  --fandhe-font-line-height-normal: 1.5;
  --fandhe-font-line-height-relaxed: 1.75;
  --fandhe-radius-sm: 0.25rem;
  --fandhe-radius-md: 0.375rem;
  --fandhe-radius-lg: 0.5rem;
  --fandhe-radius-xl: 0.75rem;
  --fandhe-radius-full: 9999px;
  --fandhe-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
  --fandhe-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --fandhe-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --fandhe-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.16);
}
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fandhe-color-bg: #111111;
    --fandhe-color-bg-subtle: #1a1a1a;
    --fandhe-color-bg-muted: #242424;
    --fandhe-color-fg: #f7f7f7;
    --fandhe-color-fg-muted: #cccccc;
    --fandhe-color-fg-subtle: #a3a3a3;
    --fandhe-color-border: #3a3a3a;
    --fandhe-color-border-muted: #2a2a2a;
    --fandhe-color-accent: #4299e1;
    --fandhe-color-accent-emphasized: #63b3ed;
    --fandhe-color-accent-fg: #0b1720;
    --fandhe-color-info: #63b3ed;
    --fandhe-color-info-emphasized: #90cdf4;
    --fandhe-color-info-fg: #0b1720;
    --fandhe-color-success: #68d391;
    --fandhe-color-success-emphasized: #9ae6b4;
    --fandhe-color-success-fg: #0b1a12;
    --fandhe-color-warning: #f6ad55;
    --fandhe-color-warning-emphasized: #fbd38d;
    --fandhe-color-warning-fg: #1a1203;
    --fandhe-color-danger: #fc8181;
    --fandhe-color-danger-emphasized: #feb2b2;
    --fandhe-color-danger-fg: #1a0b0b;
    --fandhe-color-chart-1: #63b3ed;
    --fandhe-color-chart-2: #f6ad55;
    --fandhe-color-chart-3: #68d391;
    --fandhe-color-chart-4: #b794f4;
    --fandhe-color-chart-5: #f687b3;
    --fandhe-color-chart-6: #76e4f7;
    --fandhe-color-docs-accent-bg: #1c2740;
    --fandhe-color-docs-scroll-shadow: rgba(0,0,0,0.55);
    --fandhe-color-docs-code-keyword: #d2a8ff;
    --fandhe-color-docs-code-string: #7ee787;
    --fandhe-color-docs-code-comment: #8b949e;
    --fandhe-color-docs-code-number: #79c0ff;
    --fandhe-color-docs-code-tag: #ffa657;
    --fandhe-color-docs-code-attr: #ffab70;
    --fandhe-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.24);
    --fandhe-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32);
    --fandhe-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --fandhe-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fandhe-color-bg: #111111;
  --fandhe-color-bg-subtle: #1a1a1a;
  --fandhe-color-bg-muted: #242424;
  --fandhe-color-fg: #f7f7f7;
  --fandhe-color-fg-muted: #cccccc;
  --fandhe-color-fg-subtle: #a3a3a3;
  --fandhe-color-border: #3a3a3a;
  --fandhe-color-border-muted: #2a2a2a;
  --fandhe-color-accent: #4299e1;
  --fandhe-color-accent-emphasized: #63b3ed;
  --fandhe-color-accent-fg: #0b1720;
  --fandhe-color-info: #63b3ed;
  --fandhe-color-info-emphasized: #90cdf4;
  --fandhe-color-info-fg: #0b1720;
  --fandhe-color-success: #68d391;
  --fandhe-color-success-emphasized: #9ae6b4;
  --fandhe-color-success-fg: #0b1a12;
  --fandhe-color-warning: #f6ad55;
  --fandhe-color-warning-emphasized: #fbd38d;
  --fandhe-color-warning-fg: #1a1203;
  --fandhe-color-danger: #fc8181;
  --fandhe-color-danger-emphasized: #feb2b2;
  --fandhe-color-danger-fg: #1a0b0b;
  --fandhe-color-chart-1: #63b3ed;
  --fandhe-color-chart-2: #f6ad55;
  --fandhe-color-chart-3: #68d391;
  --fandhe-color-chart-4: #b794f4;
  --fandhe-color-chart-5: #f687b3;
  --fandhe-color-chart-6: #76e4f7;
  --fandhe-color-docs-accent-bg: #1c2740;
  --fandhe-color-docs-scroll-shadow: rgba(0,0,0,0.55);
  --fandhe-color-docs-code-keyword: #d2a8ff;
  --fandhe-color-docs-code-string: #7ee787;
  --fandhe-color-docs-code-comment: #8b949e;
  --fandhe-color-docs-code-number: #79c0ff;
  --fandhe-color-docs-code-tag: #ffa657;
  --fandhe-color-docs-code-attr: #ffab70;
  --fandhe-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.24);
  --fandhe-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32);
  --fandhe-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --fandhe-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
}
[data-scope="nav-list"][data-part="heading"] {
  font-size: var(--fandhe-font-font-size-sm);
  font-weight: var(--fandhe-font-font-weight-medium);
  color: var(--fandhe-color-fg-muted);
  margin: 0;
}

[data-scope="nav-list"][data-part="list"] {
  list-style: none;
  margin: 0;
  padding: 0;
}

[data-scope="nav-list"][data-part="link"] {
  display: block;
  color: var(--fandhe-color-fg);
  text-decoration: none;
}

[data-scope="nav-list"][data-part="link"][aria-current="page"] {
  color: var(--fandhe-color-accent, var(--fandhe-color-fg));
  font-weight: var(--fandhe-font-font-weight-medium);
}
*,
*::before,
*::after {
box-sizing: border-box;
}

html {
color-scheme: light dark;
}

body {
margin: 0;
background: var(--fandhe-color-bg);
color: var(--fandhe-color-fg);
font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans",
"Noto Sans CJK JP", "Yu Gothic", sans-serif;
font-size: 15.5px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}

/* ---- ヘッダー ---- */

.docs-header {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
height: var(--fandhe-space-docs-header-height);
padding: 0;
border-bottom: 1px solid var(--fandhe-color-border);
background: var(--fandhe-color-bg);
}

/*
* ヘッダー内側の枠。fandhe-backend の docs サイトとヘッダーの見た目を
* 統一するため（イシュー #1110 の続き）、backend `site/assets/site.css` の
* `.docs-header { padding: 0 1.5rem; }` と同じ全幅バー（max-width なし・
* viewport 基準 padding）にする。イシュー #949 の「ヘッダー左端と
* サイドバー左端を同一計測枠（`--fandhe-space-docs-container-width` +
* gutter）で揃える」設計は backend 統一を優先して廃止した。
*/
.docs-header-inner {
display: flex;
align-items: center;
width: 100%;
height: 100%;
min-width: 0;
padding: 0 1.5rem;
}

/*
* ブランド。fandhe-backend `.docs-header a.docs-brand` と同値（イシュー
* #1110 の続き。backend は brand に padding を持たない）。旧 #949 の
* サイドバー左端揃え用 padding（0.32rem 0.5rem 0.32rem calc(0.5rem + 2px)）
* は全幅バー化に伴い廃止した。
*/
.docs-brand {
font-weight: 600;
font-size: 0.95rem;
letter-spacing: -0.01em;
color: var(--fandhe-color-fg);
text-decoration: none;
}

/*
* ---- ヘッダーナビ（セクション別ドロップダウン、イシュー #908） ----
*
* 基底（768px 未満）では非表示（`min-width: 768px` の @media ブロックで表示に
* 切り替える）。モバイルは既存のサイドバー折りたたみトグルがナビ手段を
* 提供する（`.docs-sidebar-toggle-label` 参照）。ドロップダウンの開閉は JS を
* 使わず `:hover`/`:focus-within` のみで行う（`crate::nav::header_nav` の
* rustdoc「イシュータイトルとの差分」参照）。
*/
.docs-header-nav {
display: none;
}

.docs-header-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 0.25rem;
}

.docs-header-group {
position: relative;
}

/*
* トリガーは a 要素（href 属性つき、セクショントップページへの遷移
* リンク、イシュー #1012）。`crate::nav::header_nav` が
* `data-scope="nav-list"` を持たない要素として直接組み立てるため、
* `nav_list::stylesheet()` の `[data-scope="nav-list"][data-part="link"]`
* （詳細度 0,2,0）は適用されない。よってこの class セレクタ（詳細度 0,1,0）
* だけで確定させてよく、ドロップダウン内リンク（`.docs-header-dropdown a`）
* が必要とする `.docs-header nav.docs-header-nav` プレフィックスは不要
* （#908 Bugbot 指摘の再発防止コメント）。旧 button 要素用の
* `background: none; border: none; cursor: pointer;` リセットは a 要素では
* 不要（`cursor: pointer` は `a[href]` の既定）なので削除し、a 要素の既定
* 下線を抑止する `text-decoration: none` を追加する。
*/
.docs-header-trigger {
display: block;
/* padding は fandhe-backend `.docs-header-trigger` と同値（イシュー
* #1110 の続き、旧 0.4rem 0.6rem）。 */
padding: 0.3rem 0.65rem;
border-radius: 0.4rem;
font: inherit;
font-size: 0.85rem;
font-weight: 500;
color: var(--fandhe-color-fg);
text-decoration: none;
}

.docs-header-trigger:hover {
background: var(--fandhe-color-bg-subtle);
}

.docs-header-trigger:focus-visible {
outline: 2px solid var(--fandhe-color-accent);
outline-offset: 2px;
}

/*
* 現在セクションの表現（イシュー #1012）。ドロップダウン内リンクの
* `a[aria-current="page"]`（ページ完全一致）とは軸が異なる
* `[aria-current="true"]` を使うため、同一トークン
* `--fandhe-color-docs-accent-bg` を再利用しても意味は衝突しない。
*/
.docs-header-trigger[aria-current="true"] {
color: var(--fandhe-color-accent);
background: var(--fandhe-color-docs-accent-bg);
}

/*
* ---- ヘッダーアクション（GitHub リンク・テーマトグル、イシュー #951） ----
*
* `docs-header-nav` の有無に関わらず常に出力される（`crate::layout` 参照）。
* fandhe-backend `.docs-header-actions` と同値（イシュー #1110 の続き、
* 旧 gap 0.5rem）: ヘッダーナビは brand 直後に左寄せ（`min-width: 768px`
* ブロックの `.docs-header-nav { margin-left: 1.25rem; }` 参照）とし、
* 右寄せは常に本要素の `margin-left: auto` のみが担う（旧設計の
* `.docs-header-nav + .docs-header-actions` による auto 打ち消し override
* は不要になり削除した。`header_nav: None` 構成でも同一規則で右端配置
* される）。
*/
.docs-header-actions {
display: flex;
align-items: center;
gap: 0.9rem;
margin-left: auto;
}

/*
* GitHub リンクは枠なしのプレーンテキストリンク（fandhe-backend
* `.docs-github-link` と同値、イシュー #1110 の続き。旧 padding/
* border-radius/hover 背景は廃止）。色は既存 fandhe トークンのまま
* （配色非統一は既決事項、コミット de83bc2）。
*/
.docs-github-link {
font-size: 0.85rem;
font-weight: 500;
color: var(--fandhe-color-fg-muted);
text-decoration: none;
}

.docs-github-link:hover {
color: var(--fandhe-color-fg);
}

.docs-github-link:focus-visible {
outline: 2px solid var(--fandhe-color-accent);
outline-offset: 2px;
}

/*
* テーマトグルはボタン風の枠付き（fandhe-backend `.docs-theme-toggle` と
* 同値、イシュー #1110 の続き。旧: 枠なし・hover 背景のみ）。色は既存
* fandhe トークンのまま（配色非統一は既決事項、コミット de83bc2）。
*/
.docs-theme-toggle {
display: block;
font: inherit;
font-size: 0.85rem;
font-weight: 500;
color: var(--fandhe-color-fg-muted);
background: var(--fandhe-color-bg-subtle);
border: 1px solid var(--fandhe-color-border);
border-radius: 0.4rem;
padding: 0.3rem 0.65rem;
cursor: pointer;
}

.docs-theme-toggle:hover {
color: var(--fandhe-color-fg);
border-color: var(--fandhe-color-accent);
}

.docs-theme-toggle:focus-visible {
outline: 2px solid var(--fandhe-color-accent);
outline-offset: 2px;
}

/*
* JS 無効時・`assets/site.js` の読み込み失敗時の退避経路（イシュー #951
* 受入条件）。`crate::layout` は既定で `hidden` 属性を付与し、`site.js` は
* イベント配線が完了した後にのみこの属性を除去する（`crate::script`
* モジュール doc 手順 5 参照）。詳細度 0,2,0 で `.docs-theme-toggle`
* （0,1,0）に順序非依存で勝つ。
*/
.docs-theme-toggle[hidden] {
display: none;
}

/*
* ---- 検索 UI（素の JS、イシュー #958） ----
*
* `.docs-header-actions` の第 1 子（`crate::layout` 参照）。既定 `hidden` の
* 退避経路は `.docs-theme-toggle[hidden]` と同型（配線完了後にのみ
* `crate::script::SITE_JS` が `hidden` を除去する）。`display: none` にせず
* `min-width: 0` + `max-width` で縮小に任せるため、狭幅帯域でも要素自体は
* 消さない（`hidden` 属性のみが非表示の唯一の情報源）。
*/
.docs-search {
position: relative;
display: flex;
align-items: center;
min-width: 0;
}

.docs-search[hidden] {
display: none;
}

/*
* 検索入力のラベル（イシュー #958 の検索 UI に付随する視覚実装。
* fandhe-backend の docs サイトとデザインを統一するため追加した。正は
* fandhe-backend `site/assets/site.css` の `.docs-search-label` clip
* 規則）。`for`/`id`
* 対応（`crate::layout` の `input#docs-search-input`）は保つが視覚上のみ
* clip 手法で隠す（`.skip-nav` と同型、a11y のためタブ順序・スクリーン
* リーダー読み上げ対象からは除外しない）。
*/
.docs-search-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

/*
* 検索入力は fandhe-backend `.docs-search-input` の寸法（width 12rem・
* padding 0.3rem 0.65rem・radius 0.4rem・subtle 背景）へ統一（イシュー
* #1110 の続き。旧: width 100% + max-width 9rem・padding 0.35rem 0.6rem・
* radius var(--fandhe-radius-sm)・bg 背景）。`min-width: 0` は狭幅帯域で
* flex 縮小を許すために残す。font-size は既存トークン（0.85rem 相当）の
* まま。
*/
.docs-search-input {
width: 12rem;
min-width: 0;
font: inherit;
font-size: var(--fandhe-font-font-size-sm);
padding: 0.3rem 0.65rem;
border: 1px solid var(--fandhe-color-border);
border-radius: 0.4rem;
background: var(--fandhe-color-bg-subtle);
color: var(--fandhe-color-fg);
}

.docs-search-input:focus-visible {
outline: 2px solid var(--fandhe-color-accent);
outline-offset: 2px;
}

/*
* 検索結果パネル。`.docs-header`（z-index 10）・`.docs-header-dropdown`
* （z-index 20）より上に出すため z-index 30 を使う（`.docs-header`/
* `.docs-header-inner` はいずれも `overflow` を宣言していないため絶対配置
* パネルはクリップされない）。
*/
.docs-search-results {
position: absolute;
top: 100%;
right: 0;
z-index: 30;
margin: 0.25rem 0 0;
padding: 0.25rem;
list-style: none;
min-width: 18rem;
max-height: 60vh;
overflow-y: auto;
background: var(--fandhe-color-bg);
border: 1px solid var(--fandhe-color-border);
border-radius: var(--fandhe-radius-sm);
}

.docs-search-results[hidden] {
display: none;
}

/* 以下 4 class（`.docs-search-result*`・`.docs-search-empty`）は
* `crate::script::SITE_JS` が実行時に `document.createElement` で生成する
* ため SSG 出力（`crates/docs-site/tests/site_css_contract.rs` の層 1
* `STRUCTURE_CLASS_CONTRACT`）には出現しない。`SEARCH_JS_ONLY_CLASSES`
* （同ファイル）が (b) セレクタ存在・(a′) SITE_JS へのリテラル出現・
* (c′) HTML 非出現の 3 方向で別枠検証する。 */
.docs-search-result {
display: block;
border-radius: var(--fandhe-radius-sm);
}

.docs-search-result > a {
display: block;
padding: 0.4rem 0.6rem;
text-decoration: none;
color: var(--fandhe-color-fg);
}

.docs-search-result[aria-selected="true"] {
background: var(--fandhe-color-bg-subtle);
}

.docs-search-result-title {
display: block;
font-size: var(--fandhe-font-font-size-sm);
font-weight: 500;
}

.docs-search-result-section {
display: block;
color: var(--fandhe-color-fg-muted);
font-size: var(--fandhe-font-font-size-sm);
}

.docs-search-empty {
display: block;
padding: 0.5rem 0.6rem;
color: var(--fandhe-color-fg-muted);
}

/*
* `.docs-header-dropdown` の開閉状態の唯一の情報源は `:hover`/`:focus-within`
* （マウス操作・キーボード操作の双方をカバーする。JS を使わないため
* `aria-expanded` 等の動的属性で開閉状態を表現しない、`header_nav` rustdoc
* 参照）。
*
* `header_nav` は headless `nav_list` anatomy（`nav::sidebar` と同じ
* `data-scope="nav-list" data-part="list|link"`）を再利用しているため、
* `nav_list::stylesheet()` の `[data-scope="nav-list"][data-part="..."]`
* ルール（詳細度 0,2,0・`[data-part][aria-current="page"]` は 0,3,0）が
* 素の class セレクタ（0,1,0/0,1,1）に競り勝ち、dropdown の padding・
* リンク色・カレントページの font-weight が適用されない不具合があった
* （Bugbot 指摘、イシュー #908 PR #919 レビュー）。サイドバーが
* `.docs-sidebar nav.sidebar ...`（詳細度 0,2,1 以上）で対策済みなのと
* 同型で、以下 padding/color/font-weight を上書きするセレクタは
* `.docs-header nav.docs-header-nav .docs-header-dropdown ...`
* （詳細度 0,3,1 以上、`nav_list` 側の最大 0,3,0 を常に上回る）で
* 固定する。開閉トグル（`display`）・右端アンカー（`left`/`right`）は
* `nav_list::stylesheet()` 側に競合するプロパティが存在しないため
* プレフィックス不要のまま据え置く。
*/
.docs-header nav.docs-header-nav .docs-header-dropdown {
position: absolute;
top: 100%;
left: 0;
display: none;
z-index: 20;
/* 寸法は fandhe-backend `.docs-header-dropdown` と同値（イシュー #1110
* の続き、旧 min-width 12rem / padding 0.35rem）。 */
min-width: 14rem;
margin: 0;
padding: 0.4rem;
list-style: none;
border: 1px solid var(--fandhe-color-border);
border-radius: 0.5rem;
background: var(--fandhe-color-bg);
/* 影はライト/ダークで光量が異なるため `--fandhe-shadow-*`（イシュー #606
* の DualModeToken、`Theme::default` の `DEFAULT_SHADOWS`）を参照する。
* 生 rgba を書くとダーク背景で輪郭が視認できない（イシュー #912 是正）。 */
box-shadow: var(--fandhe-shadow-md);
}

.docs-header nav.docs-header-nav .docs-header-group:hover > .docs-header-dropdown,
.docs-header nav.docs-header-nav .docs-header-group:focus-within > .docs-header-dropdown {
display: block;
}

/*
* 最後（最右）のグループのみ右端アンカー（`right: 0`）に切り替える
* （Bugbot 指摘、イシュー #908 PR #919 レビュー由来）。ヘッダー統一
* （イシュー #1110 の続き）でナビは brand 直後の左寄せになり右端に接する
* 可能性は下がったが、狭幅（768px 直上）でセクション数が多い場合は依然
* 右はみ出しが起こりうるため、防御規則として維持する。
*/
.docs-header nav.docs-header-nav .docs-header-group:last-child > .docs-header-dropdown {
left: auto;
right: 0;
}

.docs-header nav.docs-header-nav .docs-header-dropdown a {
display: block;
padding: 0.32rem 0.5rem;
border-radius: 0.4rem;
color: var(--fandhe-color-fg-muted);
text-decoration: none;
font-size: 0.85rem;
}

.docs-header nav.docs-header-nav .docs-header-dropdown a:hover {
color: var(--fandhe-color-fg);
background: var(--fandhe-color-bg-subtle);
}

.docs-header nav.docs-header-nav .docs-header-dropdown a[aria-current="page"] {
background: var(--fandhe-color-docs-accent-bg);
color: var(--fandhe-color-accent);
font-weight: 600;
}

/*
* ---- 3 カラムレイアウト（イシュー #907、mobile-first） ----
*
* 基底（768px 未満）は 1 カラム縦積み。`min-width: 768px` で左ナビ + 中央
* コンテンツの 2 カラム grid、`min-width: 1200px` で右目次カラムを加えた
* 3 カラム grid になる（設計文書 §3.2）。右目次カラムの sticky 追従・
* 視覚スタイルの仕上げは #909。左ナビの折りたたみトグル UI・pre-styled-ui
* スタイル適用は #910 で完了した（`nav_list::stylesheet()` の配線、下記
* 「サイドバー（左ナビ）」節参照）。
*/

.docs-container {
display: block;
max-width: var(--fandhe-space-docs-container-width);
margin: 0 auto;
}

/*
* ---- サイドバー（左ナビ、イシュー #910） ----
*
* headless `nav_list`（`nav::sidebar()` の実出力、`data-scope="nav-list"
* data-part="heading|list|item|link"`）へ `nav_list::stylesheet()`（下記
* `stylesheet()` 関数、`push_theme` の直後に `push_css`）が list-style 除去・
* `ul`/`h2` の margin リセット・link の `display: block`/`text-decoration:
* none`・`[aria-current="page"]` の accent 色を基底として提供する。
* ここでは docs 固有の差分（余白・角丸・hover 背景・現在ページの
* アクセントバー）のみを `.docs-sidebar nav.sidebar` の詳細度
* （0,2,1・`[data-scope][data-part]` の 0,2,0 より高い）で上書きする
* （両者の連結順は [`stylesheet`] 参照。docs 側セレクタが常にカスケード
* 後方かつ高詳細度のため衝突しない）。
*/

.docs-sidebar {
width: 100%;
padding: var(--fandhe-space-docs-gutter);
border-right: none;
border-bottom: 1px solid var(--fandhe-color-border);
font-size: var(--fandhe-font-font-size-sm);
}

/*
* 折りたたみ対象は `nav.sidebar`（`aside.docs-sidebar` ではなく）。基底
* （768px 未満）は `max-height` で 1 行程度に折りたたむ（JS 不要、`layout.rs`
* モジュール doc 参照）。開閉状態の唯一の情報源はチェックボックスの
* `:checked` とする（focus-within 系疑似クラスを OR で加えない）。フォーカスが
* ナビ内に残ったままチェックを外しても閉じられなくなる回帰があったため
* （Bugbot 指摘 #916 是正）。チェックボックス自体は sr-only パターンで
* 視覚的に隠すのみで DOM から除去しないため（`.docs-sidebar-toggle`
* 参照）、クリップされたリンクへも Tab で到達でき、チェックボックス自体を
* Space キーで開閉できる（a11y 上の後退なし）。
*/
.docs-sidebar nav.sidebar {
max-height: 2.75rem;
overflow: hidden;
}

.docs-sidebar-toggle:checked ~ nav.sidebar {
max-height: none;
overflow: visible;
}

/*
* `.docs-sidebar-toggle`（input 要素（type="checkbox"））は sr-only パターンで
* 視覚的に隠すのみで DOM からは除去しない（Tab フォーカス・Enter/Space
* 操作の対象から外さない。`display: none`/`visibility: hidden` にしない
* 理由）。`min-width: 768px`（折りたたみ自体を行わない帯域）では
* `display: none` に切り替える（下記 `@media` ブロック。この帯域では
* サイドバーが常時全展開のためチェックボックスの状態自体が意味を持たなく
* なり、キーボードユーザーが無意味なコントロールへ無駄にフォーカスを
* 奪われる回帰を避ける、Bugbot 指摘 #916 是正）。
*/
.docs-sidebar-toggle {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

/*
* `.docs-sidebar-toggle-label` はチェックボックスの可視トリガー。基底
* （768px 未満、折りたたみが有効な帯域）でのみ表示し、`min-width: 768px`
* （折りたたみ自体を行わない帯域、下記 `@media` ブロック）では非表示にする。
*/
.docs-sidebar-toggle-label {
display: block;
cursor: pointer;
padding: 0.4rem 0.6rem;
margin: -0.4rem -0.6rem 0.4rem;
border-radius: 0.4rem;
font-size: 0.8rem;
font-weight: var(--fandhe-font-font-weight-semibold);
color: var(--fandhe-color-accent);
}

.docs-sidebar-toggle-label:hover {
background: var(--fandhe-color-bg-subtle);
}

.docs-sidebar nav.sidebar {
display: flex;
flex-direction: column;
gap: 0.2rem;
}

.docs-sidebar nav.sidebar h2 {
font-weight: var(--fandhe-font-font-weight-semibold);
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fandhe-color-fg-muted);
margin: 1.1rem 0.5rem 0.3rem;
}

.docs-sidebar nav.sidebar h2:first-child {
margin-top: 0;
}

.docs-sidebar nav.sidebar ul {
margin: 0 0 0.4rem;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.05rem;
}

.docs-sidebar nav.sidebar li {
margin: 0;
}

.docs-sidebar nav.sidebar a {
padding: 0.32rem 0.5rem;
border-radius: 0.4rem;
color: var(--fandhe-color-fg-muted);
font-size: var(--fandhe-font-font-size-sm);
border-left: 2px solid transparent;
}

.docs-sidebar nav.sidebar a:hover {
color: var(--fandhe-color-fg);
background: var(--fandhe-color-bg-subtle);
}

.docs-sidebar nav.sidebar a[aria-current="page"] {
background: var(--fandhe-color-docs-accent-bg);
color: var(--fandhe-color-accent);
border-left-color: var(--fandhe-color-accent);
font-weight: var(--fandhe-font-font-weight-semibold);
}

/*
* ---- サイドバー内カテゴリ階層（details/summary、イシュー #940） ----
*
* `crate::nav::sidebar()` のグループ描画（`[[section.group]]`）が出力する
* `details.docs-nav-group` / `.docs-nav-group-summary` / `.docs-nav-group-list`
* の骨格 CSS。`.docs-nav-group-list` は nav_list `list()` を再利用しており
* `[data-scope="nav-list"][data-part="list"]`（詳細度 0,2,0）と競合するため、
* 直下ページ `ul`（上記）と同型に `.docs-sidebar nav.sidebar ...`
* （詳細度 0,2,1 以上）で確実に上書きする（#908/PR #919 で実際に踏んだ
* 詳細度の罠の再発防止）。
*/
.docs-sidebar nav.sidebar details.docs-nav-group {
margin: 0.2rem 0;
border-top: 1px solid var(--fandhe-color-border);
padding-top: 0.2rem;
}

.docs-sidebar nav.sidebar .docs-nav-group-summary {
cursor: pointer;
list-style: none;
padding: 0.32rem 0.5rem;
border-radius: 0.4rem;
font-weight: var(--fandhe-font-font-weight-semibold);
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fandhe-color-fg-muted);
}

/* Chrome/Safari のデフォルト三角マーカーを消し、上記 uppercase 見出し体裁と
* 揃える（`::marker`（Firefox 系）と `::-webkit-details-marker`
* （Chromium/Safari 系）の両方を明示的に消す必要がある）。 */
.docs-sidebar nav.sidebar .docs-nav-group-summary::marker,
.docs-sidebar nav.sidebar .docs-nav-group-summary::-webkit-details-marker {
display: none;
}

.docs-sidebar nav.sidebar .docs-nav-group-summary:hover {
background: var(--fandhe-color-bg-subtle);
}

.docs-sidebar nav.sidebar .docs-nav-group-summary:focus-visible {
outline: 2px solid var(--fandhe-color-accent);
outline-offset: 2px;
}

.docs-sidebar nav.sidebar .docs-nav-group-list {
margin: 0.1rem 0 0.2rem;
padding: 0;
padding-left: 0.6rem;
display: flex;
flex-direction: column;
gap: 0.05rem;
}

/* ---- 本文カラム ---- */

.docs-main {
min-width: 0;
padding: 1.5rem 1.1rem 3rem;
}

.docs-content {
display: block;
max-width: var(--fandhe-space-docs-max-content-width);
margin: 0 auto;
}

/* ---- 右目次カラム内のページ内目次（イシュー #909） ---- */

/*
* #907 まではカード風（本文内配置）だったが、#909 で `aside.docs-toc-aside`
* （右カラム）専用の視覚へ書き換えた。カード装飾（border/background/
* max-width）を除去し、細身のインデックス表現にする。h2/h3 の階層表現
* （`.docs-toc-level-2` / `-3` のインデント）は既存契約のまま不変。
*/
.docs-toc {
font-size: 0.8rem;
line-height: 1.5;
}

/*
* 右目次の見出し（イシュー #950）。サイドバーのカテゴリ見出し
* （`.docs-sidebar nav.sidebar h2`、上記）と同じ uppercase の小見出し
* 体裁に揃える。`nav.docs-toc` の `aria-labelledby` が本要素の `id`
* （`crate::layout::TOC_HEADING_ID`）を参照する。
*/
.docs-toc-title {
margin: 0 0 0.5rem;
font-size: 0.72rem;
font-weight: var(--fandhe-font-font-weight-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fandhe-color-fg-muted);
}

.docs-toc ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.2rem;
}

.docs-toc a {
display: block;
color: var(--fandhe-color-fg-muted);
text-decoration: none;
/* 長い `h3` タイトル（例: API ページの `placement API` 節見出し）が
* 14rem の右カラム内で単語境界を越えて折り返せるようにする。テキスト
* の切り詰め（ellipsis/line-clamp）は行わない（情報欠落を招くため）。
*/
overflow-wrap: anywhere;
padding: 0.12rem 0 0.12rem 0.5rem;
border-left: 2px solid transparent;
}

.docs-toc a:hover {
color: var(--fandhe-color-accent);
}

/*
* 現在地ハイライト（イシュー #950）。`aria-current="location"` は
* `crate::script::SITE_JS` の IntersectionObserver がスクロール位置に
* 応じて実行時にのみ付与する（SSG が出力する静的 markup には含まれない）。
* サイドバーの `aria-current="page"`（現在ページ）と値を分けることで
* 意味の衝突を避ける。JS 無効・`site.js` 読み込み失敗時はこの規則が一切
* 一致せず、通常のリンク表示のまま機能する（progressive enhancement）。
*/
.docs-toc a[aria-current="location"] {
color: var(--fandhe-color-accent);
font-weight: var(--fandhe-font-font-weight-medium);
border-left-color: var(--fandhe-color-accent);
}

.docs-toc-level-2 {
padding-left: 0;
}

.docs-toc-level-3 {
/* 1rem から縮小（イシュー #950）。長い `h3` タイトルの折り返し時に
* 実効幅を確保し、過大インデントで読みにくくなるのを防ぐ。 */
padding-left: 0.5rem;
}

/* ---- 本文冒頭の折りたたみ目次（`nav.docs-toc-inline`。イシュー #1080） ---- */

/*
* `aside.docs-toc-aside`（右目次カラム）が `min-width: 1200px` 未満で
* `display: none` になる代替の JS 非依存な到達手段。基底帯域では表示し、
* `min-width: 1200px` 側（下記）で非表示へ切り替えて右目次カラムとの
* 重複表示を避ける（`crate::layout::toc_inline` rustdoc 参照）。幅・左端は
* `.docs-content` と揃える。
*/
.docs-toc-inline {
display: block;
max-width: var(--fandhe-space-docs-max-content-width);
margin: 0 auto 1.5rem;
}

.docs-toc-inline-summary {
cursor: pointer;
font-size: 0.8rem;
font-weight: var(--fandhe-font-font-weight-semibold);
padding: 0.5rem 0.7rem;
border: 1px solid var(--fandhe-color-border);
border-radius: 0.4rem;
color: var(--fandhe-color-fg-muted);
}

.docs-toc-inline-summary:hover {
color: var(--fandhe-color-fg);
background: var(--fandhe-color-bg-subtle);
}

.docs-toc-inline-summary:focus-visible {
outline: 2px solid var(--fandhe-color-accent);
outline-offset: 2px;
}

.docs-toc-inline ul {
list-style: none;
margin: 0.5rem 0 0;
padding: 0.3rem 0.7rem 0.3rem 1rem;
border-left: 1px solid var(--fandhe-color-border);
display: flex;
flex-direction: column;
gap: 0.25rem;
}

.docs-toc-inline a {
display: block;
color: var(--fandhe-color-fg-muted);
text-decoration: none;
overflow-wrap: anywhere;
padding: 0.1rem 0;
}

.docs-toc-inline a:hover {
color: var(--fandhe-color-accent);
}

/* ---- 右目次カラム（`aside.docs-toc-aside`。イシュー #907） ---- */

/*
* 基底・768px 帯域（2 カラム）では非表示。狭幅では「右目次 → 左ナビ」の
* 順に畳む要件どおり、目次カラムのみを先に隠す。1200px 以上で表示に切り替え、
* sticky 追従を有効化する（`min-width: 1200px` 側、下記。イシュー #909）。
*/
.docs-toc-aside {
display: none;
}

/* ---- 前後ページナビ（本文末尾、カード風） ---- */

nav.prev-next {
display: flex;
/* 基底（768px 未満）は縦積み。`min-width: 768px` で横並びに切り替える。 */
flex-direction: column;
gap: 0.75rem;
margin: 2.5rem 0 0;
max-width: var(--fandhe-space-docs-max-content-width);
}

nav.prev-next .prev,
nav.prev-next .next {
flex: 1 1 0;
display: flex;
}

nav.prev-next [data-part="overlay"] {
flex: 1 1 0;
display: block;
padding: 0.85rem 1rem;
border: 1px solid var(--fandhe-color-border);
border-radius: 0.65rem;
color: var(--fandhe-color-fg);
text-decoration: none;
font-size: 0.9rem;
font-weight: var(--fandhe-font-font-weight-medium);
background: var(--fandhe-color-bg-subtle);
}

/*
* hover 時はサイドバー現在ページと同じアクセント配色（枠線・文字色・
* `--fandhe-color-docs-accent-bg` 背景）で統一し、左ナビ・前後ページャの
* アクセント表現をトークンベースで揃える（イシュー #910）。`link_overlay::
* stylesheet()` は取り込まない（`overlay` が唯一の子要素のカードで
* `position: absolute` を適用すると高さが 0 に潰れるため、`site_theme.rs`
* 側の手書きカード CSS を維持する。`crate::nav::prev_next_nav` rustdoc 参照）。
*/
nav.prev-next [data-part="overlay"]:hover {
border-color: var(--fandhe-color-accent);
color: var(--fandhe-color-accent);
background: var(--fandhe-color-docs-accent-bg);
}

nav.prev-next .prev [data-part="overlay"] {
text-align: left;
}

/*
* 基底（768px 未満、縦積み）では `.prev` と同じ左揃え。`min-width: 768px` で
* 横並びに切り替わった際に右揃えへ変える（下記 `@media` ブロック参照）。
*/
nav.prev-next .next [data-part="overlay"] {
text-align: left;
}

/*
* ---- `min-width: 768px`: 左ナビ + 中央コンテンツの 2 カラム grid ----
*
* 右目次カラム（`.docs-toc-aside`）はこの帯域ではまだ非表示のまま
* （狭幅では「右目次 → 左ナビ」の順に畳む要件、設計文書 §3.2）。
*/
@media (min-width: 768px) {
.docs-container {
display: grid;
grid-template-columns: var(--fandhe-space-docs-sidebar-width) minmax(0, 1fr);
align-items: start;
}

.docs-sidebar {
/*
* `.docs-header` が sticky top: 0 で常時可視のため、`.docs-sidebar` は
* ヘッダー分オフセットして常時可視のヘッダー直下に張り付く。
*/
position: sticky;
top: var(--fandhe-space-docs-header-height);
align-self: start;
max-height: calc(100vh - var(--fandhe-space-docs-header-height));
overflow-y: auto;
width: auto;
padding: 1.75rem var(--fandhe-space-docs-gutter) 2rem;
border-right: 1px solid var(--fandhe-color-border);
border-bottom: none;
}

/* `min-width: 768px` では折りたたみ自体を行わないため、`nav.sidebar` の
* 折りたたみ制約とタッチ用トグルの可視トリガーの双方を解除する。 */
.docs-sidebar nav.sidebar {
max-height: none;
overflow: visible;
}

/* この帯域ではサイドバーが常時全展開のためチェックボックス自体を DOM
* 上から視覚的に取り除くだけでなく操作対象からも外す（Bugbot 指摘 #916
* 是正、上記 `.docs-sidebar-toggle` doc コメント参照）。 */
.docs-sidebar-toggle {
display: none;
}

.docs-sidebar-toggle-label {
display: none;
}

.docs-main {
padding: 2.25rem 2rem 5rem;
}

/* `.docs-header-nav`（セクション別ドロップダウン、イシュー #908）は
* この帯域から表示に切り替える。モバイルはサイドバー折りたたみトグルが
* ナビ手段を提供するため基底では非表示のまま。配置は fandhe-backend
* `.docs-header-nav { margin-left: 1.25rem; min-width: 0; }` と同値
* （イシュー #1110 の続き）: brand 直後の左寄せとし、旧設計の
* `margin-left: auto` 右寄せ + `.docs-header-nav + .docs-header-actions`
* の auto 打ち消し override（イシュー #951）は廃止した（右寄せは
* `.docs-header-actions` の `margin-left: auto` のみが担う）。 */
.docs-header-nav {
display: flex;
margin-left: 1.25rem;
min-width: 0;
}

nav.prev-next {
flex-direction: row;
}

nav.prev-next .next [data-part="overlay"] {
text-align: right;
}
}

/*
* ---- `min-width: 1200px`: 左ナビ + 中央コンテンツ + 右目次の 3 カラム grid ----
*
* `.docs-toc-aside` をこの帯域から表示に切り替える。見出しの無いページ
* （`div.docs-container.docs-container--no-toc`、`crate::layout` が
* `aside.docs-toc-aside` 自体を出力しない場合に付与する修飾 class）では
* 右目次列のグリッドトラック自体を収縮させ、空の右カラムが残ったまま
* 中央カラムが狭くなる回帰を避ける（Bugbot 指摘 #916 是正）。
*
* `.docs-toc-aside` は `.docs-sidebar`（`min-width: 768px` ブロック、上記）と
* 同型の sticky 追従を持つ: `.docs-header` が `position: sticky; top: 0` で
* 常時可視のため、ヘッダー高さ分オフセットしてヘッダー直下へ張り付け、
* `max-height` + `overflow-y: auto` で目次が長いページでもカラム内スクロールに
* 閉じ、ページ全体のレイアウトを崩さない（イシュー #909、受け入れ条件 1・2）。
*/
@media (min-width: 1200px) {
.docs-container {
grid-template-columns:
var(--fandhe-space-docs-sidebar-width) minmax(0, 1fr)
var(--fandhe-space-docs-toc-width);
}

.docs-container.docs-container--no-toc {
grid-template-columns: var(--fandhe-space-docs-sidebar-width) minmax(0, 1fr);
}

.docs-toc-aside {
display: block;
min-width: 0;
padding: 1.75rem var(--fandhe-space-docs-gutter) 2rem;
position: sticky;
top: var(--fandhe-space-docs-header-height);
align-self: start;
max-height: calc(100vh - var(--fandhe-space-docs-header-height));
overflow-y: auto;
}

/* 右目次カラムが表示に切り替わるのと同じ帯域で、本文冒頭の折りたたみ
* 目次（狭幅代替、イシュー #1080）を非表示にし重複表示を避ける。 */
.docs-toc-inline {
display: none;
}
}

/*
* `.docs-header` が `position: sticky; top: 0` で常時ヘッダー高さ分を占有する
* ため、右目次カラムのリンク（`.docs-toc a`）や外部からのフラグメント直接リンクで
* 見出しへジャンプすると素のブラウザ挙動ではヘッダーの下に隠れてしまう。
* `with_heading_anchors`（id 注入対象は h2/h3）が生成する全アンカーの到達位置を
* ヘッダー高さ分オフセットし、ページ内リンクが全ページで機能する状態にする
* （イシュー #909、受け入れ条件 3）。
*/
.docs-content h2,
.docs-content h3 {
scroll-margin-top: calc(var(--fandhe-space-docs-header-height) + 1rem);
}
.docs-content h1 {
  margin: 0 0 1.1rem;
  font-weight: var(--fandhe-font-font-weight-semibold);
  letter-spacing: -0.01em;
  font-size: var(--fandhe-font-font-size-3xl);
  line-height: 1.2;
}
.docs-content h2 {
  margin: 2.25rem 0 0.85rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--fandhe-color-border);
  font-weight: var(--fandhe-font-font-weight-semibold);
  letter-spacing: -0.01em;
  font-size: var(--fandhe-font-font-size-2xl);
  line-height: 1.25;
}
.docs-content h3 {
  margin: 1.6rem 0 0.5rem;
  font-weight: var(--fandhe-font-font-weight-semibold);
  letter-spacing: -0.01em;
  font-size: var(--fandhe-font-font-size-xl);
  line-height: 1.3;
}
.docs-content h4 {
  margin: 1.4rem 0 0.5rem;
  font-weight: var(--fandhe-font-font-weight-semibold);
  letter-spacing: -0.01em;
  font-size: var(--fandhe-font-font-size-lg);
  line-height: 1.3;
}
.docs-content h5 {
  margin: 1.2rem 0 0.4rem;
  font-weight: var(--fandhe-font-font-weight-semibold);
  letter-spacing: -0.01em;
  font-size: var(--fandhe-font-font-size-md);
  line-height: 1.3;
}
.docs-content h6 {
  margin: 1.1rem 0 0.4rem;
  font-weight: var(--fandhe-font-font-weight-semibold);
  letter-spacing: -0.01em;
  font-size: var(--fandhe-font-font-size-sm);
  line-height: 1.25;
}
.docs-content p {
  margin: 0 0 1.05rem;
  font-size: var(--fandhe-font-font-size-md);
  line-height: 1.5;
}
.docs-content ul,
.docs-content ol {
  margin: 0 0 1.05rem;
  list-style: revert;
  padding-inline-start: 1.5rem;
}
.docs-content li {
  margin-block: 0.25rem;
  line-height: 1.5;
}
.docs-content a {
  color: var(--fandhe-color-accent, var(--fandhe-color-fg));
  text-decoration: var(--fandhe-link-text-decoration, none);
  cursor: pointer;
}
.docs-content a:hover {
  text-decoration: underline;
}
.docs-content blockquote {
  margin: 0 0 1.05rem;
  padding-inline-start: 1rem;
  padding-block: 0.5rem;
  background: var(--fandhe-color-bg-subtle);
  border-inline-start: 4px solid var(--fandhe-color-accent);
  border-radius: var(--fandhe-radius-sm);
  color: var(--fandhe-color-fg-muted);
}
.docs-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--fandhe-color-bg-subtle);
  border-radius: var(--fandhe-radius-sm);
  padding: 0.0625rem 0.375rem;
  font-size: var(--fandhe-font-font-size-sm);
  color: var(--fandhe-color-fg);
}
.docs-content pre {
  margin: 0 0 1.05rem;
  padding: 1rem 1.1rem;
  background: var(--fandhe-color-bg-muted);
  border: 1px solid var(--fandhe-color-border);
  border-radius: 0.6rem;
  overflow-x: auto;
}
.docs-content pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.85em;
}
.docs-content em {
  font-style: italic;
  font-weight: var(--fandhe-font-font-weight-medium);
}
.docs-content table {
  display: block;
  overflow-x: auto;
  margin: 0 0 1.05rem;
  max-width: 100%;
  font-size: 0.925em;
  border: 1px solid var(--fandhe-color-border);
  border-radius: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--fandhe-color-border) var(--fandhe-color-bg-subtle);
  background-image: linear-gradient(to right, var(--fandhe-color-bg), transparent), linear-gradient(to left, var(--fandhe-color-bg), transparent), linear-gradient(to right, var(--fandhe-color-docs-scroll-shadow), transparent), linear-gradient(to left, var(--fandhe-color-docs-scroll-shadow), transparent);
  background-position: left center, right center, left center, right center;
  background-size: 2rem 100%, 2rem 100%, 0.9rem 100%, 0.9rem 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.docs-content table::-webkit-scrollbar {
  height: 0.5rem;
}
.docs-content table::-webkit-scrollbar-track {
  background: var(--fandhe-color-bg-subtle);
  border-radius: 0.5rem;
}
.docs-content table::-webkit-scrollbar-thumb {
  background: var(--fandhe-color-border);
  border-radius: 0.5rem;
}
.docs-content th,
.docs-content td {
  border-width: 0 1px 1px 0;
  border-style: solid;
  border-color: var(--fandhe-color-border);
  padding: 0.45rem 0.75rem;
  text-align: left;
}
.docs-content tr > :last-child {
  border-right: 0;
}
.docs-content tbody tr:last-child > * {
  border-bottom: 0;
}
.docs-content th {
  background: var(--fandhe-color-bg-subtle);
  font-weight: 600;
}
.docs-content pre code .token-keyword {
  color: var(--fandhe-color-docs-code-keyword);
  font-weight: 600;
}
.docs-content pre code .token-string {
  color: var(--fandhe-color-docs-code-string);
}
.docs-content pre code .token-comment {
  color: var(--fandhe-color-docs-code-comment);
  font-style: italic;
}
.docs-content pre code .token-number {
  color: var(--fandhe-color-docs-code-number);
}
.docs-content pre code .token-tag {
  color: var(--fandhe-color-docs-code-tag);
}
.docs-content pre code .token-attr {
  color: var(--fandhe-color-docs-code-attr);
}