@charset "utf-8";
/* ==========================================================================
   Amazing Shenzhen · 深圳欢迎你 —— 电子刊翻页阅读器
   szgl_style_20260921.css
   品牌色取自册子第 02 / 03 / 55 页底色 #3866B1，辅助亮蓝取自封面 #00AEEA
   --------------------------------------------------------------------------
   目录
   01 变量与重置        02 加载遮罩        03 左侧抽屉目录
   04 主舞台与顶栏      05 翻页书本        06 底部控制条与翻页热区
   07 缩放查看层        08 响应式（平板 / 手机 / 横屏）
   ========================================================================== */

/* ==========================================================================
   01 变量与重置
   ========================================================================== */
:root{
  --blue:#3866b1;          /* 品牌主蓝 */
  --blue-deep:#2a4f8c;     /* 深一层 */
  --blue-night:#0e1e33;    /* 舞台最暗处 */
  --cyan:#00aeea;          /* 辅助亮蓝（封面） */
  --cyan-soft:#5ac8f5;
  --paper:#ffffff;
  --txt:#ffffff;
  --txt-dim:rgba(255,255,255,.62);
  --line:rgba(255,255,255,.16);
  --glass:rgba(9,26,48,.58);

  --ease:cubic-bezier(.000,.995,.990,1.000);   /* 原版抽屉缓动 */
  --drawer-w:330px;
  --drawer-pad-l:46px;     /* 抽屉左侧内边距：主题名居中、目录条目缩进都依赖它 */
  --navbar-h:56px;
  --toolbar-h:76px;

  --font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",
         -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-en:"Helvetica Neue",Helvetica,Arial,var(--font);
}

