/* ===========================================================================
   深入理解 AI Agent — 把 Material 主题「去装饰」,复刻 icyfenix.cn 的扁平风
   ===========================================================================
   设计参考:实测 icyfenix.cn 的 computed style(2026-07)
     - navbar 57px / 白底 / 1px 浅灰下划线
     - sidebar 320px / 白底 / 1px 浅灰右边线
     - 主文字色 #2c3e50(深蓝灰,而非纯黑)
     - h1 41.6px
     - 正文 16px / 1.7
     - 链接默认与正文同色,hover 时变蓝(扁平、不张扬)
   策略:不换主题(保留 Material 的搜索/多语言/暗色/i18n/分享卡等所有功能),
   只用 CSS 关掉它的「卡片化」「阴影」「圆角」「紫色调」等装饰,
   让页面回归「白底 + 左侧栏 + 文字」的扁平形态。
   =========================================================================== */

/* ── 0. 设计 token(对齐 fenix 实测值) ─────────────────────────── */

:root {
  --reader-display-font: "Songti SC", STSong, "Noto Serif CJK SC",
                         "Source Han Serif SC", Georgia, serif;
  --reader-body-font: -apple-system, BlinkMacSystemFont, "Segoe UI",
                      "Noto Sans CJK SC", "Source Han Sans SC",
                      "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                      Arial, sans-serif;
  --reader-ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI",
                    "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --md-text-font: var(--reader-ui-font);
  --md-code-font: "JetBrains Mono", "Fira Code", SFMono-Regular, Consolas,
                  Menlo, monospace;

  --reader-font-size: 17px;
  --reader-leading: 1.86;
  --reader-frame-width: 820px;

  /* 现代编辑式书站调色板 */
  --fenix-ink:        #19211e;
  --fenix-ink-soft:   #59645f;
  --fenix-ink-mute:   #748079;
  --fenix-border:     #dce2de;
  --fenix-link:       #27664f;
  --fenix-link-hover: #174b39;
  --fenix-bg:         #f7f9f7;
  --fenix-surface:    #ffffff;
  --fenix-bg-soft:    #eef2ef;
  --fenix-selection:  #dbece4;
  --fenix-code-bg:    rgba(27, 31, 35, 0.05);
  --fenix-code-ink:   #355e50;

  /* 让 Material 也用上这些 token */
  --md-primary-fg-color:        #17211d;
  --md-primary-bg-color:        #fbfcfa;
  --md-default-fg-color:        #17211d;
  --md-default-fg-color--soft:  #52605a;
  --md-accent-fg-color:         #2f6f57;
  --md-typeset-a-color:         #2f6f57;
}

/* ── 1. 关掉 Material 的卡片化、阴影、圆角 ────────────────────── */

/* 全局去掉 box-shadow —— 这是 Material 最显眼的装饰 */
.md-header,
.md-sidebar,
.md-tabs,
.md-search,
.md-nav,
.md-typeset .admonition,
.md-typeset details,
.md-typeset pre,
.md-typeset table:not([class]) {
  box-shadow: none !important;
}

/* navbar:扁平、白底、单线分隔(对齐 fenix 的 57px / 1px #eaecef) */
.md-header {
  background-color: var(--fenix-bg) !important;
  background-color: color-mix(in srgb, var(--fenix-bg) 92%, transparent) !important;
  border-bottom: 1px solid var(--fenix-border) !important;
  color: var(--fenix-ink) !important;
  height: 60px;
  box-shadow: none !important;
  backdrop-filter: blur(14px);
  transition: background-color .15s ease, border-color .15s ease;
}
.md-header__inner { min-height: 60px; }
.md-header__title {
  min-width: 0;
  color: var(--fenix-ink) !important;
  font-family: var(--reader-ui-font);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.01em;
}
.md-header__topic { color: var(--fenix-ink) !important; }
.header-brand-short { display: none; }

