/* User Provided Stylesheet */

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

   デザインの方針: ホームページ（Portfolio, https://onely7.dev/）と同じ見た目にそろえる。
   - 色: 白地に焦げ茶の文字（#443322）、青灰色の地（#eef0f3。ヘッダーや淡い面）、
     くすんだ青のアクセント（#91b4c8。線・印・下線）。
     ダークモードは温かみのある墨色の地に生成り色の文字で、アクセントの青はそのまま
   - 書体: 見出しは Shippori Mincho（明朝）、本文は Zen Kaku Gothic New、
     日付・ラベル・数・コードは IBM Plex Mono（日本語の文字は本文の書体で表示される）
   - 細い区切り線、ピル型のボタンとタグ、小さな英字のラベル（左に短いアクセントの線）
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Shippori+Mincho:wght@600;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap");

/* ---------------------------------------------------------
   1. Design tokens
   （値はホームページの css/style.css のトークンと同じ。括弧内はそちらの名前）
   --------------------------------------------------------- */

:root {
  --mydl-font-sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo,
    system-ui, sans-serif;
  --mydl-font-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  --mydl-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Zen Kaku Gothic New",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", monospace;

  /* Text */
  --mydl-ink: #443322; /* 見出し・太字・ボタン（main） */
  --mydl-text: #443322; /* 本文 */
  --mydl-muted: #686870; /* 補足の文字（text-2） */
  --mydl-faint: #72727a; /* 日付・プレースホルダー（text-3） */

  /* Surfaces & lines */
  --mydl-bg: #ffffff;
  --mydl-surface: #ffffff; /* 地の色の上に置くボタン・検索ボックス（surface） */
  --mydl-surface-2: #eef0f3; /* 青灰色の地: ヘッダー・淡い面（base） */
  --mydl-tint: #f9fafb; /* ごく淡い地: 区切りの帯・表の行（section-tint） */
  --mydl-tag-bg: #eef0f3; /* タグ（tag-bg） */
  --mydl-figure-bg: #ffffff; /* サムネイル画像の地（figure-bg） */
  --mydl-line: rgb(68 51 34 / 0.12);
  --mydl-line-strong: rgb(68 51 34 / 0.22);
  --mydl-glass: rgb(238 240 243 / 0.62); /* ヘッダー: 半透明の地の色＋ぼかし（glass） */
  --mydl-glass-solid: rgb(238 240 243 / 0.96);

  /* Accent */
  --mydl-accent: #91b4c8; /* 線・印・下線・フォーカス（accent） */
  --mydl-accent-ink: #44708a; /* アクセントの色の小さな文字（accent-ink） */
  --mydl-accent-soft: #d7eaf4; /* ホバー・強調の淡い色（accent-soft） */
  --mydl-accent-line: #91b4c8; /* 本文のリンクの下線 */
  --mydl-strong: #443322; /* 塗りのボタン・選択中の項目（strong） */
  --mydl-strong-hover: #2d2217;
  --mydl-on-strong: #ffffff;
  --mydl-on-strong-2: rgb(255 255 255 / 0.75);
  --mydl-selection: rgb(145 180 200 / 0.32);
  --mydl-focus: 0 0 0 2px var(--mydl-accent-ink);
  --mydl-scrim: rgb(68 51 34 / 0.32); /* ダイアログの後ろを暗くする（scrim） */

  /* Code (syntax colours: muted tones of the home page palette, 4.5:1 or more on the code background) */
  --mydl-code-bg: #f6f7f9;
  --mydl-code-inline-bg: rgb(68 51 34 / 0.06);
  --mydl-code-ink: #443322;
  --mydl-hl-comment: #6e6e76;
  --mydl-hl-keyword: #9a4f68;
  --mydl-hl-string: #587346;
  --mydl-hl-number: #935c31;
  --mydl-hl-builtin: #44708a;
  --mydl-hl-title: #2f5d78;
  --mydl-hl-meta: #7a6a58;

  /* Callouts */
  --mydl-note-bg: #ecf4f9;
  --mydl-note-accent: #44708a;
  --mydl-tip-bg: #eff3ea;
  --mydl-tip-accent: #587346;
  --mydl-warning-bg: #f8f0e8;
  --mydl-warning-accent: #935c31;
  --mydl-danger-bg: #f8edf1;
  --mydl-danger-accent: #9a4f68;

  /* Plotly figures (read by the script inside each chart iframe; plain rgba() so that Plotly can parse them) */
  --mydl-plot-bg: #ffffff;
  --mydl-plot-text: #443322;
  --mydl-plot-muted: #686870;
  --mydl-plot-grid: rgba(68, 51, 34, 0.08);
  --mydl-plot-line: rgba(68, 51, 34, 0.28);
  --mydl-plot-legend-bg: rgba(255, 255, 255, 0.92);
  --mydl-plot-legend-border: rgba(68, 51, 34, 0.12);

  /* Shape & depth */
  --mydl-radius-sm: 10px;
  --mydl-radius: 12px;
  --mydl-radius-lg: 16px;
  --mydl-radius-pill: 999px;
  --mydl-shadow-rgb: 68 51 34;
  --mydl-shadow-sm: 0 1px 2px rgb(var(--mydl-shadow-rgb) / 0.05);
  --mydl-shadow: 0 6px 18px rgb(var(--mydl-shadow-rgb) / 0.08);
  --mydl-shadow-lg: 0 12px 28px rgb(var(--mydl-shadow-rgb) / 0.12);
  --mydl-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

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

html.dark {
  --mydl-ink: #e8e1d8;
  --mydl-text: #e8e1d8;
  --mydl-muted: #aaa49c;
  --mydl-faint: #9a948c;

  --mydl-bg: #1c1a18;
  --mydl-surface: #2d2b28;
  --mydl-surface-2: #252320;
  --mydl-tint: #211f1c;
  --mydl-tag-bg: #312e2a;
  --mydl-figure-bg: #f2efea;
  --mydl-line: rgb(232 225 216 / 0.12);
  --mydl-line-strong: rgb(232 225 216 / 0.22);
  --mydl-glass: rgb(37 35 32 / 0.62);
  --mydl-glass-solid: rgb(37 35 32 / 0.96);

  --mydl-accent: #91b4c8;
  --mydl-accent-ink: #a9c8da;
  --mydl-accent-soft: #263641;
  --mydl-accent-line: #91b4c8;
  --mydl-strong: #6b5541;
  --mydl-strong-hover: #7c634d;
  --mydl-on-strong: #f6efe6;
  --mydl-on-strong-2: rgb(246 239 230 / 0.82);
  --mydl-selection: rgb(145 180 200 / 0.3);
  --mydl-scrim: rgb(0 0 0 / 0.5);

  --mydl-code-bg: #252320;
  --mydl-code-inline-bg: rgb(232 225 216 / 0.09);
  --mydl-code-ink: #e8e1d8;
  --mydl-hl-comment: #9a948c;
  --mydl-hl-keyword: #d79fb0;
  --mydl-hl-string: #a8c294;
  --mydl-hl-number: #d99b6b;
  --mydl-hl-builtin: #a9c8da;
  --mydl-hl-title: #91b4c8;
  --mydl-hl-meta: #c9b8a3;

  --mydl-note-bg: rgb(145 180 200 / 0.1);
  --mydl-note-accent: #a9c8da;
  --mydl-tip-bg: rgb(156 183 136 / 0.1);
  --mydl-tip-accent: #a8c294;
  --mydl-warning-bg: rgb(210 158 112 / 0.1);
  --mydl-warning-accent: #d99b6b;
  --mydl-danger-bg: rgb(207 152 169 / 0.1);
  --mydl-danger-accent: #d79fb0;

  --mydl-plot-bg: #1c1a18;
  --mydl-plot-text: #e8e1d8;
  --mydl-plot-muted: #aaa49c;
  --mydl-plot-grid: rgba(232, 225, 216, 0.09);
  --mydl-plot-line: rgba(232, 225, 216, 0.3);
  --mydl-plot-legend-bg: rgba(28, 26, 24, 0.92);
  --mydl-plot-legend-border: rgba(232, 225, 216, 0.16);

  --mydl-shadow-rgb: 0 0 0;
  --mydl-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
  --mydl-shadow: 0 6px 18px rgb(0 0 0 / 0.3);
  --mydl-shadow-lg: 0 12px 28px rgb(0 0 0 / 0.4);

  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: var(--mydl-selection);
}

/* キーボードのフォーカス: アクセントの濃い色の輪（ホームページと同じ） */
:focus-visible {
  outline: 2px solid var(--mydl-accent-ink) !important;
  outline-offset: 3px;
}

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

/* 見出しやカードのタイトルは文節の切れ目で折り返し、最後の行に 1 語だけ残らないようにする（対応ブラウザのみ） */
article h1,
article h2,
article h3,
article h4,
.mydl-tag-card-title,
.home-search-description,
.home-note-title,
.mydl-link-card-title,
.mydl-related-title,
.mydl-result-title,
.mydl-result-section-title {
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* 英語の小さなラベル（日本語版の見出しのあと。mydl-runtime.js） */
.mydl-title-en {
  color: var(--mydl-muted);
  font-family: var(--mydl-font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.22em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* ---------------------------------------------------------
   3. Header
   - ホームページのスマホのヘッダーと同じく、半透明の地の色にぼかしを重ねる
   - ロゴはアイコンだけ（myst.yml の logo / logo_dark）
   - 右側のボタンは枠のない丸いボタン（ホバーで白い丸）
   --------------------------------------------------------- */

.myst-top-nav {
  min-height: 64px !important;
  border-bottom: 0 !important;
  background: var(--mydl-glass) !important;
  box-shadow: 0 1px 0 var(--mydl-line) !important;
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .myst-top-nav {
    background: var(--mydl-glass-solid) !important;
  }
}

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

.myst-top-nav a.myst-home-link img {
  height: 34px !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: 40px !important;
  height: 40px !important;
  margin-left: 2px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--mydl-radius-pill) !important;
  background: transparent !important;
  color: var(--mydl-ink) !important;
  text-decoration: none !important;
  transition:
    background-color 0.2s ease,
    transform 0.15s ease !important;
}

.myst-top-nav .myst-theme-button:active,
.myst-top-nav .mydl-header-icon:active {
  transform: scale(0.92);
}

/* ホバーの効果はマウスのときだけ（タッチではタップのあとに残るので） */
@media (hover: hover) {
  .myst-top-nav .myst-theme-button:hover,
  .myst-top-nav .mydl-header-icon:hover {
    background: var(--mydl-surface) !important;
  }
}

/* テーマ切り替えのボタン: ホームページと同じアイコン（Material Symbols の dark_mode / light_mode、
   Apache License 2.0）と動き。ライトモードでは月（押すとダークモード）、ダークモードでは太陽を表示し、
   切り替えると一方が回りながら小さくなって消え、もう一方が回りながら現れる。MyST のアイコンは隠す */
.myst-top-nav button.myst-theme-button {
  position: relative !important;
}

.myst-top-nav button.myst-theme-button svg {
  display: none !important;
}

.myst-top-nav button.myst-theme-button::before,
.myst-top-nav button.myst-theme-button::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 22px;
  height: 22px;
  margin: auto;
  background-color: currentColor;
  -webkit-mask: var(--mydl-theme-icon) center / contain no-repeat;
  mask: var(--mydl-theme-icon) center / contain no-repeat;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    rotate 0.5s var(--mydl-ease-out),
    scale 0.5s var(--mydl-ease-out);
}

/* 月（ライトモードで表示） */
.myst-top-nav button.myst-theme-button::before {
  --mydl-theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z'/%3E%3C/svg%3E");

  opacity: 1;
  rotate: 0deg;
  scale: 1;
}

/* 太陽（ダークモードで表示） */
.myst-top-nav button.myst-theme-button::after {
  --mydl-theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z'/%3E%3C/svg%3E");

  opacity: 0;
  rotate: 90deg;
  scale: 0.5;
}

html.dark .myst-top-nav button.myst-theme-button::before {
  opacity: 0;
  rotate: -90deg;
  scale: 0.5;
}

html.dark .myst-top-nav button.myst-theme-button::after {
  opacity: 1;
  rotate: 0deg;
  scale: 1;
}

/* テーマを切り替えたときは、ページ全体を 0.3 秒でふわっと切り替える（mydl-runtime.js が View Transitions で行う） */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

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

/* 検索ボタンの文字: 日本語版は「検索」 */
html[lang="ja"] .myst-top-nav .myst-search-text-placeholder {
  font-size: 0 !important;
}

html[lang="ja"] .myst-top-nav .myst-search-text-placeholder::before {
  content: "検索";
  font-size: 13px;
  letter-spacing: 0.08em;
}

/* 検索ボタン（MyST の検索）: 白いピル型（ホームページの検索ボックスと同じ） */
.myst-top-nav .myst-search-bar {
  height: 40px !important;
  border: 0 !important;
  border-radius: var(--mydl-radius-pill) !important;
  background: var(--mydl-surface) !important;
  box-shadow: inset 0 0 0 1px var(--mydl-line-strong) !important;
  color: var(--mydl-faint) !important;
  font-size: 13px !important;
  letter-spacing: 0.04em;
  transition:
    box-shadow 0.2s ease,
    color 0.2s ease !important;
}

@media (hover: hover) {
  .myst-top-nav .myst-search-bar:hover {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mydl-ink) 45%, transparent) !important;
    color: var(--mydl-muted) !important;
  }
}

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

