/* 布局：12 栏 / 内容区 1200 居中；首屏左 7 栏主张 + 右 5 栏块面构成；黑白为主，颜色只表达状态。
   全部数值取自《BOLUO 数字产品设计规范 V2.0》tokens.css */
:root{
  color-scheme:light;
  --bg:#ffffff;--bg-raised:#ffffff;--bg-sunken:#f5f5f5;--bg-inverse:#171717;
  --line:#dddddd;--line-strong:#767676;
  --ink-strong:#000000;--ink:#171717;--ink-muted:#666666;--ink-disabled:#a3a3a3;
  --action:#000000;--action-hover:#262626;--action-pressed:#404040;--on-action:#ffffff;
  --focus:#5d00ff;--success:#146c2e;--success-soft:#ebf4ee;--warning:#8a5300;
  --scrim:rgba(0,0,0,.48);
  --chart-2:#666666;--chart-3:#bdbdbd;--chart-grid:#ebebeb;
  --brand-black:#000000;--brand-white:#ffffff;
  /* 品牌紫：黑白为主、紫色点睛；brand-logo 仅用于标志与动画方块，两种主题不变 */
  --brand-logo:#5d00ff;--brand:#5d00ff;--on-brand:#ffffff;--brand-soft:#f0e8ff;
  --close-line:#262626;--close-muted:#a3a3a3;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;
  --space-10:40px;--space-12:48px;--space-16:64px;--space-24:96px;
  --radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;
  --control-sm:32px;--control-md:44px;--control-lg:48px;
  --header-web:64px;--content-max:1200px;--reading-max:720px;
  --font-sans:Arial,"PingFang SC","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",system-ui,sans-serif;
  --font-num:Arial,"Helvetica Neue",Helvetica,sans-serif;
  --ease-in:cubic-bezier(.2,0,0,1);--ease-out:cubic-bezier(.3,0,1,1);
  --gutter:var(--space-4);--section:var(--space-12);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#000000;--bg-raised:#141414;--bg-sunken:#1f1f1f;--bg-inverse:#f2f2f2;
  --line:#2e2e2e;--line-strong:#8a8a8a;
  --ink-strong:#ffffff;--ink:#ededed;--ink-muted:#a3a3a3;--ink-disabled:#5c5c5c;
  --action:#ffffff;--action-hover:#d9d9d9;--action-pressed:#bfbfbf;--on-action:#000000;
  --focus:#9b6bff;--brand:#9b6bff;--on-brand:#000000;--brand-soft:#1d0f3d;--success:#6dd58c;--success-soft:#0e2416;--warning:#f0b44c;
  --scrim:rgba(0,0,0,.64);
  --chart-2:#a3a3a3;--chart-3:#5c5c5c;--chart-grid:#262626;
  --close-line:#2e2e2e;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#000000;--bg-raised:#141414;--bg-sunken:#1f1f1f;--bg-inverse:#f2f2f2;
  --line:#2e2e2e;--line-strong:#8a8a8a;
  --ink-strong:#ffffff;--ink:#ededed;--ink-muted:#a3a3a3;--ink-disabled:#5c5c5c;
  --action:#ffffff;--action-hover:#d9d9d9;--action-pressed:#bfbfbf;--on-action:#000000;
  --focus:#9b6bff;--brand:#9b6bff;--on-brand:#000000;--brand-soft:#1d0f3d;--success:#6dd58c;--success-soft:#0e2416;--warning:#f0b44c;
  --scrim:rgba(0,0,0,.64);
  --chart-2:#a3a3a3;--chart-3:#5c5c5c;--chart-grid:#262626;
  --close-line:#2e2e2e;
}
@media (min-width:768px){:root{--gutter:var(--space-6);--section:var(--space-16)}}
@media (min-width:1200px){:root{--gutter:var(--space-8);--section:var(--space-24)}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-web) + var(--space-6))}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/26px var(--font-sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
svg.ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
svg.ic.sm{width:16px;height:16px;stroke-width:1.5}
svg.ic.md{width:20px;height:20px}
.wrap{max-width:calc(var(--content-max) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:var(--space-4);top:-100px;z-index:600;background:var(--action);color:var(--on-action);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md)}
.skip:focus{top:var(--space-2)}

/* 字级 */
.t-hero{font-size:40px;line-height:48px;font-weight:600;color:var(--ink-strong);text-wrap:balance}
@media (min-width:1200px){.t-hero{font-size:56px;line-height:64px}}
.t-display{font-size:32px;line-height:40px;font-weight:600;color:var(--ink-strong);text-wrap:balance}
@media (min-width:768px){.t-display{font-size:40px;line-height:48px}}
.t-headline{font-size:24px;line-height:32px;font-weight:500;color:var(--ink-strong);text-wrap:balance}
.t-title{font-size:20px;line-height:28px;font-weight:500;color:var(--ink-strong)}
.t-body-long{font-size:16px;line-height:26px;color:var(--ink);max-width:var(--reading-max)}
.t-body-sm{font-size:14px;line-height:22px;color:var(--ink-muted)}
.t-caption{font-size:12px;line-height:18px;color:var(--ink-muted)}
.eyebrow{display:flex;gap:var(--space-2);align-items:center;font-size:12px;line-height:18px;font-weight:500;color:var(--ink-muted);letter-spacing:.08em}
.eyebrow b{font-weight:500;color:var(--ink-strong);letter-spacing:0}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--control-md);padding:0 20px;border-radius:var(--radius-md);border:1px solid transparent;font:500 14px/20px var(--font-sans);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color 120ms var(--ease-in)}
.btn--lg{height:var(--control-lg);padding:0 24px;font-size:16px;line-height:24px}
.btn--primary{background:var(--action);color:var(--on-action)}
.btn--primary:hover{background:var(--action-hover)}
.btn--primary:active{background:var(--action-pressed)}
.btn--secondary{background:var(--bg);color:var(--ink-strong);border-color:var(--line-strong)}
.btn--secondary:hover{background:var(--bg-sunken)}
.btn--text{background:transparent;color:var(--ink-strong);padding:0 12px}
.btn--text:hover{background:var(--bg-sunken)}
.btn--icon{width:var(--control-md);padding:0}

/* 顶栏 */
.header{position:sticky;top:env(safe-area-inset-top,0px);z-index:100;background:var(--bg);border-bottom:1px solid var(--line)}
.header .wrap{height:var(--header-web);display:flex;align-items:center;gap:var(--space-8)}
.brand{display:inline-flex;align-items:center;height:var(--control-md);color:var(--ink-strong);border-radius:var(--radius-xs)}
.brand svg{height:32px;width:auto;display:block}
.nav{display:none;gap:var(--space-1)}
.nav a{display:inline-flex;align-items:center;height:var(--control-md);padding:0 12px;border-radius:var(--radius-md);font:500 14px/20px var(--font-sans);color:var(--ink);text-decoration:none}
.nav a:hover{background:var(--bg-sunken);color:var(--ink-strong)}
.header-actions{margin-left:auto;display:flex;gap:var(--space-2);align-items:center}
.header-actions .btn--text:not(.menu-btn){display:none}
@media (min-width:768px){.nav{display:flex}.header-actions .btn--text:not(.menu-btn){display:inline-flex}.header-actions .menu-btn{display:none}}

