:root {
  color-scheme: light dark;
  --fandhe-color-bg: #ffffff;
  --fandhe-color-bg-subtle: #f7f7f7;
  --fandhe-color-bg-muted: #eeeeee;
  --fandhe-color-bg-emphasized: #e2e2e2;
  --fandhe-color-bg-overlay: rgba(0, 0, 0, 0.4);
  --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-border-subtle: #f0f0f0;
  --fandhe-color-border-emphasized: #b3b3b3;
  --fandhe-color-accent: #3182ce;
  --fandhe-color-accent-emphasized: #2b6cb0;
  --fandhe-color-accent-fg: #ffffff;
  --fandhe-color-accent-subtle: #ebf8ff;
  --fandhe-color-accent-muted: #bee3f8;
  --fandhe-color-accent-fg-subtle: #1a4971;
  --fandhe-color-info: #3182ce;
  --fandhe-color-info-emphasized: #2b6cb0;
  --fandhe-color-info-fg: #ffffff;
  --fandhe-color-info-subtle: #ebf8ff;
  --fandhe-color-info-muted: #bee3f8;
  --fandhe-color-info-fg-subtle: #1a4971;
  --fandhe-color-success: #2f855a;
  --fandhe-color-success-emphasized: #276749;
  --fandhe-color-success-fg: #ffffff;
  --fandhe-color-success-subtle: #f0fff4;
  --fandhe-color-success-muted: #c6f6d5;
  --fandhe-color-success-fg-subtle: #1c4a32;
  --fandhe-color-warning: #b7791f;
  --fandhe-color-warning-emphasized: #975a16;
  --fandhe-color-warning-fg: #ffffff;
  --fandhe-color-warning-subtle: #fffaf0;
  --fandhe-color-warning-muted: #feebc8;
  --fandhe-color-warning-fg-subtle: #5a3c0a;
  --fandhe-color-danger: #c53030;
  --fandhe-color-danger-emphasized: #9b2c2c;
  --fandhe-color-danger-fg: #ffffff;
  --fandhe-color-danger-subtle: #fff5f5;
  --fandhe-color-danger-muted: #fed7d7;
  --fandhe-color-danger-fg-subtle: #6b1414;
  --fandhe-color-neutral: #718096;
  --fandhe-color-neutral-emphasized: #4a5568;
  --fandhe-color-neutral-fg: #ffffff;
  --fandhe-color-neutral-subtle: #f7f7f7;
  --fandhe-color-neutral-muted: #e2e8f0;
  --fandhe-color-neutral-fg-subtle: #333333;
  --fandhe-color-focus-ring: #3182ce;
  --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-sidebar-bg: #f7f7f7;
  --fandhe-color-sidebar-fg: #111111;
  --fandhe-color-sidebar-accent: #3182ce;
  --fandhe-color-sidebar-accent-fg: #ffffff;
  --fandhe-color-sidebar-muted: #eeeeee;
  --fandhe-color-sidebar-border: #d9d9d9;
  --fandhe-color-sidebar-focus-ring: #3182ce;
  --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-0-5: 0.125rem;
  --fandhe-space-1: 0.25rem;
  --fandhe-space-1-5: 0.375rem;
  --fandhe-space-2: 0.5rem;
  --fandhe-space-2-5: 0.625rem;
  --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-20: 5rem;
  --fandhe-space-24: 6rem;
  --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-header-height-stacked: 5.75rem;
  --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-size-5xl: 3rem;
  --fandhe-font-font-size-6xl: 3.75rem;
  --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-none: 0;
  --fandhe-radius-xs: 0.125rem;
  --fandhe-radius-sm: 0.25rem;
  --fandhe-radius-md: 0.375rem;
  --fandhe-radius-lg: 0.5rem;
  --fandhe-radius-xl: 0.75rem;
  --fandhe-radius-2xl: 1rem;
  --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);
  --fandhe-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.2);
  --fandhe-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
  --fandhe-z-index-hide: -1;
  --fandhe-z-index-base: 0;
  --fandhe-z-index-docked: 10;
  --fandhe-z-index-dropdown: 1000;
  --fandhe-z-index-sticky: 1100;
  --fandhe-z-index-popover: 1200;
  --fandhe-z-index-overlay: 1300;
  --fandhe-z-index-modal: 1400;
  --fandhe-z-index-skip-nav: 1500;
  --fandhe-z-index-toast: 1600;
  --fandhe-z-index-tooltip: 1700;
  --fandhe-z-index-max: 2147483647;
  --fandhe-focus-ring-width: 2px;
  --fandhe-focus-ring-offset: 2px;
  --fandhe-size-control-height-xs: 2rem;
  --fandhe-size-control-height-sm: 2.25rem;
  --fandhe-size-control-height-md: 2.5rem;
  --fandhe-size-control-height-lg: 2.75rem;
  --fandhe-size-control-height-xl: 3rem;
  --fandhe-size-control-padding-x-xs: 0.625rem;
  --fandhe-size-control-padding-x-sm: 0.75rem;
  --fandhe-size-control-padding-x-md: 1rem;
  --fandhe-size-control-padding-x-lg: 1.25rem;
  --fandhe-size-control-padding-x-xl: 1.5rem;
  --fandhe-size-control-font-size-xs: var(--fandhe-font-font-size-xs);
  --fandhe-size-control-font-size-sm: var(--fandhe-font-font-size-sm);
  --fandhe-size-control-font-size-md: var(--fandhe-font-font-size-md);
  --fandhe-size-control-font-size-lg: var(--fandhe-font-font-size-lg);
  --fandhe-size-control-font-size-xl: var(--fandhe-font-font-size-xl);
  --fandhe-motion-duration-fast: 150ms;
  --fandhe-motion-duration-normal: 200ms;
  --fandhe-motion-duration-slow: 300ms;
  --fandhe-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --fandhe-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --fandhe-motion-duration-faster: 100ms;
  --fandhe-motion-duration-slower: 400ms;
  --fandhe-motion-easing-in: cubic-bezier(0.42, 0, 1, 1);
  --fandhe-motion-easing-out: cubic-bezier(0, 0, 0.58, 1);
  --fandhe-motion-easing-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --fandhe-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --fandhe-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --fandhe-breakpoint-sm: 640px;
  --fandhe-breakpoint-md: 768px;
  --fandhe-breakpoint-lg: 1024px;
  --fandhe-breakpoint-xl: 1280px;
}
: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-bg-emphasized: #2e2e2e;
    --fandhe-color-bg-overlay: rgba(0, 0, 0, 0.6);
    --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-border-subtle: #202020;
    --fandhe-color-border-emphasized: #525252;
    --fandhe-color-accent: #4299e1;
    --fandhe-color-accent-emphasized: #63b3ed;
    --fandhe-color-accent-fg: #0b1720;
    --fandhe-color-accent-subtle: #1a2b3d;
    --fandhe-color-accent-muted: #2c4a66;
    --fandhe-color-accent-fg-subtle: #90cdf4;
    --fandhe-color-info: #63b3ed;
    --fandhe-color-info-emphasized: #90cdf4;
    --fandhe-color-info-fg: #0b1720;
    --fandhe-color-info-subtle: #1a2b3d;
    --fandhe-color-info-muted: #2c4a66;
    --fandhe-color-info-fg-subtle: #90cdf4;
    --fandhe-color-success: #68d391;
    --fandhe-color-success-emphasized: #9ae6b4;
    --fandhe-color-success-fg: #0b1a12;
    --fandhe-color-success-subtle: #122a1c;
    --fandhe-color-success-muted: #1c4a32;
    --fandhe-color-success-fg-subtle: #9ae6b4;
    --fandhe-color-warning: #f6ad55;
    --fandhe-color-warning-emphasized: #fbd38d;
    --fandhe-color-warning-fg: #1a1203;
    --fandhe-color-warning-subtle: #2e2410;
    --fandhe-color-warning-muted: #4a3510;
    --fandhe-color-warning-fg-subtle: #fbd38d;
    --fandhe-color-danger: #fc8181;
    --fandhe-color-danger-emphasized: #feb2b2;
    --fandhe-color-danger-fg: #1a0b0b;
    --fandhe-color-danger-subtle: #2e1616;
    --fandhe-color-danger-muted: #4a1f1f;
    --fandhe-color-danger-fg-subtle: #feb2b2;
    --fandhe-color-neutral: #a0aec0;
    --fandhe-color-neutral-emphasized: #cbd5e0;
    --fandhe-color-neutral-fg: #0b1720;
    --fandhe-color-neutral-subtle: #1a1a1a;
    --fandhe-color-neutral-muted: #2d3748;
    --fandhe-color-neutral-fg-subtle: #d4d4d4;
    --fandhe-color-focus-ring: #63b3ed;
    --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-sidebar-bg: #1a1a1a;
    --fandhe-color-sidebar-fg: #f7f7f7;
    --fandhe-color-sidebar-accent: #4299e1;
    --fandhe-color-sidebar-accent-fg: #0b1720;
    --fandhe-color-sidebar-muted: #242424;
    --fandhe-color-sidebar-border: #3a3a3a;
    --fandhe-color-sidebar-focus-ring: #63b3ed;
    --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);
    --fandhe-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);
    --fandhe-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.55);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fandhe-color-bg: #111111;
  --fandhe-color-bg-subtle: #1a1a1a;
  --fandhe-color-bg-muted: #242424;
  --fandhe-color-bg-emphasized: #2e2e2e;
  --fandhe-color-bg-overlay: rgba(0, 0, 0, 0.6);
  --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-border-subtle: #202020;
  --fandhe-color-border-emphasized: #525252;
  --fandhe-color-accent: #4299e1;
  --fandhe-color-accent-emphasized: #63b3ed;
  --fandhe-color-accent-fg: #0b1720;
  --fandhe-color-accent-subtle: #1a2b3d;
  --fandhe-color-accent-muted: #2c4a66;
  --fandhe-color-accent-fg-subtle: #90cdf4;
  --fandhe-color-info: #63b3ed;
  --fandhe-color-info-emphasized: #90cdf4;
  --fandhe-color-info-fg: #0b1720;
  --fandhe-color-info-subtle: #1a2b3d;
  --fandhe-color-info-muted: #2c4a66;
  --fandhe-color-info-fg-subtle: #90cdf4;
  --fandhe-color-success: #68d391;
  --fandhe-color-success-emphasized: #9ae6b4;
  --fandhe-color-success-fg: #0b1a12;
  --fandhe-color-success-subtle: #122a1c;
  --fandhe-color-success-muted: #1c4a32;
  --fandhe-color-success-fg-subtle: #9ae6b4;
  --fandhe-color-warning: #f6ad55;
  --fandhe-color-warning-emphasized: #fbd38d;
  --fandhe-color-warning-fg: #1a1203;
  --fandhe-color-warning-subtle: #2e2410;
  --fandhe-color-warning-muted: #4a3510;
  --fandhe-color-warning-fg-subtle: #fbd38d;
  --fandhe-color-danger: #fc8181;
  --fandhe-color-danger-emphasized: #feb2b2;
  --fandhe-color-danger-fg: #1a0b0b;
  --fandhe-color-danger-subtle: #2e1616;
  --fandhe-color-danger-muted: #4a1f1f;
  --fandhe-color-danger-fg-subtle: #feb2b2;
  --fandhe-color-neutral: #a0aec0;
  --fandhe-color-neutral-emphasized: #cbd5e0;
  --fandhe-color-neutral-fg: #0b1720;
  --fandhe-color-neutral-subtle: #1a1a1a;
  --fandhe-color-neutral-muted: #2d3748;
  --fandhe-color-neutral-fg-subtle: #d4d4d4;
  --fandhe-color-focus-ring: #63b3ed;
  --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-sidebar-bg: #1a1a1a;
  --fandhe-color-sidebar-fg: #f7f7f7;
  --fandhe-color-sidebar-accent: #4299e1;
  --fandhe-color-sidebar-accent-fg: #0b1720;
  --fandhe-color-sidebar-muted: #242424;
  --fandhe-color-sidebar-border: #3a3a3a;
  --fandhe-color-sidebar-focus-ring: #63b3ed;
  --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);
  --fandhe-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);
  --fandhe-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --fandhe-motion-duration-fast: 0ms;
    --fandhe-motion-duration-normal: 0ms;
    --fandhe-motion-duration-slow: 0ms;
    --fandhe-motion-duration-faster: 0ms;
    --fandhe-motion-duration-slower: 0ms;
  }
}
[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;
  display: flex;
  flex-direction: column;
  gap: var(--fandhe-space-1, 0.25rem);
}

[data-scope="nav-list"][data-part="link"] {
  display: block;
  color: var(--fandhe-color-fg-muted);
  text-decoration: none;
  padding: var(--fandhe-space-1, 0.25rem) var(--fandhe-space-2, 0.5rem);
  border-radius: var(--fandhe-radius-sm, 0.25rem);
}