/* ショートカットの表示（Ctrl K / ⌘ K）: 小さなキーの形にして、ピルの丸い右端にかからないよう端から離す
   （MyST のままだとキーが高く、右端に寄っているため、ピルからはみ出して見える） */
.myst-top-nav .myst-search-shortcut {
  gap: 3px !important;
  margin: 0 12px 0 6px !important;
}

.myst-top-nav .myst-search-bar kbd {
  box-sizing: border-box;
  min-width: 20px;
  height: 20px;
  padding: 0 5px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: var(--mydl-surface-2) !important;
  box-shadow: none !important;
  color: var(--mydl-muted) !important;
  font: 500 10px/20px var(--mydl-font-mono) !important;
  letter-spacing: 0.06em;
  text-align: center;
}

/* ⌘ は同じ文字の大きさだと K より小さく見えるので、少し大きくする */
.myst-top-nav .myst-search-bar kbd.show-mac {
  font-size: 12px !important;
}

/* Ctrl と ⌘ の出し分け（mydl-runtime.js の labelSearchButton） */
.myst-top-nav .myst-search-bar kbd[hidden] {
  display: none !important;
}

/* 言語切り替え（JA / EN）: 検索ボタンと同じ白いピル型。今の言語の下に、淡いアクセントの色の「つまみ」を敷く
   （検索結果の選択中の項目と同じ色）。別の言語を押すと、つまみがその言語へすべり、文字の濃さが入れ替わってから
   ページを移る（mydl-runtime.js の ensureLanguageSwitch。つまみの位置は --mydl-lang-index） */
.mydl-lang-switch {
  --mydl-lang-pad: 4px;

  position: relative;
  isolation: isolate;
  display: inline-grid;
  flex: 0 0 auto;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  align-items: stretch;
  box-sizing: border-box;
  height: 40px;
  margin-left: 0.6rem;
  padding: var(--mydl-lang-pad);
  border-radius: var(--mydl-radius-pill);
  background: var(--mydl-surface);
  box-shadow: inset 0 0 0 1px var(--mydl-line-strong);
  transition: box-shadow 0.2s ease;
}

@media (hover: hover) {
  .mydl-lang-switch:hover {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mydl-ink) 45%, transparent);
  }
}

.mydl-lang-thumb {
  position: absolute;
  top: var(--mydl-lang-pad);
  bottom: var(--mydl-lang-pad);
  left: var(--mydl-lang-pad);
  z-index: -1;
  width: calc((100% - 2 * var(--mydl-lang-pad)) / var(--mydl-lang-count, 2));
  border-radius: var(--mydl-radius-pill);
  background: var(--mydl-accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mydl-accent) 55%, transparent);
  translate: calc(var(--mydl-lang-index, 0) * 100%) 0;
  transition:
    translate 0.45s var(--mydl-ease-out),
    scale 0.15s ease;
}

.mydl-lang-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: 0 0.65rem;
  border-radius: var(--mydl-radius-pill);
  color: var(--mydl-faint) !important;
  font-family: var(--mydl-font-mono) !important;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1;
  text-decoration: none !important;
  transition: color 0.3s ease;
}

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

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

