/* User Provided Stylesheet */

/* =========================================================
   Custom styles for My Deep Learning Wiki
   ---------------------------------------------------------
   MyST (book-theme) の見た目を上書きするスタイルと、
   assets/js/mydl-runtime.js が追加する要素（ヘッダーのボタン・
   タグ・関連リンク・Home の検索 UI など）のスタイルをまとめている。

   デザインの方針: 白地にほぼ黒の文字、青のアクセント（#0457cb）、
   ゆったりした余白、細い区切り線、角の丸いカードとピル型のボタン。
   書体は Figtree（欧文）と Noto Sans JP（和文）。
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..800;1,300..800&family=Noto+Sans+JP:wght@400;500;700&display=swap");

/* ---------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------- */

:root {
  --mydl-font-sans: "Figtree", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", "Hiragino Sans",
    "Yu Gothic UI", Meiryo, sans-serif;
  --mydl-font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;

  /* Text */
  --mydl-ink: #0a1317;
  --mydl-text: #1c2b33;
  --mydl-muted: #5d6c7b;
  --mydl-faint: #8796a5;

  /* Surfaces & lines */
  --mydl-bg: #ffffff;
  --mydl-surface: #ffffff;
  --mydl-surface-2: #f1f4f7;
  --mydl-surface-3: #e7ecf1;
  --mydl-line: rgb(10 19 23 / 0.1);
  --mydl-line-strong: rgb(10 19 23 / 0.18);

  /* Accent */
  --mydl-accent: #0457cb;
  --mydl-accent-hover: #0143b5;
  --mydl-accent-soft: #e8f0fd;
  --mydl-accent-line: rgb(4 87 203 / 0.35);
  --mydl-on-accent: #ffffff;
  --mydl-focus: 0 0 0 3px rgb(4 87 203 / 0.28);

  /* Code */
  --mydl-code-bg: #f1f4f7;
  --mydl-code-inline-bg: rgb(10 19 23 / 0.06);
  --mydl-code-ink: #0a1317;

  /* Callouts */
  --mydl-note-bg: #eef4fd;
  --mydl-note-accent: #0457cb;
  --mydl-tip-bg: #ecf7f1;
  --mydl-tip-accent: #12804f;
  --mydl-warning-bg: #fdf5e7;
  --mydl-warning-accent: #b86a00;
  --mydl-danger-bg: #fdefef;
  --mydl-danger-accent: #c62828;

  /* Plotly figures (read by the script inside each chart iframe) */
  --mydl-plot-bg: #ffffff;
  --mydl-plot-text: #0a1317;
  --mydl-plot-muted: #5d6c7b;
  --mydl-plot-grid: rgb(10 19 23 / 0.08);
  --mydl-plot-line: rgb(10 19 23 / 0.28);
  --mydl-plot-legend-bg: rgb(255 255 255 / 0.92);
  --mydl-plot-legend-border: rgb(10 19 23 / 0.12);

  /* Shape & depth */
  --mydl-radius-sm: 10px;
  --mydl-radius: 16px;
  --mydl-radius-lg: 24px;
  --mydl-radius-pill: 999px;
  --mydl-shadow-sm: 0 1px 2px rgb(10 19 23 / 0.05);
  --mydl-shadow: 0 1px 2px rgb(10 19 23 / 0.04), 0 10px 30px rgb(10 19 23 / 0.07);

  /* Header height (mydl-runtime.js が実測値で上書きする) */
  --mydl-header-height: 64px;
}

html.dark {
  --mydl-ink: #f2f5f8;
  --mydl-text: #d3dbe3;
  --mydl-muted: #9aa8b6;
  --mydl-faint: #6f8091;

  --mydl-bg: #0b1116;
  --mydl-surface: #10171d;
  --mydl-surface-2: #151e26;
  --mydl-surface-3: #1d2833;
  --mydl-line: rgb(232 237 242 / 0.1);
  --mydl-line-strong: rgb(232 237 242 / 0.18);

  --mydl-accent: #6aa6ff;
  --mydl-accent-hover: #8dbbff;
  --mydl-accent-soft: rgb(106 166 255 / 0.13);
  --mydl-accent-line: rgb(106 166 255 / 0.4);
  --mydl-on-accent: #04111f;
  --mydl-focus: 0 0 0 3px rgb(106 166 255 / 0.35);

  --mydl-code-bg: #121a21;
  --mydl-code-inline-bg: rgb(232 237 242 / 0.09);
  --mydl-code-ink: #e8edf2;

  --mydl-note-bg: rgb(106 166 255 / 0.09);
  --mydl-note-accent: #6aa6ff;
  --mydl-tip-bg: rgb(52 199 123 / 0.08);
  --mydl-tip-accent: #4fd18f;
  --mydl-warning-bg: rgb(245 166 35 / 0.09);
  --mydl-warning-accent: #f5b041;
  --mydl-danger-bg: rgb(239 83 80 / 0.09);
  --mydl-danger-accent: #ff7b77;

  --mydl-plot-bg: #0b1116;
  --mydl-plot-text: #e8edf2;
  --mydl-plot-muted: #9aa8b6;
  --mydl-plot-grid: rgb(232 237 242 / 0.09);
  --mydl-plot-line: rgb(232 237 242 / 0.3);
  --mydl-plot-legend-bg: rgb(11 17 22 / 0.92);
  --mydl-plot-legend-border: rgb(232 237 242 / 0.16);

  --mydl-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
  --mydl-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 32px rgb(0 0 0 / 0.35);

  color-scheme: dark;
}

/* ---------------------------------------------------------
   2. Base
   --------------------------------------------------------- */

html,
body,
button,
input,
select,
textarea {
  font-family: var(--mydl-font-sans) !important;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 0;
}

body {
  background: var(--mydl-bg) !important;
  color: var(--mydl-text);
}

code,
kbd,
pre,
samp,
.myst-code,
.myst-code * {
  font-family: var(--mydl-font-mono) !important;
}

::selection {
  background: rgb(4 87 203 / 0.16);
}

html.dark ::selection {
  background: rgb(106 166 255 / 0.28);
}

:focus-visible {
  outline: none;
  box-shadow: var(--mydl-focus) !important;
  border-radius: 6px;
}

/* 日本語: 行頭に「ー」・小書きの仮名・句読点が来ないようにする */
html[lang="ja"] article,
html[lang="ja"] .home-search-page {
  line-break: strict;
}

/* 見出しやカードのタイトルは文節の切れ目で折り返す（対応ブラウザのみ） */
article h1,
article h2,
article h3,
article h4,
.mydl-tag-card-title,
.home-search-description,
.home-note-title,
.home-result-title {
  word-break: auto-phrase;
}

/* ---------------------------------------------------------
   3. Header
   --------------------------------------------------------- */

.myst-top-nav {
  min-height: 64px !important;
  border-bottom: 1px solid var(--mydl-line) !important;
  background: color-mix(in srgb, var(--mydl-bg) 86%, transparent) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
}

.myst-top-nav-bar {
  max-width: 1360px !important;
  min-height: 40px;
}

.myst-top-nav a.myst-home-link img {
  height: 30px !important;
  width: auto !important;
}

/* 右上のボタンを同じ大きさの丸いアイコンボタンにそろえる */
.myst-top-nav .myst-theme-button,
.myst-top-nav .mydl-header-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 36px !important;
  height: 36px !important;
  margin-left: 0.5rem !important;
  padding: 0 !important;
  border: 1px solid var(--mydl-line-strong) !important;
  border-radius: var(--mydl-radius-pill) !important;
  background: transparent !important;
  color: var(--mydl-ink) !important;
  text-decoration: none !important;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease !important;
}