[data-scope="nav-list"][data-part="link"] {
  transition-property: color, background;
  transition-duration: var(--fandhe-motion-duration-fast);
  transition-timing-function: var(--fandhe-motion-easing-standard);
}

[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);
}

[data-scope="nav-list"][data-part="link"]:focus-visible {
  outline: var(--fandhe-focus-ring-width, 2px) solid var(--fandhe-color-focus-ring, var(--fandhe-color-accent));
  outline-offset: var(--fandhe-focus-ring-offset, 2px);
}

@media (hover: hover) {
  [data-scope="nav-list"][data-part="link"]:hover:not([data-disabled]):not([aria-current="page"]) {
    color: var(--fandhe-color-fg);
    background: var(--fandhe-color-bg-muted);
  }
}
@scope (.docs-header) {
[data-scope="button"][data-part="root"] {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--fandhe-radius-md);
  font-family: var(--fandhe-font-font-body);
  cursor: pointer;
  text-decoration: none;
}

[data-scope="button"][data-part="root"] {
  transition-property: background, border-color, color, box-shadow;
  transition-duration: var(--fandhe-motion-duration-fast);
  transition-timing-function: var(--fandhe-motion-easing-standard);
}

[data-scope="button"][data-part="root"].fd-button--size-xs {
  min-height: var(--fandhe-size-control-height-xs, 2rem);
  padding: 0 var(--fandhe-size-control-padding-x-xs, 0.625rem);
  font-size: var(--fandhe-size-control-font-size-xs, var(--fandhe-font-font-size-xs));
}

[data-scope="button"][data-part="root"].fd-button--size-sm {
  min-height: var(--fandhe-size-control-height-sm, 2.25rem);
  padding: 0 var(--fandhe-size-control-padding-x-sm, 0.75rem);
  font-size: var(--fandhe-size-control-font-size-sm, var(--fandhe-font-font-size-sm));
}

[data-scope="button"][data-part="root"].fd-button--size-md {
  min-height: var(--fandhe-size-control-height-md, 2.5rem);
  padding: 0 var(--fandhe-size-control-padding-x-md, 1rem);
  font-size: var(--fandhe-size-control-font-size-md, var(--fandhe-font-font-size-md));
}

[data-scope="button"][data-part="root"].fd-button--size-lg {
  min-height: var(--fandhe-size-control-height-lg, 2.75rem);
  padding: 0 var(--fandhe-size-control-padding-x-lg, 1.25rem);
  font-size: var(--fandhe-size-control-font-size-lg, var(--fandhe-font-font-size-lg));
}

[data-scope="button"][data-part="root"].fd-button--size-xl {
  min-height: var(--fandhe-size-control-height-xl, 3rem);
  padding: 0 var(--fandhe-size-control-padding-x-xl, 1.5rem);
  font-size: var(--fandhe-size-control-font-size-xl, var(--fandhe-font-font-size-xl));
}

[data-scope="button"][data-part="root"].fd-button--variant-solid {
  background: var(--fandhe-palette);
  color: var(--fandhe-palette-fg);
  border: none;
  --fandhe-hover-bg: var(--fandhe-palette-emphasized);
}

[data-scope="button"][data-part="root"].fd-button--variant-outline {
  background: transparent;
  color: var(--fandhe-palette);
  border: 1px solid var(--fandhe-palette);
  --fandhe-hover-bg: var(--fandhe-color-bg-muted);
}

[data-scope="button"][data-part="root"].fd-button--variant-ghost {
  background: transparent;
  color: var(--fandhe-palette);
  border: none;
  --fandhe-hover-bg: var(--fandhe-color-bg-muted);
}

[data-scope="button"][data-part="root"].fd-button--variant-subtle {
  background: var(--fandhe-palette-subtle);
  color: var(--fandhe-palette-fg-subtle);
  border: none;
  --fandhe-hover-bg: var(--fandhe-palette-muted);
}

[data-scope="button"][data-part="root"].fd-button--variant-surface {
  background: var(--fandhe-palette-subtle);
  color: var(--fandhe-palette-fg-subtle);
  border: 1px solid var(--fandhe-palette-muted);
  --fandhe-hover-bg: var(--fandhe-palette-muted);
}

[data-scope="button"][data-part="root"].fd-button--variant-plain {
  background: transparent;
  color: var(--fandhe-palette-fg-subtle);
  border: none;
  --fandhe-hover-bg: transparent;
}

[data-scope="button"][data-part="root"].fd-button--variant-link {
  background: transparent;
  color: var(--fandhe-palette);
  border: none;
  --fandhe-hover-bg: transparent;
  --fandhe-hover-text-decoration: underline;
}

[data-scope="button"][data-part="root"].fd-button--color-palette-accent {
  --fandhe-palette: var(--fandhe-color-accent);
  --fandhe-palette-emphasized: var(--fandhe-color-accent-emphasized);
  --fandhe-palette-fg: var(--fandhe-color-accent-fg);
  --fandhe-palette-subtle: var(--fandhe-color-accent-subtle);
  --fandhe-palette-muted: var(--fandhe-color-accent-muted);
  --fandhe-palette-fg-subtle: var(--fandhe-color-accent-fg-subtle);
}

[data-scope="button"][data-part="root"].fd-button--color-palette-info {
  --fandhe-palette: var(--fandhe-color-info);
  --fandhe-palette-emphasized: var(--fandhe-color-info-emphasized);
  --fandhe-palette-fg: var(--fandhe-color-info-fg);
  --fandhe-palette-subtle: var(--fandhe-color-info-subtle);
  --fandhe-palette-muted: var(--fandhe-color-info-muted);
  --fandhe-palette-fg-subtle: var(--fandhe-color-info-fg-subtle);
}

[data-scope="button"][data-part="root"].fd-button--color-palette-success {
  --fandhe-palette: var(--fandhe-color-success);
  --fandhe-palette-emphasized: var(--fandhe-color-success-emphasized);
  --fandhe-palette-fg: var(--fandhe-color-success-fg);
  --fandhe-palette-subtle: var(--fandhe-color-success-subtle);
  --fandhe-palette-muted: var(--fandhe-color-success-muted);
  --fandhe-palette-fg-subtle: var(--fandhe-color-success-fg-subtle);
}

[data-scope="button"][data-part="root"].fd-button--color-palette-warning {
  --fandhe-palette: var(--fandhe-color-warning);
  --fandhe-palette-emphasized: var(--fandhe-color-warning-emphasized);
  --fandhe-palette-fg: var(--fandhe-color-warning-fg);
  --fandhe-palette-subtle: var(--fandhe-color-warning-subtle);
  --fandhe-palette-muted: var(--fandhe-color-warning-muted);
  --fandhe-palette-fg-subtle: var(--fandhe-color-warning-fg-subtle);
}

[data-scope="button"][data-part="root"].fd-button--color-palette-danger {
  --fandhe-palette: var(--fandhe-color-danger);
  --fandhe-palette-emphasized: var(--fandhe-color-danger-emphasized);
  --fandhe-palette-fg: var(--fandhe-color-danger-fg);
  --fandhe-palette-subtle: var(--fandhe-color-danger-subtle);
  --fandhe-palette-muted: var(--fandhe-color-danger-muted);
  --fandhe-palette-fg-subtle: var(--fandhe-color-danger-fg-subtle);
}

[data-scope="button"][data-part="root"].fd-button--color-palette-neutral {
  --fandhe-palette: var(--fandhe-color-neutral);
  --fandhe-palette-emphasized: var(--fandhe-color-neutral-emphasized);
  --fandhe-palette-fg: var(--fandhe-color-neutral-fg);
  --fandhe-palette-subtle: var(--fandhe-color-neutral-subtle);
  --fandhe-palette-muted: var(--fandhe-color-neutral-muted);
  --fandhe-palette-fg-subtle: var(--fandhe-color-neutral-fg-subtle);
}

[data-scope="button"][data-part="root"].fd-button--icon-only {
  aspect-ratio: 1 / 1;
  padding: 0;
}

[data-scope="button"][data-part="root"].fd-button--shape-pill {
  border-radius: var(--fandhe-radius-full);
}

[data-scope="button"][data-part="root"].fd-button--shape-circle {
  border-radius: var(--fandhe-radius-full);
  aspect-ratio: 1 / 1;
  padding: 0;
}

[data-scope="button"][data-part="root"].fd-button--icon-only.fd-button--size-xs {
  height: var(--fandhe-size-control-height-xs, 2rem);
}

[data-scope="button"][data-part="root"].fd-button--icon-only.fd-button--size-sm {
  height: var(--fandhe-size-control-height-sm, 2.25rem);
}

[data-scope="button"][data-part="root"].fd-button--icon-only.fd-button--size-md {
  height: var(--fandhe-size-control-height-md, 2.5rem);
}

[data-scope="button"][data-part="root"].fd-button--icon-only.fd-button--size-lg {
  height: var(--fandhe-size-control-height-lg, 2.75rem);
}

[data-scope="button"][data-part="root"].fd-button--icon-only.fd-button--size-xl {
  height: var(--fandhe-size-control-height-xl, 3rem);
}

[data-scope="button"][data-part="root"]:focus-visible {
  outline: var(--fandhe-focus-ring-width, 2px) solid var(--fandhe-palette, var(--fandhe-color-focus-ring, var(--fandhe-color-accent)));
  outline-offset: var(--fandhe-focus-ring-offset, 2px);
}

