/* ========================================================================= 显影 · 共享设计系统 2.0 theme.css -------------------------------------------------------------------------- 这是整个网站的"视觉地基"。门户与每一份课件都 link 这一个文件。 2.0 变化（2026-07-04，设计定稿见 docs/14-视觉系统2.0-三主题方案.md）： · 三主题：曜蓝 azure（默认蓝）/ 竹青 jade（中立绿）/ 樱粉 blossom（女生粉） 切换机制：；不设即曜蓝。 · 语义角色令牌：--perf（表现色，原金线）/ --ability（能力色，原青线）/ --warn（警示） 旧令牌 --gold/--teal/--clay 保留为别名，46 门课的旧 CSS 不改也能吃到主题。 · 新组件：步进器 / 参数演示 / 手写图表 / 案例练兵场 / 翻牌 / 时间轴 / 主题色点 / AI插画容器 · 对比度：三主题全部组合由 tools/contrast-check.js 机器审计（小字≥4.5 / 大字≥3.0）。 组件目录： · 颜色与字体令牌 :root / [data-theme] · 排版底座 body / .mono / .disp / h1-h3 / .lead · 色带 .ink-band / .ink-soft-band / .paper-band / .paper-band-2 · 章节外壳 section / .wrap / .narrow · 标签头 + 楔形标记 .eyebrow / .wedge-glyph · 引语 .pull · 转向器（从→到） .pivot · 双栏对比 .compare · 卡片网格 .card-grid / .card · 数字条 .stats / .stat · 编号步骤 .steps / .step · 提示框 .callout（.info / .warn） · 收束盒 .recap · 参考文献 .refs · 按钮 / 链接 .btn · 出现动画 .reveal —— 2.0 新增 —— · 步进器 .stepper · 参数演示 .param-demo · 手写图表 .svg-chart · 案例练兵场 .case-arena · 翻牌卡 .flipcard · 时间轴 .timeline · 主题切换色点 .theme-dots · AI 插画容器 .figure-ai ========================================================================= */ /* 引语中文衬线（在线加载；断网回退系统宋体，不影响可读） */ @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;600&display=swap'); /* ===================== 主题 C · 竹青 JADE（可选 · 中立绿） ===================== */ :root{ /* —— 墨色：深背景三档（由深到浅） —— */ --ink:#122420; --ink-soft:#1B322C; --ink-line:#2E4C43; --ink-rgb:18,36,32; /* —— 纸色：暖底三档（由深到浅）+ 纸上描边 —— */ --paper:#ECE9DD; --paper-2:#F4F1E7; --paper-3:#FBF9F1; --paper-line:#DED6C6; /* —— 语义角色：表现色（当场表现/高亮）· 楔形上线 —— */ --perf:#E0A02C; --perf-soft:#F2C875; --perf-on-paper:#7A5410; /* 浅底上的表现色（小字达标档） */ --perf-rgb:224,160,44; /* —— 语义角色：能力色（长期能力/正例）· 楔形下线 —— */ --ability:#256A4B; /* 浅底用（深档） */ --ability-bright:#4FCE96; /* 深底用（亮档） */ --ability-rgb:37,106,75; --ability-bright-rgb:79,206,150; /* —— 语义角色：警示（仅错误/反例/坑） —— */ --warn:#C95B38; --warn-on-paper:#A34627; --warn-on-ink:#E7855F; --warn-rgb:201,91,56; /* —— 文字颜色（按底色分四档） —— */ --on-ink:#EDEAE1; --on-ink-mut:#9DB3AC; --on-ink-faint:#8FA6A0; --on-ink-strong:#FFFFFF; --on-paper:#19282E; --on-paper-mut:#5B6A64; --on-paper-strong:#0D1B17; --maxw:1080px; --radius:16px; /* —— 旧令牌别名（migration layer，46 门课的旧 CSS 依赖） —— */ --gold:var(--perf); --gold-soft:var(--perf-soft); --teal:var(--ability); --teal-bright:var(--ability-bright); --clay:var(--warn); } /* ===================== 主题 A · 曜蓝 AZURE（默认蓝） ===================== */ :root:not([data-theme]), [data-theme="azure"]{ --ink:#0F1D2E; --ink-soft:#16283D; --ink-line:#28425F; --ink-rgb:15,29,46; --paper:#E7EDF4; --paper-2:#F0F5FA; --paper-3:#FAFCFE; --paper-line:#CCD8E6; --perf:#E8A83D; --perf-soft:#F2C875; --perf-on-paper:#6F4E0D; --perf-rgb:232,168,61; --ability:#1B657F; --ability-bright:#4FC3E8; --ability-rgb:27,101,127; --ability-bright-rgb:79,195,232; --warn:#C95B38; --warn-on-paper:#A03E20; --warn-on-ink:#E7855F; --warn-rgb:201,91,56; --on-ink:#EAEFF5; --on-ink-mut:#9AB0C4; --on-ink-faint:#8CA2B8; --on-ink-strong:#FFFFFF; --on-paper:#16232E; --on-paper-mut:#4F6172; --on-paper-strong:#0B1622; } /* ===================== 主题 B · 樱粉 BLOSSOM（女生粉） ===================== */ [data-theme="blossom"]{ --ink:#291A28; --ink-soft:#382338; --ink-line:#5A3C55; --ink-rgb:41,26,40; --paper:#F5EBEC; --paper-2:#F9F1F2; --paper-3:#FDFAFA; --paper-line:#E5D2D6; --perf:#F28BA8; --perf-soft:#F7B8C9; --perf-on-paper:#9E2F52; --perf-rgb:242,139,168; --ability:#6E3FAE; --ability-bright:#C09AF0; --ability-rgb:110,63,174; --ability-bright-rgb:192,154,240; --warn:#C4563B; --warn-on-paper:#A03A24; --warn-on-ink:#E8836A; --warn-rgb:196,86,59; --on-ink:#F3ECF1; --on-ink-mut:#C0A3B8; --on-ink-faint:#B392A6; --on-ink-strong:#FFFFFF; --on-paper:#2B1B27; --on-paper-mut:#6E5464; --on-paper-strong:#1C0F1A; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--ink); color:var(--on-ink); font-family:"MiSans","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif; font-size:17px; line-height:1.75; -webkit-font-smoothing:antialiased; letter-spacing:.01em; } .mono{font-family:"IBM Plex Mono",ui-monospace,monospace;} .disp{font-family:"Space Grotesk","MiSans","PingFang SC","Noto Sans SC",sans-serif;} /* ---- 顶部滚动进度条（楔形上行的呼应） ---- */ #progress{position:fixed;top:0;left:0;height:3px;width:0; background:linear-gradient(90deg,var(--perf),var(--perf-soft));z-index:60;} /* ===================== 排版底座 ===================== */ h1,h2,h3{font-weight:600;line-height:1.18;letter-spacing:0;} h2{font-size:clamp(28px,4.4vw,42px);margin:0 0 22px;} h3{font-size:22px;margin:0 0 10px;} p{margin:0 0 20px;} .lead{font-size:clamp(18px,2.2vw,21px);color:var(--on-ink-mut);} strong{font-weight:600;color:var(--on-ink-strong);} a{color:inherit;} .gold{color:var(--perf);} .tealc{color:var(--ability);} .clayc{color:var(--warn);} /* 浅色带上的金字自动换深档（对比度达标档，随主题） */ .paper-band .gold,.paper-band-2 .gold{color:var(--perf-on-paper);} em{font-style:italic;} /* ===================== 色带 ===================== 交替使用 ink / paper 段落，给长页面节奏。paper 段会自动翻转文字配色。 */ .ink-band{background:var(--ink);color:var(--on-ink);} .ink-soft-band{background:var(--ink-soft);color:var(--on-ink);} .paper-band{background:var(--paper);color:var(--on-paper);} .paper-band-2{background:var(--paper-2);color:var(--on-paper);} .paper-band .lead,.paper-band-2 .lead{color:var(--on-paper-mut);} .paper-band strong,.paper-band-2 strong{color:var(--on-paper-strong);} /* ===================== 章节外壳 ===================== */ section{padding:96px 24px;} .wrap{max-width:var(--maxw);margin:0 auto;} .narrow{max-width:760px;margin:0 auto;} /* ===================== 标签头 + 楔形标记 ===================== 每个章节开头的小标签。楔形 = 全站的签名图形（两条分叉的线：表现 + 能力）。 楔形 SVG 内联色请写 var(--gold)/var(--teal) 或 currentColor，随主题变色。 */ .eyebrow{ font-family:"IBM Plex Mono",monospace; font-size:12.5px;letter-spacing:.22em;text-transform:uppercase; display:flex;align-items:center;gap:12px;margin:0 0 22px; color:var(--perf); } .paper-band .eyebrow,.paper-band-2 .eyebrow{color:var(--ability);} .wedge-glyph{display:inline-block;width:26px;height:12px;flex:0 0 auto;} .wedge-glyph line{stroke-width:2;stroke-linecap:round;} /* ===================== 引语 .pull ===================== 衬线斜体的一句话，把一段的"结论"钉出来。别滥用，一节最多一个。 2.0：中文落 Noto Serif SC（在线）/ 系统宋体（离线），拉丁与数字仍走 Fraunces。 */ .pull{ font-family:"Fraunces","Noto Serif SC","Songti SC","SimSun",Georgia,serif; font-style:italic;font-weight:500; font-size:clamp(22px,3.4vw,32px);line-height:1.4;letter-spacing:0; margin:8px 0;padding:6px 0 6px 26px;border-left:3px solid var(--perf); color:var(--on-ink-strong);max-width:26ch; } .paper-band .pull,.paper-band-2 .pull{color:var(--on-paper-strong);border-left-color:var(--ability);} /* ===================== 转向器 .pivot ===================== "原来以为 X（划掉）→ 其实是 Y"。专门用来做认知翻转。 */ .pivot{ background:var(--ink-soft);border:1px solid var(--ink-line);border-radius:14px; padding:24px 26px;margin:30px 0; } .paper-band .pivot,.paper-band-2 .pivot{background:var(--paper-3);border-color:var(--paper-line);} .pivot .from{color:var(--on-ink-mut);text-decoration:line-through; text-decoration-color:var(--warn);text-decoration-thickness:2px;display:block;} .paper-band .pivot .from,.paper-band-2 .pivot .from{color:var(--on-paper-mut);} .pivot .arrow{font-family:"Space Grotesk";font-weight:600;color:var(--perf); margin:8px 0;display:block;} .paper-band .pivot .arrow,.paper-band-2 .pivot .arrow{color:var(--ability);} .pivot .to{font-weight:600;font-size:1.06em;display:block;} .pivot .to .hl{box-shadow:inset 0 -.55em 0 rgba(var(--perf-rgb),.28);} .paper-band .pivot .to .hl,.paper-band-2 .pivot .to .hl{box-shadow:inset 0 -.55em 0 rgba(var(--ability-rgb),.18);} /* ===================== 双栏对比 .compare ===================== 左 .bad（警示）/ 右 .good（能力）。做"差做法 vs 好做法"。 */ .compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:30px 0 10px;} .compare .col{border-radius:14px;padding:24px;border:1px solid;} .compare .col.bad{background:rgba(var(--warn-rgb),.07);border-color:rgba(var(--warn-rgb),.35);} .compare .col.good{background:rgba(var(--ability-rgb),.09);border-color:rgba(var(--ability-bright-rgb),.35);} .compare .col .tag{font-family:"IBM Plex Mono",monospace;font-size:12px; letter-spacing:.08em;margin-bottom:6px;} .compare .col.bad .tag{color:var(--warn-on-ink);} .compare .col.good .tag{color:var(--ability-bright);} .paper-band .compare .col.bad .tag,.paper-band-2 .compare .col.bad .tag{color:var(--warn-on-paper);} .paper-band .compare .col.good .tag,.paper-band-2 .compare .col.good .tag{color:var(--ability);} .compare .col h4{margin:0 0 14px;font-size:18px;font-weight:600;} .compare .col ul{margin:0 0 16px;padding-left:18px;} .compare .col li{margin-bottom:7px;font-size:15px;color:var(--on-ink-mut);} .compare .col .verdict{font-family:"Space Grotesk";font-size:clamp(22px,2.6vw,28px);font-weight:600;} .compare .col.bad .verdict{color:var(--warn);} .compare .col.good .verdict{color:var(--ability-bright);} .paper-band .compare .col.good .verdict,.paper-band-2 .compare .col.good .verdict{color:var(--ability);} .compare .col .verdict small{display:block;font-family:inherit;font-size:13px; color:var(--on-ink-mut);font-weight:400;margin-top:6px;} .paper-band .compare .col li,.paper-band-2 .compare .col li, .paper-band .compare .col .verdict small,.paper-band-2 .compare .col .verdict small{color:var(--on-paper-mut);} /* ===================== 卡片网格 .card-grid / .card ===================== 通用卡片。默认放在 paper 段上。col-2 / col-3 控制列数。 */ .card-grid{display:grid;gap:18px;} .card-grid.col-2{grid-template-columns:repeat(2,1fr);} .card-grid.col-3{grid-template-columns:repeat(3,1fr);} .card{background:var(--paper-3);border:1px solid var(--paper-line);border-radius:14px;padding:26px;} .ink-band .card,.ink-soft-band .card{background:var(--ink-soft);border-color:var(--ink-line);} .card .src{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em; color:var(--ability);margin-bottom:12px;} .ink-band .card .src,.ink-soft-band .card .src{color:var(--ability-bright);} .card .big{font-family:"Space Grotesk";font-size:34px;font-weight:600;color:var(--ability); line-height:1;margin-bottom:6px;} .ink-band .card .big,.ink-soft-band .card .big{color:var(--ability-bright);} .card h4{margin:0 0 8px;font-size:17px;} .card p{font-size:14.5px;color:var(--on-paper-mut);margin:10px 0 0;} .ink-band .card p,.ink-soft-band .card p{color:var(--on-ink-mut);} /* ===================== 数字条 .stats / .stat ===================== 一行 2-4 个大数字。.up 表现色（上升）/ .down 警示色（下降）。 */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ink-line); border:1px solid var(--ink-line);border-radius:14px;overflow:hidden;} .stat{background:var(--ink-soft);padding:26px 20px;} .stat .num{font-family:"Space Grotesk",sans-serif;font-size:clamp(30px,4vw,44px); font-weight:600;line-height:1;} .stat .num.up{color:var(--perf);} .stat .num.down{color:var(--warn);} .stat .cap{font-size:13.5px;color:var(--on-ink-mut);margin-top:12px;line-height:1.5;} .stat .sub{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em; color:var(--on-ink-faint);margin-top:8px;} /* 小字对比度由 contrast-check.js 把关 */ /* ===================== 编号步骤 .steps / .step ===================== 带大序号的条目。用于"流程""判据""阶梯"这类真有顺序的内容。 */ .steps{margin-top:24px;} .step{background:var(--paper-3);border:1px solid var(--paper-line);border-radius:16px; padding:28px;margin-bottom:18px;display:grid;grid-template-columns:64px 1fr; gap:24px;align-items:start;} .ink-band .step,.ink-soft-band .step{background:var(--ink-soft);border-color:var(--ink-line);} .step .idx{font-family:"Space Grotesk";font-size:46px;font-weight:600;color:var(--perf);line-height:1;} .paper-band .step .idx,.paper-band-2 .step .idx{color:var(--perf-on-paper);} .step h3{margin:0 0 4px;font-size:21px;} .step .ladder{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.08em; color:var(--on-paper-mut);text-transform:uppercase;margin-bottom:14px;} .ink-band .step .ladder,.ink-soft-band .step .ladder{color:var(--on-ink-mut);} .step .row{margin:12px 0;} .step .k{font-size:13px;font-family:"IBM Plex Mono",monospace;letter-spacing:.06em; color:var(--ability);display:block;margin-bottom:3px;} .ink-band .step .k,.ink-soft-band .step .k{color:var(--ability-bright);} .step .v{font-size:15.5px;} /* ===================== 提示框 .callout ===================== .info（能力色，补充）/ .warn（警示色，诚实提醒/坑）。 */ .callout{border-radius:14px;padding:18px 22px;margin:16px 0;} .callout h4{margin:0 0 6px;font-size:16px;} .callout p{font-size:15px;margin:0;} .callout.info{background:rgba(var(--ability-rgb),.08);border:1px solid rgba(var(--ability-rgb),.30);} .callout.info h4{color:var(--ability);} .callout.warn{background:rgba(var(--warn-rgb),.06);border:1px solid rgba(var(--warn-rgb),.28);} .callout.warn h4{color:var(--warn-on-paper);} .ink-band .callout.warn h4,.ink-soft-band .callout.warn h4{color:var(--warn-on-ink);} .ink-band .callout.info,.ink-soft-band .callout.info{background:rgba(var(--ability-bright-rgb),.08);} .ink-band .callout.info h4,.ink-soft-band .callout.info h4{color:var(--ability-bright);} .callout p{color:var(--on-paper-mut);} .ink-band .callout p,.ink-soft-band .callout p{color:var(--on-ink-mut);} /* recipe 行：左侧能力色竖线的小段（流程配方） */ .recipe{border-left:3px solid var(--ability);padding:4px 0 4px 22px;margin:22px 0;} .recipe h4{margin:0 0 6px;font-size:18px;} .recipe p{font-size:15px;color:var(--on-paper-mut);margin:0;} .ink-band .recipe,.ink-soft-band .recipe{border-left-color:var(--ability-bright);} .ink-band .recipe p,.ink-soft-band .recipe p{color:var(--on-ink-mut);} /* ===================== 收束盒 .recap ===================== 课件结尾："一句主线 + 几个锚点"。 */ .recap{background:var(--ink-soft);border:1px solid var(--ink-line);border-radius:16px;padding:34px;} .recap .spine{font-family:"Fraunces","Noto Serif SC","Songti SC","SimSun",Georgia,serif; font-style:italic;font-size:clamp(19px,2.6vw,24px); line-height:1.5;color:var(--on-ink-strong);margin-bottom:24px;} .recap .anchors{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .recap .anchor{background:var(--ink);border-radius:12px;padding:18px 20px;font-size:15px; border:1px solid var(--ink-line);} .recap .anchor .t{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em; color:var(--perf);margin-bottom:7px;text-transform:uppercase;} /* ===================== 参考文献 .refs ===================== */ .refs{font-size:14px;color:var(--on-ink-mut);list-style:none;padding:0;} .refs li{margin-bottom:14px;} .refs .meta{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--on-ink-faint);} .refs a{color:var(--perf-soft);word-break:break-all;} footer{padding:40px 24px;text-align:center;color:var(--on-ink-mut);font-size:13px; font-family:"IBM Plex Mono",monospace;letter-spacing:.04em;} /* ===================== 按钮 / 链接 .btn ===================== */ .btn{display:inline-flex;align-items:center;gap:8px;font-family:"IBM Plex Mono",monospace; font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none; padding:11px 18px;border-radius:10px;border:1px solid var(--ink-line); color:var(--on-ink);transition:border-color .2s,transform .2s,background .2s;} .btn:hover{border-color:var(--perf);transform:translateY(-1px);} .btn.solid{background:var(--perf);color:var(--ink);border-color:var(--perf);font-weight:600;} .btn.solid:hover{background:var(--perf-soft);border-color:var(--perf-soft);} .paper-band .btn,.paper-band-2 .btn{color:var(--on-paper);border-color:var(--paper-line);} .paper-band .btn:hover,.paper-band-2 .btn:hover{border-color:var(--ability);} /* ===================== 出现动画 .reveal ===================== */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease;} .reveal.in{opacity:1;transform:none;} a:focus-visible,button:focus-visible{outline:2px solid var(--perf);outline-offset:3px;} /* ===================== 响应式 ===================== */ @media (max-width:760px){ section{padding:64px 18px;} .stats{grid-template-columns:1fr 1fr;} .compare,.card-grid.col-2,.card-grid.col-3,.recap .anchors{grid-template-columns:1fr;} .step{grid-template-columns:1fr;gap:14px;} .step .idx{font-size:38px;} .pull{max-width:none;} } /* ============================================================ 增补组件（二次/三次审查修复 · 2026-07-02） · .term-hint / .type-tag / .recap 复述先行 / .quiz-final / .lesson-bottom-nav / .backtop / .bn-tag / .tf-echo ============================================================ */ /* 术语首现提示：点线下划 + 悬停短释，点击进术语表 */ .term-hint{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor; cursor:help;opacity:.98;} .term-hint:hover{color:var(--ability-bright);border-bottom-style:solid;} .paper-band .term-hint:hover,.paper-band-2 .term-hint:hover{color:var(--ability);} /* 课型标签（如「叙事精读版」） */ .type-tag{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em; padding:3px 9px;border:1px solid var(--ink-line);border-radius:999px; color:var(--on-ink-mut);text-transform:uppercase;white-space:nowrap;} /* hero 时长行（H3） */ .hero-len{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.08em; color:var(--on-ink-mut);text-transform:none;} /* ---- 收束盒：先复述、后对照（C3 + H5） ---- */ .recap.veiled .spine,.recap.veiled .anchors,.recap.veiled .recap-turn{display:none;} .recap-veil .rv-ask{font-family:"Fraunces","Noto Serif SC","Songti SC","SimSun",Georgia,serif; font-style:italic;font-size:clamp(18px,2.4vw,22px);line-height:1.55; color:var(--on-ink-strong);margin:0 0 16px;} .recap-veil textarea{width:100%;min-height:76px;border:1px solid var(--ink-line);border-radius:10px; padding:12px 14px;font-family:inherit;font-size:15px;background:rgba(var(--ink-rgb),.55); color:var(--on-ink);resize:vertical;line-height:1.7;} .recap-veil textarea:focus{outline:2px solid var(--ability-bright);outline-offset:1px;} .recap-veil textarea::placeholder{color:var(--on-ink-faint);} .recap-veil .rv-go{font:inherit;font-size:14.5px;font-weight:600;margin-top:14px; padding:11px 20px;border-radius:9px;border:none;background:var(--perf);color:var(--ink);cursor:pointer;} .recap-veil .rv-go:hover{background:var(--perf-soft);} .recap-veil .rv-note{font-family:"IBM Plex Mono",monospace;font-size:11.5px; color:var(--on-ink-mut);margin:10px 0 0;} .recap-echo{background:rgba(var(--ink-rgb),.5);border:1px dashed var(--ink-line);border-radius:12px; padding:14px 18px;margin:0 0 18px;} .recap-echo .re-t{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em; color:var(--ability-bright);text-transform:uppercase;margin-bottom:6px;} .recap-echo .re-body{font-size:15px;color:var(--on-ink);white-space:pre-wrap;margin:0;line-height:1.7;} .recap-turn{margin:20px 0 0;padding-top:18px;border-top:1px dashed var(--ink-line); font-size:14.5px;color:var(--on-ink-mut);line-height:1.7;} .recap-turn b{color:var(--on-ink);} .recap-turn .rt-k{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em; color:var(--ability-bright);text-transform:uppercase;margin-right:8px;} /* ---- 做题终态（H4）与重做（C5） ---- */ .quiz-final{display:none;margin-top:22px;background:var(--paper-3);border:1px solid var(--paper-line); border-left:4px solid var(--perf);border-radius:14px;padding:20px 22px;} .quiz-final.show{display:block;animation:qfrise .45s ease;} @keyframes qfrise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}} .quiz-final .qf-score{font-family:"Space Grotesk","PingFang SC",sans-serif;font-size:19px; font-weight:600;color:var(--on-paper-strong);margin:0 0 8px;} .quiz-final .qf-score b{color:var(--perf-on-paper);} .quiz-final p{font-size:14.5px;color:var(--on-paper-mut);margin:5px 0 0;line-height:1.65;} .quiz-final a{color:var(--ability);font-weight:600;text-decoration:none; border-bottom:1px dashed rgba(var(--ability-rgb),.45);} .quiz-final a:hover{border-bottom-style:solid;} .ink-band .quiz-final,.ink-soft-band .quiz-final{background:var(--ink-soft);border-color:var(--ink-line); border-left-color:var(--perf);} .ink-band .quiz-final .qf-score,.ink-soft-band .quiz-final .qf-score{color:var(--on-ink-strong);} .ink-band .quiz-final .qf-score b,.ink-soft-band .quiz-final .qf-score b{color:var(--perf);} .ink-band .quiz-final p,.ink-soft-band .quiz-final p{color:var(--on-ink-mut);} .ink-band .quiz-final a,.ink-soft-band .quiz-final a{color:var(--ability-bright);} .redo-btn{font:inherit;font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600; margin-top:10px;padding:7px 14px;border-radius:8px;cursor:pointer; border:1px solid var(--paper-line);background:var(--paper-3);color:var(--on-paper-mut);} .redo-btn:hover{border-color:var(--ability);color:var(--ability);} /* ---- 课间动线（U8/H4/H2）：上一课 / 术语表 / 下一课 ---- */ .lesson-bottom-nav{background:var(--ink);border-top:1px solid var(--ink-line);padding:34px 24px;} .lesson-bottom-nav .lbn-wrap{max-width:var(--maxw);margin:0 auto;display:grid; grid-template-columns:1fr auto 1fr;gap:16px;align-items:stretch;} .lesson-bottom-nav a{text-decoration:none;border:1px solid var(--ink-line);border-radius:14px; padding:16px 18px;display:flex;flex-direction:column;gap:5px;color:var(--on-ink); transition:border-color .18s ease,transform .18s ease;} .lesson-bottom-nav a:hover{border-color:var(--perf);transform:translateY(-2px);} .lesson-bottom-nav .lbn-k{font-family:"IBM Plex Mono",monospace;font-size:10.5px; letter-spacing:.14em;color:var(--on-ink-mut);text-transform:uppercase;} .lesson-bottom-nav .lbn-t{font-size:15px;font-weight:600;line-height:1.4;} .lesson-bottom-nav .lbn-next{text-align:right;align-items:flex-end;border-color:rgba(var(--perf-rgb),.4);} .lesson-bottom-nav .lbn-mid{justify-content:center;align-items:center;text-align:center; border-style:dashed;color:var(--on-ink-mut);} .lesson-bottom-nav .lbn-mid:hover{color:var(--ability-bright);border-color:var(--ability-bright);} .lesson-bottom-nav .lbn-empty{border-style:dashed;color:var(--on-ink-mut);pointer-events:none;} @media (max-width:700px){ .lesson-bottom-nav .lbn-wrap{grid-template-columns:1fr;} .lesson-bottom-nav .lbn-next{text-align:left;align-items:flex-start;} } /* ---- 回顶（U7） ---- */ .backtop{position:fixed;right:18px;bottom:20px;z-index:49;width:44px;height:44px;border-radius:12px; border:1px solid var(--ink-line);background:rgba(var(--ink-rgb),.88);color:var(--on-ink-mut); font-size:18px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s ease,color .15s;} .backtop.show{opacity:1;pointer-events:auto;} .backtop:hover{color:var(--perf);border-color:var(--perf);} /* ---- 建设者备忘（C8）：与学习任务分频道 ---- */ .bn-tag{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.16em;font-weight:500; padding:2px 7px;border:1px solid currentColor;border-radius:5px;opacity:.75; margin-left:10px;vertical-align:2px;white-space:nowrap;} .build-note{filter:saturate(.72);} /* ---- 先试后教回显（C4） ---- */ .tf-echo{background:var(--paper-3);border:1px dashed var(--paper-line);border-radius:12px; padding:14px 18px;margin:0 0 18px;} .tf-echo .te-t{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em; color:var(--ability);text-transform:uppercase;margin-bottom:6px;} .tf-echo .te-body{font-size:14.5px;color:var(--on-paper);white-space:pre-wrap;margin:0 0 8px;line-height:1.7;} .tf-echo .te-hint{font-size:13px;color:var(--on-paper-mut);margin:0;} @keyframes tfshake{0%,100%{transform:none;}25%{transform:translateX(-5px);}75%{transform:translateX(5px);}} .tf-shake{animation:tfshake .3s ease 1;} /* ============================================================ 2.0 新组件（2026-07-04 · docs/14 第六节） ============================================================ */ /* ---- 步进器 .stepper：分步动画讲解（QFT 四步、Toulmin 六件套逐步点亮）---- 结构：.stepper > .stp-stage > .stp-step*N + .stp-nav（prev/next + dots） JS 契约：.stp-step.on 显示当前步；键盘 ←→ 由课内脚本或 gsap 驱动。 */ .stepper{background:var(--ink-soft);border:1px solid var(--ink-line);border-radius:16px; padding:26px;margin:30px 0;} .paper-band .stepper,.paper-band-2 .stepper{background:var(--paper-3);border-color:var(--paper-line);} .stepper .stp-stage{position:relative;min-height:120px;} .stepper .stp-step{display:none;} .stepper .stp-step.on{display:block;animation:stprise .35s ease;} @keyframes stprise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}} .stepper .stp-step .stp-k{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.12em; color:var(--perf);text-transform:uppercase;margin-bottom:8px;} .paper-band .stepper .stp-k,.paper-band-2 .stepper .stp-k{color:var(--perf-on-paper);} .stepper .stp-nav{display:flex;align-items:center;gap:14px;margin-top:22px; padding-top:18px;border-top:1px dashed var(--ink-line);} .paper-band .stepper .stp-nav,.paper-band-2 .stepper .stp-nav{border-top-color:var(--paper-line);} .stepper .stp-btn{font:inherit;font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600; padding:10px 18px;min-height:44px;border-radius:9px;cursor:pointer; border:1px solid var(--ink-line);background:transparent;color:var(--on-ink);} .paper-band .stepper .stp-btn,.paper-band-2 .stepper .stp-btn{border-color:var(--paper-line);color:var(--on-paper);} .stepper .stp-btn:hover{border-color:var(--perf);} .stepper .stp-btn.primary{background:var(--perf);border-color:var(--perf);color:var(--ink);} .stepper .stp-btn.primary:hover{background:var(--perf-soft);} .stepper .stp-btn:disabled{opacity:.4;cursor:default;} .stepper .stp-dots{display:flex;gap:8px;margin-left:auto;} .stepper .stp-dot{width:10px;height:10px;border-radius:50%;background:var(--ink-line); border:none;padding:0;cursor:pointer;} .paper-band .stepper .stp-dot,.paper-band-2 .stepper .stp-dot{background:var(--paper-line);} .stepper .stp-dot.on{background:var(--perf);} .stepper .stp-count{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--on-ink-mut);} .paper-band .stepper .stp-count,.paper-band-2 .stepper .stp-count{color:var(--on-paper-mut);} /* ---- 参数演示 .param-demo：滑块驱动 SVG 概念模型 ---- 结构：.param-demo > .pd-canvas(svg) + .pd-controls(.pd-ctl*N) + .pd-readout */ .param-demo{background:var(--ink-soft);border:1px solid var(--ink-line);border-radius:16px; padding:26px;margin:30px 0;} .paper-band .param-demo,.paper-band-2 .param-demo{background:var(--paper-3);border-color:var(--paper-line);} .param-demo .pd-canvas{width:100%;margin-bottom:18px;} .param-demo .pd-canvas svg{display:block;width:100%;height:auto;} .param-demo .pd-ctl{display:grid;grid-template-columns:minmax(90px,auto) 1fr minmax(48px,auto); gap:14px;align-items:center;margin:10px 0;} .param-demo .pd-ctl label{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--on-ink-mut);} .paper-band .param-demo .pd-ctl label,.paper-band-2 .param-demo .pd-ctl label{color:var(--on-paper-mut);} .param-demo .pd-ctl output{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600; color:var(--perf);text-align:right;} .paper-band .param-demo .pd-ctl output,.paper-band-2 .param-demo .pd-ctl output{color:var(--perf-on-paper);} .param-demo input[type=range]{width:100%;accent-color:var(--perf);min-height:28px;cursor:pointer;} .param-demo .pd-readout{margin-top:14px;padding:13px 16px;border-radius:10px;font-size:14.5px; background:rgba(var(--ability-bright-rgb),.08);border:1px solid rgba(var(--ability-bright-rgb),.3); color:var(--on-ink);line-height:1.65;} .paper-band .param-demo .pd-readout,.paper-band-2 .param-demo .pd-readout{ background:rgba(var(--ability-rgb),.08);border-color:rgba(var(--ability-rgb),.3);color:var(--on-paper);} /* ---- 手写图表 .svg-chart：零依赖 SVG 曲线/柱状对比 ---- 结构：figure.svg-chart > svg + figcaption（文字结论，读屏与打印可用） SVG 内着色用 var(--perf)/var(--ability-bright)/var(--warn) 等，随主题。 */ .svg-chart{margin:30px 0;padding:0;} .svg-chart svg{display:block;width:100%;height:auto;} .svg-chart .grid-line{stroke:var(--ink-line);stroke-width:1;opacity:.6;} .paper-band .svg-chart .grid-line,.paper-band-2 .svg-chart .grid-line{stroke:var(--paper-line);opacity:1;} .svg-chart .axis-label{font-family:"IBM Plex Mono",monospace;font-size:11px;fill:var(--on-ink-mut);} .paper-band .svg-chart .axis-label,.paper-band-2 .svg-chart .axis-label{fill:var(--on-paper-mut);} .svg-chart figcaption{font-size:13.5px;color:var(--on-ink-mut);margin-top:12px;line-height:1.6; padding-left:14px;border-left:2px solid var(--ink-line);} .paper-band .svg-chart figcaption,.paper-band-2 .svg-chart figcaption{ color:var(--on-paper-mut);border-left-color:var(--paper-line);} /* ---- 案例练兵场 .case-arena：多学科案例 tab + 先判断后揭示 ---- 结构：.case-arena > .ca-tabs(button.ca-tab*N) + .ca-case*N(.on 显示) .ca-case 内：.ca-brief(案例) + .ca-ask(先做) + .ca-reveal(后看，.show 展开) */ .case-arena{border:1px solid var(--ink-line);border-radius:16px;overflow:hidden;margin:30px 0;} .paper-band .case-arena,.paper-band-2 .case-arena{border-color:var(--paper-line);} .case-arena .ca-tabs{display:flex;flex-wrap:wrap;gap:0;background:rgba(var(--ink-rgb),.35); border-bottom:1px solid var(--ink-line);} .paper-band .case-arena .ca-tabs,.paper-band-2 .case-arena .ca-tabs{ background:var(--paper);border-bottom-color:var(--paper-line);} .case-arena .ca-tab{font:inherit;font-size:14px;font-weight:600;padding:13px 20px;min-height:48px; border:none;background:transparent;color:var(--on-ink-mut);cursor:pointer; border-bottom:3px solid transparent;} .paper-band .case-arena .ca-tab,.paper-band-2 .case-arena .ca-tab{color:var(--on-paper-mut);} .case-arena .ca-tab:hover{color:var(--on-ink);} .paper-band .case-arena .ca-tab:hover,.paper-band-2 .case-arena .ca-tab:hover{color:var(--on-paper);} .case-arena .ca-tab.on{color:var(--perf);border-bottom-color:var(--perf);} .paper-band .case-arena .ca-tab.on,.paper-band-2 .case-arena .ca-tab.on{ color:var(--perf-on-paper);border-bottom-color:var(--perf-on-paper);} .case-arena .ca-tab .ca-subj{font-family:"IBM Plex Mono",monospace;font-size:10.5px; letter-spacing:.1em;display:block;text-transform:uppercase;opacity:.8;} .case-arena .ca-case{display:none;padding:26px;background:var(--ink-soft);} .paper-band .case-arena .ca-case,.paper-band-2 .case-arena .ca-case{background:var(--paper-3);} .case-arena .ca-case.on{display:block;animation:stprise .3s ease;} .case-arena .ca-brief{font-size:15.5px;line-height:1.75;margin-bottom:18px;} .case-arena .ca-ask{border:1px dashed var(--ink-line);border-radius:12px;padding:18px 20px;margin:0 0 16px;} .paper-band .case-arena .ca-ask,.paper-band-2 .case-arena .ca-ask{border-color:var(--paper-line); background:rgba(var(--ink-rgb),.02);} .case-arena .ca-ask .ca-q{font-weight:600;font-size:15.5px;margin:0 0 12px;} .case-arena .ca-reveal{display:none;border-left:3px solid var(--ability-bright); padding:4px 0 4px 20px;margin-top:16px;} .paper-band .case-arena .ca-reveal,.paper-band-2 .case-arena .ca-reveal{border-left-color:var(--ability);} .case-arena .ca-reveal.show{display:block;animation:stprise .35s ease;} .case-arena .ca-reveal .cr-t{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em; color:var(--ability-bright);text-transform:uppercase;margin-bottom:8px;} .paper-band .case-arena .ca-reveal .cr-t,.paper-band-2 .case-arena .ca-reveal .cr-t{color:var(--ability);} /* ---- 翻牌卡 .flipcard：概念对照 / 术语自测 ---- 结构：button.flipcard > .fc-inner > .fc-front + .fc-back；.flipped 翻面。 reduced-motion 下退化为无动画切换。 */ .flipcard{perspective:900px;background:none;border:none;padding:0;font:inherit; cursor:pointer;text-align:left;width:100%;min-height:44px;} .flipcard .fc-inner{position:relative;width:100%;transition:transform .5s; transform-style:preserve-3d;} .flipcard.flipped .fc-inner{transform:rotateY(180deg);} .flipcard .fc-front,.flipcard .fc-back{backface-visibility:hidden;border-radius:14px; padding:22px 24px;border:1px solid var(--ink-line);background:var(--ink-soft);min-height:110px;} .paper-band .flipcard .fc-front,.paper-band-2 .flipcard .fc-front, .paper-band .flipcard .fc-back,.paper-band-2 .flipcard .fc-back{ border-color:var(--paper-line);background:var(--paper-3);} .flipcard .fc-back{position:absolute;inset:0;transform:rotateY(180deg); border-color:rgba(var(--ability-bright-rgb),.4);} .flipcard .fc-hint{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em; color:var(--on-ink-mut);text-transform:uppercase;display:block;margin-bottom:8px;} .paper-band .flipcard .fc-hint,.paper-band-2 .flipcard .fc-hint{color:var(--on-paper-mut);} /* ---- 时间轴 .timeline：叙事课的事件/实验序列 ---- 结构：.timeline > .tl-item*N（.tl-node 节点圆点 + .tl-body） */ .timeline{position:relative;margin:30px 0;padding-left:26px;} .timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px; background:var(--ink-line);} .paper-band .timeline::before,.paper-band-2 .timeline::before{background:var(--paper-line);} .timeline .tl-item{position:relative;margin-bottom:26px;} .timeline .tl-item::before{content:"";position:absolute;left:-26px;top:7px;width:14px;height:14px; border-radius:50%;background:var(--ink);border:3px solid var(--perf);} .paper-band .timeline .tl-item::before,.paper-band-2 .timeline .tl-item::before{ background:var(--paper-3);border-color:var(--perf-on-paper);} .timeline .tl-k{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.1em; color:var(--perf);text-transform:uppercase;margin-bottom:4px;} .paper-band .timeline .tl-k,.paper-band-2 .timeline .tl-k{color:var(--perf-on-paper);} .timeline .tl-body{font-size:15px;line-height:1.7;} /* ---- 主题切换色点 .theme-dots（theme-switch.js 注入）---- */ .theme-dots{display:flex;align-items:center;gap:6px;} .theme-dots .td{width:22px;height:22px;min-width:22px;border-radius:50%;cursor:pointer; border:2px solid transparent;padding:0;position:relative;} .theme-dots .td::after{content:"";position:absolute;inset:-8px;} /* 扩大触达区到 ≥38px，随 backbar 高度补足 */ .theme-dots .td.td-jade{background:#2E7D5B;} .theme-dots .td.td-azure{background:#2C6FBF;} .theme-dots .td.td-blossom{background:#E27A9A;} .theme-dots .td.on{border-color:var(--on-ink-strong);box-shadow:0 0 0 2px rgba(var(--perf-rgb),.5);} .theme-dots .td:focus-visible{outline:2px solid var(--perf);outline-offset:2px;} /* ---- 轨道分带 .track-band（2.0 课程重组）：学生轨 / 设计者轨的画廊分隔头 ---- */ .track-band{background:var(--ink);padding:64px 24px 6px;border-top:1px solid var(--ink-line);} .track-band .tb-k{font-size:12px;letter-spacing:.22em;text-transform:uppercase; color:var(--ability-bright);margin:0 0 10px;} .track-band.designer .tb-k{color:var(--perf);} .track-band .tb-t{font-size:clamp(20px,2.6vw,28px);font-weight:600;color:var(--on-ink-mut); margin:0;max-width:30ch;line-height:1.4;} /* ---- 工具舱 .toolbay（2.0）：常驻工具窄带 ---- */ .toolbay{border-top:1px dashed var(--ink-line);} .toolbay .lesson.tool{border-color:rgba(var(--ability-bright-rgb),.4);} /* ---- AI 插画容器 .figure-ai：解释性插画统一外壳（防 CLS，强制说明） ---- */ .figure-ai{margin:30px 0;padding:0;} .figure-ai img{display:block;width:100%;height:auto;border-radius:14px; border:1px solid var(--ink-line);} .paper-band .figure-ai img,.paper-band-2 .figure-ai img{border-color:var(--paper-line);} .figure-ai figcaption{font-size:13.5px;color:var(--on-ink-mut);margin-top:10px;line-height:1.6;} .paper-band .figure-ai figcaption,.paper-band-2 .figure-ai figcaption{color:var(--on-paper-mut);} /* ===================== 打印 ===================== */ @media print{ #progress,.backtop,.theme-dots,.lesson-bottom-nav,.backbar{display:none !important;} .reveal{opacity:1 !important;transform:none !important;} .stepper .stp-step{display:block !important;page-break-inside:avoid; border-bottom:1px dashed #999;padding-bottom:12px;margin-bottom:12px;} .stepper .stp-nav{display:none !important;} .case-arena .ca-case{display:block !important;border-top:1px dashed #999;} .case-arena .ca-reveal{display:block !important;} .flipcard .fc-back{position:static;transform:none;} .recap.veiled .spine,.recap.veiled .anchors,.recap.veiled .recap-turn{display:block !important;} .recap-veil{display:none !important;} } /* ===================== 动效克制 ===================== */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .reveal{opacity:1!important;transform:none!important;transition:none!important;} #progress{display:none;} .quiz-final.show,.tf-shake,.stepper .stp-step.on,.case-arena .ca-case.on, .case-arena .ca-reveal.show{animation:none!important;} .backtop,.lesson-bottom-nav a,.flipcard .fc-inner{transition:none!important;} }