.drawer{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column}
.drawer[hidden]{display:none!important}
.drawer__scrim{position:absolute;inset:0;background:var(--scrim)}
.drawer__panel{position:relative;background:var(--bg-raised);border-radius:0 0 var(--radius-xl) var(--radius-xl);padding:calc(env(safe-area-inset-top,0px) + var(--space-3)) var(--gutter) var(--space-6);display:flex;flex-direction:column;gap:var(--space-2);animation:drop 220ms var(--ease-in)}
.drawer__top{display:flex;justify-content:space-between;align-items:center;height:var(--control-md);margin-bottom:var(--space-2)}
.drawer__panel nav a{display:flex;align-items:center;min-height:48px;font-size:16px;color:var(--ink-strong);text-decoration:none;border-bottom:1px solid var(--line)}
.drawer__panel .btn{margin-top:var(--space-4)}
@keyframes drop{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}

/* 首屏：整条 banner 是粒子画布，文字压在上面 */
.hero{position:relative;overflow:hidden;isolation:isolate;padding-block:var(--section)}
#particles{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}
.hero .wrap{display:grid;gap:var(--space-12);grid-template-columns:minmax(0,1fr)}
.hero__copy{display:flex;flex-direction:column;gap:var(--space-6);justify-content:center;min-width:0}
.hero__copy .t-hero{text-wrap:wrap}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4)}
.hero__art{min-width:0;color:var(--ink-strong);display:flex;flex-direction:column;align-items:center;gap:var(--space-6)}
.hero__art .stage{position:relative;width:100%;max-width:440px;aspect-ratio:1}
.hero__art svg{position:absolute;inset:0;display:block;width:100%;height:100%}
.hero.is-live .hero__art svg{visibility:hidden}
.story{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2) var(--space-6);font:500 12px/18px var(--font-sans);color:var(--ink-muted)}
.story li{display:flex;align-items:center;gap:var(--space-2);transition:color 200ms var(--ease-in)}
.story li::before{content:"";width:6px;height:6px;background:var(--line);transition:background-color 200ms var(--ease-in)}
.story li.on{color:var(--ink-strong)}
.story li.on::before{background:var(--brand)}
.story .num{font-family:var(--font-num)}
@media (min-width:1200px){
  .hero .wrap{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-6)}
  .hero__copy{grid-column:1 / span 7}
  .hero__art{grid-column:9 / span 4}
}
@media (min-width:768px) and (max-width:1199px){.hero__art .stage{max-width:360px}}

/* 通用模块 */
.section{padding-block:var(--section)}
.section + .section{border-top:1px solid var(--line)}
.section__head{display:flex;flex-direction:column;gap:var(--space-6);margin-bottom:var(--space-10)}
.section__head .row{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:end;justify-content:space-between}

/* 能力卡片 */
.caps{display:grid;gap:var(--space-4);grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.caps{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}}
@media (min-width:1200px){.caps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cap{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius-lg);color:inherit;text-decoration:none;transition:border-color 120ms var(--ease-in)}
.cap:hover{border-color:var(--line-strong)}
.cap__ic{color:var(--ink-strong);margin-bottom:var(--space-2)}
.cap__more{margin-top:auto;padding-top:var(--space-2);display:inline-flex;gap:var(--space-1);align-items:center;font:500 14px/20px var(--font-sans);color:var(--ink-strong)}
.cap__en{font-size:12px;line-height:18px;color:var(--ink-muted);letter-spacing:.08em}

/* 作品：每种创作方式一行，横向滑动 */
.wrows{display:flex;flex-direction:column;gap:var(--space-16)}
.wrow{display:flex;flex-direction:column;gap:var(--space-6);scroll-margin-top:calc(var(--header-web) + var(--space-6))}
.wrow__head{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:flex-end;justify-content:space-between}
.wrow__text{display:flex;flex-direction:column;gap:var(--space-2);min-width:0;max-width:var(--reading-max)}
.wrow__nav{display:flex;gap:var(--space-2)}
.wrow__nav .btn{border-radius:var(--radius-full)}
.wrow__nav .btn:disabled{color:var(--ink-disabled);border-color:var(--line);cursor:default;background:var(--bg)}
.strip{--row-h:220px;display:flex;gap:var(--space-4);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:var(--space-3);overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
@media (min-width:768px){.strip{--row-h:280px;gap:var(--space-6)}}
@media (min-width:1200px){.strip{--row-h:300px}}
.wcard{flex:none;display:flex;flex-direction:column;gap:var(--space-2);scroll-snap-align:start;background:none;border:0;padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer;border-radius:var(--radius-lg)}
.wcard .th{height:var(--row-h);width:100%}
.wcard:hover .th{border-color:var(--line-strong)}
.wcard__t{font:500 14px/20px var(--font-sans);color:var(--ink-strong)}
.wcard__m{font:400 12px/18px var(--font-num);color:var(--ink-muted);font-variant-numeric:tabular-nums}
/* 效果图画面：内部尺寸用 cqh，在卡片和预览弹窗里等比缩放 */
.th{position:relative;container-type:size;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-sunken);transition:border-color 120ms var(--ease-in);font-family:var(--font-sans)}
.th .a{position:absolute;display:block;margin:0;white-space:nowrap}
.th svg.a{height:auto;aspect-ratio:1;overflow:visible}