[data-scope="button"][data-part="root"][data-disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (hover: hover) {
  [data-scope="button"][data-part="root"]:hover:not([data-disabled]) {
    background: var(--fandhe-hover-bg);
    text-decoration: var(--fandhe-hover-text-decoration, none);
  }
}

}
@scope (.docs-header) {
[data-scope="badge"][data-part="root"] {
  display: inline-flex;
  align-items: center;
  gap: var(--fandhe-space-1);
  border-radius: var(--fandhe-radius-sm);
  font-weight: var(--fandhe-font-font-weight-medium);
  line-height: var(--fandhe-font-line-height-tight);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

[data-scope="badge"][data-part="root"].fd-badge--size-xs {
  padding: 0.03125rem 0.25rem;
  font-size: var(--fandhe-font-font-size-xs);
}

[data-scope="badge"][data-part="root"].fd-badge--size-sm {
  padding: 0.0625rem 0.375rem;
  font-size: var(--fandhe-font-font-size-xs);
}

[data-scope="badge"][data-part="root"].fd-badge--size-md {
  padding: 0.125rem 0.5rem;
  font-size: var(--fandhe-font-font-size-sm);
}

[data-scope="badge"][data-part="root"].fd-badge--size-lg {
  padding: 0.25rem 0.625rem;
  font-size: var(--fandhe-font-font-size-md);
}

[data-scope="badge"][data-part="root"].fd-badge--size-xl {
  padding: 0.5rem 0.75rem;
  font-size: var(--fandhe-font-font-size-lg);
}

[data-scope="badge"][data-part="root"].fd-badge--variant-solid {
  background: var(--fandhe-palette);
  color: var(--fandhe-palette-fg);
}

[data-scope="badge"][data-part="root"].fd-badge--variant-subtle {
  background: var(--fandhe-palette-subtle);
  color: var(--fandhe-palette-fg-subtle);
}

[data-scope="badge"][data-part="root"].fd-badge--variant-outline {
  background: transparent;
  color: var(--fandhe-palette-fg-subtle);
  border: 1px solid var(--fandhe-palette-muted);
}

[data-scope="badge"][data-part="root"].fd-badge--variant-surface {
  background: var(--fandhe-palette-subtle);
  color: var(--fandhe-palette-fg-subtle);
  border: 1px solid var(--fandhe-palette-muted);
}

[data-scope="badge"][data-part="root"].fd-badge--variant-plain {
  background: transparent;
  color: var(--fandhe-palette-fg-subtle);
}

[data-scope="badge"][data-part="root"].fd-badge--color-palette-accent {
  --fandhe-palette: var(--fandhe-color-accent);
  --fandhe-palette-emphasized: var(--fandhe-color-accent-emphasized);
  --fandhe-palette-fg: var(--fandhe-color-accent-fg);
  --fandhe-palette-subtle: var(--fandhe-color-accent-subtle);
  --fandhe-palette-muted: var(--fandhe-color-accent-muted);
  --fandhe-palette-fg-subtle: var(--fandhe-color-accent-fg-subtle);
}

[data-scope="badge"][data-part="root"].fd-badge--color-palette-info {
  --fandhe-palette: var(--fandhe-color-info);
  --fandhe-palette-emphasized: var(--fandhe-color-info-emphasized);
  --fandhe-palette-fg: var(--fandhe-color-info-fg);
  --fandhe-palette-subtle: var(--fandhe-color-info-subtle);
  --fandhe-palette-muted: var(--fandhe-color-info-muted);
  --fandhe-palette-fg-subtle: var(--fandhe-color-info-fg-subtle);
}

[data-scope="badge"][data-part="root"].fd-badge--color-palette-success {
  --fandhe-palette: var(--fandhe-color-success);
  --fandhe-palette-emphasized: var(--fandhe-color-success-emphasized);
  --fandhe-palette-fg: var(--fandhe-color-success-fg);
  --fandhe-palette-subtle: var(--fandhe-color-success-subtle);
  --fandhe-palette-muted: var(--fandhe-color-success-muted);
  --fandhe-palette-fg-subtle: var(--fandhe-color-success-fg-subtle);
}

[data-scope="badge"][data-part="root"].fd-badge--color-palette-warning {
  --fandhe-palette: var(--fandhe-color-warning);
  --fandhe-palette-emphasized: var(--fandhe-color-warning-emphasized);
  --fandhe-palette-fg: var(--fandhe-color-warning-fg);
  --fandhe-palette-subtle: var(--fandhe-color-warning-subtle);
  --fandhe-palette-muted: var(--fandhe-color-warning-muted);
  --fandhe-palette-fg-subtle: var(--fandhe-color-warning-fg-subtle);
}

[data-scope="badge"][data-part="root"].fd-badge--color-palette-danger {
  --fandhe-palette: var(--fandhe-color-danger);
  --fandhe-palette-emphasized: var(--fandhe-color-danger-emphasized);
  --fandhe-palette-fg: var(--fandhe-color-danger-fg);
  --fandhe-palette-subtle: var(--fandhe-color-danger-subtle);
  --fandhe-palette-muted: var(--fandhe-color-danger-muted);
  --fandhe-palette-fg-subtle: var(--fandhe-color-danger-fg-subtle);
}

[data-scope="badge"][data-part="root"].fd-badge--color-palette-neutral {
  --fandhe-palette: var(--fandhe-color-neutral);
  --fandhe-palette-emphasized: var(--fandhe-color-neutral-emphasized);
  --fandhe-palette-fg: var(--fandhe-color-neutral-fg);
  --fandhe-palette-subtle: var(--fandhe-color-neutral-subtle);
  --fandhe-palette-muted: var(--fandhe-color-neutral-muted);
  --fandhe-palette-fg-subtle: var(--fandhe-color-neutral-fg-subtle);
}

[data-scope="badge"][data-part="root"].fd-badge--shape-pill {
  border-radius: var(--fandhe-radius-full);
}

[data-scope="badge"][data-part="root"].fd-badge--shape-circle {
  border-radius: var(--fandhe-radius-full);
  padding: 0;
  min-width: 1.5em;
  aspect-ratio: 1 / 1;
  justify-content: center;
}

[data-scope="badge"][data-part="root"][href] {
  cursor: pointer;
  text-decoration: none;
}

[data-scope="badge"][data-part="root"]:focus-visible {
  outline: var(--fandhe-focus-ring-width, 2px) solid var(--fandhe-palette, var(--fandhe-color-focus-ring, var(--fandhe-color-accent)));
  outline-offset: var(--fandhe-focus-ring-offset, 2px);
}

}
@scope (.docs-header) {
[data-scope="input-group"][data-part="root"] {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  color: var(--fandhe-color-fg);
  background: var(--fandhe-color-bg);
  border: 1px solid var(--fandhe-color-border);
  border-radius: var(--fandhe-radius-md);
  transition-property: border-color, background;
  transition-duration: var(--fandhe-motion-duration-fast);
  transition-timing-function: var(--fandhe-motion-easing-standard);
}

[data-scope="input-group"][data-part="addon"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fandhe-space-2);
  box-sizing: border-box;
  padding-block: var(--fandhe-space-1);
  padding-inline: var(--fandhe-space-2);
  color: var(--fandhe-color-fg-muted);
  font-size: var(--fandhe-font-font-size-sm);
  font-weight: var(--fandhe-font-font-weight-medium);
  line-height: var(--fandhe-font-line-height-normal);
  user-select: none;
  cursor: text;
}

[data-scope="input-group"][data-part="text"] {
  display: inline-flex;
  align-items: center;
  gap: var(--fandhe-space-1);
}

[data-scope="input-group"][data-part="button"] {
  display: inline-flex;
  align-items: center;
  gap: var(--fandhe-space-1);
  box-sizing: border-box;
  min-height: var(--fandhe-size-control-height-xs, 2rem);
  padding: 0 var(--fandhe-space-2);
  border: 0;
  border-radius: var(--fandhe-radius-sm);
  background: transparent;
  color: var(--fandhe-color-fg);
  font: inherit;
  font-size: var(--fandhe-font-font-size-sm);
  cursor: pointer;
  --fandhe-hover-bg: var(--fandhe-color-bg-muted);
  transition-property: background, color;
  transition-duration: var(--fandhe-motion-duration-fast);
  transition-timing-function: var(--fandhe-motion-easing-standard);
}

[data-scope="input-group"][data-part="root"]:focus-within {
  outline: var(--fandhe-focus-ring-width, 2px) solid var(--fandhe-color-focus-ring, var(--fandhe-color-accent));
  outline-offset: var(--fandhe-focus-ring-offset, 2px);
}

[data-scope="input-group"][data-part="root"][data-invalid] {
  border-color: var(--fandhe-color-danger);
}

[data-scope="input-group"][data-part="root"][data-disabled] {
  cursor: not-allowed;
}

[data-scope="input-group"][data-part="addon"][data-align="inline-start"] {
  order: -1;
}

[data-scope="input-group"][data-part="addon"][data-align="inline-end"] {
  order: 1;
}

[data-scope="input-group"][data-part="addon"][data-align="block-start"] {
  order: -1;
  flex-basis: 100%;
  justify-content: flex-start;
  padding: var(--fandhe-space-2) var(--fandhe-space-3) 0;
}

[data-scope="input-group"][data-part="addon"][data-align="block-end"] {
  order: 1;
  flex-basis: 100%;
  justify-content: flex-start;
  padding: 0 var(--fandhe-space-3) var(--fandhe-space-2);
}

[data-scope="input-group"][data-part="addon"][data-disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

[data-scope="input-group"][data-part="button"]:focus-visible {
  outline: var(--fandhe-focus-ring-width, 2px) solid var(--fandhe-color-focus-ring, var(--fandhe-color-accent));
  outline-offset: calc(-1 * var(--fandhe-focus-ring-offset, 2px));
}

[data-scope="input-group"][data-part="button"][data-disabled] {
  cursor: not-allowed;
}

@media (hover: hover) {
  [data-scope="input-group"][data-part="button"]:hover:not([data-disabled]) {
    background: var(--fandhe-hover-bg);
  }
}

[data-scope="input-group"][data-part="root"] > [data-scope="field"][data-part="input"] {
  flex: 1 1 0%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

[data-scope="input-group"][data-part="root"] > [data-scope="field"][data-part="input"]:focus-visible {
  outline: none;
}

[data-scope="input-group"][data-part="root"] > [data-scope="field"][data-part="textarea"] {
  flex: 1 1 0%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

[data-scope="input-group"][data-part="root"] > [data-scope="field"][data-part="textarea"]:focus-visible {
  outline: none;
}

[data-scope="input-group"][data-part="root"] > [data-scope="field"][data-part="select"] {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

[data-scope="input-group"][data-part="root"] > [data-scope="field"][data-part="select"]:focus-visible {
  outline: none;
}

[data-scope="input-group"][data-part="root"] > [data-scope="select"][data-part="root"] {
  flex: 0 1 auto;
  min-width: 0;
}

[data-scope="input-group"][data-part="root"] > [data-scope="select"][data-part="root"] > [data-scope="select"][data-part="control"] > [data-scope="select"][data-part="trigger"] {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

[data-scope="input-group"][data-part="root"] > [data-scope="select"][data-part="root"] > [data-scope="select"][data-part="control"] > [data-scope="select"][data-part="trigger"]:focus-visible {
  outline: none;
}

}
@scope (.docs-header) {
[data-scope="kbd"][data-part="root"] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  border-radius: var(--fandhe-radius-sm);
}

[data-scope="kbd"][data-part="group"] {
  display: inline-flex;
  align-items: center;
  gap: var(--fandhe-space-1);
}

[data-scope="kbd"][data-part="root"].fd-kbd--size-xs {
  padding: 0.03125rem 0.25rem;
  font-size: var(--fandhe-font-font-size-xs);
}

[data-scope="kbd"][data-part="root"].fd-kbd--size-sm {
  padding: 0.0625rem 0.375rem;
  font-size: var(--fandhe-font-font-size-xs);
}

[data-scope="kbd"][data-part="root"].fd-kbd--size-md {
  padding: 0.125rem 0.5rem;
  font-size: var(--fandhe-font-font-size-sm);
}

[data-scope="kbd"][data-part="root"].fd-kbd--size-lg {
  padding: 0.25rem 0.625rem;
  font-size: var(--fandhe-font-font-size-md);
}

[data-scope="kbd"][data-part="root"].fd-kbd--size-xl {
  padding: 0.5rem 0.75rem;
  font-size: var(--fandhe-font-font-size-lg);
}

[data-scope="kbd"][data-part="root"].fd-kbd--variant-raised {
  background: var(--fandhe-palette-subtle);
  color: var(--fandhe-palette-fg-subtle);
  border: 1px solid var(--fandhe-palette-muted);
  border-bottom-width: 2px;
}

[data-scope="kbd"][data-part="root"].fd-kbd--variant-subtle {
  background: var(--fandhe-palette-subtle);
  color: var(--fandhe-palette-fg-subtle);
}

[data-scope="kbd"][data-part="root"].fd-kbd--variant-outline {
  background: transparent;
  color: var(--fandhe-palette-fg-subtle);
  border: 1px solid var(--fandhe-palette-muted);
}

[data-scope="kbd"][data-part="root"].fd-kbd--color-palette-accent {
  --fandhe-palette: var(--fandhe-color-accent);
  --fandhe-palette-emphasized: var(--fandhe-color-accent-emphasized);
  --fandhe-palette-fg: var(--fandhe-color-accent-fg);
  --fandhe-palette-subtle: var(--fandhe-color-accent-subtle);
  --fandhe-palette-muted: var(--fandhe-color-accent-muted);
  --fandhe-palette-fg-subtle: var(--fandhe-color-accent-fg-subtle);
}

[data-scope="kbd"][data-part="root"].fd-kbd--color-palette-info {
  --fandhe-palette: var(--fandhe-color-info);
  --fandhe-palette-emphasized: var(--fandhe-color-info-emphasized);
  --fandhe-palette-fg: var(--fandhe-color-info-fg);
  --fandhe-palette-subtle: var(--fandhe-color-info-subtle);
  --fandhe-palette-muted: var(--fandhe-color-info-muted);
  --fandhe-palette-fg-subtle: var(--fandhe-color-info-fg-subtle);
}

[data-scope="kbd"][data-part="root"].fd-kbd--color-palette-success {
  --fandhe-palette: var(--fandhe-color-success);
  --fandhe-palette-emphasized: var(--fandhe-color-success-emphasized);
  --fandhe-palette-fg: var(--fandhe-color-success-fg);
  --fandhe-palette-subtle: var(--fandhe-color-success-subtle);
  --fandhe-palette-muted: var(--fandhe-color-success-muted);
  --fandhe-palette-fg-subtle: var(--fandhe-color-success-fg-subtle);
}

[data-scope="kbd"][data-part="root"].fd-kbd--color-palette-warning {
  --fandhe-palette: var(--fandhe-color-warning);
  --fandhe-palette-emphasized: var(--fandhe-color-warning-emphasized);
  --fandhe-palette-fg: var(--fandhe-color-warning-fg);
  --fandhe-palette-subtle: var(--fandhe-color-warning-subtle);
  --fandhe-palette-muted: var(--fandhe-color-warning-muted);
  --fandhe-palette-fg-subtle: var(--fandhe-color-warning-fg-subtle);
}

[data-scope="kbd"][data-part="root"].fd-kbd--color-palette-danger {
  --fandhe-palette: var(--fandhe-color-danger);
  --fandhe-palette-emphasized: var(--fandhe-color-danger-emphasized);
  --fandhe-palette-fg: var(--fandhe-color-danger-fg);
  --fandhe-palette-subtle: var(--fandhe-color-danger-subtle);
  --fandhe-palette-muted: var(--fandhe-color-danger-muted);
  --fandhe-palette-fg-subtle: var(--fandhe-color-danger-fg-subtle);
}

[data-scope="kbd"][data-part="root"].fd-kbd--color-palette-neutral {
  --fandhe-palette: var(--fandhe-color-neutral);
  --fandhe-palette-emphasized: var(--fandhe-color-neutral-emphasized);
  --fandhe-palette-fg: var(--fandhe-color-neutral-fg);
  --fandhe-palette-subtle: var(--fandhe-color-neutral-subtle);
  --fandhe-palette-muted: var(--fandhe-color-neutral-muted);
  --fandhe-palette-fg-subtle: var(--fandhe-color-neutral-fg-subtle);
}

}
@scope (.docs-header) {
[data-scope="icon"][data-part="root"] {
  display: inline-block;
  flex-shrink: 0;
  color: currentColor;
  vertical-align: middle;
}

[data-scope="icon"][data-part="root"].fd-icon--size-xs {
  width: 0.75rem;
  height: 0.75rem;
}

[data-scope="icon"][data-part="root"].fd-icon--size-sm {
  width: 1rem;
  height: 1rem;
}

[data-scope="icon"][data-part="root"].fd-icon--size-md {
  width: 1.25rem;
  height: 1.25rem;
}

[data-scope="icon"][data-part="root"].fd-icon--size-lg {
  width: 1.5rem;
  height: 1.5rem;
}

[data-scope="icon"][data-part="root"].fd-icon--size-xl {
  width: 1.75rem;
  height: 1.75rem;
}

}
@scope (.docs-header) {
[data-scope="link"][data-part="root"] {
  color: var(--fandhe-palette, var(--fandhe-color-accent));
  text-decoration: var(--fandhe-link-text-decoration, none);
  cursor: pointer;
}

[data-scope="link"][data-part="root"] {
  transition-property: color;
  transition-duration: var(--fandhe-motion-duration-fast);
  transition-timing-function: var(--fandhe-motion-easing-standard);
}

[data-scope="link"][data-part="root"].fd-link--variant-plain {
  --fandhe-link-text-decoration: none;
}

[data-scope="link"][data-part="root"].fd-link--variant-underline {
  --fandhe-link-text-decoration: underline;
}

[data-scope="link"][data-part="root"].fd-link--color-palette-accent {
  --fandhe-palette: var(--fandhe-color-accent);
  --fandhe-palette-emphasized: var(--fandhe-color-accent-emphasized);
  --fandhe-palette-fg: var(--fandhe-color-accent-fg);
  --fandhe-palette-subtle: var(--fandhe-color-accent-subtle);
  --fandhe-palette-muted: var(--fandhe-color-accent-muted);
  --fandhe-palette-fg-subtle: var(--fandhe-color-accent-fg-subtle);
}

[data-scope="link"][data-part="root"].fd-link--color-palette-info {
  --fandhe-palette: var(--fandhe-color-info);
  --fandhe-palette-emphasized: var(--fandhe-color-info-emphasized);
  --fandhe-palette-fg: var(--fandhe-color-info-fg);
  --fandhe-palette-subtle: var(--fandhe-color-info-subtle);
  --fandhe-palette-muted: var(--fandhe-color-info-muted);
  --fandhe-palette-fg-subtle: var(--fandhe-color-info-fg-subtle);
}

[data-scope="link"][data-part="root"].fd-link--color-palette-success {
  --fandhe-palette: var(--fandhe-color-success);
  --fandhe-palette-emphasized: var(--fandhe-color-success-emphasized);
  --fandhe-palette-fg: var(--fandhe-color-success-fg);
  --fandhe-palette-subtle: var(--fandhe-color-success-subtle);
  --fandhe-palette-muted: var(--fandhe-color-success-muted);
  --fandhe-palette-fg-subtle: var(--fandhe-color-success-fg-subtle);
}

[data-scope="link"][data-part="root"].fd-link--color-palette-warning {
  --fandhe-palette: var(--fandhe-color-warning);
  --fandhe-palette-emphasized: var(--fandhe-color-warning-emphasized);
  --fandhe-palette-fg: var(--fandhe-color-warning-fg);
  --fandhe-palette-subtle: var(--fandhe-color-warning-subtle);
  --fandhe-palette-muted: var(--fandhe-color-warning-muted);
  --fandhe-palette-fg-subtle: var(--fandhe-color-warning-fg-subtle);
}

[data-scope="link"][data-part="root"].fd-link--color-palette-danger {
  --fandhe-palette: var(--fandhe-color-danger);
  --fandhe-palette-emphasized: var(--fandhe-color-danger-emphasized);
  --fandhe-palette-fg: var(--fandhe-color-danger-fg);
  --fandhe-palette-subtle: var(--fandhe-color-danger-subtle);
  --fandhe-palette-muted: var(--fandhe-color-danger-muted);
  --fandhe-palette-fg-subtle: var(--fandhe-color-danger-fg-subtle);
}

[data-scope="link"][data-part="root"].fd-link--color-palette-neutral {
  --fandhe-palette: var(--fandhe-color-neutral);
  --fandhe-palette-emphasized: var(--fandhe-color-neutral-emphasized);
  --fandhe-palette-fg: var(--fandhe-color-neutral-fg);
  --fandhe-palette-subtle: var(--fandhe-color-neutral-subtle);
  --fandhe-palette-muted: var(--fandhe-color-neutral-muted);
  --fandhe-palette-fg-subtle: var(--fandhe-color-neutral-fg-subtle);
}

[data-scope="link"][data-part="root"][aria-current="page"] {
  font-weight: var(--fandhe-font-font-weight-medium);
}

[data-scope="link"][data-part="root"]:focus-visible {
  outline: var(--fandhe-focus-ring-width, 2px) solid var(--fandhe-palette, var(--fandhe-color-focus-ring, var(--fandhe-color-accent)));
  outline-offset: var(--fandhe-focus-ring-offset, 2px);
}

@media (hover: hover) {
  [data-scope="link"][data-part="root"]:hover:not([data-disabled]) {
    color: var(--fandhe-palette-emphasized, var(--fandhe-color-accent-emphasized));
  }
}

}
*,
*::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 は全幅バー化に伴い廃止した。#3606 で
* favicon と同じロゴ（`.docs-brand-mark`）を前置するため inline-flex にした。
*/
.docs-brand {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: -0.01em;
color: var(--fandhe-color-fg);
text-decoration: none;
/* 幅が詰まってもハイフン位置で折り返してヘッダー高さを超えないようにする。 */
white-space: nowrap;
}

/* ロゴ。装飾（ラッパーが aria-hidden）で、内側 svg は寸法をラッパーへ従わせる。 */
.docs-brand-mark {
display: inline-flex;
flex: none;
width: 1.5rem;
height: 1.5rem;
}

.docs-brand-mark > svg {
display: block;
width: 100%;
height: 100%;
}

/* バージョン badge（pre-styled-ui の badge を内包、#3606）。brand リンクの外に置く。 */
.docs-brand-version {
display: inline-flex;
align-items: center;
flex: none;
margin-left: 0.5rem;
white-space: nowrap;
}

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

/*
* `ul.docs-header-menu` は nav_list の `list()` を再利用しており、
* `[data-scope="nav-list"][data-part="list"]`（詳細度 0,2,0、
* `flex-direction: column`、イシュー #1805 で追加）が同時に当たる。
* 単一 class（0,1,0）では負けてトリガーが縦積みになり、固定高さの
* ヘッダー外へはみ出すため、プレフィックス付きセレクタで横並びを確定する。
*/
.docs-header nav.docs-header-nav .docs-header-menu {
display: flex;
flex-direction: row;
list-style: none;
margin: 0;
padding: 0;
gap: 0.25rem;
}

/*
* トリガーは 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）
* だけで確定させてよい（メガパネル内は nav_list anatomy を使わないためプレフィックス
* も不要）
* （#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;
/* tab_nav 風（#3606）: 下線で現在地を示すため角丸と背景は持たない。 */
border-bottom: 2px solid transparent;
border-radius: 0;
font: inherit;
font-size: 0.85rem;
font-weight: 500;
color: var(--fandhe-color-fg-muted);
text-decoration: none;
/* 幅が詰まったときに「Getting Started」等がラベル内で折り返して
* ヘッダー高さを超えないようにする。 */
white-space: nowrap;
}

.docs-header-trigger:hover {
color: var(--fandhe-color-fg);
}

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

/*
* 現在セクションの表現（イシュー #1012、#3606 で tab_nav 風へ変更）。
* ドロップダウン内リンクの `a[aria-current="page"]`（ページ完全一致）とは
* 軸が異なる `[aria-current="true"]` を使う。tab_nav の current 表現
* （前景色 + accent 下線 + medium ウェイト）に合わせ、新しい色トークンは
* 足さない。DOM と `aria-current` の値は変えない。
*/
.docs-header-trigger[aria-current="true"] {
color: var(--fandhe-color-fg);
background: transparent;
border-bottom-color: var(--fandhe-color-accent);
font-weight: var(--fandhe-font-font-weight-medium);
}

/*
* ---- ヘッダーアクション（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;
/* 狭いスマホ幅（375px 前後）でアクション群がビューポート右端を越えて
* 横スクロールを生まないよう、縮小を許して検索入力を縮める。左余白は
* 縮んだ検索入力がブランドに接しないための最小間隔。 */
min-width: 0;
padding-left: 0.75rem;
}

/*
* GitHub リンクは枠なしのプレーンテキストリンク（fandhe-backend
* `.docs-github-link` と同値、イシュー #1110 の続き。旧 padding/
* border-radius/hover 背景は廃止）。色は既存 fandhe トークンのまま
* （配色非統一は既決事項、コミット de83bc2）。
*/
.docs-github-link {
display: inline-flex;
align-items: center;
}

/* 内側は pre-styled-ui の link（呼び出し側 class を持てないため、`.docs-*` 前置の
* 詳細度で recipe の色・装飾を上書きする。#3606）。 */
.docs-github-link [data-scope="link"][data-part="root"] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
font-weight: 500;
color: var(--fandhe-color-fg-muted);
text-decoration: none;
}

.docs-github-link [data-scope="link"][data-part="root"]:hover {
color: var(--fandhe-color-fg);
}

.docs-github-link [data-scope="link"][data-part="root"]:focus-visible {
outline: 2px solid var(--fandhe-color-accent);
outline-offset: 2px;
}

/*
* テーマトグルのラッパー（#3606）。見た目は内側の pre-styled-ui button
* （ghost）が担うため、ラッパー自身は枠・背景・padding を持たない。
* 可視ラベルは `.docs-theme-toggle-label` で、`site.js` がその textContent
* だけを書き換える。
*/
.docs-theme-toggle {
display: inline-flex;
align-items: center;
}

.docs-theme-toggle-label {
font-size: 0.85rem;
font-weight: 500;
}

/*
* 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;
}

/*
* 本文先頭のパンくず付きページ見出し（イシュー #3607、`crate::page_header`）。
* Primitives ページは `site-primitives.css`（breadcrumb recipe なし）を読むため、
* recipe と同じ値をここで再現する。`.docs-content ol` / `li` / `a`（typography_css、
* 後段出力）に順序によらず勝つよう、`.docs-content` を前置して詳細度を上げる。
*/
.docs-page-heading {
margin-block-end: var(--fandhe-space-4);
}

.docs-content .docs-page-breadcrumb {
margin-block-end: var(--fandhe-space-2);
font-size: 0.875rem;
}

.docs-content .docs-page-breadcrumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--fandhe-space-1-5, 0.375rem);
list-style: none;
margin: 0;
padding: 0;
overflow-wrap: break-word;
}

