/* ════════════════════════════════════════════════════════════════
   MemoBrain 官网 · 共享设计系统 site.css
   风格：干净简约 —— 白底大留白 + 品牌蓝(#00489D)结构
   + 品牌橙(#FDA503)只给 CTA 与点睛，细边框轻投影，无装饰性图形。
   全站 6 页共用（index / features / download / resources / try / guide）。
   契约与规则见 design.md；数字口径见 facts.md。
   扩页时：复制任一页的 head + nav/footer 结构 + 引本文件即可。
   ════════════════════════════════════════════════════════════════ */

:root{
  /* 品牌 */
  --blue:#00489D; --blue-deep:#003A7D; --blue-ink:#0B2B55;
  --blue-tint:#EDF3FB; --blue-tint-2:#E1EBF7;
  --orange:#FDA503; --orange-deep:#E08900; --orange-ink:#7A5200;
  --orange-tint:#FFF6E3; --orange-line:#F3E3BC;
  /* 中性 */
  --bg:#FFFFFF; --bg-alt:#F7F9FC; --line:#E5EAF1; --line-2:#D4DCE7;
  /* 新主页方向 token（2026-10-02 第三屏合入，登记见 design.md） */
  --paper:#FAF9F5; --ink:#17233B;
  --text:#1B2634; --ink-2:#33445A; --muted:#5C6B7D; --faint:#67717F;
  --on-orange:#3D2800; --on-blue-soft:#CBD9F0;
  --ok:#1F8A4C;
  /* 形状 */
  --radius:14px; --radius-sm:10px;
  --shadow-sm:0 1px 3px rgba(11,43,85,.05);
  --shadow:0 6px 24px rgba(11,43,85,.07);
  --shadow-lg:0 16px 48px rgba(11,43,85,.12);
  /* 间距节奏 */
  --sp-sec:100px; --sp-sec-tight:64px; --sp-sec-loose:120px;
  /* 动效（只允许这三档缓动 + 三档时长） */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.7,0,.84,0);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-micro:120ms; --dur-short:220ms; --dur-long:420ms;
  --sans:"PingFang SC","Microsoft YaHei","Source Han Sans SC","Segoe UI",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--text);background:var(--bg);line-height:1.75;font-size:16px;-webkit-font-smoothing:antialiased}
::selection{background:var(--orange);color:var(--text)}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:var(--sp-sec) 0;scroll-margin-top:84px}
section.tight{padding:var(--sp-sec-tight) 0}
section.loose{padding:var(--sp-sec-loose) 0}
section.alt{background:var(--bg-alt)}

/* ── 文字件 ── */
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;letter-spacing:.08em;color:var(--blue);background:var(--blue-tint);border:1px solid var(--blue-tint-2);border-radius:999px;padding:6px 16px;margin-bottom:20px}
.kicker.orange{color:var(--orange-ink);background:var(--orange-tint);border-color:var(--orange-line)}
h1{font-size:clamp(36px,5vw,54px);line-height:1.22;letter-spacing:.01em;font-weight:800}
h2{font-size:clamp(27px,3.6vw,38px);line-height:1.3;letter-spacing:.01em;font-weight:800}
h3{font-size:19px;font-weight:700}
.sub{color:var(--muted);font-size:17px;margin-top:14px;max-width:620px}
.center{text-align:center}
.center .sub{margin-left:auto;margin-right:auto}
.lead-lg{font-size:18px;line-height:1.85;color:var(--muted);margin-top:20px;max-width:560px}
.lead-lg b{color:var(--text)}
/* 页内通用排版件（替代行内样式） */
.page-head{padding:72px 0 56px}
.page-title{font-size:clamp(30px,4vw,44px)}
.flush{padding-top:0}
.head-block{margin-bottom:52px}
.head-block-sm{margin-bottom:44px}
.sub-narrow{max-width:560px}
.sub-mid{max-width:640px}

/* ── 按钮：橙=主 CTA，蓝=次级，ghost=轻 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15.5px;cursor:pointer;border-radius:var(--radius-sm);padding:13px 30px;border:1.5px solid transparent;white-space:nowrap;box-shadow:var(--shadow-sm);
  transition:background-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out),transform var(--dur-micro) var(--ease-out)}
.btn-primary{background:var(--orange);color:var(--on-orange)}
.btn-primary:hover{background:var(--orange-deep);transform:translateY(-1px)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-deep);transform:translateY(-1px)}
.btn-ghost{background:#fff;color:var(--blue);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--blue);transform:translateY(-1px)}
.btn-ghost.on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);box-shadow:none}
.btn-ghost.on-dark:hover{border-color:var(--orange);color:var(--orange);transform:none}
.btn-lg{padding:16px 38px;font-size:17px}
.btn-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}
.btn-row.center{justify-content:center}
.note-under-cta{margin-top:14px;font-size:13.5px;color:var(--muted)}
.note-gap{margin-top:22px}
.link-blue{color:var(--blue);font-weight:600}

/* ── 全局导航 ── */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:32px;height:66px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand img{width:32px;height:32px;border-radius:7px}
.brand .name{font-weight:800;font-size:17.5px;line-height:1.15}
.brand small{display:block;font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.14em;margin-top:1px;text-align:center}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:15px;color:var(--muted)}
.nav-links a{padding:4px 0;color:var(--muted);border-bottom:2px solid transparent;transition:color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out)}
.nav-links a:hover{color:var(--text);border-bottom-color:var(--orange)}
.nav-links a[aria-current="page"]{color:var(--blue);font-weight:600;border-bottom-color:var(--blue)}
.nav .btn{padding:9px 20px;font-size:14px}
@media (max-width:880px){.nav-links{display:none}}

