/**
 * Lesson 01 / 02 / 03 / 05 统一大屏布局 + 统一字体/字号
 * 桌面端（约平板横屏以上）：主舞台为视口内最大内接 16:9 矩形，四边留白最小；背景仅露窄边。
 * 字体：系统无衬线 + 雅黑/苹方/思源黑体，保证课堂可读；英文例句与中文同一栈，仅字号放大。
 * 各课 HTML 于 head 末引入外部样式表 lesson-screen-16x9.css（勿在本注释中写尖括号 link 标签，以免内联进 HTML 后被误匹配）
 */

:root {
  --lesson-font-sans: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --lesson-font-zh: var(--lesson-font-sans);
  --lesson-font-en: var(--lesson-font-sans);
  /* 根字号：随视口略放大，带动全站 rem */
  --lesson-fs-html: clamp(16px, 0.55vw + 14px, 20px);
  --lesson-fs-topbar: clamp(0.88rem, 0.38vw + 0.78rem, 1.02rem);
  --lesson-fs-body: clamp(0.92rem, 0.42vw + 0.82rem, 1.05rem);
  --lesson-fs-small: clamp(0.8rem, 0.28vw + 0.72rem, 0.92rem);
  --lesson-fs-h1: clamp(1.2rem, 0.85vw + 0.95rem, 1.48rem);
  --lesson-fs-h2: clamp(1.05rem, 0.62vw + 0.86rem, 1.22rem);
  --lesson-fs-h3: clamp(0.98rem, 0.48vw + 0.8rem, 1.1rem);
  --lesson-fs-h4: clamp(0.92rem, 0.36vw + 0.76rem, 1.02rem);
  --lesson-fs-btn: clamp(0.9rem, 0.36vw + 0.8rem, 1.02rem);
  /* 英文例句 / 展示行：明显大于正文 */
  --lesson-fs-example: clamp(1.05rem, 0.58vw + 0.9rem, 1.32rem);
  --lesson-fs-en-line: var(--lesson-fs-example);
}

/* 主舞台内子元素默认继承字体，压过各页内联里的 Patrick / ZCOOL（后文对 .en / [lang=en] / 例句容器再单独放大） */
html body .book *:not(code):not(kbd):not(samp):not(pre):not([lang="en"]):not(.en),
html body .shell *:not(code):not(kbd):not(samp):not(pre):not([lang="en"]):not(.en),
html body .app *:not(code):not(kbd):not(samp):not(pre):not([lang="en"]):not(.en),
html body .wrap *:not(code):not(kbd):not(samp):not(pre):not([lang="en"]):not(.en),
html body .page-wrap *:not(code):not(kbd):not(samp):not(pre):not([lang="en"]):not(.en),
html body .desk *:not(code):not(kbd):not(samp):not(pre):not([lang="en"]):not(.en),
html body main.sheet *:not(code):not(kbd):not(samp):not(pre):not([lang="en"]):not(.en) {
  font-family: inherit;
}

html {
  height: 100%;
  font-size: var(--lesson-fs-html);
}

body {
  --lesson-s-t: env(safe-area-inset-top, 0px);
  --lesson-s-b: env(safe-area-inset-bottom, 0px);
  --lesson-s-l: env(safe-area-inset-left, 0px);
  --lesson-s-r: env(safe-area-inset-right, 0px);
  /* 底部流式页脚（L01/L02 等）预留高度，避免主舞台 + 页脚超出视口 */
  --lesson-foot-h: 0px;
  /* 固定底栏占位（L01/L02/L03/L05 统一） */
  --lesson-pager-gap: 4.35rem;
  --lesson-l03-pager-gap: var(--lesson-pager-gap);
  /* 讲义页顶栏工具条粗略高度（打印条 + 可选姓名栏等） */
  --lesson-handout-chrome: 0px;

  margin: 0 !important;
  min-height: 100dvh !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--lesson-font-zh);
  line-height: 1.55;
}

body:has(> .handout-pdf-bar):has(> main.sheet) {
  --lesson-handout-chrome: 3.75rem;
  justify-content: flex-start;
}