.docs-content .docs-page-breadcrumb li {
min-width: 0;
margin: 0;
line-height: 1.5;
}

.docs-content .docs-page-breadcrumb a {
color: var(--fandhe-color-fg-muted);
}

.docs-content .docs-page-breadcrumb a:hover {
color: var(--fandhe-color-fg);
}

.docs-content .docs-page-breadcrumb [aria-current] {
color: var(--fandhe-color-fg);
}

.docs-content .docs-page-breadcrumb li[aria-hidden] {
color: var(--fandhe-color-fg-subtle);
}

/*
* フェンスコードのヘッダー帯（言語ラベル + コピーボタン、イシュー #3605/#3620、
* `crate::code_copy`）。枠はラッパー側へ持たせ、`pre` の枠・角丸は外す。
* `hidden` 属性は `crate::script::SITE_JS` が配線完了後にのみ除去する。
*/
.docs-content .docs-code-block {
margin: 0 0 1.05rem;
border: 1px solid var(--fandhe-color-border);
border-radius: 0.6rem;
overflow: hidden;
min-width: 0;
background: var(--fandhe-color-bg-muted);
}

/* `.docs-content pre`（typography_css、後段出力）より詳細度を上げて枠を外す。 */
.docs-content .docs-code-block pre {
margin: 0;
border: 0;
border-radius: 0;
}

