/* =====================================================================
   Light pixel theme for MkDocs Material
   Palette mirrors med-study-rpg.com/biostats (pixel-tokens.css).
   Pixel font (Cubic 11) only on chrome + h1-h3; body/table/code stay readable.
   Cubic 11 renders crisp only at 11px multiples (11 / 22 / 33px).
   ===================================================================== */

/* Cubic 11 v1.500 — SIL OFL-1.1, https://github.com/ACh-K/Cubic-11
   License shipped alongside: ../fonts/Cubic_11_OFL.txt
   url() is relative to this CSS file so it works under the /ml/ sub-path. */
@font-face {
  font-family: "Cubic 11";
  src: url("../fonts/Cubic_11.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: normal;
}

/* ---------- tokens ---------- */
:root,
[data-md-color-scheme="default"] {
  --bg-cream: #f4ecd8;
  --bg-cream-deep: #eadfc4;
  --bg-dark: #2d1f1a;
  --bg-paper: #fff8ec;
  --paper: #fffdf7;
  --paper-tint: #f8f2e2;
  --paper-soft: #faf4e6;
  --paper-inset: #fff8e8;
  --frame-dark: #5a3f29;
  --frame-light: #8c6d4a;
  --line-strong: #c9ad7f;
  --line-mid: #d8c39a;
  --line-soft: #e2d4b0;
  --ink-strong: #2a2118;
  --ink-heading: #4a3a22;
  --ink-body: #5a4a33;
  --ink-muted: #6e5436;   /* darkened from biostats #8c6d4a to pass AA on cream */
  --ink-label: #7a5410;
  --accent-gold: #d4a04d;
  --accent-gold-soft: #f3e2bf;
  --accent-leaf: #6a8c3f;
  --accent-leaf-ink: #3a5e1a;
  --accent-leaf-soft: #dff0d0;
  --accent-rose: #c44d4d;
  --rose-ink: #9e3434;
  --rose-bg: #f8e6e2;
  --accent-sky: #6a9bc4;
  --ok-ink: #4c6a2b;
  --ok-bg: #eef4e2;
  --warn-ink: #8a4f22;    /* darkened from #a8632f for AA */
  --warn-bg: #f8eee2;
  --study-ink: #33506f;
  --study-border: #4d6a8c;
  --study-bg: #e7eef6;
  --violet: #7a4d99;
  --violet-bg: #f1e9f6;

  --font-pixel: "Cubic 11", "Noto Sans TC", "PingFang TC", sans-serif;
  /* UI chrome (nav, TOC, tables, demos, footer) stays sans; long-form reading
     text uses the sister sites' serif stack (--font-legible). */
  --font-ui: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-legible: "Noto Serif TC", "Source Han Serif TC", "PingFang TC", "Microsoft JhengHei", Georgia, serif;
  --font-body: var(--font-legible);
  --md-text-font: "Noto Sans TC";

  /* Material tokens */
  --md-default-bg-color: var(--bg-cream);
  --md-default-fg-color: var(--ink-strong);
  --md-default-fg-color--light: var(--ink-muted);
  --md-default-fg-color--lighter: var(--line-strong);
  --md-default-fg-color--lightest: var(--line-soft);
  --md-typeset-color: var(--ink-body);
  --md-typeset-a-color: var(--study-ink);
  --md-primary-fg-color: var(--bg-paper);
  --md-primary-fg-color--light: var(--paper);
  --md-primary-fg-color--dark: var(--paper-tint);
  --md-primary-bg-color: var(--frame-dark);
  --md-primary-bg-color--light: var(--ink-muted);
  --md-accent-fg-color: var(--accent-leaf-ink);
  --md-accent-fg-color--transparent: #d4a04d26;
  --md-accent-bg-color: var(--bg-paper);
  --md-code-bg-color: var(--paper-inset);
  --md-code-fg-color: var(--ink-strong);
  --md-code-hl-color: var(--accent-gold);
  --md-code-hl-color--light: #d4a04d33;
  --md-typeset-mark-color: #d4a04d59;
  --md-typeset-table-color: var(--line-mid);
  --md-typeset-table-color--light: var(--paper-tint);
  --md-footer-bg-color: var(--paper-tint);
  --md-footer-bg-color--dark: var(--bg-cream);
  --md-footer-fg-color: var(--ink-heading);
  --md-footer-fg-color--light: var(--ink-muted);
  --md-footer-fg-color--lighter: var(--ink-muted);
  --md-shadow-z1: none;
  --md-shadow-z2: 3px 3px 0 var(--frame-light);
  --md-shadow-z3: 3px 3px 0 var(--frame-light);
}

/* Mermaid: Material defines these on `:root > *` */
:root > * {
  --md-mermaid-node-bg-color: var(--bg-paper);
  --md-mermaid-node-fg-color: var(--frame-dark);
  --md-mermaid-edge-color: var(--frame-dark);
  --md-mermaid-label-bg-color: var(--bg-cream);
  --md-mermaid-label-fg-color: var(--ink-strong);
  --md-mermaid-font-family: var(--font-ui);
}

/* 4px 1-bit dither, same as LocalLLMRPG body (no gradients in this theme) */
body {
  background-color: var(--bg-cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='1' height='1' fill='%23d9caa6'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23d9caa6'/%3E%3C/svg%3E");
}

/* ---------- pixel font targets ---------- */
.md-nav__title,
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset .md-button,
.md-typeset .admonition-title,
.md-typeset summary,
.md-typeset .tabbed-labels > label,
.md-typeset .grid.cards > ul > li > p:first-child strong,
.md-footer__title,
.md-footer__direction {
  font-family: var(--font-pixel);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
  font-weight: normal;
  letter-spacing: 0;
}

/* ---------- body text ---------- */
.md-typeset {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.85;
  color: var(--ink-body);
}
/* Reading column: 17px serif (sister .prose); admonition text up from
   Material's 12.8px, which is too thin in a serif face. */
.md-content .md-typeset { font-size: .85rem; }
/* keep code blocks at Material's original size (pre 16px -> code 13.6px) despite the larger body */
.md-content .md-typeset pre { font-size: .8rem; }
.md-content .md-typeset .admonition,
.md-content .md-typeset details { font-size: .72rem; }
/* UI-ish blocks keep the sans face (sister sites use --font-ui for tables). */
.md-typeset table:not([class]),
.md-typeset .demo-box,
.md-typeset .chapter-meta,
.md-footer-meta.md-typeset { font-family: var(--font-ui); }
.md-typeset strong { color: var(--ink-strong); }
.md-typeset a { text-underline-offset: 2px; }
.md-typeset a:hover { color: var(--accent-leaf-ink); text-decoration: underline; }

/* ---------- headings (11px multiples) ---------- */
.md-typeset h1 {
  font-size: 33px;
  line-height: 1.34;
  color: var(--ink-heading);
  margin: 0 0 1.1rem;
}
.md-typeset h2 {
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-heading);
  border-bottom: 4px solid var(--frame-light);
  padding-bottom: 6px;
  margin-top: 2.2em;
}
.md-typeset h2::before {
  content: "◆ ";
  color: var(--accent-gold);
}
.md-typeset h3 {
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-label);
}
.md-typeset h4, .md-typeset h5, .md-typeset h6 { color: var(--ink-heading); font-weight: 700; }
.md-typeset .headerlink { color: var(--line-strong); }
.md-typeset .headerlink:hover, .md-typeset :target > .headerlink { color: var(--accent-leaf-ink); }

