/* ================================================================================
   云窗拾锦 · HTML 课件公共层  deck.css   v3.0  (2026-09-16)
   --------------------------------------------------------------------------------
   【这是什么】全站所有课件的唯一样式来源。页眉/页脚/封面/封底/翻页/游戏/版式/字阶
                全部在这里定义一次，所有 HTML 只引用这一个文件 —— 改这里 = 全站改。
   【怎么用】在每个课件 HTML 的 <head> 里：
       <link rel="stylesheet" href="../common/deck/deck.css">        （本地：丁香结/ 下一级）
       <link rel="stylesheet" href="../../../common/deck/deck.css">  （站点：site/yuwen/<年级>/<课>/）
   【本课主题色】公共层只给「中性默认色板」。每课在 <head> 内联一段 <style> 覆盖下面
                第 2 节的 --brand / --paper / --mist … 几个变量即可，不需要也不允许
                在本文件里改本课颜色。
   【禁改项】第 1 节「死参数」为铁律级数值（页眉 44px / 页脚 42px / 安全区 7rem·1.2rem），
                任何一课都不得另立一套。
   ================================================================================ */

/* 品牌楷体（全站唯一一份，跨平台一致；缺字自动回退系统楷体） */
@font-face{font-family:'WMXKai';src:url('fonts/wmxkai.woff2') format('woff2');font-display:swap}

/* ============================ 1. 令牌（死参数·铁律级） ============================ */
:root{
  /* —— 骨架尺寸：不可改 —— */
  --header-h:44px;          /* 页眉 44px（铁律） */
  --footer-h:42px;          /* 页脚 42px（铁律） */
  --edge:.75rem;            /* 页眉/页脚距画布边 */
  --safe-x:7rem;            /* 内容安全区 左右 7rem（铁律）：html 字号 21px 时 = 147px */
  --safe-y:1.2rem;          /* 内容安全区 上下呼吸 1.2rem（铁律）= 25.2px */
  /* —— 内容区上下边界（v3.3 新增，唯一入口）——
     页眉底 = --edge + --header-h = 59.75px；页脚顶 = 1080 - --edge - --footer-h = 1022.25px。
     再各让出 --safe-y 呼吸，得到内容的真实可用区：84.95 ~ 997.05（高 912px）。
     ⚠️ 在此之前各版式类自己写 top/bottom（7.6/8.6/5.6/6rem…），
     竖向可用高只剩 803px，**白白浪费 160px** —— 内容"装不下"多半是这个原因。 */
  --content-t:calc(var(--edge) + var(--header-h) + var(--safe-y));
  --content-b:calc(var(--edge) + var(--footer-h) + var(--safe-y));
  --bar-r:10px;             /* 页眉页脚圆角 */
  --design-w:1920px; --design-h:1080px;
  --header-lh:calc(var(--header-h)/1.5); --footer-lh:calc(var(--footer-h)/1.5);
  /* —— 字体：楷体优先用品牌字，回退系统 —— */
  --serif:"WMXKai","KaiTi","STKaiti","Kaiti SC","AR PL UKai CN",serif;
  --sans:"Microsoft YaHei","PingFang SC","微软雅黑",sans-serif;
  --song:"Songti SC","SimSun","Noto Serif CJK SC",serif;

  /* —— 字阶令牌（教室可读性 · 铁律级）——
     换算基准：舞台 1920px 对应投影页宽 960pt，故 1pt = 2px。
     教室后排可辨底线：主标题 ≥38pt、正文 ≥22pt、卡片小字 ≥16pt。
     v3.1 起由「网页浏览尺度」（正文 29px≈14.5pt）整体放大约 1.5 倍。 —— */
  --fs-h1:80px;        /* 主标题 · 40pt */
  --fs-h2:58px;        /* 二级标题 · 29pt */
  --fs-q:72px;         /* 大字提问 · 36pt */
  --fs-lead:48px;      /* 导语 · 24pt */
  --fs-body:44px;      /* 正文 · 22pt */
  --fs-card-h:44px;    /* 卡片标题 · 22pt */
  --fs-small:34px;     /* 次要说明 · 17pt */
  --fs-quote:60px;     /* 引文 · 30pt */
  --fs-sent:52px;      /* 课文原句 · 26pt */
  --fs-eyebrow:28px;   /* 环节标签 · 14pt */
  --fs-trio:32px;      /* 恒定框架条 · 主题 */
  --fs-trio-n:30px;    /* 恒定框架条 · 节点 */
  --fs-question:50px;  /* 课堂提问 · 25pt */
  --fs-answer:42px;    /* 结论 / 回答 · 21pt */
  --fs-tile:38px;      /* 游戏字块 · 19pt */
  --fs-chip:38px;      /* 词卡 / 流程节点 */
  --fs-note:34px;      /* 便签 · 17pt */
  --fs-steps-h:40px;   /* 步骤标题 */
  --fs-steps-p:32px;   /* 步骤正文 */
  --fs-opt:46px;       /* 选项按钮 */
  --fs-pc:52px;        /* 配对卡 */
  --fs-ui:19px;        /* 页眉页脚 */
  --fs-btn:17px;       /* 页脚按钮 */

  /* —— 圆角 / 阴影 —— */
  --r-lg:22px; --r-sm:12px;
  --shadow:0 12px 34px rgba(45,42,38,.13);
  --shadow-sm:0 6px 16px rgba(45,42,38,.10);

  /* —— 默认色板（中性暖白纸）—— 每课可在 <style> 里整体换色 —— */
  --paper:#FBF7EE; --card:#FFFFFF; --ink:#2D2A26;
  --pine:#2E7D5B; --pine-soft:#DCE9E2;
  --gold:#B8893B; --gold-soft:#F3E4C8; --gold-bright:#F7C948;
  --clay:#C8674E; --clay-soft:#F5E0D2;
  --mist:#E8E4DA; --aux:#9a948a;
  /* 主色（本课主题）：默认赭金；每课覆盖这三个 */
  --brand:#B8893B; --brand-soft:#F3E4C8; --brand-deep:#8A6626;
}

/* ============================ 2. 基础 / 舞台 / 页 ============================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img{display:block;max-width:100%}
button{font-family:inherit}
html{font-size:21px}
html,body{width:100%;height:100%;overflow:hidden}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;
  -webkit-font-smoothing:antialiased;display:flex;align-items:center;justify-content:center}
.stage{position:relative;width:1920px;height:1080px;overflow:hidden;
  background:var(--paper);transform-origin:center center}
.slide{position:absolute;inset:0;display:none;overflow:hidden;background:var(--paper)}
.slide.is-active{display:block;animation:fi .46s cubic-bezier(.16,1,.3,1) both}
@keyframes fi{from{opacity:0}to{opacity:1}}

/* ============================ 3. 揭示动画库 ============================
   用法：元素同时写 data-step（第几步进）+ data-anim（怎么进）。
   原则：出血大图一律用「擦除 / 展开」（clip-path、mask）而不是透明度淡入 ——
   否则大图淡入时会先露出纸色，翻页像闪白。 */
[data-step]{opacity:0;transform:translateY(26px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1),
    clip-path .62s cubic-bezier(.16,1,.3,1),filter .5s ease,
    -webkit-mask-size .72s ease,mask-size .72s ease}
[data-step].revealed{opacity:1;transform:none;clip-path:inset(0 0 0 0);filter:none;
  -webkit-mask-size:100% 100%;mask-size:100% 100%}
