/* Shared theme for the three handbooks: a light, Apple-like look with a single blue accent.
   Loaded before each handbook's own assets/extra.css, which only adds handbook-specific pieces. */

:root {
  --md-text-font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB",
    "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --md-code-font-family: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --md-scroll-margin: 4.2rem;

  --aig-blue: #007aff;
  --aig-blue-hover: #0062cc;
  --aig-cyan: #5ac8fa;
  --aig-purple: #af52de;
  --aig-orange: #ff9f0a;
  --aig-fg: #111827;
  --aig-text: #374151;
  --aig-text-2: #6b7280;
  --aig-text-3: #9ca3af;
  --aig-border: #e5e7eb;
  --aig-border-soft: #f0f1f3;
  --aig-surface: #ffffff;
  --aig-subtle: #f3f4f6;
  --aig-header-bg: rgba(255, 255, 255, 0.72);
  --aig-blue-soft: #eff6ff;
  --aig-inline-code: #1f2328;
  --aig-inline-code-bg: rgba(175, 184, 193, 0.24);
  --aig-code-border: #e5e7eb;
  --aig-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 20px rgba(15, 23, 42, 0.05);
}

/* ---------- palette ---------- */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: #007aff;
  --md-primary-fg-color--light: #4da3ff;
  --md-primary-fg-color--dark: #0062cc;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
}
[data-md-color-accent="custom"] {
  --md-accent-fg-color: #007aff;
  --md-accent-fg-color--transparent: rgba(0, 122, 255, 0.1);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: rgba(255, 255, 255, 0.7);
}
[data-md-color-scheme="default"] {
  --md-default-bg-color: #fafafa;
  --md-default-fg-color: #111827;
  --md-default-fg-color--light: #6b7280;
  --md-default-fg-color--lighter: #9ca3af;
  --md-default-fg-color--lightest: #e5e7eb;
  --md-typeset-color: #374151;
  --md-typeset-a-color: #007aff;
  --md-typeset-table-color: #e5e7eb;
  --md-footer-fg-color: #111827;
  --md-footer-fg-color--light: #6b7280;
  --md-footer-fg-color--lighter: #9ca3af;
  --md-footer-bg-color: transparent;
  --md-footer-bg-color--dark: transparent;

  --md-code-fg-color: #24292f;
  --md-code-bg-color: #f6f8fa;
  --md-code-hl-color: #0969da;
  --md-code-hl-color--light: rgba(9, 105, 218, 0.1);
  --md-code-hl-number-color: #0550ae;
  --md-code-hl-special-color: #cf222e;
  --md-code-hl-function-color: #8250df;
  --md-code-hl-constant-color: #0550ae;
  --md-code-hl-keyword-color: #cf222e;
  --md-code-hl-string-color: #0a3069;
  --md-code-hl-name-color: #24292f;
  --md-code-hl-operator-color: #cf222e;
  --md-code-hl-punctuation-color: #24292f;
  --md-code-hl-comment-color: #6e7781;
  --md-code-hl-generic-color: #6e7781;
  --md-code-hl-variable-color: #953800;
}
[data-md-color-scheme="slate"] {
  --md-hue: 220deg;
  --md-default-bg-color: #0a0a0a;
  --md-default-bg-color--light: rgba(10, 10, 10, 0.7);
  --md-default-fg-color: #f3f4f6;
  --md-default-fg-color--light: #a1a1aa;
  --md-default-fg-color--lighter: #71717a;
  --md-default-fg-color--lightest: #27272a;
  --md-typeset-color: #d4d4d8;
  --md-typeset-a-color: #3b9eff;
  --md-typeset-table-color: #27272a;
  --md-footer-fg-color: #f3f4f6;
  --md-footer-fg-color--light: #a1a1aa;
  --md-footer-fg-color--lighter: #71717a;
  --md-footer-bg-color: transparent;
  --md-footer-bg-color--dark: transparent;
  --md-admonition-bg-color: #111113;

  --md-code-fg-color: #e6edf3;
  --md-code-bg-color: #111316;
  --md-code-hl-color: #58a6ff;
  --md-code-hl-color--light: rgba(88, 166, 255, 0.12);
  --md-code-hl-number-color: #79c0ff;
  --md-code-hl-special-color: #ff7b72;
  --md-code-hl-function-color: #d2a8ff;
  --md-code-hl-constant-color: #79c0ff;
  --md-code-hl-keyword-color: #ff7b72;
  --md-code-hl-string-color: #a5d6ff;
  --md-code-hl-name-color: #e6edf3;
  --md-code-hl-operator-color: #ff7b72;
  --md-code-hl-punctuation-color: #c9d1d9;
  --md-code-hl-comment-color: #8b949e;
  --md-code-hl-generic-color: #8b949e;
  --md-code-hl-variable-color: #ffa657;

  --aig-blue: #3b9eff;
  --aig-blue-hover: #6cb6ff;
  --aig-fg: #f3f4f6;
  --aig-text: #d4d4d8;
  --aig-text-2: #a1a1aa;
  --aig-text-3: #71717a;
  --aig-border: #27272a;
  --aig-border-soft: #1c1c1f;
  --aig-surface: #111113;
  --aig-subtle: #1a1a1d;
  --aig-header-bg: rgba(255, 255, 255, 0.06);
  --aig-blue-soft: rgba(59, 130, 246, 0.14);
  --aig-inline-code: #e6edf3;
  --aig-inline-code-bg: rgba(110, 118, 129, 0.34);
  --aig-code-border: #26282c;
  --aig-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

body { -webkit-font-smoothing: antialiased; }
/* 页面最宽 64rem：两侧导航之间的正文栏约 36rem，中文每行 45 字左右，读起来不累 */
.md-grid { max-width: 64rem; }

/* ---------- header ---------- */
.md-header,
.md-header--shadow {
  background-color: var(--aig-header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: var(--aig-fg);
  box-shadow: none;
  border-bottom: 1px solid var(--aig-border);
  --md-primary-bg-color: var(--aig-fg);
  --md-primary-bg-color--light: var(--aig-text-2);
}
.md-header__inner { height: 3rem; padding: 0 0.6rem; }
.md-header__button { color: var(--aig-text-2); }
.md-header__button:hover { color: var(--aig-fg); opacity: 1; }
.md-header__title { margin-left: 0.4rem; font-weight: 600; }

.aig-brand {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 1rem 0 0.4rem;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.aig-brand__logo { width: 1.35rem; height: 1.35rem; flex: none; }
.aig-brand__mark {
  background: linear-gradient(90deg, var(--aig-blue), var(--aig-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.aig-brand__text { color: var(--aig-fg); font-weight: 700; }

/* 顶栏只放四个入口：当前书名的下拉（里面是各本手册）、学习路线、练习题、更多。
   各本手册不再平铺成一排标签，避免顶栏挤成一堆；
   平板和手机（60em 以下）再把学习路线、练习题挪进"更多"，下拉面板铺满屏宽 */
.md-header__title { display: none; }
.aig-tabs {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: stretch;
  height: 3rem;
}
.aig-tabs__books { display: none; }
.aig-menu__short { display: none; }
.aig-menu__item.aig-menu__item--m { display: none; }
@media screen and (min-width: 60em) {
  .aig-tabs { justify-content: center; }
  .md-search__inner { width: 8rem; }
}
@media screen and (max-width: 59.984375em) {
  .aig-tabs > a.aig-tab, .aig-tabs__sep { display: none; }
  .aig-menu__item.aig-menu__item--m { display: flex; }
  .aig-tabs .aig-menu__panel {
    position: fixed;
    top: 3rem;
    left: 0.6rem;
    right: 0.6rem;
    min-width: 0;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
  }
}
@media screen and (max-width: 29.984375em) {
  .md-header__inner { padding: 0 0.2rem; }
  .md-header__button { margin-left: 0; margin-right: 0; }
  .aig-tabs .aig-tab { padding: 0 0.4rem; }
  .aig-menu__long { display: none; }
  .aig-menu__short { display: inline; }
}
@media screen and (min-width: 76.25em) {
  .md-sidebar { top: 3rem; }
}
@media screen and (min-width: 100em) {
  .md-search__inner { width: 10rem; }
}
@media screen and (max-width: 76.234375em) {
  .md-header__button[for="__drawer"] { order: -1; }
  .aig-brand { margin-right: 0.2rem; font-size: 0.8rem; }
}
/* 平板、手机上顶栏的「手册」菜单写着当前的书名，品牌只留"AI Infra"；手机上只留 logo，
   GitHub 按钮也收进左侧抽屉（抽屉顶部有仓库链接），把位置让给两个菜单 */
@media screen and (max-width: 59.984375em) {
  .aig-brand__text { display: none; }
}
@media screen and (max-width: 29.984375em) {
  .aig-brand__mark, .md-header__button.aig-github { display: none; }
}
.aig-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  white-space: nowrap;
  padding: 0 0.55rem;
  font-size: 0.7rem;
  color: var(--aig-text-2);
  transition: color 0.15s;
}
.aig-tab:hover { color: var(--aig-fg); }
.aig-tab--active { color: var(--aig-fg); font-weight: 600; }
.aig-tab--active::after {
  content: "";
  position: absolute;
  left: 0.45rem;
  right: 0.45rem;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--aig-blue);
}
.aig-tabs__sep {
  align-self: center;
  width: 1px;
  height: 0.9rem;
  margin: 0 0.45rem;
  background: var(--aig-border);
}

/* 下拉菜单：<details> 实现，点开 / 收起不依赖脚本；脚本只负责点别处时收起 */
.aig-menu { position: relative; display: flex; }
.aig-menu > summary { list-style: none; cursor: pointer; user-select: none; }
.aig-menu > summary::-webkit-details-marker { display: none; }
.aig-menu__chev {
  width: 0.75rem;
  height: 0.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s;
}
.aig-menu[open] > summary { color: var(--aig-fg); }
.aig-menu[open] .aig-menu__chev { transform: rotate(180deg); }
.aig-menu__panel {
  position: absolute;
  top: calc(100% - 0.25rem);
  left: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 14.5rem;
  padding: 0.35rem;
  border: 1px solid var(--aig-border);
  border-radius: 0.75rem;
  background: var(--aig-surface);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}
.aig-menu__panel--right { left: auto; right: 0; }
.aig-menu__item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.45rem 0.65rem;
  border-radius: 0.5rem;
  white-space: nowrap;
}
.aig-menu__item:hover { background: var(--aig-subtle); }
.aig-menu__item b { font-size: 0.7rem; font-weight: 600; color: var(--aig-fg); }
.aig-menu__item span { font-size: 0.6rem; color: var(--aig-text-2); }
.aig-menu__item--active b { color: var(--aig-blue); }
[data-md-color-scheme="slate"] .aig-menu__panel { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); }

/* search: a soft pill instead of Material's dark field */
[data-md-toggle="search"]:checked ~ .md-header .aig-tabs { visibility: hidden; }
@media screen and (min-width: 60em) {
  .md-search__form {
    height: 1.8rem;
    border-radius: 999px;
    background-color: var(--aig-subtle);
  }
  .md-search__form:hover { background-color: var(--aig-border); }
  .md-search__input { font-size: 0.7rem; }
  .md-search__input::placeholder { color: var(--aig-text-3); }
  [data-md-toggle="search"]:checked ~ .md-header .md-search__form {
    border-radius: 0.6rem 0.6rem 0 0;
    background-color: var(--aig-surface);
  }
}

/* ---------- left navigation ---------- */
.md-nav { font-size: 0.7rem; }
.md-nav--primary .md-nav__link { color: var(--aig-text); }
.md-nav--primary .md-nav__link:hover { color: var(--aig-blue); }
@media screen and (min-width: 76.25em) {
  .md-nav--primary > .md-nav__title { display: none; }
  .md-nav--primary > .md-nav__list > .md-nav__item--section { margin: 1.1em 0; }
  .md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--aig-fg);
    font-weight: 700;
    font-size: 0.68rem;
  }
  .md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link::before {
    content: "";
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: var(--aig-orange);
    flex-shrink: 0;
  }
  .md-nav--primary .md-nav__item--section > .md-nav {
    margin-left: 0.15rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--aig-border);
  }
  .md-nav--primary .md-nav__item:not(.md-nav__item--section) > .md-nav__link {
    margin-top: 0.15em;
    padding: 0.35em 0.6em;
    border-radius: 0.4rem;
  }
  .md-nav--primary .md-nav__link--active {
    color: var(--aig-fg);
    font-weight: 600;
    background: var(--aig-subtle);
    box-shadow: inset 3px 0 0 var(--aig-orange);
  }
}
.md-nav__link--active { color: var(--aig-blue); }

