/* ============================================================
   人工智能基本理论学习网站 —— 书院典籍 · 青花霁蓝
   架构：蓝漆门廊导航 / 远山月洞 Hero / 卷轴目录 / 单列书页
   色板：月白瓷底 · 青花钴蓝 · 霁蓝靛青 · 石青 · 霁青描金
   ============================================================ */

:root {
    /* —— Design Tokens · 青花霁蓝 —— */
    --paper:       #eef1f2;   /* 月白：瓷底 */
    --paper-warm:  #e3e8eb;   /* 深一档瓷青 */
    --silk:        #fbfcfd;   /* 釉白：卡片、面板 */
    --silk-deep:   #f1f4f7;   /* 青白：画布、日志 */
    --ink:         #1d2a38;   /* 靛墨：标题 */
    --ink-body:    #44525f;   /* 淡墨：正文 */
    --ink-dim:     #72808d;   /* 次要文字 */
    --ink-faint:   #9aa6b2;   /* 最弱文字 */
    --zhu:         #2f5f91;   /* 青花钴蓝（沿用变量名：主饰色） */
    --zhu-deep:    #1d4168;   /* 霁蓝：深色强调 */
    --zhu-bright:  #3e79ad;   /* 亮青蓝 */
    --mu:          #2b4d70;   /* 靛青（沿用变量名：木梁→蓝漆） */
    --mu-deep:     #1a3149;   /* 大漆深蓝：导航/页脚 */
    --mu-mid:      #4a6f94;   /* 中青：描边 */
    --qing:        #3c728f;   /* 石青 */
    --qing-deep:   #24506b;   /* 深石青 */
    --tong:        #7e9db6;   /* 青灰金：纹饰（沿用变量名） */
    --tong-bright: #a9c7de;   /* 霁青描金：深底上的亮纹 */
    --line:        rgba(29, 65, 104, 0.24);  /* 靛蓝浅线 */
    --line-faint:  rgba(29, 65, 104, 0.11);
    --serif-kai:   "STKaiti", "KaiTi", "楷体", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
    --serif-song:  "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", Georgia, serif;
    --sans:        "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
    --mono:        "SFMono-Regular", Consolas, "Courier New", monospace;
    --shadow-wood: 0 20px 48px rgba(20, 42, 66, 0.16);
    /* 连续回纹（霁青描金） */
    --pattern-lei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8'%3E%3Cpath d='M1 7 V1 H23 V7' fill='none' stroke='%23a9c7de' stroke-width='1.2'/%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    background-color: var(--paper);
    background-image:
        radial-gradient(ellipse 90% 42% at 50% -8%, rgba(53, 82, 100, 0.07), transparent 62%),
        radial-gradient(ellipse 55% 35% at 100% 60%, rgba(47, 95, 145, 0.035), transparent 65%);
    color: var(--ink-body);
    font-family: var(--sans);
    font-size: 16.5px;
    line-height: 1.95;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

::selection { background: rgba(47, 95, 145, 0.20); color: var(--zhu-deep); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--paper-warm); }
::-webkit-scrollbar-thumb { background: #9db6cc; border-radius: 6px; border: 3px solid var(--paper-warm); }
::-webkit-scrollbar-thumb:hover { background: var(--mu-mid); }

a { color: var(--qing); text-decoration: none; transition: color .25s; }
a:hover { color: var(--zhu); }
img { max-width: 100%; }

/* ============ 阅读进度条 ============ */
.read-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, var(--zhu-deep), var(--tong-bright));
    z-index: 1000; box-shadow: 0 0 10px rgba(47, 95, 145, .4);
}

/* ============ 栗木门廊导航 ============ */
.site-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 900;
    background:
        linear-gradient(180deg, #33587a 0%, #1a3149 100%);
    border-bottom: 3px solid var(--zhu-deep);
    box-shadow: 0 2px 14px rgba(12, 28, 46, .35);
}
.site-nav::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -7px;
    height: 5px; background-color: #10233a;
    background-image: var(--pattern-lei);
    background-repeat: repeat-x; background-size: 24px 5px;
    opacity: .85;
}
.nav-inner {
    max-width: 1240px; margin: 0 auto; padding: 0 28px;
    height: 68px; display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 13px; }