/* —— 位移（推入/浮入/掉落/漂移）—— */
[data-step][data-anim="none"]{transform:none;transition:opacity .45s}
[data-step][data-anim="up"]{transform:translateY(-40px)}
[data-step][data-anim="down"]{transform:translateY(48px)}
[data-step][data-anim="left"]{transform:translateX(-56px)}
[data-step][data-anim="right"]{transform:translateX(56px)}
[data-step][data-anim="rise"]{transform:translateY(60px) scale(.94)}
[data-step][data-anim="drop"]{transform:translateY(-70px) scale(.96)}
[data-step][data-anim="drift"]{transform:translate(90px,30px)}
/* —— 缩放（缩放/放大/缩小/弹入）—— */
[data-step][data-anim="pop"]{transform:scale(.86)}
[data-step][data-anim="zoom"]{transform:scale(1.22);opacity:0}
[data-step][data-anim="shrink"]{transform:scale(.7)}
[data-step][data-anim="grow"]{transform:scale(.5)}
[data-step][data-anim="spin"]{transform:rotate(-8deg) scale(.9)}
/* —— 翻转（PPTX 翻转式）—— */
[data-step][data-anim="flipx"]{transform:perspective(1400px) rotateX(-74deg);transform-origin:50% 0}
[data-step][data-anim="flipy"]{transform:perspective(1400px) rotateY(-74deg);transform-origin:0 50%}
/* —— 淡入 / 模糊 —— */
[data-step][data-anim="fade"]{transform:none}
[data-step][data-anim="blur"]{filter:blur(14px);transform:none}
/* —— 擦除（clip-path，不淡入：大图专用）—— */
[data-step][data-anim="unfold"]{clip-path:inset(0 100% 0 0);transform:none;opacity:1}
[data-step][data-anim="unfoldr"]{clip-path:inset(0 0 0 100%);transform:none;opacity:1}
[data-step][data-anim="unfoldv"]{clip-path:inset(0 0 100% 0);transform:none;opacity:1}
[data-step][data-anim="unfoldu"]{clip-path:inset(100% 0 0 0);transform:none;opacity:1}
[data-step][data-anim="expand"]{clip-path:inset(50% 0 50% 0);transform:none;opacity:1}
[data-step][data-anim="expandh"]{clip-path:inset(0 50% 0 50%);transform:none;opacity:1}
[data-step][data-anim="box"]{clip-path:inset(48% 48% 48% 48%);transform:none;opacity:1}
/* —— 百叶窗 / 棋盘（mask 条纹扫出）—— */
[data-step][data-anim="bars"]{transform:none;opacity:1;
  -webkit-mask:repeating-linear-gradient(0deg,#000 0 24px,transparent 24px 48px);
  mask:repeating-linear-gradient(0deg,#000 0 24px,transparent 24px 48px);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% 0%;mask-size:100% 0%}
[data-step][data-anim="barsv"]{transform:none;opacity:1;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 24px,transparent 24px 48px);
  mask:repeating-linear-gradient(90deg,#000 0 24px,transparent 24px 48px);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:0% 100%;mask-size:0% 100%}
[data-step][data-anim="checker"]{transform:none;opacity:1;
  -webkit-mask:conic-gradient(#000 0 25%,transparent 0 50%,#000 0 75%,transparent 0);
  mask:conic-gradient(#000 0 25%,transparent 0 50%,#000 0 75%,transparent 0);
  -webkit-mask-size:0% 0%;mask-size:0% 0%}
/* —— 背景缓慢推近（不淡入 → 翻页不闪白）—— */
[data-step][data-anim="bgzoom"]{opacity:1;transform:scale(1.07);
  transition:transform 6.5s cubic-bezier(.16,.5,.25,1)}
[data-step][data-anim="bgpan"]{opacity:1;transform:scale(1.06) translateX(-2.4%);
  transition:transform 7.5s cubic-bezier(.16,.5,.25,1)}

/* ★ 关键：上面所有 [data-step][data-anim="x"] 的优先级(0,2,0)与 [data-step].revealed 相同，
   而它们写在后面 → 会盖掉 revealed 的 transform，元素动画后永远回不了位。
   所以这里用更高优先级(0,3,0)统一收口，且必须排在全部变体之后。 */
[data-step].revealed[data-anim]:not(.pic-scallop){opacity:1;transform:none;clip-path:inset(0 0 0 0);
  filter:none;-webkit-mask-size:100% 100%;mask-size:100% 100%}
/* 圆形/菱形与 inset 不可插值，revealed 状态要单独给（同样 (0,3,0)，故排在收口规则之后） */
[data-step][data-anim="circle"]{clip-path:circle(0% at 50% 50%);transform:none;opacity:1}
[data-step][data-anim="diamond"]{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%);transform:none;opacity:1}
[data-step][data-anim="circle"].revealed{clip-path:circle(78% at 50% 50%)}
[data-step][data-anim="diamond"].revealed{clip-path:polygon(50% -30%,130% 50%,50% 130%,-30% 50%)}
/* 当前页出血底图持续极缓呼吸（高端感来源） */
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.055)}}
.slide.is-active>.fill{animation:kb 26s ease-in-out infinite alternate}
/* —— 组内错峰：容器揭示时，内部小件逐个弹出（这些小件本身不写 data-step）—— */
@keyframes popIn{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:none}}
[data-step].revealed .opt,[data-step].revealed .pc,[data-step].revealed .chip,
[data-step].revealed .zi .z,[data-step].revealed .flow i,[data-step].revealed .flow em,
[data-step].revealed .notes .nt,[data-step].revealed .steps .st,[data-step].revealed .hwc,
[data-step].revealed .cloud span,[data-step].revealed .dual .card{
  animation:popIn .5s cubic-bezier(.16,1,.3,1) both}
[data-step].revealed :nth-child(2){animation-delay:.09s}
[data-step].revealed :nth-child(3){animation-delay:.18s}
[data-step].revealed :nth-child(4){animation-delay:.27s}
[data-step].revealed :nth-child(5){animation-delay:.36s}
[data-step].revealed :nth-child(6){animation-delay:.45s}

/* 降低动效偏好：内容直接呈现（也便于截图验收） */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important}
  [data-step]{opacity:1!important;transform:none!important;clip-path:none!important;
    filter:none!important;transition:none!important}
  [data-anim="bars"],[data-anim="barsv"],[data-anim="checker"]{
    -webkit-mask:none!important;mask:none!important}
}