.docs-code-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
min-height: 2.25rem;
padding: 0.25rem 0.5rem 0.25rem 1.1rem;
background: var(--fandhe-color-bg-subtle);
border-bottom: 1px solid var(--fandhe-color-border);
}

/* 帯は常に flow へ置く（ボタンの hidden 解除で pre が押し下がる読み込み時のずれを避ける）。 */
.docs-code-lang {
font-size: 0.75rem;
font-weight: 500;
color: var(--fandhe-color-fg-muted);
user-select: none;
}

.docs-code-copy {
margin-left: auto;
font: inherit;
font-size: 0.75rem;
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.2rem 0.5rem;
cursor: pointer;
}

.docs-code-copy:hover,
.docs-code-copy[data-copy-state="copied"] {
color: var(--fandhe-color-fg);
border-color: var(--fandhe-color-accent);
}

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

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

.docs-code-copy-status {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

/* 404 ページ（イシュー #3623、`crate::not_found`）。 */
.docs-not-found {
max-width: 36rem;
margin-inline: auto;
padding-block: 2rem;
overflow-wrap: anywhere;
}

.docs-not-found-links {
margin-top: 1.5rem;
}

/* 後段出力の `.docs-content ul`/`li`（typography_css）に負けないよう詳細度を上げる。 */
.docs-content .docs-not-found-links ul {
margin: 0;
padding: 0;
list-style: none;
}

.docs-content .docs-not-found-links li {
padding-block: 0.5rem;
border-bottom: 1px solid var(--fandhe-color-border);
}

/*
* ---- 検索 UI（検索ボタン + 検索ダイアログ、イシュー #958/#3672） ----
*
* `.docs-header-actions` の第 1 子（`crate::layout` 参照）。`.docs-search` は
* ボタンとダイアログを含む可視化ゲートで、既定 `hidden` の退避経路は
* `.docs-theme-toggle[hidden]` と同型（配線完了後にのみ
* `crate::script::SITE_JS` が `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;
}

/*
* 検索入力。枠・背景・虫眼鏡・kbd は外側の pre-styled-ui `input_group`
* （#3606）が担い、入力欄自身は group 内で伸縮する無枠のコントロールにする
* （input_group の内側リセットは `field` の input だけが対象で、素の input
* には効かないため下の `.docs-search [data-scope="input-group"] > ...` で落とす）。
* `min-width: 0` は狭幅帯域で flex 縮小を許すために残す。
*/
.docs-search-input {
flex: 1 1 0%;
width: 100%;
min-width: 0;
font: inherit;
font-size: var(--fandhe-font-font-size-sm);
padding: 0.3rem 0.25rem;
border: 0;
background: transparent;
color: var(--fandhe-color-fg);
}

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

/* group 自体の縮小を許し、入力欄の枠・outline は group 外周のリング
* （input_group recipe の root `:focus-within`）へ任せる。 */
.docs-search [data-scope="input-group"][data-part="root"] {
min-width: 0;
flex-wrap: nowrap;
}

.docs-search [data-scope="input-group"] > .docs-search-input {
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}

.docs-search [data-scope="input-group"] > .docs-search-input:focus-visible {
outline: none;
}

/*
* 検索ボタン（ラッパー span + 内側 pre-styled-ui button、`theme_toggle` と同型）。
* アイコン + ラベル + kbd を 1 行に収める。Primitives ページ（recipe 抜き CSS）でも
* 崩れないよう、配置だけをここで持つ。
*/
.docs-search-trigger {
display: inline-flex;
align-items: center;
}

.docs-search-trigger button {
display: inline-flex;
white-space: nowrap;
align-items: center;
gap: 0.4rem;
}

.docs-search-trigger-label {
font-size: 0.85rem;
font-weight: 500;
}

.docs-search-trigger-key {
display: inline-flex;
align-items: center;
}

/*
* 検索ダイアログ。閉状態の非表示は UA の `dialog:not([open])` に任せるため、
* `display` を伴うレイアウト指定は必ず `[open]` にだけ付ける（素の
* `.docs-search-dialog` に `display` を書くと閉じていても表示される）。
* 背景クリック判定のため dialog 自体は `padding: 0` とし、内側の
* `.docs-search-dialog-panel` が全面を覆う。
*/
.docs-search-dialog {
width: min(40rem, calc(100vw - 2rem));
max-width: none;
margin: 12vh auto auto;
padding: 0;
border: 1px solid var(--fandhe-color-border);
border-radius: var(--fandhe-radius-md);
background: var(--fandhe-color-bg);
color: var(--fandhe-color-fg);
box-shadow: var(--fandhe-shadow-md);
}

.docs-search-dialog[open] {
display: block;
}

.docs-search-dialog::backdrop {
background: var(--fandhe-color-bg-overlay);
}

.docs-search-dialog-panel {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.75rem;
}

/* 結果一覧はダイアログ内の通常フロー（旧ポップアップの絶対配置は廃止）。 */
.docs-search-results {
position: static;
margin: 0;
padding: 0.25rem;
list-style: none;
min-width: 0;
max-height: min(24rem, 55vh);
overflow-y: auto;
background: var(--fandhe-color-bg);
border: 0;
}

.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);
}

/*
* ---- Assets メガメニュー（イシュー #3701、`crate::nav::header_nav` の `mega_panel`） ----
*
* セクション別の見出し一覧 popup は廃止し、メガメニューを持つのは Assets だけ。
* 開閉の唯一の情報源は `:hover`/`:focus-within`（JS 不使用のため `aria-expanded`
* 等の動的属性で状態を表現しない）。パネルはヘッダー直下に全幅で出す。包含ブロックは
* `div.docs-header-inner`（drawer の節で `position: relative`）で、`li.docs-header-group`
* は static のままにして追加の DOM を足さない。
*
* ホバーの橋渡し: `.docs-header-inner` は `align-items: center` のため li だけだとトリガー下端から
* ヘッダー下端までの隙間でホバーが切れる。ナビを `align-self: stretch` にして li をヘッダー高さ
* いっぱいに伸ばす。さらに、斜めにカードへ向かう動きで一瞬 li の外（ヘッダー上の別の場所）を
* 通っても閉じないよう、閉じるときだけ 0.25s 遅らせる（`visibility` の遅延遷移。
* アニメーションではなく状態切替の猶予で、開くときは遅延なし）。
*
* パネル内は headless `nav_list` anatomy を使わない素の ul/li/a で、nav_list 側の
* `[data-scope][data-part]` 規則と詳細度で競り合わない。`.docs-header nav.docs-header-nav`
* を前置するのは基底の `.docs-header-nav` 等との順序依存を避ける保険。
*/
.docs-header-nav {
align-self: stretch;
}

.docs-header nav.docs-header-nav .docs-header-menu {
align-items: stretch;
}

.docs-header-group {
display: flex;
align-items: center;
}

.docs-header nav.docs-header-nav .docs-header-mega {
position: absolute;
top: 100%;
left: 0;
right: 0;
visibility: hidden;
transition: visibility 0s linear 0.25s;
z-index: 20;
padding: 1rem 1.5rem;
background: var(--fandhe-color-bg);
border-bottom: 1px solid var(--fandhe-color-border);
box-shadow: var(--fandhe-shadow-md);
/* ビューポート内に収め、はみ出す分はパネル内でスクロールさせる。
* `dvh` 対応ブラウザでは後勝ちで上書きする。 */
max-height: calc(100vh - var(--fandhe-space-docs-header-height) - 1rem);
max-height: calc(100dvh - var(--fandhe-space-docs-header-height) - 1rem);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
}

.docs-header nav.docs-header-nav .docs-header-group:hover > .docs-header-mega,
.docs-header nav.docs-header-nav .docs-header-group:focus-within > .docs-header-mega {
visibility: visible;
transition-delay: 0s;
}

.docs-header nav.docs-header-nav .docs-header-mega-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
max-width: 64rem;
margin: 0 auto;
padding: 0;
list-style: none;
}

.docs-header nav.docs-header-nav .docs-header-mega-cell {
margin: 0;
padding: 0;
list-style: none;
}

@media (min-width: 1024px) {
.docs-header nav.docs-header-nav .docs-header-mega-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

/*
* カードの `transition: none` は、テーマ切替の直後に途中の色（light 値）を描画して
* ダークの AA を割って見せないため（イシュー #3603 と同じ観点）。
*/
.docs-header nav.docs-header-nav .docs-header-mega-card {
display: block;
height: 100%;
box-sizing: border-box;
padding: 0.75rem 0.9rem;
border: 1px solid var(--fandhe-color-border);
border-radius: 0.5rem;
color: var(--fandhe-color-fg);
text-decoration: none;
transition: none;
}

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

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

/* 所属表示は `"true"`（ヘッダーは `"page"` を使わない） */
.docs-header nav.docs-header-nav .docs-header-mega-card[aria-current="true"] {
border-color: var(--fandhe-color-accent);
background: var(--fandhe-color-docs-accent-bg);
}

.docs-header nav.docs-header-nav .docs-header-mega-title {
display: block;
font-weight: 600;
font-size: 0.9rem;
}

.docs-header nav.docs-header-nav .docs-header-mega-desc {
display: block;
margin-top: 0.2rem;
font-size: 0.8rem;
color: var(--fandhe-color-fg-muted);
}
/*
* ---- 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);
/* 768px 未満はヘッダーのナビ drawer が全セクションへの手段になるため、aside は出さない
* （旧 Menu トグルの置き換え、イシュー #3674）。`min-width: 768px` で block へ戻す。 */
display: none;
}

.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;
}

/*
* nav_list recipe の `color, background` transition は、テーマ切替の直後に
* 途中の色（light 値）を描画してダークの AA を割って見せるため、ページの他要素と
* 同じく即時に切り替える（イシュー #3603）。
*/
.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;
transition: none;
}

/*
* `a:hover` は `:hover` を追加で 3 回繰り返し（`a:hover:hover:hover:hover`、
* 詳細度は (0,3,2) → (0,6,2)）で `nav_list::stylesheet()` の `link` hover
* （イシュー #1529 で `StateCondition::HoverExcept("aria-current",
* "page")` へ変更され `[data-scope][data-part]:hover:not([data-disabled]):
* not([aria-current="page"])`、詳細度 (0,5,0) が新たな最大となった）を
* 常に上回る。ヘッダードロップダウン（上記コメント参照）と同型の対策、
* `:hover` の重複指定はマッチ対象を変えず specificity の b 成分のみを
* 底上げする。b 成分（6 > 5）だけで確実に上回るため c 成分の大小関係に
* 依存しない。加えて `:not([aria-current="page"])` を末尾に付与し、
* 現在ページリンク（下記 `a[aria-current="page"]` が accent で強調する
* 対象）を本 hover 規則の一致対象から除外する。これを付けないと本規則
* が現在ページ強調規則に hover 時のみ競り勝ち、現在ページリンクを
* ホバーすると accent 表示が通常 hover 表示へ戻ってしまう
* （codex-review P1 / Cursor Bugbot(Medium) 指摘、PR #1805）。
*/
.docs-sidebar nav.sidebar a:hover:hover:hover:hover:not([aria-current="page"]) {
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-fg);
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;
display: flex;
align-items: center;
gap: 0.5rem;
justify-content: space-between;
padding: 0.32rem 0.5rem;
border-radius: 0.4rem;
font-weight: var(--fandhe-font-font-weight-medium);
font-size: var(--fandhe-font-font-size-sm);
letter-spacing: normal;
text-transform: none;
color: var(--fandhe-color-fg-muted);
}

.docs-sidebar nav.sidebar details.docs-nav-group[open] > .docs-nav-group-summary {
color: var(--fandhe-color-fg);
}

/* 開閉の三角（イシュー #3611）。DOM を増やさず疑似要素の border 2 辺を回転して描く。
* 即時切替（transition なし）で #3603 の方針とそろえる。 */
.docs-sidebar nav.sidebar .docs-nav-group-summary::before {
content: "";
order: -1;
flex: none;
width: 0.4rem;
height: 0.4rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(-45deg);
}

.docs-sidebar nav.sidebar details.docs-nav-group[open] > .docs-nav-group-summary::before {
transform: rotate(45deg);
}

.docs-sidebar nav.sidebar .docs-nav-group-title {
flex: 1 1 auto;
min-width: 0;
overflow-wrap: anywhere;
}

/* 件数 badge。Primitives ページは recipe 抜き CSS のため、見た目を docs 側で完結させる。 */
.docs-sidebar nav.sidebar .docs-nav-group-count [data-scope="badge"] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.4rem;
padding: 0.05rem 0.4rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: var(--fandhe-font-font-weight-medium);
font-variant-numeric: tabular-nums;
background: var(--fandhe-color-bg-subtle);
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 0.75rem;
padding: 0;
padding-inline-start: 0.4rem;
border-inline-start: 1px solid var(--fandhe-color-border);
display: flex;
flex-direction: column;
gap: 0.05rem;
}