.brand-seal {
    width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, var(--zhu-bright), var(--zhu-deep));
    border: 1.5px solid var(--tong-bright); border-radius: 3px;
    color: #f0f6fc; font-family: var(--serif-kai); font-size: 21px;
    box-shadow: inset 0 0 0 1px rgba(240, 246, 252, .25);
}
.brand-text { color: #e6f0f9; font-family: var(--serif-kai); font-size: 17px; letter-spacing: .14em; }
.brand-sub { display: block; font-size: 9px; color: #92abc4; letter-spacing: .28em; font-family: var(--sans); margin-top: 1px; }

.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a {
    color: #bcd0e2; font-size: 14.5px; padding: 9px 18px;
    font-family: var(--serif-kai); letter-spacing: .12em; border-radius: 2px;
    border: 1px solid transparent; position: relative;
}
.nav-links a:hover { color: var(--tong-bright); border-color: rgba(169, 199, 222, .45); }
.nav-links a.active {
    color: #f0f6fc; background: rgba(47, 95, 145, .55);
    border-color: rgba(169, 199, 222, .5);
}
.nav-toggle {
    display: none; background: none; border: 1px solid rgba(169, 199, 222, .5);
    color: var(--tong-bright); font-size: 20px; width: 40px; height: 36px;
    border-radius: 3px; cursor: pointer;
}

.container { max-width: 1240px; margin: 0 auto; padding: 0 28px; }

/* ============ 首页 Hero：远山 · 月洞门 ============ */
.hero {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    text-align: center; position: relative; padding: 120px 28px 80px; overflow: hidden;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='260' viewBox='0 0 1440 260' preserveAspectRatio='none'%3E%3Cpath d='M0 260 L0 170 L150 100 L320 165 L520 70 L720 155 L900 95 L1120 175 L1300 110 L1440 160 L1440 260 Z' fill='%2333587a' opacity='0.14'/%3E%3C/svg%3E") center bottom / 100% 230px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='200' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200 L0 150 L200 95 L430 145 L680 80 L900 140 L1150 85 L1440 140 L1440 200 Z' fill='%2324506b' opacity='0.10'/%3E%3C/svg%3E") center bottom / 100% 180px no-repeat,
        linear-gradient(180deg, #e2eaf0 0%, #e9eff4 46%, #eef1f2 78%);
}
/* 月洞门 */
.hero::before {
    content: ""; position: absolute; right: -150px; top: 50%; transform: translateY(-52%);
    width: 480px; height: 480px; border-radius: 50%;
    border: 26px solid rgba(53, 82, 100, 0.10);
    box-shadow: inset 0 0 0 2px rgba(31, 65, 104, 0.10);
    pointer-events: none;
}
/* 竖排印章 */
.hero::after {
    content: "格物致知"; position: absolute; left: 56px; top: 50%; transform: translateY(-50%);
    writing-mode: vertical-rl; letter-spacing: .55em;
    font-family: var(--serif-kai); font-size: 19px; color: #f0f6fc;
    background: linear-gradient(180deg, var(--zhu-bright), var(--zhu-deep));
    border: 2px solid var(--tong-bright); border-radius: 4px;
    padding: 22px 10px; line-height: 1.6;
    box-shadow: 0 8px 24px rgba(29, 65, 104, .35);
}
.hero > div { position: relative; z-index: 2; }
.hero-ornament {
    color: var(--mu-mid); font-family: var(--serif-kai);
    font-size: 17px; letter-spacing: .5em; margin-bottom: 34px;
}
.hero h1 {
    font-family: var(--serif-kai);
    font-size: clamp(46px, 8vw, 92px); font-weight: 700; color: var(--ink);
    letter-spacing: .14em; line-height: 1.3; margin-bottom: 6px;
    text-shadow: 2px 3px 0 rgba(31, 65, 104, .10);
}
.hero h1 em { font-style: normal; color: var(--zhu); position: relative; }
.hero-en {
    font-family: Georgia, serif; font-style: italic;
    color: var(--ink-faint); font-size: clamp(13px, 1.5vw, 17px);
    letter-spacing: .26em; margin: 24px 0 32px;
}
.hero-lead {
    max-width: 660px; margin: 0 auto 44px; color: var(--ink-dim);
    font-size: 16.5px; line-height: 2.15;
}
.hero-divider {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin: 0 auto 38px; color: var(--tong);
}
.hero-divider::before, .hero-divider::after {
    content: ""; width: 100px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--mu-mid), transparent);
}
.hero-actions { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }

.btn {
    display: inline-block; padding: 13px 42px; font-family: var(--serif-kai);
    font-size: 16px; letter-spacing: .3em; border-radius: 2px;
    transition: all .3s; cursor: pointer; border: 1.5px solid var(--zhu);
    text-indent: .3em;
}
.btn-gold {
    background: linear-gradient(180deg, var(--zhu-bright), var(--zhu-deep));
    color: #f0f6fc; border-color: var(--tong-bright);
    box-shadow: 0 4px 14px rgba(29, 65, 104, .3), inset 0 0 0 1px rgba(240, 246, 252, .18);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(29, 65, 104, .42), inset 0 0 0 1px rgba(240, 246, 252, .22); }
