/* ==========================================================================
   docstyle.css — 全站统一样式表
   ==========================================================================

   【文件说明】
   本文件是整个仓库所有 .html 页面共用的样式表,放置于仓库根目录。
   任何页面外观上的修改(颜色、字体、间距、布局等)都应在本文件中进行,
   不要在各个 .html 文件中单独写内联样式(style 属性)或 <style> 标签,
   以保证全站风格统一、便于维护。

   【如何在 HTML 中引用本文件】
   在每个 .html 文件的 <head> 中加入一行 <link> 标签,
   href 的相对路径取决于该 .html 文件相对仓库根目录的层级:

     - 根目录下的页面(如 HomePage.html):
         <link rel="stylesheet" href="docstyle.css">

     - 一级子目录下的页面(如 EVDC/SubPage_Test_EVDC.html):
         <link rel="stylesheet" href="../docstyle.css">

     - 二级子目录下的页面(如 Public/Notes_Temporary/SubPage_Test.html):
         <link rel="stylesheet" href="../../docstyle.css">

   【注意事项】
   1. 本文件顶部的 @import 语句用于加载 KaTeX 官方样式,
      按 CSS 规范,@import 必须出现在所有其他规则之前,请勿移动其位置。
   2. KaTeX 的 JavaScript 部分(公式渲染脚本)由根目录的 katex-init.js
      统一加载与管理,各 .html 的 <head> 中只需引用该文件一行即可,
      相对路径规则与本文件相同。
   3. 交互式目录(TOC)由根目录的 toc-init.js 在页面加载后自动生成,
      其外观样式集中在下方第 8 区;各 .html 的 <head> 中同样只需
      引用 toc-init.js 一行,无需手写任何目录 HTML。
   4. 各分区的基础样式(配色、字体、标题、段落、链接、卡片等)均已填好,
      需要微调时直接在对应分区内修改属性即可;全站配色集中在第 1 区,
      改那里的变量可一处生效、全站联动。

   【目录】
     0. 外部样式导入(KaTeX)
     1. 全局变量(CSS 自定义属性)
     2. 基础重置(Reset)
     3. 页面整体布局(body)
     4. 标题(h1 ~ h6)
     5. 段落与正文(p)
     6. 链接(a)
     7. KaTeX 数学公式微调
     8. 交互式目录(TOC,配合 toc-init.js)
     9. 主页与导航组件(页首 Hero / 卡片网格 / 面包屑导航 / 页脚)
    10. 响应式(移动端适配)
    11. 代码块与行内代码(code / pre,仿 Notion 圆角底色)
    12. 参考文献(references,[1] 编号 + 宋体 / Times New Roman)
   ========================================================================== */


/* ==========================================================================
   0. 外部样式导入(KaTeX)
   --------------------------------------------------------------------------
   KaTeX 数学公式渲染所必需的官方样式表(字体、公式排版规则等)。
   原先写在每个 .html 的 <head> 里:
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css">
   现统一改为在此处导入,各 .html 不再需要单独引用。

   若日后需要升级 KaTeX 版本,只需修改下面这一行 URL 中的版本号,
   并同步修改 katex-init.js 顶部的 KATEX_VERSION 常量,保持两处版本一致。
   ========================================================================== */

@import url("https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css");


/* ==========================================================================
   1. 全局变量(CSS 自定义属性)
   --------------------------------------------------------------------------
   在 :root 中定义全站通用的"设计变量",如主题色、字体、间距等。
   之后在任何规则里用 var(--变量名) 引用,改一处即可全站生效。

   示例(需要时取消注释并按需修改):
     --color-text:       #333333;      主体文字颜色
     --color-background: #ffffff;      页面背景色
     --color-link:       #0066cc;      链接颜色
     --font-body:        system-ui, "Microsoft YaHei", sans-serif;  正文字体
     --spacing-base:     1rem;         基础间距单位
   ========================================================================== */