/* 押している間は、つまみを少し縮める */
.mydl-lang-switch:has(a.mydl-lang-option:active) .mydl-lang-thumb {
  scale: 0.96;
}

/* 切り替え中: 文字の濃さを、つまみの行き先の言語と入れ替える */
.mydl-lang-switch.is-switching .mydl-lang-option[aria-current="true"] {
  color: var(--mydl-faint) !important;
}

.mydl-lang-switch.is-switching .mydl-lang-option.is-target {
  color: var(--mydl-ink) !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: 30px !important;
  }

  /* 検索ボタンは虫めがねだけの丸いボタンにする */
  .myst-top-nav .myst-search-bar {
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--mydl-ink) !important;
  }

  @media (hover: hover) {
    .myst-top-nav .myst-search-bar:hover {
      background: var(--mydl-surface) !important;
      box-shadow: none !important;
    }
  }

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

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

  .mydl-lang-switch {
    --mydl-lang-pad: 3px;

    height: 36px;
    margin-left: 0.4rem;
  }

  .mydl-lang-option {
    min-width: 1.9rem;
    padding: 0 0.45rem;
    font-size: 11px;
  }
}

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

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

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

  .mydl-lang-switch {
    height: 34px;
  }
}

@media (max-width: 359px) {
  .myst-top-nav a.myst-home-link img {
    height: 26px !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;
  }

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

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

  .mydl-lang-switch {
    --mydl-lang-pad: 2px;

    height: 32px;
    margin-left: 0.25rem;
  }

  .mydl-lang-option {
    min-width: 1.65rem;
    padding: 0 0.32rem;
    font-size: 10.5px;
  }
}

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

  /* （テーマのボタンの ::before / ::after はアイコンに使うので、ここでは広げない） */
  .myst-top-nav .mydl-header-icon::after,
  .myst-top-nav .myst-search-bar::after {
    content: "";
    position: absolute;
    inset: -5px -1px;
  }

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

  /* ロゴ（アイコン）の周りも押せるようにする */
  .myst-top-nav a.myst-home-link::after {
    content: "";
    position: absolute;
    inset: -8px -6px;
  }

  /* タイトルの横のダウンロードボタン（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-family: var(--mydl-font-serif) !important;
  font-size: clamp(1.75rem, 3.3vw, 2.35rem) !important;
  font-weight: 600 !important;
  line-height: 1.42 !important;
  letter-spacing: 0.06em !important;
}

html[lang="en"] .myst-fm-block h1,
html[lang="en"] .myst-fm-block-title {
  line-height: 1.28 !important;
  letter-spacing: 0.01em !important;
}

/* 分類ラベル（ノートの最初のタグ / タグページの "Tag"）: ホームページの About などのラベルと同じ */
.mydl-kicker,
.myst-fm-block-subject {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin: 0 0 1rem !important;
  color: var(--mydl-accent-ink) !important;
  font-family: var(--mydl-font-mono) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  line-height: 1.5 !important;
  text-transform: uppercase !important;
}

.mydl-kicker::before,
.myst-fm-block-subject::before {
  content: "";
  flex: 0 0 auto;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--mydl-accent);
}

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

.mydl-note-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.25rem;
  margin: 1.1rem 0 0 !important;
  color: var(--mydl-faint);
  font-family: var(--mydl-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

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

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

/* 日本語版の日付（例: 2026年6月27日）と読了時間は、ほとんどが日本語なので本文の書体にする
   （等幅の書体には日本語の文字がなく、数字と漢字の幅がそろわない） */
html[lang="ja"] :is(.mydl-note-meta, .mydl-tag-summary, .mydl-tag-card-date, .mydl-related-date, .home-note-meta, .mydl-result-date) {
  font-family: var(--mydl-font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* Tags under the title (inserted by mydl-runtime.js): ホームページの研究分野のタグと同じピル型 */
.mydl-term-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 1.3rem 0 0.25rem;
}

.mydl-term-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: var(--mydl-radius-pill);
  background: var(--mydl-tag-bg);
  color: var(--mydl-ink) !important;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-decoration: none !important;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

a.mydl-term-tag:active {
  transform: scale(0.96);
}

a.mydl-term-tag:focus-visible {
  background: var(--mydl-accent-soft);
}

@media (hover: hover) {
  a.mydl-term-tag:hover {
    background: var(--mydl-accent-soft);
    box-shadow: inset 0 0 0 1px var(--mydl-accent);
  }
}

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

/* ---------------------------------------------------------
   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-ink);
  --tw-prose-bold: var(--mydl-ink);
  --tw-prose-counters: var(--mydl-muted);
  --tw-prose-bullets: var(--mydl-accent);
  --tw-prose-hr: var(--mydl-line);
  --tw-prose-quotes: var(--mydl-text);
  --tw-prose-quote-borders: var(--mydl-accent);
  --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: 700;
}

/* 見出し: 明朝。h2 は細い線で区切り、h3 は見出しのあとに細い線を引く（ホームページの小見出しと同じ） */
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-family: var(--mydl-font-serif) !important;
  font-size: clamp(1.36rem, 2.2vw, 1.625rem) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.08em;
}

article.article h3 {
  margin: 2.75rem 0 0.9rem !important;
  color: var(--mydl-ink) !important;
  font-family: var(--mydl-font-serif) !important;
  font-size: clamp(1.1rem, 1.6vw, 1.19rem) !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.06em;
}

/* h3 のあとの線: 見出しの最後の行の続きから右端まで引き、はみ出した部分は見出しの枠で切る。
   線は行の折り返しでは幅 0 として数える（線のために見出しの行が増えないように。
   最後の行が右端まで埋まっているときは、線は見えない） */
article.article h3:not([class*="mydl-"]) {
  overflow: hidden;
  overflow: clip;
}

article.article h3:not([class*="mydl-"])::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 1px;
  margin-right: calc(-100% - 1.25rem);
  margin-left: 1.25rem;
  background: var(--mydl-line);
  vertical-align: 0.36em;
}

/* 見出しの枠で切られないよう、「¶」リンクのフォーカスの輪は内側に描く */
article.article h3 > a[aria-label="Link to this Section"]:focus-visible {
  outline-offset: -2px;
}

article.article h4 {
  margin: 2.1rem 0 0.6rem !important;
  color: var(--mydl-ink) !important;
  font-family: var(--mydl-font-serif) !important;
  font-size: 1.06rem !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.04em;
}

html[lang="en"] article.article h2 {
  line-height: 1.35 !important;
  letter-spacing: 0.02em;
}

html[lang="en"] article.article :is(h3, h4) {
  line-height: 1.45 !important;
  letter-spacing: 0.01em;
}

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

/* MyST は「¶」を見出しの右外（幅 0 のまま 10px ずらす）に置く。余白の狭い画面では本文の右端から
   はみ出すので、ずらす幅を小さくして見出しの文字のすぐ後ろに置く（幅は 0 のままにして、
   「¶」だけが次の行に送られて見出しの下に空いた行ができないようにする。
   ページの横へのはみ出しは main.article-grid の overflow-x: clip で切る） */
@media (max-width: 767px) {
  article.article :is(h2, h3, h4, h5, h6) > a[aria-label="Link to this Section"] {
    width: 0 !important;
    padding: 0 !important;
    transform: translateX(0.3em) !important;
  }
}

/* 本文のリンク: 文字の色はそのままで、アクセントの色の下線（ホバーで下線が文字の色になる） */
article.article
  a:not(.mydl-term-tag, .mydl-tag-card, .mydl-link-card, .mydl-related-card, [aria-label="Link to this Section"]) {
  color: var(--mydl-ink);
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-style: solid; /* MyST はノートへのリンクを点線にするが、ほかのリンクとそろえる */
  text-decoration-color: var(--mydl-accent-line);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}

article.article
  a:not(.mydl-term-tag, .mydl-tag-card, .mydl-link-card, .mydl-related-card, [aria-label="Link to this Section"]):hover {
  color: var(--mydl-ink);
  text-decoration-color: currentColor;
}

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

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: 400;
  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.1rem 0 0.1rem 1.1rem !important;
  border-left: 2px solid var(--mydl-accent) !important;
  color: var(--mydl-text) !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

article.article blockquote p {
  color: var(--mydl-muted) !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.65;
}

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: 700 !important;
  letter-spacing: 0.04em;
}

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-tint) !important;
}

