/* 手机端重设计（2026-10-22，docs/PLAN-手机端重设计-落地与降级-2026-10-22.md）
   规则全部收在三个条件里，桌面版（>820px 且有鼠标）不受影响：
   ① (hover:none),(pointer:coarse) 触屏   ② (max-width:820px) 窄屏   ③ html.m-lite 省流 / 低性能档（mobile.js 判档）
   结构改动（横滑、竖排、交错、目录弹层）由 mobile.js 加类名，这里只管样式。 */

/* ── ① 触屏：没有鼠标就不画自绘光标 ── */
@media (hover:none),(pointer:coarse){
  .cursor,#cursor{display:none !important}
}

@media (max-width:820px){
  /* ── 字阶（交接 §3.1）：大标题 40–44，节标题 28，正文 16/1.75，说明 ≥12 ── */
  :root{
    --gutter:20px;
    --fs-hero:42px;--fs-display:44px;--fs-h2:28px;--fs-h2-pre:15px;--fs-kicker:14px;
    --fs-lead:19px;--fs-h3:18px;--fs-num:32px;--fs-body:16px;--fs-card:15px;--fs-cap:13px;
    --gap-section:88px;
  }
  body.cx{line-height:1.75}
  .cx p{overflow-wrap:break-word}

  /* ── 顶部导航：LUDI + 作品/经历/联系，每个都给 44px 高的点按区；音效开关挪进目录弹层 ── */
  .nav{align-items:center;padding-top:6px;padding-bottom:6px}
  .nav .brand,.nav .tab{display:inline-flex;align-items:center;min-height:44px}
  .nav .tabs{gap:4px;align-items:center}
  .nav .tab{padding:0 8px;font-size:14px}
  .nav .tab::after{left:8px;right:8px;width:auto;bottom:9px}
  .nav .brand{padding-right:12px}
  .nav #snd{display:none}

  /* ── 底部胶囊：‹ 上一篇 · 首页 · 目录 · 下一篇 ›，四个 44px 按钮；篇名放进目录弹层 ── */
  .case-capsule{bottom:max(16px, env(safe-area-inset-bottom, 16px));gap:2px;padding:4px;width:auto;max-width:calc(100vw - 24px);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.18), 0 8px 24px rgba(0,0,0,.32)}
  .case-capsule .cc-seg{width:44px;min-width:44px;max-width:44px;height:44px;min-height:44px;flex:0 0 44px;justify-content:center;align-items:center;padding:0;margin:0}
  .case-capsule .cc-name{display:none !important}
  .case-capsule .cc-kicker{font-size:0;gap:0;margin:0;padding:0;display:flex;align-items:center;justify-content:center}
  .case-capsule .cc-kicker svg{width:16px;height:16px;display:block;transform:none !important}
  .case-capsule .cc-home{width:44px;height:44px;flex:0 0 44px;margin:0 1px;padding:0;display:grid;place-items:center;border-radius:50%}
  .case-capsule .cc-home svg{width:16px;height:16px;display:block}
  .m-toc-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;height:44px;padding:0 14px;border:0;border-radius:999px;
    background:rgba(255,255,255,.12);color:#f4f2ef;font:600 13.5px/1 var(--sans,system-ui);letter-spacing:.02em;cursor:pointer;white-space:nowrap;
    transition:background .15s var(--ease-hand),transform .15s var(--ease-hand)}
  .m-toc-btn:active{transform:scale(.95)}
  .m-toc-btn svg{width:16px;height:16px;display:block;transform:translateY(-0.5px)}
  .m-toc-btn .m-toc-n{font:500 12px/1 var(--mono,monospace);color:rgba(244,242,239,.62);display:inline-block}
  .m-toc-btn:focus-visible{outline:2px solid var(--pink,#ff8d9d);outline-offset:2px}

  /* ── 横滑轨（交接 §3.4 横滑）：一屏一张，露出下一张的边，吸附；下方计数 ── */
  .m-rail{display:flex !important;flex-wrap:nowrap !important;grid-template-columns:none !important;gap:12px !important;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--g,20px);
    margin-inline:calc(var(--g,20px) * -1) !important;padding-inline:var(--g,20px) !important;padding-bottom:18px !important;
    width:auto !important;max-width:none !important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .m-rail::-webkit-scrollbar{display:none}
  .m-rail > *{flex:0 0 var(--m-item,84%) !important;width:auto !important;max-width:none !important;min-width:0 !important;
    scroll-snap-align:start;margin:0 !important;transform:none !important;grid-column:auto !important;grid-row:auto !important}
  .m-rail.m-rail-sm > *{--m-item:62%}
  .m-rail.m-rail-xs > *{--m-item:44%}
  .m-rail-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px;
    font:500 12px/1 var(--mono,monospace);letter-spacing:.06em;color:var(--c3,#8a8580)}
  .m-rail-dots{display:flex;gap:6px}
  .m-rail-dots i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.3;transition:opacity .2s,width .2s}
  .m-rail-dots i.on{opacity:1;width:16px;border-radius:3px}
  /* .vw 宽度的容器做横滑时，左右出血到屏幕边 */
  .vw.m-rail{width:auto !important;margin-inline:0 !important}

  /* ── 宽图：流程图 / 解剖图 / 产物树（SVG）按可读字号横向平移查看（过渡方案，竖版重画见方案文档） ── */
  .m-pan{position:relative;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;margin-inline:calc(var(--g,20px) * -1);
    padding:4px var(--g,20px) 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .m-pan::-webkit-scrollbar{display:none}
  .m-pan > svg{display:block;max-width:none !important;height:auto !important}
  .dg-scroll{overflow:visible !important}
  /* 流程图竖版（archify 重画）：出血到屏幕两边，字不小于 12px；点按进灯箱 */
  [data-m-hide]{display:none !important}
  .m-dg{display:block;width:calc(100% + var(--g,20px) * 2);margin:0 calc(var(--g,20px) * -1);padding:0;border:0;background:none;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
  .m-dg img{display:block;width:100%;height:auto;margin:0 auto}
  .m-dg-on.dg-scroll, .m-dg-on{overflow:visible !important;margin-top:32px !important}
  /* 裁焦点：窗口固定宽高比，焦点框由 mobile.js 换算成百分比；点开看整张 */
  .m-fc{position:relative !important;display:block !important;overflow:hidden !important;width:100% !important;height:auto !important;min-height:0 !important;padding:0 !important;border:0;border-radius:10px;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
  .m-fc > img, .m-fc-s > img{position:absolute !important;left:var(--fl) !important;top:var(--ft) !important;width:var(--fw) !important;max-width:none !important;height:var(--fh) !important;max-height:none !important;object-fit:fill !important;aspect-ratio:auto !important;margin:0 !important;transform:none !important}
  .m-fc-s{position:absolute;overflow:hidden;border-radius:4px}
  .m-fc-tag{position:absolute;right:8px;bottom:8px;padding:2px 8px;border-radius:6px;font:500 12px/1.5 system-ui,sans-serif;font-style:normal;color:#fff;background:rgba(17,18,20,.62);pointer-events:none}
  .tn-row{grid-template-columns:minmax(0,1fr) !important;grid-template-areas:"h" "o" "n" !important;gap:12px !important;padding:20px !important}
  .tn figcaption{margin-top:8px !important}
  .an-legend.m-an{border-top:0 !important;margin-inline:0 !important;padding:16px 16px 18px !important;scroll-padding-inline:16px}
  .an-legend.m-an > *{--m-item:88%}
  .an-legend.m-an + .m-rail-bar{padding:0 16px 16px}
  .an-bar{flex-wrap:wrap}
  .an-ghost,.an-sw{white-space:nowrap}
  .an-legend.m-an > li{display:grid !important;grid-template-columns:20px minmax(0,1fr);gap:12px;align-content:start;padding:0 0 4px !important;border:0 !important;background:none !important;box-shadow:none !important}
  .an-legend.m-an > li > .m-fc{grid-column:1 / -1}
  .an-legend.m-an .an-more{display:block !important;margin:8px 0 0;padding-left:1.1em;list-style:disc}
  .an-legend.m-an .an-more li{margin-top:4px;font-size:14px;line-height:1.6;color:var(--c2)}
  .m-pan-bar{display:flex;align-items:center;gap:10px;margin-top:6px;font:500 12px/1.4 var(--mono,monospace);letter-spacing:.04em;color:var(--c3,#8a8580)}
  .m-pan-bar i{flex:1;height:3px;border-radius:2px;background:color-mix(in srgb,currentColor 22%,transparent);position:relative;overflow:hidden}
  .m-pan-bar i::after{content:"";position:absolute;top:0;bottom:0;left:var(--l,0%);width:var(--w,30%);border-radius:2px;background:currentColor}

  /* ── 展开细节（交接 §3.5）：内容仍在页面里，默认收起，点开即看；?fold=off 关闭 ── */
  .m-fold:not(.is-open){display:none !important}
  .m-more{display:flex;align-items:center;justify-content:space-between;gap:12px;width:calc(100% - var(--g,20px) * 2);max-width:var(--w,1240px);
    min-height:48px;margin:20px auto 0;padding:12px 18px;border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:14px;
    background:color-mix(in srgb,currentColor 4%,transparent);color:inherit;font:600 15px/1.4 var(--sans,system-ui);text-align:left;cursor:pointer}
  .m-more small{display:block;font-weight:400;font-size:13px;opacity:.65;margin-top:2px}
  .m-more::after{content:"";flex:none;width:9px;height:9px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .25s}
  .m-more[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-3px)}
  .vw .m-more,.m-more.m-in{width:100%}

  /* ── 并排改上下：结论/文字在前，图在后 ── */
  .m-stack{display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:24px !important;grid-template-columns:none !important}
  .m-stack > *{width:auto !important;max-width:100% !important;min-width:0 !important;grid-column:auto !important;grid-row:auto !important}

  /* ── 运营后台 §走查：截图插回每一步下面（mobile.js 复制），右侧钉住舞台隐藏 ── */
  .walk.m-walk{display:block !important}
  .walk.m-walk .walk-stage{display:none !important}
  .walk.m-walk .walk-steps li{min-height:0 !important;margin-top:0 !important}
  .walk.m-walk .walk-steps li + li{margin-top:36px !important}
  .walk.m-walk .walk-steps li b,.walk.m-walk .walk-steps li > span:last-child{color:var(--c1) !important}
  .m-walk-shot{grid-column:1/-1;margin:14px 0 0}
  .m-walk-shot .image-zoom{display:block;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#fff;border:0;padding:0;
    box-shadow:0 0 0 1px var(--card-line,rgba(0,0,0,.08)),0 6px 14px rgba(40,16,18,.1)}
  .m-walk-shot img{width:100%;height:100%;object-fit:cover;object-position:left top}
  /* 蓝图：动画舞台放上面，步骤在下 */
  .bp.m-stack .bp-stage-wrap{order:-1}

  /* ── 封面三窗：中间主窗口在前，两侧窗口跟在后面横滑 ── */
  .cv.m-rail{position:relative;margin-inline:0 !important;scroll-padding-inline:20px}
  .cv.m-rail .cv-item{position:relative !important;display:block !important;inset:auto !important;top:auto !important;left:auto !important;right:auto !important;--py:0px}
  .cv.m-rail .cv-c{order:-1}
  .cv.m-rail .cv-l .win,.cv.m-rail .cv-r .win{filter:none}
  .cv.m-rail .cv-l .win::after,.cv.m-rail .cv-r .win::after{display:none}

  /* ── 真实网页：手机上提示用电脑打开 ── */
  .open-proto{display:inline-flex !important}

  /* ── 阅读辅助：长段落、表格不出界 ── */
  .cx table{display:block;max-width:100%;overflow-x:auto}

  /* ── 玻璃顶底条：手机上更矮，减少大半径实时模糊的面积 ── */
  html[data-glass="trial"] .blur-band{height:64px}
}

/* ── 目录弹层（原生 <dialog>，从底部弹出） ── */
.m-sheet{position:fixed;inset:auto 0 0 0;width:100%;max-width:560px;max-height:min(78vh,640px);margin:0 auto;padding:0;border:0;border-radius:22px 22px 0 0;
  background:#17110f;color:#f4f2ef;box-shadow:0 -12px 40px rgba(0,0,0,.3);overflow:auto;overscroll-behavior:contain;
  padding-bottom:env(safe-area-inset-bottom,0px)}
.m-sheet::backdrop{background:rgba(12,10,9,.5)}
.m-sheet[open]{animation:mSheetIn .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes mSheetIn{from{transform:translateY(40px);opacity:0}}
.m-sheet-h{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 6px 22px;background:inherit;z-index:1}
.m-sheet-h::before{content:"";position:absolute;left:50%;top:6px;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:rgba(255,255,255,.22)}
.m-sheet-h b{font:600 13px/1 var(--mono,monospace);letter-spacing:.12em;color:rgba(244,242,239,.6);padding-top:12px}
.m-sheet-x{width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:inherit;font-size:24px;line-height:1;cursor:pointer}
.m-sheet ol{list-style:none;margin:0;padding:0 10px}
.m-sheet ol a{display:flex;align-items:center;gap:14px;min-height:48px;padding:6px 12px;border-radius:12px;color:inherit;text-decoration:none;font-size:16px;line-height:1.35}
.m-sheet ol a span{flex:none;width:24px;font:500 12px/1 var(--mono,monospace);color:rgba(244,242,239,.5)}
.m-sheet ol a.on{background:rgba(255,255,255,.1)}
.m-sheet ol a.on span{color:var(--pink,#ff8d9d)}
.m-sheet-sub{margin:12px 22px 4px;font:500 12px/1 var(--mono,monospace);letter-spacing:.1em;color:rgba(244,242,239,.45)}
.m-sheet-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 20px}
.m-sheet-nav a{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:56px;padding:8px 14px;border-radius:12px;background:rgba(255,255,255,.07);color:inherit;text-decoration:none;font-size:15px;line-height:1.3}
.m-sheet-nav a small{font:500 12px/1 var(--mono,monospace);color:rgba(244,242,239,.5)}
.m-sheet-nav a:last-child{text-align:right}
.m-sheet-opts{display:grid;gap:2px;padding:10px 10px 18px;margin-top:10px;border-top:1px solid rgba(255,255,255,.08)}
.m-sw{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:6px 12px;border:0;border-radius:12px;background:transparent;color:inherit;font:inherit;font-size:15px;text-align:left;cursor:pointer;width:100%}
.m-sw small{display:block;font-size:12px;color:rgba(244,242,239,.5);margin-top:2px}
.m-sw i{flex:none;position:relative;width:44px;height:26px;border-radius:13px;background:rgba(255,255,255,.18);transition:background .2s}
.m-sw i::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}
.m-sw[aria-checked="true"] i{background:var(--red-hi,#D2606F)}
.m-sw[aria-checked="true"] i::after{transform:translateX(18px)}
.m-sheet a:focus-visible,.m-sheet button:focus-visible{outline:2px solid var(--pink,#ff8d9d);outline-offset:-2px}

/* ── 「建议用电脑打开」提示（真实网页） ── */
.m-ask{width:min(360px,calc(100vw - 40px));padding:24px 22px 18px;border:0;border-radius:20px;background:#fff;color:#111214;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.m-ask::backdrop{background:rgba(12,10,9,.5)}
.m-ask h3{margin:0 0 8px;font-size:18px;line-height:1.4}
.m-ask p{margin:0 0 18px;font-size:15px;line-height:1.7;color:#55504b}
.m-ask .m-ask-btns{display:grid;gap:8px}
.m-ask a,.m-ask button{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:12px;border:0;font:600 15px/1 var(--sans,system-ui);text-decoration:none;cursor:pointer}
.m-ask .m-go{background:#111214;color:#fff}
.m-ask .m-copy{background:#f1eeea;color:#111214}
.m-ask .m-no{background:transparent;color:#8a8580;font-weight:500}

/* ── 灯箱：手机上图铺满宽，点图切换「原尺寸 + 平移」，双指缩放照常可用 ── */
@media (max-width:820px){
  .lightbox{padding:60px 0 28px}
  .lightbox img{max-width:100%;border-radius:0}
  .lightbox.m-zoom{overflow:auto;justify-content:flex-start;align-items:flex-start;overscroll-behavior:contain}
  .lightbox.m-zoom img{max-width:none;max-height:none;width:var(--m-zw,250%);cursor:zoom-out}
  .lightbox.m-zoom .lightbox-caption{display:none}
  .lightbox-caption{padding:0 20px}
  .lightbox-caption::after{content:"  ·  点图放大，可拖动";color:rgba(255,255,255,.45)}
}

/* ── ③ 省流 / 低性能档：去掉一切持续动画、实时模糊和大面积混色；内容一张不少 ── */
html.m-lite *,html.m-lite *::before,html.m-lite *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;transition-delay:0s !important;scroll-behavior:auto !important}
html.m-lite .blur-band i{display:none !important}
html.m-lite[data-glass="trial"] .blur-band{background:linear-gradient(var(--edge-direction,to top),transparent,color-mix(in srgb,var(--bg,#fff) 82%,transparent))}
html.m-lite[data-glass="trial"] .blur-band.dark{background:linear-gradient(var(--edge-direction,to top),transparent,color-mix(in srgb,var(--bg,var(--dark,#1A1514)) 82%,transparent))}
html.m-lite *,html.m-lite *::before{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}   /* 实时模糊对中低端机最贵：省流档一律关掉 */
html.m-lite .lightbox::backdrop,html.m-lite .m-sheet::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}
html.m-lite video:not([data-m-ok]){background:#111}
html.m-lite .m-lite-note{display:block}
.m-lite-note{display:none}

/* ── 首页（交接 §4）：联系区 ── */
@media (hover:none),(pointer:coarse){
  /* 二维码卡以整排图标为基准居中，不再贴着单个图标出屏；触屏的 :hover 粘滞不再位移图标 */
  .home .f-pills{position:relative}
  .home .f-pill,.home .f-pill:hover,.home .f-pill:active{position:static;transform:none}
  .home .f-pill .f-card.has-qr{left:50%;right:auto;transform:translateX(-50%) translateY(8px) rotate(2deg)}
  .home .f-pill.open .f-card.has-qr{transform:translateX(-50%) translateY(0) rotate(-2deg)}
  .m-handles{flex-basis:100%;margin:6px 0 0;font:500 12px/1.8 var(--mono,monospace);letter-spacing:.04em;color:var(--t3,#8a8580)}
}
@media (max-width:600px){
  /* 移动端联系排：小屏采用 1+5 结构（第一行邮箱居中，第二行 5 个社交图标整齐并列，避免单标签孤立落单） */
  .home .f-pills{display:grid;grid-template-columns:repeat(5, 46px);justify-content:center;gap:10px}
  .home .f-pills .f-mail{grid-column:1 / -1;justify-self:center;width:auto}
  .home .f-pills .f-pill:not(.f-mail){padding:0;width:46px;min-width:46px}
  .home .f-pills .m-handles{grid-column:1 / -1;text-align:center}
}
@media (max-width:820px){
  .home .lab-entry{min-height:48px}
  .m-sw b{font-weight:400;opacity:.6}
  /* m-pan 不参与父级最小宽度计算（否则网格被 SVG 撑宽） */
  .m-pan{contain:inline-size;width:calc(100% + var(--g,20px) * 2);box-sizing:border-box}
  /* Lab：「pick one & play」手绘提示放回引言下面；手绘圈收进屏幕 */
  .lab .lab-hint{display:flex;position:static;justify-content:flex-end;margin:12px 4px 0 auto;width:max-content}
  .lab .lab-hint .d-arrow{width:64px;height:48px;transform:scaleX(-1) rotate(-20deg)}
  .lab .d-ring{left:-4%;width:108%}
  /* 品牌页拆解：不钉住，一屏 + 滑杆逐帧 */
  .bd-x.m-x{height:auto !important;padding:72px 0 !important}
  .bd-x.m-x .bd-x-stage{position:relative;top:auto;height:auto;gap:16px}
  .bd-x.m-x .bd-x-frames{width:calc(100% - var(--g,20px) * 2);border-radius:16px}
  .m-x-ctl{display:flex;align-items:center;gap:8px;width:calc(100% - var(--g,20px) * 2)}
  .m-x-ctl input{flex:1;height:44px;accent-color:var(--red,#AC4050)}
  .m-x-b{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(0,0,0,.14);background:#fff;color:inherit;font-size:22px;line-height:1;cursor:pointer}
}
@media (max-width:820px){
  /* 左文右舞台（NAS 自动备份等）：舞台仍在上方钉住，每一步的滚动距离从 60vh 缩到 42vh */
  .lr-step{min-height:42vh}
  .m-group{display:grid;gap:16px}
}
@media (max-width:820px){
  /* 点按区补到 44px（交接 §1）：对照页签、状态小标签、播放控制、标注开关、外链 */
  .cx [role="tab"],.cx .chips button[data-s]{min-height:44px}
  .cx .bp-btn{min-height:44px;min-width:64px}
  .cx .proj-link{display:inline-flex;align-items:center;min-height:44px}
  .cx .cv-play,.cx .cv-snd{width:44px;height:44px}
  .cx .an-ghost,.cx .an-sw{min-height:44px}
  .cx .evo-nav button,.cx [aria-label="上一版"],.cx [aria-label="下一版"]{min-width:44px;min-height:44px}
}
@media (max-width:820px){
  /* 复盘两张卡（main@6b3c4ca 每条加了小标题、变长）：卡内边距和序号列收窄，正文多 40px 宽 */
  .cx .rev{margin-top:40px;gap:12px}
  .cx .rev > div{border-radius:22px;padding:24px 20px 20px}
  .cx .rev ol{margin-top:14px;gap:12px}
  .cx .rev li{grid-template-columns:24px 1fr;gap:10px;line-height:1.7}
  .cx .rev .no{width:24px;height:24px;margin-top:1px}
  /* 项目状态卡（main@8c5f808 软件、验证两条变长）：内边距和复盘卡一致，正文宽 +20px */
  .cx .facts{border-radius:22px;padding:22px 20px}
  .cx .facts dl{gap:14px}
  .cx .facts dd{line-height:1.7}
  /* 多行说明小字（AI 一致性专项下面那段）居中读起来跳行，改左对齐 */
  .cx .metrics + .note{text-align:left;text-wrap:pretty}
}
@media (max-width:820px){
  /* 404（main 10-23 重做）：英文说明不小于 12px，「回到首页」点按区补到 44px */
  .nf-body .nf-desc-en{font-size:12px}
  .nf-body .nf-back{display:inline-flex;align-items:center;min-height:44px;padding:0 12px}
}