/* 顶部 header 里的搜索框 —— 扁平化 */
.md-search__input {
  background-color: var(--fenix-surface) !important;
  color: var(--fenix-ink) !important;
  border: 1px solid var(--fenix-border);
  border-radius: 8px !important;
}
.md-search__input:focus { border-color: var(--fenix-link); }
.md-search__input::placeholder { color: var(--fenix-ink-mute); }

/* ── 2. 侧边栏:更宽、白底、单线分隔 ─────────────────────────── */

.md-sidebar {
  width: 12.1rem;
}
@media screen and (min-width: 60em) {
  .md-sidebar--primary {
    width: 284px;
  }
}
@media screen and (min-width: 1220px) {
  .md-sidebar--primary {
    border-right: 1px solid var(--fenix-border);
  }
}

/* 侧边栏链接 —— 扁平、深蓝灰、无 hover 背景,只在 hover 时变墨绿 */
.md-nav__item {
  border-left: 0;
}
.md-nav__link {
  color: var(--fenix-ink) !important;
  font-size: 14px;
  line-height: 1.48;
  margin: 0;
  padding: 7px 14px 7px 0;
  transition: color .12s;
}
.md-nav__link:hover,
.md-nav__link:hover * {
  color: var(--fenix-link-hover) !important;
}
/* 章节折叠头(<label for="...">):必须让它的整个区域接收点击并显示手型光标,
   否则用户的鼠标点击会落在 <li> 上而不是 label 上,checkbox 不会翻转,
   章节看起来"点不开也收不起"。 */
.md-sidebar--primary .md-nav__item--nested > label.md-nav__link {
  position: relative;
  z-index: 2;                /* 在 <li> 之上接收点击 */
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 100%;               /* 占满整个章节条宽度,不只文字部分 */
  box-sizing: border-box;
  pointer-events: auto !important;   /* Material sets pointer-events:none on some labels */
}
/* 章节项本身不要拦截点击 — pointer-events: none 让点击穿透到 label */
.md-sidebar--primary .md-nav__item--nested {
  position: relative;
  cursor: pointer;
}
/* 当前激活的章节 —— 左侧一条墨绿色竖线(像 fenix 当前章节的视觉提示) */
.md-sidebar--primary .md-nav__item--active {
  border-left: 0;
}
.md-sidebar--primary .md-nav__link--active {
  position: relative;
  color: var(--fenix-link-hover) !important;
  font-weight: 650;
}
.md-sidebar--primary .md-nav__link--active::before {
  position: absolute;
  top: .52rem;
  bottom: .52rem;
  left: -14px;
  width: 2px;
  border-radius: 1px;
  background: var(--fenix-link);
  content: "";
}

/* 章节分组标题(第1章/第2章...) —— 稍粗、深蓝灰 */
.md-nav__title {
  color: var(--fenix-ink) !important;
  font-family: var(--reader-ui-font);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .01em;
}

/* ── 3. 正文排版 ─────────────────────────────────────────────── */