:root {
    /* —— 调色板(全站配色,改一处即可全站生效)—— */
    --color-bg: #ffffff;          /* 页面背景色 */
    --color-bg-soft: #f5f7fa;     /* 次级背景:卡片悬停、条目悬停等柔和底色 */
    --color-text: #2b2b31;        /* 正文主色(深灰,比纯黑更柔和) */
    --color-text-muted: #6b6b76;  /* 次要文字:副标题、说明、页脚 */
    --color-heading: #1a1a22;     /* 各级标题颜色 */
    --color-link: #0b62d6;        /* 链接色 / 全站主题强调色 */
    --color-link-hover: #0a4ea8;  /* 链接悬停色(比默认更深) */
    --color-border: #e6e6ec;      /* 分隔线 / 卡片与面板边框 */
    --color-accent-soft: #eaf1fd; /* 强调色的浅色底(标签、当前条目背景) */

    /* —— 字体(中英文混排优先使用系统无衬线字体,清晰且加载快)—— */
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
    /* 学术字体:西文 Times New Roman + 中文宋体(供第 12 区引用)。
       逐字符回退:拉丁字母用 Times New Roman,中文回退到宋体系列
       (Windows: SimSun/宋体;macOS: Songti SC/STSong) */
    --font-academic: "Times New Roman", "SimSun", "宋体", "Songti SC", "STSong", serif;

    /* —— 圆角与阴影(供卡片、页首、面板等复用)—— */
    --radius: 0.75rem;                                    /* 通用圆角 */
    --shadow-sm: 0 1px 2px rgba(20, 20, 40, 0.05),
                 0 1px 3px rgba(20, 20, 40, 0.06);        /* 轻阴影:静止卡片 */
    --shadow-md: 0 8px 20px rgba(20, 20, 40, 0.08),
                 0 3px 8px rgba(20, 20, 40, 0.05);        /* 中阴影:悬停 / 浮层 */

    /* —— 页面整体布局(供第 3 区 body 引用)—— */
    --page-max-width: 80rem;    /* 正文最大宽度,超宽屏幕上正文不会无限拉伸 */
    --page-padding: 2.0rem;     /* 页边距:正文内容与页面边缘之间的留白 */

    /* —— 交互式目录 TOC(供第 8 区引用)—— */
    --toc-width: 16rem;                 /* 目录面板宽度 */
    --toc-panel-bg: var(--color-bg);    /* 目录面板背景色(实色:悬浮时文字更清晰) */
    --toc-bg: #f7f7f8;                  /* 开关按钮背景色 */
    --toc-border: var(--color-border);  /* 面板边框色 */
    --toc-text: #444444;                /* 目录条目文字色 */
    --toc-hover-bg: var(--color-bg-soft);   /* 条目鼠标悬停时的背景色 */
    --toc-active: var(--color-link);        /* 当前正在阅读章节的文字色 */
    --toc-active-bg: var(--color-accent-soft); /* 当前正在阅读章节的背景色 */

    /* —— 代码(供第 11 区引用,仿 Notion 风格)—— */
    --font-code: "SFMono-Regular", "SF Mono", ui-monospace, Menlo, Consolas,
                 "Liberation Mono", "Courier New", monospace;   /* 等宽字体栈 */
    --color-code-text: #eb5757;                  /* 行内代码文字色(Notion 同款暖红;想中性可改为 var(--color-text)) */
    --color-code-bg: rgba(135, 131, 120, 0.15);  /* 行内代码浅底(Notion 同款暖灰,白底上很柔和) */
    --color-codeblock-bg: #f7f6f3;               /* 代码块面板底色(Notion 同款暖白灰) */
}


/* ==========================================================================
   2. 基础重置(Reset)
   --------------------------------------------------------------------------
   抹平各浏览器默认样式的差异,让后续样式在所有浏览器中表现一致。
   常见做法:
     - box-sizing: border-box;  让 width/height 包含内边距与边框,布局更直观
     - margin / padding 清零后再按需添加
   ========================================================================== */

