/* ==========================================================================
   HiJudge 文档站 · 视觉层
   --------------------------------------------------------------------------
   设计来源：/home/lighthouse/hydro-ui/（设计系统.md + TYPOGRAPHY.md）
   字体资产：复用 hydro-ui/public 下的自托管字体，Caddy 侧用 handle 路由挂载
             （见 /root/.hydro/Caddyfile 的 docs.hanzel.top 块）

   Token 对照（hydro-ui 取值 → 本站）
     #1d1d1f            正文
     #6e6e73            次要文字
     rgba(29,29,31,.16) 主边框
     rgba(29,29,31,.12) 次边框
     rgba(29,29,31,.05) 悬停填充
     #0071e3            品牌色 / 链接 / 当前章节
     #0077ed            品牌色 hover
     #fbfbfd            页面与侧栏底色
     #fff               卡片（代码块以外的高亮面）

   沿用的四条原则：
     1. 中性层级靠「同一个墨色的不同透明度」，不排灰色色卡
     2. 一个品牌色；hover 态单独给值，不做半透明的推导
     3. 内容层用 rem（根 20px），界面层用 px
     4. 标题 weight 400，强调 weight 700——不用 500/600 这种中间值

   注意：GitBook 3 的默认样式在本文件之前加载，同特异性时后者胜；
   凡是跟默认值打架的规则，选择器都带了 .book / .markdown-section 前缀提权。
   ========================================================================== */

/* ===== 字体：直接复用 hydro-ui 的字体 CSS =====
   HarmonyOS Sans SC 按 164 个 unicode-range 分片，浏览器只下载页面用到的；
   汉仪文黑 85W 是标题专用子集（4 片）。
   不复制文件——hydro-ui 换字体时本站自动跟着变。 */
@import url("/fonts-harmony/Regular.css");
@import url("/fonts-harmony/Bold.css");
@import url("/fonts-hanyi/fonts-hanyi.css");
@import url("/fonts-mono.css");

/* Fira Sans 只有两个文件，不值得再挂一个 CSS 路由，直接内联声明 */
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Fira Sans"), local("FiraSans-Regular"),
       url("/fonts/fira-sans-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Fira Sans Bold"), local("FiraSans-Bold"),
       url("/fonts/fira-sans-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Token ===== */
:root {
  --hd-text:            #1d1d1f;
  --hd-text-secondary:  #6e6e73;
  --hd-text-tertiary:   #77777e;
  --hd-text-quaternary: #c7c7cc;
  --hd-border:          rgba(29, 29, 31, .16);
  --hd-border-light:    rgba(29, 29, 31, .12);
  --hd-fill-hover:      rgba(29, 29, 31, .05);
  --hd-fill-track:      #ececf0;
  --hd-brand:           #0071e3;
  --hd-brand-hover:     #0077ed;
  --hd-brand-deep:      #0066cc;
  --hd-brand-soft:      rgba(0, 113, 227, .10);
  --hd-bg:              #fbfbfd;
  --hd-bg-card:         #fff;

  --hd-radius-sm: 8px;
  --hd-radius-md: 12px;
  --hd-radius-lg: 16px;

  /* 侧栏宽度：单列管理。GitBook 默认把 300px 写死在三个地方
     （.book-summary 的 width / left，.book.with-summary .book-body 的 left），
     下面用 var 统一，改一处即可。 */
  --hd-sidebar: 336px;

  --hd-font-sans: "Fira Sans", "HarmonyOS Sans SC", -apple-system,
    BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --hd-font-display: "HanYi WenHei 85", "Fira Sans", "HarmonyOS Sans SC",
    -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    sans-serif;
  --hd-font-mono: "JetBrains Mono", "Fira Mono", "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

/* ===== 基础：根字号 20px，等效 CTRL++ 125% =====
   注意 GitBook 默认 `html{font-size:62.5%}`（= 10px，方便它自己算 rem），
   而且 <html> 上没有 class="book"，所以只能挂 :root。
   :root 的特异性 (0,1,0) 高于 html (0,0,1)，不用 !important 也能压住。 */
:root {
  font-size: 20px;
}

html,
body {
  font-family: var(--hd-font-sans);
  font-size: 1rem;
  color: var(--hd-text);
  background: var(--hd-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   侧栏
   ========================================================================== */
.book .book-summary {
  width: var(--hd-sidebar);
  left: calc(var(--hd-sidebar) * -1);
  background: var(--hd-bg);
  border-right: 1px solid var(--hd-border-light);
  color: var(--hd-text);
  font-family: var(--hd-font-sans);
  font-size: 15px;
}

.book.with-summary .book-summary {
  left: 0;
}

@media (min-width: 600px) {
  .book.with-summary .book-body {
    left: var(--hd-sidebar);
  }
}

/* 搜索框：做成一个安静的圆角面，不做成输入框的样子 */
.book .book-summary #book-search-input {
  margin: 0;
  padding: 16px 16px 12px;
  background: transparent;
  border-bottom: 0;
}

.book .book-summary #book-search-input input {
  width: 100%;
  height: 34px;
  padding: 0 12px;
  font-family: var(--hd-font-sans);
  font-size: 14px;
  color: var(--hd-text);
  background: var(--hd-fill-hover);
  border: 1px solid transparent;
  border-radius: var(--hd-radius-sm);
  outline: none;
  transition: background .18s ease, border-color .18s ease;
}

.book .book-summary #book-search-input input::placeholder {
  color: var(--hd-text-secondary);
}

.book .book-summary #book-search-input input:focus {
  background: var(--hd-bg-card);
  border-color: var(--hd-brand);
}