/* ---------- header ----------
   Mirrors the sister Astro site LocalLLMRPG (.site-header in
   src/styles/global.css + src/components/Search.astro) so switching
   ML/DL <-> LLM does not make the chrome jump:
   #2d1f1a ground, 4px wood rule, sticky, 1088px inner, 8px 16px padding,
   24px pixel icon + 16px gold site name, 12px switch, 16px flat nav with
   "▶" on the current section, 200x40 paper search box (44x44 icon on phones).
   Material keeps working through .md-header (sticky offset), the
   label[for=__drawer] (chapter drawer) and label[for=__search] + .md-search.
   Grid slots:
     <370       [title ............ search] / [switch ...... drawer] / [nav]
     370-767    [title ..... switch][search] / [nav ........... drawer]
     768-1219   [title][switch] ..... [search] / [nav ........... drawer]
     >=1220     [title][switch] ........ [nav][search]   (drawer not needed)
   LLM goes single-row at 1024; ML waits until 1220 because below that the
   chapter drawer button needs a slot.
   Contrast on #2d1f1a: cream 13.5:1, gold 6.8:1 (AA). */
.md-header.site-header {
  background: var(--bg-dark);
  color: var(--bg-cream);
  border-bottom: 4px solid var(--frame-dark);
  box-shadow: none;
  font-family: var(--font-pixel);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
  font-weight: normal;
  letter-spacing: 0;
  line-height: 1.6;
}
.site-header__inner {
  max-width: 1088px;
  margin: 0 auto;
  padding: 8px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "title switch search"
    "nav   nav    drawer";
  align-items: center;
  gap: 8px 16px;
}
.site-header :focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 1px; }