.md-typeset {
  font-family: var(--reader-body-font);
  font-size: var(--reader-font-size);
  line-height: var(--reader-leading);
  color: var(--fenix-ink);
  letter-spacing: .006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.md-typeset p,
.md-typeset ul,
.md-typeset ol,
.md-typeset blockquote {
  margin-block: 1.05em;
  orphans: 3;
  widows: 3;
}

.md-typeset p {
  text-wrap: pretty;
}

.md-typeset li {
  margin-block: .38em;
}

.md-typeset li::marker {
  color: var(--fenix-link);
}

/* h1 —— 章节标题(对齐 fenix 41.6px) */
.md-typeset h1 {
  color: var(--fenix-ink) !important;
  font-family: var(--reader-display-font);
  font-size: 46px !important;
  font-weight: 700 !important;
  letter-spacing: -.025em;
  line-height: 1.18;
  margin-top: 0;
  margin-bottom: 1.65rem;
  padding-bottom: 0;
  border: none;
  text-wrap: balance;
}
/* h2 —— 用留白建立章节节奏,避免装饰线抢正文 */
.md-typeset h2 {
  color: var(--fenix-ink);
  font-family: var(--reader-display-font);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.36;
  letter-spacing: -.015em;
  margin-top: 4.25rem;
  margin-bottom: 1.35rem;
  padding-bottom: 0;
  border-left: none;
  border-bottom: 0;
  text-wrap: balance;
}

/* h3 —— 小标题,深蓝灰 */
.md-typeset h3 {
  color: var(--fenix-ink);
  font-weight: 680;
  font-size: 22px;
  line-height: 1.45;
  letter-spacing: -.01em;
  margin-top: 3rem;
  margin-bottom: 1rem;
  text-wrap: balance;
}

.md-typeset h4 {
  color: var(--fenix-ink);
  font-size: 18px;
  font-weight: 680;
  line-height: 1.5;
  margin-top: 2.2rem;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  scroll-margin-top: 5.25rem;
}

/* ── 4. 链接 —— 默认与正文同色,hover 变墨绿(对齐 fenix) ────── */

.md-typeset a,
.md-typeset a:visited,
.md-typeset a:-webkit-any-link {
  color: var(--fenix-link) !important;
  text-decoration: none;
  border-bottom: none;
  transition: color .12s;
}
.md-typeset a:hover {
  color: var(--fenix-link-hover) !important;
  text-decoration: none;
  border-bottom: none;
}

.md-typeset p a,
.md-typeset li a {
  text-decoration-line: underline !important;
  text-decoration-thickness: .06em;
  text-underline-offset: .16em;
}

/* ── 5. 行内代码 + 代码块 —— 对齐 fenix 浅灰底 + 蓝灰字 ───────── */

.md-typeset code {
  color: var(--fenix-code-ink) !important;
  background-color: var(--fenix-code-bg) !important;
  padding: 0.15rem 0.35rem;
  border-radius: 3px;
  font-size: 0.85em;
  word-break: break-word;
}
/* 代码块<pre>:沿用 Material 的语法高亮主题,只调字号/边距。
   注意:不要强行换深色背景,会破坏 Material 的浅色高亮配色。 */
.md-typeset pre > code {
  background: transparent;
  color: inherit;
  padding: 1.05rem 1.15rem;
  font-size: 14px;
  line-height: 1.65;
}
.md-typeset pre {
  margin: 1.6rem 0;
  border: 1px solid var(--fenix-border);
  border-radius: 8px;
  /* 给代码块一个稳定的浅灰底,让它在正文里清晰可辨。
     不要用 Material 默认的纯白(在白底正文里融成一团)。 */
  background: var(--fenix-bg-soft) !important;
}

/* ── 6. 表格 —— 去掉 Material 的强对比,扁平化 ─────────────────── */

.md-typeset table:not([class]) {
  border: 1px solid var(--fenix-border);
  border-radius: 8px;
  box-shadow: none !important;
  font-size: 14px;
  line-height: 1.62;
  display: table;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 1.6rem 0;
}
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  padding: 11px 14px;
  border: none;
  vertical-align: top;
}
.md-typeset table:not([class]) th {
  background: var(--fenix-bg-soft);
  color: var(--fenix-ink);
  font-weight: 600;
  border-bottom: 1px solid var(--fenix-border);
  text-align: left;
}
.md-typeset table:not([class]) td {
  border-top: 1px solid var(--fenix-border);
}
.md-typeset table:not([class]) tr:nth-child(even) {
  background: var(--fenix-bg);     /* 偶数行不要花哨的灰条 */
}
.md-typeset table:not([class]) tr:hover td {
  background: var(--fenix-bg-soft);   /* hover 时淡淡提示 */
}
/* 表格里的链接保持低视觉权重,不要满表蓝绿一片 */
.md-typeset table:not([class]) a {
  color: var(--fenix-link);
}
.md-typeset table:not([class]) a:hover {
  color: var(--fenix-link-hover);
}

/* ── 7. 引用块 —— 极简左竖线,无背景填充 ───────────────────────── */

.md-typeset blockquote {
  border: 1px solid var(--fenix-border);
  border-left: 3px solid var(--fenix-link);
  background: var(--fenix-bg-soft);
  color: var(--fenix-ink-soft);
  padding: .85rem 1.15rem;
  border-radius: 8px;
}