.btn-ghost { color: var(--mu); border-color: var(--mu-mid); background: rgba(251, 252, 253, .5); }
.btn-ghost:hover { background: var(--silk); border-color: var(--mu); color: var(--zhu-deep); transform: translateY(-2px); }

.scroll-hint {
    position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
    color: var(--ink-faint); font-size: 12px; letter-spacing: .3em;
    font-family: var(--sans); animation: floatHint 2.4s ease-in-out infinite; z-index: 2;
}
@keyframes floatHint { 0%,100% { transform: translate(-50%,0);} 50% { transform: translate(-50%,8px);} }

/* ============ 十卷卷轴目录 ============ */
.scroll-section { padding: 96px 0 64px; position: relative; }
.scroll-section::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 220px; height: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 5 H40 M10 1 V9 M30 1 V9' stroke='%234a6f94' stroke-width='1' fill='none'/%3E%3C/svg%3E") repeat-x center / 40px 10px;
    opacity: .5;
}
.section-head { text-align: center; margin-bottom: 60px; }
.section-head .kicker {
    font-family: var(--serif-kai); font-size: 14px; letter-spacing: .5em;
    color: var(--mu-mid); display: block; margin-bottom: 14px;
}
.section-head h2 {
    font-family: var(--serif-kai);
    font-size: 38px; color: var(--ink); letter-spacing: .2em; font-weight: 700;
}
.section-head .head-line { width: 64px; height: 2px; background: var(--zhu); margin: 22px auto 0; position: relative; }
.section-head .head-line::after {
    content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(45deg);
    width: 9px; height: 9px; background: var(--paper); border: 1.5px solid var(--tong);
}
.section-head p { color: var(--ink-dim); max-width: 720px; margin: 24px auto 0; font-size: 15px; }

.chapter-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
    gap: 34px 30px;
}
.chapter-card {
    position: relative; display: block; padding: 34px 32px 30px; margin-top: 12px;
    background: linear-gradient(175deg, var(--silk), var(--silk-deep));
    border: 1px solid var(--line); border-radius: 3px;
    transition: all .4s cubic-bezier(.2,.7,.3,1);
    box-shadow: 0 4px 14px rgba(20, 42, 66, .07);
}
/* 上下木轴 */
.chapter-card::before, .chapter-card::after {
    content: ""; position: absolute; left: 14px; right: 14px; height: 13px;
    border-radius: 7px;
    background: linear-gradient(180deg, #5078a0 0%, #33587a 55%, #14283f 100%);
    box-shadow: 0 2px 5px rgba(18, 38, 58, .35), inset 0 1px 0 rgba(214, 232, 246, .45);
}
.chapter-card::before { top: -13px; }
.chapter-card::after { bottom: -13px; }
.chapter-card:hover {
    transform: translateY(-7px);
    box-shadow: var(--shadow-wood);
    border-color: rgba(47, 95, 145, .4);
}
.card-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-bottom: 16px;
    background: linear-gradient(160deg, var(--zhu-bright), var(--zhu-deep));
    color: #f0f6fc; font-family: var(--serif-kai); font-size: 20px;
    border: 1.5px solid var(--tong-bright); border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(240, 246, 252, .2);
}
.card-tag {
    font-family: var(--serif-kai); font-size: 13px; letter-spacing: .3em;
    color: var(--tong); display: block; margin-bottom: 8px;
}
.chapter-card h3 {
    font-family: var(--serif-kai);
    font-size: 25px; color: var(--ink); letter-spacing: .12em; margin-bottom: 13px;
}
.card-divider { width: 40px; height: 2px; background: var(--mu-mid); margin-bottom: 15px; transition: width .4s, background .4s; }
.chapter-card:hover .card-divider { width: 72px; background: var(--zhu); }
.chapter-card p { color: var(--ink-dim); font-size: 14.5px; line-height: 1.95; }
.card-meta {
    margin-top: 20px; padding-top: 15px; border-top: 1px dashed var(--line);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12.5px; color: var(--ink-faint); letter-spacing: .08em;
}
.card-meta .enter { color: var(--zhu); font-family: var(--serif-kai); font-size: 14px; letter-spacing: .15em; }
.chapter-card:hover .card-meta .enter { color: var(--zhu-deep); }

