/* ============================================================
   cases/_shared/app.css
   个人站点案例库 · 统一设计系统（V1 基础版）
   设计语言与课程枢纽页一致：暖色「纸感」——陶土红 #B04A2C / 赭黄 #8F5E0F（参考 SueKit）
   零外部依赖：不引任何 CDN、字体、图片资源
   ============================================================ */

:root{
  /* 暖色「纸感」调色板（参考 SueKit）：奶油底 + 陶土红 + 暖黑。
     正文/链接均按 WCAG 实测 ≥4.5:1；彩色底一律配 --soft-on-brand 文字。 */
  --brand:#B04A2C;        /* 陶土红 · 主色（#FFFDF8 上文字 5.4:1，其上的白字 5.5:1） */
  --brand-2:#C4684A;      /* 主色亮档 · hover */
  --brand-deep:#8C3A22;   /* 主色深档 */
  --brand-soft:#F3E0D5;   /* 主色浅底 */
  --accent:#8F5E0F;       /* 赭黄 · 次强调（warning/思考） */
  --accent-soft:#F8ECDA;
  --ink:#2B2520;          /* 暖黑 · 正文 */
  --ink-2:#5B5349;        /* 次级文字 */
  --muted:#736A5B;        /* 弱化文字（#FFFDF8 上 5.2:1） */
  --surface:#F5EFE2;      /* 次级面板（奶油） */
  --surface-2:#EFE6D5;
  --line:#E7DDCA;         /* 1px 发丝线 */
  --line-2:#D8CBB2;
  --white:#FFFDF8;        /* 卡片底（暖白） */
  --ok:#4F6B3A;           /* 成功 · 橄榄绿 */
  --ok-soft:#EAF0E0;
  --warn:#8A5A08;
  --warn-soft:#FBF0DA;
  --violet:#7C4A63;       /* 练习 · 紫褐 */
  --violet-soft:#F3E6EC;
  --teal:#3F6E6A;         /* 技术 · 青灰 */
  --teal-soft:#E4EEEB;

  /* 形状：静态用 1px 发丝线 + 留白做分组；投影只留给「交互态」——
     卡片悬停 / 浮层 / 玻璃胶囊，用来表达层级与「被拿起来」的感觉。 */
  --radius:16px;
  --radius-sm:12px;
  --shadow-sm:none;
  --shadow-md:none;
  --shadow-lg:none;
  --elev-1:0 1px 2px rgba(43,37,32,.05),0 12px 30px -12px rgba(43,37,32,.20); /* 悬浮层：玻璃胶囊 */
  --elev-2:0 2px 5px rgba(43,37,32,.06),0 20px 44px -16px rgba(43,37,32,.28); /* 卡片被拿起 */

  /* 玻璃拟态（顶栏胶囊 / 翻页导航条 / 浮层）：
     半透明底 + backdrop-filter 模糊，页面内容从其下方滑过时被虚化。 */
  --glass:rgba(255,253,248,.72);
  --glass-border:rgba(255,255,255,.62);

  /* 导航几何：唯一来源，body 让位高度、滚动遮罩高度、锚点偏移都由它算出来 */
  --nav-top:14px;
  --nav-h:54px;
  --nav-gap:8px;
  --subnav-h:42px;

  /* 动效曲线：出场「先快后缓、略微过冲」，安静但有生气 */
  --spring:cubic-bezier(.16,1,.3,1);

  /* 间距尺度：唯一来源，避免随手写像素值 */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;
  --sp-6:24px;--sp-8:32px;--sp-12:48px;--sp-16:64px;

  /* 两级节奏：组内紧、组间松 —— 页面「分组感」的核心 */
  --gap-in:14px;
  --gap-out:clamp(48px,5.5vw,76px);

  /* 页面底色与顶栏底色：暗色主题下整体翻转，故单独成 token */
  --bg:#ECE3D1;           /* 页底 · 米沙 */
  --topbar-bg:rgba(245,239,226,.92);
  --soft-on-brand:#FFFDF8;/* 彩色底上的文字 */

  --maxw:1160px;
}

/* ============================================================
   暗色主题（由 _shared/app.js 在 <html data-theme="dark"> 上启用）
   只覆盖 token、不改任何组件规则 —— 组件全部由 token 驱动，
   所以两套主题共用同一份布局代码，不存在「漏改一处就白块」。
   配色按 WCAG 相对亮度公式实测：正文 15.81:1、次要文字 7.27:1、
   品牌色 7.42:1、各类徽标「字 on 软底」组合均 ≥6.2:1，全部 ≥4.5:1。
   ============================================================ */
[data-theme="dark"]{
  color-scheme:dark;          /* 滚动条与表单原生控件一并转深色 */

  --bg:#1C1713;               /* 页底 · 暖近黑 */
  --topbar-bg:rgba(38,32,25,.92);

  --brand:#D98A6E;            /* 暗底上提亮，否则陶土红发闷 */
  --brand-2:#C4684A;
  --brand-deep:#EFA98C;       /* 「深色强调」在暗色下反向变亮 */
  --brand-soft:#3A2A22;
  --accent:#D9A65C;
  --accent-soft:#33291A;
  --ok:#9DBE7E;
  --ok-soft:#232B1C;
  --warn:#D9B36A;
  --warn-soft:#33290F;
  --violet:#C39BB8;
  --violet-soft:#2E2230;
  --teal:#7FB8B0;
  --teal-soft:#1E2A28;

  --ink:#F0E9DD;
  --ink-2:#CFC5B4;
  --muted:#A79B87;
  --surface:#2A231B;
  --surface-2:#312A20;
  --line:#3A3228;
  --line-2:#4A4033;
  --white:#262019;            /* 原来的「暖白面板」在暗色下即深色面板 */
  --soft-on-brand:#1C1713;    /* 暗色下品牌色变亮，其上的文字改用深字才够对比 */

  --elev-1:0 1px 2px rgba(0,0,0,.34),0 12px 30px -12px rgba(0,0,0,.52);
  --elev-2:0 2px 5px rgba(0,0,0,.38),0 20px 44px -16px rgba(0,0,0,.62);
  --glass:rgba(38,32,25,.70);
  --glass-border:rgba(255,255,255,.07);
}