.site-title {
  grid-area: title;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  color: var(--accent-gold);
  text-decoration: none;
  font-size: 16px;
  white-space: nowrap;
}
.site-title:hover,
.site-title:focus { color: var(--bg-cream); }
.site-title img { flex: none; width: 24px; height: 24px; image-rendering: pixelated; }
.site-title__text { overflow: hidden; }

.site-switch { grid-area: switch; }

.site-nav {
  grid-area: nav;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  min-width: 0;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--bg-cream);
  text-decoration: none;
  font-size: 16px;
  white-space: nowrap;
}
.site-nav a[aria-current="page"],
.site-nav a:hover,
.site-nav a:focus { color: var(--accent-gold); }
.site-nav a[aria-current="page"]::before {
  content: "▶";
  font-size: 12px;
  margin-right: 4px;
}

/* Square 44px icon buttons (LLM .search__toggle look) */
.site-drawer,
.site-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--bg-cream);
  border: 2px solid var(--frame-light);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.site-drawer:hover,
.site-search-toggle:hover { color: var(--accent-gold); }
.site-drawer svg,
.site-search-toggle svg { flex: none; }
.site-drawer { grid-area: drawer; justify-self: end; }
.site-search-toggle { grid-area: search; justify-self: end; }
.site-search-toggle__text { display: none; }
.site-header .md-search { grid-area: search; justify-self: end; }

/* LLM rule: <=400px the site name drops to 14px and the icon hides */
@media screen and (max-width: 400px) {
  .site-title { font-size: 14px; }
  .site-title img { display: none; }
}
/* Narrowest phones (<370: 16+152 name+16+110 switch+16+44 search+16 > width):
   keep the full site name on row 1, the switch moves to row 2 */
@media screen and (max-width: 369px) {
  .site-header__inner {
    grid-template-areas:
      "title  title search"
      "switch .     drawer"
      "nav    nav   nav";
  }
  .site-switch { justify-self: start; }
}
/* Phones: the title link already goes home, so the 首頁 item yields its slot
   to the chapter-drawer button (keeps the nav on one row like LLM). */