/* ============ 序章信笺 ============ */
.preface {
    max-width: 820px; margin: 70px auto 0; padding: 58px 56px;
    background: rgba(251, 252, 253, .6);
    border: 1px solid var(--line); outline: 1px solid var(--line-faint); outline-offset: 4px;
    text-align: center; position: relative;
}
.preface::before, .preface::after {
    content: ""; position: absolute; width: 8px; height: 8px;
    background: var(--zhu); transform: rotate(45deg);
}
.preface::before { top: -4px; left: 50%; margin-left: -4px; }
.preface::after { bottom: -4px; left: 50%; margin-left: -4px; }
.preface blockquote {
    font-family: var(--serif-kai);
    font-size: 23px; color: var(--ink); line-height: 2.3; font-style: normal;
}
.preface .cite { margin-top: 22px; color: var(--ink-faint); font-size: 14px; letter-spacing: .16em; }
.preface-seal {
    display: inline-block; margin-top: 18px;
    width: 34px; height: 34px; line-height: 30px; text-align: center;
    background: linear-gradient(160deg, var(--zhu-bright), var(--zhu-deep));
    color: #f0f6fc; font-family: var(--serif-kai); font-size: 18px;
    border: 1.5px solid var(--tong-bright); border-radius: 3px;
    transform: rotate(-4deg);
}

/* ============ 章节页 · 卷首匾额 ============ */
.chapter-hero {
    margin-top: 66px;
    padding: 84px 0 58px; position: relative;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='180' viewBox='0 0 1440 180' preserveAspectRatio='none'%3E%3Cpath d='M0 180 L0 130 L220 75 L460 125 L700 65 L950 120 L1200 70 L1440 120 L1440 180 Z' fill='%2333587a' opacity='0.09'/%3E%3C/svg%3E") center bottom / 100% 150px no-repeat,
        linear-gradient(180deg, #f4f8fb 0%, #eef1f2 100%);
    border-bottom: 3px solid var(--mu-mid);
}
.chapter-hero::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: repeating-linear-gradient(90deg, var(--zhu-deep) 0 22px, var(--mu-deep) 22px 44px);
    opacity: .9;
}
.chapter-hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 5px;
    background-color: #1a3149; background-image: var(--pattern-lei);
    background-repeat: repeat-x; background-size: 24px 5px; opacity: .8;
}
.crumb {
    font-size: 12.5px; color: var(--ink-faint);
    letter-spacing: .12em; margin-bottom: 34px;
}
.crumb a { color: var(--ink-dim); }
.crumb a:hover { color: var(--zhu); }
.chapter-hero .hero-num {
    font-family: Georgia, serif; font-style: italic; font-size: 17px;
    color: var(--qing); letter-spacing: .22em; display: block; margin-bottom: 16px;
}
.chapter-hero h1 {
    font-family: var(--serif-kai);
    font-size: clamp(34px, 5vw, 52px); color: var(--ink);
    letter-spacing: .18em; line-height: 1.4; display: inline-block; position: relative;
}
.chapter-hero h1::after {
    content: "阅"; position: absolute; top: 6px; right: -64px;
    width: 40px; height: 40px; line-height: 37px; text-align: center;
    background: linear-gradient(160deg, var(--zhu-bright), var(--zhu-deep));
    color: #f0f6fc; font-size: 20px; border: 1.5px solid var(--tong-bright);
    border-radius: 3px; transform: rotate(6deg); letter-spacing: 0;
}
.chapter-hero .hero-en {
    text-align: left; margin: 16px 0 0; font-family: Georgia, serif; font-style: italic;
    color: var(--ink-faint); font-size: 15px; letter-spacing: .2em;
}
.chapter-hero .hero-abs {
    margin-top: 30px; max-width: 860px; color: var(--ink-dim);
    padding-left: 22px; border-left: 3px double var(--mu-mid); font-size: 16px;
}

/* ============ 单列书页 + 文首篇目 ============ */
.article-layout {
    display: flex; flex-direction: column;
    gap: 0; padding: 56px 0 90px; align-items: stretch;
}
.content {
    order: 2; min-width: 0;
    max-width: 880px; width: 100%; margin: 0 auto;
}
.toc-widget {
    order: 1; position: static;
    max-width: 880px; width: 100%; margin: 0 auto 52px;
    background:
        linear-gradient(175deg, rgba(251, 252, 253, .9), rgba(241, 244, 247, .9));
    border: 1px solid var(--line); outline: 1px solid var(--line-faint); outline-offset: 3px;
    border-radius: 3px; padding: 26px 30px 22px;
}
.toc-widget h4 {
    font-family: var(--serif-kai); font-size: 17px; color: var(--zhu-deep);
    letter-spacing: .4em; margin-bottom: 18px; font-weight: 700;
    text-align: center; position: relative;
}
.toc-widget h4::before, .toc-widget h4::after {
    content: ""; display: inline-block; width: 56px; height: 1px;
    background: var(--mu-mid); vertical-align: middle; margin: 0 16px;
}
.toc-widget ul {
    list-style: none;
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 4px 28px;
}
.toc-widget li { margin: 0; }
.toc-widget a {
    display: block; color: var(--ink-dim); font-size: 14.5px;
    padding: 8px 12px; border-bottom: 1px dashed var(--line-faint);
    line-height: 1.5; letter-spacing: .04em; font-family: var(--serif-kai);
    border-left: none;
}
.toc-widget a::before { content: "❖ "; color: var(--tong); font-size: 11px; }
.toc-widget a:hover { color: var(--zhu); border-bottom-color: var(--zhu); background: rgba(47, 95, 145, .04); }
.toc-widget a.active { color: var(--zhu-deep); font-weight: 700; background: rgba(47, 95, 145, .06); border-bottom-color: var(--zhu); }
.toc-widget li.sub a { padding-left: 28px; font-size: 13px; }