/* 目录条目 */
.book .book-summary ul.summary {
  padding: 4px 8px 40px;
}

.book .book-summary ul.summary li a,
.book .book-summary ul.summary li span {
  padding: 7px 10px;
  color: var(--hd-text);
  font-size: 15px;
  line-height: 1.45;
  border-radius: var(--hd-radius-sm);
  transition: background .15s ease, color .15s ease;
}

.book .book-summary ul.summary li a:hover {
  background: var(--hd-fill-hover);
  color: var(--hd-text);
  text-decoration: none;
}

/* 章节序号：压低到四级灰，让标题本身成为视觉主体 */
.book .book-summary ul.summary li a b {
  padding-right: 8px;
  color: var(--hd-text-quaternary);
  font-weight: 400;
}

/* 当前章节：品牌色 + 浅底，不用下划线也不用左边框 */
.book .book-summary ul.summary li.active > a {
  color: var(--hd-brand);
  background: var(--hd-brand-soft);
  font-weight: 400;
}

.book .book-summary ul.summary li.active > a b {
  color: var(--hd-brand);
}

/* 分节标题（SUMMARY.md 里的 `## 分节`）*/
.book .book-summary ul.summary li.header {
  padding: 22px 10px 6px;
  color: var(--hd-text-tertiary);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: none;
}

.book .book-summary ul.summary li.divider {
  background: var(--hd-border-light);
  margin: 8px 10px;
}

/* ==========================================================================
   顶栏
   ========================================================================== */
.book .book-header {
  height: 56px;
  padding: 0 16px;
  font-family: var(--hd-font-sans);
  font-size: 15px;
  color: var(--hd-text-secondary);
  background: rgba(251, 251, 253, .82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hd-border-light);
}

.book .book-header .btn {
  color: var(--hd-text-secondary);
  transition: color .15s ease, background .15s ease;
}

.book .book-header .btn:hover {
  color: var(--hd-brand);
  background: transparent;
}

.book .book-header h1 {
  font-family: var(--hd-font-display);
  font-size: 15px;
  font-weight: 400;
  color: var(--hd-text);
  letter-spacing: .01em;
}

.book .book-header h1 a {
  color: inherit;
}

/* ==========================================================================
   正文容器
   --------------------------------------------------------------------------
   intopic-toc 插件会把 .page-wrapper 改成 flex，并把 .page-inner 压到 60%、
   toc 占 20%——1440 视口下正文只剩 660px，比 42em（840）窄一截。
   这里把比例换成「正文自适应 + toc 固定宽度」，正文回到 840。
   ========================================================================== */