.myst-top-nav .myst-theme-button:hover,
.myst-top-nav .mydl-header-icon:hover {
  border-color: var(--mydl-ink) !important;
  background: var(--mydl-ink) !important;
  color: var(--mydl-bg) !important;
}

.myst-top-nav .myst-theme-button svg {
  /* MyST のアイコンは padding (p-[18%]) で余白を作るので、ここでは大きさだけを決める */
  flex: 0 0 auto;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
}

.myst-top-nav .mydl-header-icon svg {
  display: block;
  width: 17px;
  height: 17px;
  pointer-events: none;
}

.myst-top-nav .home-header-x-link svg {
  width: 15px;
  height: 15px;
}

/* 検索ボタン（MyST の検索）: ピル型 */
.myst-top-nav .myst-search-bar {
  height: 38px !important;
  border: 1px solid var(--mydl-line-strong) !important;
  border-radius: var(--mydl-radius-pill) !important;
  background: var(--mydl-surface-2) !important;
  color: var(--mydl-muted) !important;
  box-shadow: none !important;
  transition:
    border-color 140ms ease,
    background-color 140ms ease !important;
}

.myst-top-nav .myst-search-bar:hover {
  border-color: var(--mydl-ink) !important;
  background: var(--mydl-bg) !important;
}

.myst-top-nav .myst-search-bar svg {
  width: 38px !important;
  height: 38px !important;
  padding: 0.66rem !important;
}

.myst-top-nav .myst-search-bar kbd {
  border-color: var(--mydl-line-strong) !important;
  border-radius: 6px !important;
  background: var(--mydl-bg) !important;
  box-shadow: none !important;
  color: var(--mydl-muted) !important;
  font-size: 0.72rem !important;
}

/* 言語切り替え（JA / EN） */
.mydl-lang-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  height: 36px;
  margin-left: 0.75rem;
  padding: 3px;
  border: 1px solid var(--mydl-line-strong);
  border-radius: var(--mydl-radius-pill);
  background: var(--mydl-surface-2);
}

.mydl-lang-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.15rem;
  height: 28px;
  padding: 0 0.6rem;
  border-radius: var(--mydl-radius-pill);
  color: var(--mydl-muted) !important;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none !important;
  transition:
    background-color 140ms ease,
    color 140ms ease;
}

a.mydl-lang-option:hover {
  color: var(--mydl-ink) !important;
}

.mydl-lang-option[aria-current="true"] {
  background: var(--mydl-ink);
  color: var(--mydl-bg) !important;
}

/* 左側のサイドバー（hide_toc で非表示）のメニューボタンも隠す */
.myst-top-nav button.myst-top-nav-menu-button,
.myst-top-nav button[class~="myst-top-nav-menu-button"],
.myst-top-nav button[aria-label="Open Menu"],
.myst-top-nav nav.myst-top-nav-bar div[class~="block"][class~="lg:hidden"],
.myst-top-nav .myst-top-nav-bar div[class~="block"][class~="lg:hidden"] {
  display: none !important;
}

@media (max-width: 639px) {
  .myst-top-nav a.myst-home-link img {
    height: 26px !important;
  }

  .myst-top-nav .myst-search-bar {
    justify-content: center;
    width: 34px !important;
    height: 34px !important;
    background: transparent !important;
    color: var(--mydl-ink) !important;
  }

  /* ボタンの大きさは px で決めているので、余白も px にする（rem だと文字サイズの設定を
     大きくしたときに余白だけが広がり、虫めがねのアイコンが小さくなる） */
  .myst-top-nav .myst-search-bar svg {
    width: 34px !important;
    height: 34px !important;
    padding: 8.8px !important;
  }

  .myst-top-nav .myst-theme-button,
  .myst-top-nav .mydl-header-icon {
    width: 34px !important;
    height: 34px !important;
    margin-left: 0.35rem !important;
  }

  .mydl-lang-switch {
    height: 34px;
    margin-left: 0.4rem;
  }

  .mydl-lang-option {
    min-width: 1.85rem;
    height: 26px;
    padding: 0 0.42rem;
    font-size: 0.72rem;
  }
}

@media (max-width: 379px) {
  /* 幅の狭いスマホではロゴを小さくしてボタンを収める */
  .myst-top-nav a.myst-home-link img {
    height: 22px !important;
  }

  .myst-top-nav .myst-theme-button,
  .myst-top-nav .mydl-header-icon,
  .myst-top-nav .myst-search-bar {
    width: 32px !important;
    height: 32px !important;
  }
}

@media (max-width: 359px) {
  .myst-top-nav a.myst-home-link img {
    height: 18px !important;
  }

  .myst-top-nav .myst-theme-button,
  .myst-top-nav .mydl-header-icon,
  .myst-top-nav .myst-search-bar {
    width: 30px !important;
    height: 30px !important;
  }

  .myst-top-nav .myst-theme-button,
  .myst-top-nav .mydl-header-icon {
    margin-left: 0.25rem !important;
  }

  .myst-top-nav .myst-search-bar svg {
    width: 30px !important;
    height: 30px !important;
    padding: 8px !important;
  }

  .mydl-lang-switch {
    height: 30px;
    margin-left: 0.25rem;
    padding: 2px;
  }

  .mydl-lang-option {
    min-width: 1.6rem;
    height: 24px;
    padding: 0 0.32rem;
    font-size: 0.68rem;
  }
}

/* 640〜1023px: 検索ボタン（Search と表示されるピル型）は画面の幅に合わせて縮め、
   右側のボタンがヘッダーの余白にはみ出さないようにする */
@media (min-width: 640px) and (max-width: 1023px) {
  .myst-top-nav .myst-search-bar {
    width: clamp(10.5rem, 30vw, 16rem) !important;
  }
}

/* 〜767px: ロゴの左端と右端のボタンを本文の左右の端（--mydl-gutter）にそろえる
   （767px 以下のヘッダーの左右の余白は、ここだけで決める） */