/* ============ 正文排版 ============ */
.content section { margin-bottom: 70px; scroll-margin-top: 96px; }
.sec-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 28px; }
.sec-num {
    font-family: var(--serif-kai); font-size: 26px; font-weight: 700;
    color: var(--zhu-deep); white-space: nowrap;
}
.sec-head h2 {
    font-family: var(--serif-kai);
    font-size: 29px; color: var(--ink); letter-spacing: .12em;
}
.sec-head::after {
    content: ""; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--line), transparent);
    margin-left: 8px;
}

.content h3 {
    font-family: var(--serif-kai);
    font-size: 21px; color: var(--mu); margin: 36px 0 15px;
    letter-spacing: .08em; display: flex; align-items: center; gap: 12px;
}
.content h3::before { content: "◆"; color: var(--tong); font-size: 12px; }
.content h4 {
    font-family: var(--serif-kai);
    font-size: 18px; color: var(--ink); margin: 26px 0 11px; letter-spacing: .06em;
}
.content p { margin: 14px 0; color: var(--ink-body); text-align: justify; }
.content strong { color: var(--zhu-deep); font-weight: 700; }
.content ul, .content ol { margin: 14px 0 14px 8px; padding-left: 24px; }
.content li { margin: 8px 0; line-height: 1.9; }
.content ul li::marker { color: var(--zhu); }
.content ol li::marker { color: var(--zhu); font-family: Georgia, serif; font-weight: 700; }
.content em { color: var(--qing-deep); }

.lead-first::first-letter {
    font-family: var(--serif-kai);
    font-size: 56px; float: left; line-height: 1; padding: 5px 12px 0 0;
    color: var(--zhu-deep);
}

/* 行内代码 */
code {
    font-family: var(--mono); font-size: .86em;
    background: rgba(31, 65, 104, .08); color: var(--zhu-deep);
    padding: 2px 7px; border-radius: 3px; border: 1px solid rgba(31, 65, 104, .15);
}
pre {
    background: #f4f7fa; border: 1px solid var(--line);
    border-left: 4px solid var(--mu-mid); border-radius: 3px;
    padding: 20px 24px; overflow-x: auto; margin: 20px 0;
    font-family: var(--mono); font-size: 13.5px; line-height: 1.75; color: #4a5a68;
}
pre code { background: none; border: none; padding: 0; color: inherit; font-size: inherit; }
.code-cap { font-size: 12px; color: var(--ink-faint); margin: -8px 0 22px 2px; letter-spacing: .1em; }

/* 公式 */
.formula {
    margin: 24px 0; padding: 26px 20px; text-align: center;
    background: rgba(251, 252, 253, .8); border: 1px solid var(--line);
    border-top: 3px solid var(--tong);
    border-radius: 2px; font-family: Georgia, "Times New Roman", var(--serif-song);
    font-size: 19px; color: var(--ink); letter-spacing: .04em; overflow-x: auto;
}
.formula .f-label {
    display: block; font-size: 12px; color: var(--ink-faint);
    letter-spacing: .2em; margin-bottom: 10px;
}
.formula sub, .content sub { font-size: .7em; }
.formula sup { font-size: .7em; }