/* 团队 */
.team{display:grid;gap:var(--space-12);grid-template-columns:minmax(0,1fr)}
@media (min-width:1200px){.team{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-6)}.team__head{grid-column:1 / span 5}.team__list{grid-column:7 / span 6}}
.team__head{display:flex;flex-direction:column;gap:var(--space-6);min-width:0}
.team__list{min-width:0}
.role{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-2) var(--space-6);padding-block:var(--space-6);border-top:1px solid var(--line)}
.role:last-child{border-bottom:1px solid var(--line)}
.role__sq{width:24px;height:24px;background:var(--ink-strong);margin-top:2px}
.role:nth-child(2) .role__sq{background:none;box-shadow:inset 0 0 0 8px var(--ink-strong)}
.role:nth-child(3) .role__sq{clip-path:polygon(0 0,100% 0,100% 33%,66% 33%,66% 66%,100% 66%,100% 100%,0 100%)}
.role:nth-child(4) .role__sq{width:10px;height:10px;margin-top:16px;margin-left:14px}
.role__body{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.role__does{display:flex;flex-wrap:wrap;gap:var(--space-2)}

/* 流程 */
.steps{display:grid;gap:var(--space-6);grid-template-columns:minmax(0,1fr);counter-reset:s}
@media (min-width:768px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.step{display:flex;flex-direction:column;gap:var(--space-3);padding-top:var(--space-4);border-top:2px solid var(--ink-strong);min-width:0}
.step__n{font:700 14px/20px var(--font-num);color:var(--ink-strong);font-variant-numeric:tabular-nums}

/* 数据 */
.facts{display:grid;gap:var(--space-8) var(--space-6);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1200px){.facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fact{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.fact__n{font:700 32px/40px var(--font-num);color:var(--ink-strong);font-variant-numeric:tabular-nums}
.fact__n span{font:500 16px/24px var(--font-sans);margin-left:var(--space-1)}

/* 收尾：行动区 + 页脚（品牌黑，两种主题不变） */
.close{background:var(--brand-black);color:var(--brand-white);border-top:1px solid var(--close-line)}
.cta{padding-block:var(--section);display:flex;flex-direction:column;gap:var(--space-6);align-items:flex-start}
.cta .t-display{color:var(--brand-white)}
.cta p{color:var(--close-muted);max-width:var(--reading-max)}
.btn--white{background:var(--brand-white);color:var(--brand-black)}
.btn--white:hover{background:#d9d9d9}
.btn--white:active{background:#bfbfbf}
.btn--ghost-w{background:transparent;color:var(--brand-white);border-color:#8a8a8a}
.btn--ghost-w:hover{background:#1f1f1f}
.cta .hero__actions{margin-top:var(--space-4)}
.footer{border-top:1px solid var(--close-line);padding-block:var(--space-16) var(--space-8);display:grid;gap:var(--space-12);grid-template-columns:minmax(0,1fr)}
.footer__mark{padding-block:30px;color:var(--brand-white)}
.footer__mark svg{display:block;width:280px;max-width:100%;height:auto}
@media (min-width:768px){.footer__mark svg{width:360px}}
.footer__cols{display:grid;gap:var(--space-8) var(--space-6);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){.footer__cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){.footer{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-6)}.footer__mark{grid-column:1 / span 5}.footer__cols{grid-column:7 / span 6}}
.footer h3{font:500 12px/18px var(--font-sans);color:var(--close-muted);letter-spacing:.08em;margin-bottom:var(--space-3)}
.footer li a{display:inline-flex;align-items:center;min-height:48px;font-size:14px;line-height:22px;color:var(--brand-white);text-decoration:none}
.footer li a:hover{text-decoration:underline}
.legal{border-top:1px solid var(--close-line);padding-block:var(--space-6) var(--space-8);display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-8);align-items:center;justify-content:space-between;font-size:12px;line-height:18px;color:var(--close-muted)}
.legal p{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4)}
.seg{display:inline-flex;padding:2px;border:1px solid #444;border-radius:var(--radius-full)}
.seg button{height:28px;padding:0 12px;border:0;border-radius:var(--radius-full);background:transparent;color:var(--close-muted);font:500 12px/18px var(--font-sans);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--brand-white);color:var(--brand-black)}
.close :focus-visible{outline-color:#9b6bff}

/* 预览弹窗 */
.modal{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:var(--space-4)}
.modal[hidden]{display:none!important}
.modal__scrim{position:absolute;inset:0;background:var(--scrim);animation:fade 200ms var(--ease-in)}
.modal__box{position:relative;width:min(880px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--bg-raised);border-radius:var(--radius-xl);display:grid;grid-template-columns:minmax(0,1fr);animation:rise 240ms var(--ease-in)}
@media (min-width:768px){.modal__box{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.modal__media{padding:var(--space-6) var(--space-6) 0;min-width:0}
@media (min-width:768px){.modal__media{padding:var(--space-6)}}
.modal__body{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.modal__x{position:absolute;right:var(--space-3);top:var(--space-3);z-index:1;background:var(--bg-raised)}
.spec{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-2) var(--space-6);font-size:14px;line-height:22px;padding-block:var(--space-4);border-block:1px solid var(--line)}
.spec dt{color:var(--ink-muted)}
.spec dd{color:var(--ink-strong)}
.modal__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:auto;padding-top:var(--space-2)}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{transform:translateY(16px);opacity:0}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important}
  .drop{animation:none}
}

/* 效果图：上传的真实图片 / 待上传占位 */
.th img.a{inset:0;width:100%;height:100%;object-fit:cover}
.th .ph{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5cqh;color:var(--ink-muted);font-size:3.6cqh;white-space:normal;text-align:center}
.th .ph i{width:8cqh;height:8cqh;border:1px dashed var(--line-strong)}
.hero.no-particles #particles{display:none}

/* ========== 动效 ==========
   只用位移和透明度；进入用减速曲线，退出用加速曲线、时长为进入的 70%。开启「减少动态效果」时全部关闭。 */
:root{--enter:0ms}
.pt-on{--enter:3150ms}

/* 首页首次进入的加载页：BL 动画播放一轮（B→L→紫色方块拼合、绕圈、拼回），随后幕布上移揭开。
   其他页面、再次进入首页及站内外跳转一律不显示加载页或转场。无需脚本即可自动揭开。 */
.pt{position:fixed;inset:0;z-index:700;display:grid;place-items:center;background:var(--brand-black);pointer-events:none;animation:pt-out 560ms var(--ease-in) 2900ms both}
.pt svg{display:block;width:160px;height:160px}
@keyframes pt-out{to{transform:translateY(-100%)}}

/* 首屏依次进场 */
@keyframes up{from{opacity:0;transform:translateY(24px)}}
.hero__copy>*{animation:up 700ms var(--ease-in) both}
.hero__copy>:nth-child(1){animation-delay:calc(var(--enter) + 0ms)}
.hero__copy>:nth-child(2){animation-delay:calc(var(--enter) + 90ms)}
.hero__copy>:nth-child(3){animation-delay:calc(var(--enter) + 180ms)}
.hero__copy>:nth-child(4){animation-delay:calc(var(--enter) + 270ms)}
.hero__art .story{animation:up 700ms var(--ease-in) calc(var(--enter) + 400ms) both}
.pt-on .header{animation:fade 500ms var(--ease-in) var(--enter) both}

/* 滚动进场：脚本给 html 加 .rv 后才生效，元素进入视口时逐个浮现 */
.rv [data-rv]{transition:opacity 700ms var(--ease-in),transform 700ms var(--ease-in);transition-delay:var(--rd,0ms)}
.rv [data-rv]:not(.in){opacity:0;transform:translateY(32px)}

/* 悬停 */
.cap{transition:border-color 120ms var(--ease-in),transform 220ms var(--ease-in)}
.cap:hover{transform:translateY(-4px)}
.cap__more svg{transition:transform 200ms var(--ease-in)}
.cap:hover .cap__more svg{transform:translateX(4px)}
.wcard .th{transition:border-color 120ms var(--ease-in),transform 250ms var(--ease-in)}
.wcard:hover .th{transform:translateY(-4px)}
.role{transition:transform 220ms var(--ease-in)}
.role:hover{transform:translateX(6px)}
.role__sq{transition:transform 250ms var(--ease-in)}
.role:hover .role__sq{transform:translateY(-3px)}
.footer li a{transition:transform 160ms var(--ease-in)}
.footer li a:hover{transform:translateX(3px)}

/* 顶栏：向下滚动时收起，向上滚动时出现；导航下方指示条跟随当前区块 */
.header{transition:transform 250ms var(--ease-in)}
.header.hide{transform:translateY(-100%);transition-timing-function:var(--ease-out);transition-duration:175ms}
.nav{position:relative}
.nav__bar{position:absolute;left:0;bottom:4px;width:16px;height:2px;background:var(--brand);opacity:0;transform:translateX(var(--x,0px));transition:transform 300ms var(--ease-in),opacity 200ms var(--ease-in)}
.nav.has-on .nav__bar{opacity:1}
.nav a.on{color:var(--ink-strong)}

/* 弹窗与抽屉的退出 */
.drawer__scrim{animation:fade 200ms var(--ease-in)}
.drawer.closing .drawer__scrim,.modal.closing .modal__scrim{animation:fade-out 140ms var(--ease-out) forwards}
.drawer.closing .drawer__panel{animation:lift 150ms var(--ease-out) forwards}
.modal.closing .modal__box{animation:sink 170ms var(--ease-out) forwards}
@keyframes fade-out{to{opacity:0}}
@keyframes lift{to{transform:translateY(-16px);opacity:0}}
@keyframes sink{to{transform:translateY(16px);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .pt{display:none}
  .rv [data-rv]:not(.in){opacity:1;transform:none}
  .cap:hover,.wcard:hover .th,.role:hover,.role:hover .role__sq,.footer li a:hover,.cap:hover .cap__more svg{transform:none}
}

@media (min-width:768px){.footer li a{min-height:36px}}
@media (max-width:767px){.hero__art .stage{max-width:300px}.hero .wrap{gap:var(--space-10)}}
/* 触屏热区 ≥ 48（规范：网页 ≥44，触屏 ≥48） */
@media (max-width:767px){
  .btn{height:var(--control-lg)}
  .btn--icon{width:var(--control-lg)}
  .seg button{height:44px;padding:0 14px}
}
/* 手机端预览弹窗：竖图压低高度，让说明和按钮留在第一屏 */
@media (max-width:767px){
  .modal__media .th[style*="height"]{height:min(38vh,320px)!important}
  .modal__media{padding:var(--space-4) var(--space-4) 0}
  .modal__body{padding:var(--space-4);gap:var(--space-3)}
  .spec{padding-block:var(--space-3)}
}

/* 首屏占满一整屏（减去顶栏），内容垂直居中；底部留出「向下查看」提示 */
.hero{min-height:calc(100vh - var(--header-web));min-height:calc(100svh - var(--header-web));display:flex;align-items:center;padding-bottom:calc(var(--section) + 40px)}
.hero>.wrap{width:100%}
.hero__more{position:absolute;left:50%;bottom:var(--space-6);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:var(--space-2);min-width:48px;min-height:48px;padding:var(--space-1) var(--space-3);color:var(--ink-muted);font:500 12px/18px var(--font-sans);letter-spacing:.08em;text-decoration:none;border-radius:var(--radius-md);animation:fade 600ms var(--ease-in) calc(var(--enter) + 600ms) both}
.hero__more:hover{color:var(--ink-strong)}
.hero__more i{width:2px;height:28px;background:var(--line);position:relative;overflow:hidden}
.hero__more i::after{content:"";position:absolute;left:0;top:0;width:2px;height:10px;background:var(--ink-strong);animation:scroll-hint 1600ms var(--ease-in) infinite}
@keyframes scroll-hint{0%{transform:translateY(-10px);opacity:0}30%{opacity:1}100%{transform:translateY(28px);opacity:0}}
@media (max-width:767px){.hero{padding-bottom:calc(var(--section) + 72px)}}
@media (prefers-reduced-motion:reduce){.hero__more i::after{animation:none;transform:translateY(9px)}}
/* 手机：首屏收进一屏内 */
@media (max-width:767px){
  .hero{padding-top:var(--space-8);padding-bottom:88px}
  .hero .wrap{gap:var(--space-6)}
  .hero__copy{gap:var(--space-4)}
  .hero__actions{margin-top:var(--space-2)}
  .hero__art{gap:var(--space-3)}
  .hero__art .stage{max-width:min(230px,32svh)}
  .story{gap:var(--space-1) var(--space-4);font-size:11px;line-height:16px}
  .hero__more{bottom:var(--space-3)}
}
/* 顶栏 LOGO 旁的文字 */
.brand{gap:10px;text-decoration:none}
.brand__name{font:600 18px/24px var(--font-sans);color:var(--ink-strong);letter-spacing:.02em;white-space:nowrap}
@media (max-width:767px){.brand__name{font-size:16px}}

/* 为什么选择：居中标题 + 一排大数字 + 编号优势卡片 */
.why__head{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center;margin-bottom:var(--space-12)}
.why__head .t-body-long{max-width:36em}
.why__stats{display:grid;gap:var(--space-8) var(--space-6);grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 var(--space-16)}
@media (min-width:1200px){.why__stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);text-align:center;min-width:0}
.stat__n{font:700 40px/48px var(--font-num);color:var(--ink-strong);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
@media (min-width:768px){.stat__n{font-size:56px;line-height:64px}}
.stat__n span{font:600 18px/24px var(--font-sans);margin-left:var(--space-1)}
.stat dd{display:flex;flex-direction:column;gap:var(--space-1);margin:0}
.stat__l{font:600 16px/24px var(--font-sans);color:var(--ink-strong)}
.stat__c{font-size:13px;line-height:20px;color:var(--ink-muted)}
.why__cards{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(min(100%,212px),1fr))}
@media (min-width:768px){.why__cards{gap:var(--space-6)}}
.wc{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6);background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius-lg);min-width:0;transition:border-color 120ms var(--ease-in),transform 220ms var(--ease-in)}
.wc:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.wc__n{font:700 14px/20px var(--font-num);color:var(--ink-strong);letter-spacing:.06em;margin-bottom:var(--space-2)}
.wc .t-body-sm{padding-bottom:var(--space-4);border-bottom:1px solid var(--line)}
.wc__pts{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-3)}
.wc__pts li{position:relative;padding-left:16px;font-size:14px;line-height:22px;color:var(--ink)}
.wc__pts li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;background:var(--ink-strong)}
.wc__pts b{font-weight:600;color:var(--ink-strong)}
@media (prefers-reduced-motion:reduce){.wc:hover{transform:none}}

/* ========== 作品横排 · Apple 式陈列 ==========
   卡片从内容区左边缘开始，一直延伸到屏幕右边；滚动条隐藏，底部是进度条和圆形翻页按钮。 */
#works{overflow-x:clip}
.wrows{gap:var(--space-16)}
@media (min-width:1200px){.wrows{gap:var(--space-24)}}
.wrow{gap:var(--space-6)}
.strip{
  --row-h:320px;--edge:max(var(--gutter),calc((100vw - var(--content-max)) / 2));
  margin-inline:calc(50% - 50vw);padding-inline:var(--edge);scroll-padding-inline:var(--edge);
  gap:var(--space-4);padding-block:var(--space-2) var(--space-4);scrollbar-width:none;cursor:grab;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch
}
.strip::-webkit-scrollbar{display:none}
.strip.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.strip.dragging .wcard{pointer-events:none}
@media (min-width:768px){.strip{--row-h:400px;gap:var(--space-6)}}
@media (min-width:1200px){.strip{--row-h:480px}}
.wcard{width:calc(var(--row-h) * var(--r));gap:var(--space-1)}
.wcard .th{border-radius:var(--radius-xl);border:0;background:var(--bg-sunken);transition:transform 400ms var(--ease-in)}
.wcard:hover .th{transform:none}
.wcard .th img.a{transition:transform 700ms cubic-bezier(.2,0,0,1)}
.wcard:hover .th img.a{transform:scale(1.04)}
.wcard__t{margin-top:var(--space-3);font:600 17px/24px var(--font-sans)}
.wcard__m{font-size:13px;line-height:20px}
.wcard__plus{position:absolute;right:var(--space-4);bottom:var(--space-4);width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.56);display:grid;place-items:center;transition:background-color 200ms var(--ease-in),transform 250ms var(--ease-in)}
.wcard__plus svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
.wcard:hover .wcard__plus{background:rgba(0,0,0,.8);transform:rotate(90deg)}
.wcard:focus-visible{outline:none}
.wcard:focus-visible .th{outline:2px solid var(--focus);outline-offset:3px}