.md-typeset blockquote > :first-child {
  margin-top: 0;
}

.md-typeset blockquote > :last-child {
  margin-bottom: 0;
}

/* ── 8. 关掉首页 hero 区的紫色渐变(改回 fenix 那种纯净白底) ──── */

.hero {
  background: var(--fenix-bg);
  border: none;
  border-radius: 0;
  padding: 4rem 1rem 2rem;
  text-align: center;
}
.hero h1 {
  color: var(--fenix-ink);
  font-size: 3rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
}
.hero .hero-formula {
  color: var(--fenix-link-hover);   /* 墨绿公式色 */
  font-size: 1.2rem;
  margin: 1rem 0 1.6rem;
  font-family: var(--md-code-font);
}
.hero .cta {
  background: var(--fenix-ink);
  color: var(--fenix-bg);
  border-radius: 4px;            /* 不用胶囊形,扁平 */
  padding: 8px 16px;
  font-weight: 500;
  font-size: 0.88rem;
  border: none;
}
.hero .cta:hover {
  background: var(--fenix-link-hover);
  opacity: 1;
  transform: none;
}
.hero .cta.secondary {
  background: transparent;
  color: var(--fenix-ink);
  border: 1px solid var(--fenix-border);
}
.hero .cta.secondary:hover {
  border-color: var(--fenix-link-hover);
  color: var(--fenix-link-hover);
}

/* ── 9. 章节卡片网格 —— 扁平化(去掉浮起+阴影) ────────────────── */

/* 首页三列统计(10 章 / 88 实验 / 5 语言) */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 1.4rem 0 2rem;
  padding: 0;
}
@media (max-width: 720px) {
  .stat-row { grid-template-columns: 1fr; }
}
.stat-row p {
  background: var(--fenix-bg);
  border: 1px solid var(--fenix-border);
  border-radius: 4px;
  padding: 14px 16px;
  margin: 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--fenix-ink-soft);
}
.stat-row p strong {
  display: block;
  color: var(--fenix-ink);
  font-size: 0.95rem;
  margin-bottom: 3px;
  font-weight: 600;
}

/* 章节卡片网格(首页 + 各章实验索引页通用) */
.exp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  background: var(--fenix-border);
  border: 1px solid var(--fenix-border);
  border-radius: 4px;
  overflow: hidden;
  margin: 1.4rem 0;
}
.exp-card {
  display: block;
  background: var(--fenix-bg);
  padding: 14px 16px;
  text-decoration: none !important;
  color: var(--fenix-ink);
  border: none;
  border-radius: 0;
  transition: background .12s;
}
.exp-card:hover {
  background: var(--fenix-bg-soft);
  border-color: transparent;
  transform: none;
  box-shadow: none !important;
}
.exp-card .exp-title {
  display: block;
  color: var(--fenix-ink);
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 6px;
  line-height: 1.4;
}
.exp-card:hover .exp-title {
  color: var(--fenix-link-hover);
}
.exp-card .exp-desc {
  display: block;
  color: var(--fenix-ink-soft);
  font-size: 0.78rem;
  line-height: 1.55;
}

/* ── 10. 移动端调整 ─────────────────────────────────────────── */

@media screen and (max-width: 600px) {
  .md-typeset { font-size: 16.5px; }
  .md-typeset h1 { font-size: 34px !important; }
  .md-typeset h2 { font-size: 26px; }
  .hero { padding: 2.5rem 1rem 1.5rem; }
  .hero h1 { font-size: 2rem; }
}

/* ── 11. 暗色模式同步 —— 保持 fenix 风格,只是反色 ──────────────── */