/*
* ---- ナビ drawer（ヘッダーと同じ構成のハンバーガーメニュー、イシュー #3674 / #3702） ----
*
* `crate::nav::nav_drawer()` と `crate::layout` が `div.docs-header-inner` の末尾へ
* 出す `input.docs-nav-drawer-toggle` → `label` → `nav.docs-nav-drawer`。開閉状態の
* 唯一の情報源は checkbox の `:checked`（JS 不要。`:focus-within` は使わない）。
* 旧サイドバーの Menu トグル（#3602/#3611）はこれに置き換えた。drawer は
* ヘッダー直下へ重なるパネル。1024px 未満のヘッダーは sticky ではなく折り返しで
* 実高さが変わるため、drawer に viewport 基準の max-height は掛けず、長い内容は
* ページ自体のスクロールで末尾まで辿れる（固定値で差し引くと下端が画面外に出る）。
* 1024px 以上の `(hover: none)` はヘッダーが sticky・1 段固定なので、専用 `@media`
* で drawer 内スクロール（`dvh` は `vh` へフォールバック）にする。表示するのは 768px 未満と、
* 768px 以上の `(hover: none)` 端末（下記の専用 `@media`）。
* `.docs-header-inner` は drawer の配置基準（`position: relative`）になる。
*/
.docs-header-inner {
position: relative;
}

.docs-nav-drawer-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-nav-drawer-toggle-label {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 2.5rem;
height: 2.5rem;
border: 1px solid var(--fandhe-color-border);
border-radius: 0.4rem;
cursor: pointer;
color: var(--fandhe-color-fg);
}

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

.docs-nav-drawer-toggle-label::before {
content: "";
flex: none;
width: 1.1rem;
height: 0.8rem;
background: linear-gradient(currentColor, currentColor) top / 100% 2px no-repeat,
linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
linear-gradient(currentColor, currentColor) bottom / 100% 2px no-repeat;
}

.docs-nav-drawer-toggle:checked + .docs-nav-drawer-toggle-label {
background: var(--fandhe-color-docs-accent-bg);
border-color: var(--fandhe-color-accent);
}

.docs-nav-drawer-toggle:checked + .docs-nav-drawer-toggle-label::before {
background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}

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

/* 可視文字は出さず、ラベルのアクセシブル名（"Menu"）としてだけ残す。 */
.docs-nav-drawer-toggle-text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}

.docs-header nav.docs-nav-drawer {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 20;
padding: 0.25rem 1.5rem 1rem;
background: var(--fandhe-color-bg);
border-bottom: 1px solid var(--fandhe-color-border);
box-shadow: var(--fandhe-shadow-md);
font-size: var(--fandhe-font-font-size-sm);
}

.docs-header .docs-nav-drawer-toggle:checked ~ nav.docs-nav-drawer {
display: block;
}

/* nav_list recipe（`[data-scope][data-part]`、0,2,0）に勝つため、
* `.docs-header nav.docs-nav-drawer` を前置して詳細度を確定する。 */
.docs-header nav.docs-nav-drawer ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.05rem;
}

.docs-header nav.docs-nav-drawer li {
margin: 0;
}

.docs-header nav.docs-nav-drawer .docs-nav-drawer-sections {
gap: 0;
}

.docs-header nav.docs-nav-drawer .docs-nav-drawer-section {
border-bottom: 1px solid var(--fandhe-color-border);
}

.docs-header nav.docs-nav-drawer .docs-nav-drawer-section:last-child {
border-bottom: none;
}

/* セクション索引・メニュー見出しへのリンク。
* リンクの色の切替は即時（#3603 と同じ理由で transition なし）。 */
.docs-header nav.docs-nav-drawer a.docs-nav-drawer-section-link {
display: block;
min-height: 2.75rem;
box-sizing: border-box;
padding: 0.75rem 0.5rem;
color: var(--fandhe-color-fg);
font-weight: var(--fandhe-font-font-weight-medium);
text-decoration: none;
transition: none;
}

.docs-header nav.docs-nav-drawer a.docs-nav-drawer-section-link[aria-current="true"] {
color: var(--fandhe-color-accent);
font-weight: var(--fandhe-font-font-weight-semibold);
}

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

/* メニュー（Assets）配下のメンバーリンク列（#3702）。メガパネルのカードと同じ情報量で、
* 見出しリンクの下へ字下げして縦に並べる。 */
.docs-header nav.docs-nav-drawer .docs-nav-drawer-menu {
padding-bottom: 0.25rem;
}

.docs-header nav.docs-nav-drawer .docs-nav-drawer-menu-list {
margin: 0 0 0.5rem 0.5rem;
padding-inline-start: 0.4rem;
border-inline-start: 1px solid var(--fandhe-color-border);
}

.docs-header nav.docs-nav-drawer .docs-nav-drawer-menu-item + .docs-nav-drawer-menu-item {
border-top: 1px solid var(--fandhe-color-border);
}

.docs-header nav.docs-nav-drawer a.docs-nav-drawer-menu-link {
display: block;
min-height: 2.75rem;
box-sizing: border-box;
padding: 0.5rem 0.5rem;
color: var(--fandhe-color-fg);
text-decoration: none;
transition: none;
}

.docs-header nav.docs-nav-drawer a.docs-nav-drawer-menu-link:hover:hover:hover {
background: var(--fandhe-color-bg-subtle);
}

.docs-header nav.docs-nav-drawer a.docs-nav-drawer-menu-link[aria-current="true"] {
color: var(--fandhe-color-accent);
font-weight: var(--fandhe-font-font-weight-semibold);
}

.docs-header nav.docs-nav-drawer .docs-nav-drawer-menu-title {
display: block;
font-weight: var(--fandhe-font-font-weight-medium);
}

.docs-header nav.docs-nav-drawer .docs-nav-drawer-menu-desc {
display: block;
color: var(--fandhe-color-fg-muted);
font-size: 0.8rem;
overflow-wrap: anywhere;
}

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

.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;
/* 空白を含まない長い ASCII 列（識別子・パス・バッククォート付き文字列）が
* 狭幅で行ボックスを越えて文書幅を押し広げるのを防ぐ（イシュー #3602）。
* `anywhere` ではなく `break-word` なのは min-content 幅を変えないため
* で、表セルが最小幅まで潰れず表は従来どおり横スクロール枠に収まる。 */
overflow-wrap: break-word;
}

/* ---- 右目次カラム内のページ内目次（イシュー #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;
/* 縦線（rail）。現在地バー（下記 `::before`）がこの線に重なる。 */
border-left: 1px solid var(--fandhe-color-border);
}

.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.75rem;
position: relative;
}

.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);
}

/* 現在地インジケータ（イシュー #3610）。rail と重なる 2px の縦棒。 */
.docs-toc a[aria-current="location"]::before {
content: "";
position: absolute;
left: -1px;
top: 0;
bottom: 0;
width: 2px;
background: var(--fandhe-color-accent);
}

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

/* 階層インデントは `a` の padding で表す（`li` に付けると現在地バーが
* rail からずれる）。`li` 側は 0 のまま。 */
.docs-toc-level-3 {
padding-left: 0;
}

.docs-toc .docs-toc-level-3 > a {
padding-left: 1.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 details {
border: 1px solid var(--fandhe-color-border);
border-radius: 0.4rem;
overflow: hidden;
}

.docs-toc-inline-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
list-style: none;
cursor: pointer;
font-size: 0.8rem;
font-weight: var(--fandhe-font-font-weight-semibold);
padding: 0.5rem 0.7rem;
color: var(--fandhe-color-fg-muted);
}

.docs-toc-inline-summary::-webkit-details-marker {
display: none;
}

.docs-toc-inline details[open] > .docs-toc-inline-summary {
border-bottom: 1px solid var(--fandhe-color-border);
}

.docs-toc-inline-icon {
width: 1rem;
height: 1rem;
flex: none;
transition: transform 150ms ease;
}

.docs-toc-inline details[open] .docs-toc-inline-icon {
transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
.docs-toc-inline-icon {
transition: none;
}
}

.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;
padding: 0.5rem 0.7rem;
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 .docs-toc-level-3 > a {
padding-left: 1rem;
}

.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: 0 0 auto;
display: flex;
min-width: 0;
}

/*
* カード型ページャ（イシュー #3608）。アンカー `a.docs-pager-link` は装飾を
* 持たない全面リンクで、見た目は内側の pre-styled `card`（Outline）が担う。
* Primitives ページは recipe CSS を含まない `site-primitives.css` を読むため、
* 枠・角丸・padding・アイコン寸法はここで完全指定する（recipe に勝つよう
* `.docs-pager-link` を前置）。`link_overlay::stylesheet()` は取り込まない
* （`crate::nav::prev_next_nav` rustdoc 参照）。
*/
nav.prev-next [data-part="overlay"] {
flex: 1 1 auto;
display: flex;
min-width: 0;
color: var(--fandhe-color-fg);
text-decoration: none;
border-radius: 0.65rem;
}

.docs-pager-link [data-scope="card"][data-part="root"] {
flex: 1 1 auto;
width: 100%;
box-sizing: border-box;
border: 1px solid var(--fandhe-color-border);
border-radius: 0.65rem;
background: var(--fandhe-color-bg-subtle);
color: inherit;
}

.docs-pager-link [data-scope="card"][data-part="body"] {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.75rem;
padding: 0.85rem 1rem;
}

.docs-pager-link [data-scope="icon"] {
width: 1rem;
height: 1rem;
flex-shrink: 0;
color: var(--fandhe-color-fg-muted);
}

.docs-pager-meta {
display: flex;
flex-direction: column;
flex: 1 1 auto;
gap: 0.15rem;
min-width: 0;
}

.docs-pager-label,
.docs-pager-section {
font-size: 0.75rem;
color: var(--fandhe-color-fg-muted);
overflow-wrap: anywhere;
}

.docs-pager-title {
font-size: 0.95rem;
font-weight: var(--fandhe-font-font-weight-medium);
overflow-wrap: anywhere;
}

nav.prev-next .next .docs-pager-meta {
text-align: right;
}

/*
* hover はサイドバー現在ページと同じアクセント配色（枠線・文字色・
* `--fandhe-color-docs-accent-bg` 背景、イシュー #910）。
*/
.docs-pager-link:hover [data-scope="card"][data-part="root"] {
border-color: var(--fandhe-color-accent);
background: var(--fandhe-color-docs-accent-bg);
}

.docs-pager-link:hover .docs-pager-title {
color: var(--fandhe-color-accent);
}

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

.docs-pager-link:focus-visible [data-scope="card"][data-part="root"] {
border-color: var(--fandhe-color-accent);
}

/*
* ---- `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 {
display: block;
/*
* `.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;
}

/* この帯域ではヘッダーナビが表示され、ナビ drawer（ハンバーガー）は不要になる。
* 狭幅で開いたまま幅を広げたときに drawer が残らないよう、開状態も非表示にする。
* `(hover: none)` 端末は後ろの専用ブロックが再表示する（イシュー #3674）。 */
.docs-nav-drawer-toggle,
.docs-nav-drawer-toggle-label {
display: none;
}

.docs-header .docs-nav-drawer-toggle:checked ~ nav.docs-nav-drawer {
display: none;
}

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

/* `.docs-header-nav`（ヘッダーナビ、イシュー #908 / #3701）は
* この帯域から表示に切り替える。モバイルはナビ drawer（#3674）が
* ナビ手段を提供するため基底では非表示のまま。配置は 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 .prev,
nav.prev-next .next {
flex: 0 1 calc((100% - 0.75rem) / 2);
}

nav.prev-next .next {
margin-left: auto;
}
}

/*
* ---- `min-width: 1024px`: 1 段ヘッダー（イシュー #3673、#3701 で 1200px から引き下げ） ----
*
* ナビを 4 項目（Getting Started / Guides / Assets / API Reference）へ減らしたため、
* ラベル付きの操作部でも 1024px で 1 段に収まる（実測: 最終トリガー右端 653px・
* 操作部左端 709px）。ナビは内容幅を基準に、足りなければ縮む側に回し、アクション群は
* 縮めない。トリガーは nowrap のため、収まらない幅は隠さず切らず 1024px 未満で 2 段へ倒す。
*/
@media (min-width: 1024px) {
.docs-header-nav {
flex: 0 1 auto;
}

.docs-header-actions {
flex: none;
}
}