/* ── 页首 Hero（各页共用变体）── */
.hero{padding:96px 0 84px;border-bottom:1px solid var(--line)}
.hero h1 .hl{color:var(--blue)}
.hero-cta{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap}
.hero-badges{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.chip{font-size:13px;color:var(--blue-ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;box-shadow:var(--shadow-sm)}
.chip b{color:var(--blue)}
.shot img{border-radius:calc(var(--radius) - 5px)}
/* 双栏分栏（替代误用 hero-grid 的区块） */

/* ── 卡片通用 ── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-gap-top{margin-top:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px;transition:border-color var(--dur-short) var(--ease-out)}
.card:hover{border-color:var(--line-2)}
.card .ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--blue-tint);color:var(--blue)}
.card .ic .i{width:24px;height:24px}
.card h3{line-height:1.4}
.card p{color:var(--muted);font-size:14.5px;flex:1}
.card .more{font-size:14px;font-weight:600;color:var(--blue)}
.card .more:hover{color:var(--orange-deep)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:12px;color:var(--blue);background:var(--blue-tint);border-radius:6px;padding:3px 10px}

/* 图片卡（画布展示） */
.card.img{padding:0;overflow:hidden}
.card.img figure{overflow:hidden;border-bottom:1px solid var(--line)}
.card.img img{width:100%;height:210px;object-fit:cover;object-position:center top}
.card.img .body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px}

/* ── CTA：中段浅色条 + 尾段深蓝板 ── */
.cta-strip{background:var(--bg-alt);border:1px solid var(--line);border-radius:20px;padding:56px 48px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-strip h2{font-size:clamp(23px,3vw,30px)}
.cta-strip p{color:var(--muted);margin-top:8px}
.cta-panel{background:var(--blue);border-radius:20px;color:#fff;padding:76px 40px;text-align:center;box-shadow:var(--shadow-lg)}
.cta-panel h2{color:#fff}
.cta-panel p{color:var(--on-blue-soft);margin-top:14px}
.cta-panel .btn-row{justify-content:center}

/* ── 页内锚点子导航（功能页）── */
.subnav{position:sticky;top:66px;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.subnav .wrap{display:flex;gap:8px;overflow-x:auto;padding-top:12px;padding-bottom:12px}
.subnav a{font-size:14px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:7px 18px;white-space:nowrap;transition:border-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out),background-color var(--dur-short) var(--ease-out)}
.subnav a:hover{border-color:var(--blue);color:var(--blue)}
.subnav a.on{background:var(--blue);border-color:var(--blue);color:#fff}

/* ── 下载卡 ── */
.dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dl-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:36px 30px;text-align:center;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;transition:border-color var(--dur-short) var(--ease-out)}
.dl-card:hover{border-color:var(--line-2)}
.dl-card .os{display:flex;justify-content:center;color:var(--blue)}
.dl-card .os .i{width:36px;height:36px;stroke-width:1.6}
.dl-card h3{font-size:20px}
.dl-card .meta{font-size:13.5px;color:var(--muted)}
.dl-card .btn{margin-top:auto}
.dl-card .btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.dl-badge{align-self:center;font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--orange-ink);background:var(--orange-tint);border-radius:999px;padding:3px 12px}

/* ── 资源卡 ── */
.res-card{align-items:flex-start}
.res-card .arrow{margin-top:auto;font-weight:700;color:var(--blue);font-size:14.5px}
.res-card .arrow:hover{color:var(--orange-deep)}

/* ── FAQ ── */
.faq{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;box-shadow:var(--shadow);max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;cursor:pointer;padding:20px 26px;font-weight:600;font-size:15.5px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:20px;color:var(--blue);font-weight:400;flex-shrink:0}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{color:var(--blue)}
.faq .a{padding:0 26px 22px;color:var(--muted);font-size:14.5px}

/* ── 页脚 ── */
footer{background:var(--bg-alt);border-top:1px solid var(--line);padding:56px 0 40px;color:var(--muted);font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr 1fr;gap:36px}
.foot-grid h4{font-size:14px;color:var(--text);margin-bottom:14px;font-weight:700}
.foot-grid ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot-grid a:hover{color:var(--blue)}
.foot-brand p{margin-top:12px;font-size:13.5px;line-height:1.8;max-width:340px}
.foot-bottom{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}

/* ── 视频框 ── */
.video{border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);background:#fff}
.video video{display:block;width:100%}
.video .cap{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);padding:10px 14px;border-top:1px solid var(--line)}
.video-narrow{max-width:880px;margin:0 auto}

/* ── 能力速览（静态网格，替代旧走马灯）── */
.capa{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;padding:28px 0}
.capa-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.capa-item{display:flex;flex-direction:column;gap:4px;padding-left:18px;border-left:1px solid var(--line)}
.capa-item:first-child{border-left:0;padding-left:0}
.capa-item b{font-size:19px;color:var(--blue);font-weight:800;line-height:1.2}
.capa-item span{font-size:12.5px;color:var(--muted)}
@media (max-width:960px){.capa-grid{grid-template-columns:repeat(3,1fr);row-gap:28px}.capa-item:nth-child(3n+1){border-left:0;padding-left:0}}
@media (max-width:560px){.capa-grid{grid-template-columns:1fr 1fr}.capa-item{border-left:0;padding-left:0}}

/* ── SVG 图标（描边风：禁默认黑填充，描边随 currentColor）── */
.i{width:24px;height:24px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic-title{display:inline-flex;color:var(--blue)}
.ic-title .i{width:26px;height:26px}
.subnav .i{width:16px;height:16px;vertical-align:-3px;margin-right:6px;color:var(--blue)}
.i-lg{width:36px;height:36px;stroke-width:1.6}
.i-sm{width:19px;height:19px}
.i-xl{width:34px;height:34px}
.c-blue{color:var(--blue)}
.c-orange{color:var(--orange-deep)}
.c-ink{color:var(--blue-ink)}

/* ── 动效：唯一"编排时刻"= hero 加载阶梯（60ms 间隔，总长 ≤500ms）── */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.ha{animation:fadeUp var(--dur-long) var(--ease-out) both}
.ha-d1{animation-delay:60ms}
.ha-d2{animation-delay:120ms}
.ha-d3{animation-delay:180ms}
.ha-d4{animation-delay:240ms}
.ha-d5{animation-delay:300ms}

/* ── 在线体验页（try）── */
.trybar{background:#fff;border-bottom:1px solid var(--line)}
.trybar-in{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.try-title{font-size:22px;font-weight:800;color:var(--blue-ink);white-space:nowrap}
.addr{flex:1;display:flex;gap:8px;max-width:560px;margin-left:auto}
.addr input{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--line-2);border-radius:9px;font-size:13.5px;color:var(--text);background:#fff;outline:none;transition:border-color var(--dur-short) var(--ease-out),box-shadow var(--dur-short) var(--ease-out)}
.addr input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,72,157,.12)}
.addr button{padding:9px 18px;background:var(--blue);color:#fff;border:0;border-radius:9px;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background-color var(--dur-short) var(--ease-out)}
.addr button:hover{background:var(--blue-deep)}
.hint{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.stage{position:relative;flex:1;min-height:70vh;background:#fff}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--bg-alt);z-index:5;transition:opacity var(--dur-long) var(--ease-out)}
.loading.hide{opacity:0;pointer-events:none}
.loading img{width:64px;height:64px;border-radius:14px}
.loading .txt{font-size:15px;color:var(--muted)}
.loading .bar2{width:180px;height:4px;background:var(--line);border-radius:2px;overflow:hidden}
.loading .bar2 i{display:block;height:100%;width:40%;background:var(--blue);border-radius:2px;animation:slide 1.2s var(--ease-in-out) infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(280%)}}
.err{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--bg-alt);z-index:6;text-align:center;padding:30px}
.err.show{display:flex}
.err .ico{color:var(--orange-deep)}
.err .ico .i{width:40px;height:40px}
.err b{font-size:19px;color:var(--blue-ink)}
.err p{font-size:14px;color:var(--muted);max-width:480px;line-height:1.7}
.err code{background:var(--blue-tint);color:var(--blue);border-radius:6px;padding:2px 8px;font-size:13px}
.err .btn{margin-top:6px;background:var(--blue);color:#fff;border-color:var(--blue)}
.err .btn:hover{background:var(--blue-deep);border-color:var(--blue-deep)}
.mob{display:none}
@media (max-width:720px){
  .try-title{display:none}
  .addr{max-width:none;margin-left:0}
  .hint{display:none}
  .mob{display:block;position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:rgba(11,43,85,.92);color:#fff;font-size:12.5px;padding:8px 16px;border-radius:999px;z-index:7;white-space:nowrap}
}

/* ── 响应式 ── */
@media (max-width:960px){
  section{padding:68px 0}
  .grid-3,.dl-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .cta-strip{padding:40px 28px}
}
@media (max-width:600px){
  .grid-3,.dl-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:28px}
}

/* ── 动效降级（每个新增动效都归这一条）── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ha{animation-duration:1ms;animation-delay:0ms}
  *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}
  .btn:hover,.card:hover,.gal figure:hover,.dl-card:hover,.nav-links a:hover{transform:none!important}
}

/* ════════════════════════════════════════════════════════════════
   版式系统 2.0 · 实拍图为主 + 非对称版面（首页 / 功能页）
   —— 空间节奏、工作台粘性栏、bento、标注实拍图、规格表、细节特写
   ════════════════════════════════════════════════════════════════ */
:root{
  --space-3xs:.125rem; --space-2xs:.25rem; --space-xs:.5rem; --space-sm:.75rem;
  --space-md:1rem; --space-lg:1.5rem; --space-xl:2.5rem; --space-2xl:4rem;
  --space-3xl:6rem; --space-4xl:9rem;
  --z-base:1; --z-raised:10; --z-dropdown:100; --z-sticky:200; --z-modal:400; --z-toast:500;
  --banner-height:66px;
}
html,body{overflow-x:clip}

/* 节奏三档（替换"每段都一样高"的均匀留白） */
.pad-loose{padding-top:var(--space-4xl);padding-bottom:var(--space-3xl)}
.pad-lg{padding-top:var(--space-3xl);padding-bottom:var(--space-3xl)}
.head-tight{max-width:44rem}
.head-alt{margin-bottom:var(--space-2xl)}

/* 规格表（F3：一行一能力，发丝线分隔） */
.spec{margin-top:var(--space-lg);border-top:1px solid var(--line)}
.spec>div{display:grid;grid-template-columns:minmax(7.5rem,32%) 1fr;gap:var(--space-lg);padding:var(--space-sm) 0;border-bottom:1px solid var(--line)}
.spec dt{font-weight:700;font-size:14.5px;color:var(--text)}
.spec dd{font-size:14.5px;color:var(--muted)}

/* 实拍图 + 标注（F5：产品界面自己说话） */
.shot-frame{margin:0}
.shot-frame img{width:100%;border:1px solid var(--line-2);border-radius:var(--radius);background:#fff}
.shot-frame figcaption{font-size:12.5px;color:var(--muted);padding-top:var(--space-xs)}
figure.annotated{margin:0}
.shot-canvas{position:relative;display:block}
figure.annotated>img{display:block;width:100%;border:1px solid var(--line-2);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}
.annotated .callout{position:absolute;left:var(--x);top:var(--y);display:inline-flex;align-items:center;gap:7px;font-size:12.5px;line-height:1.2;color:var(--text);background:rgba(255,255,255,.95);border:1px solid var(--line-2);border-radius:999px;padding:5px 11px;box-shadow:var(--shadow-sm);transform:translate(-50%,-50%);white-space:nowrap;z-index:var(--z-raised)}
.annotated .callout i{width:6px;height:6px;border-radius:50%;background:var(--orange);flex-shrink:0}
.annotated .callout[data-pos=l]{transform:translate(calc(-100% - 14px),-50%)}
.annotated .callout[data-pos=r]{transform:translate(14px,-50%)}
.annotated .callout[data-pos=t]{transform:translate(-50%,calc(-100% - 14px))}
.annotated .callout[data-pos=b]{transform:translate(-50%,14px)}
.annotated .callout[data-pos=tl]{transform:translate(calc(-100% - 14px),calc(-100% - 14px))}
.annotated .callout[data-pos=tr]{transform:translate(14px,calc(-100% - 14px))}
.annotated .callout[data-pos=bl]{transform:translate(calc(-100% - 14px),14px)}
.annotated .callout[data-pos=br]{transform:translate(14px,14px)}
.annotated figcaption{font-size:12.5px;color:var(--muted);padding-top:var(--space-xs)}

/* 图组 */
.shot-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);margin-top:var(--space-md)}
.shot-row figure{margin:0}
.shot-row img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:left top;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff}
.shot-row figcaption{font-size:12.5px;color:var(--muted);padding-top:var(--space-2xs)}

/* 工作台（功能页）：左侧粘性说明栏 + 右侧滚动的实拍列 */
.wb{border-top:1px solid var(--line)}
.wb-grid{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:var(--space-3xl);align-items:start}
.wb-pane{position:sticky;top:calc(var(--banner-height) + var(--space-xl));align-self:start;z-index:var(--z-base)}
.wb-no{font-size:12.5px;font-weight:700;letter-spacing:.22em;color:var(--orange-deep)}
.wb-pane h2{margin-top:var(--space-2xs)}
.wb-pane .desc{color:var(--muted);font-size:16px;margin-top:var(--space-md)}
.wb-pane .tags{margin-top:var(--space-lg)}
.tlink{display:inline-flex;align-items:center;gap:6px;margin-top:var(--space-lg);font-size:14.5px;font-weight:700;color:var(--blue);border-bottom:1px solid var(--blue-tint-2);padding-bottom:2px;transition:border-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out)}
.tlink:hover{color:var(--blue-deep);border-bottom-color:var(--blue)}
.wb-shots{display:flex;flex-direction:column;gap:var(--space-lg)}
.wb-breakout{grid-column:1/-1;margin-top:var(--space-lg)}
.wb-breakout img{width:100%;border:1px solid var(--line-2);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}
.wb-breakout figcaption{font-size:12.5px;color:var(--muted);padding-top:var(--space-xs)}

/* bento（首页首图区：不等尺寸格子提供节奏） */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md);grid-auto-rows:10rem}
.cell{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-xs);justify-content:flex-start;transition:border-color var(--dur-short) var(--ease-out)}
.cell:not(.cell--img){justify-content:center}
.cell:hover{border-color:var(--line-2)}
.cell h3{font-size:17px}
.cell p{color:var(--muted);font-size:14px}
.cell--img{padding:0;border:1px solid var(--line-2);background:#fff;overflow:hidden}
.cell--img img{width:100%;height:100%;object-fit:cover;object-position:left top}
.cell--img{min-height:0}
.span-2x2{grid-column:span 2;grid-row:span 2}
.span-2x1{grid-column:span 2}
.span-1x2{grid-row:span 2}
.stat-cell{justify-content:center;background:var(--bg-alt)}
.stat-cell b{font-size:30px;color:var(--blue);line-height:1.15;font-weight:800}
.stat-cell span{font-size:13px;color:var(--muted)}

/* 非对称画布网格（12 列，避免三列等宽卡片） */
.cgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space-lg)}
.cgrid article{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:border-color var(--dur-short) var(--ease-out)}
.cgrid article:hover{border-color:var(--line-2)}
.cgrid .c7{grid-column:span 7}
.cgrid .c5{grid-column:span 5}
.cgrid .c12{grid-column:span 12}
.cgrid img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:left top;border-bottom:1px solid var(--line)}
.cgrid .cbody{padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-xs)}
.cgrid h3{font-size:18px}
.cgrid p{color:var(--muted);font-size:14.5px}
.cgrid .cwide{flex-direction:row;align-items:stretch}
.cgrid .cwide figure{margin:0;flex:0 0 58%;border-right:1px solid var(--line)}
.cgrid .cwide img{height:100%;aspect-ratio:auto;border-bottom:0}
.cgrid .cwide .cbody{justify-content:center;flex:1}
.cgrid .more{font-size:14px;font-weight:600;color:var(--blue)}
.cgrid .more:hover{color:var(--orange-deep)}