/* 兜底防白闪：app.js 是 defer，在它执行完之前页面可能已经画了一帧。
   系统偏好暗色时先铺一层深色底 + 浅色字，避免一闪而过的白屏；
   一旦 JS 写入 data-theme，这两条就不再命中。 */
@media (prefers-color-scheme: dark){
  html:not([data-theme]) body{background:#1C1713;color:#F0E9DD;}
  html:not([data-theme]) .topbar-pill,
  html:not([data-theme]) .topbar.is-split .topbar-tools,
  html:not([data-theme]) .sec-nav{background:rgba(38,32,25,.70);border-color:rgba(255,255,255,.07);}
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* 顶栏改为 position:fixed（脱离文档流），这里统一让出一条高度。
     高度全部由 --nav-* 三个 token 推算，改一处全站跟着走。 */
  padding-top:calc(var(--nav-top) + var(--nav-h) + 16px);
}
a{color:var(--brand);text-decoration:none;}
img{max-width:100%;display:block;}
.mono{font-family:"SF Mono",Menlo,Consolas,"Courier New",monospace;}
/* 锚点跳转时给固定顶栏留出偏移，标题不会被压在导航底下 */
[id]{scroll-margin-top:calc(var(--nav-top) + var(--nav-h) + 20px);}

/* ============================================================
   顶栏：固定悬浮「玻璃胶囊」（形态参考观象斋）
   —— 定位由 .topbar 承担：fixed + 水平居中、脱离文档流，故 body 已让出一条高度。
   —— 外观由两枚子块各自承担：.topbar-pill（品牌 + 栏目）、.topbar-tools（主题 + 在线人数）。
      两者并列但互不嵌套，中间留 --nav-gap 的缝。
   —— 半透明底 + backdrop-filter：页面内容从胶囊下方滑过时被虚化，
      这就是滚动时那股「模糊透明」的观感。
   ============================================================ */
.topbar{
  position:fixed;
  top:var(--nav-top);
  left:50%;
  transform:translateX(-50%);
  z-index:100;
  display:flex;align-items:center;gap:var(--nav-gap);
  width:max-content;max-width:calc(100vw - 32px);
  margin:0;padding:0;
  background:none;border:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
/* 滚动反馈：开始滚动后胶囊投影加深一档（不遮挡、不加层，玻璃照常透出内容）。
   曾试过「顶部渐隐遮罩」方案：它颜色与页底相同、又挡在胶囊底下，
   会把 backdrop-filter 要虚化的内容先盖掉，得不偿失，故弃用。 */
html.is-scrolled .topbar-pill,
html.is-scrolled .topbar.is-split .topbar-tools{box-shadow:var(--elev-2);}

/* app.js 把顶栏拆成两枚独立悬浮块：主题切换与在线人数不再塞进导航胶囊里 */
.topbar.is-split{
  background:none;backdrop-filter:none;border:0;border-radius:0;
  box-shadow:none;padding:0;
}

/* 两枚玻璃块共用的外观 */
.topbar-pill,
.topbar.is-split .topbar-tools{
  display:flex;align-items:center;
  height:var(--nav-h);
  background:var(--glass);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);
  backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid var(--glass-border);
  border-radius:999px;
  box-shadow:var(--elev-1);
  transition:background .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.topbar-pill{flex:0 1 auto;min-width:0;gap:6px;padding:0 9px;}

.brand{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 12px 0 7px;
  border-radius:999px;font-weight:700;font-size:16px;letter-spacing:-.01em;}
.brand .dot{width:9px;height:9px;flex:0 0 9px;border-radius:3px;background:var(--brand);
  transition:background .2s ease;}
.brand-sub{font-size:12px;color:var(--muted);font-weight:400;border-left:1px solid var(--line);padding-left:12px;}
/* 「码上问学」品牌即首页入口（原「← 码上问学首页」按钮已移除） */
a.brand{color:var(--ink);text-decoration:none;transition:color .18s ease,background .18s ease;}
a.brand:hover{color:var(--brand);background:var(--brand-soft);}
a.brand:hover .dot{background:var(--brand-2);}
a.brand:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}

/* 栏目：药丸式导航。静态一律中性色，悬停 / 选中才透出品牌色 —— 首页因此保持干净 */
.nav{display:flex;align-items:center;gap:4px;}
.nav a{
  display:inline-flex;align-items:center;height:34px;padding:0 14px;
  border:0;border-radius:999px;
  font-size:14px;color:var(--ink-2);white-space:nowrap;
  transition:background .28s var(--spring),color .18s ease,transform .28s var(--spring);
}
.nav a:hover{background:var(--brand-soft);color:var(--brand);transform:scale(1.05);}
.nav a.on{background:var(--brand-soft);color:var(--brand);font-weight:600;}

/* 移动端汉堡：栏目改由胶囊下方的 .sec-nav 承载，这里只留一条兜底规则 */
.nav-toggle{display:none;}

/* ---------- 工具岛：主题切换 + 正在学习人数 ----------
   与「导航胶囊」并列、互不嵌套；岛内是纯图标按钮 + 人数胶囊。
   —— 主题按钮 44×44 满足触摸目标，岛高与导航胶囊严格对齐。 */
.topbar-tools{display:flex;align-items:center;gap:2px;flex:0 0 auto;padding:0 4px;}

.theme-btn{
  width:44px;height:44px;flex:0 0 44px;padding:0;display:inline-flex;
  align-items:center;justify-content:center;cursor:pointer;
  border:0;background:transparent;color:var(--ink-2);
  border-radius:999px;transition:background .15s ease,color .15s ease;
}
.theme-btn:hover{background:var(--brand-soft);color:var(--brand);}
.theme-btn svg{width:19px;height:19px;display:block;}
/* 亮色下显示月亮（点了变暗），暗色下显示太阳（点了变亮） */
.theme-btn .ic-sun{display:none;}
[data-theme="dark"] .theme-btn .ic-moon{display:none;}
[data-theme="dark"] .theme-btn .ic-sun{display:block;}

.live-badge{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 14px;
  border:0;background:var(--surface);border-radius:999px;
  font-size:12.5px;color:var(--muted);white-space:nowrap;
  min-width:104px;   /* 人数在个位/两位间变化时宽度不跳，顶栏不会跟着抖 */
}
.live-badge .dot{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--line-2);position:relative;}
.live-badge b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;}
/* 确实有人在学：绿点 + 一圈呼吸光晕，一眼看出是「活的」 */
.live-badge.on .dot{background:var(--ok);}
.live-badge.on .dot::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:1px solid var(--ok);animation:live-pulse 2s ease-out infinite;
}
@keyframes live-pulse{
  0%{transform:scale(.7);opacity:.6;}
  70%{transform:scale(1.7);opacity:0;}
  100%{opacity:0;}
}
.live-badge.hide{display:none;}
/* 从隐藏变为可见时轻轻淡入，避免「啪」地跳出（只在状态切换那一刻执行一次） */
.live-badge.on,.live-badge.idle{animation:live-in .22s ease;}
@keyframes live-in{from{opacity:0;transform:translateX(4px);}to{opacity:1;transform:none;}}