*{ -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  margin:0;
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  overflow:hidden;
  font-family:var(--font);
  color:var(--txt);
  background:
    radial-gradient(130% 100% at 50% -10%, #2a4f8c 0%, #1a3963 42%, #0e1e33 100%);
  -webkit-font-smoothing:antialiased;
}
body::before{  /* 极淡的斜向网格纹理，避免大面积纯色发闷 */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:64px 64px,64px 64px;
}
img{ border:0; }
button{ font-family:inherit; cursor:pointer; }
a{ text-decoration:none; color:inherit; }

/* ==========================================================================
   02 加载遮罩
   ========================================================================== */
.shade{
  position:fixed; inset:0; z-index:9000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(130% 100% at 50% 20%, #2a4f8c 0%, #122437 70%, #0b1725 100%);
  transition:opacity .55s ease, visibility .55s ease;
}
.shade.is-hide{ opacity:0; visibility:hidden; }
.shade-logo{
  text-align:center; margin-bottom:38px;
  letter-spacing:.42em; text-indent:.42em;
  font-family:var(--font-en); font-size:15px; font-weight:300;
  color:rgba(255,255,255,.82);
}
.shade-logo b{
  display:block; margin-top:12px; font-size:26px; font-weight:800;
  letter-spacing:.2em; text-indent:.2em; color:#fff;
}
.shade-logo i{
  display:block; margin-top:8px; font-style:normal; font-size:11px;
  letter-spacing:.34em; text-indent:.34em; color:var(--cyan-soft);
}

/* 12 瓣渐隐圆环（延续原版 sk-fading-circle） */
.sk-fading-circle{ width:44px; height:44px; position:relative; }
.sk-fading-circle .sk-circle{
  width:100%; height:100%; position:absolute; top:0; left:0;
  animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle::before{
  content:""; display:block; margin:0 auto;
  width:5px; height:5px; border-radius:50%; background:var(--cyan-soft);
}
.sk-circle1{ transform:rotate(0deg); }
.sk-circle2{ transform:rotate(30deg); }
.sk-circle3{ transform:rotate(60deg); }
.sk-circle4{ transform:rotate(90deg); }
.sk-circle5{ transform:rotate(120deg); }
.sk-circle6{ transform:rotate(150deg); }
.sk-circle7{ transform:rotate(180deg); }
.sk-circle8{ transform:rotate(210deg); }
.sk-circle9{ transform:rotate(240deg); }
.sk-circle10{ transform:rotate(270deg); }
.sk-circle11{ transform:rotate(300deg); }
.sk-circle12{ transform:rotate(330deg); }
.sk-circle2::before{ animation-delay:-1.1s; }
.sk-circle3::before{ animation-delay:-1s; }
.sk-circle4::before{ animation-delay:-.9s; }
.sk-circle5::before{ animation-delay:-.8s; }
.sk-circle6::before{ animation-delay:-.7s; }
.sk-circle7::before{ animation-delay:-.6s; }
.sk-circle8::before{ animation-delay:-.5s; }
.sk-circle9::before{ animation-delay:-.4s; }
.sk-circle10::before{ animation-delay:-.3s; }
.sk-circle11::before{ animation-delay:-.2s; }
.sk-circle12::before{ animation-delay:-.1s; }
@keyframes sk-circleFadeDelay{
  0%,39%,100%{ opacity:0; }
  40%{ opacity:1; }
}
.shade-num{
  margin-top:26px; font-family:var(--font-en);
  font-size:13px; letter-spacing:.32em; text-indent:.32em; color:var(--txt-dim);
}
.shade-num b{ color:#fff; font-weight:600; }

/* ==========================================================================
   03 左侧抽屉目录
   ========================================================================== */
.drawer{
  position:fixed; top:0; left:0; z-index:8200;
  width:var(--drawer-w); height:100%;
  background:linear-gradient(180deg,#3d6dbd 0%,var(--blue) 42%,var(--blue-deep) 100%);
   background:linear-gradient(180deg, #1c458a 0%, var(--blue) 42%, var(--blue-deep) 100%);
  box-shadow:14px 0 46px rgba(0,0,0,.42);
  transform:translateX(-100%);
  opacity:0;
  transition:transform .5s var(--ease), opacity .4s ease;
  overflow:hidden;
}
.drawer.is-open{ transform:translateX(0); opacity:1; }

/* 背景手写体水印（呼应册子目录页的 Shenzhen 字样） */
.drawer::before{
  content:"Shenzhen";
  position:absolute; left:-30px; bottom:52px;
  font-family:Georgia,"Times New Roman",serif; font-style:italic; font-weight:700;
  font-size:96px; line-height:1; color:rgba(255,255,255,.10);
  transform:rotate(-90deg); transform-origin:left bottom;
  pointer-events:none; white-space:nowrap;
}

.drawer-inner{
  position:relative; z-index:2;
  height:100%; overflow-y:auto; overflow-x:hidden;
  padding:30px 0 60px var(--drawer-pad-l);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.3) transparent;
}
.drawer-inner::-webkit-scrollbar{ width:5px; }
.drawer-inner::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.28); border-radius:3px; }

.drawer-brand{ margin-bottom:34px; }

/* 目录页左上角标识：images/2026logo_amazingsz.png（938×480 透明底渐变字标）
   字标本身是蓝紫渐变，直接压在蓝色抽屉底上蓝色部分会糊掉，
   所以垫一层白色圆角底板保证可读性（白底宽度 = 152 + 左右 padding）。 */
.drawer-logo{
  display:block;
  width:152px; 
  width:84%; 
  height:auto;
  margin-bottom:16px;
}

/* 标识下方的主题名，居中于整个抽屉面板：
   .drawer-brand 的左边界被 .drawer-inner 的 padding-left 顶开，这里用等量负 margin
   把盒子还原到 0→面板右边缘，text-align:center 才是真正的面板水平居中。 */
.drawer-theme{
  /* margin-left:calc(-1 * var(--drawer-pad-l)); */
  text-align:center;
      display: inline-block;
}
.drawer-theme-en{
  display:block;
  font-family:var(--font-en); font-size:36px; 
  letter-spacing:.24em; text-indent:.14em;      /* 用 text-indent 抵消字距造成的右偏 */
  color:#fff; line-height:1.05;
}
.drawer-theme-cn{
  display:block; margin-top:8px;
  font-size:24px; letter-spacing:.52em; text-indent:.52em;
  color:rgba(255,255,255,.68);
}

.drawer-title{
  margin:0 0 30px; font-size:30px; font-weight:800; letter-spacing:.04em;
  color:#fff; line-height:1;
}
.drawer-title em{
  display:block; margin-top:9px; font-style:normal;
  font-family:var(--font-en); font-size:12px; font-weight:600;
  letter-spacing:.3em; color:var(--cyan-soft);
}

/* --- 目录条目 --- */
.toc-sec{ margin-bottom:30px; }
.toc-sec-no{
  display:block; margin-bottom:14px;
  font-family:var(--font-en); font-size:11px; font-weight:700;
  letter-spacing:.26em; color:var(--cyan-soft);
}
.toc-sec-no em{
  font-style:normal; margin-left:6px; font-size:18px; font-weight:800;
  color:#fff; letter-spacing:0;
}

.toc-item{
  display:flex; align-items:baseline; flex-wrap:wrap;
  padding:8px 0; color:rgba(255,255,255,.9);
  transition:color .2s ease, padding-left .25s var(--ease);
  position:relative;
}
.toc-item .toc-cn{
  font-size:16px; font-weight:600; letter-spacing:.02em;
}
.toc-item .toc-en{
  margin-left:9px;
  font-family:var(--font-en); font-size:10px; font-weight:600;
  letter-spacing:.13em; color:rgba(255,255,255,.72);
  text-transform:uppercase;
}
.toc-item .toc-pg{
  margin-left:auto; padding-left:10px;
  font-family:var(--font-en); font-size:11px; font-weight:700;
  letter-spacing:.04em; color:rgba(255,255,255,.5);
  border-bottom:1px solid rgba(255,255,255,.24);
  transition:color .2s ease, border-color .2s ease;
}
.toc-item:hover{ color:#fff; padding-left:6px; }
.toc-item:hover .toc-pg{ color:var(--cyan-soft); border-color:var(--cyan-soft); }
.toc-item.is-active{ color:#fff; }
.toc-item.is-active::before{
  content:""; position:absolute; left:-16px; top:50%; margin-top:-7px;
  width:3px; height:14px; border-radius:2px; background:var(--cyan);
}
.toc-item.is-active .toc-pg{ color:var(--cyan-soft); border-color:var(--cyan-soft); }
.toc-item.is-active .toc-cn{ color:#fff; }

/* 一级条目（章节名）字号更大 */
.toc-item--lead .toc-cn{ font-size:18px; font-weight:700; }
.toc-item--lead .toc-en{ font-size:11px; }

/* 二级条目缩进 */
.toc-sub{ padding-left:14px; margin-top:2px; }
.toc-sub .toc-item{ padding:6px 0; }
.toc-sub .toc-item .toc-cn{ font-size:14px; font-weight:500; }
.toc-sub .toc-item .toc-en{ font-size:9.5px; }

/* 抽屉打开时目录逐条错峰入场 */
.drawer .toc-sec,
.drawer .toc-item{
  opacity:0; transform:translateX(-16px);
  transition:opacity .42s ease, transform .52s var(--ease);
}
.drawer.is-open .toc-sec,
.drawer.is-open .toc-item{ opacity:1; transform:translateX(0); }
.drawer.is-open .toc-sec:nth-child(1){ transition-delay:.04s; }
.drawer.is-open .toc-sec:nth-child(2){ transition-delay:.12s; }
.drawer.is-open .toc-sec:nth-child(3){ transition-delay:.20s; }
.drawer.is-open .toc-item:nth-child(1){ transition-delay:.08s; }
.drawer.is-open .toc-item:nth-child(2){ transition-delay:.12s; }
.drawer.is-open .toc-item:nth-child(3){ transition-delay:.16s; }
.drawer.is-open .toc-item:nth-child(4){ transition-delay:.20s; }
.drawer.is-open .toc-item:nth-child(5){ transition-delay:.24s; }
.drawer.is-open .toc-item:nth-child(6){ transition-delay:.28s; }

/* 抽屉遮罩（点击关闭） */
.drawer-mask{
  position:fixed; inset:0; z-index:8100;
  background:rgba(6,16,30,.62);
  opacity:0; visibility:hidden;
  transition:opacity .45s ease, visibility .45s ease;
}
.drawer-mask.is-show{ opacity:1; visibility:visible; }

/* ==========================================================================
   04 主舞台与顶栏
   ========================================================================== */
.screen{
  position:fixed; top:0; left:0; right:0; bottom:0; z-index:10;
  transition:transform .5s var(--ease);
  will-change:transform;
}
.screen.is-shift{ transform:translateX(var(--drawer-w)); }

/* --- 顶栏 --- */
.navbar{
  position:absolute; top:0; left:0; right:0; height:var(--navbar-h);
  z-index:60;
}
.burger{
  position:absolute; top:14px; left:21px;
  width:40px; height:28px; cursor:pointer; z-index:3;
}
.burger span{
  position:absolute; left:0; width:26px; height:3px; border-radius:2px;
  background:#fff;
  transition:transform .1s ease-out, top .1s ease-out, width .1s ease-out, opacity .1s ease-out;
}
.burger .x{ top:2px; }
.burger .y{ top:12px; }
.burger .z{ top:22px; }
.burger b{
  position:absolute; top:2px; left:38px;
  font-size:13px; font-weight:500; letter-spacing:.22em; color:#fff;
  white-space:nowrap; line-height:24px;
}
.burger.is-open .y{ width:0; opacity:0; }
.burger.is-open .x,
.burger.is-open .z{ top:12px; }
.burger.is-open .x{ transform:rotate(45deg); }
.burger.is-open .z{ transform:rotate(135deg); }

.nav-progress{
  position:absolute; top:0; left:0; right:0; height:4px;
}
.nav-progress progress{
  -webkit-appearance:none; appearance:none;
  display:block; width:100%; height:4px; border:0; padding:0;
  background:rgba(255,255,255,.14);
  color:var(--cyan);
}
.nav-progress progress::-webkit-progress-bar{ background:rgba(255,255,255,.14); }
.nav-progress progress::-webkit-progress-value{
  background:linear-gradient(90deg,var(--cyan),var(--cyan-soft));
  transition:width .45s var(--ease);
}
.nav-progress progress::-moz-progress-bar{ background:var(--cyan); }

/* ==========================================================================
   05 翻页书本
   ========================================================================== */
.viewer{
  position:absolute; top:var(--navbar-h); left:0; right:0; bottom:var(--toolbar-h);
  z-index:40; overflow:hidden;
}
.book{
  position:absolute; inset:0;
  perspective:2600px; perspective-origin:50% 50%;
  transform-style:preserve-3d;
}
.sheet{
  position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;
  background:var(--paper);
  box-shadow:0 26px 64px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.07);
  transform-style:preserve-3d;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  transition:transform .62s cubic-bezier(.25,.80,.30,1);
  will-change:transform;
  overflow:hidden;
}
.sheet img{
  display:block; width:100%; height:100%;
  object-fit:contain;            /* 兜底：绝不拉伸变形 */
  -webkit-user-drag:none; user-select:none;
}
.sheet.is-static{ transition:none; }

/* 当前页图片尚未就绪时的局部转圈 */
.page-spin{
  position:absolute; top:50%; left:50%;
  margin:-16px 0 0 -16px; z-index:70;
  width:32px; height:32px; border-radius:50%;
  border:2px solid rgba(255,255,255,.22);
  border-top-color:var(--cyan-soft);
  animation:spin .8s linear infinite;
  opacity:0; visibility:hidden; transition:opacity .2s ease;
}
.page-spin.is-show{ opacity:1; visibility:visible; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ==========================================================================
   06 底部控制条与翻页热区
   ========================================================================== */
.toolbar{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:80;
  display:flex; align-items:center; gap:2px;
  height:44px; padding:0 6px;
  border-radius:999px;
  background:var(--glass);
  border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.34);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  white-space:nowrap;
}
.tb{
  height:34px; padding:0 14px; border:0; border-radius:999px;
  background:transparent; color:rgba(255,255,255,.9);
  font-size:13px; letter-spacing:.06em;
  transition:background .2s ease, color .2s ease;
}
.tb:hover{ background:rgba(255,255,255,.14); color:#fff; }
.tb:active{ background:rgba(255,255,255,.22); }
.tb.is-off{ opacity:.34; cursor:default; }
.tb.is-off:hover{ background:transparent; }

.tb-page{
  display:flex; align-items:baseline; gap:3px;
  padding:0 12px; cursor:pointer;
  font-family:var(--font-en);
  font-size:13px; letter-spacing:.04em; color:var(--txt-dim);
  transition:color .2s ease;
}
.tb-page:hover{ color:#fff; }
.tb-page b{ font-size:16px; font-weight:700; color:#fff; }
.tb-page i{ font-style:normal; }

.tb-sep{
  width:1px; height:18px; margin:0 5px;
  background:var(--line);
}

/* 点击图片左右区域翻页：贴在左右两侧的透明热区，覆盖在书页之上。
   左侧 → 上一页，右侧 → 下一页，中间区域保留"轻触放大"。
   宽度由脚本 syncTapZones() 按当前纸张（图片）的真实宽度重算——对齐的必须是
   "图片"的左右两侧，而不是屏幕边缘（宽屏下图片居中，两者相差很大）。
   这里的 width 只是脚本执行前的兜底值；JS 用 getBoundingClientRect 实测边界，
   所以改这里的数字不会影响分区判定。 */
.tap-zone{
  position:absolute; top:0; bottom:0; z-index:70;
  width:min(32%, 340px);
  margin:0; padding:0; border:0;
  box-sizing:border-box;            /* padding 由脚本设置，需计入宽度 */
  background:transparent;
  display:flex; align-items:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .25s ease;
}
.tap-zone--prev{ left:0;  justify-content:flex-start; }
.tap-zone--next{ right:0; justify-content:flex-end; }
.tap-zone.is-off{ pointer-events:none; }        /* 首/末页对应方向失效 */

/* 箭头提示：仅非触屏设备在 hover 时浮现 */
.tap-zone::after{
  content:""; width:13px; height:13px;
  border-left:2px solid rgba(255,255,255,.92);
  border-bottom:2px solid rgba(255,255,255,.92);
  opacity:0; transition:opacity .25s ease;
}
/* 箭头位置由 syncTapZones() 设置的 padding 对齐到图片左右边缘外侧 */
.tap-zone--prev::after{ transform:rotate(45deg); }
.tap-zone--next::after{ transform:rotate(-135deg); }
@media (hover:hover){
  .tap-zone--prev:hover{ background:linear-gradient( 90deg, rgba(0,174,234,.16), rgba(0,174,234,0)); }
  .tap-zone--next:hover{ background:linear-gradient(270deg, rgba(0,174,234,.16), rgba(0,174,234,0)); }
  .tap-zone:hover::after{ opacity:1; }
}

/* ==========================================================================
   07 缩放查看层（移动端点击图片自由放大）
   ========================================================================== */
.zoom{
  position:fixed; inset:0; z-index:9500;
  background:rgba(6,14,26,.97);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.zoom.is-open{ opacity:1; visibility:visible; }

.zoom-stage{
  position:absolute; inset:0;
  overflow:hidden;
  touch-action:none;                 /* 交给 JS 处理缩放与拖动 */
  cursor:grab;
}
.zoom-stage.is-grabbing{ cursor:grabbing; }
.zoom-stage img{
  position:absolute; top:50%; left:50%;
  /* 用百分比而非 vw/vh：移动端浏览器地址栏收缩时 vh 会跳变，百分比以 stage 为准更稳 */
  max-width:94%; max-height:94%;
  margin:0; transform-origin:center center;
  transform:translate(-50%,-50%);
  -webkit-user-drag:none; user-select:none;
  will-change:transform;
}

.zoom-bar{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:3;
  display:flex; align-items:center; gap:2px;
  height:44px; padding:0 6px;
  border-radius:999px;
  background:var(--glass); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  /* left:50% 会让绝对定位元素的收缩宽度上限只剩半屏，必须显式声明不换行 + 最大宽度，
     否则"重置"按钮会溢出胶囊背景之外 */
  white-space:nowrap;
  width:max-content;
  max-width:calc(100vw - 24px);
}
.zoom-scale{
  padding:0 12px; min-width:60px; text-align:center;
  font-family:var(--font-en); font-size:12px; letter-spacing:.06em;
  color:rgba(255,255,255,.86);
}
.zoom-btn{
  height:34px; min-width:38px; padding:0 12px;
  border:0; border-radius:999px; background:transparent;
  color:#fff; font-size:16px; line-height:1;
  transition:background .2s ease;
}
.zoom-btn:hover{ background:rgba(255,255,255,.16); }
.zoom-btn--txt{ font-size:12px; letter-spacing:.06em; }

.zoom-close{
  position:absolute; top:18px; right:18px; z-index:4;
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line); background:var(--glass); color:#fff;
  font-size:16px; line-height:1;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.zoom-close:hover{ background:rgba(255,255,255,.18); }

.zoom-hint{
  position:absolute; top:26px; left:50%; transform:translateX(-50%);
  z-index:3; margin:0;
  width:max-content; max-width:calc(100vw - 132px);  /* 避开右上角关闭按钮 */
  text-align:center; line-height:1.6;
  font-size:12px; letter-spacing:.14em; color:var(--txt-dim);
  transition:opacity .5s ease;
}
.zoom-hint.is-hide{ opacity:0; }
.zoom-pager{
  position:absolute; left:0; right:0; bottom:82px; z-index:3;
  display:flex; align-items:center; justify-content:center; gap:22px;
}
.zoom-pager button{
  height:36px; padding:0 18px; border-radius:999px;
  border:1px solid var(--line); background:var(--glass); color:#fff;
  font-size:12.5px; letter-spacing:.08em;
}
.zoom-pager button:hover{ background:rgba(255,255,255,.18); }

/* ==========================================================================
   08 响应式
   ========================================================================== */
/* --- 平板 --- */
@media (max-width:1024px){
  :root{ --drawer-w:300px; --toolbar-h:70px; --drawer-pad-l:36px; }
  .drawer-title{ font-size:26px; }
  .drawer-logo{ width:80%; }
  .drawer-theme-en{ font-size:34px; }
}

/* --- 手机 --- */
@media (max-width:768px){
  :root{ --drawer-w:84vw; --navbar-h:48px; --toolbar-h:64px; --drawer-pad-l:30px; }

  body::before{ background-size:44px 44px,44px 44px; }

  /* 抽屉占满高度，条目更紧凑 */
  .drawer-inner{ padding:30px 0 44px 30px; }
  .drawer-title{ font-size:22px; margin-bottom:22px; }
  .drawer-title em{ font-size:10px; }
  .drawer-brand{ margin-bottom:24px; }
  .drawer-logo{ width:82%; margin-bottom:12px; }
  .drawer-theme-en{ font-size:40px; }
  .drawer-theme-cn{ font-size:26px; letter-spacing:.44em; text-indent:.44em; }
  .drawer::before{ font-size:70px; bottom:34px; }
  .toc-sec{ margin-bottom:22px; }
  .toc-sec-no{ font-size:10px; margin-bottom:10px; }
  .toc-sec-no em{ font-size:15px; }
  .toc-item--lead .toc-cn{ font-size:16px; }
  .toc-sub .toc-item .toc-cn{ font-size:13px; }
  .toc-item .toc-pg{ font-size:10px; }

  /* 汉堡与"导航"字样缩小 */
  .burger{ top:12px; left:14px; width:34px; height:24px; }
  .burger span{ width:22px; height:2.5px; }
  .burger .x{ top:2px; } .burger .y{ top:10px; } .burger .z{ top:18px; }
  .burger.is-open .x, .burger.is-open .z{ top:10px; }
  .burger b{ left:32px; font-size:12px; line-height:20px; letter-spacing:.16em; }

  /* 控制条紧凑 */
  .toolbar{ bottom:10px; height:40px; padding:0 4px; gap:0; }
  .tb{ height:32px; padding:0 10px; font-size:12px; letter-spacing:.02em; }
  .tb-page{ padding:0 8px; font-size:11px; }
  .tb-page b{ font-size:14px; }
  .tb-sep{ margin:0 3px; }

  /* 手机端翻页入口：点击图片左右区域 + 底部按钮 + 滑动翻页 */
  .tap-zone{ width:34%; }          /* 兜底值，运行时由 syncTapZones() 重算 */

  .zoom-stage img{ max-width:100%; max-height:100%; }
  .zoom-hint{ top:20px; font-size:11px; letter-spacing:.1em; }
  .zoom-close{ top:12px; right:12px; width:36px; height:36px; }
  .zoom-bar{ bottom:18px; height:40px; }
  .zoom-pager{ bottom:70px; gap:14px; }
  .zoom-pager button{ padding:0 14px; font-size:12px; }
}

/* --- 手机横屏：压缩上下留白，让跨页尽可能铺满 --- */
@media (max-width:900px) and (orientation:landscape){
  :root{ --navbar-h:34px; --toolbar-h:48px; }
  .toolbar{ bottom:6px; height:34px; }
  .tb{ height:28px; padding:0 9px; font-size:11px; }
  .burger{ top:6px; }
  .burger b{ line-height:16px; }
  .drawer{ width:64vw; }
}

/* --- 降低动效偏好 --- */
@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}