/* ---------- right table of contents ---------- */
@media screen and (min-width: 60em) {
  .md-nav--secondary > .md-nav__title {
    background: transparent;
    box-shadow: none;
    color: var(--aig-fg);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding-left: 0.5rem;
    border-left: 3px solid var(--aig-blue);
    margin-bottom: 0.6rem;
  }
  .md-nav--secondary > .md-nav__list { border-left: 1px solid var(--aig-border); padding-left: 0.2rem; }
  .md-nav--secondary .md-nav__link { color: var(--aig-text-2); font-size: 0.65rem; margin-top: 0.5em; }
  .md-nav--secondary .md-nav__link:hover { color: var(--aig-blue); }
  .md-nav--secondary .md-nav__link--active { color: var(--aig-fg); font-weight: 600; }
}

/* ---------- article ---------- */
.md-content__inner { margin-left: 0.8rem; margin-right: 0.8rem; padding-top: 0.4rem; }
@media screen and (min-width: 45em) {
  .md-content__inner { margin-left: 1.2rem; margin-right: 1.2rem; padding-top: 1.2rem; }
}
/* 正文字号档位：由顶栏的「字号」控件写到 <html data-aig-font> 上，见 assets/javascripts/aig-fontsize.js。
   只改 .md-typeset 的基准值，标题、代码、表格都按 em 跟着走，布局不动。 */