/* ============================ 4. 出血版式 ============================ */
.fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.sc{position:absolute;inset:0;z-index:1;pointer-events:none}
.sc-b{background:linear-gradient(180deg,rgba(10,8,18,0) 0%,rgba(10,8,18,.32) 52%,rgba(10,8,18,.82) 100%)}
.sc-l{background:linear-gradient(90deg,rgba(10,8,18,.90) 0%,rgba(10,8,18,.64) 34%,rgba(10,8,18,.14) 62%,rgba(10,8,18,0) 80%)}
.sc-r{background:linear-gradient(270deg,rgba(10,8,18,.90) 0%,rgba(10,8,18,.64) 34%,rgba(10,8,18,.14) 62%,rgba(10,8,18,0) 80%)}
.sc-w{background:linear-gradient(180deg,rgba(10,8,18,.44) 0%,rgba(10,8,18,.70) 100%)}
.sc-v{background:radial-gradient(ellipse at 50% 50%,rgba(10,8,18,.62) 0%,rgba(10,8,18,.88) 100%)}
.sc-t{background:linear-gradient(180deg,rgba(10,8,18,.86) 0%,rgba(10,8,18,.70) 52%,rgba(10,8,18,.34) 78%,rgba(10,8,18,0) 100%)}
.on-dark{color:#fff}
.on-dark .eyebrow{color:#E9D9BC}
.on-dark .lead{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.8),0 0 30px rgba(0,0,0,.55)}
.on-dark .quote{text-shadow:0 2px 14px rgba(0,0,0,.8),0 0 34px rgba(0,0,0,.55)}
.on-dark h1.t,.on-dark h2.t2{text-shadow:0 2px 14px rgba(0,0,0,.8),0 0 34px rgba(0,0,0,.5)}
.on-dark .card{background:rgba(255,255,255,.95);color:var(--ink)}
.on-dark .card h4{color:var(--brand-deep)}
.on-dark .card p{color:var(--ink)}
.on-dark .tip{color:var(--ink)}
.on-dark .sent{color:var(--ink)}
/* 深色页上的所有「浅底组件」统一恢复深色文字，避免白底白字 */
.on-dark .hwc,.on-dark .hwc h4,.on-dark .hwc p,
.on-dark .notes .nt,.on-dark .notes .nt b,
.on-dark .steps .st,.on-dark .steps .st h5,.on-dark .steps .st p,
.on-dark .cloud span,
.on-dark .pc,.on-dark .opt,.on-dark .chip,
.on-dark .zi .z,.on-dark .zi .ch,.on-dark .zi .ex,
.on-dark .dual .s,.on-dark .dual .s h4,.on-dark .dual .s p{color:var(--ink)}
.on-dark .notes .nt b,.on-dark .steps .st h5,.on-dark .dual .s h4{color:var(--brand-deep)}
.on-dark .hwc.t h4{color:var(--clay)} .on-dark .hwc.b h4{color:var(--pine)}
.on-dark .hwc.m h4{color:var(--gold)}
.on-dark .cloud span{color:var(--brand-deep)}

/* 文字区 */
.zone{position:absolute;z-index:5;display:flex;flex-direction:column}
/* ⚠️ v3.3 修复（2026-09-17）：以下水平边距原先各写各的（6.8/5.6rem…），
   没有任何一个真的用 --safe-x，导致「文字超出可显示区域」（丁香结实测 9 页超界，
   最多超 58px）。现**一律以安全区为准**，改一处全站生效。
   竖向上沿仍留出大于页眉的余量（top 8.6rem > 页眉底 56px），保证不压页眉。 */
.zh-b{left:var(--safe-x);right:var(--safe-x);bottom:var(--content-b);justify-content:flex-end}
.zh-l{left:var(--safe-x);width:46%;top:var(--content-t);bottom:var(--content-b);justify-content:center}
.zh-r{right:var(--safe-x);width:46%;top:var(--content-t);bottom:var(--content-b);justify-content:center}
/* ⚠️ v3.2 修复（2026-09-17）：原写法是 top:50% + margin-top:-6rem 的「假居中」——
   它假定内容恒为 12rem 高，内容一多就整体下沉、尾巴钻进页脚（丁香结 P17 实测被页脚压字），
   各课只能靠内联负 margin 硬凑（本课出现 -11.4/-7.2/-13/-2rem 四处）。
   现改为「安全区内真居中」：装得下则上下留白均分；装不下时 safe 退化为顶对齐，
   只从底部溢出（好定位、好收口），不会两头冒。 */
.zh-c{left:50%;transform:translateX(-50%);width:70%;top:var(--content-t);bottom:var(--content-b);
  justify-content:center;justify-content:safe center;
  text-align:center;align-items:center}
.zh-f{left:var(--safe-x);right:var(--safe-x);top:var(--content-t);bottom:var(--content-b);justify-content:center}
/* —— 版式修饰类（v3.3）——
   取代各页散落的内联 style="left:5.6rem;top:22rem…"。
   内联是「排版机械」的最大来源：值各写各的、公共层管不到、批量生产时 agent 还会接着抄。
   有了这三个类，页面只表达**意图**（顶对齐 / 高度自适应 / 让开顶部大图），数值由公共层统一给。

   .tp        顶对齐，不垂直居中（长内容页更稳）
   .free      高度自适应内容（不硬拉到底，避免容器高度虚高又装不下）
   .below-bt  顶部通栏图（.bt）下方起排；图高非默认时在 <section> 上写 style="--bt-h:230px" */
.zone.tp,.ht.tp,.fl-card.tp{justify-content:flex-start}
.zone.free{height:auto;bottom:auto}
.zone.below-bt,.ht.below-bt{top:calc(var(--bt-h,340px) + 2.4rem)}
/* 半幅 */
.hl,.hr{position:absolute;top:0;bottom:0;width:50%;z-index:0}
.hl{left:0} .hr{right:0}
.hl img,.hr img{width:100%;height:100%;object-fit:cover}
.ht{position:absolute;top:var(--content-t);bottom:var(--content-b);width:50%;z-index:4;
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--safe-x)}
.ht.r{left:50%} .ht.l{left:0}
/* 三连 / 四宫格 */
.tri{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr 1fr;z-index:0}
.tri figure,.g4 figure{position:relative;overflow:hidden}
.tri img,.g4 img{width:100%;height:100%;object-fit:cover}
.tri figcaption,.g4 figcaption{position:absolute;left:2.2rem;right:2.2rem;bottom:3.6rem;z-index:3}
/* 图注是相对各自图片定位的：首图的左边距、末图的右边距若只留 2.2rem，
   就会贴到屏幕边上（实测比安全区早 101px）。首尾两格改守页面安全区。 */
.tri figure:first-child figcaption,.g4 figure:first-child figcaption{left:var(--safe-x)}
.tri figure:last-child figcaption,.g4 figure:last-child figcaption{right:var(--safe-x)}
.tri .csc{position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(10,8,18,0) 38%,rgba(10,8,18,.82) 100%)}
.g4{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;z-index:0}
/* 顶部通栏 */
.bt{position:absolute;left:0;right:0;top:0;height:340px;z-index:0;overflow:hidden}
.bt img{width:100%;height:100%;object-fit:cover}
.bsc{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,8,18,.30) 0%,rgba(10,8,18,0) 100%)}
.stmt{position:absolute;inset:0;z-index:0;background:
  radial-gradient(120% 90% at 84% 16%,var(--brand-soft) 0%,rgba(237,231,247,0) 58%),
  radial-gradient(90% 80% at 10% 88%,var(--gold-soft) 0%,rgba(244,232,210,0) 60%),var(--paper)}
.stmt-deco{position:absolute;z-index:1;pointer-events:none;opacity:.9}
/* 对角构图：大图一角 + 文字对角 */
.diag{position:absolute;inset:0;z-index:0}
.diag img{width:100%;height:100%;object-fit:cover}
.diag .mask{position:absolute;inset:0;background:
  linear-gradient(135deg,rgba(10,8,18,.86) 0%,rgba(10,8,18,.34) 52%,rgba(10,8,18,0) 74%)}
/* 浮层卡片版式（文字装进白卡，浮压在出血图上）*/
.lay-float{position:absolute;inset:0;z-index:0}
.lay-float img{width:100%;height:100%;object-fit:cover}
.lay-float .dim{position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(10,8,18,.30),rgba(10,8,18,.55))}
.fl-card{position:absolute;z-index:6;background:rgba(255,255,255,.97);
  border-radius:26px;box-shadow:0 26px 64px rgba(20,14,40,.34);
  padding:2.2rem 2.4rem;display:flex;flex-direction:column;gap:.85rem;
  color:var(--ink);text-align:left}
.fl-card.left{left:5.4rem;top:9rem;bottom:6rem;width:47%}
.fl-card.right{right:5.4rem;top:9rem;bottom:6rem;width:47%}
.fl-card.mid{left:50%;transform:translateX(-50%);top:8.6rem;bottom:6rem;width:66%}
/* 注意：这里不能用 justify-content:center —— 内容高于卡片时会上下同时溢出，
   导致标题被挤到卡片外（实测踩过）。一律顶对齐，靠 top/bottom 控制高度。 */
.fl-card.tall{top:5.6rem;bottom:4.8rem;justify-content:flex-start;overflow:hidden}
/* 双栏文字（对比用） */
.two{display:grid;grid-template-columns:1fr 1fr;gap:0;width:100%}
.two>.colx{padding:1.3rem 1.6rem}
.two>.colx+.colx{border-left:2px dashed var(--mist)}
.two h5{font-family:var(--serif);font-size:44px;margin-bottom:.5rem}
.two p{font-size:38px;line-height:1.6}

/* ============================ 5. 字阶（教室可读性） ============================ */
.eyebrow{font-family:var(--sans);font-size:var(--fs-eyebrow);letter-spacing:.18em;font-weight:600;
  color:var(--gold);margin-bottom:.55rem}
h1.t{font-family:var(--serif);font-weight:700;font-size:var(--fs-h1);line-height:1.2}
h2.t2{font-family:var(--serif);font-weight:700;font-size:var(--fs-h2);line-height:1.26}
.q{font-family:var(--serif);font-weight:700;font-size:var(--fs-q);line-height:1.34;color:var(--brand-deep)}
/* v3.2：标题与大字提问启用「平衡断行」——避免出现末行只剩一两个字的孤字（丁香结 P03 实测
   「……某件事？」的「事？」被挤成单独一行，看着像排坏了）。不支持的浏览器自动忽略。 */