@media (max-width: 767px) {
  .myst-top-nav {
    padding-right: var(--mydl-gutter) !important;
    padding-left: var(--mydl-gutter) !important;
  }

  .myst-top-nav a.myst-home-link {
    margin-left: 0 !important;
  }

  /* 画面の幅が 320px を下回ったり（ブラウザの拡大表示など）、文字サイズの設定が大きかったりして
     ボタンが入りきらないときは、ロゴのほうを縮めて、ヘッダーが画面の外にはみ出さないようにする */
  .myst-top-nav nav.myst-top-nav-bar > div:first-child {
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  .myst-top-nav a.myst-home-link,
  .myst-top-nav .myst-home-link-logo {
    min-width: 0 !important;
  }

  .myst-top-nav a.myst-home-link img {
    max-width: 100% !important;
    object-fit: contain;
    object-position: left center;
  }
}

/* タッチ操作の端末: ボタンの見た目は変えずに、押せる範囲を上下左右に少し広げる */
@media (pointer: coarse) {
  .myst-top-nav a.myst-home-link,
  .myst-top-nav .myst-theme-button,
  .myst-top-nav .mydl-header-icon,
  .myst-top-nav .myst-search-bar,
  .mydl-lang-option {
    position: relative;
  }

  /* MyST のボタンは overflow: hidden で、外側に広げた範囲が押せなくなるので戻す */
  .myst-top-nav .myst-theme-button,
  .myst-top-nav .mydl-header-icon {
    overflow: visible !important;
  }

  .myst-top-nav .myst-theme-button::after,
  .myst-top-nav .mydl-header-icon::after,
  .myst-top-nav .myst-search-bar::after {
    content: "";
    position: absolute;
    inset: -5px -2px;
  }

  .mydl-lang-option::after {
    content: "";
    position: absolute;
    inset: -7px 0;
  }

  /* ロゴは幅の狭い画面では高さが 18〜26px しかないので、上下に広げる */
  .myst-top-nav a.myst-home-link::after {
    content: "";
    position: absolute;
    inset: -10px -4px;
  }

  /* タイトルの横のダウンロードボタン（20px 四方） */
  .myst-fm-downloads-button::after {
    content: "";
    position: absolute;
    inset: -8px;
  }
}

/* キーボードのない端末（タッチのみ）では、検索ボタンのショートカット表示（Ctrl K）を出さない */
@media (hover: none) and (pointer: coarse) {
  .myst-top-nav .myst-search-bar kbd {
    display: none !important;
  }
}

/* ---------------------------------------------------------
   4. Layout (left TOC is hidden with hide_toc)
   - 本文の幅を読みやすい長さに保ち、右側に CONTENTS を置く
   --------------------------------------------------------- */

/* 見出しの右に付く「¶」リンクなどが画面の右端からはみ出して、
   ページ全体が横にスクロールするのを防ぐ（clip はスクロール領域を作らないので sticky はそのまま動く） */
main.article-grid {
  overflow-x: clip;
}

/* スマホ・小さいタブレット（〜767px）: 左右の余白（MyST は 12px）を少し広げ、
   ヘッダーのロゴやボタンの端と本文の端をそろえる（ヘッダー側は 3. Header の最後） */
@media (max-width: 767px) {
  :root {
    --mydl-gutter: 1rem;
  }
}

@media (min-width: 560px) and (max-width: 767px) {
  :root {
    --mydl-gutter: 1.75rem;
  }
}

@media (max-width: 359px) {
  :root {
    --mydl-gutter: 0.75rem;
  }
}

@media (max-width: 767px) {
  /* MyST の 767px 以下の列定義と同じ名前で、外側の列だけを変える（本文はその内側 + 0.25rem の gap） */
  .article-grid {
    grid-template-columns:
      [screen-start screen-inset-start]
      calc(var(--mydl-gutter) - 0.25rem)
      [page-start page-inset-start body-outset-start body-start gutter-left-start body-inset-start middle-start]
      1fr 1fr
      [gutter-left-end]
      1fr 1fr
      [gutter-right-start]
      1fr 1fr
      [middle-end body-inset-end body-end gutter-right-end body-outset-end page-inset-end page-end]
      calc(var(--mydl-gutter) - 0.25rem)
      [screen-inset-end screen-end] !important;
  }
}

@media (min-width: 1024px) {
  main.article-grid,
  article.article-grid {
    max-width: none !important;
    width: 100% !important;

    grid-template-columns:
      [screen-start]
      minmax(2rem, 1fr)
      [page-start margin-left-start margin-left-end body-start]
      minmax(0, 800px)
      [body-end]
      minmax(2.5rem, 5rem)
      [margin-right-start]
      minmax(13rem, 15rem)
      [margin-right-end page-end]
      minmax(2rem, 1fr)
      [screen-end] !important;
  }

  article.article-grid > :not(.lg\:col-margin-right):not(.hidden) {
    grid-column: body-start / body-end !important;
  }

  article.article-grid > .lg\:col-margin-right {
    grid-column: margin-right-start / margin-right-end !important;
  }
}

/* ---------------------------------------------------------
   5. Title block (note pages)
   --------------------------------------------------------- */

.myst-fm-block {
  margin-bottom: 2.75rem !important;
  padding-top: 3rem !important;
}

.myst-fm-block-header {
  margin-bottom: 0.4rem !important;
}

.myst-fm-block h1,
.myst-fm-block-title {
  margin: 0 !important;
  color: var(--mydl-ink) !important;
  font-size: clamp(1.9rem, 3.9vw, 2.7rem) !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  letter-spacing: -0.012em !important;
}

/* 分類ラベル（ノートの最初のタグ / タグページの "Tag"） */
.mydl-kicker,
.myst-fm-block-subject {
  margin: 0 0 0.85rem !important;
  color: var(--mydl-accent) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
}

.mydl-kicker.is-empty {
  display: none;
}

.mydl-note-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.1rem;
  margin: 1.1rem 0 0 !important;
  color: var(--mydl-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.mydl-note-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}


.mydl-icon {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
}

/* Tags under the title (inserted by mydl-runtime.js) */
.mydl-term-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 1.3rem 0 0.25rem;
}

.mydl-term-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--mydl-line-strong);
  border-radius: var(--mydl-radius-pill);
  background: transparent;
  color: var(--mydl-ink) !important;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none !important;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
}

a.mydl-term-tag:hover,
a.mydl-term-tag:focus-visible {
  border-color: var(--mydl-ink);
  background: var(--mydl-ink);
  color: var(--mydl-bg) !important;
}

.mydl-term-tag-draft {
  border-color: transparent;
  background: var(--mydl-warning-bg);
  color: var(--mydl-warning-accent) !important;
  font-weight: 600;
}

/* ---------------------------------------------------------
   6. Prose
   --------------------------------------------------------- */

:root article.article {
  --tw-prose-body: var(--mydl-text);
  --tw-prose-headings: var(--mydl-ink);
  --tw-prose-lead: var(--mydl-muted);
  --tw-prose-links: var(--mydl-accent);
  --tw-prose-bold: var(--mydl-ink);
  --tw-prose-counters: var(--mydl-muted);
  --tw-prose-bullets: var(--mydl-faint);
  --tw-prose-hr: var(--mydl-line);
  --tw-prose-quotes: var(--mydl-text);
  --tw-prose-quote-borders: var(--mydl-line-strong);
  --tw-prose-captions: var(--mydl-muted);
  --tw-prose-code: var(--mydl-code-ink);
  --tw-prose-th-borders: var(--mydl-line-strong);
  --tw-prose-td-borders: var(--mydl-line);

  color: var(--mydl-text);
  font-size: 0.97rem; /* 15.5px */
  line-height: 1.85;
}

html[lang="en"] article.article {
  line-height: 1.72;
}

article.article p,
article.article li {
  color: var(--mydl-text);
}

article.article strong {
  color: var(--mydl-ink);
  font-weight: 600;
}

/* 見出し: 大きめ・太すぎない。h2 は細い線で区切る */
article.article h2 {
  margin: 4rem 0 1.25rem !important;
  padding-top: 2.25rem !important;
  border-top: 1px solid var(--mydl-line);
  color: var(--mydl-ink) !important;
  font-size: clamp(1.4rem, 2.3vw, 1.74rem) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.008em;
}