[data-md-color-scheme="slate"] {
  --fenix-ink:        #e8ede9;
  --fenix-ink-soft:   #aab4ae;
  --fenix-ink-mute:   #818d86;
  --fenix-border:     #303a34;
  --fenix-bg:         #101512;
  --fenix-surface:    #161c18;
  --fenix-bg-soft:    #1b231e;
  --fenix-selection:  #284c3d;
  --fenix-code-bg:    rgba(240, 246, 252, 0.08);
  --fenix-code-ink:   #79c0ff;
  --fenix-link:       #7db39c;
  --fenix-link-hover: #a7ceb8;
}
[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-sidebar--primary {
  background-color: var(--fenix-bg) !important;
  border-color: var(--fenix-border) !important;
}
[data-md-color-scheme="slate"] .exp-card,
[data-md-color-scheme="slate"] .hero {
  background: var(--fenix-bg);
}

/* ── 12. 阅读框架与首页 ─────────────────────────────────────── */

html {
  background: var(--fenix-bg);
  scroll-padding-top: 5rem;
}

body {
  background: var(--fenix-bg);
  color: var(--fenix-ink);
}

.md-grid {
  max-width: 92rem;
}

.md-main__inner {
  margin-top: 0;
}

.md-content__inner {
  position: relative;
  max-width: var(--reader-frame-width);
  margin-inline: auto;
  padding: 3.75rem 2.25rem 7rem;
}

::selection {
  background: var(--fenix-selection);
  color: var(--fenix-ink);
}

.md-typeset .md-typeset__table {
  width: 100%;
  margin: 1.6rem 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.md-typeset .md-typeset__table table:not([class]) {
  margin: 0;
}

.md-typeset p:has(> img:only-child) {
  margin-block: 2rem;
  text-align: center;
}

.md-typeset p > img:only-child,
.md-typeset figure img {
  max-width: 100%;
  border-radius: 6px;
}

.md-typeset figcaption,
.md-typeset .image-caption {
  color: var(--fenix-ink-mute);
  font-size: 13px;
  line-height: 1.6;
}

.md-typeset hr {
  margin: 3.5rem 0;
  border-color: var(--fenix-border);
}

.md-content__inner:has(.home-hero) {
  max-width: 72rem;
}

.md-typeset img {
  height: auto;
}

.md-typeset :focus-visible,
.lang-select:focus-visible,
.md-header__button:focus-visible,
.md-skip:focus-visible {
  outline: 2px solid var(--fenix-link);
  outline-offset: 3px;
}

.reading-progress {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--fenix-link);
  transform: scaleX(var(--reading-progress, 0));
  transform-origin: left center;
  pointer-events: none;
  transition: transform .08s linear;
}

/* ── 13. 阅读导航、阅读设置与检索层级 ───────────────────────── */

html[data-reader-scale="compact"] { --reader-font-size: 16px; }
html[data-reader-scale="standard"] { --reader-font-size: 17px; }
html[data-reader-scale="large"] { --reader-font-size: 18.5px; }
html[data-reader-width="narrow"] { --reader-frame-width: 760px; }
html[data-reader-width="standard"] { --reader-frame-width: 820px; }
html[data-reader-width="wide"] { --reader-frame-width: 900px; }

.reader-controls {
  position: relative;
  z-index: 4;
  float: right;
  margin: -.15rem 0 .8rem .55rem;
  font-family: var(--reader-ui-font);
}

.reader-controls__trigger,
.reader-controls__close,
.reader-controls__choices button {
  appearance: none;
  border: 0;
  color: var(--fenix-ink);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.reader-controls__trigger {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--fenix-border);
  border-radius: 8px;
  background: var(--fenix-surface);
  font-family: var(--reader-display-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  transition: border-color .15s ease, background-color .15s ease;
}

.reader-controls__trigger:hover,
.reader-controls__trigger[aria-expanded="true"] {
  border-color: var(--fenix-link);
  color: var(--fenix-link-hover);
  background: var(--fenix-bg-soft);
}

.reader-controls__panel {
  position: absolute;
  top: calc(100% + .55rem);
  right: 0;
  width: 264px;
  padding: 1rem;
  border: 1px solid var(--fenix-border);
  border-radius: 12px;
  background: var(--fenix-surface);
  box-shadow: 0 18px 50px rgba(24, 33, 29, .14);
}

.reader-controls__panel[hidden] {
  display: none;
}

.reader-controls__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .9rem;
  color: var(--fenix-ink);
  font-size: 14px;
}

.reader-controls__header strong {
  font-weight: 680;
}

.reader-controls__close {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 6px;
  color: var(--fenix-ink-mute);
  font-size: 20px;
  line-height: 1;
}

.reader-controls__close:hover {
  color: var(--fenix-ink);
  background: var(--fenix-bg-soft);
}

.reader-controls__row + .reader-controls__row {
  margin-top: .9rem;
}

.reader-controls__row > span {
  display: block;
  margin-bottom: .4rem;
  color: var(--fenix-ink-soft);
  font-size: 12px;
}

.reader-controls__choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 3px;
  border: 1px solid var(--fenix-border);
  border-radius: 8px;
  background: var(--fenix-bg-soft);
}