h1.t,h2.t2,.q{text-wrap:balance}
.on-dark .q{color:#fff}
.lead{font-family:var(--sans);font-size:var(--fs-lead);line-height:1.58;color:var(--ink)}
.body{font-family:var(--sans);font-size:var(--fs-body);line-height:1.6}
.small{font-family:var(--sans);font-size:var(--fs-small);line-height:1.58;color:var(--aux)}
.quote{font-family:var(--song);font-size:var(--fs-quote);line-height:1.8;text-align:center}
.on-dark .quote{color:#fff}
.quote .src{display:block;font-family:var(--sans);font-size:var(--fs-small);color:var(--aux);
  margin-top:.8rem;letter-spacing:.06em}
.on-dark .quote .src{color:rgba(255,255,255,.72)}

/* —— 环节内「恒定框架条」trio ——
   用途：同一环节连续多页讨论同一个问题时，**每页都带上这一条**，只换高亮节点。
   为什么要有它：把一个大环节拆成多页，学生容易「翻一页忘一段」——重复出现的
   讨论主题＋进度节点就是那根线，翻页不迷路（拆页不等于碎片）。
   用法：
     <div class="trio">
       <span class="th">作者从哪些角度写丁香花？</span>
       <span class="tn done">颜色</span><span class="tn now">外形</span><span class="tn">气味</span>
     </div>
   规矩：① 同一环节内各页的 trio 必须放在**同一相对位置**（eyebrow 之下、主标题之上）；
        ② 节点 2~4 个，节点文字 ≤4 字；③ 只重复「主题＋节点」这类恒定框架，
        **不重复结论/答案**（答案每页都印就是冗余）。 */
.trio{display:flex;align-items:center;gap:.9rem;width:fit-content;max-width:100%;
  padding:.5rem 1.2rem;border-radius:999px;background:var(--card);
  border:1px solid var(--mist);box-shadow:0 6px 20px rgba(0,0,0,.10)}
.trio .th{font-family:var(--sans);font-size:var(--fs-trio);font-weight:700;color:var(--brand-deep);
  white-space:nowrap;letter-spacing:.01em}
.trio .th+.tn{margin-left:.9rem}
.trio .tn{position:relative;padding-left:1.7rem;font-family:var(--sans);font-size:var(--fs-trio-n);
  font-weight:600;color:var(--ink);white-space:nowrap}
.trio .tn:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:17px;height:17px;border-radius:50%;border:2.5px solid var(--aux)}
.trio .tn.done{color:var(--pine)}
.trio .tn.done:before{background:var(--pine);border-color:var(--pine)}
.trio .tn.now{color:var(--brand-deep);font-weight:800}
.trio .tn.now:before{background:var(--brand);border-color:var(--brand);
  box-shadow:0 0 0 5px var(--brand-soft)}
/* 深色页上反白成一条，位置感不变 */
.on-dark .trio{background:rgba(252,250,254,.94);border-color:rgba(255,255,255,.55)}

/* ============================ 6. 组件 ============================ */
.card{background:var(--card);border:1px solid var(--mist);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:1.5rem 1.7rem;text-align:left}
.card h4{font-family:var(--serif);font-size:var(--fs-card-h);font-weight:700;margin-bottom:.5rem;
  color:var(--brand-deep)}
.card p{font-size:var(--fs-body);line-height:1.56}
.tip{background:linear-gradient(90deg,var(--gold-soft),rgba(243,228,200,.34));
  border-left:.3rem solid var(--gold);border-radius:var(--r-sm);padding:.9rem 1.2rem;
  font-size:var(--fs-body);line-height:1.56;text-align:left}
/* 词条双列（词语理解 / 名词解释 / 要点并列）：真两列，自动对齐。
   ⚠️ 严禁再用全角空格「　　」硬凑列 —— 字号或栏宽一变就散架、还容易压边
   （丁香结 P10「潇洒…　幽雅…」实测就是这个毛病）。 */
.kv{display:grid;grid-template-columns:1fr 1fr;gap:.44rem 1.6rem;align-items:baseline}
.kv>*{margin:0!important}
.kv.wide{grid-template-columns:1fr}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
/* —— 轻底卡 .soft（v3.2 新增）：给「压在出血大图上的长文字块」托一层极淡的底。
   为什么需要：整页全是裸文字会发飘、也显得散；整页全是白卡又太笨重。
   一页里让**长讲解/引文用 soft 托底、短句与一句话焦点保持裸文字**，
   疏密交替，既保可读性又有节奏（主人 2026-09-17 反馈「有框和没框都该有一些」）。
   深浅底自动适配：浅色页用墨色 4.5% 底，出血页(.on-dark)用白色 11% 底。 */
.soft{background:rgba(45,42,38,.045);border:1px solid rgba(45,42,38,.10);
  border-radius:var(--r-lg);padding:1.05rem 1.5rem}
.on-dark .soft{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.soft.quote{text-align:left}
.soft>*:first-child{margin-top:0} .soft>*:last-child{margin-bottom:0}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.col{display:flex;flex-direction:column;gap:1rem;width:100%}
.row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}

/* 生字卡 */
.zi{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;width:100%}
.zi .z{background:var(--card);border:1px solid var(--mist);border-radius:16px;
  padding:1rem .5rem .9rem;text-align:center;box-shadow:var(--shadow-sm);
  transition:transform .22s cubic-bezier(.16,1,.3,1)}
.zi .z:hover{transform:translateY(-6px)}
.zi .ch{font-family:var(--serif);font-size:92px;font-weight:700;line-height:1.05}
.zi .py{font-size:30px;color:var(--brand);letter-spacing:.06em}
.zi .ex{font-size:28px;color:var(--aux)}
/* 词卡 */
.chip{font-family:var(--serif);font-size:var(--fs-chip);background:var(--card);border:1px solid var(--mist);
  border-radius:999px;padding:.3rem 1rem;box-shadow:var(--shadow-sm);cursor:pointer;
  transition:transform .16s,border-color .16s,background .16s}
.chip:hover{border-color:var(--brand);transform:translateY(-2px)}

/* 文本块 */
.sent{font-family:var(--song);font-size:var(--fs-sent);line-height:1.85;text-align:left;
  background:var(--card);border:1px solid var(--mist);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:1.3rem 1.7rem;position:relative}
.sent .mk{background:linear-gradient(transparent 58%,rgba(247,201,72,.55) 58%);
  font-weight:700;padding:0 .1em}
.sent .mk2{background:linear-gradient(transparent 58%,rgba(142,125,181,.34) 58%);
  font-weight:700;padding:0 .1em}
.sent .tag{position:absolute;right:1.2rem;top:-.9rem;font-size:28px;background:var(--brand);
  color:#fff;border-radius:999px;padding:.15rem .8rem;letter-spacing:.08em}
.call{display:block;margin:0 auto;max-width:100%}
/* 作业 */
.hw{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;width:100%}
.hwc{background:var(--card);border:1px solid var(--mist);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:1.5rem 1.6rem;text-align:left}
.hwc h4{font-family:var(--serif);font-size:var(--fs-card-h);margin-bottom:.5rem}
.hwc p{font-size:var(--fs-body);line-height:1.56}
.hwc.b{border-top:6px solid var(--pine)}
.hwc.m{border-top:6px solid var(--gold)}
.hwc.t{border-top:6px solid var(--clay)}

/* 对照 / 流程 */
.dual{display:grid;grid-template-columns:1fr auto 1fr;gap:1.4rem;align-items:stretch;width:100%}
.dual .mid{display:flex;align-items:center;font-family:var(--serif);font-size:var(--fs-h2);color:var(--gold)}
.dual .s{border-top:6px solid var(--brand)}
.dual .s.b{border-top-color:var(--clay)}
.flow{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;justify-content:center}
.flow i{font-style:normal;background:var(--card);border:1px solid var(--mist);border-radius:999px;
  padding:.35rem 1.1rem;font-size:var(--fs-chip);font-weight:600}
.flow em{font-style:normal;color:var(--gold);font-size:40px}

/* 多样版式组件 */
/* ① 大关键词：一个词撑起一页 */
.key{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem}
.key .word{font-family:var(--serif);font-size:140px;font-weight:700;line-height:1;
  letter-spacing:.06em;color:var(--brand-deep)}
.key .word small{font-size:var(--fs-h2);color:var(--gold);margin-left:.3em}
.key .note{font-size:var(--fs-body);color:var(--ink);line-height:1.65;max-width:38ch}
/* ② 错落卡片（上下交错，不是一行行） */
.stagger{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:start;width:100%}
.stagger>*:nth-child(2){margin-top:3.2rem}
.stagger>*:nth-child(3){margin-top:1.4rem}
/* ③ 编号步骤横条 */
.steps{display:flex;gap:0;width:100%;align-items:stretch}
.steps .st{flex:1;position:relative;padding:1.3rem 1.4rem 1.3rem 2.6rem;
  background:var(--card);border:1px solid var(--mist)}
.steps .st:first-child{border-radius:var(--r-lg) 0 0 var(--r-lg)}
.steps .st:last-child{border-radius:0 var(--r-lg) var(--r-lg) 0}
.steps .st+.st{border-left:none}
.steps .st .no{position:absolute;left:.7rem;top:1.2rem;font-family:var(--serif);
  font-size:40px;font-weight:700;color:var(--brand);opacity:.55}
.steps .st h5{font-family:var(--serif);font-size:var(--fs-steps-h);margin-bottom:.4rem}
.steps .st p{font-size:var(--fs-steps-p);line-height:1.5;color:var(--ink)}
/* ④ 便签墙 */
.notes{display:flex;gap:1.4rem;align-items:flex-start;justify-content:center;flex-wrap:wrap}
.notes .nt{width:380px;padding:1.15rem 1.3rem;background:#FFF8E1;border-radius:4px;
  box-shadow:0 8px 20px rgba(45,42,38,.14);font-size:var(--fs-note);line-height:1.55;text-align:left}
.notes .nt:nth-child(1){transform:rotate(-2.4deg)}
.notes .nt:nth-child(2){transform:rotate(1.6deg);background:#EAF4EE;margin-top:1.6rem}
.notes .nt:nth-child(3){transform:rotate(-1.2deg);background:#F3EAF7}
.notes .nt b{display:block;font-family:var(--serif);font-size:40px;margin-bottom:.3rem;
  color:var(--brand-deep)}
/* ⑤ 词云（大小不一） */
.cloud{display:flex;flex-wrap:wrap;gap:.9rem 1.5rem;align-items:baseline;justify-content:center}
.cloud span{font-family:var(--serif);color:var(--ink)}
.cloud .c1{font-size:78px;font-weight:700;color:var(--brand-deep)}
.cloud .c2{font-size:58px}
.cloud .c3{font-size:46px;color:var(--clay)}
.cloud .c4{font-size:38px;color:var(--pine)}
/* ⑥ 对照双栏（借物抒情类对比阅读专用） */
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:1.2rem;align-items:stretch;width:100%}
.vs .vcol{background:var(--card);border:1px solid var(--mist);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:1.3rem 1.5rem;text-align:left}
.vs .vcol h4{font-family:var(--serif);font-size:var(--fs-card-h);color:var(--brand-deep);margin-bottom:.4rem}
.vs .vcol .who{font-size:30px;color:var(--aux);letter-spacing:.1em;margin-bottom:.5rem}
.vs .vcol p{font-size:var(--fs-body);line-height:1.6}
.vs .vmid{display:flex;align-items:center;font-family:var(--serif);font-size:var(--fs-h2);color:var(--gold)}

/* ============================ 7. 图片形态 ============================ */
.pic{overflow:hidden;box-shadow:var(--shadow);flex:0 0 auto}
.pic img{width:100%;height:100%;object-fit:cover;display:block}
.pic-sq{border-radius:var(--r-lg);aspect-ratio:1/1}
.pic-round{border-radius:50%;aspect-ratio:1/1;border:6px solid #fff;
  box-shadow:0 10px 30px rgba(45,42,38,.22)}
.pic-arch{border-radius:999px 999px var(--r-lg) var(--r-lg);aspect-ratio:3/4}
.pic-frame{border-radius:6px;border:10px solid #fff;outline:1px solid var(--mist);
  box-shadow:0 14px 34px rgba(45,42,38,.18);aspect-ratio:4/3}
.pic-polaroid{border-radius:3px;border:12px solid #fff;border-bottom-width:40px;
  box-shadow:0 12px 28px rgba(45,42,38,.2);aspect-ratio:3/4;background:#fff}
.pic-vintage{aspect-ratio:4/3;border-radius:4px;border:8px solid var(--gold-soft);
  outline:2px solid var(--gold);box-shadow:0 12px 30px rgba(45,42,38,.18)}
.pic-scallop{border-radius:var(--r-lg);
  -webkit-mask:radial-gradient(circle at 50% 0,transparent 18px,#000 19px) 0 0/36px 100% repeat-x,
     radial-gradient(circle at 50% 100%,transparent 18px,#000 19px) 0 100%/36px 100% repeat-x,
     linear-gradient(#000,#000) 0 18px/100% calc(100% - 36px) no-repeat;
  mask:radial-gradient(circle at 50% 0,transparent 18px,#000 19px) 0 0/36px 100% repeat-x,
     radial-gradient(circle at 50% 100%,transparent 18px,#000 19px) 0 100%/36px 100% repeat-x,
     linear-gradient(#000,#000) 0 18px/100% calc(100% - 36px) no-repeat}
.pic-w{width:280px} .pic-w2{width:360px} .pic-w3{width:460px}
.pic-rot-l{transform:rotate(-3deg)} .pic-rot-r{transform:rotate(2.5deg)}
.pic-oval{border-radius:50%;aspect-ratio:3/4;border:8px solid #fff;
  box-shadow:0 14px 36px rgba(45,42,38,.22)}
.pic-wide-oval{border-radius:999px;aspect-ratio:16/10;
  box-shadow:0 14px 36px rgba(45,42,38,.2)}
.pic-blob{border-radius:62% 38% 55% 45% / 48% 52% 44% 56%;
  box-shadow:0 14px 34px rgba(45,42,38,.2)}
.pic-soft{-webkit-mask:radial-gradient(120% 120% at 50% 46%,#000 52%,transparent 92%);
  mask:radial-gradient(120% 120% at 50% 46%,#000 52%,transparent 92%);
  box-shadow:none!important}
.pic-tape{position:relative;background:#fff;padding:12px 12px 26px;border-radius:3px;
  box-shadow:0 12px 30px rgba(45,42,38,.2);aspect-ratio:4/3;overflow:visible!important}
.pic-tape::before,.pic-tape::after{content:"";position:absolute;width:96px;height:28px;
  background:rgba(233,224,196,.9);box-shadow:0 2px 6px rgba(0,0,0,.12);
  border-left:1px dashed rgba(0,0,0,.08);border-right:1px dashed rgba(0,0,0,.08)}
.pic-tape::before{left:-26px;top:-12px;transform:rotate(-24deg)}
.pic-tape::after{right:-26px;bottom:6px;transform:rotate(-18deg)}
.pic-tape img{border-radius:2px}
.pic-ornate{border:16px solid transparent;border-radius:6px;
  border-image:repeating-linear-gradient(45deg,var(--brand) 0 7px,var(--brand-soft) 7px 14px) 16;
  box-shadow:0 12px 30px rgba(45,42,38,.18)}
.pic-double{border:9px solid #fff;border-radius:4px;
  outline:2px solid var(--gold);outline-offset:-14px;
  box-shadow:0 0 0 6px rgba(184,137,59,.16),0 14px 34px rgba(45,42,38,.2)}
.pic-lace{padding:14px;border-radius:var(--r-lg);
  background:radial-gradient(circle,#fff 0 7px,rgba(255,255,255,0) 8px) 0 0/26px 26px,var(--brand-soft);
  box-shadow:var(--shadow)}
.pic-lace img{border-radius:var(--r-sm)}
/* 透明底 PNG 装饰（花枝/题签/盘扣）——压在版面上点缀，不参与网格 */
.png-deco{position:absolute;z-index:2;pointer-events:none;user-select:none}
.png-deco.d-dim{opacity:.42}
.png-deco.d-soft{opacity:.62}

/* ============================ 8. 引导问答（老师照着问，答案后揭） ============================ */
.ask{display:flex;flex-direction:column;gap:.9rem;width:100%;text-align:left}
.ask .qline{display:flex;gap:.75rem;align-items:flex-start}
.ask .qno{flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:var(--brand);
  color:#fff;font-family:var(--serif);font-size:32px;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:.15rem}
.ask .qtext{font-family:var(--serif);font-size:var(--fs-question);font-weight:700;line-height:1.42;
  color:var(--ink)}
.on-dark .ask .qtext{color:#fff}
.ask .pause{display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--sans);font-size:var(--fs-small);color:var(--gold);font-weight:600;
  background:var(--gold-soft);border-radius:999px;padding:.2rem .9rem;align-self:flex-start}
.ask .ans{background:var(--card);border:1px solid var(--mist);border-left:6px solid var(--pine);
  border-radius:var(--r-sm);box-shadow:var(--shadow-sm);padding:1rem 1.3rem;
  font-family:var(--sans);font-size:var(--fs-answer);line-height:1.58}
.ask .ans b{color:var(--pine);font-weight:700}
.ask .more{font-family:var(--sans);font-size:var(--fs-answer);line-height:1.55;color:var(--brand-deep);
  background:var(--brand-soft);border-radius:var(--r-sm);padding:.75rem 1.2rem}
.ask .more:before{content:"追问　";font-weight:700;color:var(--brand)}
.on-dark .ask .ans{background:rgba(255,255,255,.97);color:var(--ink)}
.on-dark .ask .ans b{color:var(--pine)}
.on-dark .ask .qno{background:var(--brand);color:#fff}
.on-dark .ask .more{background:rgba(255,255,255,.16);color:#fff}
.on-dark .ask .more:before{color:#F7C948}

/* ============================ 9. 游戏 ============================ */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 3rem;width:100%}
.pair h5{font-size:28px;letter-spacing:.2em;color:var(--aux);text-align:center;margin-bottom:.7rem}
.pchips{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.pc{font-family:var(--serif);font-size:var(--fs-pc);font-weight:700;background:var(--card);
  border:1.5px solid var(--mist);border-radius:14px;padding:.45rem 1.1rem;cursor:pointer;
  transition:transform .16s,border-color .16s,background .16s;user-select:none}
.pc.py{font-family:var(--sans);font-size:var(--fs-answer);font-weight:600;color:var(--brand-deep)}
.pc:hover{border-color:var(--brand);transform:translateY(-2px)}
.pc.sel{border-color:var(--gold);background:var(--gold-soft);transform:scale(1.05)}
.pc.done{background:var(--pine-soft);border-color:var(--pine);color:var(--pine);opacity:.85}
.pc.bad{animation:sk .4s}
@keyframes sk{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.fb{font-size:var(--fs-answer);font-weight:600;color:var(--aux);min-height:2.4rem}
.opts{display:flex;gap:1rem;flex-wrap:wrap}
.opt{font-family:var(--serif);font-size:var(--fs-opt);font-weight:700;background:var(--card);
  border:2px solid var(--mist);border-radius:16px;padding:.6rem 1.8rem;cursor:pointer;
  box-shadow:var(--shadow-sm);transition:transform .16s,border-color .16s,background .16s}
.opt:hover{border-color:var(--brand);transform:translateY(-3px)}
.opt.right{background:var(--pine-soft);border-color:var(--pine);color:var(--pine)}
.opt.wrong{background:#F7E3E0;border-color:#C0392B;color:#C0392B;animation:sk .4s}
/* 深色页上的反馈文字（.fb 自身颜色比 .on-dark 更具体 → 必须单独覆盖） */
.on-dark .fb{color:rgba(255,255,255,.95);text-shadow:0 2px 10px rgba(0,0,0,.8),0 0 22px rgba(0,0,0,.55)}

/* 拖拽/填空游戏（一套组件两种玩法）
   .gd 容器 + .tile 卡片 + .drop/.blank 落点；落点写 data-ans，卡片写 data-val，全填满即判分。
   排序：落点 = ①②③（data-ans=1/2/3）；填空：落点 = 横线（data-ans=词语）。 */
.gd{width:100%}
.gd .tile{font-family:var(--serif);font-size:var(--fs-tile);font-weight:600;background:var(--card);
  border:1.5px solid var(--mist);border-radius:14px;padding:.4rem 1rem;box-shadow:var(--shadow-sm);
  cursor:grab;user-select:none;transition:transform .16s,border-color .16s,background .16s;display:inline-block}
.gd .tile:hover{border-color:var(--brand);transform:translateY(-2px)}
.gd .tile.sel{border-color:var(--gold);background:var(--gold-soft);transform:scale(1.05)}
.gd .tile.dragging{opacity:.45}
.gd .bank{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center;margin-top:.55rem;min-height:2.4rem}
.gd .slots{display:flex;gap:1rem;width:100%}
.gd .slot{flex:1;display:flex;align-items:center;gap:.7rem;background:rgba(255,255,255,.62);
  border:2px dashed var(--mist);border-radius:var(--r-lg);padding:.3rem .8rem;min-height:3.2rem;
  transition:border-color .16s,background .16s}
.gd .slot .no{font-family:var(--serif);font-size:40px;font-weight:700;color:var(--brand);flex:0 0 auto}
.gd .slot .drop{flex:1;display:flex;align-items:center;min-height:2.4rem;border-radius:12px}
.gd .slot.over{border-color:var(--brand);background:var(--brand-soft)}
.gd .slot.ok{border-style:solid;border-color:var(--pine);background:var(--pine-soft)}
.gd .slot.bad{border-color:#C0392B;background:#F7E3E0;animation:sk .4s}
.gd .blank{display:inline-block;min-width:5.4em;min-height:1.2em;border-bottom:3px solid var(--brand);
  text-align:center;vertical-align:baseline;border-radius:6px 6px 0 0;transition:background .16s}
.gd .blank .tile{font-size:inherit;padding:.02em .45em;border-radius:8px;box-shadow:none}
.gd .blank.over{background:var(--brand-soft)}
.gd .blank.ok{border-bottom-color:var(--pine);background:var(--pine-soft)}
.gd .blank.bad{border-bottom-color:#C0392B;background:#F7E3E0;animation:sk .4s}
.gd .g-feedback{margin-top:.5rem}
.slide.dense .gd .tile{padding:.3rem .85rem}
.slide.dense .gd .fb{min-height:0}


/* ============================ 10. 页眉 / 页脚 / 翻页（六固定版块之二） ============================ */
.header{position:absolute;top:var(--edge);left:var(--edge);right:var(--edge);height:var(--header-h);
  z-index:60;display:flex;align-items:center;justify-content:space-between;padding:0 .95rem;
  font-size:var(--fs-ui);color:var(--aux);letter-spacing:.04em;line-height:1.1;
  border:1px solid rgba(184,137,59,.18);border-radius:var(--bar-r);
  background:linear-gradient(rgba(250,248,252,.96),rgba(250,248,252,.82));box-shadow:0 2px 10px rgba(43,39,51,.07)}
.header .h-left{color:var(--clay);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header .h-right{font-size:17px;letter-spacing:.06em;display:inline-flex;gap:.9rem;align-items:center}
/* 品牌 logo（铁律：页眉写死 header-logo，禁每课换图/禁纯文字替代） */
.header .h-logo{height:30px;width:auto;object-fit:contain;display:block;flex:0 0 auto}
.header .h-lgroup{display:inline-flex;align-items:center;gap:.8rem;min-width:0}
.footer{position:absolute;bottom:var(--edge);left:var(--edge);right:var(--edge);height:var(--footer-h);
  z-index:60;display:flex;align-items:center;justify-content:space-between;padding:0 .7rem;
  font-size:var(--fs-ui);color:var(--aux);line-height:1.1;
  border:1px solid rgba(184,137,59,.18);border-radius:var(--bar-r);
  background:linear-gradient(rgba(250,248,252,.82),rgba(250,248,252,.96));box-shadow:0 2px 10px rgba(43,39,51,.07)}
.header.on-img,.footer.on-img{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.92);
  background:linear-gradient(rgba(0,0,0,.36),rgba(0,0,0,.12))}
.header.on-img .h-left{color:#F3E4C8}
/* 深色出血页上给 logo 加白晕，保证蓝色字标在暗底上仍可辨 */
.header.on-img .h-logo{filter:drop-shadow(0 0 3px rgba(255,255,255,.95)) drop-shadow(0 1px 3px rgba(0,0,0,.55))}
/* 翻页：全部收进页脚，左右各一组（禁左右点击翻页区，防误触） */
.navgrp{display:inline-flex;align-items:center;gap:.5rem}
.ftmid{display:inline-flex;align-items:center;gap:1rem;justify-content:center;flex:1;
  min-width:0;padding:0 1rem}
.ftcourse{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}
.ftpage{font-variant-numeric:tabular-nums;font-weight:600;color:var(--brand-deep);
  background:var(--brand-soft);border-radius:999px;padding:.1rem .7rem;white-space:nowrap}
.header.on-img ~ .footer .ftpage,.footer.on-img .ftpage{color:#fff;background:rgba(255,255,255,.18)}
/* 页脚页码跳转：☰ 按钮 + 上拉页码面板 */
.jumpgrp{display:inline-flex;align-items:center;gap:.3rem;position:relative}
#jumpPanel{position:absolute;bottom:calc(100% + 6px);left:0;z-index:200;
  display:none;flex-wrap:wrap;gap:3px;padding:8px 10px;
  background:rgba(250,248,252,.97);border:1px solid rgba(154,148,138,.3);
  border-radius:10px;box-shadow:0 4px 18px rgba(0,0,0,.18);max-width:340px;
  backdrop-filter:blur(6px)}
#jumpPanel.show{display:flex}
#jumpPanel .jp-num{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border:none;border-radius:6px;font-size:var(--fs-btn);font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.85);color:var(--aux);cursor:pointer;
  transition:background .12s,color .12s,transform .1s}
#jumpPanel .jp-num:hover{background:var(--brand-soft);color:var(--brand-deep)}
#jumpPanel .jp-num:active{transform:scale(.9)}
.footer.on-img #jumpPanel{background:rgba(40,36,52,.92);border-color:rgba(255,255,255,.2)}
.footer.on-img #jumpPanel .jp-num{background:rgba(255,255,255,.12);color:rgba(255,255,255,.92)}
.nb{outline:none;-webkit-tap-highlight-color:transparent;height:32px;
  display:inline-flex;align-items:center;gap:.3rem;
  cursor:pointer;border:1.5px solid rgba(154,148,138,.55);background:rgba(255,255,255,.8);color:var(--aux);
  border-radius:8px;font-size:var(--fs-btn);padding:0 .78rem;line-height:1;
  transition:border-color .15s,color .15s,background .15s,transform .12s}
.nb:hover{border-color:var(--brand-deep);color:var(--brand-deep);background:#fff}
.nb:active{transform:scale(.95)}
.nb:focus{outline:none}
.nb:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.nb.mini{padding:0 .5rem;font-size:16px;opacity:.75}
.nb.mini:hover{opacity:1}
.footer.on-img .nb{border-color:rgba(255,255,255,.5);color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.12)}
.footer.on-img .nb:hover{background:rgba(255,255,255,.26);color:#fff}
/* 范读按钮（播放预合成音频，不做在线 TTS） */
[data-audio]{cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--serif);font-size:var(--fs-small);background:var(--card);color:var(--brand-deep);
  border:1.5px solid var(--brand);border-radius:999px;padding:.35rem 1.2rem;
  box-shadow:var(--shadow-sm);transition:transform .16s,background .16s}
[data-audio]:hover{transform:translateY(-2px);background:var(--brand-soft)}
[data-audio].playing{background:var(--pine-soft);border-color:var(--pine);color:var(--pine)}
[data-audio].audio-miss{border-color:var(--gold);color:var(--gold)}
/* 演讲者模式（S 键）：只给老师看，绝不进学生视图 */
#speaker{position:absolute;left:0;right:0;bottom:0;z-index:200;display:none;
  background:rgba(20,18,26,.95);color:#fff;padding:1.5rem 2.2rem;font-size:26px;line-height:1.65;
  max-height:46%;overflow:auto}
#speaker b{color:#F7C948}
.teacher-note{display:none!important}
[data-role="notes-page"]{display:none!important}

/* ============================ 11. 封面 / 封底 / 说明页（六固定版块之三、四） ============================ */
/* 封面 */
.cv-title{font-family:var(--serif);font-weight:700;font-size:124px;letter-spacing:.1em;line-height:1.1}
.cv-title::after{content:"";display:block;width:180px;height:5px;margin-top:.3em;border-radius:3px;
  background:linear-gradient(90deg,var(--gold),var(--clay))}
.cv-kicker{font-size:30px;letter-spacing:.2em;color:#E9D9BC}
.cv-sub{font-size:40px;letter-spacing:.14em;color:rgba(255,255,255,.9)}
.cv-hook{font-family:var(--serif);font-size:36px;display:inline-block;padding:.4rem 1.2rem;
  border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28)}
/* 封面印章（替代旧版书法图 —— 汉字一律 CSS 排，可缩放可改字，不再有「图内文字」） */
.cv-seal{position:absolute;right:6.4rem;bottom:5.6rem;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.06rem;
  padding:.62rem .72rem;border:3px solid var(--gold);border-radius:10px;
  background:rgba(18,14,28,.24);backdrop-filter:blur(2px);
  box-shadow:0 10px 30px rgba(0,0,0,.32)}
.cv-seal b{font-family:var(--serif);font-weight:700;font-size:54px;line-height:1.06;
  color:var(--gold);text-shadow:0 2px 10px rgba(0,0,0,.5)}
/* 名句排版块（替代旧版书法图，用于小结页底部） */
.cp-quote{position:absolute;z-index:3;left:var(--safe-x);bottom:4.4rem;width:52%}
.cp-quote p{font-family:var(--serif);font-weight:700;font-size:44px;line-height:1.62;
  color:var(--brand-deep);letter-spacing:.02em}
.cp-quote p::before{content:"“";color:var(--gold);font-size:58px;line-height:0;
  margin-right:.06em;vertical-align:-.12em}
.cp-quote p::after{content:"”";color:var(--gold);font-size:58px;line-height:0;
  margin-left:.06em;vertical-align:-.12em}
.cp-quote cite{display:block;margin-top:.5rem;font-family:var(--sans);font-style:normal;
  font-size:30px;color:var(--aux)}
.cp-quote::after{content:"";display:block;width:120px;height:4px;border-radius:3px;
  margin-top:.7rem;background:linear-gradient(90deg,var(--gold),rgba(184,137,59,0))}
.cv-logo{position:absolute;z-index:6;height:46px;width:auto;object-fit:contain;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.45))}
/* 封底（铁律：end-logo 72px 高 · 16px 圆角；内容 = 主题句 + 下节预告 + 书法） */
.slide.end .zone{align-items:center;text-align:center}
.end-title{font-family:var(--serif);font-weight:700;font-size:78px;line-height:1.3;
  color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.8),0 0 34px rgba(0,0,0,.5);letter-spacing:.06em}
.end-sub{font-size:38px;letter-spacing:.14em;color:rgba(255,255,255,.9);margin-top:.5rem}
.end-quote{font-family:var(--song);font-size:46px;line-height:1.78;color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.8),0 0 34px rgba(0,0,0,.55);max-width:26em}
.end-next{font-family:var(--sans);font-size:36px;line-height:1.65;color:#fff;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  border-radius:999px;padding:.5rem 1.6rem}
.end-logo{height:72px;width:72px;object-fit:contain;border-radius:16px;margin-top:1.2rem;
  box-shadow:0 8px 24px rgba(0,0,0,.35);background:rgba(255,255,255,.9);padding:4px}
.end-rule{width:220px;height:3px;border-radius:3px;margin:0 auto;
  background:linear-gradient(90deg,rgba(184,137,59,0),var(--gold),rgba(184,137,59,0))}
/* 课件说明页（六固定版块之五）*/
.about .card h4{margin-bottom:.45rem}
.about code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86em;
  background:var(--mist);border-radius:5px;padding:.05em .4em}

/* ============================ 12. 紧凑模式（内容多的页加 .dense，整页等比收紧，防溢出） ============================ */
.slide.dense .eyebrow{font-size:28px;margin-bottom:.24rem}
.slide.dense h1.t{font-size:74px}
.slide.dense .q{font-size:66px}
.slide.dense .quote{font-size:56px;line-height:1.62}
.slide.dense .lead{font-size:46px}
.slide.dense .card{padding:.92rem 1.2rem}
.slide.dense .card h4{font-size:40px;margin-bottom:.2rem}
.slide.dense .card p{font-size:40px;line-height:1.45}
.slide.dense .sent{font-size:48px;line-height:1.64;padding:.9rem 1.25rem}
.slide.dense .tip{font-size:40px;padding:.58rem .95rem}
.slide.dense .flow i{font-size:32px;padding:.28rem .95rem}
.slide.dense .flow em{font-size:38px}
.slide.dense .chip{font-size:32px;padding:.24rem .85rem}
.slide.dense .trio{padding:.42rem 1.05rem}
.slide.dense .trio .th{font-size:30px}
.slide.dense .trio .tn{font-size:30px;padding-left:1.5rem}
.slide.dense .ask{gap:.4rem}
.slide.dense .ask .qtext{font-size:46px}
.slide.dense .ask .qno{width:46px;height:46px;font-size:28px}
.slide.dense .ask .pause{font-size:32px;padding:.15rem .8rem}
.slide.dense .ask .ans{font-size:40px;line-height:1.5;padding:.65rem 1rem}
.slide.dense .ask .more{font-size:38px;line-height:1.5;padding:.45rem .9rem}
.slide.dense .zone>.q,.slide.dense .zone>.lead{margin-top:.55rem!important}
.slide.dense .vs .vcol h4{font-size:42px}
.slide.dense .vs .vcol p{font-size:40px;line-height:1.5}
/* 紧凑档要覆盖全部组件，否则「板书」「作业」这类页会漏档位 */
.slide.dense .steps .st{padding:.6rem .9rem .6rem 2.05rem}
.slide.dense .steps .st .no{font-size:38px;top:.8rem;left:.6rem}
.slide.dense .steps .st h5{font-size:38px}
.slide.dense .steps .st p{font-size:32px;line-height:1.4}
.slide.dense .gd p{font-size:40px;line-height:1.45}
.slide.dense .gd .tile{font-size:36px}
.slide.dense .hwc{padding:.92rem 1.15rem}
.slide.dense .hwc h4{font-size:42px}
.slide.dense .hwc p{font-size:40px;line-height:1.45}
.slide.dense .gd .slot{min-height:2.5rem;padding:.16rem .62rem}
.slide.dense .gd .bank{min-height:2rem;margin-top:.35rem}
.slide.dense .gd .drop{min-height:2.1rem}
.slide.dense .key .word{font-size:118px}
.slide.dense .key .note{font-size:40px;line-height:1.6}
.slide.dense .trio .th{font-size:30px}
.slide.dense .trio .tn{font-size:28px;padding-left:1.6rem}
.slide.dense .notes .nt{font-size:30px}

/* ============================ 13. 演讲模式 / 全屏（S 键 · 页脚按钮）============================
   老师上课的真实场景是：接上投影、按一下、屏幕只剩「这一页」，没有任何界面干扰；
   讲完再按一下退出。所以演讲模式 = 全屏 + 收起页眉页脚与全部控件。
   · 进入/退出：S 键，或页脚「◱ 演讲」按钮；浏览器全屏被 Esc 退出时自动同步复位。
   · 进得去也出得来：演讲模式保留一枚极淡的退出提示（鼠标靠近即变实）。 */
body.presenting .header,
body.presenting .footer,
body.presenting #speaker{opacity:0!important;pointer-events:none!important}
.header,.footer{transition:opacity .3s ease}
.present-hint{position:fixed;right:1.4rem;top:1.4rem;z-index:400;opacity:0;pointer-events:none;
  font-family:var(--sans);font-size:17px;color:#fff;background:rgba(20,18,26,.55);
  border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:.4rem 1rem;
  letter-spacing:.06em;transition:opacity .3s ease;cursor:pointer;user-select:none}
body.presenting .present-hint{opacity:.3;pointer-events:auto}
body.presenting .present-hint:hover{opacity:1}
/* 页脚「全屏 / 退出全屏 / 演讲」按钮：状态不可用的一侧置灰，一眼看出当前在哪一态 */
.nb:disabled{opacity:.32;cursor:default}
.nb:disabled:hover{border-color:rgba(154,148,138,.55);color:var(--aux);background:rgba(255,255,255,.8)}
.footer.on-img .nb:disabled:hover{border-color:rgba(255,255,255,.5);color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.12)}
.nb[aria-pressed="true"]{background:var(--brand-soft);border-color:var(--brand-deep);color:var(--brand-deep)}
.footer.on-img .nb[aria-pressed="true"]{background:rgba(255,255,255,.3);border-color:#fff;color:#fff}

/* ============================ 15. 页内版式：内容 | 提问 双栏（v3.1）============================
   为什么要有它：字号放大到「教室可读」（正文 44px ≈ 22pt）以后，
   「标题 + 内容 + 提问链」纵向堆叠一定装不下 1080px。而提问又必须与内容同屏
   —— 老师是**指着课文问**的，把提问拆到下一页，学生就没有可看的东西了。
   所以标准解法是并置成双栏：标题占满整行，左栏放内容、右栏放提问链。
   用法：给 <section> 加 data-split="w64"（左宽右窄）/ "w46"（左窄右宽）/ 留空（1:1），
   公共层的脚本会自动把「提问链 .ask」移到右栏，其余内容留在左栏 ——
   这样以后调栏宽比、调间距，全站一次生效，不必逐页改。 */
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:2.2rem;row-gap:1rem;align-items:start;width:100%;min-height:0}
.cols.w64{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.cols.w46{grid-template-columns:minmax(0,1fr) minmax(0,1.32fr)}
.cols.w58{grid-template-columns:minmax(0,1.18fr) minmax(0,1fr)}
.col-a,.col-b{display:flex;flex-direction:column;gap:.8rem;min-width:0;width:100%}
.col-a>*,.col-b>*{margin-top:0!important}
/* 双栏容器一律顶对齐：内容高于容器时只从底部溢出，不会两头冒（好定位、好收口） */
.zh-l.split,.zh-r.split,.zh-f.split,.zh-c.split,.ht.split{justify-content:flex-start}
/* 双栏文字栏：撑满安全区。原先只占 58%/62% 宽并把内容挤在左半边，
   右侧空出 500px 而左栏文字被迫频繁换行（丁香结 P19 实测超界又溢出）。
   撑满后双栏可用宽度 +42%，等于白捡排版空间，一个字都不用删。 */
.zh-l.split{left:var(--safe-x);width:calc(100% - 2*var(--safe-x))}
.zh-r.split{right:var(--safe-x);width:calc(100% - 2*var(--safe-x))}
.zh-c.split{width:82%;text-align:left;align-items:stretch}
/* 半幅出血图上的文字栏：**外侧贴安全区、内侧只留图文间隙**。
   原先两侧都写 3.4rem，靠屏幕边的那一侧就比安全区窄了 58px（实测超界）。 */
.ht.split{width:64%;padding:0 3.4rem 0 var(--safe-x)}
.ht.split.r{left:36%;padding-left:3.4rem;padding-right:var(--safe-x)}
section:has(.ht.split) .hl,section:has(.ht.split) .hr{width:36%}
/* 浮层白卡：并置双栏时同样放宽 */
.fl-card.split{width:70%}
.fl-card.split.left{left:var(--safe-x)}
.fl-card.split.right{right:var(--safe-x)}
.fl-card.split.mid{width:78%}
/* 双栏里的组件再紧一档，把省下的高度还给字号 */
.cols .sent{padding:1.05rem 1.35rem;line-height:1.78}
.cols .card{padding:1.1rem 1.3rem}
.cols .ask{gap:.65rem}
.cols .ask .more{margin-top:.05rem}
.cols .tip{padding:.8rem 1.1rem}
.cols .q{line-height:1.3}
.cols .quote{line-height:1.7;text-align:left}
/* 引文进双栏后必须左对齐：.quote 基础样式是居中的（为单栏居中版式服务），
   在窄栏里居中对齐会把每行都缩进成阶梯，看着像排坏了（丁香结 P17 实测）。 */
/* 便签墙进双栏后改竖排：省掉错落留白，字反而排得更舒展 */
.cols .notes{flex-direction:column;gap:.6rem;align-items:stretch}
.cols .notes .nt{width:100%;transform:none!important;margin-top:0!important}
/* 通栏版式里的便签墙：三张便签斜贴会各向外扩 4~6px，把左边缘顶出安全区
   （measure_overflow 记为「边框超界」）。通栏页宽度已经吃满，不需要靠斜贴
   找错落感，直接摆正即可 —— 用 .notes.flat 显式声明。 */
.notes.flat .nt{transform:none!important}
.cols .row{gap:.55rem}
.cols [data-audio]{padding:.32rem 1rem}
/* 出血页的窄文字栏并置双栏时放宽 —— 已并入上方「撑满安全区」定义（原这里有
   一条 width:62% 的重复覆盖，会把安全区宽度打折，已删除）。 */
/* .zh-c.split 的「宽度 + 左对齐」统一定义在第 12 节（双栏容器）——
   此处原有一条 width:80% 的重复覆盖，会让「左对齐」那条的宽度失效，已并入上方定义。 */
/* 编号步骤条整体收紧，给同页的板书填空让位 */
.steps .st{padding:1.05rem 1.2rem 1.05rem 2.4rem}
.steps .st .no{top:.95rem}

/* ============================ 14. 可访问性兜底 ============================ */
[data-step]{will-change:opacity,transform}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-contrast:more){
  .card,.hwc,.vs .vcol{border-color:var(--ink)}
}