body.has-lesson-pager:has(> main.sheet) {
  --lesson-handout-chrome: 8.5rem;
  justify-content: flex-start;
}

/* 去掉各页内联的 body 大留白；L03 单独处理底栏 */
body:not(.has-lesson-pager) {
  padding: var(--lesson-s-t) var(--lesson-s-r) var(--lesson-s-b) var(--lesson-s-l) !important;
}

body.has-lesson-pager {
  padding-top: max(4px, var(--lesson-s-t)) !important;
  padding-left: max(4px, var(--lesson-s-l)) !important;
  padding-right: max(4px, var(--lesson-s-r)) !important;
  padding-bottom: max(var(--lesson-pager-gap, 4.35rem), var(--lesson-s-b)) !important;
}

/* —— 全讲统一「页间导航」：固定底栏（与 L03 lesson-pager 视觉一致，兼容旧 class 名） —— */
body.has-lesson-pager nav.lesson-pager,
body.has-lesson-pager nav.lesson-footer-nav,
body.has-lesson-pager div.lesson-footer-nav,
body.has-lesson-pager nav.page-foot,
body.has-lesson-pager nav.footer-nav,
body.has-lesson-pager div.footer-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.42rem 0.55rem;
  padding-bottom: max(0.42rem, env(safe-area-inset-bottom, 0px));
  background: rgba(255, 249, 240, 0.98);
  border-top: 3px solid #5d4037;
  box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.1);
  font-family: var(--lesson-font-zh);
}

body.has-lesson-pager nav.lesson-pager a,
body.has-lesson-pager nav.lesson-pager .pager-muted,
body.has-lesson-pager nav.lesson-footer-nav a,
body.has-lesson-pager div.lesson-footer-nav a,
body.has-lesson-pager nav.page-foot a,
body.has-lesson-pager nav.footer-nav a,
body.has-lesson-pager div.footer-nav a,
body.has-lesson-pager nav.lesson-footer-nav > span:not(.nav-sep),
body.has-lesson-pager div.lesson-footer-nav > span:not(.nav-sep),
body.has-lesson-pager nav.page-foot > span:not(.nav-sep),
body.has-lesson-pager nav.footer-nav > span:not(.nav-sep),
body.has-lesson-pager div.footer-nav > span:not(.nav-sep) {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.35;
  font-size: clamp(0.7rem, 2.6vw, 0.82rem);
  font-weight: 800;
  padding: 0.42rem 0.4rem;
  border-radius: 999px;
  border: 3px solid #5d4037;
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.1);
}

body.has-lesson-pager nav.lesson-pager a,
body.has-lesson-pager nav.lesson-footer-nav a,
body.has-lesson-pager div.lesson-footer-nav a,
body.has-lesson-pager nav.page-foot a,
body.has-lesson-pager nav.footer-nav a,
body.has-lesson-pager div.footer-nav a {
  text-decoration: none;
  cursor: pointer;
}

body.has-lesson-pager nav.lesson-pager a:hover,
body.has-lesson-pager nav.lesson-footer-nav a:hover,
body.has-lesson-pager div.lesson-footer-nav a:hover,
body.has-lesson-pager nav.page-foot a:hover,
body.has-lesson-pager nav.footer-nav a:hover,
body.has-lesson-pager div.footer-nav a:hover {
  filter: brightness(1.05);
}

body.has-lesson-pager nav.lesson-pager .pager-prev,
body.has-lesson-pager nav.lesson-footer-nav a:first-of-type,
body.has-lesson-pager div.lesson-footer-nav a:first-of-type,
body.has-lesson-pager nav.page-foot a:first-of-type,
body.has-lesson-pager nav.footer-nav a:first-of-type,
body.has-lesson-pager div.footer-nav a:first-of-type {
  color: #1565c0;
  background: rgba(255, 249, 240, 0.98);
}