/* 表格 */
.table-wrap { overflow-x: auto; margin: 24px 0; border: 1px solid var(--line); border-radius: 3px; box-shadow: 0 3px 10px rgba(20, 42, 66, .06); }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 480px; background: var(--silk); }
thead th {
    background: linear-gradient(180deg, #3d648c, #33587a); color: #eaf2fa;
    font-family: var(--serif-kai); font-weight: 600; letter-spacing: .12em;
    padding: 14px 18px; text-align: left; border-bottom: 2px solid var(--tong);
    white-space: nowrap;
}
tbody td { padding: 13px 18px; border-bottom: 1px solid var(--line-faint); color: var(--ink-body); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) { background: rgba(126, 157, 182, .18); }
tbody tr:hover { background: rgba(47, 95, 145, .06); }
.tbl-cap { font-size: 12px; color: var(--ink-faint); margin: 0 0 8px 2px; letter-spacing: .12em; }

/* 内容卡片 */
.box {
    margin: 26px 0; padding: 23px 28px; border-radius: 2px;
    position: relative; background: var(--silk); border: 1px solid var(--line);
}
.box .box-title {
    font-family: var(--serif-kai); font-size: 15px; letter-spacing: .22em;
    display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.box p:last-child { margin-bottom: 0; }
.box-concept { background: rgba(31, 65, 104, .06); border-left: 4px solid var(--mu); }
.box-concept .box-title { color: var(--mu); }
.box-example { background: rgba(53, 82, 100, .07); border-left: 4px solid var(--qing); }
.box-example .box-title { color: var(--qing-deep); }
.box-think { background: rgba(47, 95, 145, .055); border-left: 4px solid var(--zhu); }
.box-think .box-title { color: var(--zhu-deep); }
.box-key { background: rgba(126, 157, 182, .12); border: 1px dashed var(--tong); }
.box-key .box-title { color: #3d648c; }
.box-key ul { margin-bottom: 0; }

/* 引用 */
blockquote.poetic {
    margin: 30px 0; padding: 8px 0 8px 28px; border-left: 3px solid var(--tong);
    color: var(--ink-dim); font-family: var(--serif-kai); font-size: 19px; font-style: normal; line-height: 2.1;
}
blockquote.poetic cite { display: block; margin-top: 10px; font-size: 13px; color: var(--ink-faint); font-family: var(--sans); font-style: normal; }

/* 定义标签 */
.term { color: var(--zhu-deep); font-weight: 700; border-bottom: 1px dashed var(--zhu); cursor: help; }

/* 时间轴 */
.timeline { position: relative; margin: 34px 0; padding-left: 36px; }
.timeline::before {
    content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px;
    width: 2px; background: linear-gradient(180deg, var(--zhu), var(--mu-mid) 70%, var(--line-faint));
}
.tl-item { position: relative; margin-bottom: 30px; }
.tl-item::before {
    content: ""; position: absolute; left: -33px; top: 8px;
    width: 11px; height: 11px; border: 2px solid var(--zhu);
    background: var(--paper); transform: rotate(45deg);
}
.tl-year {
    font-family: Georgia, serif; font-style: italic; font-size: 19px; color: var(--qing-deep);
    display: inline-block; margin-bottom: 4px; font-weight: 700;
}
.tl-item h4 { margin: 0 0 6px; color: var(--ink); font-size: 17px; }
.tl-item p { margin: 0; color: var(--ink-dim); font-size: 15px; }

/* 并排卡片 */
.dual-grid, .triple-grid { display: grid; gap: 22px; margin: 26px 0; }
.dual-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.triple-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.mini-card {
    background: var(--silk); border: 1px solid var(--line);
    border-top: 3px solid var(--mu-mid);
    border-radius: 2px; padding: 23px 23px 19px; transition: border-color .3s, transform .3s, box-shadow .3s;
}
.mini-card:hover { border-color: rgba(47, 95, 145, .35); transform: translateY(-3px); box-shadow: var(--shadow-wood); }
.mini-card h4 {
    margin: 0 0 10px; color: var(--mu); font-size: 18px;
    display: flex; align-items: center; gap: 10px;
}
.mini-card .mc-icon {
    width: 33px; height: 33px; border: 1.5px solid var(--zhu); border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--zhu-deep); font-size: 14px; font-family: var(--serif-kai); flex-shrink: 0;
    background: rgba(47, 95, 145, .06);
}
.mini-card p { font-size: 14.5px; color: var(--ink-dim); margin: 8px 0; }
.mini-card ul { font-size: 14px; color: var(--ink-dim); }

/* 步骤流 */
.steps { margin: 26px 0; counter-reset: step; }
.step-item {
    position: relative; padding: 17px 20px 17px 68px; margin-bottom: 13px;
    background: var(--silk); border: 1px solid var(--line-faint);
    border-left: 3px solid var(--tong); border-radius: 2px;
}
.step-item::before {
    counter-increment: step; content: counter(step, decimal-leading-zero);
    position: absolute; left: 18px; top: 18px;
    font-family: Georgia, serif; font-style: italic; font-size: 20px;
    color: var(--zhu); font-weight: 700;
}
.step-item h4 { margin: 0 0 5px; color: var(--ink); font-size: 16.5px; }
.step-item p { margin: 0; font-size: 14.5px; color: var(--ink-dim); }

/* 自测 */
.quiz {
    margin: 24px 0; border: 1px solid var(--line); border-radius: 2px;
    background: var(--silk); overflow: hidden;
}
.quiz summary {
    list-style: none; cursor: pointer; padding: 17px 24px;
    font-family: var(--serif-kai); font-size: 16px; color: var(--ink);
    display: flex; align-items: center; gap: 12px; letter-spacing: .04em;
}
.quiz summary::-webkit-details-marker { display: none; }
.quiz summary::before {
    content: "问"; color: #f0f6fc;
    background: linear-gradient(160deg, var(--zhu-bright), var(--zhu-deep));
    border: 1px solid var(--tong-bright);
    font-size: 13px; width: 24px; height: 24px; border-radius: 2px;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.quiz summary::after { content: "＋"; margin-left: auto; color: var(--mu-mid); font-size: 18px; transition: transform .3s; }
.quiz[open] summary::after { transform: rotate(45deg); }
.quiz[open] summary { background: rgba(47, 95, 145, .05); }
.quiz .answer { padding: 0 24px 20px 60px; color: var(--ink-dim); font-size: 15px; }
.quiz .answer::before { content: "解 ▸ "; color: var(--qing); font-weight: 700; }

/* ============ 交互演示 · 函套木匣 ============ */
.demo-panel {
    margin: 34px 0; border: 1px solid var(--mu-mid); border-radius: 3px;
    overflow: hidden; background: var(--silk);
    box-shadow: var(--shadow-wood);
}
.demo-head {
    padding: 13px 22px; display: flex; align-items: center; gap: 12px;
    background: linear-gradient(180deg, #3d648c, #33587a);
    border-bottom: 2px solid var(--tong);
}
.demo-head .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tong-bright); box-shadow: 0 0 7px rgba(169, 199, 222, .8); }
.demo-head h4 { margin: 0; color: #eaf2fa; font-size: 16px; font-family: var(--serif-kai); letter-spacing: .14em; }
.demo-head .demo-tag { margin-left: auto; font-size: 11px; color: #a9c7de; letter-spacing: .18em; border: 1px solid rgba(169, 199, 222, .4); padding: 2px 11px; border-radius: 20px; }
.demo-body { padding: 22px; }
.demo-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; align-items: center; }
.demo-btn {
    font-size: 13.5px; letter-spacing: .08em; font-family: var(--serif-kai);
    padding: 8px 20px; border-radius: 2px; cursor: pointer;
    background: transparent; color: var(--mu);
    border: 1.5px solid var(--mu-mid); transition: all .25s;
}
.demo-btn:hover { background: rgba(31, 65, 104, .08); border-color: var(--mu); color: var(--zhu-deep); }
.demo-btn.active, .demo-btn.primary {
    background: linear-gradient(180deg, var(--zhu-bright), var(--zhu-deep));
    color: #f0f6fc; border-color: var(--tong-bright); font-weight: 600;
}
.demo-btn:disabled { opacity: .4; cursor: not-allowed; }
.demo-select, .demo-input {
    background: var(--silk-deep); color: var(--ink); border: 1px solid var(--line);
    border-radius: 2px; padding: 8px 12px; font-size: 13.5px; outline: none;
}
.demo-select:focus, .demo-input:focus { border-color: var(--tong); }
.demo-status { font-size: 13px; color: var(--ink-dim); margin-left: auto; }
.demo-canvas-wrap { display: flex; justify-content: center; background: var(--silk-deep); border: 1px solid var(--line-faint); border-radius: 2px; padding: 10px; }
canvas.demo-canvas { display: block; max-width: 100%; cursor: pointer; }
.demo-log {
    margin-top: 16px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim);
    background: var(--silk-deep); border: 1px solid var(--line-faint); border-radius: 2px;
    padding: 12px 16px; min-height: 48px; max-height: 150px; overflow-y: auto; line-height: 1.8;
}
.demo-log .hl { color: var(--zhu-deep); font-weight: 700; }
.demo-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: 12.5px; color: var(--ink-dim); }
.demo-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

/* 专家系统对话 */
.expert-chat { background: var(--silk-deep); border: 1px solid var(--line-faint); border-radius: 2px; padding: 18px; min-height: 280px; max-height: 420px; overflow-y: auto; }
.chat-line { margin: 10px 0; font-size: 14.5px; line-height: 1.8; }
.chat-line .who { font-size: 12px; letter-spacing: .14em; margin-bottom: 3px; font-family: var(--serif-kai); }
.chat-system .who { color: var(--mu); }
.chat-user .who { color: var(--qing-deep); }
.chat-bubble { display: inline-block; padding: 10px 16px; border-radius: 3px; max-width: 88%; }
.chat-system .chat-bubble { background: rgba(31, 65, 104, .08); border: 1px solid var(--line-faint); color: var(--ink); }
.chat-user .chat-bubble { background: rgba(53, 82, 100, .10); border: 1px solid rgba(53, 82, 100, .28); color: var(--qing-deep); }
.chat-options { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.fact-row { display: flex; gap: 24px; flex-wrap: wrap; font-size: 13px; color: var(--ink-dim); margin-top: 10px; }
.fact-row span b { color: var(--zhu-deep); font-weight: 700; }

/* ============ 章末导航 ============ */
.chapter-footer-nav {
    display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    margin-top: 74px; padding-top: 32px; border-top: 2px solid var(--line);
}
.chapter-footer-nav a {
    flex: 1; min-width: 260px; padding: 21px 26px;
    border: 1px solid var(--line); border-radius: 2px;
    transition: all .3s; background: var(--silk);
}
.chapter-footer-nav a:hover { border-color: var(--zhu); background: var(--silk-deep); transform: translateY(-2px); }
.chapter-footer-nav .fn-dir { font-size: 12px; color: var(--ink-faint); letter-spacing: .22em; display: block; margin-bottom: 7px; }
.chapter-footer-nav .fn-title { color: var(--ink); font-family: var(--serif-kai); font-size: 17.5px; letter-spacing: .06em; }
.chapter-footer-nav a.next { text-align: right; }
.chapter-footer-nav a:hover .fn-title { color: var(--zhu-deep); }

/* ============ 栗木页脚 ============ */
.site-footer {
    border-top: 3px solid var(--zhu-deep); padding: 54px 0 42px;
    background: linear-gradient(180deg, #2b4d70 0%, #162c44 100%);
    text-align: center; position: relative;
}
.site-footer::before {
    content: ""; position: absolute; top: -7px; left: 0; right: 0; height: 5px;
    background-color: #10233a; background-image: var(--pattern-lei);
    background-repeat: repeat-x; background-size: 24px 5px; opacity: .8;
}
.footer-seal {
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, var(--zhu-bright), var(--zhu-deep));
    border: 1.5px solid var(--tong-bright); border-radius: 4px;
    color: #f0f6fc; font-family: var(--serif-kai); font-size: 23px;
    margin-bottom: 18px; transform: rotate(-3deg);
    box-shadow: inset 0 0 0 1px rgba(240, 246, 252, .22);
}
.site-footer h3 { color: #e6f0f9; font-family: var(--serif-kai); font-size: 21px; letter-spacing: .32em; margin-bottom: 12px; }
.site-footer p { color: #92abc4; font-size: 13px; letter-spacing: .1em; line-height: 2; }
.footer-line { width: 130px; height: 1px; background: linear-gradient(90deg, transparent, var(--tong), transparent); margin: 20px auto; }

/* ============ 返回顶部 ============ */
.back-top {
    position: fixed; right: 28px; bottom: 32px; z-index: 850;
    width: 48px; height: 48px; border-radius: 50%;
    border: 1.5px solid var(--mu-mid);
    background: rgba(251, 252, 253, .94);
    color: var(--zhu-deep); font-size: 19px; cursor: pointer;
    opacity: 0; pointer-events: none; transform: translateY(12px);
    transition: all .35s;
    box-shadow: 0 4px 14px rgba(20, 42, 66, .2);
}
.back-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-top:hover {
    background: linear-gradient(180deg, var(--zhu-bright), var(--zhu-deep));
    color: #f0f6fc; border-color: var(--tong-bright);
}

/* ============ 动画 ============ */
.fade-up { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ============ 响应式 ============ */
@media (max-width: 1020px) {
    .hero::after { display: none; }
}
@media (max-width: 760px) {
    body { font-size: 15.5px; }
    .nav-links {
        display: none; position: absolute; top: 68px; left: 0; right: 0;
        background: #1a3149; flex-direction: column; align-items: stretch;
        padding: 12px 20px 20px; border-bottom: 2px solid var(--zhu-deep); gap: 2px;
    }
    .nav-links.open { display: flex; }
    .nav-links a { padding: 12px 8px; border-color: rgba(169, 199, 222, .25); }
    .nav-links a.active { background: rgba(47, 95, 145, .55); }
    .nav-toggle { display: block; }
    .container { padding: 0 20px; }
    .hero::before { width: 320px; height: 320px; right: -160px; }
    .preface { padding: 42px 24px; }
    .preface blockquote { font-size: 19px; }
    .chapter-hero { padding: 64px 0 46px; margin-top: 68px; }
    .chapter-hero h1::after { display: none; }
    .toc-widget ul { grid-template-columns: 1fr; }
    .sec-head { flex-wrap: wrap; gap: 8px; }
    .sec-head h2 { font-size: 23px; }
    .content section { margin-bottom: 54px; }
    .box { padding: 20px; }
    .formula { font-size: 16px; padding: 18px 12px; }
    .back-top { right: 16px; bottom: 22px; }
    .hero-lead { font-size: 15px; }
    .chapter-grid { grid-template-columns: 1fr; }
}