.wrow__foot{display:flex;align-items:center;gap:var(--space-4)}
.wrow.no-scroll .wrow__foot{display:none}
.prog{flex:1;max-width:240px;height:2px;background:var(--line);border-radius:1px;overflow:hidden}
.prog i{display:block;height:100%;width:30%;background:var(--ink-strong);border-radius:1px;transition:transform 120ms linear}
.wrow__count{font:500 12px/18px var(--font-num);color:var(--ink-muted);min-width:44px}
.wrow__nav{margin-left:auto;display:flex;gap:var(--space-3)}
.paddle{width:44px;height:44px;border-radius:50%;border:0;background:var(--bg-sunken);color:var(--ink-strong);display:grid;place-items:center;cursor:pointer;transition:background-color 150ms var(--ease-in),opacity 150ms var(--ease-in)}
.paddle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.paddle:hover{background:var(--line)}
.paddle:disabled{opacity:.35;cursor:default;background:var(--bg-sunken)}
@media (max-width:767px){.paddle{width:48px;height:48px}.wcard__plus{width:32px;height:32px;right:var(--space-3);bottom:var(--space-3)}}
/* 滚动进场：横排卡片从右侧依次滑入 */
.rv .strip>[data-rv]:not(.in){transform:translateX(72px)}
@media (prefers-reduced-motion:reduce){.wcard:hover .th img.a,.wcard:hover .wcard__plus{transform:none}}