.book .page-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  padding-right: 24px;
}

.book .page-wrapper .page-inner {
  width: auto !important;    /* 插件写了 width:60% !important，必须同级对抗 */
  flex: 1 1 auto;
  max-width: 840px;          /* = 42em @ 20px，与 hydro-ui 的行宽一致 */
  min-width: 0;              /* 允许收缩，否则宽代码块会把 flex 项撑爆 */
  padding: 32px 0 88px;
}

.book .page-inner .btn-group .btn {
  border-radius: 0;
  background: var(--hd-fill-hover);
}

/* ===== 右侧「本页导航」 ===== */
.book .page-wrapper nav.intopic-toc {
  flex: 0 0 244px;
  width: 244px;
  margin: 0;
  padding-top: 44px;
  font-family: var(--hd-font-sans);
  max-height: calc(100vh - 88px);
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
}

/* 目录长了才出滚动条，滚动条别把文字挤到贴边 */
.book nav.intopic-toc::-webkit-scrollbar {
  width: 4px;
}

.book nav.intopic-toc::-webkit-scrollbar-thumb {
  background: var(--hd-border);
  border-radius: 2px;
}

.book nav.intopic-toc h3 {
  padding: 0 0 10px;
  color: var(--hd-text-tertiary);
  font-family: var(--hd-font-display);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .04em;
}

/* 插件给 h3 挂了条 svg 图标；用了自定义字体后基线对不齐，直接去掉 */
.book nav.intopic-toc h3:before {
  content: none;
}

.book nav.intopic-toc .navbar-nav::before {
  border-left-color: var(--hd-border-light);
}