@media screen and (max-width: 767px) {
  .site-nav__home { display: none !important; }
}
@media screen and (min-width: 768px) {
  .site-header__inner {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "title switch . search"
      "nav   nav    nav drawer";
  }
  /* Search placeholder box that opens Material's full-screen search (<960) */
  .site-search-toggle {
    width: 200px;
    height: 40px;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 10px;
    background: var(--paper);
    color: var(--ink-muted);
    box-shadow: 2px 2px 0 var(--bg-dark);
  }
  .site-search-toggle:hover { color: var(--ink-strong); }
  .site-search-toggle svg { width: 16px; height: 16px; }
  .site-search-toggle__text { display: inline; font-size: 16px; }
}
/* >=960: Material's inline search form takes over the search slot */
@media screen and (min-width: 60em) {
  .site-search-toggle { display: none; }
  .site-header .md-search { padding: 0; }
  .site-header .md-search__inner,
  [data-md-toggle=search]:checked ~ .md-header.site-header .md-search__inner {
    float: none;
    width: 200px;
    padding: 0;
    transition: none;
  }
  .site-header .md-search__form,
  .site-header .md-search__form:hover,
  [data-md-toggle=search]:checked ~ .md-header.site-header .md-search__form {
    height: 40px;
    background: var(--paper);
    color: var(--ink-strong);
    border: 2px solid var(--frame-light);
    border-radius: 0;
    box-shadow: 2px 2px 0 var(--bg-dark);
  }
  .site-header .md-search__input,
  .site-header .md-search__suggest {
    padding-left: 34px;
    padding-right: 30px;
    font-family: var(--font-pixel);
    font-size: 16px;
  }
  .site-header .md-search__input { color: var(--ink-strong); }
  .site-header .md-search__input::placeholder { color: var(--ink-muted); }
  [data-md-toggle=search]:checked ~ .md-header.site-header .md-search__input::placeholder { color: transparent; }
  .site-header .md-search__input + .md-search__icon,
  [data-md-toggle=search]:checked ~ .md-header.site-header .md-search__input + .md-search__icon {
    color: var(--ink-muted);
  }
  .site-header .md-search__icon[for=__search] { left: 8px; top: 8px; width: 20px; height: 20px; }
  .site-header .md-search__options { top: 6px; right: 6px; }
  /* Results drop down under the box, right-aligned, like LLM's .search__panel */
  .site-header .md-search__output {
    top: 46px;
    left: auto;
    right: 0;
    width: min(520px, calc(100vw - 32px));
  }
  .site-header .md-search__scrollwrap { width: 100%; }
  [data-md-toggle=search]:checked ~ .md-header.site-header .md-search__output {
    border: 4px solid var(--frame-light);
    outline: 2px solid var(--frame-dark);
    box-shadow: 4px 4px 0 var(--bg-dark);
  }
}
@media screen and (min-width: 76.25em) {
  .site-drawer { display: none; }
  .site-header__inner {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "title switch . nav search";
  }
  .site-nav { flex-wrap: nowrap; }
}

/* Sticky offsets follow the taller (wrapped) header below 1220px */
.md-sidebar { top: 116px; }
.md-typeset :target { --md-scroll-margin: 132px; }
@media screen and (max-width: 369px) {
  .md-typeset :target { --md-scroll-margin: 184px; }
}
@media screen and (min-width: 76.25em) {
  .md-sidebar { top: 64px; }
  .md-typeset :target { --md-scroll-margin: 80px; }
}

/* Content starts 24px under the header, as LLM's <main> padding does */
.md-main__inner { margin-top: 24px; }
.md-content__inner { padding-top: 0; }
.md-content__inner::before { height: 0; }

.md-search__input::placeholder,
.md-search__input ~ .md-search__icon { color: var(--ink-muted); }
.md-search__scrollwrap { background: var(--paper); }
.md-search-result__meta { background: var(--paper-tint); color: var(--ink-muted); }
.md-search-result mark { background: var(--accent-gold-soft); color: var(--ink-strong); text-decoration: underline; }
.md-search-result__link:hover,
.md-search-result__link:focus,
.md-search-result__more > summary:hover > div { background: var(--accent-gold-soft); }

/* ---------- sidebar nav / TOC ---------- */
.md-nav__title { color: var(--ink-heading); font-size: 11px; }
.md-nav__item--section > .md-nav__link {
  font-family: var(--font-pixel);
  -webkit-font-smoothing: none;
  font-size: 11px;
  font-weight: normal;
  color: var(--ink-label);
}
.md-nav__link { color: var(--ink-body); }
.md-nav__link:hover, .md-nav__link:focus { color: var(--accent-leaf-ink); }
.md-nav__link--active,
.md-nav__item .md-nav__link--active { color: var(--study-ink); font-weight: 700; }
/* mobile drawer header (uses primary colors) */
.md-nav--primary .md-nav__title[for="__drawer"] {
  background: var(--bg-dark);
  color: var(--accent-gold);
  border-bottom: 4px solid var(--frame-dark);
  font-size: 22px;
}

