/* ============ 画本（仿真翻页）样式。页内尺寸全部用 cqw（页宽的 1%），随页面大小等比缩放 ============ */
.stage{max-width:1280px;margin:0 auto;padding:6px 8px 4px}
.book{position:relative;margin:0 auto;width:100%;height:min(82vh,860px);min-height:420px}

/* ---- 首页整屏：书撑满剩余高度，页面本身不出现纵向滚动条（脚本就绪后才启用；没有 JS 时仍可正常滚动阅读） ---- */
html:has(body.book-ready){overflow:hidden}
body.book-ready{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
body.book-ready .topbar{position:static;flex:none}
body.book-ready main{flex:1;min-height:0;padding:0;display:flex}
body.book-ready .stage{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;padding:4px 8px 2px}
body.book-ready .bookbox{position:relative;flex:1;min-height:0}
body.book-ready .bookshift{position:absolute;inset:0;transition:transform .7s cubic-bezier(.4,0,.2,1)}
/* 翻页库会给容器强写 width:100%，所以这里用容器查询定尺寸。
   书的宽高比：双页 1120:746 ≈ 1.5013，单页 560:746 ≈ 0.7507。
   故意不占满容器（高度只用 80%、宽度 92%），并且【不裁剪溢出】：翻起来的纸角会甩出书的范围，要完整看得见，所以四周留白给它。 */
body.book-ready .bookshift{container-type:size}
body.book-ready .book{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;
  width:min(calc(100cqw * .92),calc(100cqh * .80 * 1.5013))!important;height:auto!important;min-width:0!important;max-width:none!important;min-height:0!important}

/* ---- 书的厚度：硬壳底板 + 左右两叠书页（粗细随翻到哪一页变化）+ 订口阴影，由 book.js 定位 ---- */
.deco{position:absolute;pointer-events:none;transition:left .25s ease,top .25s ease,width .25s ease,height .25s ease,opacity .25s}
.bookshift.noanim,.bookshift.noanim .deco{transition:none!important}
/* 翻封面/封底时由 book.js 逐帧驱动平移和底板，期间关掉 CSS 过渡，避免和逐帧值打架 */
.bookshift.tracking,.bookshift.tracking .deco{transition:none!important}
/* 硬壳底板：布面纹理 + 板边高光 */
.deco.plate{z-index:0;background:
  repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),
  repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 3px),
  linear-gradient(180deg,#9a6a45,#7a4b2a);border:2px solid #3b2418;border-radius:6px 10px 10px 6px/6px 8px 8px 6px;
  box-shadow:0 18px 26px -6px rgba(59,36,24,.55),0 3px 0 #4b2f1c,inset 0 2px 0 rgba(255,255,255,.18),inset 0 -2px 3px rgba(0,0,0,.25)}
/* 书页叠：一张张纸的边 */
.deco.stack{z-index:0;background:
  repeating-linear-gradient(90deg,rgba(90,60,25,.22) 0 1px,rgba(255,255,255,.35) 1px 2px,transparent 2px 3px),linear-gradient(180deg,#fbf4e2,#e7dabd);
  border:1px solid rgba(59,36,24,.45);border-radius:2px;box-shadow:inset 0 -3px 4px rgba(120,80,30,.22),inset 0 3px 3px rgba(255,255,255,.4)}

/* 翻页库自带的硬页阴影是两块硬边灰带，不知道底板存在，和书壳对不上——关掉，改由 .shade 画（跟着同一个进度） */
.book .stf__hardShadow,.book .stf__hardInnerShadow{display:none!important}
/* 透视放缓：2000px 时封面转到一半会比书壳高出约 20%，像从书里飞出来 */
.book .stf__block{perspective:5000px!important}
.page>.shade{position:absolute;inset:0;pointer-events:none;z-index:9;opacity:0}
.shade.s-face,.shade.s-back{background:#1e1004}
.shade.s-face{opacity:var(--sh-face,0)}
.shade.s-back{opacity:var(--sh-back,0)}
.shade.s-cast{opacity:var(--sh-cast,0)}
.shade.s-cast.r{background:linear-gradient(90deg,rgba(40,20,0,.75),rgba(40,20,0,.3) 35%,transparent 80%)}
.shade.s-cast.l{background:linear-gradient(270deg,rgba(40,20,0,.75),rgba(40,20,0,.3) 35%,transparent 80%)}

/* ---- 没有 JS / 翻页库没加载：退化成竖向一页页的列表（搜索引擎也看得到内容） ---- */
.book:not(.ready){height:auto;display:flex;flex-direction:column;align-items:center;gap:18px}
.book:not(.ready) .page{position:relative;width:min(560px,94vw);aspect-ratio:3/4;border:3px solid var(--ink);border-radius:var(--wob2)}

/* 纸张纹理：低频斑驳（纸浆不均）+ 细纤维 + 颗粒。只用静态背景图，不用 filter/blend，翻动时不会每帧重绘 */
:root{--papertex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0117' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .46 0 0 0 0 .25 .2 0 0 0 -.07'/%3E%3C/filter%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='.0625 .125' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .25 -.9 0 0 0 .1'/%3E%3C/filter%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23m)'/%3E%3Crect width='256' height='256' filter='url(%23f)'/%3E%3Crect width='256' height='256' filter='url(%23g)'/%3E%3C/svg%3E")}
.page{--ink:#3B2F4A;--muted:#7A6A8A;container-type:inline-size;position:relative;overflow:hidden;color:var(--ink);font-family:var(--font-body);
  background:var(--grain),#FCF6E6;line-height:1.5;}
/* 纸面覆盖层：盖在页内所有内容（含贴上去的画）之上——像印在同一张纸上。
   外侧边缘略暗（纸边氧化/翻旧），离书脊远的一侧有一点点受光，配合 ::after 的订口阴影形成纸页的弧度 */
.page::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;background:var(--papertex) 0 0/256px 256px}
.page.right:not(.cover)::before{background:var(--papertex) 0 0/256px 256px,linear-gradient(90deg,transparent 18%,rgba(255,255,255,.10) 55%,rgba(110,75,30,.07) 92%,rgba(110,75,30,.16));
  box-shadow:inset 0 0 2.2cqw rgba(120,85,35,.16),inset -.5cqw 0 .6cqw rgba(110,75,30,.12)}
.page.left:not(.backcover)::before{background:var(--papertex) 0 0/256px 256px,linear-gradient(270deg,transparent 18%,rgba(255,255,255,.10) 55%,rgba(110,75,30,.07) 92%,rgba(110,75,30,.16));
  box-shadow:inset 0 0 2.2cqw rgba(120,85,35,.16),inset .5cqw 0 .6cqw rgba(110,75,30,.12)}
/* 硬壳封面/封底：覆膜的光泽 + 板边倒角 */
.cover::before,.backcover::before{background:linear-gradient(115deg,rgba(255,255,255,.22),rgba(255,255,255,0) 32%,rgba(255,255,255,0) 68%,rgba(255,255,255,.10)),var(--papertex) 0 0/256px 256px;
  box-shadow:inset 0 0 0 .5cqw rgba(255,255,255,.18),inset 0 0 3cqw rgba(40,20,0,.28);opacity:.9}
.page *{box-sizing:border-box}
/* 订口阴影：画在每一页的纸面上，只在靠书脊的那一侧，和纸一起翻转、弯曲（真实的书里它就是纸面的一部分，不是浮在书上方的一层）*/
.page.left:not(.backcover)::after,.page.right:not(.cover)::after{content:"";position:absolute;top:0;bottom:0;width:13cqw;pointer-events:none;z-index:6}
.page.left::after{right:0;background:linear-gradient(270deg,rgba(70,40,10,.36) 0,rgba(70,40,10,.16) 22%,rgba(70,40,10,.05) 55%,transparent)}
.page.right::after{left:0;background:linear-gradient(90deg,rgba(70,40,10,.36) 0,rgba(70,40,10,.16) 22%,rgba(70,40,10,.05) 55%,transparent)}
/* .pi = 页内容容器：容器自身样式不能用自己的 cqw，所以内边距/背景都放在这一层 */
.pi{position:absolute;inset:0}
.pn{position:absolute;bottom:3cqw;font-family:var(--font);font-size:4.4cqw;color:var(--muted)}
.page.left .pn{left:6cqw}.page.right .pn{right:6cqw}
.page a{color:inherit;text-decoration:none}
.page button{font-family:inherit;cursor:pointer}
.wavy{display:block;width:34cqw;height:3cqw;margin:1cqw 0 3cqw;background:radial-gradient(circle at 1.5cqw 3cqw,transparent 1.2cqw,var(--ink) 1.3cqw,var(--ink) 1.7cqw,transparent 1.8cqw) 0 0/3cqw 3cqw repeat-x;opacity:.55}

/* ---- 封面 / 封底（硬壳） ---- */
.cover,.backcover{background:#FFE8A8}
.cover>img,.backcover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover::after,.backcover::after{content:"";position:absolute;top:0;bottom:0;width:5cqw;pointer-events:none}
.cover::after{left:0;background:linear-gradient(90deg,rgba(60,30,0,.35),transparent)}
.backcover::after{right:0;background:linear-gradient(270deg,rgba(60,30,0,.35),transparent)}
.cover .noart,.backcover .noart{position:absolute;inset:0;display:grid;place-items:center;font-size:40cqw;background:
  radial-gradient(circle at 20% 20%,#FFB3C7 0 12cqw,transparent 12.2cqw),radial-gradient(circle at 80% 70%,#B5E0FF 0 16cqw,transparent 16.2cqw),#FFE8A8}
.cover .title{position:absolute;top:7cqw;left:0;right:0;text-align:center;font-family:var(--font);font-size:16cqw;line-height:1.05;letter-spacing:.5cqw}
.cover .title span{display:inline-block;transform:rotate(var(--r));-webkit-text-stroke:.9cqw #fff;paint-order:stroke fill;text-shadow:.6cqw .8cqw 0 rgba(59,47,74,.35)}
.cover .sub{position:absolute;bottom:6cqw;left:0;right:0;text-align:center}
.cover .sub b{display:inline-block;background:#fff;border:.7cqw solid var(--ink);border-radius:var(--wob);padding:1cqw 5cqw;font-family:var(--font);font-size:5.6cqw;font-weight:400;box-shadow:.9cqw 1cqw 0 var(--ink);transform:rotate(-2deg)}
.cover .meta{position:absolute;bottom:20cqw;left:0;right:0;text-align:center;font-size:4cqw;color:var(--ink);text-shadow:0 0 1.2cqw #fff,0 0 1.2cqw #fff}
.backcover .end{position:absolute;top:10cqw;left:0;right:0;text-align:center;font-family:var(--font);font-size:20cqw;-webkit-text-stroke:.9cqw #fff;paint-order:stroke fill;text-shadow:.6cqw .8cqw 0 rgba(59,47,74,.3)}
.backcover .links{position:absolute;bottom:7cqw;left:0;right:0;display:flex;gap:2.5cqw;justify-content:center;flex-wrap:wrap}
.backcover .links a,.backcover .links button{background:#fff;border:.6cqw solid var(--ink);border-radius:var(--wob);padding:.8cqw 4cqw;font-family:var(--font);font-size:4.6cqw;box-shadow:.7cqw .8cqw 0 var(--ink);color:var(--ink)}

/* ---- 扉页 / 目录 / 空白涂鸦页 ---- */
.inside .pi{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10cqw 9cqw}
.inside .big{font-size:26cqw;line-height:1;transform:rotate(-6deg)}
.inside h2{margin:2cqw 0 0;font-size:11cqw;line-height:1.2}
.inside p{margin:1cqw 0;font-size:4.6cqw;color:#5b4a6d}
.inside .stats{display:flex;gap:2cqw;flex-wrap:wrap;justify-content:center;margin-top:4cqw}
.inside .stats span{background:var(--c);border:.6cqw solid var(--ink);border-radius:var(--wob);padding:.5cqw 3.5cqw;font-size:4cqw;box-shadow:.6cqw .7cqw 0 var(--ink)}
.toc .pi{padding:7cqw 8cqw 10cqw 9cqw}
.toc h2{margin:0;font-size:10cqw;line-height:1.1}
.toc h3{margin:2cqw 0 .6cqw;font-size:5.8cqw;line-height:1.2;display:flex;align-items:center;gap:1.6cqw}
.toc h3 i{font-style:normal;display:grid;place-items:center;width:7.4cqw;height:7.4cqw;border:.5cqw solid var(--ink);border-radius:var(--wob);background:var(--c);font-size:4.2cqw}
.toc a.row{display:flex;align-items:baseline;gap:1cqw;font-size:4.1cqw;line-height:6cqw;padding:0 1cqw;border-radius:1cqw}
.toc a.row .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:58cqw}
.toc a.row .dots{flex:1;border-bottom:.45cqw dotted rgba(59,47,74,.45);transform:translateY(-.8cqw);min-width:4cqw}
.toc a.row .n{font-family:var(--font);font-size:4.4cqw;color:#8a5a9a}
.toc a.row:hover{background:color-mix(in srgb,var(--c) 28%,transparent)}
.doodle .pi{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:var(--font);font-size:6cqw;color:#9a86b0;padding:10cqw}
.doodle .big{font-size:22cqw;margin-bottom:3cqw;transform:rotate(8deg)}

/* ---- 章节页 ---- */
.chap-art .pi{background:color-mix(in srgb,var(--c) 22%,#FFFBEF);padding:6cqw}
.chap-art .pic{position:absolute;inset:6cqw 6cqw 11cqw;border:.7cqw solid var(--ink);border-radius:var(--wob2);overflow:hidden;background:#fff;box-shadow:1.2cqw 1.4cqw 0 rgba(59,47,74,.25)}
.chap-art .pic img{width:100%;height:100%;object-fit:cover;display:block}
.chap-art .pic .noart{width:100%;height:100%;display:grid;place-items:center;font-size:50cqw;background:color-mix(in srgb,var(--c) 40%,#fff)}
.chap-title .pi{background:var(--grain),color-mix(in srgb,var(--c) 22%,#FFFBEF);padding:9cqw 8cqw 12cqw 10cqw;display:flex;flex-direction:column}
.chap-title .no{font-family:var(--font);font-size:5cqw;color:var(--muted)}
.chap-title .icon{width:20cqw;height:20cqw;display:grid;place-items:center;font-size:12cqw;background:var(--c);border:.8cqw solid var(--ink);border-radius:var(--wob);box-shadow:1.2cqw 1.3cqw 0 var(--ink);transform:rotate(-6deg);margin:1.5cqw 0 3cqw}
.chap-title h2{margin:0;font-size:15cqw;line-height:1.1}
.chap-title p{margin:2cqw 0 3cqw;font-size:4.6cqw;color:#5b4a6d}
.chap-title .mini{display:flex;flex-wrap:wrap;gap:1.4cqw;margin-top:auto}
.chap-title .mini a{font-size:3.4cqw;line-height:1.3;padding:.4cqw 2.6cqw;background:#fff;border:.45cqw solid var(--ink);border-radius:var(--wob)}
.chap-title .mini a:hover{background:var(--c)}

/* ---- 作品页：左 = 画；右 = 手账笔记 ---- */
.art .pi{background:var(--grain),color-mix(in srgb,var(--c) 16%,#FFFBEF);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6cqw 5cqw 11cqw;gap:3cqw}
.art .frame2{position:relative;background:#fff;border:.7cqw solid var(--ink);border-radius:var(--wob2);padding:2.6cqw;box-shadow:1.2cqw 1.4cqw 0 rgba(59,47,74,.25);transform:rotate(-1deg);cursor:zoom-in;max-width:90cqw}
.art .frame2::before{content:"";position:absolute;top:-3cqw;left:50%;width:20cqw;height:5.6cqw;margin-left:-10cqw;z-index:2;transform:rotate(-3deg);border-radius:.4cqw;
  background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--c) 70%,#fff) 0 1.6cqw,color-mix(in srgb,var(--c) 45%,#fff) 1.6cqw 3.2cqw);opacity:.92}
.art .frame2 img{display:block;max-width:78cqw;max-height:86cqw;width:auto;height:auto;border-radius:.6cqw;background:#f3ead9}
.art .cap{margin:0;font-family:var(--font);font-weight:400;font-size:7.4cqw;line-height:1.2;text-align:center}
.art .stamp{position:absolute;right:5cqw;top:5cqw;transform:rotate(9deg);background:#FFD166;border:.6cqw solid var(--ink);border-radius:var(--wob);padding:.4cqw 3cqw;font-family:var(--font);font-size:4.4cqw;box-shadow:.7cqw .8cqw 0 var(--ink)}
.note .pi{background:var(--grain),
  linear-gradient(90deg,transparent 12cqw,rgba(255,110,130,.45) 12cqw,rgba(255,110,130,.45) 12.4cqw,transparent 12.4cqw),
  repeating-linear-gradient(transparent 0 7.2cqw,rgba(110,150,210,.4) 7.2cqw 7.4cqw),#FFFDF3;
  padding:9cqw 8cqw 12cqw 17cqw}
.note .nh{margin:0;font-family:var(--font);font-weight:400;font-size:7.6cqw;line-height:7.4cqw;padding-top:1cqw;min-height:7.4cqw;color:var(--muted)}
.note .chips2{display:flex;gap:2cqw;flex-wrap:wrap;margin:3.6cqw 0 0;min-height:7.4cqw}
.note .chips2 span,.note .chips2 a{display:inline-block;background:var(--c);border:.5cqw solid var(--ink);border-radius:var(--wob);padding:0 3cqw;font-size:3.6cqw;line-height:6.2cqw;box-shadow:.5cqw .6cqw 0 var(--ink)}
.note .chips2 .dt{background:#FFD166}
.note .desc{font-size:4.5cqw;line-height:7.4cqw;margin:3.6cqw 0 0;max-height:44.4cqw;overflow:hidden}
.note .acts{position:absolute;left:17cqw;right:8cqw;bottom:13cqw;display:flex;gap:2cqw;flex-wrap:wrap}
.note .acts a,.note .acts button{background:#fff;border:.55cqw solid var(--ink);border-radius:var(--wob);padding:.4cqw 3.2cqw;font-size:3.7cqw;line-height:6cqw;box-shadow:.6cqw .7cqw 0 var(--ink);color:var(--ink)}
.note .acts a:hover,.note .acts button:hover{background:#FFD166}

/* ---- 工具条 ---- */
.bar{max-width:760px;margin:6px auto 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;padding:8px}
.bar button{font-family:var(--font);font-size:20px;color:var(--ink);background:var(--card);border:3px solid var(--ink);border-radius:var(--wob);padding:2px 16px;box-shadow:3px 3px 0 var(--ink);cursor:pointer;line-height:1.5}
.bar button:hover,.bar button:focus-visible{background:#FFD166;transform:translate(-1px,-2px);outline:none}
.bar button:disabled{opacity:.4;cursor:default;transform:none}
.bar .ind{min-width:110px;text-align:center;font-family:var(--font);font-size:20px}
.bar input[type=range]{flex:1 1 200px;max-width:300px;accent-color:#FF8A5B}
.quick{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:6px 8px 4px}
.quick a{text-decoration:none;padding:2px 14px;border:3px solid var(--ink);border-radius:var(--wob);background:var(--c);color:var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:17px;transition:transform .15s}
.quick a:hover,.quick a:focus-visible{transform:translate(-2px,-3px) rotate(-2deg);outline:none}

/* ---- 目录抽屉 / 视频弹窗 ---- */
dialog.sheet{border:3px solid var(--ink);border-radius:var(--wob2);background:var(--card);color:#3B2F4A;padding:0;max-width:min(920px,94vw);width:100%;box-shadow:10px 12px 0 var(--ink)}
dialog.sheet::backdrop{background:rgba(35,20,60,.6)}
dialog.sheet .in{padding:18px 22px 24px;max-height:82vh;overflow:auto}
dialog.sheet h2{margin:0 0 8px;font-size:34px}
dialog.sheet .x{position:absolute;right:12px;top:10px;font-family:var(--font);font-size:22px;border:3px solid var(--ink);border-radius:var(--wob);background:#FF9AA2;padding:0 14px;cursor:pointer;box-shadow:2px 2px 0 var(--ink);line-height:1.5}
.tocgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px 24px}
.tocgrid h3{margin:0 0 4px;font-size:24px}
.tocgrid a{display:flex;gap:8px;align-items:baseline;text-decoration:none;padding:0 6px;border-radius:8px;font-size:16px}
.tocgrid a .dots{flex:1;border-bottom:2px dotted rgba(59,47,74,.4)}
.tocgrid a:hover{background:color-mix(in srgb,var(--c) 30%,transparent)}
dialog.sheet video{width:100%;border-radius:10px;background:#000;max-height:70vh}

@media (max-width:640px){
  .book{height:min(78vh,780px)}
  body.book-ready .book{width:min(calc(100cqw * .90),calc(100cqh * .84 / 1.3321))!important}
  .bar button{font-size:17px;padding:0 12px}.bar .ind{min-width:80px;font-size:17px}
}

/* ---- 放大查看 ---- */
dialog.zoom{width:min(96vw,1100px);max-width:none;background:transparent;border:0;box-shadow:none;overflow:visible}
dialog.zoom::backdrop{background:rgba(35,20,60,.82);backdrop-filter:blur(3px)}
dialog.zoom figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
dialog.zoom img{max-width:100%;max-height:calc(100dvh - 130px);width:auto;height:auto;background:#fff;border:6px solid #fff;border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.5);animation:zpop .25s cubic-bezier(.3,1.5,.5,1)}
dialog.zoom figcaption{font-family:var(--font);font-size:26px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5)}
dialog.zoom .x{position:absolute;right:0;top:-46px}
@keyframes zpop{from{transform:scale(.88);opacity:0}to{transform:none;opacity:1}}
.art .zoom-btn{position:absolute;right:1.2cqw;bottom:1.2cqw;width:9cqw;height:9cqw;display:grid;place-items:center;font-size:4.6cqw;border:.5cqw solid var(--ink);border-radius:50%;background:#fff;box-shadow:.5cqw .6cqw 0 var(--ink);padding:0;line-height:1}

/* ============ 手机：横滑画卡（book.js initCards）============
   一屏一张纸卡，左右滑切换；位置信息（章节 · 第几幅）只在底栏出现一次 */
body.cards-ready .stage{padding:0}
.mreader{flex:1;min-height:0;position:relative}
.mtrack{height:100%;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.mtrack::-webkit-scrollbar{display:none}
.mcard{--ink:#3B2F4A;--muted:#7A6A8A;flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;color:var(--ink);font-family:var(--font-body);
  display:flex;flex-direction:column;padding:8px 12px 6px;min-width:0}
.mcard a{color:inherit;text-decoration:none}
.mcard button{font-family:inherit;cursor:pointer}
/* 纸面：只有一张纸，没有书脊、纸叠、侧边阴影 */
.mcard.m-work::before,.mcard.m-chap::before{content:"";position:absolute;inset:8px 12px 6px;border-radius:14px;z-index:-1;
  background:var(--papertex) 0 0/256px 256px,color-mix(in srgb,var(--c,#FFD9A0) 10%,#FCF6E6);box-shadow:0 6px 18px -8px rgba(59,36,24,.35),inset 0 0 0 1px rgba(110,75,30,.12)}
.mcard.m-work,.mcard.m-chap{position:relative;isolation:isolate}

/* 作品卡：画占满上部，文字紧跟在下面 */
/* 画和文字是一组，在卡里垂直居中：文字永远紧贴在画下面，横图竖图都不会留出一大块空白 */
.mcard.m-work{container-type:size;justify-content:center}
.m-work .frame2{flex:none;display:flex;justify-content:center;cursor:zoom-in;margin:0 16px}
.m-work .frame2 img{display:block;max-width:100%;max-height:calc(100cqh - 210px);width:auto;height:auto;object-fit:contain;
  background:#fff;border:3px solid var(--ink);border-radius:var(--wob2);padding:5px;box-shadow:3px 4px 0 rgba(59,47,74,.2)}
.mtxt{padding:12px 20px 4px;display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:baseline}
.mtxt h2{margin:0;font-size:22px;line-height:1.25;min-width:0}
.mtxt .mdate{font-size:13px;color:var(--muted);white-space:nowrap}
.mtxt .desc{grid-column:1/-1;margin:6px 0 0;font-size:14.5px;line-height:1.6;color:#5b4a6d;max-height:4.8em;overflow-y:auto}
.mtxt .acts{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.mtxt .acts a,.mtxt .acts button{background:#fff;border:2px solid var(--ink);border-radius:var(--wob);padding:1px 12px;font-size:13.5px;line-height:22px;box-shadow:2px 2px 0 var(--ink);color:var(--ink)}

/* 章节卡 */
.m-chap .mchap-pic{flex:1;min-height:0;margin:12px 14px 0;position:relative;border:3px solid var(--ink);border-radius:var(--wob2);overflow:hidden;background:#fff}
.mchap-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mchap-pic .noart{position:absolute;inset:0;display:grid;place-items:center;font-size:90px}
.mchap-txt{padding:12px 18px 16px;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
.mchap-txt .no{grid-column:1/-1;font-family:var(--font);font-size:14px;color:var(--muted)}
.mchap-txt .icon{width:46px;height:46px;display:grid;place-items:center;font-size:24px;background:var(--c);border:3px solid var(--ink);border-radius:var(--wob);transform:rotate(-6deg)}
.mchap-txt h2{margin:0;font-size:28px;line-height:1.15}
.mchap-txt p{grid-column:1/-1;margin:6px 0 0;font-size:14.5px;line-height:1.55;color:#5b4a6d}

/* 封面 / 扉页 / 封底：整张书页按 3:4 放进卡里 */
.mcard.m-pg{container-type:size;align-items:center;justify-content:center}
.mcard.m-pg>.page{width:min(100cqw,75cqh);height:min(133.34cqw,100cqh);flex:none;border-radius:6px 14px 14px 6px;box-shadow:0 8px 20px -8px rgba(59,36,24,.45)}

@media (max-width:760px){
  /* 底栏：位置文字 + 目录，下面一条可拖的细进度条；手机靠滑动翻，不要 ⏮ ◀ ▶ */
  body.cards-ready .bar{display:grid;grid-template-columns:1fr auto;gap:6px 10px;margin:0;padding:4px 16px 8px;max-width:none}
  body.cards-ready .bar #first,body.cards-ready .bar #prev,body.cards-ready .bar #next{display:none}
  body.cards-ready .bar .ind{min-width:0;text-align:left;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.cards-ready .bar #open-toc{font-size:15px;padding:0 12px;box-shadow:2px 2px 0 var(--ink);border-width:2px}
  body.cards-ready .bar input[type=range]{grid-column:1/-1;width:100%;max-width:none;margin:0;height:18px}
}