/* 1 列目（用語）: 日本語の語の途中で折り返さない（列が狭いと「自動微 / 分」のように切れるので、文節で折り返す） */
html[lang="ja"] article.article table:not(.jp-OutputArea-output table) :is(td, th):first-child {
  word-break: auto-phrase;
}

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

/* 長い行のあるコード: pre の幅を最長の行に合わせる。こうしないと、横にスクロールしきったときに
   行の最後の文字が枠の右端に接し、少しだけ長い行は右の余白にはみ出して表示される
   （スクロールの範囲に .myst-code-body の右の余白が含まれないため） */
article .myst-code-body > pre {
  width: max-content;
  min-width: 100%;
}

article .myst-code pre,
article .myst-code code {
  background: transparent !important;
  color: var(--mydl-code-ink);
  font-size: 0.81rem !important;
  line-height: 1.65 !important;
}

/* コードの色分け: テーマの配色（Xcode 風 / ダークは VS 風）を、ホームページの色をくすませた配色にする。
   :root を付けて、テーマの .dark .hljs-… より優先する（色はトークンで、ライト / ダークを切り替える） */
:root article .myst-code .hljs {
  color: var(--mydl-code-ink);
}

:root article .myst-code :is(.hljs-comment, .hljs-quote) {
  color: var(--mydl-hl-comment);
  font-style: normal; /* 日本語のコメントが斜体（字形を傾けただけのもの）にならないように */
}

:root article .myst-code :is(.hljs-keyword, .hljs-selector-tag, .hljs-tag, .hljs-name, .hljs-doctag) {
  color: var(--mydl-hl-keyword);
}

:root article .myst-code :is(.hljs-string, .hljs-regexp, .hljs-template-tag, .hljs-code) {
  color: var(--mydl-hl-string);
}

:root article .myst-code :is(.hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet, .hljs-link) {
  color: var(--mydl-hl-number);
}

:root article .myst-code :is(.hljs-built_in, .hljs-type, .hljs-class .hljs-title, .hljs-title.class_) {
  color: var(--mydl-hl-builtin);
}

:root article .myst-code :is(.hljs-title, .hljs-title.function_, .hljs-section) {
  color: var(--mydl-hl-title);
}

:root article .myst-code :is(.hljs-meta, .hljs-attr, .hljs-attribute, .hljs-selector-class, .hljs-selector-id) {
  color: var(--mydl-hl-meta);
}

:root article .myst-code :is(.hljs-params, .hljs-subst, .hljs-variable, .hljs-template-variable, .hljs-formula) {
  color: var(--mydl-code-ink);
}

/* コピーボタン */
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-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;
  }

  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-bg) !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;
  transition: background-color 0.2s ease;
}

@media (hover: hover) {
  details.myst-dropdown > summary.myst-dropdown-header:hover {
    background: var(--mydl-tint) !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.65rem !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.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s var(--mydl-ease-out);
}

details.myst-dropdown .myst-dropdown-header-title::after {
  content: "コードを表示";
  color: var(--mydl-muted);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  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;
}

/* ---------------------------------------------------------
   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: 700 !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-muted) !important;
  font-family: var(--mydl-font-mono) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
}

nav.myst-outline a {
  color: var(--mydl-muted) !important;
  font-size: 13px !important;
  letter-spacing: 0.03em;
  line-height: 1.65 !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

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: 400 !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 0.2s ease;
}

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

nav.myst-outline a[data-mydl-current] {
  color: var(--mydl-ink) !important;
  font-weight: 700 !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,
  html.dark nav.myst-outline {
    margin: 0 !important;
    padding: 0.6rem 1rem !important;
    border: 1px solid var(--mydl-line) !important;
    border-radius: var(--mydl-radius) !important;
    background: var(--mydl-tint) !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. Cards with a thumbnail (tag pages, Home, "Notes with shared tags")
   - ホームページの論文の一覧と同じ: 枠のない項目で、画像だけを角丸・細い線・やわらかい影で浮かせる
   --------------------------------------------------------- */

.mydl-tag-card-media,
.home-note-thumb,
.mydl-related-thumb {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--mydl-radius);
  background: var(--mydl-figure-bg);
  box-shadow:
    0 0 0 1px var(--mydl-line),
    var(--mydl-shadow);
  transition:
    box-shadow 0.25s ease,
    transform 0.25s var(--mydl-ease-out);
}

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

/* 画像のないノート: タイトルの最初の 2 文字 */
.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-ink);
  font-family: var(--mydl-font-serif);
  font-weight: 600;
}

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

/* ダークモード: 白地の画像は少し暗くする（ホームページの論文の図と同じ） */
html.dark :is(.mydl-tag-card-media, .home-note-thumb, .mydl-related-thumb):not(.is-empty) {
  filter: brightness(0.9);
}

/* カードの文字: 日付・ラベルは等幅の小さな文字、タイトルはやや大きめ */
.home-note-kicker,
.mydl-result-kicker {
  color: var(--mydl-accent-ink);
  font-family: var(--mydl-font-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
}

.mydl-tag-card-date,
.mydl-related-date,
.home-note-meta,
.mydl-result-date {
  color: var(--mydl-faint);
  font-family: var(--mydl-font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* ホバー・フォーカス: 画像が少し浮き、タイトルに下線が付く */
:is(a.mydl-tag-card, a.home-note-card, a.mydl-related-card) :is(.mydl-tag-card-title, .home-note-title, .mydl-related-title) {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s ease;
}

:is(a.mydl-tag-card, a.home-note-card, a.mydl-related-card):focus-visible
  :is(.mydl-tag-card-title, .home-note-title, .mydl-related-title) {
  text-decoration-color: var(--mydl-accent);
}

@media (hover: hover) {
  :is(a.mydl-tag-card, a.home-note-card, a.mydl-related-card):hover
    :is(.mydl-tag-card-title, .home-note-title, .mydl-related-title) {
    text-decoration-color: var(--mydl-accent);
  }

  :is(a.mydl-tag-card, a.home-note-card):hover :is(.mydl-tag-card-media, .home-note-thumb),
  a.mydl-related-card:hover .mydl-related-thumb {
    box-shadow:
      0 0 0 1px var(--mydl-line),
      var(--mydl-shadow-lg);
    transform: translateY(-2px);
  }
}

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

.mydl-tag-summary {
  margin: -1.6rem 0 0 !important;
  color: var(--mydl-faint);
  font-family: var(--mydl-font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.mydl-tag-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 2.25rem 2rem;
  margin: 2.5rem 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;
  color: inherit !important;
  text-decoration: none !important;
}

.mydl-tag-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
}

/* 画像の大きさに関係なく、16:10 の枠に収める（カードの高さをそろえる） */
.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;
}

.mydl-tag-card-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.05rem 0.1rem 0;
}

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

.mydl-tag-card-description {
  display: -webkit-box;
  overflow: hidden;
  color: var(--mydl-muted);
  font-size: 13.5px;
  line-height: 1.75;
  -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;
}

/* ---------------------------------------------------------
   12b. 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-radius: var(--mydl-radius);
  background: var(--mydl-warning-bg);
  color: var(--mydl-text);
  font-size: 0.92rem;
  line-height: 1.65;
}

.mydl-translation-notice-icon {
  display: inline-flex;
  flex: 0 0 auto;
  margin-top: 0.15rem;
  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: 700;
}

.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.35rem;
  align-items: center;
  align-self: flex-start;
  margin-top: 0.25rem;
  color: var(--mydl-ink) !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  text-decoration-color: var(--mydl-warning-accent) !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 3px;
}

article.article a.mydl-translation-notice-link:hover,
a.mydl-translation-notice-link:hover {
  text-decoration-color: currentColor !important;
}

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

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

/* 見出し: ホームページの見出しと同じ（日本語版は英語のラベルを添える）。本文の見出し（article.article h2/h3）より優先する */
article.article .mydl-link-graph-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 16px;
  margin: 0 0 1.75rem !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--mydl-ink) !important;
  font-family: var(--mydl-font-serif) !important;
  font-size: clamp(1.36rem, 2.2vw, 1.625rem) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.12em;
}

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

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

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

/* 小見出し（Backlinks / Outgoing links / 同じタグのノート）: 英字の小さなラベル。本文の見出しのスタイルより優先する */
article.article .mydl-link-group-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 !important;
  color: var(--mydl-accent-ink) !important;
  font-family: var(--mydl-font-mono) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em;
  line-height: 1.5 !important;
  text-transform: uppercase;
}