.book nav.intopic-toc .nav > li > a {
  padding: 3px 0 3px 11px;
  color: var(--hd-text-tertiary);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  border-left: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

.book nav.intopic-toc.nested .nav > li > a,
.book nav.intopic-toc .nav ul > li > a {
  font-size: 12.5px;
  font-weight: 400;
}

.book nav.intopic-toc .nav > li > a:hover,
.book nav.intopic-toc .nav > li > a:focus {
  padding-left: 11px;
  color: var(--hd-text);
  background: transparent;
  border-left-color: var(--hd-border);
  text-decoration: none;
}

.book nav.intopic-toc .nav > li.active > a,
.book nav.intopic-toc .nav > li.active > a:hover,
.book nav.intopic-toc .nav > li.active > a:focus {
  padding-left: 11px;
  color: var(--hd-brand);
  font-weight: 400;
  background: transparent;
  border-left: 2px solid var(--hd-brand);
}

.book nav.intopic-toc .nav ul.level-1 > li > a,
.book nav.intopic-toc .nav ul.level-1 > li > a:hover,
.book nav.intopic-toc .nav ul.level-1 > li > a:focus {
  padding-left: 22px;
}

/* ==========================================================================
   翻页箭头
   --------------------------------------------------------------------------
   .navigation 是 .book-body 的直接子元素（不在 .page-wrapper 里），默认 90px
   宽、left/right:0 贴边、占满整列高度。正文加到 840 之后它压住正文左边 77px，
   右侧则压住页内目录。
   读者有左侧完整目录 + 右侧本页目录两条路径，这对箭头的信息量最低，去掉。
   ========================================================================== */
.book .book-body > .navigation {
  display: none;
}

/* 页面窄到放不下「正文 + 目录」时，目录让位，正文回到块级布局。
   flex item 的 flex-basis 是内容宽度，宽代码块会把 .page-inner 撑到 589px
   （视口只有 390），min-width:0 也拦不住；退回 block 就正常了。 */
@media (max-width: 1180px) {
  .book .page-wrapper {
    display: block;
    padding-right: 0;
  }
  .book .page-wrapper nav.intopic-toc {
    display: none;
  }
  .book .page-wrapper .page-inner {
    margin: 0 auto;
    padding: 32px 40px 88px;
  }
}

/* ==========================================================================
   正文排版
   ========================================================================== */
/* ==========================================================================
   正文字号：接管 GitBook 的「Aa 字号调节」
   --------------------------------------------------------------------------
   fontsettings 插件（顶栏那个 Aa 按钮）在 website.css 里写了四档：
     .book.font-size-0 .book-body .page-inner section { font-size: 1.2rem }
     ... 一直到 font-size-3 的 1.8rem
   特异性 (0,4,1)，光写 .markdown-section 压不住——默认档 font-size-2 的
   1.6rem 会直接把正文顶到 32px（根字号 20px 时）。
   这里把四档按 20px 基准重算，默认档正好等于 1rem。
   ========================================================================== */
.book.font-size-0 .book-body .page-inner section { font-size: .88rem; }  /* 17.6px */
.book.font-size-1 .book-body .page-inner section { font-size: .94rem; }  /* 18.8px */
.book.font-size-2 .book-body .page-inner section { font-size: 1rem; }    /* 20px（默认） */
.book.font-size-3 .book-body .page-inner section { font-size: 1.12rem; } /* 22.4px */

.markdown-section {
  color: var(--hd-text);
  font-family: var(--hd-font-sans);
  font-size: 1rem;
  line-height: 1.7;
}

/* 标题一律 400 字重 + 汉仪文黑；层级靠字号拉开，不靠加粗 */
.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section h5,
.markdown-section h6 {
  font-family: var(--hd-font-display);
  font-weight: 400;
  color: var(--hd-text);
  font-synthesis: none;
}

.markdown-section h1 {
  font-size: 1.6rem;         /* 32px */
  line-height: 1.3;
  margin: 0 0 1.2em;
  letter-spacing: .01em;
}

.markdown-section h2 {
  font-size: 1.25rem;        /* 25px */
  line-height: 1.35;
  margin: 2.2em 0 .7em;
  padding-top: 1.1em;
  border-top: 1px solid var(--hd-border-light);
  letter-spacing: .01em;
}

.markdown-section h3 {
  font-size: 1rem;           /* 20px */
  line-height: 1.4;
  margin: 2em 0 .6em;
}

/* 页面标题下面紧跟的那个 h2（每章开头都是这个结构）：不画分割线，
   否则 h1 底部留白 + h2 上边框 + padding 会拉出近 100px 的空白 */
.markdown-section h1 + h2 {
  margin-top: 1.4em;
  padding-top: 0;
  border-top: 0;
}

.markdown-section h4 {
  font-size: 1rem;
  line-height: 1.4;
  margin: 1.6em 0 .5em;
  font-weight: 700;
  font-family: var(--hd-font-sans);
}

.markdown-section h5,
.markdown-section h6 {
  font-size: .9rem;
  line-height: 1.4;
  margin: 1.4em 0 .4em;
  font-weight: 700;
  font-family: var(--hd-font-sans);
  color: var(--hd-text-secondary);
}

/* 标题锚点：默认的链形图标会顶乱行距，收到右侧且只在悬停时出现 */
.markdown-section .headerlink {
  margin-left: .3em;
  font-size: .8em;
  color: var(--hd-text-quaternary);
  opacity: 0;
  transition: opacity .15s ease;
}

.markdown-section h1:hover .headerlink,
.markdown-section h2:hover .headerlink,
.markdown-section h3:hover .headerlink,
.markdown-section h4:hover .headerlink {
  opacity: 1;
}

.markdown-section p {
  margin: 1em 0;
}

.markdown-section strong,
.markdown-section b {
  font-weight: 700;
  color: var(--hd-text);
}

/* 链接：默认不带下划线，悬停时从左向右展开一条 1px 线（与 OJ 顶栏同款动效） */
.markdown-section a {
  color: var(--hd-brand);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size .2s cubic-bezier(.4, 0, .2, 1), color .15s ease;
  padding-bottom: 1px;
}

.markdown-section a:hover {
  color: var(--hd-brand-hover);
  text-decoration: none;
  background-size: 100% 1px;
}

/* 标题锚点、按钮类伪链接、图片链接不参与上面的动效 */
.markdown-section a.headerlink,
.markdown-section a[href^="javascript"],
.markdown-section a:has(img) {
  background-image: none;
  padding-bottom: 0;
}

.markdown-section hr {
  height: 0;
  margin: 2.4em 0;
  border: 0;
  border-top: 1px solid var(--hd-border-light);
}

/* ===== 列表 ===== */
.markdown-section ul,
.markdown-section ol {
  margin: 1em 0;
  padding-left: 1.6em;
}

.markdown-section li {
  margin: .35em 0;
}

.markdown-section li::marker {
  color: var(--hd-text-quaternary);
}

/* ===== 引用块 ===== */
.markdown-section blockquote {
  margin: 1.4em 0;
  padding: .9em 1.2em;
  color: var(--hd-text-secondary);
  background: var(--hd-fill-hover);
  border-left: 3px solid rgba(29, 29, 31, .28);
  border-radius: 0 var(--hd-radius-sm) var(--hd-radius-sm) 0;
}

.markdown-section blockquote p {
  margin: .4em 0;
}

/* ==========================================================================
   代码
   ========================================================================== */
.markdown-section code,
.markdown-section kbd,
.markdown-section pre {
  font-family: var(--hd-font-mono);
  /* 关掉连字：=> 变成单箭头、!= 变成 ≠，在讲义里会被当成语法错误 */
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0, "dlig" 0;
}

.markdown-section pre {
  margin: 1.4em 0;
  padding: .9rem 1.1rem;     /* 18px / 22px */
  font-size: .9rem;          /* 18px，与 OJ 在线编程的 Monaco 同档 */
  line-height: 1.55;
  color: var(--hd-text);
  background: #f5f5f7;
  border: 0;
  border-radius: var(--hd-radius-md);
  overflow: auto;
}

.markdown-section pre > code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  background: transparent;
  border-radius: 0;
}