@media screen and (max-width: 76.234375em) {
  .md-nav--primary .md-nav__title { font-size: 22px; background: var(--paper-tint); color: var(--ink-heading); }
  .md-nav--primary .md-nav__title[for="__drawer"] { background: var(--bg-dark); color: var(--accent-gold); }
}

/* ---------- code ---------- */
.md-typeset code {
  background: var(--paper-inset);
  color: var(--ink-strong);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
}
.md-typeset pre > code { border: 0; }
.md-typeset div.highlight {
  border: 2px solid var(--frame-dark);
  border-radius: 4px;
  box-shadow: 3px 3px 0 var(--frame-light);
  margin: 1em 3px 1.2em 0;
}
.md-typeset div.highlight pre { margin: 0; }
.md-typeset .highlight .c, .md-typeset .highlight .c1,
.md-typeset .highlight .cm, .md-typeset .highlight .ch { color: #6e5f4a; }
.md-clipboard { color: var(--ink-muted); }
.md-clipboard:hover { color: var(--accent-leaf-ink); }

/* ---------- tables ---------- */
.md-typeset table:not([class]) {
  border: 2px solid var(--frame-dark);
  border-radius: 4px;
  box-shadow: 3px 3px 0 var(--frame-light);
  background: var(--paper);
}
.md-typeset table:not([class]) th {
  background: var(--paper-tint);
  color: var(--ink-heading);
  border-bottom: 2px solid var(--line-strong);
}
.md-typeset table:not([class]) tr:hover { background: var(--paper-inset); box-shadow: none; }
.md-typeset__scrollwrap { margin-right: 0; padding: 0 3px 3px 0; }

/* ---------- admonitions / details ---------- */
.md-typeset .admonition,
.md-typeset details {
  --adm-ink: var(--frame-dark);
  --adm-bg: var(--paper-tint);
  border: 2px solid var(--frame-dark);
  border-left: 6px solid var(--adm-ink);
  border-radius: 4px;
  box-shadow: 3px 3px 0 var(--frame-light);
  background: var(--paper-soft);
  color: var(--ink-body);
}
/* Material's per-type rules (.admonition.note etc.) out-specify the base rule */
.md-typeset .admonition[class],
.md-typeset details[class] {
  border-color: var(--frame-dark);
  border-left-color: var(--adm-ink);
}
.md-typeset .admonition:focus-within,
.md-typeset details:focus-within { box-shadow: 3px 3px 0 var(--frame-light); }
.md-typeset .admonition-title,
.md-typeset summary {
  font-size: 11px;
  line-height: 22px;
  color: var(--adm-ink);
  background: var(--adm-bg) !important;
  border-left: 0;
  border-bottom: 1px solid var(--line-mid);
}
.md-typeset .admonition-title::before,
.md-typeset summary::before { background-color: var(--adm-ink) !important; }
.md-typeset summary::after { color: var(--adm-ink); }
.md-typeset details:not([open]) > summary { border-bottom: 0; }

.md-typeset .note, .md-typeset .abstract, .md-typeset .summary, .md-typeset .tldr { --adm-ink: var(--study-ink); --adm-bg: var(--study-bg); }
.md-typeset .info, .md-typeset .todo { --adm-ink: #2f5f6b; --adm-bg: #e3f0f0; }
.md-typeset .tip, .md-typeset .hint, .md-typeset .important,
.md-typeset .success, .md-typeset .check, .md-typeset .done { --adm-ink: var(--ok-ink); --adm-bg: var(--ok-bg); }
.md-typeset .question, .md-typeset .help, .md-typeset .faq { --adm-ink: var(--ink-label); --adm-bg: var(--accent-gold-soft); }
.md-typeset .warning, .md-typeset .caution, .md-typeset .attention { --adm-ink: var(--warn-ink); --adm-bg: var(--warn-bg); }
.md-typeset .failure, .md-typeset .fail, .md-typeset .missing,
.md-typeset .danger, .md-typeset .error, .md-typeset .bug { --adm-ink: var(--rose-ink); --adm-bg: var(--rose-bg); }
.md-typeset .example { --adm-ink: var(--violet); --adm-bg: var(--violet-bg); }
.md-typeset .quote, .md-typeset .cite { --adm-ink: var(--ink-muted); --adm-bg: var(--paper-tint); }

/* ---------- content tabs ---------- */
.md-typeset .tabbed-set {
  border: 2px solid var(--frame-dark);
  border-radius: 4px;
  box-shadow: 3px 3px 0 var(--frame-light);
  background: var(--paper);
  padding: 0 .8rem .4rem;
}
.md-typeset .tabbed-labels { box-shadow: 0 -2px 0 var(--line-mid) inset; }
.md-typeset .tabbed-labels > label { font-size: 11px; color: var(--ink-muted); }
.md-typeset .tabbed-labels > label:hover { color: var(--accent-leaf-ink); }
.js .md-typeset .tabbed-labels::before { background: var(--accent-gold); height: 3px; }

/* ---------- buttons ---------- */
.md-typeset .md-button {
  font-size: 11px;
  line-height: 22px;
  padding: 6px 16px;
  color: var(--frame-dark);
  background: var(--bg-paper);
  border: 2px solid var(--frame-dark);
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--frame-dark);
  transition: transform 80ms steps(2, end), box-shadow 80ms steps(2, end);
}
.md-typeset .md-button--primary {
  background: var(--frame-dark);
  color: var(--bg-paper);
  border-color: var(--frame-dark);
  box-shadow: 2px 2px 0 var(--frame-light);
}
.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  background: var(--accent-gold);
  color: var(--ink-strong);
  border-color: var(--frame-dark);
  box-shadow: 3px 3px 0 var(--frame-dark);
  transform: translate(-1px, -1px);
  text-decoration: none;
}
.md-typeset .md-button:active { box-shadow: 1px 1px 0 var(--frame-dark); transform: translate(1px, 1px); }
.md-typeset .md-button .twemoji { vertical-align: -3px; }

