/* =========================================================
   LTC 案例页 · 展示版式参考「一页一屏」的作品集排版：
   统一章节头（图标 + 粗黑标题 + 英文副题）、左文右图、虚线引线标注、样机呈现
   token 取自 ETP design-tokens（brand / gray / 语义色 / 圆角 / 阴影）
   ========================================================= */
@font-face{font-family:"Bebas";src:url(assets/fonts/bebas-neue.woff2) format("woff2");font-display:swap}
@font-face{font-family:"PMZD";src:url(assets/fonts/pmzd-sub.woff2) format("woff2");font-display:swap}

:root{
  --gray-00:#FFFFFF;--gray-10:#F5F7FA;--gray-20:#F0F2F5;--gray-30:#DADCE0;--gray-40:#BDC1C6;
  --gray-50:#80868B;--gray-60:#5F6368;--gray-70:#3C4043;--gray-80:#202124;--gray-90:#171717;
  --brand-05:#F0F4FE;--brand-10:#E8EFFE;--brand-20:#D0DFFD;--brand-30:#A3BFFB;--brand-40:#769FF8;
  --brand-50:#5486F6;--brand-60:#3673F5;--brand-70:#1A5EE8;--brand-80:#1552D0;--brand-90:#0C3CA0;
  --green-10:#F0FCE3;--green-50:#52C41A;--green-60:#389E0D;
  --orange-10:#FFF7E6;--orange-20:#FFE7BA;--orange-60:#FA8C16;
  --red-10:#FFF1F0;--red-20:#FFCCC7;--red-50:#FF4D4F;--red-60:#F5222D;
  --cyan-50:#36CFC9;--yellow-50:#FAAD14;--purple-50:#9254DE;

  --bg:#FFFFFF;--card:var(--gray-00);--tint:#F5F8FE;
  --text-1:var(--gray-90);--text-2:var(--gray-60);--text-3:var(--gray-50);--text-en:#B3BFD4;
  --ink:#10204A;
  --line:rgba(0,0,0,.06);--line-strong:rgba(0,0,0,.145);--line-b:rgba(54,115,245,.16);
  --brand:var(--brand-60);

  --r-sm:4px;--r-xs:6px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-2xl:24px;
  --sh-xs:0 1px 2px rgba(0,0,0,.05);--sh-sm:0 2px 4px rgba(0,0,0,.05);
  --sh-md:0 4px 8px rgba(0,0,0,.10);--sh-lg:0 8px 16px rgba(0,0,0,.10);--sh-xl:0 12px 24px rgba(0,0,0,.15);
  --sh-float:0 24px 60px -12px rgba(23,40,92,.22),0 2px 6px rgba(23,40,92,.06);
  --sh-soft:0 24px 48px -24px rgba(26,70,180,.28);

  --sans:"PingFang SC","Helvetica Neue",Arial,"Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",sans-serif;
  --black:"Noto Sans SC",var(--sans);
  --en:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --num:"Bebas","Arial Narrow",sans-serif;
  --brandfont:"PMZD",var(--sans);
  --mono:"SF Mono",Consolas,Menlo,monospace;

  --wrap:1200px;--gut:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --nav-h:84px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text-1);font:14px/22px var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.cursor{--cursor:var(--brand)}   /* 共用光标（cursor.css）改用 ETP 品牌蓝 */
figure{margin:0}
/* 规范：加粗一律 600，不用浏览器默认的 700 */
b,strong,h4,h5{font-weight:600}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.wrap{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
.num{font-family:var(--num);font-weight:400;letter-spacing:.01em}
.pm{font-family:var(--brandfont);font-weight:400}
svg.i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[data-rv]{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0)*80ms)}
[data-rv].in{opacity:1;transform:none}

/* ---------------- 顶栏 ---------------- */
/* 与作品集首页 / 其他案例页同款胶囊导航（取首页「白色板块上」那档配色，本页全为浅底）：
   页面顶部透明；下滚后出现磨砂玻璃胶囊；高光块在各项之间弹性滑动，悬停跟随、离开回到当前章节 */
.top{--n-ink:#0A0A0C;--n-spring:cubic-bezier(.34,1.56,.64,1);--n-out:cubic-bezier(.22,1,.36,1);
  position:sticky;top:0;z-index:50;height:var(--nav-h);padding:18px 0;margin-bottom:calc(var(--nav-h) * -1);pointer-events:none}
.top__in{position:relative;isolation:isolate;pointer-events:auto;height:100%;display:grid;grid-template-columns:1fr minmax(0,auto) 1fr;align-items:center;gap:16px;
  width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto;padding:0 8px;border-radius:999px;color:var(--n-ink);
  background:transparent;box-shadow:none;transition:background .5s var(--n-out),box-shadow .5s var(--n-out),backdrop-filter .5s var(--n-out)}
.top__in::before{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .5s var(--n-out);
  background:radial-gradient(120% 90% at 50% -30%,rgba(255,255,255,.9),rgba(255,255,255,0) 55%),linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,0) 18%,rgba(255,255,255,0) 82%,rgba(255,255,255,.5))}