.markdown-section :not(pre) > code {
  padding: .1em .35em;
  font-size: .88em;
  color: var(--hd-text);
  background: var(--hd-fill-hover);
  border: 0;
  border-radius: 5px;
  white-space: nowrap;
}

/* 代码块里的行号槽（highlight 插件生成）不要挤到正文 */
.markdown-section pre .hljs-ln-line {
  font-family: inherit;
}

/* ==========================================================================
   表格
   ========================================================================== */
.markdown-section table {
  display: table;
  width: 100%;
  margin: 1.5em 0;
  border-collapse: collapse;
  font-size: .9rem;          /* 18px，与代码块同档 */
  line-height: 1.5;
}

.markdown-section table tr {
  background: transparent;
  border-top: 0;
}

/* GitBook 默认给偶数行刷底色（淡斑马纹），与「只靠一条细线分行」的设计冲突 */
.markdown-section table tr:nth-child(2n) {
  background: transparent;
}

.markdown-section table thead tr {
  border-bottom: 1px solid var(--hd-border);
}

.markdown-section table tbody tr + tr {
  border-top: 1px solid var(--hd-border-light);
}

.markdown-section table th {
  padding: 9px 14px;
  color: var(--hd-text-secondary);
  font-weight: 400;
  text-align: left;
  background: transparent;
  border: 0;
}

.markdown-section table td {
  padding: 9px 14px;
  color: var(--hd-text);
  border: 0;
}

/* 首列多数是题目序号，左侧少留一点白让它靠齐正文。
   不要给首列固定宽度——中文首列（如「可以先看」）会被压成两行。 */
.markdown-section table td:first-child,
.markdown-section table th:first-child {
  padding-left: 2px;
  color: var(--hd-text-tertiary);
  white-space: nowrap;
}

/* ==========================================================================
   提示框（callouts 插件渲染成 Bootstrap panel）
   --------------------------------------------------------------------------
   原来是 Bootstrap 3 的面板：1px 边框 + 4px 圆角 + 彩色标题条。
   改成「淡色底 + 左侧色条 + 12px 圆角」，与 Apple 系的分组卡片一致。
   ========================================================================== */
.markdown-section .panel {
  margin: 1.5em 0;
  background: var(--hd-fill-hover);
  border: 0;
  border-left: 3px solid var(--hd-border);
  border-radius: var(--hd-radius-md);
  box-shadow: none;
}