article.article .mydl-link-group-heading::before {
  content: "";
  flex: 0 0 auto;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--mydl-accent);
}

/* 日本語の小見出し（同じタグのノート）: 等幅の書体には日本語の文字がないので、
   ホームページの日本語のラベル（目次など）と同じく、本文の書体の太字にする */
html[lang="ja"] article.article .mydl-related .mydl-link-group-heading {
  font-family: var(--mydl-font-sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em;
}

.mydl-link-group-description {
  margin: 0.35rem 0 0.75rem !important;
  color: var(--mydl-muted) !important;
  font-size: 13.5px;
  line-height: 1.6;
}

/* Backlinks / Outgoing links: 細い線で区切った一覧（ホームページのニュースの一覧と同じ） */
.mydl-link-list {
  display: grid;
}

a.mydl-link-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  padding: 0.75rem 0.15rem;
  border-top: 1px solid var(--mydl-line);
  color: var(--mydl-ink) !important;
  text-decoration: none !important;
}

.mydl-link-list > a.mydl-link-card:first-child {
  border-top: 0;
}

.mydl-link-card-arrow {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: var(--mydl-radius-pill);
  background: var(--mydl-surface-2);
  color: var(--mydl-accent-ink);
  font-size: 0.9rem;
  transition:
    background-color 0.2s ease,
    transform 0.25s var(--mydl-ease-out);
}

/* タイトルは 2 行まで表示する（狭い画面で 1 行に切ると、肝心の部分が見えなくなる） */
.mydl-link-card-title {
  display: -webkit-box;
  overflow: hidden;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.55;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s ease;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

a.mydl-link-card:focus-visible .mydl-link-card-title {
  text-decoration-color: var(--mydl-accent);
}

@media (hover: hover) {
  a.mydl-link-card:hover .mydl-link-card-title {
    text-decoration-color: var(--mydl-accent);
  }

  a.mydl-link-card:hover .mydl-link-card-arrow {
    background: var(--mydl-accent-soft);
  }
}

.mydl-link-empty {
  margin: 0 !important;
  padding: 0.85rem 1rem;
  border-radius: var(--mydl-radius);
  background: var(--mydl-tint);
  color: var(--mydl-faint) !important;
  font-size: 13.5px;
}

/* 同じタグのノート: 左に小さな画像 */
.mydl-related-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 2rem;
  margin-top: 1rem;
}

a.mydl-related-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  color: inherit !important;
  text-decoration: none !important;
}

.mydl-related-thumb {
  width: 6rem;
  height: 3.75rem;
  padding: 0.35rem;
  border-radius: var(--mydl-radius-sm);
}

.mydl-related-thumb.is-empty {
  font-size: 1.1rem;
}

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

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

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

.mydl-related-tag {
  color: var(--mydl-accent-ink);
  font-family: var(--mydl-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

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

/* ---------------------------------------------------------
   14. 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: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--mydl-radius-pill);
  background: var(--mydl-glass-solid);
  box-shadow:
    0 0 0 1px var(--mydl-line),
    var(--mydl-shadow);
  color: var(--mydl-ink);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

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

.mydl-to-top.is-visible:active {
  transform: scale(0.92);
}

@media (hover: hover) {
  .mydl-to-top:hover {
    background: var(--mydl-strong);
    color: var(--mydl-on-strong);
  }
}

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

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

/* ---------------------------------------------------------
   15. 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 のヘッダーは、下の帯と同じ地の色で塗り、帯とひと続きに見せる
   （Home はヘッダーの下からページが始まり、ヘッダーの後ろを文字が流れないので、半透明にしなくてよい） */
html[data-my-dl-wiki-home="true"] .myst-top-nav {
  background: var(--mydl-surface-2) !important;
  box-shadow: none !important;
}

.home-search-page {
  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);
}

/* 最後のブロック（タグの帯）を画面の下端まで伸ばす（背の高い画面で、帯の下に白地が残らないように） */
.home-search-card {
  display: flex;
  flex-direction: column;
  width: min(1040px, 100%);
  min-height: 100%;
  margin: 0 auto;
}

/* 帯は左右に画面の端まで塗る（border-image の外側の塗り。ページの幅は広げない）。
   帯は .home-hero（ラベル・サイト名・説明）から検索ボックスの下（--mydl-home-band-end）まで */
.home-search-page {
  --mydl-home-band-end: clamp(1.75rem, 5vh, 2.75rem);
}

.home-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(3rem, 10vh, 6rem) 0 0;
  border-image: conic-gradient(var(--mydl-surface-2) 0 0) fill 0 / / 0 100vmax;
  text-align: center;
}

/* ラベル: 中央にそろえるので、左右に短いアクセントの線 */
.home-search-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 1.1rem;
  padding-left: 0.22em;
  color: var(--mydl-accent-ink);
  font-family: var(--mydl-font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.22em;
  line-height: 1.5;
  text-transform: uppercase;
}

.home-search-kicker::before,
.home-search-kicker::after {
  content: "";
  flex: 0 0 auto;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--mydl-accent);
}

.home-search-title {
  max-width: 900px;
  margin: 0 auto;
  padding-left: 0.06em;
  color: var(--mydl-ink);
  font-family: var(--mydl-font-serif);
  font-size: clamp(2.15rem, 5vw, 3.35rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-wrap: balance;
}

.home-search-description {
  max-width: 38rem;
  margin: 1.1rem auto 1.75rem;
  color: var(--mydl-muted);
  font-size: clamp(0.94rem, 1.4vw, 1rem);
  line-height: 1.85;
}

/* 検索ボックスはスクロールしても上端に残る。地の色（ヘッダーと同じ）の全幅の帯の上に置き、
   貼り付いている間（.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-image の外側の塗り。レイアウトは変えない） */
  border-image: conic-gradient(var(--mydl-surface-2) 0 0) fill 0 / / 0 0 var(--mydl-home-band-end);
  background-color: var(--mydl-surface-2);
  box-shadow: 0 1px 0 transparent;
  transition: box-shadow 0.25s ease;
}

.home-search-page.is-stuck .home-search-sticky {
  border-image: none;
  box-shadow:
    0 1px 0 var(--mydl-line),
    0 6px 24px rgb(var(--mydl-shadow-rgb) / 0.06);
}

/* 検索ボックス（Home と検索ダイアログで共通。mydl-runtime.js の searchFieldMarkup） */
.mydl-search-field {
  position: relative;
  width: min(680px, 100%);
  margin: 0 auto;
}

.mydl-search-field .home-search-icon,
.mydl-search-spinner {
  position: absolute;
  top: 50%;
  left: 1.3rem;
  width: 1.1rem;
  height: 1.1rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.mydl-search-field .home-search-icon {
  color: var(--mydl-faint);
  transition: opacity 0.15s ease;
}

/* 検索中: 虫めがねの代わりに小さな回る輪（速い検索ではちらつかないよう、少し待ってから出す）。
   回転（rotate）の中心がずれないよう、上下の中央合わせは transform ではなく translate で行う */
.mydl-search-spinner {
  box-sizing: border-box;
  transform: none;
  translate: 0 -50%;
  border: 2px solid var(--mydl-line-strong);
  border-top-color: var(--mydl-accent-ink);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.mydl-search-field.is-loading .home-search-icon {
  opacity: 0;
  transition-delay: 0.15s;
}

.mydl-search-field.is-loading .mydl-search-spinner {
  opacity: 1;
  transition-delay: 0.15s;
  animation: mydl-spin 0.7s linear infinite;
}

@keyframes mydl-spin {
  to {
    rotate: 360deg;
  }
}

.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-radius: 7px;
  background: var(--mydl-surface-2);
  color: var(--mydl-muted);
  font: 500 0.78rem/1 var(--mydl-font-mono);
  transform: translateY(-50%);
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.mydl-search-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 3.4rem;
  padding: 0 3.4rem 0 3.25rem;
  border: 0;
  border-radius: var(--mydl-radius-pill);
  outline: none;
  background: var(--mydl-surface);
  box-shadow:
    inset 0 0 0 1px var(--mydl-line-strong),
    var(--mydl-shadow);
  color: var(--mydl-ink);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 3.4rem;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow 0.2s ease;
}

.mydl-search-input::-webkit-search-cancel-button,
.mydl-search-input::-webkit-search-decoration {
  display: none;
  -webkit-appearance: none;
}

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

.mydl-search-input:focus,
.mydl-search-input:focus-visible {
  outline: none !important;
  box-shadow:
    inset 0 0 0 2px var(--mydl-accent-ink),
    var(--mydl-shadow) !important;
}

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

/* 入力を消すボタン（ホームページの検索ボックスと同じ） */
.mydl-search-clear {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--mydl-muted);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    scale 0.15s ease;
}

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