*,
*::before,
*::after {
    /* 让元素的 width/height 直接等于设定值(包含内边距与边框),布局计算更直观 */
    box-sizing: border-box;
}


/* ==========================================================================
   3. 页面整体布局(body)
   --------------------------------------------------------------------------
   控制整个页面的宏观外观,常用属性:
     - font-family:   全站字体(建议引用第 1 区定义的 --font-body 变量)
     - font-size:     基准字号(其余元素用 rem/em 相对缩放)
     - line-height:   行高,中文正文建议 1.6 ~ 1.8
     - color:         正文颜色
     - background:    页面背景
     - max-width + margin: 0 auto;  限制内容宽度并水平居中,提升长文可读性
     - padding:       页面四周留白
   ========================================================================== */

body {
    max-width: var(--page-max-width);   /* 最大宽度:超宽屏幕上正文不无限拉伸(第 1 区变量) */
    margin: 0 auto;                     /* 左右 margin 平分剩余空间 = 内容水平居中 */
    padding: var(--page-padding);       /* 页边距:正文四周留白(第 1 区变量) */

    font-family: var(--font-body);      /* 全站字体(第 1 区变量) */
    font-size: 1rem;                    /* 基准字号,其余元素以 rem/em 相对缩放 */
    line-height: 1.5;                  /* 行高:中文长文可读性更佳 */
    color: var(--color-text);           /* 正文颜色 */
    background: var(--color-bg);        /* 页面背景 */

    /* 抗锯齿与连字优化,让文字在各系统上更细腻 */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/* ==========================================================================
   4. 标题(h1 ~ h6)
   --------------------------------------------------------------------------
   控制各级标题的字号、字重、上下间距等。
   可按需拆分:共用规则写在 h1, h2, ... 的组合选择器里,
   各级差异(主要是 font-size)分别单独写。
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 2em 0 0.75em;           /* 标题上方留足空白,与上一段拉开层次 */
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-heading);
    letter-spacing: -0.01em;        /* 略微收紧字距,标题更紧凑利落 */
}

h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-top: 0.4em;              /* 页面主标题距顶部近一些 */
}

h2 {
    font-size: 1.5rem;
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--color-border);   /* 二级标题加下划分隔线,分章更清晰 */
}

h3 {
    font-size: 1.2rem;
}


/* ==========================================================================
   5. 段落与正文(p)
   --------------------------------------------------------------------------
   控制段落的间距、缩进、对齐方式等,常用属性:
     - margin:       段落上下间距
     - text-indent:  首行缩进(中文排版可用 2em)
     - text-align:   对齐方式
   ========================================================================== */


p {
    margin: 0 0 1em;    /* 段落之间留出一行间距,顶部不留(紧跟标题时更协调) */
}


/* ==========================================================================
   6. 链接(a)
   --------------------------------------------------------------------------
   控制超链接在各状态下的外观:
     - a          默认状态
     - a:hover    鼠标悬停
     - a:visited  已访问过
     - a:active   点击瞬间
   常见做法:统一链接颜色(引用 --color-link 变量)、
   控制是否显示下划线(text-decoration)。
   ========================================================================== */

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color 0.15s ease;   /* 颜色变化带一点缓动,更柔和 */
}

a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
    text-underline-offset: 0.15em;  /* 下划线与文字留一点距离,更精致 */
}


/* ==========================================================================
   7. KaTeX 数学公式微调
   --------------------------------------------------------------------------
   KaTeX 渲染出的公式外层带有 .katex(行内公式)与
   .katex-display(独立成行的块级公式)两个类,可在此微调其外观。

   常见需求:
     - 调整公式字号,使其与正文视觉大小协调
       (KaTeX 默认略大,常设为 1em ~ 1.1em)
     - 块级公式过宽时允许横向滚动,避免在窄屏上撑破页面布局
     - 调整块级公式与上下文之间的垂直间距
   ========================================================================== */

.katex {
    font-size: 1.05em;      /* 行内公式略放大,与正文视觉大小更协调 */
}