@media (max-width:640px){
  .topbar-tools{gap:1px;}
  .topbar.is-split .topbar-tools{padding:0 2px;}
  .live-badge{padding:0 11px;font-size:12px;min-width:57px;}
  .live-badge .lb-long{display:none;}     /* 窄屏只留数字，给品牌腾地方 */
}
@media (prefers-reduced-motion:reduce){
  .live-badge.on .dot::after{animation:none;}
  .live-badge.on,.live-badge.idle{animation:none;}
}

/* ---------- 窄屏「栏目条」：胶囊下方一条可横滑的玻璃 chip 条 ----------
   参考观象斋的移动端子导航：7 个栏目一眼可见、左右可滑，
   比汉堡菜单少一次点击，也不必把胶囊撑成两层高。宽屏隐藏。 */
.sec-nav{display:none;}

/* ---------- 容器 ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* 兜底：.callout / .note 既可能套在 .section 里、也可能直接挂在 body 下。
   这里只处理「body 直接子元素」的情形，按内容列居中收边（对齐 .section 的内容宽度），
   避免整块贴到屏幕两侧、破坏分组一致性。
   （.case / .chapter-summary 只作章末顶层块，已在各自规则里显式写死左右边距，见下。） */
body > .callout,
body > .note{
  width:calc(100% - 48px);
  max-width:calc(var(--maxw) - 48px);
  margin-left:auto;
  margin-right:auto;
}

/* ---------- Hero ---------- */
.hero{padding:38px 24px 6px;max-width:var(--maxw);margin:0 auto;}
.hero h1{font-size:31px;font-weight:600;margin:0 0 12px;letter-spacing:-.02em;line-height:1.25;}
.hero p{margin:0;color:var(--muted);font-size:15px;line-height:1.85;max-width:820px;}
.hero .lead b{color:var(--brand);}

/* ---------- 区块标题 ---------- */
/* 单个 .section：组间间距（--gap-out）。同一组内的多个 .section 请包进 .sec-group。 */
.section{max-width:var(--maxw);margin:var(--gap-out) auto 0;padding:0 24px;}
.section-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:20px;}
.section-head h2{font-size:21px;font-weight:600;margin:0;display:flex;align-items:center;
  letter-spacing:-.01em;line-height:1.3;}
/* 章节前的品牌色短线：给每个区块一个统一的视觉锚点（不依赖颜色即可识别层级） */
.section-head h2::before{content:"";display:inline-block;flex:0 0 auto;
  width:5px;height:19px;border-radius:3px;background:var(--brand);margin-right:11px;vertical-align:-3px;}
.section-head .hint{font-size:12.5px;color:var(--muted);}
.section-head .sp{flex:1;}

/* ---------- 分组容器：两级间距 ---------- */
/* 用法：把属于同一组的 <section class="section"> 一起包进 <div class="sec-group">，
   组头用 <div class="g-head"><h2>…</h2><span class="g-hint">…</span></div>。
   组内 14px、组间 --gap-out，并自动带一条发丝分组线 —— 页面因此有了「组」的概念。 */
.sec-group{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.sec-group + .sec-group{margin-top:var(--gap-out);}
.sec-group > .g-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin:0 0 26px;padding-top:34px;border-top:1px solid var(--line);}
.sec-group:first-of-type > .g-head{border-top:none;padding-top:0;}
.sec-group > .g-head h2{font-size:22px;font-weight:600;margin:0;letter-spacing:-.015em;line-height:1.3;
  display:flex;align-items:center;}
.sec-group > .g-head h2::before{content:"";display:inline-block;flex:0 0 auto;
  width:5px;height:20px;border-radius:3px;background:var(--brand);margin-right:11px;}
.sec-group > .g-head .g-hint{font-size:12.5px;color:var(--muted);}
.sec-group > .g-head .g-no{font-family:"SF Mono",Menlo,Consolas,monospace;
  font-size:12.5px;color:var(--muted);letter-spacing:.08em;}
