/*! md-book 0.4.1 | MIT */
@layer md-book.tokens, md-book.base, md-book.layout, md-book.content, md-book.components;

/* --- tokens.css --- */
/*
 * md-book design tokens — the public theming API.
 *
 * A theme is a stylesheet that redefines these `--md-book-*` custom properties.
 * Everything the runtime renders is styled through them, so overriding a token
 * restyles the whole site. Renaming a token is a breaking change.
 *
 * Layers: primitives (raw palette) -> semantic tokens. Override either level.
 * Dark mode is applied when the OS prefers dark AND the user has not forced
 * light, or when `data-theme="dark"` is set on <html>.
 */

@layer md-book.tokens {
  :root {
    /* --- primitives: raw palette ------------------------------------- */
    --md-book-gray-0: #ffffff;
    --md-book-gray-50: #fafafa;
    --md-book-gray-100: #f4f4f5;
    --md-book-gray-200: #e7e7ea;
    --md-book-gray-300: #d1d1d6;
    --md-book-gray-400: #a0a0ab;
    --md-book-gray-500: #6f6f7b;
    --md-book-gray-600: #52525e;
    --md-book-gray-700: #3a3a44;
    --md-book-gray-800: #26262d;
    --md-book-gray-900: #18181c;
    --md-book-gray-950: #0a0a0d;

    --md-book-brand-400: #818cf8;
    --md-book-brand-500: #6366f1;
    --md-book-brand-600: #4f46e5;
    --md-book-brand-700: #4338ca;

    --md-book-blue-500: #3b82f6;
    --md-book-green-500: #16a34a;
    --md-book-amber-500: #d97706;
    --md-book-red-500: #dc2626;

    /* --- semantic tokens ------------------------------------------------ */
    --md-book-color-bg: var(--md-book-gray-0);
    --md-book-color-fg: var(--md-book-gray-900);
    --md-book-color-fg-muted: var(--md-book-gray-500);
    --md-book-color-surface: var(--md-book-gray-50);
    --md-book-color-surface-hover: var(--md-book-gray-100);
    --md-book-color-border: var(--md-book-gray-200);
    --md-book-color-accent: var(--md-book-brand-600);
    --md-book-color-accent-hover: var(--md-book-brand-700);
    --md-book-color-accent-fg: var(--md-book-gray-0);
    --md-book-color-accent-muted: color-mix(in srgb, var(--md-book-brand-600) 12%, transparent);
    --md-book-color-code-bg: var(--md-book-gray-50);
    --md-book-color-code-fg: var(--md-book-gray-800);
    --md-book-color-inline-code-bg: color-mix(in srgb, var(--md-book-gray-500) 13%, transparent);
    --md-book-color-selection: color-mix(in srgb, var(--md-book-brand-500) 28%, transparent);

    /* Syntax highlighting (built-in highlighter; a custom one can reuse these). */
    --md-book-color-tok-comment: var(--md-book-gray-500);
    --md-book-color-tok-keyword: #7c3aed;
    --md-book-color-tok-string: #047857;
    --md-book-color-tok-number: #b45309;
    --md-book-color-tok-function: #2563eb;
    --md-book-color-tok-type: #be185d;
    --md-book-color-tok-attr: #0e7490;

    --md-book-color-note: var(--md-book-blue-500);
    --md-book-color-tip: var(--md-book-green-500);
    --md-book-color-warning: var(--md-book-amber-500);
    --md-book-color-danger: var(--md-book-red-500);
    --md-book-admonition-bg-mix: 8%;

    /* --- typography --------------------------------------------------- */
    /* Inter / JetBrains Mono win when the page loads or has them installed;
       otherwise the platform UI font is used. */
    --md-book-font-body:
      "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable",
      "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
      "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
    --md-book-font-heading: var(--md-book-font-body);
    /* Vertical writing (writing: vertical) and tanka read best in a mincho face. */
    --md-book-font-serif: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", YuMincho,
      "Noto Serif JP", "Source Han Serif JP", "BIZ UDMincho", "MS PMincho", ui-serif, serif;
    --md-book-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "SFMono-Regular", "Menlo",
      "Consolas", "Liberation Mono", monospace;
    --md-book-text-base: 1rem;
    --md-book-text-scale: 1.2;
    --md-book-leading: 1.7;
    --md-book-leading-heading: 1.2;

    /* --- layout & shape -------------------------------------------------- */
    --md-book-measure: 46rem;
    --md-book-vertical-height: clamp(22rem, 72vh, 42rem);
    --md-book-content-max: 90rem;
    --md-book-sidebar-width: 16rem;
    --md-book-toc-width: 14rem;
    --md-book-header-height: 3.5rem;
    --md-book-gutter: 2rem;
    --md-book-radius: 0.75rem;
    --md-book-radius-sm: 0.375rem;
    --md-book-border-width: 1px;
    --md-book-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 16px rgb(0 0 0 / 0.05);
    --md-book-transition: 150ms ease;
    --md-book-focus-ring: 2px solid var(--md-book-color-accent);
  }

  /* Dark palette: OS-preferred and not force-light. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --md-book-color-bg: var(--md-book-gray-950);
      --md-book-color-fg: var(--md-book-gray-100);
      --md-book-color-fg-muted: var(--md-book-gray-400);
      --md-book-color-surface: var(--md-book-gray-900);
      --md-book-color-surface-hover: var(--md-book-gray-800);
      --md-book-color-border: var(--md-book-gray-800);
      --md-book-color-accent: var(--md-book-brand-400);
      --md-book-color-accent-hover: #a5b4fc;
      --md-book-color-accent-fg: var(--md-book-gray-950);
      --md-book-color-code-bg: var(--md-book-gray-900);
      --md-book-color-code-fg: var(--md-book-gray-100);
      --md-book-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 18px rgb(0 0 0 / 0.45);
      --md-book-color-tok-comment: var(--md-book-gray-400);
      --md-book-color-tok-keyword: #a78bfa;
      --md-book-color-tok-string: #34d399;
      --md-book-color-tok-number: #fbbf24;
      --md-book-color-tok-function: #60a5fa;
      --md-book-color-tok-type: #f472b6;
      --md-book-color-tok-attr: #22d3ee;
      --md-book-admonition-bg-mix: 12%;
    }
  }

  /* Explicit override always wins, both directions. */
  :root[data-theme="dark"] {
    --md-book-color-bg: var(--md-book-gray-950);
    --md-book-color-fg: var(--md-book-gray-100);
    --md-book-color-fg-muted: var(--md-book-gray-400);
    --md-book-color-surface: var(--md-book-gray-900);
    --md-book-color-surface-hover: var(--md-book-gray-800);
    --md-book-color-border: var(--md-book-gray-800);
    --md-book-color-accent: var(--md-book-brand-400);
    --md-book-color-accent-hover: #a5b4fc;
    --md-book-color-accent-fg: var(--md-book-gray-950);
    --md-book-color-code-bg: var(--md-book-gray-900);
    --md-book-color-code-fg: var(--md-book-gray-100);
    --md-book-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 18px rgb(0 0 0 / 0.45);
    --md-book-color-tok-comment: var(--md-book-gray-400);
    --md-book-color-tok-keyword: #a78bfa;
    --md-book-color-tok-string: #34d399;
    --md-book-color-tok-number: #fbbf24;
    --md-book-color-tok-function: #60a5fa;
    --md-book-color-tok-type: #f472b6;
    --md-book-color-tok-attr: #22d3ee;
    --md-book-admonition-bg-mix: 12%;
  }
}