/* 编号要点行（替代卡片里的 ✓ 项目符号列表） */
.numrows{border-top:1px solid var(--line)}
.numrow{display:grid;grid-template-columns:2.75rem 1fr;gap:var(--space-md);align-items:start;padding:var(--space-lg) 0;border-bottom:1px solid var(--line)}
.numrow .n{font-size:12.5px;font-weight:800;color:var(--orange-deep);letter-spacing:.08em;padding-top:4px}
.numrow h3{font-size:17px}
.numrow p{color:var(--muted);font-size:14.5px;margin-top:4px}

/* 满幅实拍带（E1 出血，父级裁剪 + 全局 overflow-x:clip） */
.bleed{position:relative;overflow:hidden;background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--space-3xl) 0}
.bleed .bleed-figure{width:min(1540px,118%);margin:0 auto}
.bleed .bleed-figure img{width:100%;border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow-lg);background:#fff}
.bleed figcaption{font-size:12.5px;color:var(--muted);margin-top:var(--space-sm);text-align:center}

@media (max-width:1100px){
  .wb-grid{grid-template-columns:1fr;gap:var(--space-2xl)}
  .wb-pane{position:static}
  .bento{grid-template-columns:repeat(2,1fr)}
  .cgrid .c7,.cgrid .c5,.cgrid .c12{grid-column:span 12}
  .cgrid .cwide{flex-direction:column}
  .cgrid .cwide figure{flex:none;border-right:0;border-bottom:1px solid var(--line)}
}
@media (max-width:720px){
  .annotated .callout{display:none}
  .bento{grid-template-columns:1fr}
  .span-2x2,.span-2x1{grid-column:span 1;grid-row:auto}
  .shot-row{grid-template-columns:1fr}
  .spec>div{grid-template-columns:1fr;gap:var(--space-2xs)}
}

/* ════════════════════════════════════════════════════════════════════════════
   工艺层 Craft Pass（2026-09-29）
   依据 hallmark：color.md（OKLCH 纸墨 + 点缀色当高亮器 ≤3%）
                typography.md（字体配对 + 1.25 字阶 + 行距/字距/measure）
                hero-enrichment.md E3 浏览器框 / E4 悬浮实拍 / E7 淡渐变+颗粒
                themes/cobalt.md（发丝线结构 + 等宽标注 + 唯一暗带）
   三个诉求：① 立体感 ② 颜色点缀 ③ 字太紧密
   ════════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url('./fonts/space-grotesk-500.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('./fonts/jetbrains-mono-400.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('./fonts/jetbrains-mono-500.woff2') format('woff2');}


/* ① 纸与墨 —— OKLCH 冷调（hue 256）：不用纯白 #fff，不用纯黑 #000，灰阶带同色相 */
:root{
  --bg:oklch(98.6% .004 256);
  --bg-alt:oklch(96.4% .009 256);
  --panel:oklch(99.3% .003 256);
  --graphite:oklch(22% .022 262);
  --graphite-2:oklch(30% .024 262);
  --on-graphite:oklch(94% .008 262);
  --on-graphite-2:oklch(76% .014 262);
  --line:oklch(90.5% .012 256);
  --line-2:oklch(84.5% .016 256);
  --text:oklch(23.5% .022 258);
  --ink-2:oklch(34% .020 257);
  --muted:oklch(47% .016 257);
  --faint:oklch(54% .014 257);
  --blue-tint:oklch(96.4% .020 258);
  --blue-tint-2:oklch(92.5% .030 258);
  --orange-tint:oklch(96.5% .032 82);
  --orange-line:oklch(88% .060 82);
  --mark-ink:oklch(46% .125 68);          /* 点缀色当文字时的可读版本 */
  /* 层级：真实三段式阴影（色相与纸墨同源，不用纯黑投影） */
  --elev-1:0 1px 1px oklch(30% .03 258/.04), 0 1px 3px oklch(30% .03 258/.07);
  --elev-2:0 2px 4px oklch(30% .03 258/.05), 0 10px 24px -8px oklch(30% .03 258/.12);
  --elev-3:0 4px 10px oklch(30% .03 258/.06), 0 20px 44px -14px oklch(30% .03 258/.15), 0 46px 90px -38px oklch(30% .03 258/.20);
  --elev-float:0 6px 14px oklch(30% .03 258/.07), 0 30px 60px -18px oklch(30% .03 258/.18), 0 70px 120px -50px oklch(30% .03 258/.22);
  --shadow-sm:var(--elev-1); --shadow:var(--elev-2); --shadow-lg:var(--elev-3);
  /* ② 字体配对：展示（拉丁/数字）+ 正文（中文系统字）+ 等宽（眉题/标注/数字）—— 上限三面 */
  --font-display:"Space Grotesk","PingFang SC","Microsoft YaHei","Source Han Sans SC",system-ui,sans-serif;
  --font-body:"PingFang SC","Microsoft YaHei","Source Han Sans SC","Segoe UI",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  /* ③ 字阶 1.25（不是任意增量），一页最多五级 */
  --fs-caption:.875rem;
  --fs-base:1rem;
  --fs-md:1.25rem;
  --fs-lg:1.5625rem;
  --fs-xl:1.9531rem;
  --fs-2xl:2.4414rem;
  --fs-display:clamp(2.5rem,4.4vw + 1rem,4rem);
  --fs-h2:clamp(1.9531rem,2.5vw + .65rem,2.5rem);
  --fs-h3:1.25rem;
}