/* 组内的 .section 不再自带外边距与内边距（由 .sec-group 统一提供） */
.sec-group > .section{margin:var(--gap-in) auto 0;padding:0;max-width:none;}
.sec-group > .section:first-of-type{margin-top:0;}
/* 组内出现的整幅块（提示条 / 讲法框 / 章节导语 / 路线 TOC）同样收边，避免双重内边距 */
.sec-group > .note,.sec-group > .callout,.sec-group > .toc,
.sec-group > .lead-in,.sec-group > .chapter-summary,.sec-group > .case{
  max-width:none;margin:var(--gap-in) 0 0;padding-left:0;padding-right:0;
}
.sec-group > .callout{padding-left:16px;padding-right:16px;}

/* ---------- 徽标 / 标签 ---------- */
/* 语义固定：课程=品牌蓝、建设中=棕橙、已上线/可运行=绿；同色不再多义 */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  border-radius:6px;padding:2px 9px;background:var(--brand);color:var(--soft-on-brand);}
.badge.soon{background:var(--white);color:var(--muted);border:1px solid var(--line);}
.badge.build{background:var(--warn-soft);color:var(--warn);}
.badge.ok{background:var(--ok-soft);color:var(--ok);}
.tag{display:inline-block;font-size:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:6px;padding:2px 9px;color:var(--muted);}

/* ---------- 卡片网格 ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;}
/* 交互态（悬停 / 键盘聚焦）：整张卡轻轻抬起 + 投一层影 —— 手感上「被拿起来了」。
   静态仍是发丝线 + 白底，页面不显脏。 */
.card{
  display:block;text-decoration:none;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:var(--white);
  transition:border-color .2s ease,background .2s ease,transform .3s var(--spring),box-shadow .3s var(--spring);
}
a.card:hover,a.card:focus-visible{border-color:var(--brand);transform:translateY(-3px);box-shadow:var(--elev-2);}
.card .icon{
  width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
  background:transparent;border:1px solid var(--line);color:var(--muted);margin-bottom:16px;
}
.card .icon svg{width:17px;height:17px;}
.card h3{font-size:16.5px;font-weight:600;margin:0 0 8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.card p{margin:0;font-size:14px;color:var(--muted);line-height:1.75;}
.card .meta{margin-top:16px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;}

/* 工作台枢纽的模块卡（带左侧 2px 色条作为课程身份；图标统一单色） */
.module{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--white);
  padding:22px;
  transition:border-color .2s ease,background .2s ease,transform .3s var(--spring),box-shadow .3s var(--spring);
  display:flex;flex-direction:column;
}
a.module{text-decoration:none;color:var(--ink);}
a.module:hover,a.module:focus-visible{border-color:var(--brand);transform:translateY(-3px);box-shadow:var(--elev-2);}
.module::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--mc,var(--brand));}
.module .m-icon{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:transparent;border:1px solid var(--line);color:var(--muted);margin-bottom:16px;}
.module .m-icon svg{width:16px;height:16px;}
.module h3{font-size:16px;font-weight:600;margin:0 0 8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.module p{margin:0;font-size:14px;color:var(--muted);line-height:1.75;flex:1;}
.module .meta{margin-top:16px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13.5px;
  padding:9px 16px;border-radius:10px;cursor:pointer;border:1px solid var(--line);
  background:var(--white);color:var(--ink);transition:.15s ease;}
.btn:hover{border-color:var(--brand);color:var(--brand);}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--soft-on-brand);font-weight:600;}
.btn.primary:hover{background:var(--brand-deep);color:var(--soft-on-brand);}
.btn svg{width:16px;height:16px;}

/* ---------- 时间线 ---------- */
.timeline{list-style:none;margin:0;padding:0 0 0 22px;border-left:2px solid var(--line);}
.timeline li{position:relative;padding:0 0 18px 18px;}
.timeline li::before{content:"";position:absolute;left:-27px;top:4px;width:10px;height:10px;
  border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px var(--brand-soft);}
.timeline .t-date{font-size:12px;color:var(--muted);}
.timeline .t-title{font-size:14.5px;font-weight:600;}

/* ---------- 串联关系图卡片 ---------- */
.diagram{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:22px;overflow-x:auto;
}
.diagram svg{display:block;margin:0 auto;max-width:100%;height:auto;}

/* ---------- 提示条 ---------- */
.note{
  display:flex;gap:10px;align-items:flex-start;
  border:1px solid var(--brand-soft);background:var(--brand-soft);
  border-radius:var(--radius-sm);padding:14px 16px;font-size:13.5px;line-height:1.75;color:var(--ink);
  margin:16px 0;
}
.note .n-ico{color:var(--brand);flex:0 0 auto;margin-top:1px;}
.note b{color:var(--brand);}

/* ---------- 页脚 ---------- */
.foot{max-width:var(--maxw);margin:56px auto 0;padding:26px 24px 60px;color:var(--muted);font-size:13px;
  border-top:1px solid var(--line);line-height:1.9;}
.foot a{color:var(--brand);text-decoration:none;border-bottom:1px solid rgba(176,74,44,.35);}
.foot a:hover{border-bottom-color:var(--brand);}
/* 页脚联系方式：全站统一一行，用发丝线单独成组（单色细线图标，不抢视觉） */
.foot-contact{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line);}
.foot-contact svg{width:15px;height:15px;flex:none;opacity:.75;}

/* ============================================================
   教学组件（全站通用：代码块 / 讲法 callout / 案例 / 章节导航）
   零外部依赖，延续暖色「纸感」调色板——陶土红 #B04A2C / 赭黄 #8F5E0F
   ============================================================ */

/* 章节导语 */
.lead-in{max-width:var(--maxw);margin:18px auto 0;padding:0 24px;}
.lead-in p{color:var(--muted);font-size:15px;line-height:1.85;max-width:820px;}