.reader-controls__choices button {
  min-height: 32px;
  border-radius: 5px;
  color: var(--fenix-ink-soft);
  font-size: 12px;
}

.reader-controls__choices button:hover {
  color: var(--fenix-ink);
}

.reader-controls__choices button[aria-pressed="true"] {
  color: var(--fenix-bg);
  background: var(--fenix-ink);
}

.reader-controls button:focus-visible {
  outline: 2px solid var(--fenix-link);
  outline-offset: 2px;
}

@media screen and (min-width: 60em) {
  body:has(.home-hero) .md-sidebar--secondary {
    display: none;
  }

  .md-sidebar--primary .md-sidebar__scrollwrap {
    padding-right: 1rem;
  }

  .md-sidebar--primary .md-nav__link {
    font-size: 14px;
  }

  .md-sidebar--primary nav nav .md-nav__link {
    color: var(--fenix-ink-soft) !important;
    font-size: 13px;
  }

  .md-sidebar--secondary {
    width: 232px;
  }

  .md-sidebar--secondary .md-sidebar__scrollwrap {
    margin-left: .4rem;
    padding-left: 1.15rem;
    border-left: 1px solid var(--fenix-border);
  }

  .md-sidebar--secondary .md-nav__title {
    padding-bottom: .55rem;
    color: var(--fenix-ink-mute) !important;
    font-size: 11px;
    letter-spacing: .12em;
  }

  .md-sidebar--secondary .md-nav__link {
    padding: .34rem 0;
    color: var(--fenix-ink-soft) !important;
    font-size: 12.5px;
    line-height: 1.48;
  }

  .md-sidebar--secondary .md-nav__link--active {
    color: var(--fenix-link-hover) !important;
    font-weight: 650;
  }
}

.md-search-result__meta {
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--fenix-border);
  background: var(--fenix-bg-soft);
  color: var(--fenix-ink-mute);
  font-size: 12px;
}

.md-search-result__link {
  border-top: 1px solid var(--fenix-border);
}

.md-search-result__item:first-child .md-search-result__link {
  border-top: 0;
}

.md-search-result__article {
  padding: .95rem 1.1rem;
}

.md-search-result .md-typeset h1,
.md-search-result .md-typeset h2,
.md-search-result .md-typeset h3 {
  margin: 0 0 .35rem;
  padding: 0;
  border: 0;
  color: var(--fenix-ink) !important;
  font-family: var(--reader-body-font);
  font-size: 18px !important;
  font-weight: 680 !important;
  line-height: 1.42;
  letter-spacing: -.01em;
}

.md-search-result .md-typeset p {
  margin: .3rem 0;
  color: var(--fenix-ink-soft);
  font-size: 13.5px;
  line-height: 1.62;
}

.md-search-result__more summary {
  color: var(--fenix-link) !important;
  font-size: 12.5px;
}

.md-search-result mark {
  color: var(--fenix-link) !important;
  background: transparent;
}

body:has(#__search:checked) .reader-controls {
  visibility: hidden;
}

@media screen and (min-width: 60em) {
  .md-search__form {
    border-radius: 10px 10px 0 0;
  }

  .md-search__output {
    border: 1px solid var(--fenix-border);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    background: var(--fenix-surface);
    box-shadow: 0 24px 70px rgba(24, 33, 29, .18);
    overflow: hidden;
  }
}