article.article h3 {
  margin: 2.6rem 0 0.9rem !important;
  color: var(--mydl-ink) !important;
  font-size: clamp(1.11rem, 1.75vw, 1.28rem) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

article.article h4 {
  margin: 2rem 0 0.6rem !important;
  color: var(--mydl-ink) !important;
  font-size: 1.01rem !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

/* 見出しの「¶」リンク */
article.article :is(h2, h3, h4, h5, h6) > a[aria-label="Link to this Section"] {
  color: var(--mydl-faint) !important;
}

/* MyST は「¶」を見出しの右外（幅 0 + translate）に置く。余白の狭い画面では本文の右端から
   はみ出すので、見出しの文字の続きに置く */
@media (max-width: 767px) {
  article.article :is(h2, h3, h4, h5, h6) > a[aria-label="Link to this Section"] {
    width: auto !important;
    padding-left: 0.3em !important;
    transform: none !important;
  }
}

article.article a:not(.mydl-term-tag):not(.mydl-tag-card):not(.mydl-link-card):not(.mydl-related-card) {
  color: var(--mydl-accent);
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-color: var(--mydl-accent-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 140ms ease;
}

article.article a:not(.mydl-term-tag):not(.mydl-tag-card):not(.mydl-link-card):not(.mydl-related-card):hover {
  color: var(--mydl-accent-hover);
  text-decoration-color: currentColor;
}

article.article ul > li::marker {
  color: var(--mydl-faint);
}

article.article ol > li::marker {
  color: var(--mydl-muted);
  font-weight: 500;
}

/* インラインコード: 薄いグレーの背景 */
article.article :not(pre) > code {
  padding: 0.12em 0.4em;
  border-radius: 6px;
  background: var(--mydl-code-inline-bg);
  color: var(--mydl-code-ink) !important;
  font-size: 0.86em;
  font-weight: 450;
  word-break: break-word;
}

article.article :not(pre) > code::before,
article.article :not(pre) > code::after {
  content: none !important;
}

/* 引用 */
article.article blockquote {
  margin: 1.75rem 0 !important;
  padding: 0.15rem 0 0.15rem 1.25rem !important;
  border-left: 3px solid var(--mydl-accent) !important;
  color: var(--mydl-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

article.article blockquote p {
  color: var(--mydl-ink) !important;
}

article.article blockquote p::before,
article.article blockquote p::after {
  content: none !important;
}

/* 表 */
article.article table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
  line-height: 1.6;
}

article.article thead th,
article.article tr:first-child th {
  border-bottom: 1px solid var(--mydl-line-strong) !important;
  color: var(--mydl-ink) !important;
  font-weight: 600 !important;
}

article.article th,
article.article td {
  padding: 0.65rem 0.75rem !important;
  border-bottom: 1px solid var(--mydl-line) !important;
  color: var(--mydl-text);
  text-align: left;
}

article.article tr:hover td {
  background: var(--mydl-surface-2) !important;
}

/* 1 列目が API 名（コード）の表: 名前ができるだけ途中で折り返さないよう幅を確保する */
article.article table:not(.jp-OutputArea-output table) :is(td, th):first-child:has(> code) {
  min-width: 11em;
}

/* 説明の列: 長い英単語は、ハイフネーションの辞書があるブラウザではハイフンを入れて折り返す。
   overflow-wrap: anywhere は列を詰めすぎて単語を途中で切ってしまうので使わない
   （収まらない表は、640px 以下では表の中で横にスクロールする） */
article.article table:not(.jp-OutputArea-output table) :is(td, th):not(:first-child) {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* 481px 以上（横向きのスマホ・タブレット・PC）は幅に余裕があるので、1 列目の API 名は折り返さない */
@media (min-width: 481px) {
  article.article table:not(.jp-OutputArea-output table) :is(td, th):first-child > code {
    white-space: nowrap;
  }
}

/* notebook の出力の表（pandas の DataFrame）: JupyterLab の table-layout: fixed をやめて
   中身の幅で並べる。数字や列名は折り返さず、収まらなければ出力の枠の中で横にスクロールする */
article .jp-OutputArea-output table {
  width: auto !important;
  max-width: none !important;
  table-layout: auto !important;
}

article .jp-OutputArea-output :is(td, th) {
  overflow-wrap: normal;
  white-space: nowrap;
}

@media (max-width: 640px) {
  /* それでも幅が足りない表は、本文からはみ出さずに表の中で横にスクロールする */
  article.article table:not(.jp-OutputArea-output table) {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
  }

  article.article table:not(.jp-OutputArea-output table) :is(td, th) {
    padding: 0.5rem 0.45rem !important;
  }

  article.article table:not(.jp-OutputArea-output table) :is(td, th):first-child > code {
    font-size: 0.82em;
  }
}

@media (max-width: 359px) {
  article.article table:not(.jp-OutputArea-output table) :is(td, th):first-child:has(> code) {
    min-width: 9em;
  }
}

article.article hr {
  border-color: var(--mydl-line) !important;
}

article.article img {
  border-radius: var(--mydl-radius);
}

/* ---------------------------------------------------------
   7. Code
   --------------------------------------------------------- */

article .myst-code {
  margin: 1.4rem 0 !important;
  border: 1px solid var(--mydl-line) !important;
  border-radius: var(--mydl-radius) !important;
  background: var(--mydl-code-bg) !important;
  box-shadow: none !important;
  overflow: hidden;
}

article .myst-code-body {
  padding: 1rem 1.15rem !important;
}

article .myst-code pre,
article .myst-code code {
  background: transparent !important;
  font-size: 0.81rem !important;
  line-height: 1.65 !important;
}

/* コピーボタン */
article .myst-code button[title="Copy to Clipboard"] {
  border-radius: 8px !important;
}

/* ホバーのない端末（スマホ・タブレット）: MyST のコピーボタンはホバーしたときだけ見えるので、
   右上に小さな枠付きのボタンとして常に表示する。1 行目が長いときは、ボタンの下（と右の
   すき間）の文字を隠し、文字とアイコンが重なって読みにくくならないようにする（横にスクロールすると読める） */
@media (hover: none) {
  article .myst-code .myst-code-copy-icon {
    /* ボタンの地の色はコードの背景と同じにする（「コードを表示」の中は --mydl-bg、
       ダークモードはテーマの .dark .hljs の背景 #1e1e1e） */
    --mydl-copy-bg: var(--mydl-code-bg);

    top: 7px !important;
    right: 7px !important;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0 !important;
    border: 1px solid var(--mydl-line-strong);
    border-radius: 8px !important;
    background: var(--mydl-copy-bg);
    box-shadow: 7px 0 0 0 var(--mydl-copy-bg);
    color: var(--mydl-muted) !important;
    opacity: 1 !important;
  }

  details.myst-dropdown .myst-code .myst-code-copy-icon {
    --mydl-copy-bg: var(--mydl-bg);
  }

  html.dark article .myst-code .myst-code-copy-icon {
    --mydl-copy-bg: #1e1e1e;
  }

  article .myst-code .myst-code-copy-icon svg {
    width: 17px;
    height: 17px;
  }

  /* 押せる範囲を少し広げる */
  article .myst-code .myst-code-copy-icon::after {
    content: "";
    position: absolute;
    inset: -6px;
  }
}

/* notebook の出力 */
article .myst-jp-nb-block pre:not(.myst-code pre),
article [class*="jp-OutputArea"] pre {
  font-size: 0.81rem !important;
  line-height: 1.6 !important;
}

/* 数式の式番号（\tag{…}）: KaTeX は番号を右端に絶対配置するので、式が長いと式に重なる。
   式と番号を横に並べ、幅が足りるときは式を中央・番号を右端に、足りないときは
   番号を式の後ろに置いて（枠の中で横にスクロール）、重ならないようにする */
article .katex-display > .katex > .katex-html:has(> .tag):not(:has(> .newline)) {
  display: flex;
  align-items: baseline;
}

article .katex-display > .katex > .katex-html:has(> .tag):not(:has(> .newline))::before {
  content: "";
  flex: 1 1 0;
}

article .katex-display > .katex > .katex-html:has(> .tag):not(:has(> .newline)) > .tag {
  position: static;
  flex: 1 1 0;
  min-width: max-content;
  text-align: right;
}

/* 式と番号の間のすき間（padding だと中央寄せがずれるので、番号の中に入れる） */
article .katex-display > .katex > .katex-html:has(> .tag):not(:has(> .newline)) > .tag::before {
  content: "";
  display: inline-block;
  width: 1em;
}

/* ソースを隠したコードセル（hide-input）: 「コードを表示」ボタン */
details.myst-dropdown {
  margin: 1.4rem 0 !important;
  border: 1px solid var(--mydl-line) !important;
  border-radius: var(--mydl-radius) !important;
  background: var(--mydl-surface-2) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

details.myst-dropdown > summary.myst-dropdown-header {
  min-height: 2.75rem !important;
  padding: 0.55rem 1.1rem !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--mydl-muted) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  list-style: none !important;
}

details.myst-dropdown > summary.myst-dropdown-header::-webkit-details-marker {
  display: none;
}

details.myst-dropdown .myst-dropdown-header-icon {
  display: none !important;
}

details.myst-dropdown .myst-dropdown-header-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  color: var(--mydl-muted) !important;
  font-size: 0 !important;
  font-weight: 500 !important;
}

details.myst-dropdown .myst-dropdown-header-title::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 160ms ease;
}

details.myst-dropdown .myst-dropdown-header-title::after {
  content: "コードを表示";
  color: var(--mydl-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

html[lang="en"] details.myst-dropdown .myst-dropdown-header-title::after {
  content: "Show code";
}

details.myst-dropdown[open] .myst-dropdown-header-title::before {
  transform: rotate(45deg);
}

details.myst-dropdown[open] .myst-dropdown-header-title::after {
  content: "コードを隠す";
}

html[lang="en"] details.myst-dropdown[open] .myst-dropdown-header-title::after {
  content: "Hide code";
}

details.myst-dropdown > summary.myst-dropdown-header:hover .myst-dropdown-header-title,
details.myst-dropdown > summary.myst-dropdown-header:hover .myst-dropdown-header-title::after {
  color: var(--mydl-ink) !important;
}

details.myst-dropdown .myst-dropdown-body {
  padding: 0 0.75rem 0.75rem !important;
  border: 0 !important;
  background: transparent !important;
}

details.myst-dropdown .myst-code {
  margin: 0 !important;
  background: var(--mydl-bg) !important;
}

/* ---------------------------------------------------------
   8. Callouts (admonitions)
   - アイコンを本文 1 行目の左に置くコンパクトな見た目
   - 既定のタイトル（Note / Warning ...）は表示しない
   - 独自タイトルがある場合だけ表示（mydl-runtime.js が .mydl-admonition-titled を付ける）
   --------------------------------------------------------- */

aside.myst-admonition {
  --mydl-callout-accent: var(--mydl-note-accent);
  --mydl-callout-bg: var(--mydl-note-bg);

  position: relative !important;
  margin: 1.75rem 0 !important;
  padding: 1.05rem 1.35rem 1.05rem 3.2rem !important;
  border: 0 !important;
  border-radius: var(--mydl-radius) !important;
  background: var(--mydl-callout-bg) !important;
  box-shadow: none !important;
  overflow: visible !important;
}

aside.myst-admonition-tip,
aside.myst-admonition-hint,
aside.myst-admonition-seealso {
  --mydl-callout-accent: var(--mydl-tip-accent);
  --mydl-callout-bg: var(--mydl-tip-bg);
}

aside.myst-admonition-warning,
aside.myst-admonition-caution,
aside.myst-admonition-attention {
  --mydl-callout-accent: var(--mydl-warning-accent);
  --mydl-callout-bg: var(--mydl-warning-bg);
}

aside.myst-admonition-danger,
aside.myst-admonition-error {
  --mydl-callout-accent: var(--mydl-danger-accent);
  --mydl-callout-bg: var(--mydl-danger-bg);
}

aside.myst-admonition > .myst-admonition-header {
  position: absolute !important;
  top: 1.12rem !important;
  left: 1.1rem !important;
  display: flex !important;
  align-items: center !important;
  min-height: 1.6rem !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

aside.myst-admonition .myst-admonition-header-icon {
  width: 1.3rem !important;
  height: 1.3rem !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--mydl-callout-accent) !important;
}

aside.myst-admonition .myst-admonition-header-text {
  display: none !important;
}

aside.myst-admonition > .myst-admonition-body {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--mydl-text) !important;
}

aside.myst-admonition > .myst-admonition-body > :first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

aside.myst-admonition > .myst-admonition-body > :last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Custom title: show it on the first line, next to the icon */
aside.myst-admonition.mydl-admonition-titled > .myst-admonition-header {
  position: static !important;
  margin: 0 0 0.35rem -2.1rem !important;
  gap: 0.75rem !important;
}

aside.myst-admonition.mydl-admonition-titled .myst-admonition-header-text {
  display: block !important;
  color: var(--mydl-ink) !important;
  font-weight: 600 !important;
}

/* ---------------------------------------------------------
   9. Outline (CONTENTS)
   --------------------------------------------------------- */

nav.myst-outline {
  background: transparent !important;
}

nav.myst-outline .myst-outline-header,
nav.myst-outline > div:first-child {
  color: var(--mydl-ink) !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
}

nav.myst-outline a {
  color: var(--mydl-muted) !important;
  font-size: 0.86rem !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
}

nav.myst-outline a:hover {
  color: var(--mydl-ink) !important;
}

/* 今読んでいる見出し: mydl-runtime.js がスクロール位置から決めて data-mydl-current を付ける。
   MyST 自身の強調（スクロールが速いと遅れることがある）は使わない */
nav.myst-outline a[class*="font-bold"],
nav.myst-outline a.text-blue-600 {
  color: var(--mydl-muted) !important;
  font-weight: 500 !important;
}

nav.myst-outline [class*="border-l"] {
  border-color: var(--mydl-line) !important;
}

nav.myst-outline .myst-outline-item {
  background: transparent !important;
  transition:
    border-color 160ms ease,
    background-color 160ms ease;
}

nav.myst-outline .myst-outline-item[data-mydl-current] {
  border-left-color: var(--mydl-accent) !important;
  background: var(--mydl-accent-soft) !important;
}

nav.myst-outline a[data-mydl-current] {
  color: var(--mydl-accent) !important;
  font-weight: 600 !important;
}

/* 目次の中だけをスクロールし、ページ全体には伝えない */
nav.myst-outline {
  overscroll-behavior: contain;
  scroll-padding-block: 1rem;
}

/* Mobile / tablet: the outline sits above the content (collapsed by mydl-runtime.js) */
@media (max-width: 1023px) {
  article.article-grid > .lg\:col-margin-right {
    margin-top: 0.25rem !important;
    margin-bottom: 1.75rem !important;
  }

  nav.myst-outline {
    margin: 0 !important;
    padding: 0.6rem 1rem !important;
    border: 1px solid var(--mydl-line-strong) !important;
    border-radius: var(--mydl-radius) !important;
  }

  nav.myst-outline .myst-outline-header {
    position: relative;
    align-items: center !important;
    margin-bottom: 0 !important;
    cursor: pointer;
  }

  /* 開閉ボタン（右向きの矢印）は小さいので、枠の上の段全体で開閉できるようにする */
  nav.myst-outline .myst-outline-collapsible::after {
    content: "";
    position: absolute;
    inset: -0.6rem -1rem;
  }

  nav.myst-outline .CollapsibleContent[data-state="open"] {
    margin-top: 0.6rem;
  }
}

/* ---------------------------------------------------------
   10. Plotly charts (iframe srcdoc written by show_interactive in the notebooks)
   --------------------------------------------------------- */

iframe.mydl-plotly-iframe {
  max-width: 100%;
  border-radius: var(--mydl-radius);
  background: var(--mydl-plot-bg) !important;
}

@media (max-width: 720px) {
  iframe.mydl-plotly-iframe {
    max-width: 100% !important;
  }
}

/* ---------------------------------------------------------
   11. Tag pages (tags/tag-*.md, generated by generate_tag_pages.py)
   --------------------------------------------------------- */

.mydl-tag-summary {
  margin: -1.6rem 0 0 !important;
  color: var(--mydl-muted);
  font-size: 0.95rem;
  font-weight: 500;
}

.mydl-tag-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 1.25rem;
  margin: 2.25rem 0 4rem !important;
}

/* MyST が生の HTML を <p> で包むことがあるので、その余白を消す */
.mydl-tag-card-list > p {
  display: contents;
}

/* リンクはプレビュー用の <span> で包まれるので、その <span> ごと高さをそろえる */
.mydl-tag-card-list > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

a.mydl-tag-card {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--mydl-line);
  border-radius: var(--mydl-radius-lg);
  background: var(--mydl-surface);
  color: inherit !important;
  text-decoration: none !important;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

a.mydl-tag-card:hover,
a.mydl-tag-card:focus-visible {
  border-color: var(--mydl-line-strong);
  box-shadow: var(--mydl-shadow);
  transform: translateY(-2px);
}

.mydl-tag-card-media {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--mydl-surface-2);
}

/* 画像の大きさに関係なく、16:9 の枠に収める（カードの高さをそろえる） */
.mydl-tag-card-media img {
  position: absolute;
  inset: 1.25rem;
  width: calc(100% - 2.5rem) !important;
  max-width: none !important;
  height: calc(100% - 2.5rem) !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain;
}

html.dark .mydl-tag-card-media {
  background: #e9eef3;
}

.mydl-tag-card-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.4rem 1.45rem;
}

.mydl-tag-card-date {
  color: var(--mydl-muted);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.mydl-tag-card-title {
  color: var(--mydl-ink);
  font-size: 1.28rem;
  font-weight: 500;
  line-height: 1.35;
}

.mydl-tag-card-description {
  display: -webkit-box;
  overflow: hidden;
  color: var(--mydl-muted);
  font-size: 0.93rem;
  line-height: 1.65;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Tag page only: hide author block / right outline / download button
   （自動生成の一覧ページなので、.md のダウンロードは不要）/ hover previews */
body:has(.mydl-tag-card-list) header.myst-fm-authors-affiliations,
body:has(.mydl-tag-card-list) .myst-fm-downloads-dropdown,
body:has(.mydl-tag-card-list) article.article-grid > .lg\:col-margin-right {
  display: none !important;
}

body:has(.mydl-tag-card-list) div[data-radix-popper-content-wrapper],
body:has(.mydl-tag-card-list) div[data-radix-hover-card-content],
body:has(.mydl-tag-card-list) .hover-card-content,
body:has(.mydl-tag-card-list) [role="tooltip"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---------------------------------------------------------
   11b. Translated pages: notice when the original changed after translation
   （英語版の冒頭。mydl-runtime.js がビルド時の判定をもとに出す）
   --------------------------------------------------------- */

.mydl-translation-notice {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  margin: 1.6rem 0 0 !important;
  padding: 0.95rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--mydl-warning-accent) 28%, transparent);
  border-radius: var(--mydl-radius);
  background: var(--mydl-warning-bg);
  color: var(--mydl-text);
  font-size: 0.92rem;
  line-height: 1.6;
}

.mydl-translation-notice-icon {
  display: inline-flex;
  flex: 0 0 auto;
  margin-top: 0.12rem;
  color: var(--mydl-warning-accent);
}

.mydl-translation-notice-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.mydl-translation-notice-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.mydl-translation-notice-title {
  color: var(--mydl-ink);
  font-weight: 600;
}

.mydl-translation-notice-text {
  color: var(--mydl-text);
}

article.article a.mydl-translation-notice-link,
a.mydl-translation-notice-link {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  align-self: flex-start;
  margin-top: 0.25rem;
  color: var(--mydl-accent) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

article.article a.mydl-translation-notice-link:hover,
a.mydl-translation-notice-link:hover {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------
   12. Related links at the end of note pages (mydl-runtime.js)
   --------------------------------------------------------- */

.mydl-link-graph {
  margin: 5rem 0 4rem !important;
  padding-top: 2.25rem;
  border-top: 1px solid var(--mydl-line);
}

/* 本文の見出しのスタイル（article.article h2/h3）より優先する */
article.article .mydl-link-graph-title {
  margin: 0 0 1.5rem !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--mydl-ink) !important;
  font-size: clamp(1.4rem, 2.3vw, 1.74rem) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

.mydl-link-graph-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.mydl-link-group,
.mydl-related {
  min-width: 0;
}

.mydl-related {
  margin-top: 2.25rem;
}

/* 本文の見出しのスタイル（article.article h2/h3）より優先する */
article.article .mydl-link-group-heading {
  margin: 0 !important;
  color: var(--mydl-ink) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  line-height: 1.5 !important;
  text-transform: uppercase;
}

.mydl-link-group-description {
  margin: 0.15rem 0 0.85rem !important;
  color: var(--mydl-muted) !important;
  font-size: 0.86rem;
  line-height: 1.5;
}

.mydl-link-list {
  display: grid;
  gap: 0.6rem;
}

a.mydl-link-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--mydl-line);
  border-radius: var(--mydl-radius);
  background: var(--mydl-surface);
  color: var(--mydl-ink) !important;
  text-decoration: none !important;
  transition:
    border-color 140ms ease,
    background-color 140ms ease;
}

a.mydl-link-card:hover,
a.mydl-link-card:focus-visible {
  border-color: var(--mydl-line-strong);
  background: var(--mydl-surface-2);
}

.mydl-link-card-arrow {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--mydl-line-strong);
  border-radius: var(--mydl-radius-pill);
  color: var(--mydl-accent);
  font-size: 0.95rem;
}

/* タイトルは 2 行まで表示する（狭い画面で 1 行に切ると、肝心の部分が見えなくなる） */
.mydl-link-card-title {
  display: -webkit-box;
  overflow: hidden;
  min-width: 0;
  font-size: 0.97rem;
  font-weight: 500;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.mydl-link-empty {
  margin: 0 !important;
  padding: 0.85rem 1.1rem;
  border: 1px dashed var(--mydl-line-strong);
  border-radius: var(--mydl-radius);
  color: var(--mydl-faint) !important;
  font-size: 0.9rem;
}

.mydl-related-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

a.mydl-related-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--mydl-line);
  border-radius: var(--mydl-radius-lg);
  background: var(--mydl-surface);
  color: inherit !important;
  text-decoration: none !important;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

a.mydl-related-card:hover,
a.mydl-related-card:focus-visible {
  border-color: var(--mydl-line-strong);
  box-shadow: var(--mydl-shadow);
}

.mydl-related-thumb,
.home-note-thumb {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--mydl-surface-2);
}