.katex-display {
    overflow-x: auto;       /* 块级公式过宽时横向滚动,避免在窄屏撑破布局 */
    overflow-y: hidden;
    padding: 0.5em 0;       /* 与上下文之间留出垂直间距 */
    text-align: left;       /* 块级公式左对齐(外层包裹) */
}

/* 关键:KaTeX 把"居中"同时写在了内层 .katex-display > .katex 上
   (text-align: center),只改上面的外层会被这条内层规则盖过,
   因此必须把内层也一并覆盖为 left,左对齐才真正生效。 */
.katex-display > .katex {
    text-align: left;
}


/* ==========================================================================
   8. 交互式目录(TOC,配合 toc-init.js)
   --------------------------------------------------------------------------
   页面加载后,根目录的 toc-init.js 会扫描正文中的标题(默认 h1 ~ h4),
   自动生成如下结构并插入 <body> 末尾(无需在 .html 中手写):

     <button class="toc-toggle">☰ 目录</button>   ← 视口右上角的开关按钮
     <nav class="toc">                            ← 目录面板(悬浮于页面右侧)
         <p class="toc-header">目录</p>
         <ul class="toc-list">
             <li class="toc-item toc-level-1"><a href="#sec-1">……</a></li>
             ……
         </ul>
     </nav>

   本区集中控制上述结构的全部外观。类名约定(由 toc-init.js 维护):
     .toc-collapsed  加在 .toc 上 = 面板处于"收起"状态(点按钮切换)
     .toc-active     加在某个 <a> 上 = 该条目对应当前正在阅读的章节
     .toc-level-N    N 为标题级别(1 ~ 4),通过左侧缩进体现层级
   ========================================================================== */

/* ---- 8.1 平滑滚动与锚点定位 ---------------------------------------------- */

html {
    /* 点击目录条目跳转时平滑滚动过去,而非瞬间跳变 */
    scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    /* 跳转定位后,标题与视口顶部保留一段距离,不紧贴屏幕上缘 */
    scroll-margin-top: 1.5rem;
}

/* ---- 8.2 开关按钮(固定于视口右上角) ------------------------------------ */

.toc-toggle {
    position: fixed;                /* 固定定位:不随页面滚动 */
    top: 1rem;
    right: 1rem;
    z-index: 101;                   /* 浮在目录面板(100)与正文之上 */
    padding: 0.35rem 0.75rem;
    font-size: 0.9rem;
    color: var(--toc-text);
    background: var(--toc-bg);
    border: 1px solid var(--toc-border);
    border-radius: 0.4rem;
    cursor: pointer;
}

.toc-toggle:hover {
    background: var(--toc-hover-bg);
}

/* ---- 8.3 目录面板 -------------------------------------------------------- */

.toc {
    position: fixed;                /* 悬浮于视口右侧,不占用正文排版空间 */
    top: 3.5rem;                    /* 位于开关按钮下方 */
    right: 1rem;
    z-index: 100;
    /* 面板宽度:正常取 --toc-width,屏幕过窄时自动收窄以免超出屏幕 */
    width: min(var(--toc-width), calc(100vw - 2rem));
    max-height: calc(100vh - 5rem); /* 条目过多时面板内部出现滚动条 */
    overflow-y: auto;
    padding: 0.8rem 1rem;
    background: var(--toc-panel-bg);/* 面板背景:实色(第 1 区变量,悬浮于正文上时更清晰) */
    border: 1px solid var(--toc-border);
    border-radius: 0.4rem;
    box-shadow: var(--shadow-md);   /* 轻微投影,让面板从正文中"浮起" */
    /* 收起/展开时的滑动渐隐过渡动画 */
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
}

/* 收起状态:整体滑出屏幕右侧并隐藏(由开关按钮切换该类) */
.toc.toc-collapsed {
    transform: translateX(calc(100% + 2rem));
    opacity: 0;
    visibility: hidden;
}

/* ---- 8.4 面板内部:标题与条目列表 ---------------------------------------- */

