/* 全站手机适配引擎的样式。只在 max-width:767px 生效；电脑上和原页面一样。依据《手机适配规则.md》（含第〇节修订）。
   源文件在 W\画布\工具\site\mobile\m-d.css，build_site.py 复制到 site\assets\m-d.css。
   <html class="md" data-mp="slug">（build_site.py 注入）；m-d.js 给每章标 data-m = hero | pin | flow | text | end | custom：
     hero 首屏 1.4 屏 · pin 滑动切换 1 屏 + 每步 0.45 屏 · flow 直接展示 · text 文字章 · end 结尾 1 屏 · custom 引擎不碰 */

.mprog,.mbtn,.mplay,.mviewer,.mdots,.mcode-toggle,.menl,.mmeasure{display:none}

@media (max-width:767px){
html.md{--g:20px;--sh:100vh}
@supports (height:100svh){html.md{--sh:100svh}}
/* 搭版完成前先藏起来，避免闪一下电脑版式；JS 没跑起来 4 秒后也会显示 */
html.md:not(.md-ready) #dc-root{visibility:hidden;animation:mdshow 0s 4s forwards}
@keyframes mdshow{to{visibility:visible}}

/* ---------- 全局：导航、右侧进度栏换成顶栏下 2px 进度线 ---------- */
html.md .sp .dnav{display:none}
html.md .sp .mnav{display:block}
html.md .sp .topnav{padding:0 var(--g)}
html.md .sp .rail,html.md .sp .nxbar{display:none!important}
html.md .mprog{display:block;position:fixed;left:0;top:56px;height:2px;width:100%;z-index:41;background:var(--work,#7cc4ff);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
html.md .mmeasure{display:block;position:absolute;left:-10000px;top:0;visibility:hidden;pointer-events:none}
html.md .mmeasure .mmeas{position:relative!important;inset:auto!important;opacity:1!important;height:auto!important;width:100%!important;transform:none!important}

/* ---------- 舞台与各类章节的长度（单位：屏 = 100svh） ---------- */
html.md .sp .stage{height:var(--sh)}
html.md .sp .stage.wide{container-type:normal}
html.md .sp .stage.wide .kw,html.md .sp .stage.wide .dock,html.md .sp .stage.wide .shade,html.md .sp .stage.wide .topshade,html.md .sp .stage.wide .chap,
html.md .sp .stage.wide .ncard,html.md .sp .stage.wide .ruler,html.md .sp .stage.wide .vcount,html.md .sp .stage.wide .method,html.md .sp .stage.wide .ctag{translate:none}
html.md .sp section[data-m="hero"]{height:calc(var(--sh) * 1.4)!important}
html.md .sp section[data-m="pin"]{height:calc(var(--sh) * var(--len,3))!important}
html.md .sp section[data-m="end"]{height:var(--sh)!important}
html.md .sp section[data-m="flow"],html.md .sp section[data-m="text"]{height:auto!important}
/* 两章之间 96px（直接展示的章顶部自带；后面跟固定章节时在中间补一段） */
html.md .sp section[data-m="flow"],html.md .sp section[data-m="text"]{padding-top:96px}
html.md .sp section[data-m="flow"] + section[data-m="pin"],html.md .sp section[data-m="flow"] + section[data-m="end"],
html.md .sp section[data-m="text"] + section[data-m="end"],html.md .sp section[data-m="text"] + section[data-m="pin"],
html.md .sp section[data-m="flow"] + section[data-m="hero"],html.md .sp .minfo + section[data-m="pin"]{margin-top:96px}

/* ---------- 说明文字（pin 和 flow 共用）：章节标签 12 · 小标题 22 衬线 · 正文 15/1.7 · 信息条 13 ---------- */
html.md .sp .cap .kicker,html.md .sp .mcap .kicker{font-size:12px;letter-spacing:.1em;line-height:1.5}
html.md .sp .cap .kword,html.md .sp .mcap .kword{font-size:22px;line-height:1.3;margin-top:4px}
html.md .sp .cap .kline,html.md .sp .mcap .kline{font-size:15px;line-height:1.7;margin-top:8px;max-width:none}
html.md .sp .cap .fact,html.md .sp .mcap .fact,html.md .sp .minfo .fact{font-size:13px;line-height:1.55;padding-top:8px;margin-top:10px}
html.md .sp .cap .fact small,html.md .sp .mcap .fact small,html.md .sp .minfo .fact small{font-size:12px;letter-spacing:.08em;margin-bottom:1px}
html.md .sp .cap > div + div{margin-top:12px}
html.md .sp .cap,html.md .sp .mcap,html.md .sp .minfo{overflow-wrap:anywhere}
html.md .sp .mcap .kw{position:static;left:auto;right:auto;bottom:auto;width:auto}
html.md .sp .mcap .dock,html.md .sp .minfo .dock{position:static;right:auto;bottom:auto;width:auto;display:flex;flex-direction:column;gap:0}
html.md .sp .mcap .dock{margin-top:12px}
html.md .sp .mcap .dock .dnum{font-size:28px!important;line-height:1.1!important;margin-bottom:6px}
html.md .sp .mcap .dock .fact:first-of-type{margin-top:0}

/* ---------- 首屏 ---------- */
html.md .sp section[data-m="hero"] .chap{display:none}
html.md .sp section[data-m="hero"] .layer video,html.md .sp section[data-m="hero"] .layer img{object-position:var(--focus,50% 50%)}
html.md .sp section[data-m="hero"] .fwrap{position:absolute;inset:0;display:block}
html.md .sp section[data-m="hero"] .fwrap::before,html.md .sp section[data-m="hero"] .fwrap::after{display:none}
html.md .sp section[data-m="hero"] .fwrap.hi .fbox{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
html.md .sp section[data-m="hero"] .topshade{height:140px}
html.md .sp section[data-m="hero"] .shade{height:52%}
html.md .sp section[data-m="hero"] .dock{display:none}
html.md .sp .mfade{position:absolute;left:var(--g);right:var(--g);bottom:40px;z-index:6}
html.md .sp .mfade .kw{position:static;left:auto;right:auto;bottom:auto;width:auto}
html.md .sp .mfade .kicker{font-size:12px;letter-spacing:.06em;line-height:1.5}
html.md .sp .mfade .kline{font-size:15px;line-height:1.7;margin-top:10px}
/* hero:'contain-top'（静态截图做首屏）：整张按原比例放在顶栏下，不按竖屏裁，标题压在底部 */
html.md .sp .mh-contain{background:#040507}
html.md .sp .mh-contain .layer img,html.md .sp .mh-contain .layer video{position:absolute!important;left:0!important;right:auto!important;bottom:auto!important;top:72px!important;width:100%!important;max-width:none!important;height:auto!important;max-height:calc(100% - 72px)!important;margin:0!important;transform:none!important;object-fit:contain;object-position:var(--focus,50% 0)}
html.md .sp .mh-contain .shade{height:38%}
html.md .sp .minfo{padding:48px var(--g) 0}
html.md .sp .minfo .dock{opacity:1!important}
html.md .sp .minfo .fact:first-child{margin-top:0}

/* ---------- 结尾：下一个作品 / 回到首页，1 屏，不固定 ---------- */
html.md .sp section[data-m="end"] .stage{position:relative;height:var(--sh);overflow:hidden;background:#000}
html.md .sp section[data-m="end"] .layer img,html.md .sp section[data-m="end"] .layer video{object-fit:cover;object-position:var(--focus,50% 50%)}
html.md .sp section[data-m="end"] .topshade{height:140px}
html.md .sp section[data-m="end"] .shade{height:56%}
html.md .sp section[data-m="end"] .chap{top:76px;left:var(--g);opacity:1!important;font-size:12px;letter-spacing:.1em;translate:none}
html.md .sp section[data-m="end"] .kw{left:var(--g);right:var(--g);bottom:108px;width:auto;opacity:1!important}
html.md .sp section[data-m="end"] .kicker{font-size:12px;letter-spacing:.06em}
html.md .sp section[data-m="end"] .kline{font-size:15px;line-height:1.7}
html.md .mbtn{display:flex;position:absolute;left:var(--g);right:var(--g);bottom:40px;z-index:7;height:50px;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--work,#7cc4ff);background:rgba(4,5,7,.7);color:var(--work,#7cc4ff);font-size:16px;letter-spacing:.06em}

/* ---------- pin：顶栏 56 · 章节标签 32 · 画面 · 圆点 · 说明区；整体在顶栏以下垂直居中 ---------- */
html.md .sp section[data-m="pin"] .stage{position:sticky;top:0;overflow:hidden;background:#040507}
html.md .sp section[data-m="pin"] .stage > *:not(.mpin):not(.cap):not(.mcap){display:none!important}
/* 说明：先在原位置按“一块一块叠在一起”的样子排好（m-d.js 在这个状态下量最长一条的高度），再被收进 .mcaps */
html.md .sp section[data-m="pin"] .stage > .cap,html.md .sp section[data-m="pin"] .stage > .mcap{position:absolute;left:0;right:0;top:0;display:block;width:auto;box-sizing:border-box;padding:16px var(--g) 0;overflow:visible}
html.md .sp .mpin{position:absolute;inset:0;z-index:2;padding-top:56px;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}
html.md .sp .mpin .chap{position:static;flex:none;height:32px;box-sizing:border-box;display:flex;align-items:center;padding:0 var(--g);font-size:12px;line-height:1;letter-spacing:.08em;opacity:1;translate:none}
html.md .sp .mpin .chap .mcnt{margin-left:auto;font-size:12px;letter-spacing:.08em;color:#8d96a5;font-weight:400}
html.md .sp .mpin .mcnt-orig{display:none}
html.md .sp .mpin .figwrap,html.md .sp .mpin .lbox,html.md .sp .mpin > .mix{position:relative;inset:auto;flex:none;left:auto;right:auto;top:auto;transform:none;width:100%!important;height:var(--pich,56vw)!important;aspect-ratio:auto!important;background:#000;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.md .sp .mpin .figwrap .mix,html.md .sp .mpin .lbox .mix{position:absolute;inset:0;isolation:isolate}
html.md .sp .mpin .mix{isolation:isolate}
html.md .sp .mpin .mstep{position:absolute;inset:0;mix-blend-mode:plus-lighter}
html.md .sp .mpin .mstep > .layer{position:absolute;inset:0;opacity:1!important;mix-blend-mode:normal}
html.md .sp .mpin .mstep.stack{inset:auto;left:0;right:0;top:0;bottom:auto}
html.md .sp .mpin .mstep.stack .mslot{position:relative;width:100%}
html.md .sp .mpin .mstep.stack .mslot > .layer{position:absolute;inset:0;opacity:1!important;mix-blend-mode:normal}
html.md .sp .mpin .layer img,html.md .sp .mpin .layer video{object-fit:contain;object-position:50% 50%}
html.md .sp .mpin .fbox video,html.md .sp .mpin .fbox img{object-fit:cover}
html.md .sp .mpin .fwrap{position:absolute;inset:0;display:block}
html.md .sp .mpin .fwrap::before,html.md .sp .mpin .fwrap::after{display:none}
html.md .sp .mpin .fbox{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
html.md .sp .mlab{display:block;padding:0 var(--g) 4px;font-size:12px;letter-spacing:.1em;color:#a3acba;background:#000}
html.md .sp .mpin .mdots{display:flex;flex:none;height:24px;align-items:center;justify-content:center;gap:6px}
html.md .sp .mpin .mdots i{display:block;width:6px;height:6px;border-radius:3px;background:rgba(231,235,241,.34);transition:width .25s,background .25s}
html.md .sp .mpin .mdots i.on{width:18px;background:var(--work,#7cc4ff)}
html.md .sp .mpin .mcaps{position:relative;flex:none;height:var(--caph,auto)}
html.md .sp .mpin .mcapw{position:absolute;left:0;right:0;top:0}
html.md .sp .mpin .mcapw > .cap,html.md .sp .mpin .mcapw > .mcap{position:static;display:block;width:auto;box-sizing:border-box;padding:16px var(--g) 0;overflow:visible;opacity:1!important}
html.md .sp .mpin .mcapw .kw,html.md .sp .mpin .mcapw .dock{opacity:1!important}
/* 图片层上的“放大”小按钮（点画面是跳下一步，所以放大另给一个入口） */
html.md .sp .menl{display:block;position:absolute;right:10px;bottom:10px;z-index:9;height:30px;padding:0 12px;font:inherit;font-size:12px;letter-spacing:.06em;color:#e7ebf1;background:rgba(4,5,7,.72);border:1px solid rgba(231,235,241,.4);border-radius:999px}

/* ---------- flow：章节名吸在顶栏下，画面和说明按块顺序排开 ---------- */
html.md .sp section[data-m="flow"] .stage{position:static;height:auto;overflow:visible;background:transparent}
html.md .sp section[data-m="flow"] .stage > *:not(.chap):not(.mblk){display:none!important}
html.md .sp section[data-m="flow"] .chap,html.md .sp section[data-m="text"] > .chap-s{position:sticky;top:56px;left:auto;right:auto;z-index:20;margin:0 0 20px;padding:12px var(--g) 10px;font-size:12px;line-height:1.3;letter-spacing:.1em;background:rgba(4,5,7,.94);border-bottom:1px solid rgba(231,235,241,.08);translate:none}
html.md .sp .mblk{margin:0 0 48px;opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
html.md .sp .mblk.in{opacity:1;transform:none}
html.md .sp .mblk:last-child{margin-bottom:0}
html.md .sp .mno{display:block;padding:0 var(--g) 8px;font-size:12px;letter-spacing:.1em;color:#8d96a5}
html.md .sp .mmedia{position:relative;width:100%;aspect-ratio:var(--ar,1.7778);background:#000;overflow:hidden;-webkit-tap-highlight-color:transparent}
html.md .sp .mmedia + .mlab,html.md .sp .mmedia + .mmedia{margin-top:20px}
html.md .sp .mmedia.portrait{width:auto;max-width:100%;max-height:70svh;margin:0 auto}
html.md .sp .mmedia.mhtml{aspect-ratio:auto;height:var(--h,auto);overflow:visible;background:transparent}
html.md .sp .mmedia .layer{position:absolute;inset:0;opacity:1!important;mix-blend-mode:normal}
html.md .sp .mmedia .layer img,html.md .sp .mmedia .layer video{object-fit:cover}
html.md .sp .mmedia .fwrap{position:absolute;inset:0;display:block}
html.md .sp .mmedia .fwrap::before,html.md .sp .mmedia .fwrap::after{display:none}
html.md .sp .mmedia .fbox{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
html.md .sp .mmedia.zoomable{cursor:zoom-in}
html.md .sp .mblk .cap,html.md .sp .mblk .mcap{position:static;display:block;width:auto;opacity:1!important;overflow:visible;padding:20px var(--g) 0}
html.md .sp .mblk .mcap .kw,html.md .sp .mblk .mcap .dock{opacity:1!important}
html.md .sp .mintro .cap,html.md .sp .mintro .mcap{padding-top:0}
/* 代码：默认收起，只留说明和「查看代码 · N 行」；展开后原位显示，12px，长行横向滚动，底部固定「收起」 */
html.md .mcode-toggle{display:flex;align-items:center;justify-content:center;margin:18px var(--g) 0;height:44px;padding:0 18px;font:inherit;font-size:14px;color:var(--work,#7cc4ff);background:none;border:1px solid rgba(124,196,255,.7);border-radius:999px;width:calc(100% - 2 * var(--g))}
html.md .sp .mcodepanel{display:none;margin:18px var(--g) 0}
html.md .sp .mcodeblk.open .mcodepanel{display:block}
html.md .sp .mcodeblk.open .mcode-toggle{display:none}
html.md .sp .mcodepanel figure{margin:0}
html.md .sp .mcodepanel figcaption{margin:0 0 8px;font-size:12px;letter-spacing:.04em;color:#8d96a5;word-break:break-all}
html.md .sp .mcodepanel pre{margin:0;padding:12px 14px;font-size:12px;line-height:1.5;white-space:pre;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;background:#0b0e14;border:1px solid rgba(231,235,241,.14);border-radius:2px;font-family:Consolas,"SF Mono",Menlo,"Noto Sans SC",monospace;color:#c3cad4;tab-size:4}
html.md .sp .mcodepanel .mclose{position:sticky;bottom:16px;z-index:15;display:flex;align-items:center;justify-content:center;margin:14px auto 0;height:40px;padding:0 24px;font:inherit;font-size:14px;color:var(--work,#7cc4ff);background:rgba(4,5,7,.92);border:1px solid var(--work,#7cc4ff);border-radius:999px}

/* ---------- 文字章（结果）：一栏，左右 20px；行内写死的多栏网格由 m-d.js 折成一栏（三个短数字保留三栏） ---------- */
html.md .sp section[data-m="text"]{display:block!important;background:#05070c}
html.md .sp section[data-m="text"] .stage{position:static;height:auto;overflow:visible;background:transparent}
html.md .sp section[data-m="text"] > div:not(.chap-s){padding:0 var(--g) 96px!important;max-width:none!important;width:auto!important;margin:0!important;row-gap:48px}
html.md .sp section[data-m="text"] .rnum{font-size:48px}
html.md .sp section[data-m="text"] .mg3 .rnum + div{font-size:14px;line-height:1.5}
html.md .sp section[data-m="text"] [style*="max-content"]{margin-top:24px!important;column-gap:20px!important;row-gap:20px!important}
html.md .sp section[data-m="text"] [style*="max-content"] > div > div:last-child{font-size:14px;line-height:1.5}
html.md .sp section[data-m="text"] .kicker{font-size:12px;letter-spacing:.1em}
html.md .sp section[data-m="text"] .lst-t{font-size:18px}
html.md .sp section[data-m="text"] li.fact{font-size:14px}
html.md .sp .film img{aspect-ratio:auto!important;height:auto!important}
html.md .sp .mscroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- 视频播放被拦时的封面按钮 ---------- */
html.md .mplay{display:block;position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;z-index:8;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);background:rgba(4,5,7,.55);padding:0}
html.md .mplay::before{content:"";position:absolute;left:25px;top:19px;border-left:19px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}

/* ---------- 点开放大（全屏查看，双指缩放） ---------- */
html.md .mviewer{position:fixed;inset:0;z-index:95;background:#000;touch-action:none;overflow:hidden}
html.md .mviewer.on{display:block}
html.md .mviewer img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;user-select:none;-webkit-user-drag:none}
html.md .mviewer button{position:absolute;right:12px;top:12px;z-index:2;height:44px;padding:0 16px;font:inherit;font-size:14px;color:#e7ebf1;background:rgba(4,5,7,.7);border:1px solid rgba(231,235,241,.4);border-radius:999px}
}

@media (prefers-reduced-motion:reduce){
html.md .sp .mblk{transition:none;opacity:1;transform:none}
}

/* ===== 批 M1：手机：figwrap、cmp、fbx、code（cssmerge 2026-11-07，自动生成） =====
   本批 data-kit 套 → 页：
   m-cmp1: archive,economist,floundering,grading,retrieval,shuttle,stylize
   m-cmp2: retrieval,shuttle,stylize
   m-code1: archive,realtime,retrieval
   m-fbx1: archive,economist,retrieval,stylize
   m-figwrap1: floundering,grading,huangquan,iceland,inverted,photobook,realtime,revelation,shuttle,soap */
@media (max-width:767px){
  html.md .sp:where([data-kit~="m-figwrap1"]) .figwrap{container-type:normal}
  html.md .sp:where([data-kit~="m-fbx1"]) .fbx{top:50%;translate:-50% -50%}
  html.md .sp:where([data-kit~="m-cmp1"]) .cmp-tag{left:8px;top:8px;padding:1px 6px;font-size:12px}
  html.md .sp:where([data-kit~="m-code1"]) .code figcaption{white-space:normal;overflow-wrap:anywhere;font-size:12px}
  html.md .sp:where([data-kit~="m-cmp2"]) .cmp-tag.r{left:auto;right:8px}
}

/* ===== 批 M2：手机：ch-0、hero、kline、chap、hdock、cap、minfo、mpin、section（cssmerge 2026-11-07，自动生成） =====
   本批 data-kit 套 → 页：
   m-cap1: huangquan,inverted,revelation,shuttle
   m-ch-01: darwinism,floundering,shuttle,soap
   m-ch-02: darwinism,floundering,huangquan,iceland,inverted,photobook,realtime,revelation,soap
   m-ch-03: iceland,inverted,photobook,realtime
   m-chap1: darwinism,floundering,huangquan,iceland,inverted,photobook,realtime,shuttle
   m-hdock1: archive,grading,retrieval,stylize
   m-hdock2: darwinism,huangquan,shuttle,soap
   m-hdock3: floundering,iceland,photobook
   m-hero1: darwinism,floundering,huangquan,iceland,inverted,shuttle,soap
   m-kline1: darwinism,floundering,huangquan,iceland,inverted,photobook,realtime,shuttle,soap */
@media (max-width:767px){
  html.md .sp:where([data-kit~="m-hdock1"]) .minfo .hdock{display:flex;flex-direction:column;width:auto;margin-top:0}
  html.md .sp:where([data-kit~="m-ch-01"]) #ch-0{height:auto!important;padding-bottom:64px}
  html.md .sp:where([data-kit~="m-ch-03"]) #ch-0{height:auto!important;padding-bottom:56px}
  html.md .sp:where([data-kit~="m-ch-02"]) #ch-0 .stage{position:static;height:auto;overflow:visible;background:transparent}
  html.md .sp:where([data-kit~="m-chap1"]) #ch-0 .chap,html.md .sp:where([data-kit~="m-chap1"]) #ch-0 .topshade,html.md .sp:where([data-kit~="m-chap1"]) #ch-0 .shade{display:none}
  html.md .sp:where([data-kit~="m-hero1"]) #ch-0 .hero-t{font-size:40px;line-height:1.15}
  html.md .sp:where([data-kit~="m-kline1"]) #ch-0 .kline{font-size:16px;line-height:1.7}
  html.md .sp:where([data-kit~="m-hdock2"]) #ch-0 .hdock{grid-template-columns:1fr;row-gap:10px;margin-top:20px}
  html.md .sp:where([data-kit~="m-hdock3"]) #ch-0 .hdock{grid-template-columns:1fr;row-gap:10px;margin-top:20px;width:auto}
  html.md .sp:where([data-kit~="m-cap1"]) .mpin .mcapw > .mcapx > .cap{position:static;display:block;width:auto;box-sizing:border-box;padding:12px var(--g) 0;overflow:visible;opacity:1!important}
}

/* ===== 批 M3：手机：ov（cssmerge 2026-11-07，自动生成） =====
   本批 data-kit 套 → 页：
   m-ov1: darwinism,floundering,huangquan,inverted,realtime
   m-ov2: floundering,huangquan,iceland
   m-ov3: iceland,inverted,stylize */
@media (max-width:767px){
  html.md .sp:where([data-kit~="m-ov1"]) .ov-i{height:auto!important}
  html.md .sp:where([data-kit~="m-ov3"]) .ov-n{margin-top:4px;font-size:12px;white-space:normal}
  html.md .sp:where([data-kit~="m-ov2"]) .ov-n small{font-size:12px}
}

/* ===== 批 M4：手机：flow（cssmerge 2026-11-07，自动生成） =====
   本批 data-kit 套 → 页：
   m-flow1: darwinism,floundering,iceland,photobook,shuttle
   m-flow2: darwinism,floundering,iceland,shuttle
   m-flow3: economist,retrieval,stylize
   m-flow4: floundering,photobook,shuttle
   m-flow5: floundering,iceland,photobook
   m-flow6: huangquan,inverted,realtime,revelation,soap
   m-flow7: huangquan,revelation,soap
   m-flow8: huangquan,inverted,revelation
   m-flow9: inverted,realtime,soap */
@media (max-width:767px){
  html.md .sp:where([data-kit~="m-flow3"]) .flow{display:flex;flex-direction:column;width:100%}
  html.md .sp:where([data-kit~="m-flow3"]) .flow-r::before,html.md .sp:where([data-kit~="m-flow3"]) .flow-r::after{left:50%;right:auto;width:1px;height:auto}
  html.md .sp:where([data-kit~="m-flow3"]) .flow-r::before{top:0;bottom:50%}
  html.md .sp:where([data-kit~="m-flow3"]) .flow-r::after{top:50%;bottom:0}
  html.md .sp:where([data-kit~="m-flow3"]) .flow-no{grid-row:2}
  html.md .sp:where([data-kit~="m-flow3"]) .flow-t{grid-row:3;font-size:15px}
  html.md .sp:where([data-kit~="m-flow3"]) .flow-k{grid-row:4;font-size:12px}
  html.md .sp:where([data-kit~="m-flow4"]) .flow{grid-template-columns:1fr!important;margin-top:40px!important}
  html.md .sp:where([data-kit~="m-flow1"]) .flow::before{display:none}
  html.md .sp:where([data-kit~="m-flow1"]) .flow-i:last-child{padding-bottom:0}
  html.md .sp:where([data-kit~="m-flow2"]) .flow-d{position:absolute;left:0;top:4px}
  html.md .sp:where([data-kit~="m-flow2"]) .flow-i:not(:last-child)::after{content:"";position:absolute;left:4.5px;top:14px;bottom:-4px;width:1px;background:rgba(231,235,241,.4)}
  html.md .sp:where([data-kit~="m-flow1"]) .flow-n{line-height:18px}
  html.md .sp:where([data-kit~="m-flow5"]) .flow-x{font-size:12px}
  html.md .sp:where([data-kit~="m-flow6"]) .flow{max-width:none}
  html.md .sp:where([data-kit~="m-flow9"]) .flow ol{display:flex;flex-direction:column;gap:12px}
  html.md .sp:where([data-kit~="m-flow7"]) .flow-node{display:grid;grid-template-columns:10px minmax(0,1fr);column-gap:14px;align-items:start;text-align:left}
  html.md .sp:where([data-kit~="m-flow6"]) .flow-axis{grid-column:1;grid-row:1 / span 3;align-self:stretch;display:block;width:10px}
  html.md .sp:where([data-kit~="m-flow9"]) .flow-axis::before{top:0;bottom:-12px;left:4.5px;right:auto;width:1px;height:auto}
  html.md .sp:where([data-kit~="m-flow6"]) .flow-node:first-child .flow-axis::before{top:8px;left:4.5px}
  html.md .sp:where([data-kit~="m-flow6"]) .flow-node:last-child .flow-axis::before{bottom:auto;height:8px}
  html.md .sp:where([data-kit~="m-flow6"]) .flow-dot{margin-top:3px}
  html.md .sp:where([data-kit~="m-flow6"]) .flow-no,html.md .sp:where([data-kit~="m-flow6"]) .flow-name,html.md .sp:where([data-kit~="m-flow6"]) .flow-tool{grid-column:2;padding:0;margin-top:0}
  html.md .sp:where([data-kit~="m-flow6"]) .flow-no{line-height:16px}
  html.md .sp:where([data-kit~="m-flow6"]) .flow-name{margin-top:2px;font-size:15px;line-height:1.4}
  html.md .sp:where([data-kit~="m-flow9"]) .flow-tool{margin-top:2px;font-size:12px}
  html.md .sp:where([data-kit~="m-flow6"]) .flow.thumbs .flow-node{grid-template-columns:10px 34% minmax(0,1fr)}
  html.md .sp:where([data-kit~="m-flow6"]) .flow.thumbs .flow-no,html.md .sp:where([data-kit~="m-flow6"]) .flow.thumbs .flow-name,html.md .sp:where([data-kit~="m-flow6"]) .flow.thumbs .flow-tool{grid-column:3}
  html.md .sp:where([data-kit~="m-flow8"]) .figwrap .flow-stage{padding:0 var(--g);box-sizing:border-box}
  html.md .sp:where([data-kit~="m-flow8"]) .mmedia .flow-stage{position:absolute;inset:0;display:flex;align-items:center;padding:0 var(--g);box-sizing:border-box}
}

/* ===== 批 M5：手机：anno、manno（cssmerge 2026-11-07，自动生成） =====
   本批 data-kit 套 → 页：
   m-anno1: huangquan,inverted,revelation
   m-manno1: huangquan,inverted,revelation
   m-manno2: huangquan,revelation,shuttle
   m-manno3: huangquan,inverted,revelation,shuttle */
@media (max-width:767px){
  html.md .sp:where([data-kit~="m-anno1"]) .figwrap .anno img.anno-img,html.md .sp:where([data-kit~="m-anno1"]) .anno img.anno-img{left:0!important;width:100%!important;height:100%;object-fit:fill}
  html.md .sp:where([data-kit~="m-anno1"]) .anno-svg,html.md .sp:where([data-kit~="m-anno1"]) .anno-lab{display:none}
  html.md .sp:where([data-kit~="m-manno1"]) .manno-num{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;box-sizing:border-box;border-radius:50%;border:1px solid var(--work-line);background:#000;color:var(--work);font-size:12px;line-height:16px;text-align:center;font-variant-numeric:tabular-nums}
  html.md .sp:where([data-kit~="m-manno2"]) .manno-list{list-style:none;margin:0;padding:0 var(--g);box-sizing:border-box;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:6px;font-size:13px;line-height:18px;color:#a3acba}
  html.md .sp:where([data-kit~="m-manno3"]) .manno-list.in-pin{padding-top:14px}
  html.md .sp:where([data-kit~="m-manno3"]) .manno-list.in-flow{padding-top:16px}
  html.md .sp:where([data-kit~="m-manno2"]) .manno-list li{display:flex;align-items:center;gap:8px;min-width:0}
  html.md .sp:where([data-kit~="m-manno2"]) .manno-list i{flex:none;width:18px;height:18px;box-sizing:border-box;border-radius:50%;border:1px solid var(--work-line);color:var(--work);font-style:normal;font-size:12px;line-height:16px;text-align:center;font-variant-numeric:tabular-nums}
}

/* ===== 批 M6：手机：res、bc、rnum（cssmerge 2026-11-07，自动生成） =====
   本批 data-kit 套 → 页：
   m-res1: archive,economist,floundering,grading,iceland,photobook,retrieval,shuttle,stylize
   m-res10: inverted,realtime,soap
   m-res2: archive,economist,retrieval,stylize
   m-res3: archive,economist,retrieval
   m-res4: archive,retrieval,stylize
   m-res5: floundering,iceland,photobook
   m-res6: floundering,grading,photobook
   m-res7: floundering,grading,iceland,photobook
   m-res8: floundering,grading,iceland
   m-res9: huangquan,inverted,revelation,soap */
@media (max-width:767px){
  html.md .sp:where([data-kit~="m-res1"]) .res{padding:0}
  html.md .sp:where([data-kit~="m-res2"]) .res-nums{grid-template-columns:1fr;gap:20px;margin-top:24px}
  html.md .sp:where([data-kit~="m-res3"]) .res-nums .rnum{font-size:40px}
  html.md .sp:where([data-kit~="m-res3"]) .res-nums .rcap{margin-top:6px;font-size:14px;line-height:1.6}
  html.md .sp:where([data-kit~="m-res4"]) .res .flow-i{grid-column:2;grid-row:1 / 6;width:100%;height:auto;margin:5px 0}
  html.md .sp:where([data-kit~="m-res5"]) .res-top{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:14px;row-gap:24px;margin-top:24px}
  html.md .sp:where([data-kit~="m-res6"]) .res-top .rnum{font-size:44px}
  html.md .sp:where([data-kit~="m-res7"]) .res-k{font-size:13px;line-height:1.5;margin-top:6px}
  html.md .sp:where([data-kit~="m-res8"]) .res-top .film{grid-column:1 / -1}
  html.md .sp:where([data-kit~="m-res9"]) .res-nums{column-gap:14px;margin-top:24px}
  html.md .sp:where([data-kit~="m-res10"]) .res-nums small{margin-top:6px;font-size:13px;line-height:1.5}
}