:root { --aig-typeset-size: 0.8rem; }
:root[data-aig-font="s"]  { --aig-typeset-size: 0.72rem; }
:root[data-aig-font="l"]  { --aig-typeset-size: 0.9rem; }
:root[data-aig-font="xl"] { --aig-typeset-size: 1.02rem; }
.md-typeset { font-size: var(--aig-typeset-size); line-height: 1.85; color: var(--md-typeset-color); }

/* 顶栏里的字号控件 */
.aig-font { display: flex; align-items: center; gap: 0.25rem; padding: 0.5rem 0.9rem 0.6rem; border-top: 1px solid var(--aig-border); }
.aig-font__label { flex: 0 0 auto; margin-right: 0.35rem; font-size: 0.7rem; color: var(--aig-text-2); }
.aig-font__btn { flex: 1; font: inherit; font-size: 0.7rem; padding: 0.2rem 0; cursor: pointer; color: var(--aig-text);
  background: var(--aig-bg); border: 1px solid var(--aig-border); border-radius: 0.35rem; }
.aig-font__btn:hover { border-color: var(--aig-blue); color: var(--aig-blue); }
.aig-font__btn[aria-pressed="true"] { color: #fff; background: var(--aig-blue); border-color: var(--aig-blue); }
.md-typeset h1 {
  margin: 0 0 0.7em;
  font-size: 2.05em;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--aig-fg);
}
.md-typeset h2 {
  margin: 2.4em 0 0.8em;
  padding-bottom: 0.45em;
  font-size: 1.45em;
  font-weight: 700;
  line-height: 1.35;
  color: var(--aig-blue);
  border-bottom: 1px solid var(--aig-border);
}
.md-typeset h3 { margin: 1.8em 0 0.6em; font-size: 1.18em; font-weight: 650; color: var(--aig-fg); }
.md-typeset h4 { font-weight: 650; color: var(--aig-fg); }
.md-typeset strong { color: var(--aig-fg); font-weight: 650; }
.md-typeset a { font-weight: 500; }
.md-typeset a:hover { color: var(--aig-blue-hover); text-decoration: underline; text-underline-offset: 3px; }
.md-typeset .headerlink { color: var(--aig-text-3); }
/* 章节标题不需要锚点链接；不隐藏的话，窄屏上看不见的 ¶ 会折到第二行，把标题撑成两行高 */
.md-typeset h1 .headerlink { display: none; }
.md-typeset hr { border-bottom: 1px solid var(--aig-border); }
.md-typeset .lead {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--aig-text-2);
  max-width: 46em;
  padding-bottom: 1.2em;
  border-bottom: 1px solid var(--aig-border);
}
@media screen and (max-width: 44.984375em) {
  .md-typeset h1 { font-size: 1.65em; }
  .md-typeset h2 { margin-top: 2em; font-size: 1.32em; }
  .md-typeset .lead { font-size: 0.86rem; }
}
.md-typeset blockquote {
  border-left: 3px solid var(--aig-blue);
  background: var(--aig-subtle);
  color: var(--aig-text);
  padding: 0.6em 1em;
  border-radius: 0 0.5rem 0.5rem 0;
}

/* chips above each chapter title (see theme/main.html) */
.aig-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
.aig-chip {
  font-size: 0.6rem;
  line-height: 1.5;
  padding: 0.15rem 0.55rem;
  border-radius: 0.35rem;
  background: var(--aig-subtle);
  color: var(--aig-text-2);
}
.aig-chip--book { background: var(--aig-blue-soft); color: var(--aig-blue); font-weight: 600; }
.md-typeset a.aig-chip--nb, a.aig-chip--nb { color: var(--aig-text-2); text-decoration: none; }
.md-typeset a.aig-chip--nb:hover, a.aig-chip--nb:hover { color: var(--aig-blue); }