.md-footer {
  border-top: 1px solid var(--fenix-border);
  background: var(--fenix-surface) !important;
  color: var(--fenix-ink);
}

.md-footer__inner {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.md-footer__link,
.md-footer__link:focus,
.md-footer__link:hover {
  color: var(--fenix-ink) !important;
}

.md-footer__direction {
  color: var(--fenix-ink-mute);
  font-size: 11px;
  letter-spacing: .06em;
}

.md-footer__title {
  font-family: var(--reader-display-font);
  font-size: 18px;
  font-weight: 700;
}

.md-footer-meta {
  border-top: 1px solid var(--fenix-border);
  background: var(--fenix-bg-soft) !important;
}

.md-copyright,
.md-copyright a {
  color: var(--fenix-ink-soft) !important;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(24rem, 1.1fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
  min-height: calc(100dvh - 12rem);
  padding: 3.5rem 0 3rem;
}

.home-hero__copy > p:not(.home-actions) {
  max-width: 31rem;
  margin: 1.25rem 0 0;
  color: var(--fenix-ink-soft);
  font-size: 1.03rem;
  line-height: 1.75;
}

.md-typeset .home-hero h1 {
  max-width: 9ch;
  margin: .75rem 0 0;
  font-size: clamp(2.65rem, 5vw, 4.6rem) !important;
  font-weight: 680 !important;
  letter-spacing: -.045em;
  line-height: 1.08;
}

.home-eyebrow {
  color: var(--fenix-link);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .08em;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 2rem !important;
}

.md-typeset a.home-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .65rem 1rem;
  border: 1px solid var(--fenix-border);
  border-radius: 6px;
  color: var(--fenix-ink) !important;
  background: transparent;
  font-size: .8rem;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none !important;
  transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}

.md-typeset a.home-button.primary {
  border-color: var(--fenix-ink);
  background: var(--fenix-ink);
  color: var(--fenix-bg) !important;
}

.md-typeset a.home-button:hover {
  border-color: var(--fenix-link);
  color: var(--fenix-link) !important;
}

.md-typeset a.home-button.primary:hover {
  background: var(--fenix-link);
  color: var(--fenix-bg) !important;
}

.md-typeset a.home-button:active {
  transform: translateY(1px);
}

.home-hero__visual {
  margin: 0;
}

.home-hero__visual img {
  display: block;
  width: 100%;
  border: 1px solid var(--fenix-border);
  border-radius: 8px;
  background: #fff;
}

.home-hero__visual figcaption {
  margin-top: .65rem;
  color: var(--fenix-ink-mute);
  font-family: var(--md-code-font);
  font-size: .68rem;
  text-align: right;
}

.home-facts {
  display: grid;
  grid-template-columns: .8fr 1fr 1.4fr;
  border-top: 1px solid var(--fenix-border);
  border-bottom: 1px solid var(--fenix-border);
  margin: 0 0 4.5rem;
}

.home-facts p {
  display: grid;
  gap: .18rem;
  margin: 0;
  padding: 1.15rem 1.25rem;
  border-left: 1px solid var(--fenix-border);
}

.home-facts p:first-child {
  padding-left: 0;
  border-left: 0;
}

.home-facts strong {
  color: var(--fenix-ink);
  font-size: .92rem;
  font-weight: 680;
}

.home-facts span {
  color: var(--fenix-ink-soft);
  font-size: .7rem;
}

.home-bookends {
  display: flex;
  gap: 1.25rem;
  margin: 1.5rem 0 2rem;
  font-size: .78rem;
}

.home-bookends p {
  margin: 0;
}

.chapter-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2rem;
  margin: 1rem 0 5rem;
  border-bottom: 1px solid var(--fenix-border);
}

.md-typeset a.chapter-item {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: .8rem;
  align-items: start;
  min-height: 5.6rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--fenix-border);
  color: var(--fenix-ink) !important;
}

.chapter-number {
  color: var(--fenix-ink-mute);
  font-family: var(--md-code-font);
  font-size: .68rem;
}