.mydl-related-thumb {
  width: 5.5rem;
  height: 4.25rem;
  padding: 0.45rem;
  border-radius: 14px;
}

.mydl-related-thumb img,
.home-note-thumb img {
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  object-fit: contain;
  border-radius: 8px !important;
}

html.dark .mydl-related-thumb:not(.is-empty),
html.dark .home-note-thumb:not(.is-empty) {
  background: #e9eef3;
}

/* 白い余白のある画像（ロゴなど）は、画像エリアも白にして枠を目立たせない */
.mydl-tag-card-media.is-plain,
.home-note-thumb.is-plain,
.mydl-related-thumb.is-plain,
html.dark .mydl-tag-card-media.is-plain,
html.dark .home-note-thumb.is-plain,
html.dark .mydl-related-thumb.is-plain {
  background: #ffffff;
}

.mydl-tag-card-media.is-plain,
.home-note-thumb.is-plain {
  border-bottom: 1px solid var(--mydl-line);
}

.mydl-related-thumb.is-plain {
  box-shadow: inset 0 0 0 1px var(--mydl-line);
}

.mydl-related-thumb.is-empty,
.home-note-thumb.is-empty {
  background: linear-gradient(135deg, var(--mydl-accent-soft), var(--mydl-surface-2));
  color: var(--mydl-accent);
  font-weight: 600;
}