.toc-header {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--toc-text);
}

.toc-list {
    list-style: none;               /* 去掉 <ul> 默认的小圆点 */
    margin: 0;
    padding: 0;
}

.toc-item {
    margin: 0.15rem 0;
}

.toc-item a {
    display: block;                 /* 整行可点击,而不只是文字部分 */
    padding: 0.2rem 0.5rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--toc-text);
    text-decoration: none;
    border-radius: 0.3rem;
    /* 条目文字过长时用省略号截断,保持面板整洁(悬停可看全文,见 toc-init.js) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toc-item a:hover {
    background: var(--toc-hover-bg);
}

/* 当前正在阅读的章节(页面滚动时由 toc-init.js 自动更新) */
.toc-item a.toc-active {
    color: var(--toc-active);
    background: var(--toc-active-bg);
    font-weight: 600;
}

/* ---- 8.5 各级标题的缩进 -------------------------------------------------- */

.toc-level-1 { padding-left: 0; }        /* h1:顶格           */
.toc-level-2 { padding-left: 0.9rem; }   /* h2:缩进一级       */
.toc-level-3 { padding-left: 1.8rem; }   /* h3:缩进两级       */
.toc-level-4 { padding-left: 2.7rem; }   /* h4:缩进三级       */


/* ==========================================================================
   9. 主页与导航组件(页首 Hero / 卡片网格 / 面包屑导航 / 页脚)
   --------------------------------------------------------------------------
   本区为"主页 / 索引页"专用组件,仅在 HomePage*.html 等落地页上用到,
   普通笔记页无需使用(未用到的样式不会产生任何副作用)。
   组件与对应类名:
     .site-nav   顶部面包屑导航条(返回主页 / 当前所在区块)
     .hero       页首:大标题 + 副标题 + 可选的小标签 .eyebrow
     .card-grid  卡片网格容器;.card 为单张卡片(整块可点击的 <a>)
     .link-list  纵向链接列表(罗列子页面,带图标与箭头)
     .site-footer 页脚(版权信息、返回主页链接)
   ========================================================================== */

/* ---- 9.1 顶部面包屑导航条 ------------------------------------------------ */

.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.95rem;
}

.site-nav a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.site-nav a:hover {
    color: var(--color-link);
    text-decoration: none;
}

.site-nav .brand {
    font-weight: 600;
    color: var(--color-heading);    /* 品牌名(返回主页)更醒目 */
}

.site-nav .brand:hover {
    color: var(--color-link);
}

.site-nav .sep {
    color: var(--color-text-muted);
    opacity: 0.5;                   /* 分隔符 "/" 弱化,不喧宾夺主 */
    user-select: none;
}

.site-nav .current {
    color: var(--color-text);       /* 当前所在页:普通文字、不可点击 */
    font-weight: 500;
}

/* ---- 9.2 页首 Hero ------------------------------------------------------- */

.hero {
    margin: 0 0 2.5rem;
    padding: 3.25rem 1.75rem;
    text-align: center;
    /* 柔和的斜向渐变底,让落地页第一眼就有主页的氛围感 */
    background: linear-gradient(150deg, #eef3ff 0%, #f5f7fb 55%, #fbf3f8 100%);
    border: 1px solid var(--color-border);
    border-radius: 1.25rem;
}

.hero .eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.3rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-link);
    background: var(--color-accent-soft);
    border-radius: 999px;           /* 胶囊形小标签 */
}

.hero h1 {
    margin: 0 0 0.75rem;            /* 覆盖通用 h1 的上下外边距 */
    font-size: clamp(1.9rem, 4vw, 2.75rem);  /* 随屏幕宽度平滑缩放 */
    line-height: 1.2;
}

.hero .subtitle {
    max-width: 42rem;
    margin: 0 auto;                 /* 副标题限宽并居中,长句不至于铺满整行 */
    color: var(--color-text-muted);
    font-size: 1.1rem;
}

/* ---- 9.3 卡片网格 -------------------------------------------------------- */