.mydl-search-clear svg {
  width: 16px;
  height: 16px;
}

.mydl-search-clear:active {
  scale: 0.9;
}

@media (hover: hover) {
  .mydl-search-clear:hover {
    background: var(--mydl-surface-2);
    color: var(--mydl-ink);
  }
}

/* 検索結果（Home と検索ダイアログで共通。mydl-runtime.js の createSearchUi） */
.home-results-panel {
  display: none;
  width: min(760px, 100%);
  margin: calc(var(--mydl-home-band-end) + 1.5rem) auto 0;
  padding-bottom: 4rem;
  text-align: left;
}

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

.mydl-search-summary {
  min-height: 1.5rem;
  margin: 0 0 0.75rem;
  color: var(--mydl-faint);
  font-family: var(--mydl-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

html[lang="ja"] .mydl-search-summary {
  font-family: var(--mydl-font-sans);
}

.mydl-search-list {
  display: grid;
  gap: 0.85rem;
  transition: opacity 0.2s ease;
}

.mydl-search-list:empty {
  display: none;
}

/* 入力が続いている間は、前の結果を薄くして残す */
.mydl-search-list.is-stale {
  opacity: 0.5;
}

.mydl-result {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.mydl-result-main,
.mydl-result-section {
  color: inherit;
  text-decoration: none !important;
}

/* ↑↓ キーで選択したときに、貼り付いた検索ボックスの下に隠れないように */
.mydl-result-main,
.mydl-result-section,
.mydl-result-tag {
  scroll-margin: 6.5rem 0 1.25rem;
}

.mydl-result-main {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  padding: 1rem 1.25rem 1.05rem;
  border-radius: var(--mydl-radius-lg);
  background: var(--mydl-surface);
  box-shadow: inset 0 0 0 1px var(--mydl-line);
  transition: box-shadow 0.15s ease;
}

.mydl-result-main.is-selected {
  box-shadow:
    inset 0 0 0 2px var(--mydl-accent-ink),
    var(--mydl-shadow);
}

.mydl-result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.9rem;
}

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

.mydl-result-excerpt,
.mydl-result-section-excerpt {
  display: -webkit-box;
  overflow: hidden;
  color: var(--mydl-muted);
  font-size: 13.5px;
  line-height: 1.75;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

:is(.mydl-result-title, .mydl-result-excerpt, .mydl-result-section-title, .mydl-result-section-excerpt) mark {
  padding: 0 0.1em;
  border-radius: 3px;
  background: var(--mydl-accent-soft);
  color: var(--mydl-ink);
}

/* 別名（frontmatter の keywords）だけで一致したとき */
.mydl-result-alias {
  align-self: flex-start;
  margin-top: 0.15rem;
  padding: 2px 10px;
  border-radius: var(--mydl-radius-pill);
  box-shadow: inset 0 0 0 1px var(--mydl-line-strong);
  color: var(--mydl-muted);
  font-size: 12px;
  line-height: 1.6;
}

/* ページの中で一致した見出し: 左に細い線を引いて、ページの下にまとめる */
.mydl-result-sections {
  display: grid;
  gap: 2px;
  margin-left: 1.25rem;
  padding-left: 0.7rem;
  border-left: 2px solid var(--mydl-line);
}

.mydl-result-section {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  padding: 0.5rem 0.8rem 0.55rem;
  border-radius: var(--mydl-radius);
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.mydl-result-section.is-selected {
  background: var(--mydl-accent-soft);
  box-shadow: inset 0 0 0 1px var(--mydl-accent);
}

.mydl-result-section-title {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  color: var(--mydl-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
}

.mydl-result-section-title .mydl-icon {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: var(--mydl-accent-ink);
  transform: translateY(1px);
}

.mydl-result-section-excerpt {
  padding-left: calc(13px + 0.45rem);
  font-size: 13px;
  line-height: 1.7;
}

/* タグページの結果: 小さなチップにまとめる */
.mydl-result-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 0.35rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--mydl-line);
}

.mydl-result-tags-label {
  margin-right: 0.35rem;
  color: var(--mydl-faint);
  font-family: var(--mydl-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html[lang="ja"] .mydl-result-tags-label {
  font-family: var(--mydl-font-sans);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.mydl-result-tag,
.mydl-search-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 13px;
  border: 0;
  border-radius: var(--mydl-radius-pill);
  background: var(--mydl-surface);
  box-shadow: inset 0 0 0 1px var(--mydl-line-strong);
  color: var(--mydl-ink) !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-decoration: none !important;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

.mydl-result-tag-count {
  color: var(--mydl-faint);
  font-family: var(--mydl-font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
}

.mydl-result-tag.is-selected,
.mydl-search-chip:focus-visible {
  background: var(--mydl-accent-soft);
  box-shadow: inset 0 0 0 1px var(--mydl-accent);
}

.mydl-search-chip:active {
  transform: scale(0.96);
}

@media (hover: hover) {
  .mydl-search-chip:hover {
    background: var(--mydl-accent-soft);
    box-shadow: inset 0 0 0 1px var(--mydl-accent);
  }
}

/* さらに表示 */
.mydl-search-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 1.1rem;
}

.mydl-search-more-wrap[hidden] {
  display: none;
}

.mydl-search-more {
  min-height: 38px;
  padding: 7px 18px;
  border: 0;
  border-radius: var(--mydl-radius-pill);
  background: var(--mydl-surface);
  box-shadow: inset 0 0 0 1px var(--mydl-line-strong);
  color: var(--mydl-ink);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.15s ease;
}

.mydl-search-more:active {
  transform: scale(0.97);
}

@media (hover: hover) {
  .mydl-search-more:hover {
    background: var(--mydl-surface-2);
  }
}

/* 0 件のとき: つづりの近い語（もしかして）、タグの一覧、別の言語版で探すリンク */
.mydl-search-extra[hidden] {
  display: none;
}

.mydl-search-empty {
  display: grid;
  gap: 0.95rem;
  padding: 1.35rem 1.4rem 1.45rem;
  border-radius: var(--mydl-radius-lg);
  background: var(--mydl-surface-2);
  color: var(--mydl-muted);
  font-size: 0.92rem;
  line-height: 1.75;
}

.mydl-search-empty-text {
  margin: 0;
}

.mydl-search-suggest,
.mydl-search-empty-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0;
}

/* 語の一部だけが一致したとき（例: optimzer → optim）: 結果の上に「もしかして」 */
.mydl-search-suggest-row {
  margin: -0.15rem 0 0.95rem;
}

.mydl-search-suggest-row[hidden] {
  display: none;
}

.mydl-search-suggest > span,
.mydl-search-empty-label {
  margin-right: 0.3rem;
  color: var(--mydl-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.mydl-search-other {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  justify-self: start;
  color: var(--mydl-ink) !important;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--mydl-accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.mydl-search-other:hover {
  text-decoration-color: currentColor;
}

/* Browse (shown while the search box is empty) */
.home-browse {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  width: 100%;
  margin: calc(var(--mydl-home-band-end) + 3rem) auto 0;
  text-align: left;
  animation: mydl-fade-in 0.25s ease;
}

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

.home-browse-block:last-child {
  flex: 1 0 auto;
}

.home-browse-block {
  padding-bottom: 3.5rem;
}

/* 2 つめのブロック（タグ）はごく淡い地の帯にして、上のブロックと分ける（ホームページの節と同じ） */
.home-browse-block + .home-browse-block {
  padding-top: 3.25rem;
  border-image: conic-gradient(var(--mydl-tint) 0 0) fill 0 / / 0 100vmax;
}

.home-browse-block:last-child {
  padding-bottom: 4.5rem;
}

/* 見出し: ホームページの見出しと同じ（日本語版は英語のラベルを添える） */
.home-browse-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 16px;
  margin: 0 0 1.75rem !important;
  color: var(--mydl-ink) !important;
  font-family: var(--mydl-font-serif);
  font-size: clamp(1.3rem, 2.2vw, 1.5rem) !important;
  font-weight: 600 !important;
  line-height: 1.5;
  letter-spacing: 0.12em;
}

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

a.home-note-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: inherit;
  text-decoration: none !important;
}

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

.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.4rem;
  padding: 1.05rem 0.1rem 0;
}

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

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

.home-note-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: auto;
  padding-top: 0.35rem;
}

/* タグ: ホームページの論文の絞り込みボタンと同じピル型（数は等幅の小さな文字） */
.home-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

a.home-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 15px 6px 16px;
  border-radius: var(--mydl-radius-pill);
  background: var(--mydl-surface);
  box-shadow: inset 0 0 0 1px var(--mydl-line-strong);
  color: var(--mydl-ink) !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-decoration: none !important;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}

a.home-tag-chip:active {
  transform: scale(0.96);
}

a.home-tag-chip:focus-visible {
  background: var(--mydl-surface-2);
}

@media (hover: hover) {
  a.home-tag-chip:hover {
    background: var(--mydl-surface-2);
  }
}

.home-tag-chip-count {
  color: var(--mydl-faint);
  font-family: var(--mydl-font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
}

@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-hero {
    padding-top: clamp(2.25rem, 7vh, 3.25rem);
  }

  .home-search-title {
    font-size: clamp(1.9rem, 8.6vw, 2.6rem);
  }

  .home-search-description {
    margin-bottom: 1.1rem;
    font-size: 0.94rem;
  }

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

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

  .home-browse {
    margin-top: calc(var(--mydl-home-band-end) + 2.25rem);
  }

  .home-browse-block {
    padding-bottom: 3rem;
  }

  .home-browse-block + .home-browse-block {
    padding-top: 2.5rem;
  }

  .mydl-result-main {
    padding: 0.9rem 1rem 1rem;
  }

  .mydl-result-sections {
    margin-left: 0.75rem;
    padding-left: 0.5rem;
  }

  .mydl-result-section {
    padding: 0.45rem 0.65rem 0.5rem;
  }
}

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

/* ---------------------------------------------------------
   15a. Search dialog（どのページからでも開ける検索。mydl-runtime.js の ensureSearchDialog）
   - ヘッダーの検索ボタン・Ctrl / ⌘ K・/ で開く。Home と同じ Pagefind の検索
   - 画面の上寄りに出すパネル（640px 以下は画面いっぱい）。結果の部分だけをスクロールする
   - 下の段にキー操作の案内（キーボードのない端末では出さない）
   --------------------------------------------------------- */

/* 開いている間は後ろのページをスクロールさせない（スクロールバーの幅は残して、ページが横にずれないように） */
html.mydl-search-open {
  overflow: hidden !important;
  scrollbar-gutter: stable;
}

.mydl-search-dialog {
  box-sizing: border-box;
  width: min(680px, calc(100% - 2rem));
  max-width: none;
  max-height: calc(100dvh - 2 * min(10vh, 5.5rem));
  margin: min(10vh, 5.5rem) auto auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--mydl-radius-lg);
  background: var(--mydl-bg);
  box-shadow:
    0 0 0 1px var(--mydl-line),
    0 24px 60px rgb(var(--mydl-shadow-rgb) / 0.22);
  color: var(--mydl-text);
  font-family: var(--mydl-font-sans);
}

.mydl-search-dialog[open] {
  display: flex;
  flex-direction: column;
  animation: mydl-dialog-in 0.22s var(--mydl-ease-out);
}

/* ::backdrop がカスタムプロパティを受け継がない古いブラウザのために、色を直に書いておく */
.mydl-search-dialog::backdrop {
  background: var(--mydl-scrim, rgb(68 51 34 / 0.32));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: mydl-backdrop-in 0.22s ease;
}

html.dark .mydl-search-dialog::backdrop {
  background: var(--mydl-scrim, rgb(0 0 0 / 0.5));
}

@keyframes mydl-dialog-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
  }
}