.mydl-related-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.mydl-related-title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--mydl-ink);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.mydl-related-date {
  color: var(--mydl-muted);
  font-size: 0.78rem;
}

.mydl-related-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.mydl-related-tag {
  color: var(--mydl-accent);
  font-size: 0.76rem;
  font-weight: 500;
}

.mydl-related-tag::before {
  content: "#";
  opacity: 0.6;
}

@media (max-width: 720px) {
  .mydl-link-graph {
    margin: 3.5rem 0 3rem !important;
  }

  .mydl-link-graph-grid,
  .mydl-related-list {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------
   13. Reading progress + back to top (note pages)
   --------------------------------------------------------- */

.mydl-progress {
  --mydl-progress: 0;

  position: fixed;
  top: var(--mydl-header-height);
  right: 0;
  left: 0;
  z-index: 29;
  height: 2px;
  pointer-events: none;
}

.mydl-progress-bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--mydl-accent);
  transform: scaleX(var(--mydl-progress));
  transform-origin: 0 50%;
}

.mydl-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--mydl-line-strong);
  border-radius: var(--mydl-radius-pill);
  background: color-mix(in srgb, var(--mydl-bg) 92%, transparent);
  box-shadow: var(--mydl-shadow);
  color: var(--mydl-ink);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    background-color 140ms ease,
    color 140ms ease;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.mydl-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.mydl-to-top:hover {
  border-color: var(--mydl-ink);
  background: var(--mydl-ink);
  color: var(--mydl-bg);
}