/* back-to-top */
.md-top {
  background: var(--bg-paper);
  color: var(--frame-dark);
  border: 2px solid var(--frame-dark);
  border-radius: 4px;
  font-family: var(--font-pixel);
  -webkit-font-smoothing: none;
  font-size: 11px;
}
.md-top:hover, .md-top:focus { background: var(--accent-gold); color: var(--ink-strong); }

/* ---------- footer ---------- */
.md-footer { border-top: 2px solid var(--line-strong); }
.md-footer__link:hover, .md-footer__link:focus { opacity: 1; color: var(--accent-leaf-ink); }
.md-footer__title { font-size: 11px; }
.md-footer__direction { font-size: 11px; opacity: 1; color: var(--ink-muted); }
.md-footer__button { color: var(--frame-dark); }
/* footer meta = sister-site footer (LocalLLMRPG .site-footer). Background is
   --bg-dark rather than wood: gold links on #5a3f29 are only 4.1:1 (< AA). */
.md-footer-meta {
  background: var(--bg-dark);
  border-top: 4px solid var(--frame-dark);
}
.md-footer-meta, .md-copyright, .md-copyright__highlight { color: var(--bg-cream); }
.md-copyright { width: 100%; margin: .6rem 0; font-size: .7rem; line-height: 1.7; }
.site-footer-meta__line { margin: 0 0 .25rem; }
.site-footer-meta__credit { opacity: .85; }
html .md-footer-meta.md-typeset a { color: var(--accent-gold); text-decoration: underline; text-underline-offset: 2px; }
html .md-footer-meta.md-typeset a:hover,
html .md-footer-meta.md-typeset a:focus { color: var(--bg-cream); }

/* ---------- chapter images (white PNG on cream) ---------- */
.md-typeset img[src*="assets/img/"] {
  background: #fff;
  border: 2px solid var(--line-strong);
  border-radius: 3px;
  box-shadow: 3px 3px 0 var(--line-mid);
  padding: 4px;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}