/*
* ---- `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 li.docs-category-card,
.docs-content h2,
.docs-content h3 {
scroll-margin-top: calc(var(--fandhe-space-docs-header-height) + 1rem);
}

/*
* ---- `768px 以上 1024px 未満`: 2 段ヘッダー（イシュー #3673、#3701 で帯域を縮小） ----
*
* ヘッダーナビは #3701 で 4 項目（セクション別 popup は廃止、Assets のみメガメニュー）に
* なった。実測では、ラベル付きの操作部で最終トリガー右端 653px・操作部の幅約 315px のため
* 976px 未満で重なり、アイコンのみへ詰めても 768px では 8px 重なる（800px で 21px 空く）。
* 1 段が確実な 1024px を境界とする（1024〜1199px はラベル付きのまま 56px 空く）。
* ナビを 2 段目（`order: 1` +
* `flex-basis: 100%`）へ折り返し、ヘッダー高さを最小
* `--fandhe-space-docs-header-height-stacked` から内容に合わせて伸ばす。
* ヘッダーの実高さは折り返し行数で変わり CSS だけでは取得できないため、
* この帯域ではヘッダーを sticky にせず通常フローへ戻し、サイドバー・右目次・
* 見出しアンカーのオフセットをヘッダー高さに依存しない値にする。
* 上記の通常規則より後ろに置くことで同じ詳細度のまま上書きする。
* Assets のメガパネルはヘッダー下端から開くため、2 段目のナビと下端の間の余白は
* `li` 側の padding へ移し、トリガーからパネルへ移る途中でホバーが切れないようにする。
*/
@media (min-width: 768px) and (max-width: 1023.98px) {
/* 高さは固定せず最小値とする。フォント差などで 2 段目のトリガーが
* 1 行に収まらないときはメニュー自体を折り返し、ヘッダーがその分だけ
* 伸びて下の要素を押し下げる（ナビが画面右端やヘッダー外へ出ない）。 */
.docs-header {
position: static;
height: auto;
min-height: var(--fandhe-space-docs-header-height-stacked);
}

.docs-header-inner {
flex-wrap: wrap;
align-content: center;
row-gap: 0.35rem;
height: auto;
padding-top: 0.5rem;
padding-bottom: 0;
}

.docs-header-group {
align-items: flex-start;
padding-bottom: 0.5rem;
}

.docs-header-nav {
order: 1;
flex-basis: 100%;
margin-left: 0;
}

.docs-header nav.docs-header-nav .docs-header-menu {
flex-wrap: wrap;
}

/* 768px 付近でも 4 項目が 1 行に収まるよう左右余白を詰める
* （既定 0.65rem のままだと 768px で数 px 足りず折り返す）。 */
.docs-header-trigger {
padding: 0.3rem 0.5rem;
}

/* メガパネルは 2 段ヘッダーの下端から開く。ヘッダーの実高さは折り返し行数で
* 変わり CSS だけでは取得できないため、固定のヘッダー高さを引く式（追加の
* 折り返しで末尾が画面外へ出る）は使わず、ヘッダー高さに依存しない割合で
* 上限を決める。ヘッダーは sticky でなく通常フローのため、パネルが見えるのは
* ページ最上部で、上端はビューポート上端から高々ヘッダー分である。残りは
* パネル内でスクロールする（#3701）。 */
.docs-header nav.docs-header-nav .docs-header-mega {
max-height: 60vh;
max-height: 60dvh;
}

/* ヘッダーが sticky でないため、sticky カラムはビューポート上端へ
* 張り付ける。右目次は 1200px 以上でのみ表示されるため、この帯域には
* 含まれない。 */
.docs-sidebar {
top: 0;
max-height: 100vh;
}

.docs-content li.docs-category-card,
.docs-content h2,
.docs-content h3 {
scroll-margin-top: 1rem;
}
}

/*
* ---- `1200px 以上 1440px 未満`: アクション群を詰めた 1 段ヘッダー（イシュー #3673） ----
*
* 実測ではラベル付きの操作部（検索 + GitHub + テーマ）が約 290px あり、1280px で
* 末尾のセクションが操作部の下へ潜った。この帯域では GitHub・テーマの可視ラベルと
* 検索ボタンの文言・kbd を clip でアイコンのみにし（アクセシブル名は GitHub の
* 文字列、`aria-label` が保つ）、トリガーの左右余白とメニューの gap を詰める。
* clip 規則は 767.98px 以下のブロックと同一の宣言を持つ。
* `(max-width)` を先に書くのは、`@media (min-width: 1200px)` で始まる文字列を
* 3 カラム用ブロックだけに予約するため（既存テストが先頭一致で分割する）。
*/
@media (max-width: 1439.98px) and (min-width: 1200px) {
.docs-header-trigger {
padding: 0.3rem 0.5rem;
}

.docs-header nav.docs-header-nav .docs-header-menu {
gap: 0.15rem;
}

.docs-header-actions {
gap: 0.5rem;
}

.docs-github-label,
.docs-theme-toggle-label,
.docs-search-trigger-label,
.docs-search-trigger-key {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
}

/*
* ---- `1440px 以上`: ナビと操作部の間隔確保（イシュー #3659/#3673） ----
*/
@media (min-width: 1440px) {
.docs-header-actions {
padding-left: 1.5rem;
}
}

/*
* ---- `768px 未満`: 検索ボタンをアイコンのみにした 1 段ヘッダー（イシュー #3602/#3672） ----
*
* brand・検索ボタン・GitHub・テーマトグルを DOM 順のまま 1 つの flex 行へ並べる。
* #3672 で検索入力欄がダイアログへ移り、検索はアイコンのみのボタンになったため
* 旧 2 段目（全幅の検索入力）は不要になり、ブランドと同じ 1 段に収まる
* （収まらない極端な幅では `flex-wrap: wrap` が折り返す）。`order` は使わず
* 視覚順と Tab 順を DOM 順に一致させる。
* GitHub リンクの可視ラベル（`.docs-github-label`）とテーマトグルの可視ラベルは
* clip で隠す（リンクは文字列がアクセシブル名として残り、トグルは aria-label で
* 名前を保つ）。アイコンのみになるため 2 段目の GitHub・トグル分 7rem に収まり
* 3 段化しない（PR #3666 の Bugbot 指摘）。DOM は
* 変えず `.docs-header-actions` を `display: contents` にして子を
* `.docs-header-inner` の flex item へ繰り上げる。JS 無効時は
* `.docs-search[hidden]` が非表示のため 2 段目は存在せず、`min-height` は
* 1 段分にとどめる（空の 2 段目を残さない）。実高さは折り返しで変わるため
* 768〜1023px 帯と同様に static へ戻し、見出しアンカーのオフセットを
* ヘッダー高さに依存させない。
*/
@media (max-width: 767.98px) {
/* ナビ drawer を持たないページ（`docs_page`/`docs_page_with_assets` 経由の旧呼び出し）は
* 狭幅でもサイドバーを出し、サイト内ナビを失わせない。 */
.docs-container[data-no-nav-drawer] .docs-sidebar {
display: block;
}

.docs-header {
position: static;
height: auto;
min-height: var(--fandhe-space-docs-header-height);
}

.docs-header-inner {
flex-wrap: wrap;
align-content: center;
column-gap: 0.5rem;
row-gap: 0.35rem;
height: auto;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}

.docs-header-actions {
display: contents;
}

.docs-github-link {
margin-left: auto;
}

/* 検索はアイコンのみのボタンになり、ブランドと同じ 1 段に収まる。
* 右寄せは表示中の検索が担い、GitHub の auto は検索が無い（無 JS）ときだけ使う。 */
.docs-search:not([hidden]) {
margin-left: auto;
}

.docs-search:not([hidden]) + .docs-github-link {
margin-left: 0;
}

.docs-github-label,
.docs-theme-toggle-label,
.docs-search-trigger-label,
.docs-search-trigger-key {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}

.docs-search-dialog {
margin-top: 4rem;
}

.docs-content li.docs-category-card,
.docs-content h2,
.docs-content h3 {
scroll-margin-top: 1rem;
}
}

/*
* ---- `(hover: none)` かつ `768px 以上`: タッチ端末はナビ drawer を使う（イシュー #3674） ----
*
* ヘッダーナビの Assets メガパネルは `:hover`/`:focus-within` で開くが、トリガーは索引ページへの
* `a[href]` で、タッチではタップすると遷移してしまい popup を安定して開けない。
* drawer はヘッダーナビと同じ項目（単独セクション + Assets の 5 層）を持つので、
* 主入力が hover できない端末ではヘッダーナビを隠してハンバーガーへ一本化する。
* 条件は `any-hover` ではなく `hover`（主入力）: マウスが主入力の 2-in-1 端末はメガパネルのまま。
* 全帯域・`min-width: 768px` ブロックより後ろに置き、同じ詳細度のまま上書きする。
* 1024px 以上の 1 段ヘッダーへハンバーガーを足してもはみ出さないよう、ナビごと隠す。
*/
@media (hover: none) and (min-width: 768px) {
.docs-nav-drawer-toggle {
display: inline-block;
}

.docs-nav-drawer-toggle-label {
display: inline-flex;
margin-left: 0.5rem;
}

.docs-header .docs-nav-drawer-toggle:checked ~ nav.docs-nav-drawer {
display: block;
}

.docs-header-nav {
display: none;
}
}

/* ナビの 2 段目が消えるので、2 段帯域のヘッダー最小高さを 1 段分へ戻す。 */
@media (hover: none) and (min-width: 768px) and (max-width: 1023.98px) {
.docs-header {
min-height: var(--fandhe-space-docs-header-height);
}
}

/* 1024px 以上のヘッダーは sticky・1 段で高さが固定なので、drawer の最大高さも 1 段分を引く。 */
@media (hover: none) and (min-width: 1024px) {
.docs-header nav.docs-nav-drawer {
max-height: calc(100vh - var(--fandhe-space-docs-header-height));
max-height: calc(100dvh - var(--fandhe-space-docs-header-height));
overflow-y: auto;
overscroll-behavior: contain;
}
}

/*
* サイトフッター（イシュー #3609 / #3703、`crate::site_footer`。ブランド列 + Docs / メニュー / Resources）。
* body 直下で `.docs-container` の外側の兄弟なので、sticky のサイドバー・右目次
* （包含ブロックは `.docs-container`）とは構造上重ならない。Primitives ページは
* heading / link / separator / text の recipe を持たない `site-primitives.css` を読むため、
* recipe と同じ値の代替規則を `.docs-footer.docs-footer` 前置（詳細度 0,2,1 以上）で再現する。
*/
.docs-footer {
margin-block-start: var(--fandhe-space-8, 2rem);
border-top: 1px solid var(--fandhe-color-border);
}

.docs-footer .docs-footer-inner {
max-width: var(--fandhe-space-docs-container-width);
margin: 0 auto;
padding: var(--fandhe-space-6, 1.5rem) var(--fandhe-space-docs-gutter);
}

.docs-footer .docs-footer-nav {
min-width: 0;
}

.docs-footer .docs-footer-top {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--fandhe-space-6, 1.5rem);
}

.docs-footer .docs-footer-brand {
min-width: 0;
}

.docs-footer.docs-footer .docs-footer-brand-name {
margin: 0 0 var(--fandhe-space-2, 0.5rem);
font-weight: 600;
color: var(--fandhe-color-fg);
overflow-wrap: anywhere;
}

.docs-footer.docs-footer .docs-footer-tagline {
font-size: 0.875rem;
color: var(--fandhe-color-fg-muted);
overflow-wrap: anywhere;
}

.docs-footer .docs-footer-columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--fandhe-space-6, 1.5rem) var(--fandhe-space-4, 1rem);
}

.docs-footer .docs-footer-group {
min-width: 0;
}

.docs-footer .docs-footer-list {
list-style: none;
margin: 0;
padding: 0;
}

.docs-footer .docs-footer-list li {
margin: 0;
padding: 0;
}

.docs-footer.docs-footer h2 {
margin: 0 0 var(--fandhe-space-2, 0.5rem);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.3;
}

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

.docs-footer.docs-footer a:hover {
color: var(--fandhe-color-fg);
text-decoration: underline;
}

.docs-footer.docs-footer hr {
height: 0;
margin: var(--fandhe-space-6, 1.5rem) 0 var(--fandhe-space-4, 1rem);
border: 0;
border-top: 1px solid var(--fandhe-color-border);
}

.docs-footer.docs-footer p {
margin: 0;
font-size: 0.875rem;
line-height: 1.5;
color: var(--fandhe-color-fg-muted);
}

.docs-footer .docs-footer-bottom {
display: flex;
flex-direction: column;
gap: var(--fandhe-space-3, 0.75rem);
}