.mydl-to-top svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 720px) {
  .mydl-to-top {
    right: 1rem;
    bottom: 1rem;
    width: 42px;
    height: 42px;
  }
}

/* ---------------------------------------------------------
   14. Home: search UI + browse (mydl-runtime.js)
   --------------------------------------------------------- */

html[data-my-dl-wiki-home="true"],
html[data-my-dl-wiki-home="true"] body {
  overflow: hidden !important;
}

html[data-my-dl-wiki-home="true"] main.article-grid,
html[data-my-dl-wiki-home="true"] article.article-grid {
  visibility: hidden !important;
}

html[data-my-dl-wiki-home="true"] .mydl-progress,
html[data-my-dl-wiki-home="true"] .mydl-to-top {
  display: none !important;
}

.home-search-page {
  --mydl-home-strip-bg: rgb(255 255 255 / 0.92);
  --mydl-home-strip-bg-solid: #ffffff;
  --mydl-home-strip-border: var(--mydl-line);

  position: fixed;
  inset: var(--mydl-header-height) 0 0 0;
  z-index: 20;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 1.5rem;
  background: var(--mydl-bg);
}

html.dark .home-search-page {
  --mydl-home-strip-bg: rgb(11 17 22 / 0.92);
  --mydl-home-strip-bg-solid: #0b1116;
}

.home-search-card {
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: clamp(3rem, 11vh, 7rem) 0 5rem;
}