/* 章节路线 TOC */
.toc{display:flex;flex-wrap:wrap;gap:8px;max-width:var(--maxw);margin:18px auto 0;padding:0 24px;}
.toc a{font-size:13px;color:var(--muted);background:var(--surface);border:1px solid var(--line);
  border-radius:6px;padding:5px 12px;transition:.15s ease;}
.toc a:hover{color:var(--brand);border-color:var(--brand);background:var(--brand-soft);}

/* 讲法节奏 callout：为什么 / 动手做 / 讲透 */
.callout{display:flex;gap:12px;align-items:flex-start;border-radius:var(--radius-sm);
  padding:15px 17px;margin:16px 0;font-size:14px;line-height:1.8;border:1px solid var(--line);background:var(--white);}
.callout .c-ico{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;margin-top:1px;}
.callout .c-ico svg{width:16px;height:16px;}
.callout .c-body{flex:1;}
.callout .c-body b{display:block;margin-bottom:4px;font-size:14px;}
.callout.why{border-color:var(--brand-soft);background:var(--brand-soft);}
.callout.why .c-ico{background:var(--brand);color:var(--soft-on-brand);}
.callout.why .c-body b{color:var(--brand);}
.callout.do{border-color:var(--ok-soft);background:var(--ok-soft);}
.callout.do .c-ico{background:var(--ok);color:var(--soft-on-brand);}
.callout.do .c-body b{color:var(--ok);}
.callout.think{border-color:var(--accent-soft);background:var(--accent-soft);}
.callout.think .c-ico{background:var(--accent);color:var(--soft-on-brand);}
.callout.think .c-body b{color:var(--accent);}

/* 新增环节：小结 / 练习 / 避坑 */
.callout.summary{border-color:var(--brand-soft);background:var(--brand-soft);}
.callout.summary .c-ico{background:var(--brand-deep);color:var(--soft-on-brand);}
.callout.summary .c-body b{color:var(--brand-deep);}
.callout.practice{border-color:var(--violet-soft);background:var(--violet-soft);}
.callout.practice .c-ico{background:var(--violet);color:var(--soft-on-brand);}
.callout.practice .c-body b{color:var(--violet);}
.callout.warn{border-color:var(--accent-soft);background:var(--accent-soft);}
.callout.warn .c-ico{background:var(--accent);color:var(--soft-on-brand);}
.callout.warn .c-body b{color:var(--accent);}

/* 小结：章末清单卡片 */
.chapter-summary{border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--radius-sm);
  background:var(--brand-soft);padding:20px 22px;
  width:calc(100% - 48px);max-width:calc(var(--maxw) - 48px);margin:26px auto;}
.chapter-summary h3{margin:0 0 10px;font-size:15.5px;font-weight:600;color:var(--brand);}
.chapter-summary ul{margin:0;padding-left:20px;font-size:14px;line-height:1.9;color:var(--ink);}
.chapter-summary ul li b{color:var(--brand);}

/* 练习：题目要求 */
.practice-q{margin:0 0 10px;font-size:14px;line-height:1.85;}
.practice-q .p-no{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;
  background:var(--brand-soft);color:var(--brand);font-weight:600;font-size:12px;margin-right:8px;}
.practice-hint{font-size:12.5px;color:var(--muted);margin:8px 0 0;line-height:1.75;}