body.has-lesson-pager nav.lesson-pager .pager-next,
body.has-lesson-pager nav.lesson-footer-nav a:last-of-type,
body.has-lesson-pager div.lesson-footer-nav a:last-of-type,
body.has-lesson-pager nav.page-foot a:last-of-type,
body.has-lesson-pager nav.footer-nav a:last-of-type,
body.has-lesson-pager div.footer-nav a:last-of-type {
  color: #4e342e;
  background: linear-gradient(180deg, #ffe082, #ffca28);
  box-shadow: 0 0 12px rgba(255, 143, 0, 0.35), 3px 4px 0 rgba(0, 0, 0, 0.1);
}

/* 三链接旧版：中间 <a> 用中性色（非首非尾的链接） */
body.has-lesson-pager nav.lesson-footer-nav a:not(:first-of-type):not(:last-of-type),
body.has-lesson-pager div.lesson-footer-nav a:not(:first-of-type):not(:last-of-type),
body.has-lesson-pager nav.page-foot a:not(:first-of-type):not(:last-of-type),
body.has-lesson-pager nav.footer-nav a:not(:first-of-type):not(:last-of-type),
body.has-lesson-pager div.footer-nav a:not(:first-of-type):not(:last-of-type) {
  color: #37474f;
  background: rgba(236, 239, 241, 0.96);
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.08);
}

/* 中间页码：绘本蜡笔「徽章」式，避免冷淡灰盒子 */
body.has-lesson-pager nav.lesson-pager .pager-mid {
  position: relative;
  justify-content: center;
  padding-inline: 0.72rem;
  padding-block: 0.48rem;
  color: #4e342e;
  font-weight: 950;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  font-size: clamp(0.76rem, 2.4vw, 0.9rem);
  line-height: 1.28;
  border-radius: 22px 10px 20px 12px / 12px 20px 12px 22px;
  border: 4px solid #6d4c41;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.58) 0%, transparent 55%),
    linear-gradient(165deg, #fffef9 0%, #fff3e0 38%, #ffe0b2 72%, #ffcc80 100%);
  box-shadow:
    5px 6px 0 rgba(62, 39, 35, 0.16),
    inset 0 2px 0 rgba(255, 255, 255, 0.88),
    inset 5px 0 0 -1px rgba(142, 36, 170, 0.2),
    0 0 28px rgba(255, 213, 79, 0.38);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}

body.has-lesson-pager nav.lesson-pager .pager-mid::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
  opacity: 0.88;
}
body.has-lesson-pager nav.lesson-pager .pager-muted,
body.has-lesson-pager nav.lesson-footer-nav > span:not(.nav-sep),
body.has-lesson-pager div.lesson-footer-nav > span:not(.nav-sep),
body.has-lesson-pager nav.page-foot > span:not(.nav-sep),
body.has-lesson-pager nav.footer-nav > span:not(.nav-sep),
body.has-lesson-pager div.footer-nav > span:not(.nav-sep) {
  color: #78909c;
  background: rgba(236, 239, 241, 0.95);
  cursor: default;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.06);
}

body.has-lesson-pager .lesson-footer-nav .nav-sep,
body.has-lesson-pager div.lesson-footer-nav .nav-sep,
body.has-lesson-pager nav.page-foot .nav-sep,
body.has-lesson-pager nav.footer-nav .nav-sep,
body.has-lesson-pager div.footer-nav .nav-sep,
body.has-lesson-pager div.footer-nav .sep {
  display: none;
}

/* L05 Page04：屏内阶段分页条与固定页间底栏错开，避免被遮挡 */
body.has-lesson-pager .book .pager-foot {
  margin-bottom: max(0.75rem, var(--lesson-pager-gap, 4.35rem));
}

/* 英文例句 / 片段：与中文同栈，字号用 --lesson-fs-example（勿给整段中文误标 lang="en"） */
body .book [lang="en"],
body .shell [lang="en"],
body .app [lang="en"],
body .wrap [lang="en"],
body .page-wrap [lang="en"],
body .desk [lang="en"],
body main.sheet [lang="en"],
body .book .en,
body .shell .en,
body .app .en,
body .wrap .en,
body .page-wrap .en,
body .desk .en,
body main.sheet .en {
  font-family: var(--lesson-font-en);
  font-size: var(--lesson-fs-example);
}