.home-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.home-search-kicker {
  margin: 0 0 1rem;
  color: var(--mydl-accent);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-search-title {
  max-width: 900px;
  margin: 0 auto;
  color: var(--mydl-ink);
  font-size: clamp(2.6rem, 6.2vw, 4.6rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.home-search-description {
  max-width: 40rem;
  margin: 1.4rem auto 1.6rem;
  color: var(--mydl-muted);
  font-size: clamp(1.02rem, 1.7vw, 1.22rem);
  line-height: 1.7;
}

/* 検索ボックスはスクロールしても上端に残る。貼り付いている間（.is-stuck）は
   全幅の帯を敷き、下を流れる検索結果が透けて見えないようにする */
.home-search-sticky {
  position: sticky;
  top: 0;
  z-index: 2;
  align-self: stretch;
  margin: 0 calc(50% - 50vw);
  padding: 0.9rem calc(50vw - 50%);
  border-bottom: 1px solid transparent;
  transition:
    background-color 160ms ease,
    border-color 160ms ease;
}

.home-search-page.is-stuck .home-search-sticky {
  border-bottom-color: var(--mydl-home-strip-border);
  background-color: var(--mydl-home-strip-bg);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .home-search-page.is-stuck .home-search-sticky {
    background-color: var(--mydl-home-strip-bg-solid);
  }
}

.home-searchbox {
  position: relative;
  width: min(680px, 100%);
  margin: 0 auto;
}

.home-search-icon {
  position: absolute;
  top: 50%;
  left: 1.35rem;
  width: 1.2rem;
  height: 1.2rem;
  color: var(--mydl-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.home-search-kbd {
  position: absolute;
  top: 50%;
  right: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.4rem;
  border: 1px solid var(--mydl-line-strong);
  border-radius: 7px;
  background: var(--mydl-bg);
  color: var(--mydl-muted);
  font: 600 0.8rem/1 var(--mydl-font-mono);
  transform: translateY(-50%);
  pointer-events: none;
}

.home-search-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 3.6rem;
  padding: 0 3.4rem 0 3.3rem;
  border: 1px solid var(--mydl-line-strong);
  border-radius: var(--mydl-radius-pill);
  outline: none;
  background: var(--mydl-surface);
  box-shadow: var(--mydl-shadow-sm);
  color: var(--mydl-ink);
  font-size: 1.04rem;
  font-weight: 400;
  line-height: 3.6rem;
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.home-search-input::-webkit-search-cancel-button {
  display: none;
}

.home-search-input::placeholder {
  color: var(--mydl-faint);
  opacity: 1;
}

.home-search-input:hover {
  border-color: var(--mydl-muted);
}

.home-search-input:focus {
  border-color: var(--mydl-accent) !important;
  box-shadow: var(--mydl-focus) !important;
}

.home-search-input:focus ~ .home-search-kbd,
.home-search-input:not(:placeholder-shown) ~ .home-search-kbd {
  opacity: 0;
}

/* Results */
.home-results-panel {
  display: none;
  width: min(760px, 100%);
  margin: 0.75rem auto 0;
  text-align: left;
}

.home-results-panel.is-active {
  display: block;
  animation: mydl-fade-in 140ms ease;
}

.home-results-summary {
  min-height: 1.5rem;
  margin: 0 0 0.75rem;
  color: var(--mydl-muted);
  font-size: 0.86rem;
  font-weight: 500;
}

.home-results-scroll {
  display: grid;
  gap: 0.85rem;
}

.home-result-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.2rem 1.4rem 1.25rem;
  border: 1px solid var(--mydl-line);
  border-radius: var(--mydl-radius-lg);
  background: var(--mydl-surface);
  color: inherit;
  text-decoration: none !important;
  /* ↑↓ キーで選択したときに、貼り付いた検索ボックスの下に隠れないように */
  scroll-margin: 6.5rem 0 1.25rem;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.home-result-card:hover {
  border-color: var(--mydl-line-strong);
  box-shadow: var(--mydl-shadow);
}

.home-result-card.is-selected {
  border-color: var(--mydl-accent);
  box-shadow: var(--mydl-focus);
}

.home-result-card.home-result-card-tag-page {
  background: var(--mydl-surface-2);
}

.home-result-kicker {
  color: var(--mydl-accent);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-result-title {
  color: var(--mydl-ink);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.4;
}

.home-result-excerpt {
  color: var(--mydl-muted);
  font-size: 0.93rem;
  line-height: 1.7;
}

.home-result-excerpt mark {
  padding: 0.05rem 0.2rem;
  border-radius: 4px;
  background: rgb(4 87 203 / 0.12);
  color: var(--mydl-ink);
}

html.dark .home-result-excerpt mark {
  background: rgb(106 166 255 / 0.24);
}

.home-result-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.45rem;
  margin-top: 0.45rem;
}

.home-result-date {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: 0.35rem;
  color: var(--mydl-muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.home-result-term {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.55rem;
  border: 1px solid var(--mydl-line);
  border-radius: var(--mydl-radius-pill);
  color: var(--mydl-muted);
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.5;
}

.home-result-empty {
  padding: 1.2rem 1.4rem;
  border: 1px dashed var(--mydl-line-strong);
  border-radius: var(--mydl-radius-lg);
  color: var(--mydl-muted);
  font-size: 0.93rem;
  line-height: 1.7;
}

/* Browse (shown while the search box is empty) */
.home-browse {
  width: 100%;
  margin: 3.5rem auto 0;
  text-align: left;
  animation: mydl-fade-in 200ms ease;
}

.home-browse.is-hidden {
  display: none;
}

.home-browse-block {
  padding-top: 2.25rem;
  border-top: 1px solid var(--mydl-line);
}

.home-browse-block + .home-browse-block {
  margin-top: 3.25rem;
}

.home-browse-heading {
  margin: 0 0 1.4rem !important;
  color: var(--mydl-ink) !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-note-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1.25rem;
}

a.home-note-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--mydl-line);
  border-radius: var(--mydl-radius-lg);
  background: var(--mydl-surface);
  color: inherit;
  text-decoration: none !important;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

a.home-note-card:hover,
a.home-note-card:focus-visible {
  border-color: var(--mydl-line-strong);
  box-shadow: var(--mydl-shadow);
  transform: translateY(-2px);
}

.home-note-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
}

.home-note-thumb img {
  position: absolute;
  inset: 1.25rem;
  width: calc(100% - 2.5rem) !important;
  max-width: none !important;
  height: calc(100% - 2.5rem) !important;
  max-height: none !important;
}

.home-note-thumb.is-empty span {
  font-size: 2rem;
  letter-spacing: -0.04em;
}

.home-note-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.2rem 1.35rem 1.35rem;
}

.home-note-kicker {
  color: var(--mydl-accent);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-note-title {
  color: var(--mydl-ink);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.38;
}

.home-note-description {
  display: -webkit-box;
  overflow: hidden;
  color: var(--mydl-muted);
  font-size: 0.9rem;
  line-height: 1.65;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.home-note-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
  margin-top: auto;
  padding-top: 0.45rem;
  color: var(--mydl-muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.home-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

a.home-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.5rem 0.42rem 0.95rem;
  border: 1px solid var(--mydl-line-strong);
  border-radius: var(--mydl-radius-pill);
  background: transparent;
  color: var(--mydl-ink) !important;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none !important;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
}

a.home-tag-chip:hover,
a.home-tag-chip:focus-visible {
  border-color: var(--mydl-ink);
  background: var(--mydl-ink);
  color: var(--mydl-bg) !important;
}

.home-tag-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 0.4rem;
  border-radius: var(--mydl-radius-pill);
  background: var(--mydl-surface-2);
  color: var(--mydl-muted);
  font-size: 0.74rem;
  font-weight: 600;
}

a.home-tag-chip:hover .home-tag-chip-count {
  background: rgb(255 255 255 / 0.16);
  color: inherit;
}

@keyframes mydl-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 720px) {
  .home-search-page {
    padding: 0 1rem;
  }

  .home-search-card {
    padding-top: clamp(2rem, 7vh, 3.25rem);
  }

  .home-search-title {
    font-size: clamp(2.3rem, 11.5vw, 3.6rem);
  }

  .home-search-description {
    margin-bottom: 0.9rem;
    font-size: 1rem;
  }

  .home-search-input {
    height: 3.3rem;
    font-size: 1rem;
    line-height: 3.3rem;
  }

  .home-search-kbd {
    display: none;
  }

  .home-browse {
    margin-top: 2.25rem;
  }

  .home-result-card {
    padding: 1rem 1.1rem 1.1rem;
  }
}

/* 〜767px: 左右の余白をヘッダー・ノートのページとそろえる（--mydl-gutter は 4. Layout） */
@media (max-width: 767px) {
  .home-search-page {
    padding: 0 var(--mydl-gutter);
  }
}

/* ---------------------------------------------------------
   15. Misc
   --------------------------------------------------------- */

/* Pagefind metadata block (inject_pagefind_meta.py). Never visible. */
.pagefind-term-meta {
  display: none !important;
}

/* MyST previous / next footer cards: hide_footer_links で消しているが、念のため CSS でも隠す */
.myst-footer-links,
a.myst-footer-link,
a.myst-footer-link-prev,
a.myst-footer-link-next {
  display: none !important;
}

/* Footer credit: "Made with MyST" (subtle) */
a[href*="mystmd.org"] {
  opacity: 0.4;
  font-size: 0.85em;
  transition: opacity 0.15s ease;
}

a[href*="mystmd.org"]:hover {
  opacity: 0.75;
}

/* ---------------------------------------------------------
   16. Dark mode: MyST の stone 系の面をこのサイトの色にそろえる
   --------------------------------------------------------- */

html.dark body,
html.dark .bg-white,
html.dark [class*="dark:bg-stone-900"],
html.dark [class*="dark:bg-stone-800"] {
  background-color: var(--mydl-bg) !important;
}

html.dark .myst-top-nav {
  background: color-mix(in srgb, var(--mydl-bg) 84%, transparent) !important;
}

html.dark article .myst-code,
html.dark details.myst-dropdown {
  background: var(--mydl-code-bg) !important;
}

html.dark details.myst-dropdown .myst-code {
  background: var(--mydl-bg) !important;
}

html.dark nav.myst-outline,
html.dark [class*="dark:bg-stone-700"] {
  background-color: transparent !important;
}

/* ---------------------------------------------------------
   17. Motion
   --------------------------------------------------------- */

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