@keyframes mydl-backdrop-in {
  from {
    opacity: 0;
  }
}

.mydl-search-dialog-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.mydl-search-dialog-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.75rem 0.75rem 0.85rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.mydl-search-dialog.is-active .mydl-search-dialog-head {
  border-bottom-color: var(--mydl-line);
}

.mydl-search-dialog .mydl-search-field {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin: 0;
}

.mydl-search-dialog .mydl-search-input {
  height: 3rem;
  line-height: 3rem;
  padding-left: 3rem;
  background: var(--mydl-surface);
  box-shadow: inset 0 0 0 1px var(--mydl-line-strong);
}

.mydl-search-dialog .mydl-search-input:focus,
.mydl-search-dialog .mydl-search-input:focus-visible {
  box-shadow: inset 0 0 0 2px var(--mydl-accent-ink) !important;
}

.mydl-search-dialog .mydl-search-field .home-search-icon,
.mydl-search-dialog .mydl-search-spinner {
  left: 1.15rem;
}

/* 閉じるボタン: キーボードのある端末では「Esc」、タッチの端末では × */
.mydl-search-dialog-close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.35rem;
  border: 0;
  border-radius: var(--mydl-radius-pill);
  background: transparent;
  color: var(--mydl-muted);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.mydl-search-dialog-close svg {
  display: none;
  width: 20px;
  height: 20px;
}

.mydl-search-dialog-esc {
  display: inline-flex;
  align-items: center;
  height: 1.6rem;
  padding: 0 0.5rem;
  border-radius: 7px;
  background: var(--mydl-surface-2);
  color: var(--mydl-muted);
  font: 500 0.75rem/1 var(--mydl-font-mono);
  letter-spacing: 0.04em;
}

@media (hover: hover) {
  .mydl-search-dialog-close:hover {
    color: var(--mydl-ink);
  }

  .mydl-search-dialog-close:hover .mydl-search-dialog-esc {
    box-shadow: inset 0 0 0 1px var(--mydl-line-strong);
    color: var(--mydl-ink);
  }
}

.mydl-search-dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.85rem 1rem 1.15rem;
  scrollbar-gutter: stable;
}

/* 検索語が空のときは、検索ボックスとキーの案内だけにする */
.mydl-search-dialog:not(.is-active) .mydl-search-dialog-body {
  display: none;
}

.mydl-search-dialog .mydl-search-summary {
  margin-bottom: 0.6rem;
}

.mydl-search-dialog .mydl-search-list {
  gap: 0.6rem;
}

.mydl-search-dialog .mydl-result-main {
  padding: 0.8rem 1rem 0.85rem;
}

.mydl-search-dialog .mydl-result-title {
  font-size: 1rem;
}

.mydl-search-dialog :is(.mydl-result-main, .mydl-result-section, .mydl-result-tag) {
  scroll-margin: 0.6rem 0;
}

.mydl-search-dialog .mydl-search-more-wrap {
  margin-top: 0.85rem;
}

.mydl-search-dialog .mydl-search-empty {
  padding: 1.1rem 1.2rem 1.2rem;
}

/* キー操作の案内 */
.mydl-search-dialog-foot {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 0.35rem 1.15rem;
  padding: 0.6rem 1rem 0.65rem;
  border-top: 1px solid var(--mydl-line);
  background: var(--mydl-tint);
  color: var(--mydl-faint);
  font-size: 12px;
  line-height: 1.5;
}

.mydl-search-dialog-foot > span {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.mydl-search-dialog-foot kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.35rem;
  border-radius: 5px;
  background: var(--mydl-surface);
  box-shadow:
    inset 0 0 0 1px var(--mydl-line-strong),
    0 1px 0 var(--mydl-line);
  color: var(--mydl-muted);
  font: 500 11px/1 var(--mydl-font-mono);
}

.mydl-search-dialog-foot kbd:last-of-type {
  margin-right: 0.25rem;
}

/* ⌘ は同じ文字の大きさだと小さく見えるので、少し大きくする（ヘッダーの検索ボタンと同じ） */
.mydl-search-dialog-foot kbd.mydl-kbd-symbol {
  font-size: 13px;
}

@media (hover: none) and (pointer: coarse) {
  .mydl-search-dialog-foot {
    display: none;
  }

  .mydl-search-dialog-close svg {
    display: block;
  }

  .mydl-search-dialog-esc {
    display: none;
  }
}