/* 压过各页内联里对 .en 的 Patrick Hand（与上条同义，提高权重） */
html body .book .en,
html body .shell .en,
html body .app .en,
html body .wrap .en,
html body .page-wrap .en,
html body .desk .en,
html body main.sheet .en {
  font-family: var(--lesson-font-en) !important;
  font-size: var(--lesson-fs-example) !important;
}

/* 常见「整句英文」容器（部分页未加 .en） */
body :is(.book, .shell, .app, .wrap, .page-wrap, .desk, main.sheet) :is(
  .sentence-en,
  .gold-line,
  .trap-line,
  .mirror-word,
  .contrast-line,
  .sentence-line,
  .sentence-main,
  .voice-line-en,
  .example-en,
  .en-line,
  .ipa-bar
) {
  font-family: var(--lesson-font-en);
  font-size: var(--lesson-fs-example);
}

/* 标题层级（主舞台内） */
body :is(.book, .shell, .app, .wrap, .page-wrap, .desk, main.sheet) :is(h1) {
  font-family: var(--lesson-font-zh);
  font-size: var(--lesson-fs-h1);
  line-height: 1.25;
}

body :is(.book, .shell, .app, .wrap, .page-wrap, .desk, main.sheet) :is(h2) {
  font-family: var(--lesson-font-zh);
  font-size: var(--lesson-fs-h2);
  line-height: 1.3;
}

body :is(.book, .shell, .app, .wrap, .page-wrap, .desk, main.sheet) :is(h3) {
  font-family: var(--lesson-font-zh);
  font-size: var(--lesson-fs-h3);
  line-height: 1.35;
}

body :is(.book, .shell, .app, .wrap, .page-wrap, .desk, main.sheet) :is(h4) {
  font-family: var(--lesson-font-zh);
  font-size: var(--lesson-fs-h4);
  line-height: 1.4;
}

/* 常见标题/条类名（与 h1 同级视觉的条目标题） */
body :is(.book, .shell, .app, .wrap, .page-wrap, .desk, main.sheet) :is(
  .page-title,
  .stage-title,
  .doc-title,
  .goal-title,
  .machine-title,
  .section-title,
  .section-label,
  .column-title,
  .sk-title,
  .time-machine .machine-title
) {
  font-family: var(--lesson-font-zh);
  font-size: var(--lesson-fs-h2);
  line-height: 1.3;
}

body :is(.book, .shell, .app, .wrap, .page-wrap, .desk, main.sheet) :is(h1.page-title) {
  font-size: var(--lesson-fs-h1);
}

/* 顶栏 / 副标题 / 提示条 */
body :is(.book, .shell, .app, .wrap, .page-wrap, .desk, main.sheet) :is(
  .top-bar,
  .top,
  .sub-hint,
  .page-subtitle,
  .hint:not(.no-print),
  .audio-chip,
  .phase-pill
) {
  font-family: var(--lesson-font-zh);
  font-size: var(--lesson-fs-topbar);
}

body :is(.book, .shell, .app, .wrap, .page-wrap, .desk, main.sheet) :is(.page-subtitle, .hint) {
  font-size: var(--lesson-fs-body);
  line-height: 1.55;
}

/* 标签式导航按钮 */
body :is(.book, .shell, .app, .wrap, .page-wrap, .desk, main.sheet) :is(
  .phase-tabs button,
  .tabs .tab,
  .tab,
  .phase-nav button
) {
  font-family: var(--lesson-font-zh);
  font-size: var(--lesson-fs-small);
}

/* 可点击控件：与正文协调 */
body :is(.book, .shell, .app, .wrap, .page-wrap, .desk, main.sheet) :is(
  button:not(.hotspot),
  .btn,
  .crayon,
  .btn-row button,
  .btn-handout-pdf,
  .btn-glasses,
  .btn-notes,
  .btn-tts,
  input,
  select,
  textarea
) {
  font-family: var(--lesson-font-zh);
  font-size: var(--lesson-fs-btn);
}