/* ========== 顶栏导航：去掉悬停灰底和顶栏下分隔线，只保留文字明暗变化 ========== */
.header{border-bottom:0}
.nav a{color:var(--ink-muted);background:none!important;transition:color 150ms var(--ease-in)}
.nav a:hover,.nav a.on{color:var(--ink-strong)}
.drawer__panel nav a.on{font-weight:600}

/* ========== 子页面首屏 ========== */
.pg-hero{padding-block:var(--space-16) var(--space-12)}
@media (min-width:1200px){.pg-hero{padding-block:var(--space-24) var(--space-16)}}
.pg-hero__in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-6)}
.pg-hero__in .t-body-long{max-width:36em}
.pg-hero__in>*{animation:up 700ms var(--ease-in) both}
.pg-hero__in>:nth-child(2){animation-delay:90ms}.pg-hero__in>:nth-child(3){animation-delay:180ms}.pg-hero__in>:nth-child(4){animation-delay:270ms}
.pg-hero+.section{border-top:0;padding-top:0}

/* 月付 / 年付切换 */
.bill{display:inline-flex;padding:4px;border-radius:var(--radius-full);background:var(--bg-sunken);margin-top:var(--space-2)}
.bill button{display:inline-flex;align-items:center;gap:var(--space-2);height:40px;padding:0 var(--space-4);border:0;border-radius:var(--radius-full);background:transparent;color:var(--ink-muted);font:500 14px/20px var(--font-sans);cursor:pointer;transition:background-color 200ms var(--ease-in),color 200ms var(--ease-in)}
.bill button[aria-pressed="true"]{background:var(--bg-raised);color:var(--ink-strong);box-shadow:0 0 0 1px var(--line)}
.bill__tag{font-size:12px;line-height:18px;padding:0 6px;border-radius:var(--radius-xs);background:var(--ink-strong);color:var(--bg)}

/* 方案卡片 */
.plans{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));align-items:stretch}
@media (min-width:768px){.plans{gap:var(--space-6)}}
.plan{position:relative;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-8) var(--space-6);background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius-xl);min-width:0;transition:transform 220ms var(--ease-in),border-color 120ms var(--ease-in)}
.plan:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.plan--hot{border:2px solid var(--ink-strong)}
.plan--hot:hover{border-color:var(--ink-strong)}
.plan__badge{position:absolute;top:-13px;left:var(--space-6);padding:2px 10px;border-radius:var(--radius-full);background:var(--ink-strong);color:var(--bg);font:600 12px/20px var(--font-sans)}
.plan__desc{min-height:44px}
.plan__price{display:flex;align-items:baseline;gap:4px;margin-top:var(--space-2);color:var(--ink-strong)}
.plan__cur{font:600 20px/28px var(--font-num)}
.plan__num{font:700 48px/56px var(--font-num);letter-spacing:-.02em;display:inline-block;transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out)}
.plan__num.swap{opacity:0;transform:translateY(-8px)}
.plan__unit{font-size:14px;color:var(--ink-muted)}
.plan__txt{font:700 32px/56px var(--font-sans)}
.plan__note{font-size:12px;line-height:18px;color:var(--ink-muted);min-height:18px}
.plan__cta{margin-block:var(--space-3);width:100%}
.plan__feats{display:flex;flex-direction:column;gap:var(--space-3);padding-top:var(--space-4);border-top:1px solid var(--line)}
.plan__feats li{position:relative;padding-left:22px;font-size:14px;line-height:22px;color:var(--ink)}
.plan__feats li::before{content:"";position:absolute;left:0;top:6px;width:12px;height:7px;border-left:2px solid var(--ink-strong);border-bottom:2px solid var(--ink-strong);transform:rotate(-45deg)}
.plans__note{margin-top:var(--space-8);text-align:center;font-size:12px;line-height:18px;color:var(--ink-muted)}

/* 常见问题 */
.faq{display:grid;gap:var(--space-8);grid-template-columns:minmax(0,1fr)}
@media (min-width:1200px){.faq{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-6)}.faq__head{grid-column:1/span 4}.faq__list{grid-column:6/span 7}}
.faq__head{display:flex;flex-direction:column;gap:var(--space-4)}
.faq__list details{border-top:1px solid var(--line)}
.faq__list details:last-child{border-bottom:1px solid var(--line)}
.faq__list summary{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);min-height:64px;padding-block:var(--space-4);cursor:pointer;list-style:none;font:500 17px/26px var(--font-sans);color:var(--ink-strong)}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(currentColor,currentColor) center/12px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 12px no-repeat;transition:transform 250ms var(--ease-in)}
.faq__list details[open] summary::after{transform:rotate(45deg)}
.faq__list details p{padding-bottom:var(--space-6);color:var(--ink-muted);max-width:var(--reading-max);animation:up 260ms var(--ease-in)}