/* 正文：中文行距放宽（紧密感的根因之一） */
body{font-family:var(--font-body);background:var(--bg);color:var(--text);font-size:var(--fs-base);line-height:1.78}
h1,h2,h3,h4,.wordmark,.brand b{font-family:var(--font-display);letter-spacing:-.012em}
h1{font-size:var(--fs-display);line-height:1.14;font-weight:700}
h2{font-size:var(--fs-h2);line-height:1.28;font-weight:700}
h3{font-size:var(--fs-h3);line-height:1.45;font-weight:700}
.sub{font-size:var(--fs-md);line-height:1.75;color:var(--muted);margin-top:18px;max-width:33em}
.lead-lg{font-size:var(--fs-md);line-height:1.85;color:var(--ink-2);margin-top:22px;max-width:34em}
.lead-lg b{color:var(--text)}

/* 眉题：等宽大写 + 点缀色方块（cobalt 的第 7 号签名 + color.md 的"标题旁小方块"） */
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:var(--fs-caption);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:none;border:0;padding:0;border-radius:0;margin-bottom:22px}
.kicker::before{content:"";width:8px;height:8px;background:var(--orange);flex:0 0 8px}
.kicker.orange{background:none;border:0;color:var(--muted)}

/* 段落标题：点缀色短杠（"标题旁的视觉锚点"） */
h2::before{content:"";display:block;width:30px;height:3px;border-radius:2px;background:var(--orange);margin-bottom:16px}
.center h2::before{margin-left:auto;margin-right:auto}
.cta-panel h2::before{background:var(--orange)}

/* 数字：展示字体 + 等宽数字（数据可读性要求） */
.capa-item b,.stat-cell b,.numrow .n,.spec dd b{font-family:var(--font-display);font-variant-numeric:tabular-nums}
.capa-item b{font-size:1.375rem;font-weight:700;color:var(--blue)}
.numrow .n{font-family:var(--font-mono);font-weight:500;letter-spacing:.06em;color:var(--mark-ink);font-size:var(--fs-caption)}
/* H1 里的强调数字：荧光笔高亮（点缀色当高亮器，不改文字颜色 → 对比度不降） */
.hero h1 .hl{color:var(--text);background-image:linear-gradient(180deg,transparent 56%,color-mix(in oklch,var(--orange) 58%,transparent) 56%);
  background-repeat:no-repeat;padding:0 .06em;border-radius:2px}
/* 标注/图注：等宽小字（cobalt 的机读语气） */
.callout{font-family:var(--font-mono);font-size:13px;letter-spacing:0;background:var(--panel);border-color:var(--line-2);box-shadow:var(--elev-1)}
.callout i{background:var(--orange);width:7px;height:7px}
figcaption,.shot-row figcaption,.cgrid figcaption,.shot .cap,.video .cap,.bleed figcaption{font-size:var(--fs-caption);line-height:1.6;color:var(--muted)}
.capa-item span{font-size:var(--fs-caption);line-height:1.55}
.note-under-cta{font-size:var(--fs-caption);line-height:1.6;color:var(--muted);margin-top:16px}

/* ④ 立体感 —— E4：实拍图悬浮（真实层级 + 16px 圆角），取代 1px 描边的平贴 */
.shot-canvas img,figure.annotated>img,.shot-row img,.wb-breakout img,.bleed-figure img,.cell--img img{box-shadow:var(--elev-2)}
figure.annotated>img,.wb-breakout img{border-color:var(--line);border-radius:16px}
.shot-row img{border-radius:14px}
.cgrid article{box-shadow:var(--elev-1)}
.cgrid article:hover{box-shadow:var(--elev-2)}
.cell{background:var(--panel);box-shadow:var(--elev-1)}
.cell:hover{box-shadow:var(--elev-2);border-color:var(--line-2)}
.cell--img{box-shadow:var(--elev-2);border-radius:16px;overflow:hidden}
/* 卡片面改用带色纸（不是 #fff） */
.card,.dl-card,.faq,.video,.chip,.shot{background:var(--panel)}
.card,.dl-card,.faq{box-shadow:var(--elev-1)}
.card:hover,.dl-card:hover{box-shadow:var(--elev-2);border-color:var(--line-2)}
.video{box-shadow:var(--elev-3)}
/* E3：hero 实拍改成浏览器框（手绘 chrome + 三颗点 + 内嵌面板） */
/* E7：hero 淡渐变 + 颗粒（两停、低彩度，只作用于首屏） */
.hero{position:relative;isolation:isolate;border-bottom:1px solid var(--line);
  background:linear-gradient(168deg, color-mix(in oklch,var(--bg) 100%, var(--orange) 4%) 0%, var(--bg) 44%, color-mix(in oklch,var(--bg) 100%, var(--blue) 3.5%) 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.05;mix-blend-mode:multiply;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
/* 唯一暗带（cobalt 第 8 号签名）：尾段 CTA 由"整片品牌蓝"改为石墨暗带 + 点缀色按钮 */
.cta-panel{background:var(--graphite);color:var(--on-graphite);border:1px solid var(--graphite-2);border-radius:22px;
  box-shadow:var(--elev-float)}
.cta-panel h2{color:oklch(97% .006 262)}
.cta-panel p,.cta-panel .sub{color:var(--on-graphite-2)}
.cta-panel .note-under-cta{color:var(--on-graphite-2)}
.cta-panel .btn-ghost{border-color:oklch(45% .02 262);color:oklch(92% .01 262)}
.cta-panel .btn-ghost:hover{border-color:oklch(62% .03 262)}
/* 满幅实拍带改暗底：让截图浮起来（首页唯一的 light→dark→light 节拍） */
.bleed{background:var(--graphite);border-color:var(--graphite-2)}
.bleed .bleed-figure img{border-color:oklch(38% .022 262);box-shadow:0 30px 70px -22px oklch(8% .02 262/.6), 0 60px 120px -50px oklch(8% .02 262/.5)}
.bleed figcaption{color:var(--on-graphite-2)}

/* ⑤ 更松的排版节奏（"字太紧密"的直接修正） */
.spec{margin-top:34px;border-top:1px solid var(--line)}
.spec>div{grid-template-columns:minmax(9rem,30%) 1fr;gap:32px;padding:22px 0}
.spec dt{font-size:var(--fs-base);font-weight:700;line-height:1.6}
.spec dd{font-size:var(--fs-base);line-height:1.75;color:var(--ink-2)}
.wb-pane .desc{font-size:var(--fs-md);line-height:1.8;color:var(--muted);margin-top:20px}
.wb-pane h2{margin-top:8px}
.cell p{font-size:var(--fs-base);line-height:1.75;color:var(--ink-2)}
.cgrid p{font-size:var(--fs-base);line-height:1.75;color:var(--ink-2)}
.cell{padding:26px;gap:10px}
.cgrid .cbody{padding:26px;gap:12px}
.numrow{padding:26px 0;grid-template-columns:3.25rem 1fr;gap:22px}
.numrow h3{font-size:var(--fs-md)}
.numrow p{font-size:var(--fs-base);line-height:1.75;color:var(--ink-2);margin-top:8px}
.bento{gap:20px}
.cgrid{gap:28px}
.head-block{margin-bottom:56px}
.head-block .sub{margin-top:20px}
.wb-shots{gap:24px}
.tags{gap:10px;margin-top:22px}
.tag{font-size:var(--fs-caption);padding:7px 14px}
/* 导航与按钮：点缀色当高亮器（active 下划线 / 焦点环 / 链接悬停下划线生长） */
.nav a[aria-current="page"]{color:var(--blue);box-shadow:inset 0 -2px 0 0 var(--orange)}
.nav a:hover{color:var(--blue)}
.tlink,.more{color:var(--blue);border-bottom:0;padding-bottom:4px;background-image:linear-gradient(var(--orange),var(--orange));
  background-size:0% 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out)}
.tlink:hover,.more:hover{color:var(--blue-deep);background-size:100% 2px}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:4px}
::selection{background:color-mix(in oklch,var(--orange) 40%,transparent);color:var(--text)}
.btn:focus-visible{outline-offset:3px}

