/* 全站共用：配色与字、方按钮、顶栏（通知条 + 玻璃导航 + 下载菜单）、格子、导览、页脚、进场。各页自己的版式写在各页里。 */
:root{
  --ink:#1d1a1a; --muted:#575f66; --paper:#fcfafa; --panel:#f4f3f2; --line:#dedad7;
  --green:#275c47;
  --page:min(1328px,calc(100% - 112px));
  --head:Manrope,"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
  --body:Inter,"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
  --mono:"IBM Plex Mono","SF Mono",Menlo,"PingFang SC",monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:only light;   /* 只做了浅色：别让安卓浏览器的「强制深色」把整页反色 */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
h1,h2,h3,p{text-wrap:pretty}   /* 折行时末行别只剩一个字（「尺。」） */
h1,h2,h3{font-family:var(--head);font-weight:400;word-break:keep-all;overflow-wrap:anywhere}
h1{font-size:clamp(40px,6vw,84px);line-height:1.1;letter-spacing:-.035em}
h2{font-size:clamp(30px,3.6vw,52px);line-height:1.14;letter-spacing:-.035em}
h3{font-size:clamp(22px,2.1vw,30px);line-height:1.2;letter-spacing:-.025em}
.mono{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--muted)}
svg.arr{width:13px;height:13px;flex:none;transition:transform .18s}

#sky{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.site{position:relative;z-index:1}