img.pixel { image-rendering: pixelated; image-rendering: -moz-crisp-edges; }

/* ---------- math / mermaid ---------- */
.md-typeset .katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.md-typeset .katex { color: var(--ink-strong); }
.md-typeset .mermaid {
  background: var(--paper);
  border: 2px solid var(--line-strong);
  border-radius: 4px;
  padding: .6rem;
  overflow-x: auto;
}

/* ---------- misc ---------- */
.md-typeset mark { color: var(--ink-strong); }
.md-typeset hr { border-bottom: 2px dashed var(--line-strong); }
.md-typeset blockquote {
  margin: 1.2em 3px 1.2em 0;
  padding: .6rem .9rem;
  background: var(--paper);
  border-left: 8px solid var(--accent-gold);
  box-shadow: 2px 2px 0 var(--bg-dark);
  color: var(--ink-body);
}
.md-typeset blockquote > :first-child { margin-top: 0; }
.md-typeset blockquote > :last-child { margin-bottom: 0; }
.md-typeset kbd { background: var(--paper); color: var(--ink-strong); box-shadow: 0 0 0 1px var(--frame-dark), 0 2px 0 var(--frame-light); }
:focus-visible { outline: 2px solid var(--study-border); outline-offset: 2px; }
::selection { background: var(--accent-gold-soft); color: var(--ink-strong); }

/* Chapter hero meta line */
.chapter-meta { color: var(--ink-muted); font-size: .8rem; margin-top: -.6rem; }

/* Colab / download buttons row */
.nb-links { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0 1.2rem; }
.nb-links a { margin: 0 !important; }

/* Interactive demo container */
.demo-box {
  border: 2px solid var(--frame-dark);
  border-radius: 4px;
  box-shadow: 3px 3px 0 var(--frame-light);
  padding: .8rem;
  margin: 1rem 3px 1.2rem 0;
  background: var(--paper);
  max-width: 100%;
  overflow-x: auto;
}
.demo-box canvas, .demo-box svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.demo-box .controls { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; font-size: .75rem; margin-top: .5rem; color: var(--ink-body); }
.demo-box input[type=range] { width: 160px; max-width: 100%; accent-color: var(--frame-dark); }
.demo-box button, .demo-box select {
  font-family: var(--font-pixel);
  -webkit-font-smoothing: none;
  font-size: 11px;
  color: var(--frame-dark);
  background: var(--bg-paper);
  border: 2px solid var(--frame-dark);
  border-radius: 3px;
  box-shadow: 2px 2px 0 var(--frame-dark);
  padding: 3px 8px;
  cursor: pointer;
}
.demo-box button:hover { background: var(--accent-gold); color: var(--ink-strong); }

/* Chapter cards on home page */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  background: var(--paper);
  border: 4px solid var(--frame-light);
  outline: 2px solid var(--frame-dark);
  outline-offset: -2px;
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--bg-dark);
  transition: transform 80ms steps(2, end), box-shadow 80ms steps(2, end);
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover,
.md-typeset .grid.cards > ul > li:focus-within {
  border-color: var(--frame-light);
  box-shadow: 5px 5px 0 var(--accent-gold);
  transform: translate(-1px, -1px);
}
.md-typeset .grid.cards > ul > li > hr { border-bottom: 2px dashed var(--line-mid); }
.md-typeset .grid.cards > ul > li > p:first-child strong { font-size: 22px; line-height: 1.4; }
.md-typeset .grid.cards > ul > li > p:first-child a { color: var(--ink-heading); }
.md-typeset .grid.cards .twemoji { color: var(--ink-label); }