/* ════════ 首屏 Hero 2.0（居中叙事 + 四层视觉叠放）════════
   结构：双行大标题 → 缩小副文案 → 双按钮 → 一句能力说明
        → 视觉区：彩色底板 + 浏览器窗（主截图） + 两张浮起近景
   ═══════════════════════════════════════════════════════ */
.hero{padding:76px 0 100px;text-align:center}
.hero-copy{max-width:60rem;margin:0 auto}
.hero h1{font-size:clamp(2.7rem,5.6vw + .4rem,4.4rem);line-height:1.12;font-weight:700;letter-spacing:-.02em}
.hero h1 span{display:block}
.hero .sub{max-width:47rem;margin:24px auto 0;font-size:var(--fs-md);line-height:1.85;color:var(--muted)}
.hero-cta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero .lead{max-width:46rem;margin:28px auto 0;font-size:var(--fs-base);line-height:1.8;color:var(--ink-2)}
.hero .lead b{color:var(--text)}
/* 视觉区：底板 + 浏览器窗 + 两张浮起近景 = 四层 */
.hero-visual{position:relative;max-width:1060px;margin:60px auto 0;isolation:isolate}
.hero-visual .plate{position:absolute;inset:30px -30px -30px 30px;z-index:0;border-radius:24px;
  background:linear-gradient(150deg,color-mix(in oklch,var(--blue-tint) 82%,transparent),color-mix(in oklch,var(--orange-tint) 74%,transparent));
  box-shadow:var(--elev-1)}
.hero-window{position:relative;z-index:1;background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:46px 12px 12px;box-shadow:var(--elev-float)}
.hero-window::after{content:"";position:absolute;top:0;left:0;right:0;height:38px;z-index:1;border-bottom:1px solid var(--line);
  border-radius:18px 18px 0 0;background:linear-gradient(180deg,oklch(97.6% .005 256),oklch(95.6% .010 256))}
.hero-window::before{content:"";position:absolute;top:15px;left:16px;width:9px;height:9px;border-radius:50%;z-index:2;
  background:oklch(78% .055 28);box-shadow:15px 0 0 oklch(84% .085 82), 30px 0 0 oklch(80% .075 150)}
.hero-window img{border-radius:6px;box-shadow:var(--elev-1)}
.hero-window .cap{display:flex;justify-content:space-between;gap:16px;padding:11px 6px 2px;font-size:var(--fs-caption);color:var(--muted)}
.float-card{position:absolute;z-index:2;margin:0;padding:10px;border-radius:14px;background:var(--panel);border:1px solid var(--line);
  box-shadow:var(--elev-float)}
.float-card img{width:100%;border-radius:9px;border:1px solid var(--line)}
.float-card figcaption{padding-top:9px;font-family:var(--font-mono);font-size:12px;line-height:1.45;color:var(--muted);text-align:left}
.fc-a{left:-140px;bottom:44px;width:232px}
.fc-b{right:-140px;top:118px;width:232px}
@media (max-width:1100px){
  .hero{padding:68px 0 84px}
  .hero-visual{margin-top:58px}
  .hero-visual .plate{inset:22px -16px -20px 16px}
  .fc-a{left:-10px;bottom:30px;width:196px}
  .fc-b{right:-8px;top:84px;width:180px}
}
@media (max-width:720px){
  .hero{padding:56px 0 72px;text-align:left}
  .hero h1{font-size:clamp(2.1rem,9vw,2.9rem)}
  .hero-copy{max-width:none}
  .hero .sub{margin-left:0;margin-right:0}
  .hero .sub br{display:none}
  .hero-cta{justify-content:flex-start}
  .hero .lead{margin-left:0}
  .hero-visual{margin-top:40px}
  .hero-visual .plate{display:none}
  .float-card{display:none}
  .hero-window{padding:40px 8px 8px}
}

/* ════════════════════════════════════════════════════════════════
   首页 · 第三屏「五工作区舞台」（2026-10-02 定稿合入，源=hero-preview.html 逐字节移植）
   页签 12s 轮换 + 每页签 3 张整图 4s 自切；行为脚本在 index.html 尾部。
   本块为「新主页方向」组件块，特例登记见 design.md（进度条 linear / 轮播 infinite /
   页签 accent 与卡底 inline style / cta-mid 胶囊按钮作用域覆写）。
   ════════════════════════════════════════════════════════════════ */
.ws-sec{
  background:
    radial-gradient(rgba(0,72,157,.06) 1.1px, transparent 1.3px) 0 0/26px 26px,
    var(--paper);
  padding:104px 24px 96px;
}
.ws-sec{--ink-2:#3E4F66} /* 预览稿 caption 墨色，按定稿保真（比全局 --ink-2 略浅） */
.s2-wrap{max-width:1160px;margin:0 auto}
.s2-head{text-align:center}
.s2-head h2{font-size:clamp(28px,3.2vw,38px);font-weight:800;color:var(--ink);letter-spacing:.01em}
.s2-head h2::before{display:none} /* 全局 h2 橙短杠（site.css 工艺层）在居中标题下成左缘悬空杂条，预览定稿无短杠——抑制 */
.s2-head p{margin-top:16px;font-size:16.5px;color:var(--muted)}
/* 滚动入场（新主页方向件；reduced-motion 降级见块尾） */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.28s}
.rv-d4{transition-delay:.38s}.rv-d5{transition-delay:.48s}
.ws-tabs{margin-top:52px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.ws-tab{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--muted);padding:11px 18px 13px;border-radius:12px;position:relative;cursor:pointer;border:none;background:none;font-family:inherit;transition:color .18s}
.ws-tab svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ws-tab:hover{color:var(--ink)}
.ws-tab.on{color:var(--ink);font-weight:700}
.ws-tab::after{content:"";position:absolute;left:16px;right:16px;bottom:6px;height:3px;border-radius:2px;background:var(--orange);transform:scaleX(0);transform-origin:left}
.ws-tabs.auto .ws-tab.on::after{animation:tabprog 12s linear forwards}
.ws-tabs:not(.auto) .ws-tab.on::after{transform:scaleX(1)}
@keyframes tabprog{to{transform:scaleX(1)}}
/* 整屏黑框方案：深色窗口 chrome 条 + 滚动大图舞台（左句组+右白卡影像）+ 轮换圆点。
   黑框底色统一深墨蓝，影像一律白卡承载；每页签 accent 只做微光与题注图标着色 */
.ws-stage{margin-top:14px;background:#121A2E;border:1.5px solid var(--ink);border-radius:18px;box-shadow:2px 2px 0 rgba(23,35,59,.22);overflow:hidden}
.ws-panel{display:none;--ac:#00489D;--deep:#090C12;--deep2:color-mix(in srgb,#0D1119 95%,var(--ac) 5%);background:linear-gradient(180deg,var(--deep2),var(--deep) 58%)}
.ws-panel.on{display:flex;flex-direction:column;animation:panelfade .5s var(--ease)}
@keyframes panelfade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* 深色窗口 chrome 条 */
.stage-bar{display:flex;align-items:center;gap:8px;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035)}
.stage-bar .dot{width:11px;height:11px;border-radius:50%}
.stage-addr{margin:0 auto;font-size:12px;color:rgba(250,249,245,.55);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:3px 46px}
/* 滚动大图舞台：整屏=chrome 条+大图（无独立题注条，文字并入句组）；每屏自带气氛底——
   同族 accent 光斑换位置换密度 + 一圈细轨道环（呼应节点连线）+ 点阵变距，全舞台再叠胶片颗粒与暗角 */
.stage-slides{position:relative;aspect-ratio:16/8.4;min-height:500px;background:transparent;box-shadow:inset 0 0 130px rgba(3,8,20,.45)}
.stage-slides::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.sl{position:absolute;inset:0;display:flex;align-items:stretch;gap:26px;padding:30px 36px 34px;opacity:0;transition:opacity .55s var(--ease);pointer-events:none}
.sl.on{opacity:1;pointer-events:auto}
.sl-a{background:
  radial-gradient(circle 220px at 86% 16%, transparent 218px, rgba(255,255,255,.075) 219px, transparent 222px),
  radial-gradient(700px 380px at 80% 20%, color-mix(in srgb,var(--ac) 19%,transparent), transparent 64%),
  radial-gradient(520px 300px at 6% 98%, color-mix(in srgb,var(--ac) 10%,transparent), transparent 70%),
  radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px) 0 0/26px 26px}