.top.is-scrolled .top__in{background:rgba(255,255,255,.45);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(10,10,12,.06),0 1px 0 rgba(255,255,255,.6),0 20px 60px rgba(10,10,12,.12),0 2px 10px rgba(10,10,12,.06)}
.top.is-scrolled .top__in::before{opacity:1}
/* 返回主页：无描边胶囊，尺寸与悬停底色同导航项 */
.top__back{justify-self:start;display:inline-flex;align-items:center;gap:6px;padding:9px 14px 9px 12px;border-radius:999px;color:var(--n-ink);font-size:13px;font-weight:500;line-height:1;white-space:nowrap;transition:background .25s var(--n-out),color .25s var(--n-out)}
.top__back svg{width:14px;height:14px;flex:none}
.top__back:hover{background:rgba(10,10,12,.07)}
.top__back:active{transform:scale(.97)}
.top__nav{position:relative;min-width:0;overflow-x:auto;scrollbar-width:none}
.top__nav::-webkit-scrollbar{display:none}
.top__nav ul{position:relative;display:flex;gap:4px;margin:0;padding:0;list-style:none}
.top__nav li{position:relative;z-index:1}
.top__nav a{display:flex;align-items:center;padding:9px 14px;border-radius:999px;color:var(--n-ink);font-size:13px;font-weight:500;line-height:1;white-space:nowrap;transition:color .25s var(--n-out)}
@media (pointer:coarse){.top__nav a{padding:13px 14px}}
.top__nav a.is-on{color:#fff}
.top__nav ul.is-hovering a.is-on{color:var(--n-ink)}
.top__nav a:focus-visible,.top__back:focus-visible{outline:2px solid var(--n-ink);outline-offset:2px;border-radius:999px}
/* 高光块：当前章节为实心黑，悬停其他项时为浅灰并跟随鼠标 */
.top__nav li.top__blob{position:absolute;z-index:0;left:0;top:0;height:100%;width:0;border-radius:999px;background:rgba(10,10,12,.07);opacity:0;pointer-events:none;
  transition:transform .55s var(--n-spring),width .55s var(--n-spring),opacity .3s,background .3s}
.top__nav li.top__blob.is-solid{background:var(--n-ink)}
.top__nav li.top__blob.is-visible{opacity:1}
.top__nav li.top__blob.no-anim{transition:none}

/* ---------------- 版式基元：一屏一节 ---------------- */
section{position:relative}
.sl{padding:clamp(80px,9vw,140px) 0;background:linear-gradient(180deg,#EEF4FF 0,rgba(255,255,255,0) 280px)}
/* 背景竖向栅格线：对齐内容宽度，6 等分 */
.sl::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:min(var(--wrap),100% - var(--gut)*2);transform:translateX(-50%);pointer-events:none;
  background-image:linear-gradient(90deg,var(--line-b) 1px,transparent 1px);background-size:calc((100% - 1px) / 6) 100%;opacity:.45;
  -webkit-mask-image:repeating-linear-gradient(180deg,#000 0 6px,transparent 6px 12px);mask-image:repeating-linear-gradient(180deg,#000 0 6px,transparent 6px 12px)}
.sl > .wrap{position:relative}

/* 章节头：图标 + 粗黑标题 + 英文副题 + 右上品牌标 */
.sh{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:24px}
.sh h2{display:flex;align-items:center;gap:12px;margin:0;font-family:var(--black);font-weight:900;font-size:clamp(28px,3.2vw,40px);line-height:1.2;letter-spacing:.02em;color:var(--ink)}
.sh__ic{width:34px;height:22px;flex:none}
.sh > p{grid-column:1;margin:8px 0 0 46px;font-family:var(--en);font-style:italic;font-size:clamp(13px,1.2vw,16px);letter-spacing:.14em;text-transform:uppercase;color:var(--text-en)}
.sh__tag{grid-column:2;grid-row:1;display:flex;align-items:center;gap:6px;margin-top:10px;font-family:var(--en);font-size:11px;letter-spacing:.08em;color:var(--text-3);white-space:nowrap}
.sh__tag i{width:8px;height:8px;border-radius:50%;background:var(--brand)}
.sh__tag i + i{margin-left:-3px;background:var(--brand-90)}
.sh--sub{margin-top:clamp(96px,11vw,168px)}
.sh + .sh--sub{margin-top:clamp(32px,4vw,48px)}
.sh--sub h2{font-size:clamp(24px,2.6vw,32px)}
.sh--sub > p{margin-left:0}

.t3{margin:0;font-size:clamp(22px,2.3vw,30px);line-height:1.35;font-weight:600;color:var(--ink)}
.t3 em{font-style:normal;color:var(--brand)}
.p{margin:16px 0 0;max-width:560px;font-size:14px;line-height:26px;color:var(--text-2)}
.p strong{color:var(--text-1)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 80px;align-items:end;margin-top:clamp(40px,5vw,64px)}
.two--vis{align-items:center;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.two > .p{margin:0}
/* 标题 + 一段说明、下方紧跟图示：上下排，阅读路径直线向下进入图示 */
.intro{max-width:760px;margin-top:clamp(40px,5vw,64px)}
.intro .p{max-width:none;text-wrap:pretty}
/* 加粗的业务特征整体换行，不在词组中间断开 */
.intro .p strong{white-space:nowrap}
.intro .p + .p{margin-top:6px}
.two--stack{grid-template-columns:minmax(0,1fr);gap:12px}
.two--stack > .p{max-width:none}

/* 小圆点要点：参考稿的「• 标题 + 两行说明」 */
.pts{margin:0;padding:0;list-style:none}
.pts li{position:relative;padding-left:16px}
.pts li + li{margin-top:24px}
.pts li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px var(--brand-10)}
.pts b{display:block;font-size:14px;line-height:22px;font-weight:600;color:var(--ink)}
.pts p{margin:6px 0 0;font-size:14px;line-height:24px;color:var(--text-2)}
.pts--row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;margin-top:36px}
.pts--row li + li,.pts--3 li + li{margin-top:0}

/* ---------------- 封面 ---------------- */
.cover{position:relative;overflow:hidden;padding:0 0 clamp(40px,5vw,64px);background:
  radial-gradient(50% 60% at 78% 36%,rgba(118,159,248,.30),transparent 70%),
  radial-gradient(40% 40% at 8% 90%,rgba(54,207,201,.10),transparent 70%),
  linear-gradient(180deg,#F3F7FF 0,#E8F0FE 72%,#fff 100%)}
.cover::before{content:"";position:absolute;right:-8%;top:-20%;width:56%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,255,255,0) 65%);pointer-events:none}
/* 顶栏浮在封面之上（负 margin），封面顶部补回顶栏高度 */
.cover__stage{position:relative;overflow:hidden;padding:calc(var(--nav-h) + clamp(24px,3vw,48px)) 0 clamp(56px,6vw,110px)}
.cover__grid{position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:0 24px;align-items:center;min-height:clamp(520px,calc(100vh - var(--nav-h) - 220px),640px)}
.cover__txt{position:relative;z-index:2;align-self:start;padding-top:calc(clamp(32px,5vw,80px) - 32px)}
.cover__title{white-space:nowrap}
.cover__brand{display:flex;align-items:center;gap:10px;margin:-20px 0 0;font-size:16px;font-weight:600;color:var(--ink)}
.cover__brand img{width:32px;height:32px;border-radius:7px}
.cover__title{margin:52px 0 0;font-size:clamp(40px,4.4vw,76px);line-height:1.15;font-weight:700;letter-spacing:.01em;color:var(--ink)}
.cover__title em,.cover__title span{display:block}
.cover__title em{font-style:normal;font-family:var(--en);font-weight:600;background:linear-gradient(90deg,var(--brand-70),var(--brand-40));-webkit-background-clip:text;background-clip:text;color:transparent}
.cover__cn{margin:14px 0 0;font-family:var(--en);font-size:14px;font-weight:500;letter-spacing:.16em;color:var(--brand)}
.cover__desc{margin:20px 0 0;max-width:460px;font-size:14px;line-height:26px;color:var(--text-2)}
.cover__dev{position:relative}
/* 底纹横跨内容区 1200：字号按容器宽度定（Bebas 下这串字宽 ≈ 4.618 × 字号，末尾字距溢出不可见） */
.cover__grid{container-type:inline-size}
.cover__ghost{position:absolute;left:0;bottom:calc(-.3em - 8px);z-index:0;white-space:nowrap;font-family:var(--num);font-weight:400;font-size:calc(100cqw / 4.618);line-height:.85;letter-spacing:.04em;color:transparent;-webkit-text-stroke:1px rgba(54,115,245,.2);pointer-events:none;user-select:none}
.imac{position:relative;z-index:1;width:140%;margin-left:-30%}
.imac__scr{position:absolute;left:0;top:0;width:1280px;height:800px;overflow:hidden;background:#fff;transform-origin:0 0;transform:scale(var(--k,.6)) matrix3d(0.5115358,-0.023202354,0,-6.1554804e-05,-0.15602974,0.73708177,0,-2.1694447e-05,0,0,1,0,715.15802,96.266016,0,1)}
.imac__scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transition:opacity 1s ease}
.imac__scr img.on{opacity:1}
.imac__frame{position:relative;z-index:1;width:100%;height:auto;pointer-events:none}

/* ---------------- 目录 ---------------- */
.sl--toc{padding-top:clamp(64px,7vw,104px)}
/* 流程甘特：8 个流程节点做横轴（示意，不表示时间），横条覆盖 --a 到 --b 的网格线 */
.gt{--gt-cols:repeat(8,minmax(0,1fr));position:relative;margin-top:48px}
.gt__axis{display:grid;grid-template-columns:var(--gt-cols);margin:0;padding:0 0 20px;list-style:none}
.gt__axis li{position:relative;text-align:center;font-size:14px;line-height:22px;font-weight:600;color:var(--ink);white-space:nowrap}
/* 节点之间的箭头：从本格文字右侧到下一格文字左侧 */
.gt__axis li:not(:last-child)::after{content:"";position:absolute;top:50%;left:calc(50% + 40px);right:calc(-50% + 40px);border-top:1px solid var(--brand-30)}
.gt__axis li:not(:last-child)::before{content:"";position:absolute;top:calc(50% - 3px);right:calc(-50% + 40px);border:3px solid transparent;border-left:5px solid var(--brand-30);border-right:0}
.gt__guides{position:absolute;left:0;right:0;top:42px;bottom:40px;display:grid;grid-template-columns:var(--gt-cols);border-right:1px solid var(--line-b);pointer-events:none}
.gt__guides s{border-left:1px solid var(--line-b)}
.gt__rows{position:relative;display:grid;grid-template-columns:var(--gt-cols);row-gap:14px;margin:0;padding:8px 0 0;list-style:none}
.gt__rows li{grid-column:var(--a) / var(--b);padding:0 6px}
.gt__bar{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;min-height:56px;padding:10px 20px;border-radius:var(--r-md);
  background:linear-gradient(90deg,var(--brand-10),var(--brand-20));color:var(--ink);
  clip-path:inset(0 100% 0 0 round 8px);transition:clip-path .9s var(--ease);transition-delay:calc(200ms + var(--i,0) * 120ms)}
.gt.in .gt__bar{clip-path:inset(0 0 0 0 round 8px)}
.is-lead .gt__bar{background:linear-gradient(90deg,var(--brand-50),var(--brand-70));color:#fff}
.gt__bar b{font-size:16px;line-height:24px}
.gt__ch{display:flex;flex-wrap:wrap;gap:4px 14px}
.gt__ch a{font-size:13px;line-height:22px;color:var(--text-2);transition:color .2s}
.gt__ch a:hover{color:var(--brand-70);text-decoration:underline;text-underline-offset:3px}
.is-lead .gt__ch a{color:rgba(255,255,255,.82)}
.is-lead .gt__ch a:hover{color:#fff}
.gt__ch a:focus-visible{outline-offset:1px}
.gt__span{display:none}
.gt__legend{display:flex;gap:20px;margin:20px 0 0;font-size:12px;color:var(--text-3)}
.gt__legend span{display:inline-flex;align-items:center;gap:6px}
.gt__legend i{width:14px;height:8px;border-radius:2px;background:var(--brand-20)}
.gt__legend i.k{background:var(--brand-60)}

/* ---------------- 01 概述：波浪链路 ---------------- */
.wave{position:relative;margin-top:clamp(48px,6vw,80px);aspect-ratio:1200/440}
.wave__line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wave__line path{fill:none;stroke:url(#gwl);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:6 6}
.wave__nodes{margin:0;padding:0;list-style:none}
.wave__nodes li{position:absolute;left:calc(var(--x) / 1200 * 100%);top:calc(var(--y) / 440 * 100%)}
.wave__nodes li::before{content:"";position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--gray-40)}
.wave__nodes li.on::before{border-color:var(--brand);box-shadow:0 0 0 6px rgba(54,115,245,.15)}
/* 谷底卡片抬高，避开两侧上扬的虚线 */
.wave__nodes li:nth-child(even){--lift:72px}
.wn{position:absolute;left:0;bottom:var(--lift,26px);transform:translateX(-50%);width:clamp(120px,12.5vw,152px);padding:18px 12px 16px;text-align:center;border-radius:var(--r-xl);background:linear-gradient(180deg,#fff,rgba(255,255,255,.75));border:1px solid #fff;box-shadow:var(--sh-soft)}
.wn::after{content:"";position:absolute;left:50%;top:100%;height:calc(var(--lift,26px) - 6px);border-left:1px dashed var(--brand-30)}
.wn i{display:grid;place-items:center;width:40px;height:40px;margin:0 auto;border-radius:12px;background:var(--gray-20);color:var(--gray-50)}
.wn i svg{width:20px;height:20px}
.on .wn i{background:linear-gradient(135deg,var(--brand-40),var(--brand-70));color:#fff;box-shadow:0 10px 20px -8px rgba(26,94,232,.6)}
.wn b{display:block;margin-top:12px;font-size:14px;color:var(--ink)}
.wn__r{display:flex;flex-direction:column;gap:2px;min-height:58px;margin:10px 0 0;font-size:12px;line-height:18px;text-align:left}
.wn__r div{display:flex;justify-content:space-between;gap:8px}
.wn__r dt{font-weight:500;color:var(--text-1)}
.wn__r dd{margin:0;color:var(--text-3)}
.wave li:not(.on) .wn b{color:var(--text-3)}
.wave__legend{position:absolute;right:0;top:0;margin:0;display:flex;gap:16px;font-size:12px;color:var(--text-3)}
.wave__legend span{display:inline-flex;align-items:center;gap:6px}
.wave__legend i{width:10px;height:10px;border-radius:50%;border:2px solid var(--gray-40)}
.wave__legend i.on{border-color:var(--brand)}

/* ---------------- 03 功能架构：脑图 ---------------- */
.mm{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;margin-top:clamp(40px,5vw,64px)}
/* 根节点：只让图标占位，文字悬在下方，连接线始终对准图标中心（= 中间那条业务线） */
.mm{--mm-line:1px solid var(--brand-30)}
.mm__root{position:relative;width:64px;height:64px}
.mm__root img{display:block;width:64px;height:64px;border-radius:16px;box-shadow:0 12px 24px -14px rgba(26,94,232,.55)}
.mm__root span{position:absolute;left:0;top:calc(100% + 12px);display:flex;flex-direction:column;align-items:flex-start;gap:2px;white-space:nowrap}/* 左对齐图标，副标题不越出版心左缘 */
.mm__root b{font-family:var(--en);font-weight:700;font-size:16px;line-height:20px;letter-spacing:.08em;color:var(--ink)}
.mm__root small{font-size:12px;line-height:16px;color:var(--text-3)}
.mm__root::after{content:"";position:absolute;left:100%;top:50%;width:40px;border-top:var(--mm-line)}
.mm__rows{min-width:0}
.mm__row{position:relative;display:flex;align-items:center;gap:40px;margin-left:80px;padding:10px 0}
.mm__row::before{content:"";position:absolute;left:-40px;top:50%;width:40px;border-top:var(--mm-line)}
.mm__row::after{content:"";position:absolute;left:-40px;top:0;bottom:0;border-left:var(--mm-line)}
/* 首尾两端转角做圆角，避免直角硬折 */
.mm__row:first-child::before,.mm__row:last-child::before{left:-30px;width:30px}
.mm__row:first-child::after{top:50%;width:10px;border-top:var(--mm-line);border-top-left-radius:10px}
.mm__row:last-child::after{bottom:50%;width:10px;border-bottom:var(--mm-line);border-bottom-left-radius:10px}
.mm__node{flex:none;display:flex;justify-content:center;align-items:center;width:168px;height:36px;border-radius:999px;background:var(--brand);color:#fff;font-weight:600;font-size:16px;line-height:24px;box-shadow:0 8px 16px -10px rgba(26,94,232,.6)}
.mm__row ul{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.mm__row ul::before{content:"";position:absolute;left:-40px;top:18px;width:40px;border-top:1px solid var(--brand-20)}
.mm__row li{padding:6px 16px;border-radius:999px;background:var(--tint);color:var(--text-2);font-size:16px;line-height:24px}

/* ---------------- 04 用户分析：韦恩图 + 环形图 ---------------- */
/* 角色 × 链路接力图：横轴 6 个环节，每行一个角色，色条覆盖其负责的环节；
   --a / --b 为色条起止的网格线号（第 1 列是角色名，环节 k 占第 k+1 列） */
/* 用户分析：方法 → 发现 → 对策 */
/* 章节头 → 首个内容块统一 clamp(40,5vw,64)，与 .two / .intro 一致 */
.ana__t,.opener .t3,.sl--end .t3{margin-top:clamp(40px,5vw,64px)}
.panel .pts p.fix{color:var(--text-1)}
.panel .pts p.fix em{color:var(--brand)}
.panel .pts p + p{margin-top:2px}
.panel .pts em{font-style:normal;color:var(--text-1)}
.panel{margin-top:28px;padding:28px;border-radius:var(--r-xl);background:var(--tint)}
.kpi{display:flex;align-items:flex-end;gap:16px;margin:0}
.kpi b{font-size:clamp(80px,9vw,120px);line-height:.85;background:linear-gradient(180deg,var(--brand-50),var(--brand-90));-webkit-background-clip:text;background-clip:text;color:transparent}
.kpi b small{font-size:.4em}
.kpi span{padding-bottom:6px;font-size:14px;line-height:24px;color:var(--text-2)}
.legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;margin:28px 0 0;padding:0;list-style:none}
.legend li{position:relative;padding-left:20px;font-size:13px;line-height:20px;color:var(--text-3)}
.legend li::before{content:"";position:absolute;left:0;top:5px;width:10px;height:10px;border-radius:3px;background:var(--c)}
.legend b{display:block;font-weight:600;color:var(--text-1)}
.donut{position:relative;width:min(400px,100%);aspect-ratio:1;margin-inline:auto;filter:drop-shadow(0 30px 40px rgba(54,115,245,.22))}
.donut__ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--brand-60) 0 43.9%,var(--brand-40) 0 65.85%,var(--brand-30) 0 84.15%,var(--orange-60) 0 91.46%,var(--cyan-50) 0 96.34%,var(--purple-50) 0 100%);
  -webkit-mask:radial-gradient(circle,transparent 57%,#000 57.5%);mask:radial-gradient(circle,transparent 57%,#000 57.5%);transform:rotate(-90deg);opacity:0;transition:transform 1.2s var(--ease),opacity .8s}
.donut.in .donut__ring{transform:none;opacity:1}
.donut::before{content:"";position:absolute;inset:21%;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--line-b)}
.donut__c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.donut__c b{display:block;font-size:clamp(64px,7vw,96px);line-height:.9;color:var(--ink)}
.donut__c span{font-family:var(--en);font-size:12px;letter-spacing:.3em;color:var(--text-en)}

/* ---------------- 05 设计目标 ---------------- */
.star{margin:clamp(40px,5vw,64px) 0 0;text-align:center;font-size:clamp(22px,2.6vw,34px);line-height:1.5;font-weight:600;color:var(--ink)}
.star small{display:block;margin-bottom:12px;font-family:var(--en);font-size:12px;letter-spacing:.3em;color:var(--text-en);font-weight:400}
.star em{font-style:normal;color:var(--brand)}
.goals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;margin-top:56px}
.g{display:flex;align-items:baseline;gap:10px;font-family:var(--black);font-weight:900;font-size:52px;line-height:1;color:var(--brand)}
.g small{font-family:var(--en);font-weight:400;font-size:11px;letter-spacing:.14em;color:var(--text-en)}
.goals h4{margin:18px 0 0;font-size:16px;line-height:24px;color:var(--ink)}
.goals ul{margin:12px 0 0;padding:0;list-style:none}
.goals li{position:relative;padding-left:14px;font-size:13px;line-height:22px;color:var(--text-2)}
.goals li + li{margin-top:6px}
.goals li::before{content:"";position:absolute;left:0;top:9px;width:4px;height:4px;border-radius:50%;background:var(--brand-40)}

/* ---------------- 06 情绪版 ---------------- */
.mood__kw{margin:0;justify-self:end;font-size:clamp(18px,1.8vw,22px);font-weight:600;letter-spacing:.06em;color:var(--ink)}
.mood__kw i{margin:0 12px;font-style:normal;font-weight:400;color:var(--gray-30)}
/* 4 列：图片 + 对应文案上下成组 */
.mood{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:48px}
.mc > b{display:block;margin-top:20px;font-size:14px;color:var(--ink)}
.mc > p{margin:8px 0 0;font-size:13px;line-height:22px;color:var(--text-2)}
.mt{position:relative;aspect-ratio:720/1056;border-radius:var(--r-xl);overflow:hidden;background:var(--gray-20);box-shadow:0 24px 40px -24px rgba(14,26,58,.45)}
.mt img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.mt:hover img{transform:scale(1.04)}
.mt::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(180deg,transparent,rgba(10,20,45,.72))}
.mt figcaption{position:absolute;left:20px;bottom:18px;color:#fff;z-index:1}
.mt figcaption b{display:block;font-size:22px;line-height:30px}
.mt figcaption span{display:block;font-family:var(--en);font-size:11px;letter-spacing:.16em;opacity:.8}

/* ---------------- 07 设计规范 ---------------- */
/* 四层颜色由深到浅：越靠上越重要；左侧列表与右侧图解共用编号和颜色 */
/* 页面分层：一张完整页面在等轴视角下拆开，每层画成它在 ETP 里的真实形状；
   编号色与左侧列表、右侧标签共用，越靠上颜色越深 */
.l4{--lc:#1552D0}.l3{--lc:#3673F5}.l2{--lc:#769FF8}.l1{--lc:#A9B6CC}
.layers{margin:36px 0 0;padding:0;list-style:none}
.layers li{display:grid;grid-template-columns:24px 84px 1fr;align-items:center;gap:12px;padding:11px 0}
.layers li + li{border-top:1px dashed var(--line-strong)}
.layers i,.iso__tags i{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--lc);color:#fff;font-style:normal;font-family:var(--sans);font-size:12px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.layers b{font-size:14px;font-weight:600;color:var(--ink)}
.layers span{font-size:13px;color:var(--text-3)}
.iso{--s:.92;position:relative;height:calc(470px * var(--s))}
/* 图形右缘约 252px×s，右侧给标签留 190px；纵向按图形实际上下范围居中 */
.iso__stage{position:absolute;left:calc(100% - 190px - 252px * var(--s));top:calc(50% + 58px * var(--s));width:420px;height:280px;margin:-140px 0 0 -210px;transform:scale(var(--s)) rotateX(58deg) rotateZ(30deg);transform-style:preserve-3d}
.ly{position:absolute;inset:0;border-radius:18px;transform:translateZ(var(--z));transition:transform 1.1s var(--ease)}
.iso:not(.in) .ly{transform:translateZ(0)}
.ly i{position:absolute;display:block;background:#fff}
/* 锚点：每层向右水平引线时不会穿过其它层的点。
   背景 / 内容 / 顶栏取右上角（屏幕上最靠右），弹层取左上角（屏幕上最高，高于顶栏） */
.anc{position:absolute;right:1.5%;top:4%;width:1px;height:1px}
.bar .anc{right:2%;top:30%}
.dlg .anc{right:auto;left:72.8%;top:20%}
/* ① 背景层：gray-10 画布 */
.ly.l1{--z:0px;background:radial-gradient(circle,rgba(26,94,232,.18) 1.2px,transparent 1.6px) 0 0/16px 16px,linear-gradient(135deg,#EEF2F9,#DAE2F0);box-shadow:0 60px 70px -36px rgba(14,40,120,.4)}
/* ② 内容层：指标卡 + 表格卡 */
.ly.l2{--z:70px;top:25%;left:4%;right:4%;bottom:5%;padding:0;border-radius:14px;background:rgba(214,227,252,.72);box-shadow:0 30px 40px -24px rgba(26,70,180,.35),inset 0 0 0 1px rgba(255,255,255,.9)}
.ly.l2 > i{margin:0}
.ly.l2 .k1,.ly.l2 .k2,.ly.l2 .k3,.ly.l2 .k4{top:5%;height:22%;width:21.5%}
.ly.l2 .k1{left:3%}.ly.l2 .k2{left:26.5%}.ly.l2 .k3{left:50%}.ly.l2 .k4{left:auto;right:3%}
.ly.l2 .tb{left:3%;right:3%;top:33%;bottom:6%}
.ly.l2 i{border-radius:8px;box-shadow:0 14px 22px -14px rgba(26,70,180,.45)}
.ly .k1,.ly .k2,.ly .k3,.ly .k4{top:0;width:23%;height:24%}
.ly .k1{left:0}.ly .k2{left:25.66%}.ly .k3{left:51.33%}.ly .k4{right:0}
.ly .tb{left:0;right:0;top:31%;bottom:0;background:repeating-linear-gradient(180deg,transparent 0 22px,#E6ECF6 22px 23px) 0 30px/100% calc(100% - 30px) no-repeat,linear-gradient(#F3F6FC,#F3F6FC) 0 0/100% 30px no-repeat,#fff}
/* ③ 全局控制层：顶栏 + 页头（标题与暂存 / 提交） */
.ly.l3{--z:130px}
.ly .bar{left:0;right:0;top:0;height:11%;border-radius:18px 18px 0 0;background:linear-gradient(90deg,#3673F5,#1A5EE8);box-shadow:0 14px 24px -12px rgba(26,94,232,.6)}
.bar s{position:absolute;top:38%;height:24%;width:7%;border-radius:3px;background:rgba(255,255,255,.55)}
.bar s:nth-child(1){left:4%;width:9%;background:#fff}.bar s:nth-child(2){left:17%}.bar s:nth-child(3){left:27%}.bar s:nth-child(4){left:37%}
.ly .hd{left:4%;right:4%;top:13.5%;height:9%;border-radius:8px;box-shadow:0 14px 22px -12px rgba(26,70,180,.45)}
.hd u{position:absolute;right:3%;top:25%;width:13%;height:50%;border-radius:4px;background:var(--brand)}
.hd::before{content:"";position:absolute;left:3%;top:36%;width:24%;height:28%;border-radius:3px;background:var(--gray-70)}
/* ④ 弹层：对话框 */
.ly.l4{--z:235px}
.ly .dlg{left:22%;top:40%;width:40%;height:44%;border-radius:12px;border:1.5px solid var(--brand);box-shadow:0 36px 40px -16px rgba(14,40,120,.5)}
.dlg u{position:absolute;left:0;right:0;top:0;height:20%;border-radius:10px 10px 0 0;background:var(--brand-10)}
.dlg::after{content:"";position:absolute;right:7%;bottom:10%;width:24%;height:13%;border-radius:4px;background:var(--brand)}
/* 标签：JS 按各层锚点对齐纵向位置，并画直角引线 */
.iso__lead{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.iso__lead path{fill:none;stroke-width:1;stroke-dasharray:4 4}
.iso__tags{position:absolute;left:0;top:0;margin:0;padding:0;list-style:none}
.iso__tags li{position:absolute;left:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.iso__tags li:not(.on){visibility:hidden}
/* 悬停联动：当前层上浮、其余层与引线变淡，左侧对应行高亮 */
.ly{transition:transform 1.1s var(--ease),opacity .3s}
.ly.l3,.ly.l4{pointer-events:none}
.ly.l3 i,.ly.l4 i{pointer-events:auto}
.ly,.iso__tags li,.layers li{cursor:default}
.iso__lead g{transition:opacity .3s}
.iso__tags li,.layers li{transition:opacity .3s,background .2s}
.layers li{margin:0 -12px;padding-left:12px;padding-right:12px;border-radius:var(--r-md)}
.layers li:focus-visible{outline-offset:-2px}
.two[data-on] .ly,.two[data-on] .iso__lead g,.two[data-on] .iso__tags li,.two[data-on] .layers li{opacity:.25}
.two[data-on="l1"] .l1,.two[data-on="l2"] .l2,.two[data-on="l3"] .l3,.two[data-on="l4"] .l4{opacity:1!important}
.two[data-on="l1"] .ly.l1,.two[data-on="l2"] .ly.l2,.two[data-on="l3"] .ly.l3,.two[data-on="l4"] .ly.l4{transform:translateZ(calc(var(--z) + 28px))}
.two[data-on="l1"] .layers .l1,.two[data-on="l2"] .layers .l2,.two[data-on="l3"] .layers .l3,.two[data-on="l4"] .layers .l4{background:var(--tint)}
.two[data-on="l1"] g.l1 path,.two[data-on="l2"] g.l2 path,.two[data-on="l3"] g.l3 path,.two[data-on="l4"] g.l4 path{stroke-dasharray:none}

.skel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px}
.wf{border-radius:var(--r-lg);background:var(--gray-20);padding:10px;aspect-ratio:4/3.1;display:flex;flex-direction:column;gap:6px;overflow:hidden;box-shadow:var(--sh-soft)}
.wf__top{height:12px;border-radius:3px;background:#fff;display:flex;align-items:center;gap:4px;padding:0 6px}
.wf__top i{width:14px;height:4px;border-radius:2px;background:var(--brand-30)}
.wf__top i:first-child{width:18px;background:var(--brand)}
.wf .b{background:#fff;border-radius:4px;position:relative}
.wf .ln{height:5px;border-radius:2px;background:var(--gray-30)}
.wf .ln.br{background:var(--brand-30)}
.wf .bt{width:22px;height:9px;border-radius:2px;background:var(--brand)}
.wf .hl{outline:2px dashed var(--brand);outline-offset:1px}
.bps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 24px;margin-top:40px}
.bpx:first-child{grid-column:1 / -1}
.bpx h5{display:flex;align-items:baseline;gap:8px;margin:0 0 14px;font-size:14px;font-weight:600;color:var(--ink)}
.bpx h5 small{font-family:var(--en);font-size:12px;font-weight:400;color:var(--text-3)}
.bp{--g:1.7%;--gt:1.11%;--cw:2.96%;--sp6:23.33%;position:relative}
.bp--list{padding-top:30px}
.bp__win{aspect-ratio:16/11;display:flex;flex-direction:column;border:4px solid #1D1F24;border-radius:14px;background:var(--gray-20);overflow:hidden;box-shadow:var(--sh-soft)}
.bp--list .bp__win{aspect-ratio:1440/760;border-width:6px;border-radius:18px}
.bp__top{position:relative;flex:none;height:7%;display:flex;align-items:center;padding:0 var(--g);background:#fff;border-bottom:1px solid var(--line)}
.bp__main{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;padding:var(--g)}
.bp__card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--g);border-radius:6px;background:#fff}
.bp__risk{position:relative;flex:none;height:18px;border-radius:4px;background:var(--orange-10);box-shadow:inset 0 0 0 1px var(--orange-20)}
.bp__kpi{flex:0 0 12%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.15%}
.bp__kpi i{border-radius:4px;background:#fff}
.bp__frm{flex:1;min-height:0;display:flex;gap:1.15%}
.bp__col{flex:1;display:flex;flex-direction:column;gap:12px}
.bp__anc{align-self:flex-start;width:15.7%;height:34%}
.gr{position:absolute;z-index:1;left:var(--g);right:var(--g);top:0;bottom:0;display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:1.15%;pointer-events:none}
.gr i{background:rgba(54,115,245,.08)}
.dm{position:relative;flex:none;height:14px;display:flex;align-items:center;justify-content:center;border-inline:1px solid var(--brand)}
.dm::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dashed var(--brand)}
.dm b{position:relative;z-index:2;padding:0 8px;background:#fff;font-family:var(--en);font-size:12px;font-weight:600;line-height:14px;color:var(--brand)}
.dm--x{position:absolute;left:0;right:0;top:0}
.bk{position:absolute;z-index:2;height:10px;transform:translateY(-50%);border-inline:1px solid var(--brand)}
.bk::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--brand)}
.bp .pl{position:absolute;z-index:3;padding:3px 8px;border-radius:4px;background:var(--brand);color:#fff;font-family:var(--sans);font-style:normal;font-size:12px;font-weight:400;line-height:16px;white-space:nowrap}
.bp .pl--w{background:var(--orange-60)}
.bp .pl--s{background:#fff;color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
@media (max-width:860px){.bps{grid-template-columns:minmax(0,1fr)}}
.wf-cap{margin-top:16px}
.wf-cap b{display:block;font-size:14px;color:var(--ink)}
.wf-cap span{display:block;margin-top:4px;font-size:13px;line-height:21px;color:var(--text-2)}
.row{display:flex;gap:6px;align-items:center}
.col{display:flex;flex-direction:column;gap:6px}

.sh--sub + .pts{margin-top:32px}
/* 子标题下接图示统一 40px（文字要点 32px） */
.sh--sub + .two{margin-top:40px}

.pal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 16px;margin-top:40px}
.pal__g:first-child{grid-column:span 2}
.pal__g:nth-child(3){grid-column-start:1}
.pal h5{display:flex;align-items:baseline;gap:8px;margin:0 0 12px;font-size:14px;font-weight:600;color:var(--ink)}
.pal h5 small{font-family:var(--en);font-size:12px;font-weight:400;color:var(--text-3)}
.pal ol{position:relative;margin:0;padding:0;list-style:none;border-radius:8px;overflow:hidden}
.pal ol::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(14,26,58,.05);pointer-events:none}
.pal li{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;background:var(--c);color:var(--k);font-family:var(--en);font-size:12px;line-height:18px}
.pal li.dk{color:#fff}
.pal li b{display:flex;align-items:center;gap:6px;font-weight:600}
.pal li code{margin-left:auto;font-family:var(--en);opacity:.72}
.pal li em{padding:0 5px;border-radius:3px;background:rgba(255,255,255,.24);font-family:var(--sans);font-style:normal;font-size:10px;font-weight:400;line-height:16px}
.font{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 72px;margin-top:40px;align-items:start}
/* 网格底 + 描边 A / 实心 a：网格四周渐隐，不画外框 */
.font__glyph{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;height:320px;margin-top:24px}
.font__glyph::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--brand-10) 1px,transparent 1px),linear-gradient(90deg,var(--brand-10) 1px,transparent 1px);background-size:32px 32px;background-position:center;-webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent);mask-image:radial-gradient(closest-side,#000 40%,transparent)}
.font__aa{position:relative;display:flex;align-items:baseline;margin:0;font-family:var(--sans);font-size:200px;line-height:.8;letter-spacing:-.02em}
.font__aa span{color:transparent;-webkit-text-stroke:1.5px var(--brand)}
.font__aa b{font-weight:600;font-size:.62em;color:var(--brand)}
.font__name{position:relative;display:flex;align-items:baseline;gap:12px;margin:0;font-size:20px;color:var(--brand-30)}
.font__name b{font-weight:600;color:var(--brand)}
.font__fam{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 40px;margin-top:24px}
.font__fam h5{flex-wrap:wrap;row-gap:2px}
.font h5{display:flex;align-items:baseline;gap:8px;margin:0 0 12px;font-size:14px;color:var(--ink)}
.font h5::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);align-self:center}
.font h5 small{font-size:12px;font-weight:400;color:var(--text-3)}
.scale{margin:0 0 36px;padding:0;list-style:none}
.scale__hd,.scale li{display:grid;grid-template-columns:216px repeat(3,minmax(40px,1fr)) minmax(64px,1.4fr);align-items:baseline;gap:12px}
.scale__hd{padding-bottom:8px;font-size:12px;line-height:18px;color:var(--text-3)}
.scale li{padding:12px 0}
.scale li span{font-size:var(--s);font-weight:var(--w,400);line-height:1.2;white-space:nowrap;color:var(--ink)}
.scale li b{font-size:13px;font-weight:400;color:var(--text-2);white-space:nowrap}
.scale em{font-style:normal;font-size:12px;color:var(--text-3)}
.scale code{font-family:var(--en);font-size:13px;color:var(--text-2)}
.digits{margin:0;font-size:32px;letter-spacing:.06em;color:var(--ink)}
.brandline{margin:0;font-size:28px;white-space:nowrap;color:var(--brand)}
@media (max-width:560px){.font__fam{grid-template-columns:1fr}.scale li span{font-size:min(var(--s),28px)}.scale__hd,.scale li{grid-template-columns:136px repeat(3,minmax(32px,1fr)) minmax(64px,1.4fr)}}

.tok{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 56px;margin-top:40px}
.tok--one{grid-template-columns:minmax(0,560px)}
.sp,.rd,.sh5{margin-top:28px}
/* 三项并排：演示图统一贴底对齐 */
.tok--base > div{display:flex;flex-direction:column}
.tok--base .sp,.tok--base .rd,.tok--base .sh5{margin-top:auto}
.tok--base .pts{margin-bottom:28px}
.sp{display:flex;align-items:flex-end;gap:6px}
.sp div{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--text-3);font-family:var(--en)}
.sp i{display:block;width:var(--s);height:var(--s);background:var(--brand-20);border:1px solid var(--brand-40);border-radius:2px}
.rd{display:flex;gap:10px}
.rd div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--text-3);font-family:var(--en)}
.rd i{display:block;width:100%;aspect-ratio:1;max-width:44px;border:2px solid var(--brand);border-right:0;border-bottom:0;border-top-left-radius:var(--r)}
.sh5{display:flex;gap:10px;padding:16px;border-radius:var(--r-lg);background:var(--tint)}
.sh5 div{flex:1;height:52px;border-radius:var(--r-md);background:#fff;display:grid;place-items:center;font-size:11px;color:var(--text-3);font-family:var(--en)}

/* ---------------- 08 组件 ---------------- */
#components{background:var(--tint)}
#components .btn,#components a,#components .tbl{pointer-events:none;cursor:default}
.board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;margin-top:48px}
.board__g{grid-column:span 6;display:flex;flex-direction:column;gap:14px;padding:32px;border-radius:16px;background:#fff;box-shadow:0 12px 32px -20px rgba(14,26,58,.18);min-width:0}
.board__g--full{grid-column:span 12}
.board__g--wide{grid-column:span 8}
.board__g--wide + .board__g{grid-column:span 4}
.cc__hd{display:flex;align-items:baseline;gap:12px}
.cc__hd::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand);align-self:center}
.cc__hd h4{margin:0;font-size:20px;line-height:28px;font-weight:600;color:var(--ink)}
.cc__hd span{font-family:var(--en);font-size:14px;color:var(--text-3)}
.cc__desc{margin:-6px 0 6px 20px;font-size:13px;line-height:22px;color:var(--text-2)}
.board h5{display:flex;align-items:baseline;gap:8px;margin:4px 0 0;font-size:14px;font-weight:400;color:var(--ink)}
.board h5 small{font-size:12px;color:var(--text-3)}
.lbl{margin:0;font-size:12px;color:var(--text-3)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 15px;border-radius:var(--r-xs);border:1px solid var(--line-strong);background:#fff;font-size:14px;line-height:1;color:var(--text-1);transition:all .15s;white-space:nowrap}
.btn:hover{color:var(--brand);border-color:var(--brand-30);background:var(--brand-05)}
.btn:active{color:var(--brand-70);border-color:var(--brand-70)}
.btn--p{background:var(--brand);border-color:var(--brand);color:#fff}
.btn--p:hover{background:var(--brand-50);border-color:var(--brand-50);color:#fff}
.btn--p:active{background:var(--brand-70);border-color:var(--brand-70);color:#fff}
.btn--t{border-color:transparent;background:none;color:var(--brand);padding:0 4px}
.btn--t:hover{background:none;border-color:transparent;color:var(--brand-50)}
.btn--d{background:var(--red-50);border-color:var(--red-50);color:#fff}
.btn--d:hover{background:#ff7875;border-color:#ff7875;color:#fff}
.btn.is-hover{background:var(--brand-50);border-color:var(--brand-50)}
.btn.is-active{background:var(--brand-70);border-color:var(--brand-70)}
.btn.is-focus{box-shadow:0 0 0 3px rgba(54,115,245,.2)}
.btn[disabled],.btn.is-dis{background:var(--brand-20);border-color:var(--brand-20);color:#fff;cursor:not-allowed}
.btn--g[disabled],.btn--g.is-dis{background:var(--gray-10);border-color:var(--gray-30);color:var(--gray-40)}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.states{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.states > div{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;color:var(--text-3)}
.states .btn{width:100%;padding:0 6px}
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding-top:4px}
.inp{display:flex;align-items:center;height:32px;padding:0 11px;border-radius:var(--r-xs);border:1px solid var(--line-strong);background:#fff;color:var(--text-1);font-size:14px;gap:8px}
.inp span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inp.ph span{color:var(--gray-40)}
.inp.focus{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-10)}
.inp.err{border-color:#ff7875;box-shadow:0 0 0 2px var(--red-10)}
.inp.dis{background:var(--gray-10);color:var(--gray-40);border-color:var(--gray-20)}
.inp small{font-size:12px;color:var(--gray-40)}
.fitem{display:grid;grid-template-columns:80px 1fr;gap:12px;align-items:start}
.fitem > label{text-align:right;line-height:32px;color:var(--gray-70)}
.fitem > label i{color:var(--red-50);font-style:normal;margin-right:4px}
.fitem .hint{margin:4px 0 0;font-size:12px;line-height:20px;color:var(--text-3)}
.fitem .hint.e{color:var(--red-60)}
.fitem .hint .lk{color:var(--brand)}
.forms{display:grid;gap:14px}
.sdot{display:inline-flex;align-items:center;gap:8px;font-size:14px}
.sdot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c)}
.tag{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:var(--r-sm);font-size:12px;font-weight:400;background:var(--bg-c);color:var(--c)}
.st-row{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.st-proc{--c:var(--brand);--bg-c:var(--brand-10)}
.st-pend{--c:var(--orange-60);--bg-c:var(--orange-10)}
.st-ok{--c:var(--green-60);--bg-c:var(--green-10)}
.st-ok.sdot{--c:var(--green-50)}
.st-bad{--c:var(--red-60);--bg-c:var(--red-10)}
.st-bad.sdot{--c:var(--red-50)}
.st-off{--c:var(--gray-60);--bg-c:var(--gray-20)}
.st-off.sdot{--c:var(--gray-40)}
.stat{display:grid;grid-template-columns:1.2fr repeat(3,minmax(0,1fr));border-radius:var(--r-lg);border:1px solid var(--line)}
.stat > div{padding:16px 20px;position:relative}
.stat > div+div::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:1px;background:var(--line)}
.stat small{display:block;font-size:13px;color:var(--text-2)}
.stat b{display:block;margin-top:6px;font-family:var(--num);font-weight:400;font-size:40px;line-height:1}
.stat b i{font-style:normal;font-family:var(--sans);font-size:13px;color:var(--text-3);margin-left:3px}
.stat .warn{color:var(--orange-60)}
.stat em{display:inline-flex;align-items:center;gap:2px;margin-top:6px;font-style:normal;font-size:12px}
.stat em.down{color:var(--red-60)}
.stat strong{display:block;margin-top:8px;font-size:16px;font-weight:600}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{height:44px;padding:0 12px;text-align:left;background:var(--gray-10);font-weight:600;color:var(--gray-80);white-space:nowrap}
.tbl th:first-child{border-radius:var(--r-md) 0 0 0}.tbl th:last-child{border-radius:0 var(--r-md) 0 0}
.tbl td{height:48px;padding:0 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl tr:hover td{background:var(--brand-05)}
.tbl .id{font-family:var(--mono);font-size:13px;color:var(--gray-70);display:inline-flex;gap:6px;align-items:center}
.tbl .id svg{color:var(--gray-40);width:14px;height:14px}
.tbl .lk{color:var(--brand)}
.tbl .amt{font-variant-numeric:tabular-nums}
.tbl .ops{display:flex;gap:12px;color:var(--brand)}
.tbl .ops span:last-child{color:var(--gray-60);letter-spacing:2px}
.tscroll{overflow-x:auto}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--gray-70);flex-wrap:wrap}
.pager b{color:var(--brand);font-weight:400}
.pager div{display:flex;gap:6px;align-items:center}
.pager i{display:grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:var(--r-xs);font-style:normal;background:#fff;border:1px solid var(--line)}
.pager i.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.steps{display:flex;margin:4px 0 0;padding:0;list-style:none}
.steps li{flex:1;position:relative;padding-right:12px}
.steps li::after{content:"";position:absolute;top:12px;left:34px;right:8px;height:1px;background:var(--gray-30)}
.steps li:last-child::after{display:none}
.steps li.done::after{background:var(--brand)}
.steps i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--gray-30);font-style:normal;font-size:12px;color:var(--gray-50);background:#fff;position:relative;z-index:1}
.steps .done i{background:var(--brand-10);border-color:var(--brand-10);color:var(--brand)}
.steps .now i{background:var(--brand);border-color:var(--brand);color:#fff}
.steps b{display:block;margin-top:8px;font-size:14px;font-weight:600}
.steps .wait b{color:var(--text-3);font-weight:400}
.steps small{display:block;font-size:12px;color:var(--text-3)}
.tl{margin:0;padding:0;list-style:none}
.tl li{position:relative;padding:0 0 18px 24px}
.tl li::before{content:"";position:absolute;left:5px;top:16px;bottom:-2px;width:1px;background:var(--gray-30)}
.tl li:last-child::before{display:none}
.tl li::after{content:"";position:absolute;left:0;top:6px;width:11px;height:11px;border-radius:50%;background:var(--c,var(--gray-40))}
.tl li.now::after{box-shadow:0 0 0 4px var(--brand-10)}
.tl b{font-size:14px}
.tl b .tag{margin-left:8px;vertical-align:1px}
.tl p{margin:2px 0 0;font-size:12px;color:var(--text-3)}
.tl blockquote{margin:6px 0 0;padding:8px 12px;border-radius:var(--r-md);background:var(--gray-10);font-size:13px;color:var(--gray-70)}
.alert{display:flex;gap:8px;align-items:flex-start;padding:9px 16px;border-radius:var(--r-md);font-size:14px;line-height:22px;background:var(--bg-c);color:var(--gray-80)}
.alert svg{margin-top:3px;color:var(--c)}
.alert .lk{color:var(--brand)}
.empties__hd{margin-top:clamp(40px,5vw,64px);max-width:640px}
.empties{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:32px}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 12px;border-radius:var(--r-xl);background:#fff;box-shadow:var(--sh-soft)}
.empty img{width:104px;height:104px;object-fit:contain}
.empty b{margin-top:8px;font-size:14px}
.empty span:not(.btn){margin-top:4px;font-size:12px;line-height:18px;color:var(--text-3)}
.empty .btn{margin-top:14px;height:28px;font-size:13px;padding:0 12px}

/* ---------------- 样机：细边框显示器 / 笔记本 ---------------- */
.spec{align-items:center}
.spec__nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:32px;padding-left:16px}
.spec__nums b{display:block;font-size:48px;line-height:1;color:var(--brand)}
.spec__nums span{font-size:12px;color:var(--text-3)}
/* 站点地图：根节点 → 横向总线 → 三个分支 → 底部自检 */
.map{--gap:20px;display:grid;gap:0}
.map__root{justify-self:center;text-align:center;padding:12px 24px;border-radius:var(--r-md);background:var(--brand);color:#fff;box-shadow:var(--sh-soft)}
.map__root b{display:block;font-size:14px}
.map__root span{display:block;margin-top:2px;font-size:12px;opacity:.8}
.map__cols{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);padding-top:40px}
.map__cols::before{content:"";position:absolute;top:0;left:50%;width:2px;height:20px;background:var(--brand-30);transform:translateX(-50%)}
.map__cols::after{content:"";position:absolute;top:20px;left:calc(100% / 6);right:calc(100% / 6);height:2px;background:var(--brand-30)}
.map__cols > div{position:relative;padding:16px;border-radius:var(--r-lg);background:var(--tint);border:1px solid var(--line-b)}
.map__cols > div::before{content:"";position:absolute;top:-20px;left:50%;width:2px;height:20px;background:var(--brand-30);transform:translateX(-50%)}
.map__cols b{display:flex;align-items:baseline;justify-content:space-between;font-size:14px;color:var(--ink)}
.map__cols b .num{font-style:normal;font-size:24px;line-height:1;color:var(--brand)}
.map__cols ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:4px;font-size:13px;color:var(--text-2)}
.map__cols li{padding-left:12px;position:relative}
.map__cols li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:1px;background:var(--gray-40)}
.map__cols p{margin:12px 0 0;padding-top:10px;border-top:1px dashed var(--line-strong);font-size:12px;color:var(--text-3)}
.map__foot{display:flex;align-items:center;gap:10px;margin-top:var(--gap);padding:12px 16px;border-radius:var(--r-md);background:var(--gray-80);color:#C9D1E3;font-size:13px}
.map__foot i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--green-50);color:#fff;font-style:normal;font-size:12px}
.map__foot b{color:#fff}
.mon{position:relative;padding:6px;border-radius:14px;background:#1C2029;box-shadow:0 40px 70px -32px rgba(14,26,58,.5),inset 0 0 0 1px rgba(255,255,255,.08)}
.mon::after{content:"";position:absolute;left:8%;right:8%;bottom:-30px;height:24px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(14,26,58,.2),transparent 70%);filter:blur(4px);z-index:0}
.mon__img{position:relative}
.mon__img img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:9px}

/* ---------------- 09 核心页面 ---------------- */
.opener{max-width:640px}
.core{display:grid;gap:clamp(120px,12vw,180px);margin-top:clamp(96px,10vw,160px)}
.cp__hd{display:flex;align-items:center;gap:16px;margin-bottom:clamp(28px,3vw,40px)}
.cp__hd .num{font-size:56px;line-height:.9;background:linear-gradient(180deg,var(--brand-40),var(--brand-80));-webkit-background-clip:text;background-clip:text;color:transparent}
.cp__hd h3{margin:0;font-family:var(--black);font-weight:900;font-size:clamp(22px,2.4vw,30px);line-height:1.2;color:var(--ink);letter-spacing:.02em}
.cp__hd p{margin:4px 0 0;font-family:var(--en);font-style:italic;font-size:13px;letter-spacing:.14em;color:var(--text-en)}
.cp__body{position:relative;display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:72px;align-items:center}
.cp--r .cp__body{grid-template-columns:minmax(0,1fr) minmax(0,340px)}
.cp--r .cp__txt{order:2}
.cp__lead{margin:0;color:var(--text-2);font-size:14px;line-height:26px}
.notes{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:2px}
.notes li{display:grid;grid-template-columns:24px 1fr;gap:12px;padding:10px 12px;margin:0 -12px;border-radius:var(--r-md);transition:background .2s;cursor:default}
.notes li:hover,.notes li.on{background:var(--tint)}
.notes i{display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--brand-10);color:var(--brand);font-style:normal;font-family:var(--num);font-size:14px;padding-top:2px;transition:background .2s,color .2s}
.notes li.on i{background:var(--orange-60);color:#fff}
.notes b{display:block;font-size:14px;line-height:22px;color:var(--ink)}
.notes span{display:block;margin-top:2px;font-size:13px;line-height:22px;color:var(--text-2)}
.cp__shot{position:relative}
.cp__shot:has(.mon--back){padding-top:12%}
/* 外缘对齐：单屏占满截图栏；双屏时后屏贴页面外缘、主屏贴靠文字一侧，两者都不出版心 */
.cp__shot:has(.mon--back) > .mon:not(.mon--back){width:92%}
.cp--r .cp__shot > .mon:not(.mon--back){margin-left:auto}
.mon--back{position:absolute;top:0;right:0;width:66%;opacity:.95}
.cp--r .mon--back{right:auto;left:0}
.mon--back .mon__img img{filter:saturate(.85)}
.hs{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;font-family:var(--num);font-size:14px;line-height:1;padding-top:2px;box-shadow:0 4px 10px rgba(14,26,58,.3);transition:transform .25s var(--ease),background .25s,box-shadow .25s;z-index:3}
.hs:hover{box-shadow:0 0 0 4px rgba(54,115,245,.25),0 4px 10px rgba(14,26,58,.3)}
.hs.on{transform:translate(-50%,-50%) scale(1.25);background:var(--orange-60);box-shadow:0 0 0 4px rgba(250,140,22,.3),0 4px 10px rgba(14,26,58,.3)}
/* 引线：JS 计算后绘制，连接说明与截图标注点 */
.lead{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.lead path{fill:none;stroke:var(--brand-40);stroke-width:1;stroke-dasharray:4 4;transition:stroke .2s,opacity .2s;opacity:.75}
.lead circle{fill:var(--brand-40);transition:fill .2s}
.lead g.on path{stroke:var(--orange-60);stroke-dasharray:none;opacity:1}
.lead g.on circle{fill:var(--orange-60)}

/* ---------------- 10 全部页面 ---------------- */
.wall{position:relative;height:clamp(420px,48vw,640px);margin:clamp(40px,5vw,64px) 0;overflow:hidden;background:linear-gradient(180deg,#F1F5FD,#E4ECFA)}
.wall:last-child{margin-bottom:0}
.wall::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#fff 0,rgba(255,255,255,0) 18%,rgba(255,255,255,0) 62%,#fff 100%),linear-gradient(90deg,#fff 0,rgba(255,255,255,0) 14%,rgba(255,255,255,0) 86%,#fff 100%);pointer-events:none}
.wall__plane{position:absolute;left:50%;top:50%;width:150%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;transform:translate(-50%,-50%) perspective(2200px) rotateX(36deg) rotateZ(-22deg)}
.wall__col{display:flex;flex-direction:column;gap:20px;animation:wallup var(--t,60s) linear infinite;will-change:transform}
.wall__col:nth-child(even){animation-direction:reverse}
.wall__col img{width:100%;aspect-ratio:16/10;border-radius:8px;background:#fff;box-shadow:0 16px 30px -14px rgba(14,26,58,.35)}
.wall:not(.play) .wall__col{animation-play-state:paused}
@keyframes wallup{to{transform:translateY(-25%)}}
.wall__cap{position:absolute;z-index:2;left:50%;bottom:clamp(20px,3vw,40px);transform:translateX(-50%);text-align:center;width:90%}
.wall__cap b{display:block;font-size:clamp(64px,9vw,120px);line-height:.9;letter-spacing:.02em;background:linear-gradient(180deg,var(--brand-60),var(--brand-90));-webkit-background-clip:text;background-clip:text;color:transparent}
.wall__cap span{display:block;margin-top:8px;font-size:14px;color:var(--text-2)}
/* ---------------- 总结 ---------------- */
.sl--end{background:none}
.recap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-top:40px}
.recap b{display:block;font-size:40px;line-height:1;color:var(--brand-30)}
.recap h4{margin:16px 0 0;font-size:16px;line-height:24px;color:var(--ink)}
.recap p{margin:8px 0 0;font-size:14px;color:var(--text-2);line-height:24px}
/* 迭代闭环：4 步横排，编号之间用虚线串联 */
.recap--loop{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-bottom:0;padding:0;list-style:none}
.recap--loop li{position:relative}
.recap--loop li:not(:last-child)::after{content:"";position:absolute;left:64px;right:-20px;top:20px;border-top:1px dashed var(--brand-30)}
.disc{margin:56px 0 0;padding:16px 20px;border-radius:var(--r-lg);background:var(--gray-10);color:var(--text-3);font-size:13px;line-height:21px}
.nextp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:40px}
.nextp a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:28px 32px;border-radius:var(--r-xl);background:#fff;box-shadow:var(--sh-soft);border:1px solid var(--line-b);transition:transform .3s var(--ease),border-color .3s}
.nextp a:hover{transform:translateY(-3px);border-color:var(--brand-30)}
.nextp a.go{background:linear-gradient(135deg,var(--brand-50),var(--brand-80));border-color:transparent;color:#fff}
.nextp small{display:block;font-size:12px;letter-spacing:.08em;opacity:.7}
.nextp b{display:block;margin-top:6px;font-size:20px;line-height:28px}
.nextp svg{width:24px;height:24px;transition:transform .3s var(--ease)}
.nextp a:hover svg{transform:translateX(4px)}
.foot{padding:0 0 40px;color:var(--text-3);font-size:12px}
.foot .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:24px}

/* ---------------- 灯箱 ---------------- */
.lb{position:fixed;inset:0;z-index:100;display:grid;grid-template-rows:auto 1fr auto;background:rgba(10,16,34,.97);color:#fff;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.lb.open{opacity:1;visibility:visible}
.lb__top{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;gap:16px}
.lb__cap b{display:block;font-size:14px}
.lb__cap span{font-size:12px;color:rgba(255,255,255,.55)}
.lb__x{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1)}
.lb__x:hover{background:rgba(255,255,255,.2)}
.lb__stage{position:relative;display:grid;place-items:center;padding:0 72px;min-height:0}
.lb__stage img{max-width:100%;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5);object-fit:contain;transition:opacity .2s}
.lb__stage img.loading{opacity:.2}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.1)}
.lb__nav:hover{background:rgba(255,255,255,.22)}
.lb__nav[disabled]{opacity:.25;cursor:default}
.lb__nav--p{left:16px}.lb__nav--n{right:16px}
.lb__nav svg{width:22px;height:22px}
.lb__bot{padding:14px;text-align:center;font-family:var(--num);font-size:18px;letter-spacing:.06em;color:rgba(255,255,255,.6)}

/* ---------------- 响应式 ---------------- */
@media (max-width:1100px){
  .cover__grid,.opener,.map__cols,.font{grid-template-columns:1fr}
  .cover__grid{min-height:0;gap:40px}
  .imac{width:100%;margin-left:0}
  .map__cols::after,.map__cols > div::before{display:none}
  .mood{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .iso{--s:.7}
  .mood__kw{justify-self:start}
  .cp__body,.cp--r .cp__body{grid-template-columns:1fr;gap:40px}
  .cp--r .cp__txt{order:0}
  .goals,.cols4,.recap--loop{grid-template-columns:repeat(2,minmax(0,1fr))}
  .recap--loop li::after{display:none}
  .board__g,.board__g--wide,.board__g--wide + .board__g{grid-column:span 12}
  .mm__row{flex-direction:column;align-items:flex-start;gap:12px}
  .mm__row ul::before{display:none}
}
@media (max-width:860px){
  .two,.two--vis{grid-template-columns:1fr}
  .tok{grid-template-columns:1fr}
  .empties{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* 窄屏：去掉横轴，横条改为整行列表，用文字注明覆盖的节点 */
  .gt__axis,.gt__guides{display:none}
  .gt__rows{grid-template-columns:minmax(0,1fr);padding:0}
  .gt__rows li{grid-column:1;padding:0}
  .gt__span{display:block;flex-basis:100%;font-size:12px;line-height:18px;opacity:.75}
  .skel{grid-template-columns:1fr}
  /* 波浪链路改为纵向列表 */
  .wave{aspect-ratio:auto}
  .wave__line{display:none}
  .wave__nodes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding-top:40px}
  .wave__nodes li{position:static}
  .wave__nodes li::before,.wn::after{display:none}
  .wn{position:static;transform:none;width:auto}
  .mm{grid-template-columns:1fr}
  .mm__root{justify-self:start;display:flex;align-items:center;gap:12px;width:auto;height:auto;margin-bottom:16px}
  .mm__root img{width:48px;height:48px;border-radius:12px}
  .mm__root span{position:static;transform:none;align-items:flex-start}
  .mm__root::after{display:none}
  /* 窄屏功能树：节点与页面胶囊整体缩一档（30px / 28px 高），竖线上的横枝对准节点胶囊中心而不是整行中点 */
  .mm__row{margin-left:24px;padding:8px 0;gap:8px}
  .mm__node{width:auto;height:30px;padding:0 16px;font-size:14px;line-height:20px}
  .mm__row ul{gap:6px}
  .mm__row li{padding:4px 11px;font-size:13px;line-height:20px}
  .mm__row::before,.mm__row:first-child::before,.mm__row:last-child::before{left:-24px;width:24px;top:23px}
  .mm__row::after{left:-24px}
  .mm__row:first-child::after{top:-16px;width:0;border-top:0;border-radius:0}
  .mm__row:last-child::after{bottom:calc(100% - 23px)}
  .mm__row:last-child::before{left:-14px;width:14px}
}
@media (max-width:720px){
  :root{--nav-h:68px;--gut:12px}/* 手机端顶栏与内容统一距两侧 12px */
  .top{padding:10px 0}
  .top__in{gap:8px;padding:0 6px}
  .top__back{padding:9px 10px}
  .top__back span{display:none}/* 手机端只留返回箭头，给章节导航腾位 */
  .top__back svg{width:16px;height:16px}
  /* 导航可横向滚动：右缘渐隐，暗示右侧还有项 */
  .top__nav{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .sl::before{display:none}
  .sh__tag{display:none}
  .sh > p{margin-left:0}
  .pts--row,.cols4,.recap,.nextp{grid-template-columns:1fr}
  /* 手机端步骤与目标走两列：条目短，单列会拉成一长串 */
  .recap--loop,.goals{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
  .g{font-size:44px}
  /* 核心页面标注是整页最长的说明文字，手机端从 13px 提到 14px */
  .notes span,.cc__desc{font-size:14px;line-height:23px}
  .mood{gap:32px 14px}
  .mt figcaption{left:14px;bottom:12px}
  .mt figcaption b{font-size:18px;line-height:26px}
  .states{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:16px}
  .stat{grid-template-columns:1fr 1fr}
  .stat > div:nth-child(3)::before{display:none}
  .board__g{padding:20px}
  .fitem{grid-template-columns:1fr;gap:4px}
  .fitem > label{text-align:left;line-height:22px}
  .empties{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .iso{--s:.62}
  .iso__stage{left:50%}
  .iso__tags,.iso__lead{display:none}
  .lb__stage{padding:0 8px}
  .lb__nav{top:auto;bottom:-56px;transform:none}
  .wall__plane{width:240%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-rv]{opacity:1;transform:none}
  .donut__ring{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
@media (max-width:760px){
  /* 手机端五组色阶都一行一组、撑满宽度，和品牌色一致 */
  .pal{grid-template-columns:minmax(0,1fr);gap:28px}
  .pal__g:first-child,.pal__g:nth-child(3){grid-column:auto}
  .bpx{overflow-x:auto}
  .bp{min-width:600px}
}