/* --- base.css --- */
@layer md-book.base {
  .md-book,
  .md-book *,
  .md-book *::before,
  .md-book *::after {
    box-sizing: border-box;
  }

  .md-book {
    color: var(--md-book-color-fg);
    background: var(--md-book-color-bg);
    font-family: var(--md-book-font-body);
    font-size: var(--md-book-text-base);
    line-height: var(--md-book-leading);
    min-height: 100dvh;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }

  .md-book ::selection {
    background: var(--md-book-color-selection);
  }

  .md-book a {
    color: var(--md-book-color-accent);
    text-decoration: none;
  }

  .md-book a:hover {
    color: var(--md-book-color-accent-hover);
    text-decoration: underline;
  }

  .md-book :focus-visible {
    outline: var(--md-book-focus-ring);
    outline-offset: 2px;
    border-radius: var(--md-book-radius-sm);
  }

  .md-book img,
  .md-book video {
    max-width: 100%;
    height: auto;
  }

  .md-book-skip {
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--md-book-color-accent);
    color: var(--md-book-color-accent-fg);
    border-radius: var(--md-book-radius-sm);
    transform: translateY(-150%);
    transition: transform var(--md-book-transition);
    z-index: 20;
  }

  .md-book-skip:focus {
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .md-book *,
    .md-book *::before,
    .md-book *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
    }
  }
}