.sl-b{background:
  radial-gradient(circle 150px at 5% 82%, transparent 148px, rgba(255,255,255,.06) 149px, transparent 152px),
  radial-gradient(640px 400px at 12% 12%, color-mix(in srgb,var(--ac) 17%,transparent), transparent 62%),
  linear-gradient(115deg, transparent 56%, color-mix(in srgb,var(--ac) 8%,transparent) 84%, transparent 100%),
  radial-gradient(rgba(255,255,255,.045) 1px, transparent 1.3px) 0 0/34px 34px}
.sl-c{background:
  radial-gradient(circle 260px at 97% 98%, transparent 258px, rgba(255,255,255,.06) 259px, transparent 262px),
  radial-gradient(720px 420px at 44% 120%, color-mix(in srgb,var(--ac) 18%,transparent), transparent 66%),
  radial-gradient(420px 260px at 92% 6%, rgba(255,255,255,.045), transparent 70%),
  radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px) 12px 18px/21px 21px}
.sl-vis{display:contents}
/* 10-02 六页签：文案列按签左右轮换（flip=文案在右）；底色分系由 --ac 派生 --deep */
.ws-panel.flip .sl{flex-direction:row-reverse}
/* 左侧句组三段：报头（工作区+钩子）/ 功能句（编号+大标题+补充半句）/ 落款（介绍+链接）——原题注条文字全数并入 */
.sl-copy{flex:0 0 288px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:6px 0 2px}
.sl-mast{display:flex;flex-direction:column;gap:9px}
.cap-id{display:flex;align-items:center;gap:9px}
.cap-id svg{width:19px;height:19px;color:color-mix(in srgb,var(--ac) 50%,#fff);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cap-id b{font-size:14px;font-weight:800;color:#F6F3EA;letter-spacing:.02em}
.cap-hook{font-size:15px;font-weight:700;color:rgba(246,243,234,.92);text-decoration:underline wavy var(--orange);text-decoration-thickness:1.8px;text-underline-offset:7px;text-decoration-skip-ink:none;align-self:flex-start}
.sl-feat{display:flex;flex-direction:column;gap:12px}
.sl-no{font-size:12.5px;font-weight:700;letter-spacing:.24em;color:var(--orange)}
.sl-feat b{font-size:26px;line-height:1.42;font-weight:800;color:#F6F3EA;letter-spacing:.01em;text-wrap:balance}
.sl-feat p{margin:1px 0 0;font-size:15px;line-height:1.85;color:rgba(246,243,234,.62)}
.sl-foot{display:flex;flex-direction:column;gap:13px}
.sl-intro{margin:0;font-size:12.5px;line-height:1.85;color:rgba(246,243,234,.5)}
.stage-link{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:700;color:var(--orange)}
.stage-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s var(--ease)}
.stage-link:hover svg{transform:translateX(4px)}
/* 白卡影像：黑框内统一白卡承载截图，卡片自身给出边界（截图边不读作「切断节点」） */
.sl-card{margin:0;position:relative;display:flex;flex-direction:column;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 22px 54px rgba(4,10,24,.55)}
.sl-card img{display:block;width:100%;flex:1;min-height:0;object-fit:cover}
.sl-card img.contain{object-fit:contain}
.sl-card figcaption{flex:none;font-size:12px;font-weight:700;color:var(--ink-2);text-align:center;padding:7px 6px;border-top:1px solid #F2EFE6;background:#fff}
/* 导图①：提示词输入卡（真实 AI 面板截块，微倾漂浮）+ 成图整卡（contain 不裁切） */
.grow-input{margin:0;flex:0 0 380px;align-self:center;background:#fff;border-radius:12px;padding:9px 9px 7px;transform:rotate(-2deg);box-shadow:0 22px 54px rgba(4,10,24,.5)}
.grow-input img{display:block;width:100%;border:1px solid #F0EDE4;border-radius:7px}
.grow-input figcaption{font-size:12px;font-weight:700;color:var(--ink-2);padding:7px 4px 1px;display:flex;align-items:center;gap:6px}
.grow-input figcaption svg{width:13px;height:13px;color:var(--ac);fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sl-grow{justify-content:space-between}
.sl-grow .grow-map{flex:0 0 310px}
.sl-grow .grow-map img{object-fit:contain}
/* 裁切边淡出：换装/特写卡的截图四边渐隐入白卡，消除「中文被拦腰切」的误切感（题注条同白不受影响；双层 mask 交集=四边） */
.sl-swap .sl-card img,.sl-trio .sl-card img{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#fff 24px,#fff calc(100% - 26px),transparent),linear-gradient(90deg,transparent 0,#fff 24px,#fff calc(100% - 24px),transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0,#fff 24px,#fff calc(100% - 26px),transparent),linear-gradient(90deg,transparent 0,#fff 24px,#fff calc(100% - 24px),transparent);
  mask-composite:intersect;
}
/* 导图②：换装 2+1 拼版（鱼骨通栏近乎完整）；③：三件特写 4:5 栅格 */
.sl-swap .sl-vis{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1.34fr 1fr;gap:14px}
.sl-swap .sw-fish{grid-column:1/3}
.sl-trio .sl-vis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-content:center}
.sl-trio .sl-card img{aspect-ratio:4/5;flex:none}
/* 单卡页签：contain 不裁切（画布同色卡底=无缝） */
.sl-one .sl-card{flex:1 1 auto}
.sl-one .sl-card img{object-fit:contain}
/* 六页签新构图：AI① 摞叠堆（10-03 公子标注稿：三张摞起、最大居底、左右两张各压其上重叠一部）/ 导图① 布局面板通栏+双剪影 */
.sl-stack .sl-vis{display:block;position:relative;flex:1 1 auto;min-width:0}
.sl-stack .sl-card{position:absolute;box-shadow:0 26px 64px rgba(2,6,16,.6),0 6px 18px rgba(2,6,16,.42);border:1px solid rgba(255,255,255,.12)}
/* 10-03 1.xdt 数据级排布（公子流程图页手摆）：长图居中偏左全高 +18°、模板居左 -13°、欢迎段右下正放；三卡等宽≈29%，contain 原比例零放大 */
.sl-stack .stk-main{left:37.3%;top:0;width:29.4%;z-index:2;transform:rotate(18deg)}
.sl-stack .stk-main img{object-fit:contain}
.sl-stack .stk-side{left:7.3%;top:15.7%;width:28.7%;z-index:3;transform:rotate(-13deg)}
.sl-stack .stk-side img{object-fit:contain}
.sl-stack .stk-corner{left:63.5%;top:49%;width:29.2%;z-index:1}
.sl-stack .stk-corner img{object-fit:contain}
.sl-mix .sl-vis{display:grid;grid-template-columns:.92fr 1.08fr;grid-template-rows:1.3fr 1fr;gap:14px}
.sl-mix .mx-tall{grid-row:1/3}
.vstack{display:flex;flex-direction:column;gap:14px;flex:1 1 auto;min-width:0}
.vstack .sl-card{flex:1 1 0}
/* 卡间「一键整理」式箭头（flow① 前后对照） */
.sl-arrow{flex:0 0 46px;align-self:center;color:var(--orange);opacity:.9}
.sl-arrow svg{display:block;width:100%}
.sl-arrow path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* 轮换圆点（替代缩略图排） */
.sl-dots{position:absolute;left:50%;bottom:13px;transform:translateX(-50%);display:flex;gap:8px;z-index:5}
.sd{width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.26);border:none;padding:0;cursor:pointer;transition:width .25s var(--ease),background .25s}
.sd.on{width:22px;background:var(--orange)}
/* 10-03 公子：横条整体去掉，只留一个居中的「免费使用」按钮 */
.cta-mid{margin-top:64px;display:flex;justify-content:center}

/* AI 签浅色试验（10-03 公子「改成浅色看看效果」）：暖纸底+深字，卡片白影改深边 */
.ws-panel.ws-light{--deep:#F4EFE4;--deep2:#F8F4EB;background:linear-gradient(180deg,var(--deep2),var(--deep) 58%)}
.ws-panel.ws-light .stage-bar{border-bottom-color:rgba(20,26,38,.12);background:rgba(20,26,38,.04)}
.ws-panel.ws-light .stage-addr{color:rgba(20,26,38,.6);background:rgba(20,26,38,.05);border-color:rgba(20,26,38,.12)}
.ws-panel.ws-light .stage-slides{box-shadow:inset 0 0 130px rgba(120,104,70,.14)}
.ws-panel.ws-light .cap-id b,.ws-panel.ws-light .sl-feat b{color:#33291A}
.ws-panel.ws-light .cap-hook{color:rgba(51,41,26,.92)}
.ws-panel.ws-light .sl-feat p{color:rgba(51,41,26,.62)}
.ws-panel.ws-light .sl-intro{color:rgba(51,41,26,.52)}
.ws-panel.ws-light .stage-link{color:#D9480F}
.ws-panel.ws-light .sl-no{color:#D9480F}
.ws-panel.ws-light .sl-a,.ws-panel.ws-light .sl-b,.ws-panel.ws-light .sl-c{background:
  radial-gradient(circle 220px at 86% 16%, transparent 218px, rgba(20,26,38,.08) 219px, transparent 222px),
  radial-gradient(700px 380px at 80% 20%, color-mix(in srgb,var(--ac) 16%,transparent), transparent 64%),
  radial-gradient(520px 300px at 6% 98%, color-mix(in srgb,var(--ac) 9%,transparent), transparent 70%),
  radial-gradient(rgba(20,26,38,.055) 1px, transparent 1.4px) 0 0/26px 26px}
.ws-panel.ws-light .sl-b{background:
  radial-gradient(circle 150px at 5% 82%, transparent 148px, rgba(20,26,38,.06) 149px, transparent 152px),
  radial-gradient(640px 400px at 12% 12%, color-mix(in srgb,var(--ac) 14%,transparent), transparent 62%),
  linear-gradient(115deg, transparent 56%, color-mix(in srgb,var(--ac) 7%,transparent) 84%, transparent 100%),
  radial-gradient(rgba(20,26,38,.05) 1px, transparent 1.3px) 0 0/34px 34px}
.ws-panel.ws-light .sl-c{background:
  radial-gradient(circle 260px at 97% 98%, transparent 258px, rgba(20,26,38,.06) 259px, transparent 262px),
  radial-gradient(720px 420px at 44% 120%, color-mix(in srgb,var(--ac) 15%,transparent), transparent 66%),
  radial-gradient(420px 260px at 92% 6%, rgba(255,255,255,.5), transparent 70%),
  radial-gradient(rgba(20,26,38,.055) 1px, transparent 1.4px) 12px 18px/21px 21px}
.ws-panel.ws-light .sl-card{border:1px solid #E4DDCB;box-shadow:0 22px 54px rgba(84,66,32,.18)}
.ws-panel.ws-light .sd{background:rgba(20,26,38,.22)}
.ws-panel.ws-light .sd.on{background:#D9480F}


/* AI② 定时任务双卡（10-03 公子：图2 创建表单正放主卡、图1 空列表面板倾斜交叠） */
.sl-duo .sl-vis{display:block;position:relative;flex:1 1 auto;min-width:0}
.sl-duo .sl-card{position:absolute}
.sl-duo .duo-main{left:38%;top:2%;width:47%;z-index:2}
.sl-duo .duo-main img{object-fit:contain}
.sl-duo .duo-float{left:4%;bottom:5%;width:47%;z-index:1;transform:rotate(-6deg)}
.sl-duo .duo-float img{object-fit:contain}


/* AI③ 精读三卡（10-03 公子 1.xdt 第二流程页排布）：精读卡右下 +12°、选择弹窗中上 +3°、附件菜单左下 -14°；原比例零放大 */
.sl-trio3 .sl-vis{display:block;position:relative;flex:1 1 auto;min-width:0}
.sl-trio3 .sl-card{position:absolute}
.sl-trio3 .t3-distill{left:19.7%;top:76%;width:33.9%;z-index:1;transform:rotate(-14deg)}
.sl-trio3 .t3-pick{left:13.4%;top:1.3%;width:38.7%;z-index:2;transform:rotate(3deg)}
.sl-trio3 .t3-attach{left:51.5%;top:42%;width:34.7%;z-index:3;transform:rotate(12deg)}
.sl-trio3 .sl-card img{object-fit:contain}


/* ═══ 彩色浅底页签通用系统（10-03 公子「四签换彩底不用黑，色相随素材」）═══
   亮色顶→底部渐白；文字上白下深（.sl-intro 落浅区用签色深档）；卡/舞台软影随签色；
   每签只声明色变量（ws-lilac/teal/azure/leaf/amber），规则一份共用 */
.ws-panel.ws-bright{background:linear-gradient(180deg,var(--bright) 0%,var(--bright-mid) 45%,var(--bright-soft) 78%,var(--bright-end) 100%)}
.ws-panel.ws-bright .stage-bar{border-bottom-color:rgba(255,255,255,.18);background:rgba(255,255,255,.08)}
.ws-panel.ws-bright .stage-addr{color:rgba(255,255,255,.85);background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22)}
.ws-panel.ws-bright .stage-slides{box-shadow:inset 0 0 110px var(--inset-glow)}
.ws-panel.ws-bright .cap-id b,.ws-panel.ws-bright .sl-feat b{color:#FFFFFF}
.ws-panel.ws-bright .cap-hook{color:rgba(255,255,255,.95)}
.ws-panel.ws-bright .sl-feat p{color:rgba(255,255,255,.75)}
.ws-panel.ws-bright .sl-intro{color:var(--ink-deep)}
.ws-panel.ws-bright .stage-link{color:#D9480F}
.ws-panel.ws-bright .sl-no{color:var(--no-c,#FFE066)}
.ws-panel.ws-bright .sl-a,.ws-panel.ws-bright .sl-b,.ws-panel.ws-bright .sl-c{background:
  radial-gradient(circle 220px at 86% 16%, transparent 218px, rgba(255,255,255,.15) 219px, transparent 222px),
  radial-gradient(700px 380px at 80% 20%, rgba(255,255,255,.18), transparent 64%),
  radial-gradient(520px 300px at 6% 98%, rgba(255,255,255,.4), transparent 70%),
  radial-gradient(rgba(255,255,255,.1) 1px, transparent 1.4px) 0 0/26px 26px}
.ws-panel.ws-bright .sl-b{background:
  radial-gradient(circle 150px at 5% 82%, transparent 148px, rgba(255,255,255,.2) 149px, transparent 152px),
  radial-gradient(640px 400px at 12% 12%, rgba(255,255,255,.15), transparent 62%),
  linear-gradient(115deg, transparent 56%, rgba(255,255,255,.3) 84%, transparent 100%),
  radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.3px) 0 0/34px 34px}
.ws-panel.ws-bright .sl-c{background:
  radial-gradient(circle 260px at 97% 98%, transparent 258px, rgba(255,255,255,.25) 259px, transparent 262px),
  radial-gradient(720px 420px at 44% 120%, rgba(255,255,255,.35), transparent 66%),
  radial-gradient(420px 260px at 92% 6%, rgba(255,255,255,.12), transparent 70%),
  radial-gradient(rgba(255,255,255,.1) 1px, transparent 1.4px) 12px 18px/21px 21px}
.ws-panel.ws-bright .sl-card{border:1px solid rgba(255,255,255,.55);box-shadow:0 16px 38px var(--card-shadow)}
.ws-panel.ws-bright .sd{background:rgba(255,255,255,.45)}
.ws-panel.ws-bright .sd.on{background:#D9480F}
/* 亮底签激活时软化舞台外框：白边+签色软影（黑边硬影只留在未接亮底的签） */
.ws-stage:has(.ws-panel.ws-bright.on){border-color:#fff;box-shadow:0 26px 64px var(--stage-shadow)}
/* 每签色板：顶/中/柔/尾四站+配套字影（flow 青随整理前后画布、arch 蓝随泳道分层卡、kb 绿随签色、kg 橙随签色；lilac=原导图紫白值） */
.ws-lilac{--bright:#7B26F9;--bright-mid:#8A3FFA;--bright-soft:#C9A8FF;--bright-end:#F3ECFF;--ink-deep:#5B21B6;--card-shadow:rgba(96,40,190,.18);--stage-shadow:rgba(109,40,217,.28);--inset-glow:rgba(58,10,140,.18)}
.ws-teal{--bright:#0CA6A4;--bright-mid:#2BC5B9;--bright-soft:#A8EDE4;--bright-end:#F0FBF9;--ink-deep:#0B6B62;--card-shadow:rgba(14,148,136,.20);--stage-shadow:rgba(14,148,136,.26);--inset-glow:rgba(8,104,96,.15)}
.ws-azure{--bright:#4C6EF5;--bright-mid:#748FFC;--bright-soft:#C3D2FE;--bright-end:#F0F4FE;--ink-deep:#364FC7;--card-shadow:rgba(76,110,245,.20);--stage-shadow:rgba(76,110,245,.26);--inset-glow:rgba(51,74,193,.15)}
.ws-leaf{--bright:#37B24D;--bright-mid:#5BC464;--bright-soft:#B9EBC1;--bright-end:#F1FBF2;--ink-deep:#2B7A3B;--card-shadow:rgba(47,158,68,.20);--stage-shadow:rgba(47,158,68,.26);--inset-glow:rgba(31,110,48,.15)}
.ws-amber{--bright:#F76707;--bright-mid:#FB922B;--bright-soft:#FFD9A8;--bright-end:#FFF6EC;--ink-deep:#8A3D0F;--no-c:#FFFFFF;--card-shadow:rgba(232,89,12,.20);--stage-shadow:rgba(232,89,12,.26);--inset-glow:rgba(140,60,10,.15)}
/* 卡贴图=卡框锁素材真实比例（卡即图，contain 不再露卡底）：tall 面板按高定宽、宽图按宽定高居中 */
.sl-mix .sl-vis{grid-template-columns:auto 1fr}
.sl-mix .mx-tall{height:100%;aspect-ratio:578/1213;width:auto;justify-self:center}
.sl-mix .mx-tall img{width:100%;height:auto;flex:1;min-height:0;object-fit:contain}
.sl-mix .mx-fish,.sl-mix .mx-time{width:100%;height:auto;align-self:center}
.sl-mix .mx-fish img,.sl-mix .mx-time img{width:100%;height:auto;flex:none}
/* 节点即文档单卡：卡框=公式画布真实比例（.sl-one 的 flex:1 同特异性压住禁 grow），卡底=画布同色缝合 */
.sl-one .mx-doc{aspect-ratio:845/775;width:auto;height:100%;margin:0 auto;flex:none;min-width:0}

@media (max-width:1080px){
  .ws-tabs{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .stage-slides{aspect-ratio:auto;height:470px}
  .sl{flex-direction:column;align-items:stretch;gap:11px;padding:15px 18px 28px}
  .sl-copy{flex:none;gap:9px;padding:0}
  .sl-mast{flex-direction:row;align-items:center;gap:14px;min-width:0}
  .cap-hook{align-self:auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sl-feat{flex-direction:row;align-items:baseline;gap:12px}
  .sl-feat b{font-size:19px;line-height:1.3;flex:none}
  .sl-feat p{margin:0;font-size:13px;line-height:1.55}
  .sl-foot{flex-direction:row;align-items:center;gap:14px}
  .sl-intro{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stage-link{flex:none;align-self:auto}
  .sl-vis{display:flex;gap:12px;flex:1;min-height:0}
  .sl-vis .sl-card{flex:1 1 0 !important;min-width:0}
  .sl-stack .sl-card{position:static;transform:none;width:auto;height:100%}
  .sl-duo .sl-card{position:static;transform:none;width:auto;height:100%}
  .sl-trio3 .sl-card{position:static;transform:none;width:auto;height:100%}
  .ws-panel.flip .sl{flex-direction:column}
  .sl-arrow{display:none}
  .grow-input{flex:1.15;align-self:center}
  .sl-grow .grow-map{flex:.85}
  .sl-swap .sl-vis{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1.34fr 1fr;gap:12px}
  .sl-trio .sl-vis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-content:center}
}
@media (max-width:720px){
  .stage-slides{height:430px}
  .sl{padding:12px 13px 24px;gap:10px}
  .sl-intro{display:none}
  .cap-id b{font-size:13px}
  .cap-hook{font-size:13px;text-underline-offset:5px}
  .sl-feat{flex-direction:column;align-items:flex-start;gap:5px}
  .sl-feat b{font-size:15.5px}
  .sl-feat p{margin:0;font-size:12px;line-height:1.5}
  .sl-one .sl-card img{object-fit:cover;object-position:top}
  /* 窄屏换装组只留鱼骨独占（时间轴/矩阵小卡再裁切不可用）；卡高随鱼骨原始比例，整图 contain 零裁切，撤 mask 保鱼头完整 */
  .sl-swap .sl-vis{grid-template-rows:1fr}
  .sl-swap .sl-card:not(.sw-fish){display:none}
  .sl-swap .sw-fish{align-self:center}
  .sl-swap .sw-fish img{flex:none;height:auto;aspect-ratio:2.82;object-fit:contain;object-position:center;-webkit-mask-image:none;mask-image:none}
  /* 窄屏：扇形层叠只留主卡+竖卡两联；换装 mix 只留布局面板通栏 */
  .sl-stack .stk-corner{display:none}
  .sl-mix .sl-vis{grid-template-columns:1fr;grid-template-rows:1fr}
  .sl-mix .sl-card:not(.mx-tall){display:none}
  .sl-mix .mx-tall{grid-row:auto}
  .stage-addr{padding:3px 18px}
  .stage-link{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .ws-tab::after{transition:none}
  .ws-tabs.auto .ws-tab.on::after{animation:none;transform:scaleX(1)}
  .ws-panel.on{animation:none}
  .sl{transition:none}
}

/* 「功能」下拉（2026-10-08 全站统一：六功能区直达功能页） */
.nav-dd{position:relative}
.nav-dd-btn{display:inline-flex;align-items:center;gap:5px;font:inherit;color:var(--muted);background:none;border:none;padding:4px 0;cursor:pointer;font-family:inherit;border-bottom:2px solid transparent}
.nav-dd-btn:hover{color:var(--text);border-bottom-color:var(--orange)}
.nav-dd-btn .caret{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-short) var(--ease-out)}
.nav-dd:hover .caret,.nav-dd:focus-within .caret,.nav-dd.open .caret{transform:rotate(180deg)}
.nav-dd-menu{position:absolute;left:50%;top:100%;transform:translate(-50%,6px);min-width:150px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 36px rgba(23,35,59,.16);padding:7px;display:flex;flex-direction:column;gap:1px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out),visibility var(--dur-short);z-index:60}
.nav-dd-menu::before{content:"";position:absolute;left:-8px;right:-8px;top:-14px;height:14px}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu,.nav-dd.open .nav-dd-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,2px)}
.nav-dd-menu a{padding:8px 12px;border-radius:8px;font-size:14px;color:var(--muted);border-bottom:none;white-space:nowrap}
.nav-dd-menu a:hover{background:var(--blue-tint);color:var(--text);border-bottom:none}
/* 语言切换器（EN 页回中文站） */

/* ── 体验页：应用区吃满剩余视口（10-09 公子「窗口比较小，上线后会铺满吗」→ 口径改铺满）── */
body.page-try{display:flex;flex-direction:column;min-height:100vh}
body.page-try .stage{flex:1 0 auto;min-height:calc(100vh - 128px)}

/* ── 体验页：全屏体验按钮 + 沉浸模式（10-09 公子）── */
.fs-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border:1px solid var(--line-2);border-radius:9px;background:#fff;font-size:13.5px;color:var(--text);cursor:pointer;font-family:inherit;white-space:nowrap;transition:border-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out)}
.fs-btn:hover{border-color:var(--blue);color:var(--blue)}
.fs-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.page-try.try-fs .nav,body.page-try.try-fs .trybar,body.page-try.try-fs footer{display:none}
body.page-try.try-fs .stage{min-height:100vh}
.fs-exit{position:absolute;right:16px;bottom:16px;z-index:30;display:none;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(23,35,59,.72);color:#fff;font-size:13px;cursor:pointer;font-family:inherit;backdrop-filter:blur(6px)}
.fs-exit:hover{background:rgba(23,35,59,.9)}
.fs-exit svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
body.page-try.try-fs .fs-exit{display:inline-flex}