/* ---------- home hero: sister-site .dialogue box ---------- */
.md-typeset .dialogue {
  position: relative;
  margin: 0 4px 1.2rem 0;
  padding: 16px 16px 24px;
  background: var(--bg-dark);
  color: var(--bg-cream);
  border: 4px solid var(--frame-light);
  box-shadow: 4px 4px 0 var(--bg-dark);
  line-height: 1.8;
}
.md-typeset .dialogue p { margin: 0 0 .5em; color: var(--bg-cream); }
.md-typeset .dialogue p:last-child { margin-bottom: 0; }
.md-typeset .dialogue::after {
  content: "▼";
  position: absolute;
  right: 12px;
  bottom: 4px;
  font-size: 11px;
  color: var(--accent-gold);
  animation: dialogue-blink 1s steps(2, start) infinite;
}
@keyframes dialogue-blink { to { visibility: hidden; } }
.md-typeset .dialogue .hero-wild {
  font-family: var(--font-pixel);
  -webkit-font-smoothing: none;
  font-size: 22px;
  line-height: 1.5;
  text-shadow: var(--pixel-bold);
  letter-spacing: .5px;
  margin-bottom: .4em;
}
.md-typeset .dialogue .hero-boss { color: var(--accent-gold); }
.md-typeset .dialogue .hero-sub { font-size: .7rem; color: #d9caa6; }
.md-typeset .hero-actions { margin: 0 0 1.6rem; }
/* md_in_html wraps the two links in one <p>; flex that paragraph */
.md-typeset .hero-actions > p { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; }
.md-typeset .hero-actions .md-button { margin: 0; min-height: 44px; display: inline-flex; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  .md-typeset .md-button,
  .md-typeset .grid.cards > ul > li { transition: none; }
  .md-typeset .dialogue::after { animation: none; }
}

/* Quiz questions are full sentences: keep the pixel frame but use the reading font. */
.md-typeset details.question > summary {
  font-family: var(--font-ui);
  -webkit-font-smoothing: auto;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.6;
  padding-top: .4rem;
  padding-bottom: .4rem;
}

/* RWD: keep wide formulas and tab label rows inside the column on phones. */
.md-typeset .arithmatex,
.md-typeset .katex-display {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.md-typeset .tabbed-labels {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}
@media screen and (max-width: 44.984375em) {
  .md-content__inner > .tabbed-set .tabbed-labels {
    max-width: 100%;
    margin: 0;
  }
}

/* ---------- emphasis pass: bigger, crisper pixel labels ----------
   Pixel fonts blur under synthetic bold, so "bold" is a 1px same-colour hard
   shadow. Small labels go 11px -> 16.5px (= 33 device px on 2x screens, a
   clean 3x of the 11px design grid). */
:root { --pixel-bold: 1px 0 0 currentColor; }

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset .md-button,
.md-typeset .grid.cards > ul > li > p:first-child strong {
  text-shadow: var(--pixel-bold);
  letter-spacing: .5px;
}
.md-typeset h1 { font-size: 38.5px; line-height: 1.3; }

.md-typeset .md-button,
.md-typeset .admonition-title,
.md-typeset details:not(.question) > summary,
.md-typeset .tabbed-labels > label,
.md-nav__item--section > .md-nav__link,
.md-footer__title,
.demo-box button,
.demo-box select {
  font-size: 16.5px;
  line-height: 1.6;
}
.md-typeset .md-button { padding: .45em 1.1em; }

/* ---------- Sibling-site switch (ML/DL <-> LLM) in the header ----------
   Same box as LocalLLMRPG .site-switch (12px Cubic 11, 36px tall links,
   10px side padding, " 冒險" suffix from 768px). Contrast on #2d1f1a:
   cream 13.5:1; current item is dark text on gold #d4a04d (6.8:1). */
.site-switch {
  display: inline-flex;
  border: 2px solid var(--frame-light);
  font-size: 12px;
}
.site-switch a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 10px;
  color: var(--bg-cream);
  text-decoration: none;
  white-space: nowrap;
}
.site-switch a + a { border-left: 2px solid var(--frame-light); }
.site-switch a[aria-current="true"] { background: var(--accent-gold); color: var(--bg-dark); }
.site-switch a:not([aria-current="true"]):hover,
.site-switch a:not([aria-current="true"]):focus-visible { color: var(--accent-gold); }
.site-switch__long { display: none; }
@media screen and (min-width: 768px) {
  .site-switch__long { display: inline; }
}