/* --- layout.css --- */
@layer md-book.layout {
  .md-book-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    height: var(--md-book-header-height);
    padding-inline: var(--md-book-gutter);
    background: color-mix(in srgb, var(--md-book-color-bg) 80%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: var(--md-book-border-width) solid var(--md-book-color-border);
  }

  .md-book-brand {
    flex: none;
    white-space: nowrap;
    font-weight: 650;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    color: var(--md-book-color-fg);
  }

  .md-book-brand:hover {
    color: var(--md-book-color-fg);
    text-decoration: none;
  }

  .md-book-nav {
    display: flex;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
  }

  .md-book-navbar-end {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .md-book-body {
    display: grid;
    grid-template-columns: var(--md-book-sidebar-width) minmax(0, 1fr) var(--md-book-toc-width);
    gap: calc(var(--md-book-gutter) * 1.5);
    max-width: var(--md-book-content-max);
    margin-inline: auto;
    padding: calc(var(--md-book-gutter) * 1.25) var(--md-book-gutter)
      calc(var(--md-book-gutter) * 3);
  }

  .md-book-sidebar,
  .md-book-toc {
    position: sticky;
    top: calc(var(--md-book-header-height) + var(--md-book-gutter));
    align-self: start;
    max-height: calc(100vh - var(--md-book-header-height) - var(--md-book-gutter) * 2);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--md-book-color-border) transparent;
  }

  .md-book-sidebar {
    font-size: 0.9rem;
  }

  .md-book-main {
    min-width: 0;
    max-width: var(--md-book-measure);
  }

  .md-book-main:focus {
    outline: none;
  }

  .md-book-toc {
    font-size: 0.85rem;
  }

  .md-book-toc[hidden] {
    display: none;
  }

  .md-book-backdrop {
    display: none;
  }

  /* Landing page (`layout: home`): no sidebar / TOC / pager, wider column. */
  .md-book--home .md-book-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .md-book--home .md-book-sidebar,
  .md-book--home .md-book-toc,
  .md-book--home .md-book-pager {
    display: none;
  }

  .md-book--home .md-book-main {
    max-width: 64rem;
    width: 100%;
    margin-inline: auto;
  }

  /* `sidebar: false`: the sidebar goes away, the article and TOC stay. */
  .md-book--no-sidebar .md-book-body {
    grid-template-columns: minmax(0, 1fr) var(--md-book-toc-width);
  }

  .md-book--no-sidebar .md-book-sidebar {
    display: none;
  }

  .md-book--no-sidebar .md-book-main {
    width: 100%;
    margin-inline: auto;
  }

  /* Prose below the hero keeps the normal reading measure. */
  .md-book--home .md-book-article > :not(.md-book-hero, .md-book-features) {
    max-width: var(--md-book-measure);
    margin-inline: auto;
  }

  /* Vertical writing: the article scrolls sideways, so let it use the full column. */
  .md-book--vertical .md-book-main {
    max-width: none;
  }

  /* Tablet: drop the TOC rail. */
  @media (max-width: 1100px) {
    .md-book-body {
      grid-template-columns: var(--md-book-sidebar-width) minmax(0, 1fr);
    }
    .md-book-toc {
      display: none;
    }
    .md-book--no-sidebar .md-book-body {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* Mobile: single column; the sidebar becomes an off-canvas drawer opened by
     the header's menu button (`.is-menu-open` on the root, see runtime/app.ts). */
  @media (max-width: 760px) {
    .md-book-header {
      gap: 0.5rem;
      padding-inline: 1rem;
    }

    /* Long nav lists scroll sideways instead of colliding with navbar-end. */
    .md-book-nav {
      overflow-x: auto;
      scrollbar-width: none;
    }

    .md-book-nav__link {
      flex: none;
    }

    .md-book-navbar-end {
      flex: none;
      gap: 0.5rem;
    }

    .md-book-body {
      grid-template-columns: minmax(0, 1fr);
      padding: 1.5rem 1rem 3rem;
    }

    .md-book-sidebar {
      position: fixed;
      top: var(--md-book-header-height);
      bottom: 0;
      left: 0;
      z-index: 15;
      align-self: stretch;
      width: min(20rem, 86vw);
      max-height: none;
      padding: 1.25rem 1rem 2rem;
      background: var(--md-book-color-bg);
      border-right: var(--md-book-border-width) solid var(--md-book-color-border);
      box-shadow: var(--md-book-shadow);
      overscroll-behavior: contain;
      transform: translateX(-100%);
      visibility: hidden;
      transition: transform 200ms ease, visibility 0s linear 200ms;
    }

    .is-menu-open .md-book-sidebar {
      transform: none;
      visibility: visible;
      transition: transform 200ms ease;
    }

    .md-book-backdrop {
      display: block;
      position: fixed;
      inset: var(--md-book-header-height) 0 0 0;
      z-index: 14;
      background: color-mix(in srgb, var(--md-book-color-fg) 35%, transparent);
      opacity: 0;
      pointer-events: none;
      transition: opacity 200ms ease;
    }

    .is-menu-open .md-book-backdrop {
      opacity: 1;
      pointer-events: auto;
    }
  }
}

/* --- content.css --- */
@layer md-book.content {
  .md-book-article {
    overflow-wrap: break-word;
  }

  .md-book-article > :first-child {
    margin-top: 0;
  }

  .md-book-article h1,
  .md-book-article h2,
  .md-book-article h3,
  .md-book-article h4 {
    font-family: var(--md-book-font-heading);
    line-height: var(--md-book-leading-heading);
    font-weight: 650;
    letter-spacing: -0.02em;
    text-wrap: balance;
    scroll-margin-top: calc(var(--md-book-header-height) + 1rem);
  }

  .md-book-article h1 {
    font-size: calc(
      var(--md-book-text-base) *
      var(--md-book-text-scale) *
      var(--md-book-text-scale) *
      1.55
    );
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 0 0 1.25rem;
  }

  .md-book-article h2 {
    font-size: calc(var(--md-book-text-base) * var(--md-book-text-scale) * 1.25);
    margin: 3rem 0 0.9rem;
  }

  .md-book-article h3 {
    font-size: calc(var(--md-book-text-base) * var(--md-book-text-scale));
    margin: 2.25rem 0 0.6rem;
  }

  .md-book-article h4 {
    font-size: var(--md-book-text-base);
    margin: 1.75rem 0 0.5rem;
  }

  .md-book-article p,
  .md-book-article ul,
  .md-book-article ol,
  .md-book-article blockquote {
    margin: 0 0 1.25rem;
  }

  .md-book-article ul,
  .md-book-article ol {
    padding-left: 1.5rem;
  }

  .md-book-article li + li {
    margin-top: 0.35rem;
  }

  .md-book-article li::marker {
    color: var(--md-book-color-fg-muted);
  }

  .md-book-article strong {
    font-weight: 650;
  }

  /* Prose links: quiet underline that firms up on hover. */
  .md-book-article p a,
  .md-book-article li a,
  .md-book-article td a,
  .md-book-article blockquote a {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--md-book-color-accent) 35%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: text-decoration-color var(--md-book-transition);
  }

  .md-book-article p a:hover,
  .md-book-article li a:hover,
  .md-book-article td a:hover,
  .md-book-article blockquote a:hover {
    text-decoration-color: currentColor;
  }

  .md-book-article blockquote {
    padding: 0.15rem 0 0.15rem 1.1rem;
    border-left: 2px solid var(--md-book-color-border);
    color: var(--md-book-color-fg-muted);
  }

  /* Ruby readings stay light and unspaced even inside tracked-out poems. */
  .md-book-article rt {
    font-weight: 400;
    letter-spacing: normal;
  }

  .md-book-article :not(pre) > code {
    font-family: var(--md-book-font-mono);
    font-size: 0.86em;
    background: var(--md-book-color-inline-code-bg);
    padding: 0.18em 0.42em;
    border-radius: var(--md-book-radius-sm);
  }

  .md-book-article pre {
    font-family: var(--md-book-font-mono);
    font-size: 0.85rem;
    line-height: 1.65;
    tab-size: 2;
    background: var(--md-book-color-code-bg);
    color: var(--md-book-color-code-fg);
    padding: 1.1rem 1.25rem;
    border: var(--md-book-border-width) solid var(--md-book-color-border);
    border-radius: var(--md-book-radius);
    overflow-x: auto;
    margin: 0 0 1.25rem;
  }

  .md-book-article pre code {
    background: none;
    padding: 0;
    font-size: inherit;
  }

  /* --- syntax highlighting (core/markdown/highlight.ts) ------------------ */
  .md-book-tok-comment {
    color: var(--md-book-color-tok-comment);
    font-style: italic;
  }
  .md-book-tok-keyword {
    color: var(--md-book-color-tok-keyword);
  }
  .md-book-tok-string {
    color: var(--md-book-color-tok-string);
  }
  .md-book-tok-number,
  .md-book-tok-literal {
    color: var(--md-book-color-tok-number);
  }
  .md-book-tok-function {
    color: var(--md-book-color-tok-function);
  }
  .md-book-tok-type {
    color: var(--md-book-color-tok-type);
  }
  .md-book-tok-attr {
    color: var(--md-book-color-tok-attr);
  }
  .md-book-tok-inserted {
    color: color-mix(in srgb, var(--md-book-color-tip) 70%, var(--md-book-color-fg));
    background: color-mix(in srgb, var(--md-book-color-tip) 12%, transparent);
  }
  .md-book-tok-deleted {
    color: color-mix(in srgb, var(--md-book-color-danger) 70%, var(--md-book-color-fg));
    background: color-mix(in srgb, var(--md-book-color-danger) 12%, transparent);
  }

  /* --- tables: a bordered card with hairline row dividers ---------------- */
  .md-book-article table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0 0 1.25rem;
    font-size: 0.925rem;
    border: var(--md-book-border-width) solid var(--md-book-color-border);
    border-radius: var(--md-book-radius);
  }

  /* Round the corner cells rather than clip: wide tables must stay visible. */
  .md-book-article thead tr:first-child th:first-child {
    border-top-left-radius: calc(var(--md-book-radius) - var(--md-book-border-width));
  }
  .md-book-article thead tr:first-child th:last-child {
    border-top-right-radius: calc(var(--md-book-radius) - var(--md-book-border-width));
  }
  .md-book-article tbody tr:last-child td:first-child {
    border-bottom-left-radius: calc(var(--md-book-radius) - var(--md-book-border-width));
  }
  .md-book-article tbody tr:last-child td:last-child {
    border-bottom-right-radius: calc(var(--md-book-radius) - var(--md-book-border-width));
  }

  .md-book-article th,
  .md-book-article td {
    border-bottom: var(--md-book-border-width) solid var(--md-book-color-border);
    padding: 0.6rem 0.9rem;
    text-align: left;
    vertical-align: top;
  }

  .md-book-article tbody tr:last-child td {
    border-bottom: none;
  }

  .md-book-article th {
    background: var(--md-book-color-surface);
    color: var(--md-book-color-fg-muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  .md-book-article tbody tr:hover td {
    background: var(--md-book-color-surface);
  }

  .md-book-article hr {
    border: none;
    border-top: var(--md-book-border-width) solid var(--md-book-color-border);
    margin: 2.5rem 0;
  }

  .md-book-heading {
    position: relative;
  }

  .md-book-anchor {
    margin-left: 0.4rem;
    color: var(--md-book-color-fg-muted);
    opacity: 0;
    text-decoration: none;
    transition: opacity var(--md-book-transition);
  }

  .md-book-heading:hover .md-book-anchor,
  .md-book-anchor:focus-visible {
    opacity: 1;
  }

  /* Footnotes */
  .md-book-article .footnotes {
    font-size: 0.9rem;
    color: var(--md-book-color-fg-muted);
    border-top: var(--md-book-border-width) solid var(--md-book-color-border);
    margin-top: 2.5rem;
  }
  /* --- vertical writing (`writing: vertical`, 縦書き) ------------------------
     The article becomes a fixed-height, sideways-scrolling column set: lines
     run top to bottom and stack right to left. Physical margins/paddings from
     the horizontal rules above are re-expressed for that flow. */
  .md-book-article--vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-combine-upright: digits 2;
    line-break: strict;
    /* Orthogonal flow: width is the block size, so pin it to the column or it
       grows with the content instead of scrolling. */
    width: 100%;
    height: var(--md-book-vertical-height);
    overflow-x: auto;
    overflow-y: hidden;
    padding-block: 0.25rem;
    font-family: var(--md-book-font-serif);
    line-height: 2;
    letter-spacing: 0.04em;
    scrollbar-width: thin;
    scrollbar-color: var(--md-book-color-border) transparent;
  }

  .md-book-article--vertical h1,
  .md-book-article--vertical h2,
  .md-book-article--vertical h3,
  .md-book-article--vertical h4 {
    font-family: var(--md-book-font-serif);
    letter-spacing: 0.1em;
    text-wrap: initial;
    margin: 0 0 0 1.25rem;
  }

  .md-book-article--vertical h2,
  .md-book-article--vertical h3,
  .md-book-article--vertical h4 {
    margin-inline: 0;
    margin-block: 2rem 0.75rem;
  }

  .md-book-article--vertical p,
  .md-book-article--vertical ul,
  .md-book-article--vertical ol,
  .md-book-article--vertical blockquote,
  .md-book-article--vertical hr {
    margin: 0;
    margin-block-end: 1.25rem;
  }

  .md-book-article--vertical > :first-child {
    margin-block-start: 0;
  }

  .md-book-article--vertical ul,
  .md-book-article--vertical ol {
    padding: 0;
    padding-inline-start: 1.5rem;
  }

  .md-book-article--vertical blockquote {
    padding: 0;
    padding-inline: 0;
    padding-block-start: 1.1rem;
    border-left: none;
    border-block-start: 2px solid var(--md-book-color-border);
  }

  .md-book-article--vertical hr {
    border-top: none;
    border-block-start: var(--md-book-border-width) solid var(--md-book-color-border);
    margin-block: 2.5rem;
  }

  .md-book-article--vertical .md-book-anchor {
    display: none;
  }

  /* Code and tables stay horizontal; they are wide and scroll on their own. */
  .md-book-article--vertical pre,
  .md-book-article--vertical table,
  .md-book-article--vertical .md-book-code {
    writing-mode: horizontal-tb;
    inline-size: min(34rem, 80vw);
    max-block-size: 100%;
    overflow: auto;
    letter-spacing: normal;
  }

  .md-book-article--vertical .md-book-code pre {
    inline-size: auto;
  }
}

/* --- components.css --- */
@layer md-book.components {
  /* --- nav ---------------------------------------------------------- */
  .md-book-nav__link {
    padding: 0.3rem 0.7rem;
    border-radius: var(--md-book-radius-sm);
    color: var(--md-book-color-fg-muted);
    font-size: 0.9rem;
    font-weight: 500;
    transition: color var(--md-book-transition), background-color var(--md-book-transition);
  }

  .md-book-nav__link:hover {
    color: var(--md-book-color-fg);
    background: var(--md-book-color-surface-hover);
    text-decoration: none;
  }

  .md-book-nav__link.is-active {
    color: var(--md-book-color-accent);
    background: var(--md-book-color-accent-muted);
    text-decoration: none;
  }

  /* --- menu toggle (mobile drawer) ------------------------------------ */
  .md-book-menu-toggle {
    display: none;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    color: var(--md-book-color-fg-muted);
    background: transparent;
    border: var(--md-book-border-width) solid var(--md-book-color-border);
    border-radius: var(--md-book-radius-sm);
    cursor: pointer;
  }

  /* Hamburger drawn from three currentColor bars. */
  .md-book-menu-toggle::before {
    content: "";
    width: 1rem;
    height: 0.75rem;
    background:
      linear-gradient(currentColor 0 0) top / 100% 1.5px no-repeat,
      linear-gradient(currentColor 0 0) center / 100% 1.5px no-repeat,
      linear-gradient(currentColor 0 0) bottom / 100% 1.5px no-repeat;
  }

  .md-book-menu-toggle:hover,
  .md-book-menu-toggle[aria-expanded="true"] {
    color: var(--md-book-color-fg);
    background: var(--md-book-color-surface-hover);
  }

  @media (max-width: 760px) {
    .md-book-menu-toggle:not([hidden]) {
      display: inline-flex;
    }
  }

  /* --- sidebar ---------------------------------------------------------- */
  .md-book-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .md-book-sidebar__list .md-book-sidebar__list {
    margin-left: 0.7rem;
    border-left: var(--md-book-border-width) solid var(--md-book-color-border);
    padding-left: 0.4rem;
  }

  .md-book-sidebar__link,
  .md-book-sidebar__group {
    display: block;
    padding: 0.32rem 0.7rem;
    border-radius: var(--md-book-radius-sm);
    color: var(--md-book-color-fg-muted);
  }

  .md-book-sidebar__link {
    transition: color var(--md-book-transition), background-color var(--md-book-transition);
  }

  .md-book-sidebar__group {
    margin-top: 1.25rem;
    color: var(--md-book-color-fg);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .md-book-sidebar__item:first-child > .md-book-sidebar__group {
    margin-top: 0;
  }

  .md-book-sidebar__link:hover {
    background: var(--md-book-color-surface-hover);
    color: var(--md-book-color-fg);
    text-decoration: none;
  }

  .md-book-sidebar__link[aria-current="page"] {
    background: var(--md-book-color-accent-muted);
    color: var(--md-book-color-accent);
    font-weight: 600;
  }

  /* --- toc ---------------------------------------------------------- */
  .md-book-toc__title {
    margin: 0 0 0.6rem;
    padding-left: 0.85rem;
    color: var(--md-book-color-fg);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .md-book-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Every link carries its own rail segment, so nested levels stay aligned
     (indent via padding, not list margin) and the active mark sits on the rail. */
  .md-book-toc__link {
    display: block;
    padding: 0.22rem 0.85rem;
    border-left: 2px solid var(--md-book-color-border);
    color: var(--md-book-color-fg-muted);
    transition: color var(--md-book-transition), border-color var(--md-book-transition);
  }

  .md-book-toc__list .md-book-toc__list .md-book-toc__link {
    padding-left: 1.7rem;
  }

  .md-book-toc__link:hover {
    color: var(--md-book-color-fg);
    text-decoration: none;
  }

  .md-book-toc__link.is-active {
    color: var(--md-book-color-accent);
    border-left-color: var(--md-book-color-accent);
    font-weight: 600;
  }

  /* --- pager ---------------------------------------------------------- */
  .md-book-pager {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 3.5rem;
  }

  .md-book-pager:empty {
    display: none;
  }

  .md-book-pager__link {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.25rem;
    border: var(--md-book-border-width) solid var(--md-book-color-border);
    border-radius: var(--md-book-radius);
    color: var(--md-book-color-fg);
    min-width: 0;
    transition: border-color var(--md-book-transition), box-shadow var(--md-book-transition),
      transform var(--md-book-transition);
  }

  .md-book-pager__link:hover {
    border-color: var(--md-book-color-accent);
    box-shadow: var(--md-book-shadow);
    text-decoration: none;
    transform: translateY(-1px);
  }

  .md-book-pager__link--prev {
    grid-column: 1;
  }

  .md-book-pager__link--next {
    grid-column: 2;
    text-align: right;
  }

  .md-book-pager__dir {
    font-size: 0.78rem;
    color: var(--md-book-color-fg-muted);
  }

  .md-book-pager__link--prev .md-book-pager__dir::before {
    content: "\2190 ";
    content: "\2190 " / "";
  }

  .md-book-pager__link--next .md-book-pager__dir::after {
    content: " \2192";
    content: " \2192" / "";
  }

  .md-book-pager__title {
    font-weight: 600;
    color: var(--md-book-color-fg);
    transition: color var(--md-book-transition);
  }

  .md-book-pager__link:hover .md-book-pager__title {
    color: var(--md-book-color-accent);
  }

  /* --- code block wrapper -------------------------------------------- */
  .md-book-code {
    position: relative;
  }

  /* Language label, top-right; swaps for the copy button on hover/focus. */
  .md-book-code[data-lang]::before {
    content: attr(data-lang);
    position: absolute;
    top: 0.6rem;
    right: 0.9rem;
    font-family: var(--md-book-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--md-book-color-fg-muted);
    pointer-events: none;
    transition: opacity var(--md-book-transition);
  }

  .md-book-code[data-lang]:hover::before,
  .md-book-code[data-lang]:focus-within::before {
    opacity: 0;
  }

  .md-book-code__copy {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem 0.65rem;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--md-book-color-fg-muted);
    background: var(--md-book-color-bg);
    border: var(--md-book-border-width) solid var(--md-book-color-border);
    border-radius: var(--md-book-radius-sm);
    opacity: 0;
    cursor: pointer;
    transition: opacity var(--md-book-transition), color var(--md-book-transition), border-color
      var(--md-book-transition);
  }

  .md-book-code:hover .md-book-code__copy,
  .md-book-code__copy:focus-visible {
    opacity: 1;
  }

  .md-book-code__copy:hover {
    color: var(--md-book-color-fg);
    border-color: var(--md-book-color-fg-muted);
  }

  /* No hover on touch screens: keep the button reachable. */
  @media (hover: none) {
    .md-book-code__copy {
      opacity: 1;
    }
    .md-book-code[data-lang]::before {
      display: none;
    }
  }

  .md-book-code__copy.is-copied {
    color: var(--md-book-color-tip);
    border-color: var(--md-book-color-tip);
  }

  /* --- admonitions / containers ------------------------------------ */
  .md-book-container {
    --_c: var(--md-book-color-note);
    position: relative;
    margin: 0 0 1.25rem;
    padding: 0.9rem 1.1rem 0.9rem 3rem;
    border: var(--md-book-border-width) solid color-mix(in srgb, var(--_c) 28%, transparent);
    border-radius: var(--md-book-radius);
    background: color-mix(in srgb, var(--_c) var(--md-book-admonition-bg-mix), transparent);
  }

  /* Round glyph badge; the glyph is per type below. */
  .md-book-container::before {
    content: "i";
    position: absolute;
    left: 1rem;
    top: 1.15rem;
    display: grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--_c);
    color: var(--md-book-color-bg);
    font-size: 0.7rem;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
  }

  .md-book-container--tip {
    --_c: var(--md-book-color-tip);
  }
  .md-book-container--tip::before {
    content: "\2713";
  }
  .md-book-container--warning {
    --_c: var(--md-book-color-warning);
  }
  .md-book-container--warning::before {
    content: "!";
  }
  .md-book-container--danger {
    --_c: var(--md-book-color-danger);
  }
  .md-book-container--danger::before {
    content: "\00d7";
    font-size: 0.9rem;
  }

  .md-book-container > :last-child {
    margin-bottom: 0;
  }

  .md-book-container__title {
    font-weight: 650;
    margin: 0 0 0.3rem;
    color: var(--_c);
  }

  .md-book-container--details {
    padding-left: 1.1rem;
  }

  .md-book-container--details::before {
    display: none;
  }

  .md-book-container--details > summary {
    font-weight: 600;
    cursor: pointer;
  }

  /* --- tanka: a poem block; no card chrome, lines kept as written ------- */
  .md-book-container--tanka,
  .md-book-container--bare {
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
  }

  .md-book-container--bare::before {
    display: none;
  }

  .md-book-container--tanka {
    margin: 0 0 1.5rem;
    font-family: var(--md-book-font-serif);
    font-size: 1.2em;
    line-height: 2.1;
    letter-spacing: 0.1em;
  }

  .md-book-container--tanka::before {
    display: none;
  }

  .md-book-container--tanka > .md-book-container__title {
    color: var(--md-book-color-fg-muted);
    font-size: 0.7em;
    font-weight: 500;
  }

  /* `:::vertical` / `:::x.vertical`: a vertical (縦書き) block inside a horizontal
     page — a fixed-height, right-to-left column set that scrolls sideways when
     it outgrows the column. */
  .md-book-container--vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-combine-upright: digits 2;
    line-break: strict;
    width: fit-content;
    max-width: 100%;
    max-height: var(--md-book-vertical-height);
    margin-inline: auto;
    overflow-x: auto;
    overflow-y: hidden;
    font-family: var(--md-book-font-serif);
    line-height: 2;
    scrollbar-width: thin;
  }

  /* Containers inside a vertical article: badge moves to the top-right corner
     (the start of a column) and spacing follows the right-to-left flow. */
  .md-book-article--vertical .md-book-container,
  .md-book-container--vertical {
    margin: 0 0 0 1.25rem;
    padding: 2.7rem 1.1rem 0.9rem 0.9rem;
  }

  .md-book-container--vertical {
    margin: 0 auto 1.25rem;
  }

  .md-book-article--vertical .md-book-container::before,
  .md-book-container--vertical::before {
    left: auto;
    right: 1rem;
    top: 0.9rem;
  }

  .md-book-article--vertical .md-book-container__title,
  .md-book-container--vertical > .md-book-container__title {
    margin: 0 0 0 0.3rem;
  }

  .md-book-article--vertical .md-book-container--details,
  .md-book-container--vertical.md-book-container--details {
    padding: 0.9rem 1.1rem;
  }

  .md-book-container--vertical.md-book-container--tanka,
  .md-book-container--vertical.md-book-container--bare {
    padding: 0;
  }

  .md-book-article--vertical .md-book-container--tanka {
    margin: 0 0 0 1.75rem;
    padding: 0;
  }

  .md-book-article--vertical .md-book-container--bare {
    padding: 0;
  }

  /* Already vertical: a nested vertical block just flows with the article. */
  .md-book-article--vertical .md-book-container--vertical {
    width: auto;
    max-height: none;
    overflow: visible;
  }

  /* --- theme toggle ----------------------------------------------------- */
  .md-book-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    font: inherit;
    font-size: 1.05rem;
    color: var(--md-book-color-fg-muted);
    background: transparent;
    border: var(--md-book-border-width) solid var(--md-book-color-border);
    border-radius: var(--md-book-radius-sm);
    cursor: pointer;
    transition: color var(--md-book-transition), background-color var(--md-book-transition);
  }

  .md-book-theme-toggle:hover {
    color: var(--md-book-color-fg);
    background: var(--md-book-color-surface-hover);
  }

  /* --- home: hero + feature cards (`layout: home`) ------------------- */
  .md-book-hero {
    position: relative;
    isolation: isolate;
    padding: 4.5rem 0 3.5rem;
    text-align: center;
  }

  /* Soft accent glow behind the headline. */
  .md-book-hero::before {
    content: "";
    position: absolute;
    inset: -5rem -2rem auto;
    height: 26rem;
    z-index: -1;
    background: radial-gradient(
      ellipse 50% 100% at 50% 0%,
      color-mix(in srgb, var(--md-book-color-accent) 16%, transparent),
      transparent
    );
    pointer-events: none;
  }

  .md-book-article .md-book-hero__name {
    display: inline-block;
    margin: 0 0 1rem;
    padding: 0.25rem 0.85rem;
    color: var(--md-book-color-accent);
    background: var(--md-book-color-accent-muted);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .md-book-hero__text {
    max-width: 18em;
    margin: 0 auto 1.25rem;
    font-size: clamp(2.1rem, 5.5vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.1;
    text-wrap: balance;
    background: linear-gradient(
      135deg,
      var(--md-book-color-fg) 30%,
      color-mix(in srgb, var(--md-book-color-accent) 70%, var(--md-book-color-fg))
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .md-book-hero__tagline {
    max-width: 38rem;
    margin: 0 auto;
    color: var(--md-book-color-fg-muted);
    font-size: 1.15rem;
    line-height: 1.6;
    text-wrap: balance;
  }

  .md-book-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
  }

  .md-book-hero__action {
    display: inline-flex;
    align-items: center;
    padding: 0.65rem 1.4rem;
    border: var(--md-book-border-width) solid transparent;
    border-radius: 999px;
    font-weight: 600;
    transition: background-color var(--md-book-transition), border-color var(--md-book-transition),
      transform var(--md-book-transition);
  }

  .md-book-hero__action:hover {
    text-decoration: none;
    transform: translateY(-1px);
  }

  .md-book-hero__action--brand {
    background: var(--md-book-color-accent);
    color: var(--md-book-color-accent-fg);
  }

  .md-book-hero__action--brand:hover {
    background: var(--md-book-color-accent-hover);
    color: var(--md-book-color-accent-fg);
  }

  .md-book-hero__action--alt {
    border-color: var(--md-book-color-border);
    color: var(--md-book-color-fg);
  }

  .md-book-hero__action--alt:hover {
    border-color: var(--md-book-color-fg-muted);
    background: var(--md-book-color-surface-hover);
    color: var(--md-book-color-fg);
  }

  .md-book-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin: 0 0 3.5rem;
  }

  .md-book-feature {
    display: block;
    padding: 1.4rem;
    background: var(--md-book-color-surface);
    border: var(--md-book-border-width) solid var(--md-book-color-border);
    border-radius: var(--md-book-radius);
    color: var(--md-book-color-fg);
    transition: border-color var(--md-book-transition), box-shadow var(--md-book-transition),
      transform var(--md-book-transition);
  }

  a.md-book-feature:hover {
    border-color: var(--md-book-color-accent);
    box-shadow: var(--md-book-shadow);
    color: var(--md-book-color-fg);
    text-decoration: none;
    transform: translateY(-2px);
  }

  .md-book-feature__icon {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: 0.9rem;
    background: var(--md-book-color-accent-muted);
    border-radius: var(--md-book-radius-sm);
    color: var(--md-book-color-accent);
    font-size: 1.2rem;
    line-height: 1;
  }

  .md-book-article .md-book-feature__title {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -0.01em;
  }

  .md-book-feature__details {
    margin: 0;
    color: var(--md-book-color-fg-muted);
    font-size: 0.92rem;
    line-height: 1.6;
  }

  /* --- blog list / taxonomy --------------------------------------------- */
  .md-book-blog {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .md-book-blog__lead,
  .md-book-blog__empty {
    color: var(--md-book-color-fg-muted);
  }

  .md-book-post {
    padding: 1.25rem 1.5rem;
    border: var(--md-book-border-width) solid var(--md-book-color-border);
    border-radius: var(--md-book-radius);
    transition: border-color var(--md-book-transition), box-shadow var(--md-book-transition);
  }

  .md-book-post:hover {
    border-color: color-mix(in srgb, var(--md-book-color-accent) 45%, var(--md-book-color-border));
    box-shadow: var(--md-book-shadow);
  }

  .md-book-post__title {
    font-size: calc(var(--md-book-text-base) * var(--md-book-text-scale));
    margin: 0 0 0.3rem;
  }

  .md-book-post__title a {
    color: var(--md-book-color-fg);
  }

  .md-book-post__title a:hover {
    color: var(--md-book-color-accent);
    text-decoration: none;
  }

  .md-book-post__meta {
    color: var(--md-book-color-fg-muted);
    font-size: 0.85rem;
    margin: 0 0 0.6rem;
  }

  .md-book-post__summary {
    margin: 0 0 0.75rem;
  }

  .md-book-post__tags {
    margin: 0;
  }

  .md-book-post__tag {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.1rem 0.6rem;
    margin-right: 0.35rem;
    border-radius: 999px;
    background: var(--md-book-color-accent-muted);
    color: var(--md-book-color-accent);
    text-decoration: none;
  }

  .md-book-post__tag:hover {
    color: var(--md-book-color-accent-hover);
    text-decoration: none;
  }

  .md-book-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.5rem;
    font-size: 0.9rem;
  }

  .md-book-pagination__link {
    padding: 0.4rem 0.9rem;
    border: var(--md-book-border-width) solid var(--md-book-color-border);
    border-radius: var(--md-book-radius-sm);
    color: var(--md-book-color-fg);
    font-weight: 500;
    transition: border-color var(--md-book-transition);
  }

  .md-book-pagination__link:hover {
    border-color: var(--md-book-color-accent);
    color: var(--md-book-color-accent);
    text-decoration: none;
  }

  .md-book-pagination__status {
    color: var(--md-book-color-fg-muted);
  }

  .md-book-taxonomy {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .md-book-taxonomy li {
    margin: 0;
    padding: 0.3rem 0.8rem;
    border: var(--md-book-border-width) solid var(--md-book-color-border);
    border-radius: 999px;
    transition: border-color var(--md-book-transition);
  }

  .md-book-taxonomy li:hover {
    border-color: var(--md-book-color-accent);
  }

  .md-book-taxonomy a {
    text-decoration: none;
  }

  .md-book-taxonomy__count {
    color: var(--md-book-color-fg-muted);
    font-size: 0.85em;
  }

  /* --- search box (header) --------------------------------------------- */
  .md-book-navbar-search[hidden] {
    display: none;
  }

  .md-book-search {
    position: relative;
  }

  .md-book-search__input {
    width: 13rem;
    height: 2.25rem;
    padding: 0 2.25rem 0 0.75rem;
    font: inherit;
    font-size: 0.875rem;
    color: var(--md-book-color-fg);
    background: var(--md-book-color-surface);
    border: var(--md-book-border-width) solid var(--md-book-color-border);
    border-radius: var(--md-book-radius-sm);
    transition: border-color var(--md-book-transition), width var(--md-book-transition);
    appearance: none;
  }

  .md-book-search__input::placeholder {
    color: var(--md-book-color-fg-muted);
  }

  .md-book-search__input:focus {
    width: 17rem;
    border-color: var(--md-book-color-accent);
    outline: none;
  }

  .md-book-search__input:focus-visible {
    outline: var(--md-book-focus-ring);
    outline-offset: 1px;
  }

  .md-book-search__input::-webkit-search-cancel-button {
    display: none;
  }

  /* The "/" shortcut hint sits inside the field and yields while typing. */
  .md-book-search__hint {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    translate: 0 -50%;
    padding: 0 0.35rem;
    font: inherit;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--md-book-color-fg-muted);
    border: var(--md-book-border-width) solid var(--md-book-color-border);
    border-radius: var(--md-book-radius-sm);
    pointer-events: none;
  }

  .md-book-search__input:focus ~ .md-book-search__hint,
  .md-book-search__input:not(:placeholder-shown) ~ .md-book-search__hint {
    display: none;
  }

  .md-book-search__panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 20;
    width: min(30rem, calc(100vw - 2rem));
    max-height: min(28rem, calc(100vh - var(--md-book-header-height) - 2rem));
    overflow-y: auto;
    padding: 0.35rem;
    background: var(--md-book-color-bg);
    border: var(--md-book-border-width) solid var(--md-book-color-border);
    border-radius: var(--md-book-radius);
    box-shadow: var(--md-book-shadow);
    overscroll-behavior: contain;
  }

  .md-book-search__panel[hidden] {
    display: none;
  }

  .md-book-search__status {
    margin: 0;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    color: var(--md-book-color-fg-muted);
  }

  .md-book-search__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .md-book-search__link {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.6rem;
    color: var(--md-book-color-fg);
    border-radius: var(--md-book-radius-sm);
  }

  .md-book-search__link:hover,
  .md-book-search__item.is-active .md-book-search__link {
    color: var(--md-book-color-fg);
    background: var(--md-book-color-accent-muted);
    text-decoration: none;
  }

  .md-book-search__title {
    font-weight: 600;
    font-size: 0.9rem;
  }

  .md-book-search__heading {
    font-size: 0.78rem;
    color: var(--md-book-color-accent);
  }

  .md-book-search__snippet {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--md-book-color-fg-muted);
    overflow-wrap: anywhere;
  }

  .md-book-search__snippet mark {
    color: var(--md-book-color-fg);
    background: color-mix(in srgb, var(--md-book-color-warning) 30%, transparent);
    border-radius: 0.15em;
  }

  @media (max-width: 760px) {
    .md-book-search__hint {
      display: none;
    }

    .md-book-search__input {
      width: 8rem;
    }

    .md-book-search__input:focus {
      width: 11rem;
    }

    .md-book-search__panel {
      position: fixed;
      top: calc(var(--md-book-header-height) + 0.4rem);
      right: 1rem;
      left: 1rem;
      width: auto;
    }
  }

  /* Phones: the box collapses to a magnifier and expands over the header on focus. */
  @media (max-width: 560px) {
    .md-book-search__input {
      width: 2.25rem;
      padding: 0;
      color: transparent;
      caret-color: transparent;
      cursor: pointer;
    }

    .md-book-search__input::placeholder {
      color: transparent;
    }

    .md-book-search::before {
      content: "";
      position: absolute;
      top: 0.6rem;
      left: 0.62rem;
      width: 0.62rem;
      height: 0.62rem;
      border: 2px solid var(--md-book-color-fg-muted);
      border-radius: 50%;
      pointer-events: none;
    }

    .md-book-search::after {
      content: "";
      position: absolute;
      top: 1.42rem;
      left: 1.28rem;
      width: 0.4rem;
      height: 2px;
      background: var(--md-book-color-fg-muted);
      rotate: 45deg;
      pointer-events: none;
    }

    .md-book-search:focus-within::before,
    .md-book-search:focus-within::after {
      display: none;
    }

    .md-book-search__input:focus {
      position: fixed;
      top: 0.6rem;
      right: 1rem;
      left: 1rem;
      z-index: 21;
      width: auto;
      padding: 0 0.75rem;
      color: var(--md-book-color-fg);
      caret-color: auto;
      cursor: text;
      background: var(--md-book-color-bg);
    }

    .md-book-search__input:focus::placeholder {
      color: var(--md-book-color-fg-muted);
    }

    .md-book-lang__select {
      max-width: 5.75rem;
      padding: 0 0.25rem;
    }
  }

  /* --- language switcher (content-level i18n) -------------------------- */
  .md-book-lang__select {
    height: 2.25rem;
    padding: 0 0.5rem;
    font: inherit;
    font-size: 0.85rem;
    color: var(--md-book-color-fg-muted);
    background: transparent;
    border: var(--md-book-border-width) solid var(--md-book-color-border);
    border-radius: var(--md-book-radius-sm);
    cursor: pointer;
    transition: color var(--md-book-transition), background-color var(--md-book-transition);
  }

  .md-book-lang__select:hover {
    color: var(--md-book-color-fg);
    background: var(--md-book-color-surface-hover);
  }

  /* --- math + diagrams -------------------------------------------------- */
  /* Before KaTeX loads (or if it never does) the TeX source shows as code. */
  .md-book-math:not(.md-book-math--rendered) {
    font-family: var(--md-book-font-mono);
    font-size: 0.9em;
  }

  .md-book-math--display {
    display: block;
    margin: 1.25rem 0;
    overflow-x: auto;
    overflow-y: hidden;
    text-align: center;
  }

  span.md-book-math--display {
    display: inline;
  }

  .md-book-article--vertical .md-book-math--display {
    overflow: visible;
  }

  .md-book-mermaid {
    margin: 1.25rem 0;
    padding: 1rem;
    overflow-x: auto;
    text-align: center;
    color: var(--md-book-color-code-fg);
    background: var(--md-book-color-code-bg);
    border: var(--md-book-border-width) solid var(--md-book-color-border);
    border-radius: var(--md-book-radius);
  }

  .md-book-mermaid--rendered {
    background: transparent;
  }

  .md-book-mermaid:not(.md-book-mermaid--rendered) {
    text-align: start;
    font-family: var(--md-book-font-mono);
    font-size: 0.85rem;
  }

  .md-book-mermaid--error {
    border-color: var(--md-book-color-danger);
  }

  .md-book-mermaid svg {
    max-width: 100%;
    height: auto;
  }

  /* --- misc ---------------------------------------------------------- */
  .md-book-page-footer {
    margin-top: 2rem;
    color: var(--md-book-color-fg-muted);
    font-size: 0.85rem;
  }

  .md-book-page-footer[hidden],
  .md-book-navbar-end[hidden],
  .md-book-sidebar__top[hidden] {
    display: none;
  }

  .md-book-error {
    color: var(--md-book-color-danger);
    padding: 1rem;
  }
}