body :is(.book, .shell, .app, .wrap, .page-wrap, .desk, main.sheet) :is(button.crayon, .crayon) {
  font-family: var(--lesson-font-zh);
}

/* 代码与等宽保持可读 */
body :is(.book, .shell, .app, .wrap, .page-wrap, .desk, main.sheet) :is(code, kbd, samp, pre) {
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: 0.92em;
}

/* —— 主舞台：默认流式（小屏）；桌面端见下方 media —— */
body > .book,
body > .shell,
body > .app,
body > .wrap,
body > .page-wrap,
body > .desk,
body > #shakeHost,
body > .layout,
body > main.sheet {
  width: 100%;
  max-width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  font-family: var(--lesson-font-zh);
  font-size: 1rem;
}

/* 正文段落与列表（不覆盖带内联 font-size 的特例时，由继承生效；此处略抬一级） */
body :is(.book, .shell, .app, .wrap, .page-wrap, .desk, main.sheet) :is(
  p,
  li,
  dd,
  dt,
  .guide,
  .card,
  .intro-board,
  .goal-board,
  .nav-list,
  .blueprint,
  .tree-story,
  .ai-out,
  .ai-bubble
) {
  font-family: var(--lesson-font-zh);
  font-size: var(--lesson-fs-body);
}

/* 外层已控宽时，内层 .book 铺满，避免双层 max-width 夹心过窄 */
body > .shell > .book,
body > .app > .book,
body > .page-wrap > .book,
body > .wrap > .book {
  width: 100% !important;
  max-width: none !important;
}

/* 底部导航与主舞台同宽（仅 body 直接子级，避免误伤页内 .footer-nav） */
body > .lesson-footer-nav,
body > nav.lesson-footer-nav,
body > nav.page-foot,
body > nav.lesson-pager,
body > nav.footer-nav,
body > div.footer-nav {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  font-family: var(--lesson-font-zh);
  font-size: var(--lesson-fs-small);
  flex-shrink: 0;
}

.lesson-footer-nav a,
body > nav.page-foot a {
  font-family: var(--lesson-font-zh);
  font-size: inherit;
}