.markdown-section .panel .panel-heading {
  padding: 14px 18px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.markdown-section .panel .panel-title {
  color: var(--hd-text);
  font-family: var(--hd-font-sans);
  font-size: .8rem;          /* 16px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .01em;
}

.markdown-section .panel .panel-body {
  padding: 6px 18px 14px;
  color: var(--hd-text);
  font-size: .95rem;         /* 19px，比正文略收，靠底色区分层级 */
}

.markdown-section .panel .panel-body > :first-child {
  margin-top: 0;
}

.markdown-section .panel .panel-body > :last-child {
  margin-bottom: 0;
}

/* 四种类型：只改左侧色条和图标色，底色统一走同一个透明度 */
.markdown-section .panel-task {
  border-left-color: var(--hd-brand);
  background: var(--hd-brand-soft);
}
.markdown-section .panel-success {
  border-left-color: #2a8a4a;
  background: rgba(42, 138, 74, .08);
}
.markdown-section .panel-warning {
  border-left-color: #b8892b;
  background: rgba(184, 137, 43, .10);
}
.markdown-section .panel-danger {
  border-left-color: #c0392b;
  background: rgba(192, 57, 43, .07);
}

/* Info 退到中性色：它是补充说明，不该和「动手」抢注意力 */
.markdown-section .panel-info {
  border-left-color: var(--hd-border);
  background: var(--hd-fill-hover);
}

.markdown-section .panel-task .panel-title { color: var(--hd-brand-deep); }
.markdown-section .panel-success .panel-title { color: #1f6b39; }
.markdown-section .panel-warning .panel-title { color: #8a6410; }
.markdown-section .panel-danger .panel-title { color: #a5321f; }
.markdown-section .panel-info .panel-title { color: var(--hd-text-secondary); }

/* 面板里的列表不要再额外撑开留白 */
.markdown-section .panel .panel-body ul,
.markdown-section .panel .panel-body ol {
  margin: .5em 0;
  padding-left: 1.3em;
}

/* ==========================================================================
   公式
   --------------------------------------------------------------------------
   katex 插件靠 body 首字符判断块级/行内，当前 gitbook 版本会 trim，导致
   块级公式也按行内渲染（不居中）。这里按「公式独占段落」兜底。
   ========================================================================== */
.markdown-section p > .katex:only-child {
  display: block;
  margin: 1.4em 0;
  text-align: center;
  font-size: 1.05em;
}

.markdown-section .katex-display > .katex {
  display: block;
  margin: 1.4em 0;
  text-align: center;
}

/* ==========================================================================
   页脚
   ========================================================================== */
.markdown-section footer.page-footer-ex,
.page-footer-ex {
  margin-top: 3em;
  padding-top: 1.2em;
  color: var(--hd-text-tertiary);
  font-size: .7rem;          /* 14px */
  line-height: 1.6;
  border-top: 1px solid var(--hd-border-light);
}

.page-footer-ex a {
  color: var(--hd-text-secondary);
}

/* ==========================================================================
   翻页
   ========================================================================== */
.book .page-navigator {
  max-width: 840px;
  margin: 0 auto;
  padding: 0 40px 80px;
}

.book .page-navigator .navigation {
  border-top: 0;
}

.book .page-navigator .navigation .button {
  color: var(--hd-text-secondary);
  font-size: .75rem;
}

.book .page-navigator .navigation .button:hover {
  color: var(--hd-brand);
}

/* ==========================================================================
   窄屏
   ========================================================================== */
@media (max-width: 800px) {
  :root {
    font-size: 17px;
  }

  .book .page-wrapper .page-inner {
    padding: 24px 20px 64px;
  }

  .book .book-header {
    height: 50px;
  }

  .markdown-section h1 {
    font-size: 1.5rem;
  }

  .markdown-section h2 {
    font-size: 1.2rem;
    padding-top: .9em;
  }

  .markdown-section pre {
    font-size: .82rem;
    border-radius: var(--hd-radius-sm);
  }

  .markdown-section table {
    font-size: .82rem;
  }

  .book .page-navigator {
    padding: 0 20px 56px;
  }
}