.chapter-item strong,
.chapter-item small {
  display: block;
}

.chapter-item strong {
  font-size: .86rem;
  line-height: 1.45;
}

.chapter-item small {
  margin-top: .35rem;
  color: var(--fenix-ink-soft);
  font-size: .7rem;
  font-weight: 400;
  line-height: 1.6;
  opacity: 1;
}

.md-footer-meta .md-copyright a {
  color: #8fbba8 !important;
}

.md-typeset a.chapter-item:hover strong {
  color: var(--fenix-link);
}

.home-resources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  margin: 1.5rem 0 5rem;
}

.home-resources section {
  padding-top: 1.25rem;
  border-top: 2px solid var(--fenix-ink);
}

.home-resources h3 {
  margin-top: 0;
}

.home-resources p {
  color: var(--fenix-ink-soft);
}

[data-md-color-scheme="slate"] .home-hero__visual img {
  filter: invert(.88) hue-rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media screen and (max-width: 76rem) {
  .md-content__inner {
    padding-inline: 1.75rem;
  }

  .home-hero {
    grid-template-columns: minmax(0, 1fr) minmax(21rem, 1fr);
    gap: 2.5rem;
  }
}

@media screen and (max-width: 59.984375em) {
  .md-nav--primary .md-nav__title {
    background: var(--fenix-bg) !important;
    color: var(--fenix-ink) !important;
  }

  .md-nav__source {
    background: var(--fenix-bg-soft);
    color: var(--fenix-ink);
  }

  .md-nav__source .md-source,
  .md-nav__source .md-source__repository {
    color: var(--fenix-ink);
  }

  .md-search-result__link mark,
  .md-search-result__more summary,
  .md-search-result__more summary > div {
    color: var(--fenix-link) !important;
  }

  .md-content__inner {
    max-width: 760px;
    padding: 2.75rem 1.5rem 5.5rem;
  }

  .home-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 2rem 0 2.5rem;
  }

  .md-typeset .home-hero h1 {
    max-width: none;
  }

  .home-hero__visual {
    max-width: 38rem;
  }

  .home-facts {
    grid-template-columns: 1fr;
    margin-bottom: 3.5rem;
  }

  .home-facts p,
  .home-facts p:first-child {
    padding: .9rem 0;
    border-top: 1px solid var(--fenix-border);
    border-left: 0;
  }

  .home-facts p:first-child {
    border-top: 0;
  }
}

@media screen and (max-width: 44rem) {
  .header-brand-full { display: none; }
  .header-brand-short { display: inline; }

  .md-header__title {
    margin-left: .2rem;
    font-size: 14px;
  }

  .reader-controls {
    margin-right: 0;
  }

  .reader-controls__panel {
    position: fixed;
    top: 68px;
    right: 12px;
    left: 12px;
    width: auto;
  }

  .reader-controls__row--width {
    display: none;
  }

  .md-footer__inner:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .75rem;
  }

  .md-footer__link {
    width: 100%;
    min-width: 0;
  }

  .md-footer__link--next {
    margin-left: 0;
  }

  .md-footer__title {
    overflow: hidden;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .md-footer__link--prev .md-footer__title {
    display: block;
  }

  html[data-reader-scale="compact"] .md-typeset { font-size: 15.5px; }
  html[data-reader-scale="standard"] .md-typeset { font-size: 16.5px; }
  html[data-reader-scale="large"] .md-typeset { font-size: 18px; }

  .md-typeset {
    font-size: 16.5px;
    line-height: 1.84;
  }

  .md-typeset h1 {
    font-size: 34px !important;
    margin-bottom: 1.35rem;
  }

  .md-typeset h2 {
    margin-top: 3.5rem;
  }

  .md-content__inner {
    padding: 2.35rem 1.15rem 4.75rem;
  }

  .md-typeset .home-hero h1 {
    font-size: clamp(2.35rem, 12vw, 3.2rem) !important;
  }

  .chapter-list,
  .home-resources {
    grid-template-columns: 1fr;
  }

  .home-bookends {
    display: grid;
    gap: .6rem;
  }
}