/* ========== 社区共享 ========== */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2);margin-bottom:var(--space-10)}
.chips button{height:40px;padding:0 var(--space-4);border:1px solid var(--line);border-radius:var(--radius-full);background:transparent;color:var(--ink);font:500 14px/20px var(--font-sans);cursor:pointer;transition:background-color 150ms var(--ease-in),color 150ms var(--ease-in),border-color 150ms var(--ease-in)}
.chips button:hover{border-color:var(--line-strong)}
.chips button[aria-pressed="true"]{background:var(--action);border-color:var(--action);color:var(--on-action)}
@media (max-width:767px){.chips{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scrollbar-width:none}.chips::-webkit-scrollbar{display:none}.chips button{flex:none;height:44px}}
.cgrid{columns:2;column-gap:var(--space-4)}
@media (min-width:768px){.cgrid{columns:3;column-gap:var(--space-6)}}
@media (min-width:1200px){.cgrid{columns:4}}
.citem{display:flex;flex-direction:column;gap:var(--space-2);width:100%;break-inside:avoid;margin:0 0 var(--space-8);padding:0;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;border-radius:var(--radius-lg)}
.citem .th{width:100%;border:0;border-radius:var(--radius-lg)}
.citem .th img.a{transition:transform 700ms cubic-bezier(.2,0,0,1)}
.citem:hover .th img.a{transform:scale(1.04)}
.citem:hover .wcard__plus{background:rgba(0,0,0,.8);transform:rotate(90deg)}
.citem:focus-visible{outline:none}
.citem:focus-visible .th{outline:2px solid var(--focus);outline-offset:3px}
.citem__t{margin-top:var(--space-1);font:600 15px/22px var(--font-sans);color:var(--ink-strong)}
.citem__m{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.citem__av{flex:none;width:20px;height:20px;display:grid;place-items:center;background:var(--ink-strong);color:var(--bg);font:600 11px/1 var(--font-sans)}
.citem__a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:18px;color:var(--ink-muted)}
.citem .tag{height:20px;font-size:11px;padding:0 6px}
.citem.out{opacity:0;transform:translateY(12px);transition:opacity 150ms var(--ease-out),transform 150ms var(--ease-out)}
.citem.enter{animation:up 360ms var(--ease-in) both}
.cempty{text-align:center;color:var(--ink-muted);padding-block:var(--space-12)}
.share .steps{grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.share .steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.plan:hover,.citem:hover .th img.a,.citem:hover .wcard__plus{transform:none}}
.citem[hidden]{display:none}

/* ========== 定价页 · 积分怎么扣 ========== */
.credits__in{display:grid;gap:var(--space-10);grid-template-columns:minmax(0,1fr)}
@media (min-width:1200px){.credits__in{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-6)}.credits__head{grid-column:1/span 4}.credits__body{grid-column:6/span 7}}
.credits__head{display:flex;flex-direction:column;gap:var(--space-4)}
.credits__body{display:flex;flex-direction:column;gap:var(--space-8);min-width:0}
.ctable{margin:0;border-top:1px solid var(--line-strong)}
.ctable>div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);padding-block:var(--space-4);border-bottom:1px dashed var(--line)}
.ctable dt{color:var(--ink);font-size:15px;line-height:24px;min-width:0}
.ctable dd{margin:0;flex:none;font:700 15px/24px var(--font-sans);color:var(--ink-strong);font-variant-numeric:tabular-nums;white-space:nowrap}
.ctable>div{transition:background-color 150ms var(--ease-in)}
.ctable>div:hover{background:var(--bg-sunken)}
.vtable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-raised)}
.vtable__t{padding:var(--space-4) var(--space-6) 0;font:600 15px/24px var(--font-sans);color:var(--ink-strong)}
.vtable{width:100%;border-collapse:collapse;font-size:14px;line-height:22px;min-width:420px}
.vtable th,.vtable td{padding:var(--space-3) var(--space-6);text-align:left;border-bottom:1px solid var(--line)}
.vtable tbody tr:last-child th,.vtable tbody tr:last-child td{border-bottom:0}
.vtable thead th{font:500 12px/18px var(--font-sans);color:var(--ink-muted);letter-spacing:.04em}
.vtable tbody th{font-weight:500;color:var(--ink)}
.vtable td{font-weight:700;color:var(--ink-strong);font-variant-numeric:tabular-nums;white-space:nowrap}
.cnotes{display:flex;flex-direction:column;gap:var(--space-2)}
.cnotes li{position:relative;padding-left:16px;font-size:14px;line-height:22px;color:var(--ink-muted)}
.cnotes li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;background:var(--ink-strong)}

/* 已隐藏页面的管理员预览提示 */
.hidden-note{position:sticky;top:0;z-index:150;padding:var(--space-2) var(--gutter);background:var(--bg-inverse);color:var(--bg);font:500 13px/20px var(--font-sans);text-align:center}
.nav:not(:has(a)){display:none}
@media (max-width:767px){
  .vtable{min-width:0;font-size:13px}
  .vtable th,.vtable td{padding:10px 12px}
  .vtable td{white-space:normal}
  .vtable__t{padding:var(--space-4) 12px 0}
  .ctable dt,.ctable dd{font-size:14px}
}