.card-grid {
    display: grid;
    /* 自适应列数:每列至少 15rem,空间足够时自动增列 */
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.card {
    display: block;
    height: 100%;                   /* 同行卡片等高 */
    padding: 1.5rem;
    color: inherit;                 /* 覆盖 <a> 的链接色,卡片内文字用正文色 */
    text-decoration: none;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.card:hover {
    transform: translateY(-3px);    /* 悬停时轻轻抬起 */
    box-shadow: var(--shadow-md);
    border-color: #cdd8ee;
    text-decoration: none;
}

.card .card-icon {
    display: block;
    margin-bottom: 0.85rem;
    font-size: 1.85rem;
    line-height: 1;
}

.card h3 {
    margin: 0 0 0.4rem;             /* 覆盖通用 h3 外边距 */
    font-size: 1.15rem;
    color: var(--color-heading);
}

.card p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.card .card-cta {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-link);       /* 卡片底部的"前往 →"提示 */
}

.card:hover .card-cta {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* ---- 9.4 纵向链接列表 ---------------------------------------------------- */

.link-list {
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.link-list li + li {
    border-top: 1px solid var(--color-border);  /* 条目之间细分隔线 */
}

.link-list a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 0.6rem;
    color: var(--color-text);
    text-decoration: none;
    border-radius: 0.5rem;
    transition: background 0.15s ease, padding-left 0.15s ease;
}

.link-list a:hover {
    background: var(--color-bg-soft);
    padding-left: 0.9rem;           /* 悬停时文字轻微右移,增加反馈感 */
    text-decoration: none;
}

.link-list .item-icon {
    color: var(--color-link);
}

.link-list .item-arrow {
    margin-left: auto;              /* 箭头推到最右侧 */
    color: var(--color-text-muted);
}

/* ---- 9.5 页脚 ------------------------------------------------------------ */

.site-footer {
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.9rem;
    text-align: center;
}

.site-footer a {
    color: var(--color-text-muted);
}

.site-footer a:hover {
    color: var(--color-link);
}


/* ==========================================================================
   10. 响应式(移动端适配)
   --------------------------------------------------------------------------
   通过媒体查询在小屏设备上覆盖调整上方的样式。
   断点宽度可按需增减,常用参考:
     - 48rem(约 768px)以下:平板/大屏手机
     - 30rem(约 480px)以下:普通手机
   (目录面板在窄屏上的行为无需在此处理:toc-init.js 会在窗口不够宽时
    默认收起面板;展开后面板悬浮在正文上方,点击条目跳转后自动收起。)
   ========================================================================== */

@media (max-width: 48rem) {
    body {
        /* 窄屏下收窄页边距,给正文让出更多空间 */
        padding: 1rem;
    }

    h1 { font-size: 1.7rem; }
    h2 { font-size: 1.35rem; }

    .hero {
        padding: 2.25rem 1.25rem;   /* 窄屏下页首收紧,避免过高 */
        border-radius: 1rem;
    }

    .card-grid {
        grid-template-columns: 1fr; /* 窄屏下卡片单列铺满 */
    }
}


/* ==========================================================================
   11. 代码块与行内代码(code / pre,仿 Notion 圆角底色)
   --------------------------------------------------------------------------
   两种代码写法,外观分别处理:
     - 行内代码  <code>……</code>            嵌在句子里的短代码/标识符
     - 代码块    <pre><code>……</code></pre>  独立成块的多行代码

   仿 Notion 的效果 = "圆角矩形 + 浅底色":
     · 行内:浅暖灰底 + 圆角小药丸 + 暖红文字,让代码从正文中"跳"出来
     · 代码块:整块暖白灰面板 + 圆角 + 长行横向滚动,不撑破版心

   配色集中在第 1 区的 --color-code-* / --color-codeblock-* / --font-code 变量,
   想改风格(例如把行内代码从暖红改成中性色)只需改那里,无需动本区。

   【与 KaTeX 的关系】KaTeX 自动渲染默认忽略 <pre> 与 <code>(katex-init.js 未
   覆盖 ignoredTags),因此代码里的 $ 符号不会被误当成公式,可放心书写含 $ 的
   shell 命令,本区样式也不会与公式渲染冲突。
   ========================================================================== */

/* ---- 11.1 行内代码 <code> ------------------------------------------------ */

code {
    font-family: var(--font-code);
    font-size: 0.875em;                 /* 略小于正文,与周围文字视觉更协调 */
    color: var(--color-code-text);      /* 暖红文字(第 1 区变量) */
    background: var(--color-code-bg);   /* 浅暖灰底(第 1 区变量) */
    padding: 0.15em 0.4em;              /* 上下左右一点内边距,底色形成小药丸 */
    border-radius: 0.35em;              /* 圆角 */
    word-break: break-word;             /* 超长标识符可断行,不硬撑破版心 */
}

/* ---- 11.2 代码块 <pre> --------------------------------------------------- */

pre {
    margin: 1.25em 0;
    padding: 1rem 1.15rem;
    font-family: var(--font-code);
    font-size: 0.9em;
    line-height: 1.6;
    color: var(--color-text);               /* 代码块用正文色,不用行内的暖红 */
    background: var(--color-codeblock-bg);  /* 暖白灰面板底(第 1 区变量) */
    border: 1px solid var(--color-border);  /* 一圈淡边,在白底上更有"面板感" */
    border-radius: var(--radius);           /* 圆角(第 1 区变量) */
    overflow-x: auto;                       /* 超长行横向滚动,不撑破布局 */
    -webkit-overflow-scrolling: touch;      /* iOS 上滚动更顺滑 */
}

/* ---- 11.3 代码块内部的 <code>:清掉行内药丸样式,回归纯代码 ---------------- */

pre code {
    padding: 0;
    font-size: inherit;     /* 继承 pre 的字号,避免二次缩小 */
    color: inherit;         /* 继承 pre 的文字色 */
    background: none;       /* 去掉行内代码的底色 */
    border-radius: 0;
    white-space: pre;       /* 原样保留代码里的空格与换行 */
    word-break: normal;
}


/* ==========================================================================
   12. 参考文献(references,[1] 编号 + 宋体 / Times New Roman)
   --------------------------------------------------------------------------
   给 <ol>(或 <ul>)加上 class="references" 即套用本样式:

     <ol class="references">
         <li>作者. 标题[M]. 出版地:出版社,年份.</li>
         <li>……</li>
     </ol>

   两个要点:
     1. 字体:西文 Times New Roman + 中文宋体。按字符逐个回退——拉丁字母命中
        字体栈里第一个含该字形的 Times New Roman;中文在其中找不到字形,
        自动回退到宋体系列。字体栈集中在第 1 区的 --font-reference。
     2. 编号:用 CSS 计数器把默认的 "1." 换成学术常用的 "[1] [2] ……";
        并做悬挂缩进——条目回行时文字对齐在编号右侧,而非缩到编号正下方。
   ========================================================================== */

.references {
    counter-reset: ref;                     /* 进入列表时把编号计数器归零 */
    list-style: none;                       /* 去掉 <ol>/<ul> 的默认标记 */
    margin: 1.25em 0;
    padding: 0;                             /* 去掉列表默认左缩进,与正文左对齐 */
    font-family: var(--font-body);          /* 西文 Times New Roman + 中文宋体(第 1 区变量) */
    line-height: 1.5;
}

.references li {
    counter-increment: ref;                 /* 每个条目编号 +1 */
    position: relative;
    padding-left: 1.5em;                    /* 左侧让出"编号栏"; 回行保持此缩进 = 悬挂对齐 */
    margin: 0.4em 0;
}

.references li::before {
    content: "[" counter(ref) "]";          /* 编号格式:[1] [2] [3] …… */
    position: absolute;
    left: 0;                                /* 编号固定在左侧栏起点 */
    top: 0;
}