/* 讲义顶栏与主画布同宽（桌面端由 media 覆盖为 16:9 宽度） */
body > .handout-pdf-bar,
body.has-lesson-pager > .handout-pdf-bar,
body.has-lesson-pager > .name-toolbar {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* 桌面：视口内最大 16:9 内接矩形 */
@media (min-width: 769px) and (min-height: 560px) {
  body:not(.has-lesson-pager) > .book,
  body:not(.has-lesson-pager) > .shell,
  body:not(.has-lesson-pager) > .app,
  body:not(.has-lesson-pager) > .wrap,
  body:not(.has-lesson-pager) > .page-wrap,
  body:not(.has-lesson-pager) > .desk,
  body:not(.has-lesson-pager) > #shakeHost,
  body:not(.has-lesson-pager) > .layout,
  body:not(.has-lesson-pager) > main.sheet {
    --stage-vw: calc(100vw - var(--lesson-s-l) - var(--lesson-s-r));
    --stage-vh: calc(100dvh - var(--lesson-foot-h) - var(--lesson-handout-chrome) - var(--lesson-s-t) - var(--lesson-s-b));
    width: min(var(--stage-vw), calc(var(--stage-vh) * 16 / 9)) !important;
    max-width: min(var(--stage-vw), calc(var(--stage-vh) * 16 / 9)) !important;
    height: min(var(--stage-vh), calc(var(--stage-vw) * 9 / 16)) !important;
    max-height: min(var(--stage-vh), calc(var(--stage-vw) * 9 / 16)) !important;
    aspect-ratio: 16 / 9;
    flex: 0 0 auto;
    overflow: auto;
  }

  body.has-lesson-pager > .book,
  body.has-lesson-pager > .shell,
  body.has-lesson-pager > .app,
  body.has-lesson-pager > .wrap,
  body.has-lesson-pager > .page-wrap,
  body.has-lesson-pager > .desk,
  body.has-lesson-pager > #shakeHost,
  body.has-lesson-pager > .layout,
  body.has-lesson-pager > main.sheet {
    --stage-vw: calc(100vw - var(--lesson-s-l) - var(--lesson-s-r) - 8px);
    --stage-vh: calc(
      100dvh - var(--lesson-pager-gap, 4.35rem) - var(--lesson-handout-chrome) - max(4px, var(--lesson-s-t)) - max(4px, var(--lesson-s-b))
    );
    width: min(var(--stage-vw), calc(var(--stage-vh) * 16 / 9)) !important;
    max-width: min(var(--stage-vw), calc(var(--stage-vh) * 16 / 9)) !important;
    height: min(var(--stage-vh), calc(var(--stage-vw) * 9 / 16)) !important;
    max-height: min(var(--stage-vh), calc(var(--stage-vw) * 9 / 16)) !important;
    aspect-ratio: 16 / 9;
    flex: 0 0 auto;
    overflow: auto;
  }

  body > .lesson-footer-nav,
  body > nav.lesson-footer-nav,
  body > nav.page-foot,
  body > nav.lesson-pager,
  body > nav.footer-nav,
  body > div.footer-nav {
    width: min(
        calc(100vw - var(--lesson-s-l) - var(--lesson-s-r)),
        calc((100dvh - var(--lesson-foot-h) - var(--lesson-s-t) - var(--lesson-s-b)) * 16 / 9)
      )
      !important;
    max-width: min(
        calc(100vw - var(--lesson-s-l) - var(--lesson-s-r)),
        calc((100dvh - var(--lesson-foot-h) - var(--lesson-s-t) - var(--lesson-s-b)) * 16 / 9)
      )
      !important;
  }

  body.has-lesson-pager > .lesson-footer-nav,
  body.has-lesson-pager > nav.lesson-footer-nav,
  body.has-lesson-pager > nav.page-foot {
    width: min(
        calc(100vw - var(--lesson-s-l) - var(--lesson-s-r) - 8px),
        calc((100dvh - var(--lesson-pager-gap, 4.35rem) - max(4px, var(--lesson-s-t)) - max(4px, var(--lesson-s-b))) * 16 / 9)
      )
      !important;
    max-width: min(
        calc(100vw - var(--lesson-s-l) - var(--lesson-s-r) - 8px),
        calc((100dvh - var(--lesson-pager-gap, 4.35rem) - max(4px, var(--lesson-s-t)) - max(4px, var(--lesson-s-b))) * 16 / 9)
      )
      !important;
  }

  /* 固定底栏铺满视口（勿用 16:9 画布宽度约束，否则底栏短于屏幕） */
  body.has-lesson-pager > nav.lesson-pager,
  body.has-lesson-pager > nav.lesson-footer-nav,
  body.has-lesson-pager > div.lesson-footer-nav,
  body.has-lesson-pager > nav.page-foot,
  body.has-lesson-pager > nav.footer-nav,
  body.has-lesson-pager > div.footer-nav {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body > .handout-pdf-bar,
  body.has-lesson-pager > .handout-pdf-bar,
  body.has-lesson-pager > .name-toolbar {
    width: min(
        calc(100vw - var(--lesson-s-l) - var(--lesson-s-r)),
        calc((100dvh - var(--lesson-foot-h) - var(--lesson-handout-chrome) - var(--lesson-s-t) - var(--lesson-s-b)) * 16 / 9)
      )
      !important;
    max-width: min(
        calc(100vw - var(--lesson-s-l) - var(--lesson-s-r)),
        calc((100dvh - var(--lesson-foot-h) - var(--lesson-handout-chrome) - var(--lesson-s-t) - var(--lesson-s-b)) * 16 / 9)
      )
      !important;
  }

  body.has-lesson-pager > .handout-pdf-bar,
  body.has-lesson-pager > .name-toolbar {
    width: min(
        calc(100vw - var(--lesson-s-l) - var(--lesson-s-r) - 8px),
        calc((100dvh - var(--lesson-pager-gap, 4.35rem) - var(--lesson-handout-chrome) - max(4px, var(--lesson-s-t)) - max(4px, var(--lesson-s-b))) * 16 / 9)
      )
      !important;
    max-width: min(
        calc(100vw - var(--lesson-s-l) - var(--lesson-s-r) - 8px),
        calc((100dvh - var(--lesson-pager-gap, 4.35rem) - var(--lesson-handout-chrome) - max(4px, var(--lesson-s-t)) - max(4px, var(--lesson-s-b))) * 16 / 9)
      )
      !important;
  }

  /* 讲义页首行提示：与主画布同宽 */
  body:has(> main.sheet) > p.no-print-hint {
    width: min(
        calc(100vw - var(--lesson-s-l) - var(--lesson-s-r)),
        calc((100dvh - var(--lesson-foot-h) - var(--lesson-handout-chrome) - var(--lesson-s-t) - var(--lesson-s-b)) * 16 / 9)
      )
      !important;
    max-width: min(
        calc(100vw - var(--lesson-s-l) - var(--lesson-s-r)),
        calc((100dvh - var(--lesson-foot-h) - var(--lesson-handout-chrome) - var(--lesson-s-t) - var(--lesson-s-b)) * 16 / 9)
      )
      !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  body.has-lesson-pager:has(> main.sheet) > p.no-print-hint {
    width: min(
        calc(100vw - var(--lesson-s-l) - var(--lesson-s-r) - 8px),
        calc((100dvh - var(--lesson-pager-gap, 4.35rem) - var(--lesson-handout-chrome) - max(4px, var(--lesson-s-t)) - max(4px, var(--lesson-s-b))) * 16 / 9)
      )
      !important;
    max-width: min(
        calc(100vw - var(--lesson-s-l) - var(--lesson-s-r) - 8px),
        calc((100dvh - var(--lesson-pager-gap, 4.35rem) - var(--lesson-handout-chrome) - max(4px, var(--lesson-s-t)) - max(4px, var(--lesson-s-b))) * 16 / 9)
      )
      !important;
  }
}

@media (max-width: 768px), (max-height: 559px) {
  body > .book,
  body > .shell,
  body > .app,
  body > .wrap,
  body > .page-wrap,
  body > .desk,
  body > #shakeHost,
  body > .layout,
  body > main.sheet {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    aspect-ratio: unset !important;
    flex: 1 1 auto;
    overflow: visible;
  }

  body {
    justify-content: flex-start;
  }
}

@media print {
  body > .book,
  body > .shell,
  body > .app,
  body > .wrap,
  body > .page-wrap,
  body > .desk,
  body > #shakeHost,
  body > .layout,
  body > main.sheet {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    aspect-ratio: unset !important;
    overflow: visible !important;
  }

  body.has-lesson-pager nav.lesson-pager,
  body.has-lesson-pager nav.lesson-pager.no-print,
  body.has-lesson-pager nav.lesson-footer-nav,
  body.has-lesson-pager div.lesson-footer-nav,
  body.has-lesson-pager nav.page-foot,
  body.has-lesson-pager nav.footer-nav,
  body.has-lesson-pager div.footer-nav {
    display: none !important;
  }
}

/* —— 可读字体：压过各页内联里对 body / h1 / .en 等的卡通字体（依赖更高选择器权重） —— */
html body :is(.book, .shell, .app, .wrap, .page-wrap, .desk, main.sheet) {
  font-family: var(--lesson-font-zh);
}

html body :is(.book, .shell, .app, .wrap, .page-wrap, .desk, main.sheet) button.crayon,
html body :is(.book, .shell, .app, .wrap, .page-wrap, .desk, main.sheet) .crayon {
  font-family: var(--lesson-font-zh);
}

html body > .lesson-footer-nav,
html body > nav.lesson-footer-nav,
html body > nav.page-foot,
html body > nav.footer-nav,
html body > div.footer-nav,
html body > .lesson-progress-chip,
html body > nav.lesson-pager {
  font-family: var(--lesson-font-zh);
}