/* ========== 定价页 · 邀请好友 ========== */
.plan__txt--sm{font-size:24px;line-height:56px;letter-spacing:-.01em}
.invite__card{display:grid;gap:var(--space-8);grid-template-columns:minmax(0,1fr);padding:var(--space-8) var(--space-6);border-radius:var(--radius-xl);background:var(--brand-black);color:var(--brand-white);border:1px solid var(--close-line)}
@media (min-width:768px){.invite__card{padding:var(--space-12) var(--space-10)}}
@media (min-width:1200px){.invite__card{grid-template-columns:5fr 7fr;gap:var(--space-12);align-items:center;padding:var(--space-16)}}
.invite__head{display:flex;flex-direction:column;gap:var(--space-4)}
.invite__head .t-display{color:var(--brand-white)}
.invite__head .t-body-long{color:#a3a3a3}
.invite__badge{font:700 64px/72px var(--font-num);letter-spacing:-.02em;color:var(--brand-white)}
@media (min-width:768px){.invite__badge{font-size:88px;line-height:96px}}
.invite__steps{display:flex;flex-direction:column}
.invite__steps li{display:flex;gap:var(--space-6);align-items:flex-start;padding-block:var(--space-5,20px);border-top:1px solid #2e2e2e}
.invite__steps li:last-child{border-bottom:1px solid #2e2e2e}
.invite__n{flex:none;width:32px;font:700 14px/28px var(--font-num);color:#a3a3a3}
.invite__steps .t-title{color:var(--brand-white)}
.invite__steps .t-body-sm{color:#a3a3a3}
.invite__note{grid-column:1/-1;font-size:12px;line-height:18px;color:#8a8a8a}
.invite+.section{border-top:0}

/* ========== 定价页 · 方案对比 ========== */
.ctab-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-raised)}
.ctab{width:100%;border-collapse:collapse;font-size:14px;line-height:22px;min-width:560px}
.ctab th,.ctab td{padding:var(--space-4) var(--space-6);text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.ctab tbody tr:last-child th,.ctab tbody tr:last-child td{border-bottom:0}
.ctab thead th{font:600 15px/24px var(--font-sans);color:var(--ink-strong);background:var(--bg-sunken)}
.ctab thead th:nth-child(3){position:relative}
.ctab tbody th{font-weight:500;color:var(--ink-muted);white-space:nowrap}
.ctab td{color:var(--ink-strong)}
.ctab td:nth-child(3){font-weight:600}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:767px){.ctab th,.ctab td{padding:12px 14px}}
/* 方案里「不包含」的项：灰字 + 短横线 */
.plan__feats li.no{color:var(--ink-disabled)}
.plan__feats li.no::before{top:10px;width:12px;height:0;border-left:0;border-bottom:2px solid var(--ink-disabled);transform:none}

/* ========== 商务合作 ========== */
.btypes{display:grid;gap:var(--space-4);grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.btypes{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}}
.btype{position:relative;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-8);background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius-xl);min-width:0;transition:transform 220ms var(--ease-in),border-color 120ms var(--ease-in)}
.btype:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.btype__n{position:absolute;top:var(--space-8);right:var(--space-8);font:700 14px/20px var(--font-num);color:var(--ink-disabled)}
.btype .t-body-sm{padding-bottom:var(--space-4);border-bottom:1px solid var(--line)}
.btype .wc__pts{margin-top:var(--space-1)}
.btype__cta{display:inline-flex;align-items:center;gap:var(--space-1);margin-top:auto;padding-top:var(--space-4);font:500 14px/20px var(--font-sans);color:var(--ink-strong);text-decoration:none;align-self:flex-start;min-height:44px}
.btype__cta svg{transition:transform 200ms var(--ease-in)}
.btype__cta:hover svg{transform:translateX(4px)}
.biz+.section{border-top:0}
.agents__card{display:grid;gap:var(--space-8);grid-template-columns:minmax(0,1fr);padding:var(--space-8) var(--space-6);border-radius:var(--radius-xl);background:var(--brand-black);color:var(--brand-white);border:1px solid var(--close-line)}
@media (min-width:768px){.agents__card{padding:var(--space-12) var(--space-10)}}
@media (min-width:1200px){.agents__card{grid-template-columns:6fr 6fr;align-items:center;gap:var(--space-12);padding:var(--space-16)}}
.agents__head{display:flex;flex-direction:column;gap:var(--space-4)}
.agents__head .t-display{color:var(--brand-white)}
.agents__head .t-body-long,.agents__head .eyebrow{color:#a3a3a3}
.agents__list{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.agents__list li{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-6);border:1px solid #3a3a3a;border-radius:var(--radius-full);font:600 20px/28px var(--font-sans);color:var(--brand-white);transition:border-color 150ms var(--ease-in)}
.agents__list li::before{content:"";width:8px;height:8px;background:var(--brand-white)}
.agents__list li:hover{border-color:#8a8a8a}
.agents__list li.more{font-size:15px;font-weight:500;color:#a3a3a3;border-style:dashed}
.agents__list li.more::before{background:#5c5c5c}
.agents+.section{border-top:0}
.bform-wrap{display:grid;gap:var(--space-10);grid-template-columns:minmax(0,1fr)}
@media (min-width:1200px){.bform-wrap{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-6)}.bform__head{grid-column:1/span 5}.bform,.bform__ok{grid-column:7/span 6}}
.bform__head{display:flex;flex-direction:column;gap:var(--space-4)}
.bform{display:flex;flex-direction:column;gap:var(--space-5,20px);padding:var(--space-8) var(--space-6);background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius-xl)}
@media (min-width:768px){.bform{padding:var(--space-8)}}
.bform__row{display:grid;gap:var(--space-5,20px);grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.bform__row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bf{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.bf label{font:500 14px/20px var(--font-sans);color:var(--ink-strong)}
.bf input,.bf select,.bf textarea{width:100%;height:var(--control-lg);padding:0 var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--bg);color:var(--ink);font:400 16px/24px var(--font-sans)}
.bf textarea{height:auto;min-height:112px;padding:10px var(--space-3);resize:vertical}
.bf select{appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:18px}
.bf input:focus,.bf select:focus,.bf textarea:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 1px var(--focus)}
.bf [aria-invalid="true"]{border-color:#b3261e}
.bf__err,.bform__err{font-size:12px;line-height:18px;color:#b3261e}
:root[data-theme="dark"] .bf__err,:root[data-theme="dark"] .bform__err{color:#ff8a80}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bf__err,:root:not([data-theme="light"]) .bform__err{color:#ff8a80}}
.bf__h{font-size:12px;line-height:18px;color:var(--ink-muted)}
.bf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bform .btn{align-self:flex-start}
.bform__ok{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);padding:var(--space-10) var(--space-8);background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius-xl);animation:up 360ms var(--ease-in)}
.bform__ok[hidden]{display:none}
.bform__okmark{width:40px;height:40px;background:var(--ink-strong);position:relative}
.bform__okmark::after{content:"";position:absolute;left:12px;top:11px;width:14px;height:8px;border-left:3px solid var(--bg);border-bottom:3px solid var(--bg);transform:rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.btype:hover{transform:none}}
.bform[hidden]{display:none}

/* 顶栏：标志靠左、导航居中、按钮靠右（三栏，导航始终在页面正中） */
@media (min-width:768px){
  .header .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-6)}
  .header .brand{justify-self:start}
  .header .nav{justify-self:center;gap:var(--space-2)}
  .header .nav a{padding:0 16px}
  .header .header-actions{justify-self:end;margin-left:0}
}

/* ========== Skill 广场 ========== */
.sk-hero__in{display:flex;flex-direction:column;gap:var(--space-4)}
.sk-hero__in>*{animation:up 700ms var(--ease-in) both}
.sk-hero__in>:nth-child(2){animation-delay:90ms}.sk-hero__in>:nth-child(3){animation-delay:180ms}.sk-hero__in>:nth-child(4){animation-delay:270ms}
.sk-search{position:relative;margin-top:var(--space-6);max-width:880px}
.sk-search svg{position:absolute;left:18px;top:50%;width:20px;height:20px;transform:translateY(-50%);fill:none;stroke:var(--ink-muted);stroke-width:2;stroke-linecap:round;pointer-events:none}
.sk-search input{width:100%;height:56px;padding:0 var(--space-4) 0 50px;border:1px solid var(--line-strong);border-radius:var(--radius-full);background:var(--bg-raised);color:var(--ink);font:400 16px/24px var(--font-sans);transition:border-color 150ms var(--ease-in),box-shadow 150ms var(--ease-in)}
.sk-search input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 1px var(--focus)}
.sk-search input::placeholder{color:var(--ink-disabled)}
.sk-chips{justify-content:flex-start;margin-bottom:var(--space-6)}
.sk-count{font-size:13px;line-height:20px;color:var(--ink-muted);margin-bottom:var(--space-4)}
.sk-count b{color:var(--ink-strong)}
.sk-grid{display:grid;gap:var(--space-4);grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.sk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}}
@media (min-width:1200px){.sk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.skc{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius-lg);min-width:0;transition:transform 220ms var(--ease-in),border-color 120ms var(--ease-in)}
.skc:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.skc[hidden]{display:none}
.skc.enter{animation:up 320ms var(--ease-in) both}
.skc__top{display:flex;align-items:flex-start;gap:var(--space-3);min-width:0}
.skc__ic{flex:none;width:48px;height:48px;display:grid;place-items:center;background:var(--ink-strong);color:var(--bg);font:700 20px/1 var(--font-sans)}
.skc__id{flex:1;min-width:0}
.skc__id h2{font:600 17px/24px var(--font-sans);color:var(--ink-strong)}
.skc__id p{font-size:12px;line-height:18px;color:var(--ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.skc__new{flex:none;padding:2px 8px;border-radius:var(--radius-xs);background:var(--ink-strong);color:var(--bg);font:600 11px/18px var(--font-sans)}
.skc__desc{font-size:14px;line-height:22px;color:var(--ink-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:44px}
.skc__tags{display:flex;flex-wrap:wrap;gap:6px}
/* 标签基础样式（品牌规范：高 24、圆角 4、bg-sunken 底）；此前缺失导致标签只剩底色或裸文字 */
.tag{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:var(--radius-xs);background:var(--bg-sunken);color:var(--ink-muted);font:500 12px/1 var(--font-sans);white-space:nowrap}
.skc__tags .tag{height:24px;font-size:12px}
.tag--strong{background:var(--ink-strong)!important;color:var(--bg)!important}
.skc__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-top:auto;padding-top:var(--space-4);border-top:1px solid var(--line)}
.skc__uses{font-size:12px;color:var(--ink-muted)}
.skc__btn{height:40px;padding:0 var(--space-4)}
.sk-empty[hidden]{display:none}
.pg-hero.sk-hero+.section{padding-top:0}
/* Skill 详情弹窗里的大图标 */
.sk-pv{display:grid;place-items:center;aspect-ratio:4/3;width:100%;border-radius:var(--radius-lg);background:var(--bg-sunken)}
.sk-pv span{width:96px;height:96px;display:grid;place-items:center;background:var(--ink-strong);color:var(--bg);font:700 44px/1 var(--font-sans)}
@media (prefers-reduced-motion:reduce){.skc:hover{transform:none}}

/* ========== Skill 详情页 ========== */
.skd{padding-block:var(--space-8) var(--space-16)}
.skd__wrap{max-width:calc(1000px + 2 * var(--gutter));display:flex;flex-direction:column;gap:var(--space-6)}
.skd__wrap>*{animation:up 600ms var(--ease-in) both}
.skd__wrap>:nth-child(2){animation-delay:60ms}.skd__wrap>:nth-child(3){animation-delay:120ms}.skd__wrap>:nth-child(4){animation-delay:180ms}
.skd__crumb{display:flex;align-items:center;gap:var(--space-2);font-size:13px;line-height:20px;color:var(--ink-muted);min-width:0}
.skd__crumb a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--ink);text-decoration:none}
.skd__crumb a:hover{color:var(--ink-strong)}
.skd__crumb svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform 200ms var(--ease-in)}
.skd__crumb a:hover svg{transform:translateX(-3px)}
.skd__crumb .num{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skd__card{padding:var(--space-6);background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius-xl)}
@media (min-width:768px){.skd__card{padding:var(--space-8)}}
.skd__head{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
@media (min-width:768px){.skd__head{grid-template-columns:minmax(0,1fr) auto}.skd__desc,.skd__meta{grid-column:1/-1}}
.skd__id{display:flex;align-items:center;gap:var(--space-4);min-width:0}
.skd__ic{width:64px;height:64px;font-size:28px}
.skd__id h1{font:700 28px/36px var(--font-sans);color:var(--ink-strong)}
@media (min-width:768px){.skd__id h1{font-size:32px;line-height:40px}}
.skd__id p{font-size:14px;line-height:22px;color:var(--ink-muted);margin-top:2px;word-break:break-all}
.skd__get{align-self:start}
@media (max-width:767px){.skd__get{width:100%}}
.skd__desc{font-size:15px;line-height:26px;color:var(--ink);max-width:var(--reading-max)}
.skd__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.skd__meta .tag{height:26px}
.skd__key{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:1px dashed var(--line-strong);border-radius:var(--radius-xs);font:500 12px/18px var(--font-sans);color:var(--ink)}
.skd__key::before{content:"";width:6px;height:6px;background:var(--ink-strong)}
.skd__apikey{border:2px solid var(--ink-strong);display:flex;flex-direction:column;gap:var(--space-4)}
.skd__khead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4)}
.skd__khead h2{display:flex;align-items:center;gap:var(--space-3);font:600 20px/28px var(--font-sans);color:var(--ink-strong)}
.skd__kic{width:14px;height:14px;background:var(--ink-strong)}
.skd__kbtns{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.skd__steps{padding:var(--space-4) var(--space-6);background:var(--bg-sunken);border-radius:var(--radius-md)}
.skd__steps h3{font:600 15px/24px var(--font-sans);color:var(--ink-strong);margin-bottom:var(--space-2)}
.skd__steps ol{list-style:decimal;padding-left:1.4em;display:flex;flex-direction:column;gap:var(--space-2);font-size:14px;line-height:22px;color:var(--ink)}
.skd__doc{display:flex;flex-direction:column}
.skd__label{font:500 12px/18px var(--font-sans);color:var(--ink-muted);letter-spacing:.08em;margin-bottom:var(--space-3)}
.skd__doc h2{font:700 24px/32px var(--font-sans);color:var(--ink-strong);padding-bottom:var(--space-6);border-bottom:1px solid var(--line);margin-bottom:var(--space-2);word-break:break-word}
@media (min-width:768px){.skd__doc h2{font-size:28px;line-height:36px}}
.skd__doc h2 span{color:var(--ink-muted);font-weight:500}
.skd__doc h3{font:600 18px/26px var(--font-sans);color:var(--ink-strong);margin:var(--space-8) 0 var(--space-3)}
.skd__doc>p{font-size:15px;line-height:26px;color:var(--ink);max-width:var(--reading-max)}
.skd__doc ul:not(.skd__ex){display:flex;flex-direction:column;gap:var(--space-3)}
.skd__doc ul:not(.skd__ex) li{position:relative;padding-left:18px;font-size:15px;line-height:26px;color:var(--ink)}
.skd__doc ul:not(.skd__ex) li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;background:var(--ink-strong)}
.skd__doc li b{color:var(--ink-strong);font-weight:600}
.skd__hint{font-size:13px!important;color:var(--ink-muted)!important;margin-bottom:var(--space-3)}
.skd__ex{display:flex;flex-direction:column;gap:var(--space-2)}
.skd__ex li{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4);background:var(--bg-sunken);border-radius:var(--radius-md);font-size:14px;line-height:22px;color:var(--ink)}
.skd__ex li span{flex:1;min-width:0}
.skd__copy{flex:none;height:36px;padding:0 var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--bg-raised);color:var(--ink-strong);font:500 13px/20px var(--font-sans);cursor:pointer;transition:background-color 150ms var(--ease-in)}
.skd__copy:hover{background:var(--bg)}
.skd__copy.ok{background:var(--ink-strong);color:var(--bg);border-color:var(--ink-strong)}
.skc__btn{text-decoration:none}

input,textarea,[contenteditable="true"]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

/* Shared by official pages and site admin: visible text selection in both themes. */
::selection{background:var(--focus);color:var(--bg)}

.header-theme{display:grid;place-items:center;width:44px;height:44px;padding:10px;flex:none;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--ink-strong);cursor:pointer}
.header-theme:hover{border-color:var(--line-strong)}
.header-theme:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.header-theme svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:767px){.header .wrap{gap:8px}.header-actions{gap:4px}.header .brand{flex:none}.header-actions>.btn--primary{padding-inline:12px}}
@media(max-width:360px){.header .brand__name{display:none}}