/* 代码块（暖色深底，与奶油页面同调） */
.code{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;margin:16px 0;
  background:#241E18;}
.code .code-head{display:flex;align-items:center;gap:8px;padding:8px 12px;
  background:#2A231B;border-bottom:1px solid #3A3228;color:#A79B87;font-size:12px;}
.code .code-head .dot{width:9px;height:9px;border-radius:50%;background:#4A4033;}
.code .code-head .lang{margin-left:6px;letter-spacing:.04em;}
.code .code-head .run{margin-left:auto;color:#A8C58A;font-size:12px;border:1px solid #4A4033;
  border-radius:6px;padding:2px 9px;}
.code pre{margin:0;padding:15px 17px;overflow-x:auto;}
.code code{font-family:"SF Mono",Menlo,Consolas,"Courier New",monospace;font-size:13px;
  line-height:1.75;color:#EDE5D8;white-space:pre;display:block;counter-reset:ln;}
.code code .cmt{color:#9C9184;font-style:italic;}
.code code .hl{background:rgba(201,105,76,.26);color:#F0C9A8;border-radius:3px;padding:0 2px;}
.code code .kw{color:#E0A87E;}
.code code .st{color:#A8C58A;}
/* 运行结果 */
.code .out{background:#1E1813;border-top:1px dashed #3A3228;padding:13px 17px;color:#A8C58A;
  font-family:"SF Mono",Menlo,Consolas,monospace;font-size:13px;line-height:1.7;white-space:pre-wrap;}
.code .out b{color:#E0A87E;font-weight:600;}

/* 案例框 */
.case{border:1px solid var(--brand);border-radius:var(--radius);background:var(--white);
  overflow:hidden;
  width:calc(100% - 48px);max-width:calc(var(--maxw) - 48px);margin:26px auto;}
.case .case-head{display:flex;align-items:center;gap:10px;padding:14px 18px;background:var(--brand-soft);
  border-bottom:1px solid var(--line);}
.case .case-head .c-ico{width:30px;height:30px;border-radius:9px;background:var(--brand);color:var(--soft-on-brand);
  display:grid;place-items:center;}
.case .case-head .c-ico svg{width:17px;height:17px;}
.case .case-head h3{margin:0;font-size:15.5px;color:var(--brand);}
.case .case-head .c-tag{margin-left:auto;font-size:12px;color:var(--muted);background:var(--white);
  border:1px solid var(--line);border-radius:6px;padding:2px 10px;}
.case .case-body{padding:8px 18px 18px;}

/* 关键要点列表 */
.points{list-style:none;margin:16px 0;padding:0;}
.points li{position:relative;padding:7px 0 7px 22px;font-size:14px;line-height:1.8;border-bottom:1px dashed var(--line);}
.points li:last-child{border-bottom:none;}
.points li::before{content:"";position:absolute;left:2px;top:13px;width:7px;height:7px;border-radius:2px;
  background:var(--brand);transform:rotate(45deg);}
.points li b{color:var(--brand);}

/* 上下章导航 */
.lesson-nav{display:flex;gap:12px;max-width:var(--maxw);margin:44px auto 0;padding:0 24px;flex-wrap:wrap;}
.lesson-nav a{flex:1;min-width:200px;text-decoration:none;color:var(--ink);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:16px 18px;background:var(--white);
  transition:border-color .2s ease,transform .3s var(--spring),box-shadow .3s var(--spring);}
.lesson-nav a:hover,.lesson-nav a:focus-visible{border-color:var(--brand);transform:translateY(-3px);box-shadow:var(--elev-2);}
.lesson-nav a .lbl{font-size:12.5px;color:var(--muted);}
.lesson-nav a .ttl{font-size:15px;font-weight:600;margin-top:3px;}
.lesson-nav a.next{text-align:right;}
.lesson-nav a.next .ttl{color:var(--brand);}

/* ============================================================
   Python 可运行代码块：编辑区 + 预览区（浏览器内运行，Brython）
   ============================================================ */
.py-edit{display:flex;background:#1E1813;border-top:1px solid #3A3228;}
.py-gutter{flex:0 0 auto;min-width:42px;padding:14px 10px;text-align:right;color:#6B6153;
  background:#1E1813;font:12.5px/1.7 "SF Mono",Menlo,Consolas,"Courier New",monospace;
  user-select:none;overflow:hidden;border-right:1px solid #2A231B;white-space:pre;}
.py-area{flex:1;min-height:140px;resize:vertical;padding:14px 16px;border:0;
  background:#1E1813;color:#E6DDCD;font:13px/1.7 "SF Mono",Menlo,Consolas,"Courier New",monospace;
  outline:none;tab-size:4;white-space:pre;overflow:auto;}
.py-area:focus{background:#221C16;}
.code-acts{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#221C16;border-top:1px solid #3A3228;}
.py-btn{border:1px solid #4A4033;background:#2A231B;color:#E6DDCD;font-size:12.5px;
  padding:6px 13px;border-radius:8px;cursor:pointer;transition:.15s ease;}
.py-btn:hover{border-color:var(--brand);color:#fff;}
.py-btn.primary{background:var(--brand);border-color:var(--brand);color:var(--soft-on-brand);font-weight:600;}
.py-btn.primary:hover{background:var(--brand-2);}
.py-hint{margin-left:auto;color:#9C9184;font-size:12px;max-width:64%;text-align:right;line-height:1.6;}
.py-out{position:relative;background:#1E1813;border-top:1px solid #3A3228;padding:14px 16px;
  color:#A8C58A;font:12.5px/1.65 "SF Mono",Menlo,Consolas,monospace;white-space:pre-wrap;
  min-height:56px;max-height:360px;overflow:auto;}
.py-out::before{content:"预览 / 运行输出";display:block;color:#9C9184;font-size:12px;
  margin-bottom:6px;letter-spacing:.04em;}
.py-out.err{color:#E8A08E;}

/* 演练场（playground）布局 */
.lab.py-lab{max-width:var(--maxw);margin:18px auto;padding:0 24px;}
.py-lab .ex-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 4px;}
.ex-chip{border:1px solid var(--line);background:var(--white);color:var(--ink);font-size:12.5px;
  padding:6px 13px;border-radius:999px;cursor:pointer;transition:.15s ease;}
.ex-chip:hover{border-color:var(--brand);color:var(--brand);}
.ex-chip.on{background:var(--brand);border-color:var(--brand);color:var(--soft-on-brand);font-weight:600;}
.py-lab .lab-note{color:var(--muted);font-size:12.5px;margin:8px 0 0;}

/* 课程章节网格（主页） */
.chapters{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;}

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  /* 顶栏口号在窄屏收起，避免与导航挤在一起 */
  .brand-sub{display:none;}
}

/* ≤940px：7 个栏目 + 品牌 + 工具岛已放不进一行，栏目下沉为 .sec-nav 玻璃条。
   这一档只做「胶囊瘦身 + 让位高度」，不改变任何页面内容。 */
@media (max-width:940px){
  :root{--nav-top:10px;}
  .topbar{left:10px;right:10px;transform:none;width:auto;max-width:none;gap:6px;}
  .topbar-pill{flex:1 1 auto;min-width:0;padding:0 8px;gap:2px;}
  .nav{display:none;}
  body{padding-top:calc(var(--nav-top) + var(--nav-h) + var(--nav-gap) + var(--subnav-h) + 14px);}
  .sec-nav{
    display:flex;position:fixed;z-index:99;
    left:10px;right:10px;
    top:calc(var(--nav-top) + var(--nav-h) + var(--nav-gap));
    height:var(--subnav-h);
    align-items:center;gap:4px;padding:0 6px;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    background:var(--glass);
    -webkit-backdrop-filter:blur(18px) saturate(1.5);
    backdrop-filter:blur(18px) saturate(1.5);
    border:1px solid var(--glass-border);border-radius:999px;
    box-shadow:var(--elev-1);
  }
  .sec-nav::-webkit-scrollbar{display:none;}
  .sec-nav a{
    flex:0 0 auto;display:inline-flex;align-items:center;height:32px;padding:0 13px;
    border-radius:999px;font-size:13.5px;color:var(--ink-2);white-space:nowrap;
    transition:background .25s ease,color .18s ease;
  }
  .sec-nav a.on{background:var(--brand-soft);color:var(--brand);font-weight:600;}
}
@media (max-width:760px){
  .topbar-pill{padding:0 6px;}
  .hero{padding:32px 24px 4px;}
  .hero h1{font-size:25px;}
  .section-head h2{font-size:19px;}
  .sec-group > .g-head h2{font-size:20px;}
  .tbl th,.tbl td{padding:8px 10px;}
}

/* ≤640px：结构化表格自动转「每条记录一张卡」，不再横向滚动。
   表格由 _shared/app.js 补上 .can-stack 与每个单元格的 data-label。 */
@media (max-width:640px){
  .tbl.can-stack{border:none;background:transparent;}
  .tbl.can-stack thead{display:none;}
  .tbl.can-stack tbody tr{display:block;border:1px solid var(--line);border-radius:var(--radius-sm);
    padding:12px 14px;margin-bottom:10px;background:var(--white);}
  .tbl.can-stack tbody tr:nth-child(even){background:var(--white);}
  .tbl.can-stack td{display:flex;gap:12px;border:none;padding:5px 0;}
  .tbl.can-stack td::before{content:attr(data-label);flex:0 0 86px;color:var(--muted);
    font-size:12.5px;line-height:1.75;}
}
@media print{
  .topbar,.sec-nav,.foot,.nav-toggle{display:none!important;}
  body{color:#000;padding-top:0;}          /* 顶栏不打印，让位高度一并撤掉 */
  .card,.module{box-shadow:none;break-inside:avoid;}
}

/* ============================================================
   题库 / 自测 / 组卷 组件（_shared/quiz-widget.js）
   ============================================================ */
/* 题库统一使用品牌蓝一个强调色（不再跟随各页 --mc，避免浅色底白字不达标） */
.chapter-quiz-section{max-width:var(--maxw);margin:0 auto;margin-top:var(--gap-out);padding:0 24px;padding-top:28px;border-top:1px solid var(--line-2);}
.chapter-quiz-section > h2{font-size:21px;font-weight:600;margin:0 0 6px;color:var(--brand);
  display:flex;align-items:center;line-height:1.3;}
.chapter-quiz-section > h2::before{content:"";display:inline-block;flex:0 0 auto;
  width:5px;height:19px;border-radius:3px;background:var(--brand);margin-right:11px;vertical-align:-3px;}
.chapter-quiz-section > p.qz-hint{color:var(--muted);font-size:13px;margin:0 0 18px;}
.chapter-quiz{border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--radius-sm);padding:16px 18px;margin:16px 0;background:var(--white);}
.chapter-quiz > .qz-ch-title{font-weight:600;color:var(--brand);margin:0 0 12px;font-size:15.5px;}

.qz-q{border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 18px;margin:0 0 14px;background:var(--white);}
.qz-qhead{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.qz-num{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:6px;background:var(--brand);color:var(--soft-on-brand);font-size:12px;font-weight:600;}
/* 题型标签：浅底 + 深字（12px 文字实测对比度 4.5:1 以上） */
.qz-type{font-size:12px;font-weight:600;padding:2px 9px;border-radius:6px;border:1px solid transparent;}
.t-single{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-soft);}
.t-multi{background:var(--violet-soft);color:var(--violet);border-color:var(--violet-soft);}
.t-tf{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-soft);}
.t-fill{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-soft);}
.t-short{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-soft);}
.qz-diff{font-size:12px;color:var(--muted);}
.qz-stem{font-size:15px;line-height:1.75;font-weight:600;color:var(--ink);}
.qz-opts{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
.qz-opt{display:flex;align-items:flex-start;gap:10px;padding:10px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;transition:border-color .15s ease,background .15s ease;}
.qz-opt:hover{border-color:var(--brand);background:var(--brand-soft);}
.qz-opt input{margin-top:3px;}
.qz-optkey{font-weight:600;color:var(--brand);}
.qz-optval{line-height:1.7;}
.qz-fill{display:flex;gap:10px;margin-top:12px;align-items:flex-start;}
.qz-input{flex:1;min-height:40px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit;}
.qz-ta{min-height:72px;resize:vertical;}
.qz-reveal{border:1px solid var(--brand);background:var(--white);color:var(--brand);border-radius:8px;padding:0 14px;cursor:pointer;font-weight:600;white-space:nowrap;}
.qz-reveal:hover{background:var(--brand);color:var(--soft-on-brand);}
.qz-ans{margin-top:12px;padding:11px 13px;background:var(--brand-soft);border-radius:8px;font-size:14px;color:var(--ink);line-height:1.75;}
.qz-explain{margin-top:12px;padding:11px 13px;background:var(--surface);border-radius:8px;font-size:13.5px;color:var(--ink-2);line-height:1.75;}
.qz-src{color:var(--muted);font-size:12px;margin-left:6px;}
.qz-q.qz-right{border-color:var(--ok);background:var(--ok-soft);}
.qz-q.qz-wrong{border-color:var(--accent);background:var(--accent-soft);}
.qz-correct-opt{border-color:var(--ok) !important;background:var(--ok-soft) !important;}
.qz-correct-opt .qz-optkey{color:var(--ok);}
.qz-actions{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap;}
.qz-btn{border:none;background:var(--brand);color:var(--soft-on-brand);border-radius:8px;padding:9px 18px;font-size:14px;font-weight:600;cursor:pointer;}
.qz-btn:hover{background:var(--brand-deep);}
.qz-btn.qz-reset,.qz-btn.qz-redo,.qz-btn.qz-showans{background:var(--white);color:var(--brand);border:1px solid var(--brand);}
.qz-btn.qz-reset:hover,.qz-btn.qz-redo:hover,.qz-btn.qz-showans:hover{background:var(--brand-soft);color:var(--brand);}
.qz-score{font-weight:600;color:var(--brand);font-size:14px;}
.qz-empty{color:var(--muted);}
.qz-toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:16px 0;}
.qz-toolbar select{padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:14px;min-width:200px;font-family:inherit;}
.qz-toolbar .qz-btn{padding:9px 16px;}
.qz-area{min-height:40px;}
.qz-paper .qz-q{box-shadow:none;}
.qz-meta{color:var(--muted);font-size:13px;margin:0 0 12px;}

/* ============================================================
   通用内容组件（课程单元页 / 速查页复用）
   —— .ana：生活类比 / 概念比照块；.tbl：易混概念对比表
   ============================================================ */
.ana{
  border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:var(--radius-sm);background:var(--surface);
  padding:16px 20px;margin:18px 0;
}
.ana h4{margin:0 0 6px;font-size:14px;font-weight:600;color:var(--brand-deep);}
.ana p{margin:0;font-size:14px;line-height:1.9;color:var(--ink);}
.ana p + p{margin-top:8px;}
.ana code{background:rgba(176,74,44,.10);border-radius:5px;padding:1px 6px;
  font-family:"SF Mono",Menlo,Consolas,monospace;font-size:12.5px;}

/* 表格：外层 .tbl-wrap 负责窄屏横向滚动；窄屏时结构化表格自动转卡片（见上方 @media） */
.tbl-wrap{overflow-x:auto;margin:18px 0;-webkit-overflow-scrolling:touch;}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;}
.tbl caption{caption-side:top;text-align:left;font-size:13px;font-weight:600;
  color:var(--muted);padding:0 0 8px;line-height:1.7;}
.tbl th,.tbl td{border:1px solid var(--line);padding:10px 13px;text-align:left;vertical-align:top;line-height:1.75;}
.tbl thead th{background:var(--surface-2);font-weight:600;color:var(--ink);white-space:nowrap;}
.tbl tbody tr:nth-child(even){background:var(--surface);}
.tbl td b,.tbl th b{color:var(--brand);}
.tbl .mono,.tbl code{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:12.5px;}
.tbl code{background:var(--surface);border-radius:4px;padding:1px 5px;}
.tbl td.num,.tbl th.num{text-align:right;font-family:"SF Mono",Menlo,Consolas,monospace;
  white-space:nowrap;font-variant-numeric:tabular-nums;}
.tbl tbody tr.row-total{background:var(--surface-2);}
.tbl tbody tr.row-total td{font-weight:600;}

/* 表格内的行分组：给需要分组的 tbody 加 class="grouped"，
   组首行加 class="grp-start"，组内其余行自动弱化分隔线。 */
.tbl tbody.grouped tr.grp-start > td{border-top:1px solid var(--line-2);}
.tbl tbody.grouped tr.grp-start > td:first-child{box-shadow:inset 3px 0 0 var(--brand);}

/* 数据条：把「20% / 35% / 35% / 10%」这类占比改成可扫读的横向条 */
.bars{display:flex;flex-direction:column;gap:7px;margin:14px 0;}
.bar{display:grid;grid-template-columns:104px 1fr 46px;align-items:center;gap:10px;font-size:13px;}
.bar .b-k{color:var(--muted);}
.bar .b-t{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden;}
.bar .b-t i{display:block;height:100%;border-radius:4px;background:var(--brand);}
.bar .b-v{text-align:right;font-family:"SF Mono",Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;color:var(--ink);}
@media (max-width:520px){ .bar{grid-template-columns:76px 1fr 42px;gap:8px;} }

/* ============================================================
   左代码 · 右预览（代码与效果并排对照）
   结构：.code-live > [ .code , .pv ]
   ============================================================ */
.code-live{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;
  margin:18px 0;background:var(--surface);}
.code-live > .code{margin:0;border:0;border-radius:0;min-width:0;}
.code-live > .code pre{max-height:520px;overflow:auto;}
.code-live > .pv{display:flex;flex-direction:column;min-width:0;background:var(--surface);
  border-left:1px solid var(--line);}
.pv-head{display:flex;align-items:center;gap:7px;padding:8px 12px;background:var(--surface-2);
  border-bottom:1px solid var(--line);color:var(--muted);font-size:12px;letter-spacing:.02em;}
.pv-head .pv-tag{margin-left:auto;font-size:11px;color:var(--brand);background:var(--white);
  border:1px solid var(--line);border-radius:6px;padding:1px 8px;}
.pv-body{flex:1;padding:14px 16px;font-size:13.5px;line-height:1.8;color:var(--ink);overflow:auto;}
/* 输出型预览：等宽、保留换行（Python / SQL / 命令行） */
.pv-body.out{font-family:"SF Mono",Menlo,Consolas,"Courier New",monospace;font-size:12.5px;
  line-height:1.7;white-space:pre-wrap;word-break:break-word;background:var(--surface);}
.pv-body.out b{color:var(--brand);font-weight:600;}
/* 渲染型预览：真实 DOM 效果（HTML / CSS / 组件） */
.pv-body.render{background:var(--white);}
.pv-body.render > :first-child{margin-top:0;}
.pv-body.render > :last-child{margin-bottom:0;}
/* 浏览器窗口外壳，让「预览」有页面感 */
.pv-frame{width:100%;min-height:240px;height:100%;border:0;display:block;background:#fff;}
.pv-empty{color:var(--muted);font-size:12.5px;font-style:italic;}
@media (max-width:900px){
  .code-live{grid-template-columns:minmax(0,1fr);}
  .code-live > .pv{border-left:0;border-top:1px solid var(--line);}
  .code-live > .code pre{max-height:none;}
}

/* ============================================================
   可访问性：键盘焦点环 + 动效安全
   ============================================================ */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;border-radius:8px;
}
:focus:not(:focus-visible){outline:none;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  /* 动效关掉时仍保留「层级」信息：只去位移，不去阴影 */
  .card:hover,.module:hover,.lesson-nav a:hover,.qz-opt:hover,.nav a:hover{transform:none;}
}