/* inline code */
.md-typeset :not(pre) > code {
  color: var(--aig-inline-code);
  background-color: var(--aig-inline-code-bg);
  border-radius: 0.3rem;
  padding: 0.1em 0.4em;
  font-size: 0.84em;
  word-break: normal;
}
.md-typeset a > code { color: inherit; }

/* code blocks: a window with traffic-light dots */
.md-typeset .highlight {
  position: relative;
  margin: 1.2em 0;
  border: 1px solid var(--aig-code-border);
  border-radius: 0.6rem;
  background-color: var(--md-code-bg-color);
  box-shadow: var(--aig-shadow);
  overflow: hidden;
}
.md-typeset .highlight::before,
.md-typeset .highlight > .filename {
  display: block;
  height: 1.7rem;
  background-image:
    radial-gradient(circle at 0.9rem 50%, #ff5f57 0.29rem, transparent 0.31rem),
    radial-gradient(circle at 1.65rem 50%, #febc2e 0.29rem, transparent 0.31rem),
    radial-gradient(circle at 2.4rem 50%, #28c840 0.29rem, transparent 0.31rem);
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--aig-code-border);
}
.md-typeset .highlight::before { content: ""; }
.md-typeset .highlight:has(> .filename)::before { display: none; }
.md-typeset .highlight > .filename {
  margin: 0;
  padding: 0 0.8rem 0 3.2rem;
  line-height: 1.7rem;
  font-size: 0.62rem;
  font-weight: 500;
  font-family: var(--md-code-font-family);
  color: var(--aig-text-2);
  background-color: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}
.md-typeset .highlight > .filename::after { display: none; }
.md-typeset .highlight::after {
  position: absolute;
  top: 0;
  right: 0.8rem;
  line-height: 1.7rem;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--aig-text-3);
  font-family: var(--md-code-font-family);
}
.md-typeset .language-python.highlight::after,
.md-typeset .language-py.highlight::after { content: "PYTHON"; }
.md-typeset .language-pycon.highlight::after { content: ">>> PYTHON"; }
.md-typeset .language-cuda.highlight::after { content: "CUDA"; }
.md-typeset .language-bash.highlight::after { content: "BASH"; }
.md-typeset .language-yaml.highlight::after { content: "YAML"; }
.md-typeset .language-toml.highlight::after { content: "TOML"; }
.md-typeset .highlight pre { margin: 0; }
.md-typeset .highlight pre > code {
  background: transparent;
  border-radius: 0;
  font-size: 0.78em;
  line-height: 1.7;
}
/* program output / diagrams: a plain panel without the window chrome */
.md-typeset .language-text.highlight { box-shadow: none; background-color: var(--aig-surface); }
.md-typeset .language-text.highlight::before { display: none; }
.md-typeset .md-code__nav { top: 0.3rem; right: 0.3rem; }

/* tables */
.md-typeset table:not([class]) {
  border: 0;
  border-radius: 0;
  font-size: 0.74rem;
  background: transparent;
}
.md-typeset table:not([class]) th {
  background-color: var(--aig-subtle);
  color: var(--aig-fg);
  font-weight: 650;
  white-space: nowrap;
  padding: 0.7em 1em;
  border-bottom: 1px solid var(--aig-border);
}
.md-typeset table:not([class]) td {
  padding: 0.7em 1em;
  border-top: 1px solid var(--aig-border-soft);
  vertical-align: top;
}
.md-typeset table:not([class]) tr:hover { background-color: transparent; box-shadow: none; }
.md-typeset table:not([class]) tbody tr:hover td { background-color: var(--md-accent-fg-color--transparent); }

/* admonitions */
.md-typeset .admonition,
.md-typeset details {
  border-width: 1px;
  border-left-width: 4px;
  border-radius: 0.6rem;
  box-shadow: none;
  font-size: 0.76rem;
  overflow: hidden;
  background-color: var(--aig-surface);
}
.md-typeset .admonition-title,
.md-typeset summary { font-weight: 650; }

/* admonition colours from the Apple system palette */
.md-typeset .admonition, .md-typeset details { --aig-adm: #007aff; }
.md-typeset .question { --aig-adm: #5856d6; }
.md-typeset .success { --aig-adm: #34c759; }
.md-typeset .tip { --aig-adm: #30b0c7; }
.md-typeset .warning { --aig-adm: #ff9f0a; }
.md-typeset :is(.note, .question, .success, .tip, .warning):is(.admonition, details) { border-color: var(--aig-adm); }
.md-typeset :is(.note, .question, .success, .tip, .warning) > :is(.admonition-title, summary) {
  background-color: color-mix(in srgb, var(--aig-adm) 9%, transparent);
}
.md-typeset :is(.note, .question, .success, .tip, .warning) > :is(.admonition-title, summary)::before {
  background-color: var(--aig-adm);
}
.md-typeset :is(.note, .question, .success, .tip, .warning):is(.admonition, details):focus-within {
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--aig-adm) 12%, transparent);
}

/* buttons */
.md-typeset .md-button { border-radius: 0.5rem; font-weight: 600; }

/* footer：上一页 / 下一页做成两张卡片，左右边界与正文栏对齐（两侧导航各宽 12.1rem） */
.md-footer__inner, .md-footer-meta__inner { padding-left: 0.8rem; padding-right: 0.8rem; }
.md-footer__inner { gap: 0.6rem; padding-top: 1.2rem; padding-bottom: 1.6rem; }
@media screen and (min-width: 45em) {
  .md-footer__inner, .md-footer-meta__inner { padding-left: 1.2rem; padding-right: 1.2rem; }
}
@media screen and (min-width: 60em) {
  .md-footer__inner, .md-footer-meta__inner { padding-right: calc(12.1rem + 1.2rem); }
}
@media screen and (min-width: 76.25em) {
  .md-footer__inner, .md-footer-meta__inner { padding-left: calc(12.1rem + 1.2rem); padding-right: calc(12.1rem + 1.2rem); }
}
.md-footer__link {
  flex: 1 1 0;
  min-width: 0;
  max-width: calc(50% - 0.3rem);
  align-items: center;
  margin: 0;
  padding: 0.5rem 0.5rem;
  border: 1px solid var(--aig-border);
  border-radius: 0.7rem;
  background: var(--aig-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.md-footer__link:hover, .md-footer__link:focus { opacity: 1; border-color: var(--aig-blue); box-shadow: var(--aig-shadow); }
.md-footer__button { margin: 0; padding: 0.2rem; color: var(--aig-text-2); }
.md-footer__link:hover .md-footer__button { color: var(--aig-blue); }
.md-footer__title { margin-bottom: 0; padding: 0 0.4rem; font-size: 0.76rem; font-weight: 600; color: var(--aig-fg); }
.md-footer__direction { font-size: 0.6rem; font-weight: 400; color: var(--aig-text-3); opacity: 1; }
@media screen and (max-width: 44.984375em) {
  .md-footer__link { max-width: none; }
  .md-footer__link--prev { flex: 0 0 auto; }            /* 手机上上一页只留箭头（Material 隐藏了标题） */
}
.md-footer-meta { border-top: 1px solid var(--aig-border-soft); }
.md-copyright { margin-left: 0; margin-right: 0; color: var(--aig-text-3); }

/* back to top: a round blue button in the bottom-right corner. Material's script writes an inline `top`
   (it normally sits under the header), so `top` needs !important or the button covers the table of contents */
.md-top {
  top: auto !important;
  bottom: 1.6rem;
  left: auto;
  right: 1.6rem;
  margin: 0;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0;
  color: #fff;
  background-color: var(--aig-blue);
  box-shadow: 0 6px 20px rgba(0, 122, 255, 0.35);
  transform: none;
}
[dir] .md-top { margin: 0; }
.md-top:hover,
.md-top:focus { color: #fff; background-color: var(--aig-blue-hover); }
.md-top[hidden] { transform: translateY(0.4rem); }
.md-top svg { width: 1.1rem; height: 1.1rem; margin: 0; }

/* study bar (see theme/main.html and assets/javascripts/aig-study.js) */
.aig-study { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.aig-study[hidden], .aig-study-end[hidden] { display: none; }
.aig-study__wk { font-size: 0.6rem; line-height: 1.5; padding: 0.15rem 0.55rem; border-radius: 0.35rem;
  background: var(--aig-subtle); color: var(--aig-text-2) !important; }
.aig-study__wk:hover { color: var(--aig-blue) !important; }
.aig-study__lv, .aig-study__dir { font-size: 0.6rem; line-height: 1.5; padding: 0.15rem 0.5rem; border-radius: 0.35rem; }
.aig-study__lv.lv1 { background: #fff1f0; color: #d4380d; }
.aig-study__lv.lv2 { background: #eff6ff; color: var(--aig-blue); }
.aig-study__lv.lv3 { background: var(--aig-subtle); color: var(--aig-text-2); }
.aig-study__dir { background: #f6ffed; color: #389e0d; }
.aig-study__btn { font: inherit; font-size: 0.62rem; line-height: 1.5; padding: 0.12rem 0.6rem; border-radius: 0.35rem;
  border: 1px solid var(--aig-border); background: var(--aig-surface); color: var(--aig-text); cursor: pointer; }
.aig-study__btn:hover { border-color: var(--aig-blue); color: var(--aig-blue); }
.aig-study__btn.is-done { background: #f6ffed; border-color: #b7eb8f; color: #389e0d; }
.aig-study-end { margin: 2.4rem 0 0.5rem; padding: 0.9rem 1rem; border: 1px solid var(--aig-border); border-radius: 0.7rem;
  background: var(--aig-surface); font-size: 0.72rem; }
.aig-study-end__row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; color: var(--aig-text-2); }
.aig-study-end__row .aig-study__btn { font-size: 0.7rem; padding: 0.2rem 0.8rem; }
.aig-study-end__count { margin-left: auto; color: var(--aig-text-3); }
.aig-study-end__next { display: block; margin-top: 0.6rem; font-weight: 600; }
.aig-study-end__nwk { font-weight: 400; color: var(--aig-text-3); margin-left: 0.5rem; }
[data-md-color-scheme="slate"] .aig-study__lv.lv1 { background: rgba(212, 56, 13, 0.15); color: #ff7a45; }
[data-md-color-scheme="slate"] .aig-study__lv.lv2 { background: rgba(0, 122, 255, 0.15); }
[data-md-color-scheme="slate"] .aig-study__dir, [data-md-color-scheme="slate"] .aig-study__btn.is-done { background: rgba(56, 158, 13, 0.15); color: #95de64; border-color: transparent; }

/* figures generated by tools/figures.py and inlined by hooks/figures.py: text and lines use currentColor,
   fills come from these classes so they work on both light and dark backgrounds */
.aig-fig { margin: 1.4em 0; text-align: center; }
.aig-fig svg { max-width: 100%; height: auto; font-family: var(--md-text-font-family); color: var(--md-typeset-color); overflow: visible; }
.aig-fig figcaption { margin-top: 0.4em; font-size: 0.68rem; color: var(--md-default-fg-color--light); }
.aig-fig .tx { fill: currentColor; }
.aig-fig .mu { fill: currentColor; opacity: 0.62; }
.aig-fig .ln { stroke: currentColor; fill: none; }
.aig-fig .ah { fill: currentColor; stroke: none; }
.aig-fig .bx { fill: var(--md-default-bg-color); stroke: currentColor; stroke-opacity: 0.35; }
.aig-fig .bubble-tail { fill: var(--md-default-bg-color); stroke: currentColor; stroke-opacity: 0.35; stroke-width: 1.1; }
.aig-fig .blue { fill: rgba(0, 122, 255, 0.13); stroke: #007aff; }
.aig-fig .green { fill: rgba(52, 199, 89, 0.15); stroke: #28a745; }
.aig-fig .orange { fill: rgba(255, 149, 0, 0.16); stroke: #f08c00; }
.aig-fig .purple { fill: rgba(175, 82, 222, 0.14); stroke: #af52de; }
.aig-fig .red { fill: rgba(255, 59, 48, 0.13); stroke: #ff3b30; }
.aig-fig .gray { fill: rgba(127, 127, 127, 0.12); stroke: currentColor; stroke-opacity: 0.4; }
.aig-fig .blue-s { fill: #007aff; } .aig-fig .green-s { fill: #28a745; } .aig-fig .orange-s { fill: #f08c00; }
.aig-fig .purple-s { fill: #af52de; } .aig-fig .red-s { fill: #ff3b30; } .aig-fig .gray-s { fill: currentColor; opacity: 0.35; }
.aig-fig .blue-l { stroke: #007aff; fill: none; } .aig-fig .green-l { stroke: #28a745; fill: none; }
.aig-fig .orange-l { stroke: #f08c00; fill: none; } .aig-fig .purple-l { stroke: #af52de; fill: none; } .aig-fig .red-l { stroke: #ff3b30; fill: none; }
[data-md-color-scheme="slate"] .aig-fig .blue { fill: rgba(59, 158, 255, 0.2); stroke: #3b9eff; }
[data-md-color-scheme="slate"] .aig-fig .green { fill: rgba(52, 199, 89, 0.2); }
[data-md-color-scheme="slate"] .aig-fig .orange { fill: rgba(255, 159, 10, 0.2); }
[data-md-color-scheme="slate"] .aig-fig .purple { fill: rgba(191, 90, 242, 0.2); }

/* interactive widgets filled in by assets/javascripts/aig-widgets.js */
.aig-widget { margin: 1.4em 0; padding: 0.9rem 1rem 0.5rem; border: 1px solid var(--aig-border); border-radius: 0.6rem;
  background: var(--aig-subtle); font-size: 0.72rem; line-height: 1.6; }
.aig-widget [hidden] { display: none !important; }
.aig-widget .aw-title { font-weight: 600; color: var(--aig-fg); margin-bottom: 0.6rem; }
.aig-widget .aw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.45rem 1.4rem; margin-bottom: 0.5rem; }
.aig-widget .aw-row { display: flex; align-items: center; gap: 0.6rem; margin: 0; }
.aig-widget .aw-wide { grid-column: 1 / -1; }
.aig-widget .aw-row > span { flex: 0 0 7.5rem; color: var(--aig-text-2); }
.aig-widget select, .aig-widget input[type="number"], .aig-widget input[type="text"] { flex: 1; min-width: 0; font: inherit; color: var(--aig-text);
  padding: 0.15rem 0.4rem; border: 1px solid var(--aig-border); border-radius: 0.35rem; background: var(--aig-surface); }
.aig-widget input[type="range"] { flex: 1; min-width: 0; accent-color: var(--aig-blue); }
.aig-widget .aw-row > b { flex: 0 0 3rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--aig-fg); }
.aig-widget .aw-out p { margin: 0.3rem 0; }
.aig-widget .aw-out b { color: var(--aig-fg); }
.aig-widget .aw-note { color: var(--aig-text-2); }
.aig-widget svg.aw-chart { display: block; width: 100%; height: auto; margin: 0.5rem 0; color: var(--aig-text);
  font-family: var(--md-text-font-family); }
.aig-widget svg.aw-mask { width: auto; max-width: 100%; margin: 0.5rem auto; }
.aw-chart .aw-t { fill: currentColor; font-size: 11px; }
.aw-chart .aw-axis { stroke: currentColor; stroke-opacity: 0.45; }
.aw-chart .aw-gl { stroke: currentColor; stroke-opacity: 0.08; }
.aw-chart .aw-dash { stroke: currentColor; stroke-opacity: 0.4; stroke-dasharray: 3 3; }
.aw-chart .aw-roof { stroke: var(--aig-blue); stroke-width: 2.5; fill: none; stroke-linejoin: round; }
.aw-chart .aw-dot { fill: #f08c00; stroke: var(--aig-subtle); stroke-width: 2; }
.aw-chart .aw-idle { fill: currentColor; fill-opacity: 0.07; }
.aw-chart .aw-f { fill: rgba(0, 122, 255, 0.2); stroke: #007aff; stroke-width: 0.8; }
.aw-chart .aw-b { fill: rgba(240, 140, 0, 0.22); stroke: #f08c00; stroke-width: 0.8; }
.aw-chart .aw-on { fill: var(--aig-blue); fill-opacity: 0.6; }
.aw-chart .aw-off { fill: currentColor; fill-opacity: 0.07; }
.aw-chart .aw-blk { fill: none; stroke: currentColor; stroke-opacity: 0.6; stroke-width: 1.2; }
.aw-chart .aw-blk.skip { stroke-opacity: 0.3; stroke-dasharray: 3 2; }
.aw-chart .aw-brace { fill: none; stroke: currentColor; stroke-opacity: 0.5; }
[data-md-color-scheme="slate"] .aw-chart .aw-f { fill: rgba(59, 158, 255, 0.25); stroke: #3b9eff; }
[data-md-color-scheme="slate"] .aw-chart .aw-b { fill: rgba(255, 159, 10, 0.25); }
.aig-widget .aw-btn { flex: 0 0 auto; font: inherit; padding: 0.1rem 0.6rem; border: 1px solid var(--aig-border);
  border-radius: 0.35rem; background: var(--aig-surface); color: var(--aig-text); cursor: pointer; }
.aig-widget .aw-btn:hover { border-color: var(--aig-blue); color: var(--aig-blue); }
.aw-chart .aw-area { fill: rgba(0, 122, 255, 0.16); stroke: none; }
.aw-chart .aw-i { stroke: #007aff; stroke-width: 2.6; }
.aw-chart .aw-j { stroke: #f08c00; stroke-width: 2.6; }
.aw-chart .aw-idot { fill: #007aff; }
.aw-chart .aw-jdot { fill: #f08c00; }
[data-md-color-scheme="slate"] .aw-chart .aw-area { fill: rgba(59, 158, 255, 0.22); }
[data-md-color-scheme="slate"] .aw-chart .aw-i { stroke: #3b9eff; }
[data-md-color-scheme="slate"] .aw-chart .aw-idot { fill: #3b9eff; }
.aig-widget .aw-row > span.aw-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; flex: 1 1 auto; }
.aig-widget .aw-chip { font: inherit; font-size: 0.82rem; padding: 0.1rem 0.5rem; cursor: pointer;
  border: 1px solid var(--aig-border); border-radius: 0.35rem; background: var(--aig-bg); color: var(--aig-text); }
.aig-widget .aw-chip:hover { border-color: var(--aig-blue); color: var(--aig-blue); }
.aw-chart .aw-pad { fill: currentColor; fill-opacity: 0.1; stroke: currentColor; stroke-opacity: 0.25; stroke-dasharray: 2 2; }
.aw-chart .aw-i2 { fill: rgba(52, 199, 89, 0.55); }
.aw-chart .aw-j2 { fill: rgba(175, 82, 222, 0.5); }
.aig-widget .aw-scroll { overflow-x: auto; }
/* 3D 小引擎（view3d）用到的类：网格面、坐标轴、点、点旁的小标签、图例色块 */
.aig-widget svg.aw-3d { user-select: none; -webkit-user-select: none; touch-action: none; cursor: grab; }
.aig-widget svg.aw-3d:active { cursor: grabbing; }
.aw-chart .aw-mesh { stroke: currentColor; stroke-opacity: 0.22; stroke-width: 0.5; stroke-linejoin: round; }
.aw-chart .aw-ax3 { stroke: currentColor; stroke-opacity: 0.55; stroke-width: 1.2; }
.aw-chart .aw-arr3 { stroke-linecap: round; }
.aw-chart .aw-hel { stroke: #007aff; stroke-linecap: round; }
[data-md-color-scheme="slate"] .aw-chart .aw-hel { stroke: #3b9eff; }
.aw-chart .aw-p3 { stroke: var(--aig-subtle); stroke-width: 1; }
.aw-chart .aw-p3-dim { stroke: none; }
.aw-chart .aw-path3 { stroke: #007aff; stroke-opacity: 0.35; stroke-linecap: round; }
[data-md-color-scheme="slate"] .aw-chart .aw-path3 { stroke: #3b9eff; }
.aw-chart .aw-ptl { font-size: 10px; }
.aw-chart .aw-ptb { font-size: 12px; font-weight: 600; }
/* token 小块（nextword、bpe）和文本输入框 */
.aig-widget .aw-toks { line-height: 2.1; margin: 0.2rem 0 0.4rem; }
.aig-widget .aw-tok { display: inline-block; padding: 0 0.4rem; margin: 0 0.15rem; border: 1px solid var(--aig-border); border-radius: 4px; font-family: var(--md-code-font-family, monospace); font-size: 0.85em; }
.aig-widget .aw-tok-seen { background: rgba(0, 122, 255, 0.12); border-color: #007aff; }
.aig-widget .aw-tok-next { background: rgba(240, 140, 0, 0.18); border-color: #f08c00; font-weight: 600; }
.aig-widget .aw-row > input[type="text"] { flex: 1 1 8rem; min-width: 0; font: inherit; padding: 0.15rem 0.5rem; border: 1px solid var(--aig-border); border-radius: 6px; background: var(--aig-subtle); color: var(--aig-fg); }
.aig-widget table.aw-table { font-size: 0.82em; margin: 0.4rem 0; border-collapse: collapse; }
.aig-widget table.aw-table th, .aig-widget table.aw-table td { padding: 0.15rem 0.6rem; border-bottom: 1px solid var(--aig-border); text-align: left; white-space: nowrap; }
.aig-widget .aw-leg { display: inline-block; width: 0.7em; height: 0.7em; border-radius: 50%; margin-right: 0.3em; vertical-align: -0.05em; }
@media (max-width: 30em) { .aig-widget .aw-row > span { flex-basis: 5.5rem; } }
@media (max-width: 40em) {                                /* 窄屏：图表保持最小宽度，横向滚动而不是把字压扁 */
  .aig-widget .aw-row { flex-wrap: wrap; }
  .aig-widget .aw-scroll { margin: 0 -0.4rem; padding: 0 0.4rem; }
  .aig-widget .aw-scroll svg.aw-chart { min-width: 30rem; }
  .aig-widget svg.aw-mask { min-width: 0; }
}

/* "怎么讲清楚" callouts, shared by all handbooks: !!! interview "怎么讲清楚" */
.md-typeset .admonition.interview, .md-typeset details.interview { border-color: #FF9500; }
.md-typeset .interview > .admonition-title, .md-typeset .interview > summary { background-color: rgba(255, 149, 0, 0.1); }
.md-typeset .interview > .admonition-title::before, .md-typeset .interview > summary::before {
  background-color: #FF9500;
  -webkit-mask-image: var(--md-admonition-icon--question);
  mask-image: var(--md-admonition-icon--question);
}

/* keyboard focus rings for the custom header, menus, buttons and cards; brand-tinted text selection */
.aig-brand:focus-visible, .aig-tab:focus-visible, .aig-menu > summary:focus-visible, .aig-menu__item:focus-visible,
.md-typeset .aig-btn:focus-visible, .aig-study__btn:focus-visible, .md-footer__link:focus-visible {
  outline: 2px solid var(--aig-blue);
  outline-offset: 2px;
  border-radius: 0.4rem;
}
::selection { background-color: color-mix(in srgb, var(--aig-blue) 22%, transparent); }

/* 手册首页的封面区（hooks/bookhero.py 把首页的 h1 和导语包进来，再加上章数、练习题数和三个按钮） */
.md-typeset .aig-bookhero {
  margin: 0 0 2.2rem;
  padding: 1.5rem 1.6rem 1.4rem;
  border: 1px solid var(--aig-border);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--aig-purple) 11%, transparent), transparent 55%),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--aig-blue) 9%, transparent), transparent 50%),
    var(--aig-surface);
}
.md-typeset .aig-bookhero__icon { display: block; width: 3rem; height: 3rem; margin: 0 0 0.9rem; border-radius: 0.7rem;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12); }
.md-typeset .aig-bookhero h1 { margin: 0 0 0.45em; font-size: 2.2em; }
.md-typeset .aig-bookhero .lead { margin: 0; padding: 0; border: 0; max-width: none; font-size: 0.88rem; }
.md-typeset .aig-bookhero__facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1.3rem; margin: 1.1rem 0 0;
  font-size: 0.7rem; color: var(--aig-text-2); }
.md-typeset .aig-bookhero__facts b { margin-right: 0.15rem; font-size: 0.95rem; font-weight: 700; color: var(--aig-fg);
  font-variant-numeric: tabular-nums; }
.md-typeset .aig-bookhero__cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; }
.md-typeset .aig-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.42rem 0.95rem;
  border: 1px solid var(--aig-border);
  border-radius: 0.6rem;
  background: var(--aig-surface);
  color: var(--aig-fg);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.md-typeset .aig-btn:hover { border-color: var(--aig-blue); color: var(--aig-blue); text-decoration: none; }
.md-typeset .aig-btn--primary { border-color: var(--aig-blue); background: var(--aig-blue); color: #fff; }
.md-typeset .aig-btn--primary:hover { border-color: var(--aig-blue-hover); background: var(--aig-blue-hover); color: #fff; }
[data-md-color-scheme="slate"] .md-typeset .aig-bookhero__icon { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); }
@media screen and (max-width: 44.984375em) {
  .md-typeset .aig-bookhero { margin-bottom: 1.6rem; padding: 1.1rem 1rem 1rem; border-radius: 0.8rem; }
  .md-typeset .aig-bookhero h1 { font-size: 1.7em; }
  .md-typeset .aig-bookhero__icon { width: 2.5rem; height: 2.5rem; }
}

/* 页末的「在 GitHub 上编辑此页 · 提交问题」（theme/main.html） */
.md-typeset .aig-edit { margin: 1.6rem 0 0; font-size: 0.68rem; color: var(--aig-text-3); }
.md-typeset .aig-edit a { color: var(--aig-text-2); font-weight: 500; }
.md-typeset .aig-edit a:hover { color: var(--aig-blue); }

/* 章首的教学漫画（webp 位图）：居中、限宽、圆角 */
.md-typeset img.aig-comic { display: block; max-width: min(100%, 40rem); margin: 1em auto 1.4em; border-radius: 10px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }

/* 页脚的访问计数（不蒜子填数后才显示）：和 Made with 一行放不下时各占一行 */
.md-copyright .aig-visits { color: var(--md-footer-fg-color--lighter); margin: 0.2em 0; }

/* 语言切换（顶栏 GitHub 图标左边）：中文站显示 EN，英文站显示 中文 */
.md-header__button.aig-lang {
  display: inline-flex; align-items: center; justify-content: center; margin: 0 .15rem; padding: .25rem .5rem;
  font-size: .68rem; font-weight: 700; line-height: 1; letter-spacing: .02em; white-space: nowrap;
  color: var(--aig-fg); border: 1px solid var(--md-default-fg-color--lightest); border-radius: .4rem; opacity: .85;
}
.md-header__button.aig-lang:hover, .md-header__button.aig-lang:focus-visible { opacity: 1; color: var(--md-accent-fg-color); border-color: currentColor; }
/* 英文站里还没翻译的页面：页首的提示 */
.md-typeset .aig-untranslated { margin-top: 0; }

/* 点图放大（assets/javascripts/aig-zoom.js）：架构图、配图、漫画点一下进全屏查看层，滚轮缩放、拖拽平移 */
.md-typeset figure.dg svg, .md-typeset figure.aig-fig svg, .md-typeset img.aig-svg, .md-typeset img.aig-comic { cursor: zoom-in; }
.md-typeset figure.dg svg:focus-visible, .md-typeset figure.aig-fig svg:focus-visible, .md-typeset img.aig-svg:focus-visible, .md-typeset img.aig-comic:focus-visible { outline: 2px solid var(--md-accent-fg-color); outline-offset: 2px; }
.aig-zoom { position: fixed; inset: 0; z-index: 10000; display: none; background: var(--md-default-bg-color); color: var(--md-default-fg-color); }
.aig-zoom.on { display: flex; flex-direction: column; }
.aig-zoom-bar { display: flex; align-items: center; gap: .7rem; padding: .45rem .9rem; font-size: .7rem; line-height: 1.4;
  color: var(--md-default-fg-color--light); border-bottom: 1px solid var(--md-default-fg-color--lightest); background: var(--md-default-bg-color); }
.aig-zoom-cap { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--md-default-fg-color); }
.aig-zoom-hint { white-space: nowrap; }
.aig-zoom-pct { min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
.aig-zoom-bar button { background: none; border: 1px solid var(--md-default-fg-color--lighter); border-radius: 6px; color: inherit;
  padding: .12rem .55rem; cursor: pointer; font: inherit; line-height: 1.6; }
.aig-zoom-bar button:hover { border-color: var(--md-accent-fg-color); color: var(--md-accent-fg-color); }
.aig-zoom-stage { flex: 1; position: relative; overflow: hidden; cursor: grab; touch-action: none; }
.aig-zoom-stage.drag { cursor: grabbing; }
.aig-zoom-content { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.aig-zoom-content svg, .aig-zoom-content img { display: block; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.aig-zoom-content > div { margin: 0; text-align: left; }
body.aig-zoom-open { overflow: hidden; }
@media (max-width: 720px) { .aig-zoom-hint { display: none; } }