/* 按钮：方的 */
.btn{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 18px;font:500 14px/1 var(--body);background:var(--ink);color:#fff;border:1px solid var(--ink);transition:font-weight .18s,background .18s}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.white{background:#fff;color:var(--ink);border-color:#fff}
@media (hover:hover){.btn:hover{font-weight:600}.btn.ghost:hover{border-color:var(--ink)}.btn:hover svg{transform:translate(2px,-2px)}}

/* 顶栏：一条版本通知 + 一条分格的玻璃横杆；往下滚通知收走，底边一条细线记阅读进度 */
.top{position:fixed;top:0;left:0;right:0;z-index:20;transition:transform .45s var(--ease)}
.top.up{transform:translateY(-32px)}
.annc{display:flex;align-items:center;justify-content:center;gap:12px;height:32px;background:var(--ink);color:#e9e6e3;font-size:13px;transition:background .2s}
.annc i{width:6px;height:6px;border-radius:50%;background:#6fc79b;box-shadow:0 0 0 0 rgba(111,199,155,.6);animation:ping 2.4s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(111,199,155,.55)}70%,100%{box-shadow:0 0 0 7px rgba(111,199,155,0)}}
.annc .v{font:500 12px/1 var(--mono);letter-spacing:.06em;color:#fff;padding:3px 6px;border:1px solid rgba(255,255,255,.28)}
.annc svg{opacity:.7}
@media (hover:hover){.annc:hover{background:#2c2828}.annc:hover svg{transform:translate(2px,-2px);opacity:1}}
.nav{position:relative;height:56px;display:grid;grid-template-columns:auto 1fr auto;align-items:stretch;
  background:rgba(252,250,250,.66);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid var(--line)}
.nav::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(260px 120px at var(--mx,50%) var(--my,-30%),rgba(255,255,255,.6),rgba(255,255,255,0) 70%);mix-blend-mode:screen}
.nav>*{position:relative;display:flex;align-items:center}
.brand{gap:10px;padding:0 24px 0 20px;border-right:1px solid var(--line);font:500 19px/1 var(--head);letter-spacing:-.02em}
.brand img{width:26px;height:26px;border-radius:7px;transition:transform .5s var(--ease)}
@media (hover:hover){.brand:hover img{transform:rotate(-8deg) scale(1.06)}}
.nav nav{gap:6px;padding:0 18px}
.nav nav a{position:relative;height:100%;display:flex;align-items:center;padding:0 14px;font-size:15px;font-weight:500;color:#3a3636;transition:color .15s}
.nav nav a:hover{color:var(--ink)}
.nav nav .bar{position:absolute;bottom:-1px;left:0;height:2px;width:0;background:var(--ink);opacity:0;transition:transform .35s var(--ease),width .35s var(--ease),opacity .2s}
.nav .end{gap:0;border-left:1px solid var(--line)}
.mnu,.nav nav .nlog{display:none}
.nav .login{height:100%;display:flex;align-items:center;padding:0 22px;font-size:15px;font-weight:500;border-right:1px solid var(--line);transition:background .2s}
@media (hover:hover){.nav .login:hover{background:rgba(244,243,242,.8)}}
.dl{position:relative;height:100%;display:flex;align-items:center;padding:0 12px}
.dl>.btn{height:36px;padding:0 14px 0 16px;gap:8px;cursor:pointer}
.dl>.btn .car{width:10px;height:10px;transition:transform .25s var(--ease)}
.dl.open>.btn .car{transform:rotate(180deg)}
.dl-menu{position:absolute;top:calc(100% + 1px);right:-1px;width:430px;background:rgba(252,250,250,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(29,26,26,.3);
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .2s,transform .3s var(--ease)}
.dl.open .dl-menu{opacity:1;transform:none;pointer-events:auto}
.dl-menu .mono{display:block;padding:14px 18px 10px;font-size:12px;border-bottom:1px solid var(--line)}
.plat{display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);font-size:14px;transition:background .15s}
.plat:last-child{border-bottom:0}
.plat b{font-weight:500;white-space:nowrap}
.dl-menu .plat{grid-template-columns:150px 1fr auto}
.plat span{color:var(--muted);font-size:13px}
.plat em{font:500 12px/1 var(--mono);font-style:normal;color:var(--ink);display:flex;align-items:center;gap:6px}
.dlt .plat.rec{background:rgba(39,92,71,.045)}
.plat.rec b::after{content:"你的电脑";margin-left:8px;font:500 10px/1 var(--mono);letter-spacing:.04em;color:var(--green);border:1px solid rgba(39,92,71,.45);padding:2px 4px;vertical-align:2px}
@media (hover:hover){.plat:hover{background:var(--panel)}.plat:hover em{text-decoration:underline;text-underline-offset:4px}}
.prog{position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--green);transform-origin:0 50%;transform:scaleX(0)}

/* 格子：横线通栏，竖线只在内容列两侧 */
main{border-top:1px solid var(--line)}
.sec{border-bottom:1px solid var(--line);scroll-margin-top:56px}
.col{width:var(--page);margin-inline:auto;border-inline:1px solid var(--line);background:rgba(252,250,250,.62)}
.sh{padding:64px 32px 44px;border-bottom:1px solid var(--line)}
.sh h2{max-width:36ch}
.sh .lead{color:var(--muted);font-size:17px;line-height:1.75;max-width:60ch;margin-top:18px}

/* 派活：左边一步一步往下滚，右边一扇窗粘住、跟着播哪一步（v0.2.53 真界面复刻，见 ui/demo.js） */
.tour{display:grid;grid-template-columns:340px minmax(0,1fr)}
.tsteps{border-right:1px solid var(--line);padding:max(0px,calc(22svh - 56px)) 0 22svh}   /* 头尾留白：第一步、最后一步走到中线时窗正好粘住、整扇都在屏幕里 */
.tstep{all:unset;box-sizing:border-box;position:relative;width:100%;display:flex;flex-direction:column;justify-content:center;gap:14px;min-height:56svh;padding:48px 32px;border-bottom:1px solid var(--line);cursor:pointer}
.tstep:last-child{border-bottom:0}
.tstep .pb{position:absolute;left:-1px;top:-1px;bottom:0;width:2px;overflow:hidden}
.tstep .pb b{display:block;width:100%;height:100%;background:var(--ink);transform:scaleY(0);transform-origin:50% 0}
.tstep h3{color:#a29d9b;transition:color .3s}
.tstep p{color:var(--muted);font-size:16px;line-height:1.75;max-width:30ch;opacity:.45;transition:opacity .3s}
.tstep.on h3{color:var(--ink)}.tstep.on p{opacity:1}
.tstep:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
/* 一步一格：滚停时吸到最近的那一步，它正好停在播放线上（demo.js 的 lineY；左右排时 = 屏幕正中），不会停在两步中间 */
html:has(.tour){scroll-snap-type:y proximity}
.tstep{scroll-snap-align:center}
@media (hover:hover){.tstep:hover h3{color:var(--ink)}}
.tstage{background:linear-gradient(rgba(244,243,242,.55),rgba(244,243,242,.55))}
.tsticky{position:sticky;top:56px;height:calc(100svh - 56px);display:flex;flex-direction:column;justify-content:center;padding:24px 32px}
.stage-box{width:100%;max-width:min(100%,calc((100svh - 104px) * 1.6));margin-inline:auto}

/* 页脚：同一套格子收尾——一句话 + 下载表、四列链接、整宽的点阵 gugu（鸟群落下来变成这些点）、底栏 */
footer{scroll-margin-top:56px}
.fcol{border-bottom:1px solid var(--line)}
.fa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.fa-l{padding:64px 32px 48px;border-right:1px solid var(--line);display:flex;flex-direction:column}
.fa-l h2{margin:18px 0 18px}
.fa-l p{color:var(--muted);font-size:17px;line-height:1.7;max-width:30ch}
.fa-l .btn{margin-top:auto;align-self:flex-start}
.fa-l .mono,.fb .mono{font-size:12px}
.dlt{display:flex;flex-direction:column}
.dlt .hd{display:grid;grid-template-columns:150px 1fr 120px;padding:16px 32px;border-bottom:1px solid var(--line);font-size:12px}
.dlt .plat{grid-template-columns:150px 1fr 120px;padding:0 32px;flex:1;min-height:68px;font-size:16px}
.dlt .plat b{font:400 20px/1 var(--head);letter-spacing:-.02em}
.dlt .plat span{font-size:14px}
.dlt .plat em{justify-content:flex-end;font-size:13px}
.dlt .plat em i{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid var(--line);transition:background .2s,color .2s,border-color .2s}
@media (hover:hover){.dlt .plat:hover em i{background:var(--ink);color:#fff;border-color:var(--ink)}}
.fb{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.fb>div{display:flex;flex-direction:column;gap:12px;padding:28px 32px 36px;border-left:1px solid var(--line)}
.fb>div:first-child{border-left:0}
.fb .mono{margin-bottom:6px}
.fb a{font-size:15px;align-self:flex-start;transition:font-weight .15s}
@media (hover:hover){.fb a:hover{font-weight:600;text-decoration:underline;text-underline-offset:5px}}
.fb .ver{font:400 26px/1 var(--head);letter-spacing:-.02em}
.dot-logo{position:relative;height:clamp(120px,23vw,320px);margin:0 32px;border-top:0}
.dot-wrap{border-top:1px solid var(--line);padding:44px 0 36px}
.dot-logo canvas{position:absolute;inset:0;width:100%;height:100%}
.fc{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-top:1px solid var(--line);font-size:12px}
.fc>*{padding:18px 32px}
.fc>:nth-child(2){border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center}
.fc a{justify-self:end;display:flex;align-items:center;gap:8px;color:var(--ink)}
.fc a svg{width:12px;height:12px;transition:transform .2s var(--ease)}
@media (hover:hover){.fc a:hover svg{transform:translateY(-3px)}}
.foot-pad{height:56px}

/* 滚动进场 */
.rv{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}

/* 次级页（示例、定价、帮助、更新说明）：顶栏是固定的，正文先让出顶栏的高度；页头 = 面包屑或小标签 + 大标题 + 一段说明 */
body.inner main{padding-top:88px}
.ph{padding:72px 32px 52px;border-bottom:1px solid var(--line)}
.ph h1{font-size:clamp(36px,4.6vw,64px);line-height:1.1;letter-spacing:-.035em;max-width:20ch}
.ph .lead{color:var(--muted);font-size:17px;line-height:1.75;max-width:58ch;margin-top:20px}
.ph .mono{display:block;margin-bottom:22px;font-size:12px}
.ph.c{text-align:center;padding:88px 32px 64px}.ph.c h1{margin-inline:auto}.ph.c .lead{margin-inline:auto}
.crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-bottom:24px;font:500 12px/1.5 var(--mono);letter-spacing:.04em;color:var(--muted)}
.crumbs a{transition:color .15s}.crumbs a:hover{color:var(--ink)}
.crumbs i{font-style:normal;opacity:.45}
.crumbs span{color:var(--ink)}
/* 导航里当前这一页：底下一条墨线常亮 */
.nav nav a[aria-current="page"]{color:var(--ink)}
.nav nav a[aria-current="page"]::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--ink)}
@media (max-width:720px){.ph{padding:44px 20px 32px}.ph.c{padding:56px 20px 40px}.ph h1{font-size:min(36px,8.8vw)}}   /* 跟手机上的 h1 一个尺寸：「按任务量选套餐。?」360 宽也放得下一行 */

@media (max-width:900px){:root{--page:calc(100% - 40px)}
  /* 窗叠到上面粘住，步骤在下面滚 */
  .tour{grid-template-columns:minmax(0,1fr)}
  .tsteps{border-right:0;padding:0}
  .tstage{order:-1;position:sticky;top:56px;z-index:2;align-self:start;background:var(--paper);border-bottom:1px solid var(--line)}
  .tsticky{position:static;height:auto;padding:12px 16px}
  .stage-box{max-width:min(100%,calc((100svh - 56px) * .8))}
  .tstep{min-height:max(200px,calc(100svh - 56px - var(--sh,50svh) - 150px));padding:32px 24px}   /* --sh = 叠在上面的窗多高（demo.js 量） */
  .tstep{scroll-margin-top:calc(var(--sh,50svh) + 43px)}   /* 吸附区往上加出粘住的窗（窗下沿 = 56 + 12 + 窗高 = --sh + 43）：居中吸附就落在窗下沿到屏幕底的正中 */
  .tstep p{max-width:40ch}
}
@media (max-width:720px){
  h1{font-size:min(36px,8.8vw);letter-spacing:-.04em}
  h2{font-size:min(30px,7.8vw)}
  .nav{grid-template-columns:auto 1fr auto}
  .nav nav{display:none}
  .sh{padding:44px 20px 32px}
  .tstep{padding:28px 20px;gap:10px}
  .tstep h3{font-size:22px}
  .tstep p{font-size:15px}
  .annc .t2{display:none}
  .nav .login{display:none}
  .nav .end{grid-column:3}
  .dlt .plat span .x{display:none}
  .dlt .plat.rec b::after{display:block;width:max-content;margin:6px 0 0}
  .brand{padding:0 16px 0 14px}
  .dl{padding:0 10px}
  .dl-menu{position:fixed;top:88px;left:10px;right:10px;width:auto}
  /* 导航收进菜单：右上角两道杠，点开在顶栏下面铺一列（带「登录」），点别处、点链接、按 Esc 收起 */
  .mnu{all:unset;box-sizing:border-box;cursor:pointer;width:52px;height:100%;display:grid;place-content:center;gap:6px;border-left:1px solid var(--line)}
  .mnu i{display:block;width:18px;height:1.5px;background:var(--ink);transition:transform .25s var(--ease)}
  .mnu:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
  .mo .mnu i:first-child{transform:translateY(3.75px) rotate(45deg)}
  .mo .mnu i:last-child{transform:translateY(-3.75px) rotate(-45deg)}
  .mo .nav nav{display:flex;position:absolute;top:calc(100% + 1px);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:0;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(29,26,26,.3);animation:qp-in .18s var(--ease);max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain}
  .mo .nav nav a{height:54px;padding:0 20px;font-size:17px}
  .mo .nav nav a+a{border-top:1px solid var(--line)}
  .mo .nav nav .nlog{display:flex}
  .mo .nav nav a[aria-current="page"]::after{left:0;right:auto;top:0;bottom:0;width:2px;height:auto}
  .mo .nav nav .bar,.mo .nav nav a[data-sub]::before{display:none}
  .fa{grid-template-columns:1fr}
  .fa-l{padding:44px 20px 32px;border-right:0;border-bottom:1px solid var(--line)}
  .fa-l .btn{margin-top:28px}
  .dlt .hd{grid-template-columns:96px 1fr 64px;padding:14px 20px}
  .dlt .plat{grid-template-columns:96px 1fr 64px;padding:0 20px;min-height:64px}
  .dlt .plat b{font-size:17px}
  .dlt .plat em .x{display:none}
  .fb{grid-template-columns:1fr 1fr}
  .fb>div{padding:22px 20px 26px}
  .fb>div:nth-child(3){border-left:0;border-top:1px solid var(--line)}
  .fb>div:nth-child(4){border-top:1px solid var(--line)}
  .dot-logo{margin:0 20px}
  .fc{grid-template-columns:1fr auto}
  .fc>*{padding:16px 20px}
  .fc>:nth-child(2){display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}.rv{opacity:1;transform:none}}


/* 「?」说明（owner 10-13：说明性的话「折叠进 ? 中，画面会干净很多」）：操作提示、口径注解、换算都收进这里，画面只留标题和数据。
   用法：<span class="qa"><button type="button" class="q" aria-expanded="false" aria-label="说明">?</button><span class="qp" role="tooltip" hidden>…</span></span>
   弹层默认带 hidden：样式没到（缓存、断网）时说明文字也不会摊在标题里。
   可以放在标题里（不继承标题字号）；靠右的加 .r 让弹层往左展开。 */
.qa{position:relative;display:inline-block;vertical-align:middle;margin-left:.4em;font:400 14px/1.7 var(--body);letter-spacing:0;text-align:left;white-space:normal}
.q{all:unset;box-sizing:border-box;cursor:pointer;display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid #cfc9c5;border-radius:50%;font:500 12px/1 var(--mono);color:var(--muted);background:var(--paper);transition:background .2s,color .2s,border-color .2s}
.qa.open .q{background:var(--ink);border-color:var(--ink);color:#fff}
.q:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.qp{display:block;position:absolute;z-index:30;top:calc(100% + 10px);left:-14px;width:max-content;max-width:min(380px,calc(100vw - 32px));padding:14px 18px;background:var(--paper);border:1px solid var(--line);box-shadow:0 14px 34px rgba(29,26,26,.09);color:var(--muted);font:400 14px/1.75 var(--body);letter-spacing:0;text-transform:none}
.qa.r .qp{left:auto;right:-14px}
.qp b{color:var(--ink);font-weight:500}
.qp .ln{display:block}.qp .ln+.ln{margin-top:8px}
.qp[hidden]{display:none}
.qa.open .qp{animation:qp-in .18s var(--ease)}
@keyframes qp-in{from{opacity:0;transform:translateY(-4px)}}
@media (hover:hover){.q:hover{background:var(--ink);border-color:var(--ink);color:#fff}}
.qa[hidden]{display:none}
.nw{white-space:nowrap}   /* 包住标题最后一个字 + 标点 + ?，折行时一起走 */

/* 「示例」子菜单（照 dify 顶栏）：指到「示例」，它变成一块浅底，顶栏下整屏铺一层暖白毛玻璃（0.16s 淡入、不滑）；
   四个例子「圆圈箭头 + 标题 + 一句话」排在「示例」正下方，指到哪条哪条变绿；离开就收。只在能悬停的设备上开。 */
/* 标记写在顶栏里（跟着页头同步），脚本把它挪到 body 下：顶栏自己带毛玻璃，嵌在里面的毛玻璃只糊得到顶栏，糊不到页面 */
.subnav{position:fixed;top:var(--st,88px);left:0;right:0;bottom:0;z-index:19;display:block;background:rgba(250,248,246,.74);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);border-top:1px solid var(--line);opacity:0;transition:opacity .16s}
.subnav[hidden]{display:none}
.subnav.on{opacity:1}
.subin{display:grid;grid-template-columns:repeat(2,minmax(0,330px));gap:30px 64px;padding:46px 32px 54px var(--sx,200px)}
.subin a{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:12px;row-gap:7px;align-items:center;color:var(--ink)}
.subin a>i{width:18px;height:18px;display:grid;place-items:center;border:1px solid #9f9893;border-radius:50%;color:#6f6964;transition:background .15s,border-color .15s,color .15s}
.subin a>i svg{width:10px;height:10px}
.subin a b{font:400 24px/1.15 var(--head);letter-spacing:-.02em;transition:color .15s}
.subin a span{grid-column:2;font-size:14px;line-height:1.5;color:var(--muted)}
.subin a:hover>i,.subin a:focus-visible>i{background:var(--ink);border-color:var(--ink);color:#fff}
.subin a:hover b,.subin a:focus-visible b{color:var(--green)}
.subin .all{grid-column:1 / -1;display:inline-flex;justify-self:start;align-items:center;gap:8px;margin-top:6px;padding-left:32px;font-size:14px;font-weight:500;color:var(--ink);text-decoration:underline;text-underline-offset:5px}
.subin .all svg{width:12px;height:12px}
.nav nav a[data-sub]::before{content:"";position:absolute;inset:11px 2px;border-radius:4px;background:#f1ede9;opacity:0;transition:opacity .15s;z-index:-1}
.nav nav a[aria-expanded="true"]{color:var(--ink)}
.nav nav a[aria-expanded="true"]::before{opacity:1}
.top.sub-open .nav{background:var(--paper)}
.nav nav a[data-sub]{isolation:isolate}

/* 微信群：右下角悬浮按钮，点开是二维码面板；首页滑到第一段时自动展开一次（小号） */
.wx{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.wx-btn{width:48px;height:48px;display:grid;place-items:center;padding:0;border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;pointer-events:auto;box-shadow:0 10px 26px rgba(29,26,26,.14);transition:transform .18s,border-color .18s}
.wx-btn svg{width:26px;height:26px;fill:currentColor}
@media (hover:hover){.wx-btn:hover{transform:translateY(-2px);border-color:var(--ink)}}
.wx-btn:focus-visible,.wx-x:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.wx-panel{--w:280px;--pad:16px;width:min(var(--w),calc(100vw - 36px));max-height:calc(100dvh - 108px);overflow-y:auto;padding:var(--pad);background:#fff;border:1px solid var(--line);box-shadow:0 24px 60px rgba(29,26,26,.18);visibility:hidden;opacity:0;transform:translateY(10px);pointer-events:none;transition:width .24s var(--ease),padding .24s var(--ease),opacity .24s,transform .24s var(--ease),visibility 0s linear .24s}
.wx-panel.compact{--w:196px;--pad:12px}
.wx-panel.on{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition-delay:0s}
.wx-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:32px}
.wx-head b{font:500 14px/1.3 var(--head);white-space:nowrap}
.wx-x{width:32px;height:32px;flex:none;border:0;background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer}
@media (hover:hover){.wx-x:hover{color:var(--ink)}}
.wx-panel p{margin:2px 0 12px;color:var(--muted);font-size:13px;line-height:1.5}
.wx-panel img{display:block;width:100%;height:auto}
/* 手机上自动弹的小号再收一点、去掉说明句,少压正文 */
@media (max-width:520px){.wx{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}.wx-panel.compact{--w:176px}.wx-panel.compact p{display:none}}
@media (prefers-reduced-motion:reduce){.wx-btn,.wx-panel{transition:none}}