/* スマホ: 画面いっぱいに開く */
@media (max-width: 640px) {
  .mydl-search-dialog {
    width: 100%;
    height: 100%;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .mydl-search-dialog[open] {
    animation-name: mydl-fade-in;
  }

  .mydl-search-dialog-head {
    padding: max(0.6rem, env(safe-area-inset-top)) 0.5rem 0.6rem var(--mydl-gutter, 1rem);
    background: var(--mydl-surface-2);
  }

  .mydl-search-dialog.is-active .mydl-search-dialog-head {
    border-bottom-color: var(--mydl-line);
  }

  .mydl-search-dialog .mydl-search-input {
    height: 2.9rem;
    font-size: 16px; /* iOS がフォーカスで拡大しないように */
    line-height: 2.9rem;
  }

  .mydl-search-dialog-body {
    padding: 0.85rem var(--mydl-gutter, 1rem) max(1.25rem, env(safe-area-inset-bottom));
  }

  .mydl-search-dialog-foot {
    display: none;
  }

  .mydl-search-dialog-close svg {
    display: block;
  }

  .mydl-search-dialog-esc {
    display: none;
  }
}

/* ---------------------------------------------------------
   15b. Search highlights + find bar（検索結果から開いたページ。mydl-runtime.js の Search highlights）
   - 本文の検索語を CSS Custom Highlight API で塗る。今の一致は濃い色と下線
   - 画面の下の中央に、件数・前後の一致への移動・強調の解除のバー
   --------------------------------------------------------- */

::highlight(mydl-search) {
  background-color: #d2e5f0;
  color: #2d2217;
}

::highlight(mydl-search-current) {
  background-color: #91b4c8;
  color: #1f1710;
  text-decoration: underline;
  text-decoration-color: #2d2217;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

html.dark ::highlight(mydl-search) {
  background-color: #3a4a55;
  color: #f6efe6;
}

html.dark ::highlight(mydl-search-current) {
  background-color: #a9c8da;
  color: #1c1a18;
  text-decoration-color: #1c1a18;
}

.mydl-findbar {
  position: fixed;
  right: 0;
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  left: 0;
  z-index: 41;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100% - 2rem);
  height: 44px;
  margin: 0 auto;
  padding: 0 0.3rem 0 1rem;
  border-radius: var(--mydl-radius-pill);
  background: var(--mydl-glass-solid);
  box-shadow:
    0 0 0 1px var(--mydl-line),
    var(--mydl-shadow-lg);
  color: var(--mydl-ink);
  font-size: 13px;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
}

.mydl-findbar.is-visible {
  opacity: 1;
  pointer-events: auto;
  animation: mydl-findbar-in 0.3s var(--mydl-ease-out);
}

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

.mydl-findbar-term {
  overflow: hidden;
  max-width: 16rem;
  min-width: 0;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mydl-findbar-count {
  flex: 0 0 auto;
  margin: 0 0.35rem 0 0.7rem;
  color: var(--mydl-muted);
  font-family: var(--mydl-font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

html[lang="ja"] .mydl-findbar-count {
  font-family: var(--mydl-font-sans);
}

.mydl-findbar-count-short {
  display: none;
  font-family: var(--mydl-font-mono);
}

.mydl-findbar-button {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--mydl-ink);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    scale 0.15s ease;
}

.mydl-findbar-button svg {
  width: 18px;
  height: 18px;
}

.mydl-findbar-close {
  margin-left: 0.2rem;
  color: var(--mydl-muted);
}

.mydl-findbar-close svg {
  width: 16px;
  height: 16px;
}

.mydl-findbar-button:active:not(:disabled) {
  scale: 0.9;
}

.mydl-findbar-button:disabled {
  color: var(--mydl-faint);
  cursor: default;
  opacity: 0.45;
}

@media (hover: hover) {
  .mydl-findbar-button:hover:not(:disabled) {
    background: var(--mydl-surface-2);
    color: var(--mydl-ink);
  }
}

/* スマホ: 左端から「上に戻る」ボタンの手前までに置く（ボタンと重ならないように） */
@media (max-width: 720px) {
  .mydl-findbar {
    right: calc(1rem + 42px + 0.6rem);
    bottom: max(1rem, env(safe-area-inset-bottom));
    left: 1rem;
    width: auto;
    max-width: none;
    height: 42px;
    margin: 0;
    padding-left: 0.85rem;
  }

  .mydl-findbar-term {
    flex: 1 1 auto;
    max-width: none;
    min-width: 3em;
  }

  .mydl-findbar-count {
    margin-left: 0.5rem;
  }

  .mydl-findbar-button {
    width: 34px;
    height: 34px;
  }
}

/* 幅の狭いスマホ: 何件目かを短い表記（1 / 163）にして、検索語を表示する幅を残す */
@media (max-width: 420px) {
  .mydl-findbar-count-long {
    display: none;
  }

  .mydl-findbar-count-short {
    display: inline;
  }
}

@media (max-width: 380px) {
  .mydl-findbar {
    padding-left: 0.75rem;
  }

  .mydl-findbar-count {
    margin: 0 0.2rem 0 0.4rem;
  }

  .mydl-findbar-button {
    width: 32px;
    height: 32px;
  }
}

@media print {
  .mydl-findbar {
    display: none !important;
  }
}

/* ---------------------------------------------------------
   15c. MyST search dialog（予備: このサイトのスクリプトが動く前に、ヘッダーの Search / Ctrl K を押したとき）
   - テーマの青（選んでいる候補・一致した語）を、このサイトの色にする
   - :root を付けて、テーマの group-aria-selected:… とダークモードの面の色（17.）より優先する
   --------------------------------------------------------- */

div.fixed.inset-0:has(+ .myst-search-dialog) {
  background: var(--mydl-scrim) !important;
}

:root .myst-search-dialog {
  background: var(--mydl-bg) !important;
  box-shadow:
    0 0 0 1px var(--mydl-line),
    var(--mydl-shadow-lg);
  color: var(--mydl-text) !important;
}

@media (min-width: 640px) {
  :root .myst-search-dialog {
    padding: 1.1rem !important;
    border-radius: var(--mydl-radius-lg) !important;
  }
}

:root .myst-search-dialog .myst-search-input {
  border: 0 !important;
  border-radius: var(--mydl-radius-pill) !important;
  background: var(--mydl-surface) !important;
  box-shadow: inset 0 0 0 1px var(--mydl-line-strong) !important;
  color: var(--mydl-ink) !important;
  letter-spacing: 0.02em;
}

:root .myst-search-dialog .myst-search-input:focus,
:root .myst-search-dialog .myst-search-input:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 2px var(--mydl-accent-ink) !important;
}

:root .myst-search-dialog .myst-search-input::placeholder {
  color: var(--mydl-faint) !important;
}

:root .myst-search-dialog #search-label {
  color: var(--mydl-faint);
}

:root .myst-search-dialog .myst-search-result-item > a {
  border-radius: var(--mydl-radius) !important;
  background: var(--mydl-surface) !important;
  box-shadow: inset 0 0 0 1px var(--mydl-line) !important;
  color: var(--mydl-text) !important;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

:root .myst-search-dialog .myst-search-result-item[aria-selected="true"] > a {
  background: var(--mydl-accent-soft) !important;
  box-shadow: inset 0 0 0 1px var(--mydl-accent) !important;
  color: var(--mydl-ink) !important;
}

:root .myst-search-dialog .myst-search-result-item mark {
  background: transparent !important;
  color: var(--mydl-accent-ink) !important;
  font-weight: 700;
}

:root .myst-search-dialog .myst-search-result-item[aria-selected="true"] mark {
  color: var(--mydl-ink) !important;
  text-decoration: underline;
  text-decoration-color: var(--mydl-accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------
   16. 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"（ホームページのフッターと同じ等幅の小さな文字） */
a[href*="mystmd.org"] {
  color: var(--mydl-faint) !important;
  font-family: var(--mydl-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

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

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

/* テーマはダークモードのコードの地を #1e1e1e で塗るので、コードの枠の地（--mydl-code-bg）を見せる */
html.dark article .hljs {
  background: transparent !important;
}

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

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

/* 右側の目次（1024px 以上）。狭い画面の目次の地は 9. Outline で決める */
@media (min-width: 1024px) {
  html.dark nav.myst-outline {
    background-color: transparent !important;
  }
}

/* ---------------------------------------------------------
   18. Motion
   --------------------------------------------------------- */

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