@media (min-width: 768px) {
.docs-footer .docs-footer-columns {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.docs-footer .docs-footer-bottom {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
}

@media (min-width: 1024px) {
.docs-footer .docs-footer-top {
grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
}
}
/*
* ---- トップのランディング骨格とヒーロー（イシュー #3612、`crate::landing`） ----
*/

.docs-container.docs-landing {
display: block;
}

@media (min-width: 768px) {
.docs-landing .docs-sidebar {
display: none;
}

.docs-landing .docs-main {
padding: 1.5rem 2rem 4rem;
}
}

.docs-landing .docs-content {
max-width: none;
}

.docs-hero {
max-width: 52rem;
margin: 0 auto;
padding: 1.5rem 0 2rem;
text-align: center;
}

.docs-hero-meta {
margin-bottom: 1rem;
}

.docs-landing .docs-hero-title {
margin: 0 0 1rem;
padding: 0;
border: 0;
font-size: var(--fandhe-font-font-size-2xl);
font-weight: var(--fandhe-font-font-weight-semibold);
line-height: 1.25;
text-wrap: balance;
letter-spacing: -0.01em;
color: var(--fandhe-color-fg);
}

.docs-landing .docs-hero-lead {
margin: 0 auto 1.5rem;
max-width: 44rem;
font-size: var(--fandhe-font-font-size-md);
line-height: 1.7;
color: var(--fandhe-color-fg-muted);
text-align: left;
}

.docs-hero-install {
max-width: 28rem;
margin: 0 auto 1.5rem;
text-align: left;
}

.docs-hero .docs-code-block pre {
margin: 0;
/* 狭幅でコピーボタンの下へ潜らないよう折り返す（コピー内容は不変）。 */
white-space: pre-wrap;
overflow-wrap: anywhere;
}

.docs-hero-install code::before {
content: "$ ";
color: var(--fandhe-color-fg-muted);
user-select: none;
}

.docs-hero-actions,
.docs-cta-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: stretch;
}

.docs-hero-actions [data-scope="link"],
.docs-cta-actions [data-scope="link"] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.6rem 1.25rem;
border: 1px solid var(--fandhe-color-border);
border-radius: var(--fandhe-radius-sm);
font-weight: var(--fandhe-font-font-weight-semibold);
text-decoration: none;
color: var(--fandhe-color-fg);
background: var(--fandhe-color-bg);
}

.docs-hero-actions [data-scope="link"]:hover,
.docs-cta-actions [data-scope="link"]:hover {
border-color: var(--fandhe-color-accent);
}

.docs-hero-actions [data-scope="link"][data-docs-hero-cta="primary"],
.docs-cta-actions [data-scope="link"][data-docs-hero-cta="primary"] {
color: var(--fandhe-color-bg);
background: var(--fandhe-color-accent);
border-color: var(--fandhe-color-accent);
}

.docs-hero-actions [data-scope="link"]:focus-visible,
.docs-cta-actions [data-scope="link"]:focus-visible {
outline: 2px solid var(--fandhe-color-accent);
outline-offset: 2px;
}

@media (min-width: 640px) {
.docs-hero-actions,
.docs-cta-actions {
flex-direction: row;
justify-content: center;
}
}

@media (min-width: 1024px) {
.docs-landing .docs-hero-title {
font-size: var(--fandhe-font-font-size-3xl);
}
}

/*
* ---- 特徴グリッド（イシュー #3613） ----
*/

.docs-features {
max-width: 72rem;
margin: 0 auto;
padding: 2rem 0;
}

.docs-landing .docs-features-title {
margin: 0 0 1.5rem;
padding: 0;
border: 0;
text-align: center;
font-size: var(--fandhe-font-font-size-xl);
font-weight: var(--fandhe-font-font-weight-semibold);
color: var(--fandhe-color-fg);
}

.docs-landing .docs-features-grid {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
}

.docs-landing .docs-feature {
flex: 0 0 100%;
min-width: 0;
margin: 0;
}

@media (min-width: 768px) {
.docs-landing .docs-feature {
flex-basis: calc((100% - 1.5rem) / 2);
}
}

@media (min-width: 1024px) {
.docs-landing .docs-feature {
flex-basis: calc((100% - 3rem) / 3);
}
}

.docs-feature [data-scope="card"][data-part="root"] {
height: 100%;
}

.docs-feature [data-scope="card"] > div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}

.docs-feature [data-scope="heading"] {
margin: 0;
}

/* `.docs-content p`（typography_css）の段落サイズ・下余白に負けないよう 2 クラスで上書きする。 */
.docs-landing .docs-feature [data-scope="text"] {
margin: 0;
font-size: var(--fandhe-font-font-size-sm);
}

.docs-feature [data-scope="link"] {
text-decoration: none;
color: var(--fandhe-color-fg);
}

.docs-feature [data-scope="link"]::after {
content: "";
position: absolute;
inset: 0;
}

.docs-feature:hover [data-scope="card"][data-part="root"] {
border-color: var(--fandhe-color-accent);
}

/* 全面オーバーレイの ::after へフォーカスリングを当て、カード全体を囲む。 */
.docs-feature [data-scope="link"]:focus-visible {
outline: none;
}

.docs-feature [data-scope="link"]:focus-visible::after {
outline: 2px solid var(--fandhe-color-accent);
outline-offset: 2px;
border-radius: var(--fandhe-radius-sm);
}

/*
* ---- 入口カードと数値指標（イシュー #3614） ----
*/

.docs-landing .docs-landing-section,
.docs-landing .docs-landing-stats-section {
max-width: 64rem;
margin: 0 auto;
padding: 1.5rem 0;
}

.docs-landing .docs-landing-section-title {
margin: 0 0 0.5rem;
padding: 0;
border: 0;
font-size: var(--fandhe-font-font-size-xl);
font-weight: var(--fandhe-font-font-weight-semibold);
color: var(--fandhe-color-fg);
}

.docs-landing .docs-landing-section-lead {
margin: 0 0 1rem;
color: var(--fandhe-color-fg-muted);
}

.docs-landing ul.docs-landing-cards,
.docs-landing ul.docs-landing-stats {
display: grid;
gap: 1rem;
margin: 0;
padding: 0;
list-style: none;
}

.docs-landing ul.docs-landing-cards {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.docs-landing ul.docs-landing-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.docs-landing .docs-landing-card,
.docs-landing .docs-landing-stat {
position: relative;
min-width: 0;
margin: 0;
overflow-wrap: anywhere;
}

.docs-landing .docs-landing-card > [data-scope="card"],
.docs-landing .docs-landing-stat > dl {
height: 100%;
border: 1px solid var(--fandhe-color-border);
border-radius: var(--fandhe-radius-sm);
background: var(--fandhe-color-bg);
transition: border-color 0.15s ease;
}

.docs-landing .docs-landing-stat > dl {
padding: 1rem;
}

.docs-landing .docs-landing-card:hover > [data-scope="card"] {
border-color: var(--fandhe-color-accent);
}

.docs-landing .docs-landing-card-link {
color: inherit;
text-decoration: none;
}

.docs-landing .docs-landing-card-link::after {
content: "";
position: absolute;
inset: 0;
}

.docs-landing .docs-landing-card-link:focus-visible {
outline: none;
}

.docs-landing .docs-landing-card-link:focus-visible::after {
outline: 2px solid var(--fandhe-color-accent);
outline-offset: 2px;
border-radius: var(--fandhe-radius-sm);
}

@media (min-width: 640px) {
.docs-landing ul.docs-landing-stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

@media (min-width: 1024px) {
.docs-landing ul.docs-landing-stats {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}

/* 補足文は数値・単位の横ではなく次の行へ回す（3・6 列の狭い列で途中折り返しさせない）。 */
.docs-landing .docs-landing-stat [data-part="value-text"] {
flex-wrap: wrap;
}

.docs-landing .docs-landing-stat [data-part="help-text"] {
flex: 0 0 100%;
}

/* `.docs-content h3` / `p` の装飾・段落間隔がカードへ漏れないよう 2 クラスで隔離する。 */
.docs-landing .docs-landing-card [data-scope="heading"] {
margin: 0 0 var(--fandhe-space-1, 0.25rem);
padding: 0;
border: 0;
font-size: var(--fandhe-font-font-size-md);
letter-spacing: normal;
}

.docs-landing .docs-landing-card [data-scope="text"] {
margin: 0;
padding: 0;
border: 0;
}

@media (prefers-reduced-motion: reduce) {
.docs-landing .docs-landing-card > [data-scope="card"] {
transition: none;
}
}

/*
* ---- コード例と締めの CTA（イシュー #3615） ----
*/

.docs-landing .docs-code-example,
.docs-landing .docs-cta {
max-width: 52rem;
margin: 0 auto;
padding: 2rem 0;
}

.docs-landing .docs-code-example-title,
.docs-landing .docs-cta-title {
margin: 0 0 0.75rem;
padding: 0;
border: 0;
text-align: center;
font-size: var(--fandhe-font-font-size-xl);
font-weight: var(--fandhe-font-font-weight-semibold);
color: var(--fandhe-color-fg);
}

.docs-landing .docs-code-example-lead,
.docs-landing .docs-cta-lead {
margin: 0 0 1.25rem;
text-align: center;
color: var(--fandhe-color-fg-muted);
}

.docs-code-example-body {
min-width: 0;
text-align: left;
}

.docs-landing .docs-code-example-source {
margin: 0.75rem 0 0;
text-align: right;
}

.docs-landing .docs-cta {
margin-bottom: 2rem;
padding: 2rem 1rem;
text-align: center;
background: var(--fandhe-color-bg-muted);
border: 1px solid var(--fandhe-color-border);
border-radius: var(--fandhe-radius-sm);
}
.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: var(--fandhe-space-6);
}
.docs-content li {
  margin-block: var(--fandhe-space-1);
  line-height: 1.5;
}
.docs-content li::marker {
  color: var(--fandhe-color-fg-muted);
}
.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 {
  color: var(--fandhe-color-accent-emphasized, var(--fandhe-color-fg));
  text-decoration: underline;
}
.docs-content blockquote {
  margin: 0 0 1.05rem;
  padding-inline-start: 1rem;
  padding-block: 0.5rem;
  border-inline-start: 4px solid var(--fandhe-color-accent-muted);
  color: var(--fandhe-color-fg-muted);
}
.docs-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  border-radius: var(--fandhe-radius-sm);
  padding: 0.125rem 0.5rem;
  font-size: var(--fandhe-font-font-size-sm);
  background: var(--fandhe-color-neutral-subtle);
  color: var(--fandhe-color-neutral-fg-subtle);
}
.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;
  color: var(--fandhe-color-fg);
}
.docs-content em {
  font-style: italic;
}
.docs-content table {
  display: block;
  overflow-x: auto;
  position: relative;
  margin: 0 0 1.05rem;
  max-width: 100%;
  border: 1px solid var(--fandhe-color-border);
  border-radius: var(--fandhe-radius-lg);
  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-bottom: 1px solid var(--fandhe-color-border-muted);
  padding: var(--fandhe-space-2) var(--fandhe-space-3);
  font-size: var(--fandhe-font-font-size-sm);
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.docs-content tbody tr:last-child > * {
  border-bottom: 0;
}
.docs-content th {
  background: var(--fandhe-color-bg-subtle);
  font-weight: var(--fandhe-font-font-weight-medium);
  color: var(--fandhe-color-fg);
  border-bottom: 1px solid var(--fandhe-color-border);
}
.docs-content blockquote > :last-child {
  margin-bottom: 0;
}
.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);
}
.docs-content table[data-docs-api-table] td,
.docs-content table[data-docs-api-table] tbody th {
vertical-align: top;
}
.docs-content table[data-docs-api-table] tbody th {
background: transparent;
}
.docs-content table[data-docs-api-table] [data-docs-api-placeholder] {
color: var(--fandhe-color-fg-muted);
}
@media (max-width: 767.98px) {
.docs-content table[data-docs-api-table] {
background-image: none;
}
.docs-content table[data-docs-api-table] thead {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.docs-content table[data-docs-api-table] tbody,
.docs-content table[data-docs-api-table] tbody tr,
.docs-content table[data-docs-api-table] tbody th,
.docs-content table[data-docs-api-table] tbody td {
display: block;
}
.docs-content table[data-docs-api-table] tbody tr {
padding: 0.6rem 0.75rem;
border-bottom: 1px solid var(--fandhe-color-border);
}
.docs-content table[data-docs-api-table] tbody tr:last-child {
border-bottom: 0;
}
.docs-content table[data-docs-api-table] tbody tr > th,
.docs-content table[data-docs-api-table] tbody tr > td {
border: 0;
padding: 0.15rem 0;
}
.docs-content table[data-docs-api-table] tbody tr > td::before {
content: attr(data-label);
display: block;
font-size: 0.8em;
color: var(--fandhe-color-fg-muted);
}
.docs-content table[data-docs-api-table] code {
overflow-wrap: anywhere;
word-break: break-word;
}
}
@view-transition { navigation: auto; }