/* ==========================================================================
   留白 LIUBAI · 官网设计系统 v2.0
   --------------------------------------------------------------------------
   ⚠️ 改这个文件之后，必须同时把 HTML 里的引用版本号 +1：
        assets/site/site.css?v=26   ->  ?v=26
      （site.js / data.js / 字体同理）
      因为 _headers 给 /assets/* 设了一周的缓存，而文件名不变 ——
      不改版本号的话，老访客会拿着旧 CSS 配新 HTML，界面会错乱。
   --------------------------------------------------------------------------
   2026-10 改版要点：
     · 字体：整站 OPPO Sans 4.0（可变字体 wght 100-700）；
             钉钉进步体只用于中文大标题（h1 / h2 / 首页字标）
     · 配色：以参考图为准 —— #051A39 / #0A59F7 / #207BFF / #E2EEFF / #F8FBFF
             底色以近白为主，蓝色只用在需要强调的地方
     · 圆角整体加大，卡片与容器都用大圆角
     · 新增深色模式：跟随系统 + 可手动切换（存在 localStorage）
   ========================================================================== */

/* ---------------- 字体 ---------------- */
@font-face{
  font-family:'OPPO Sans';
  src:url('../fonts/oppo-sans.woff2?v=26') format('woff2-variations'),
      url('../fonts/oppo-sans.woff2?v=26') format('woff2');
  font-weight:100 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'DingTalk JinBuTi';
  src:url('../fonts/dingtalk.woff2?v=26') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ---------------- 设计令牌 ---------------- */
:root{
  /* 参考图给的六支颜色 */
  --navy:      #051A39;
  --blue:      #0A59F7;
  --blue-mid:  #207BFF;
  --blue-pale: #E2EEFF;
  --blue-mist: #F8FBFF;

  --bg:        var(--blue-mist);
  --surface:   #FFFFFF;
  --surface-2: #F2F7FF;
  --tint:      var(--blue-pale);

  --ink:       var(--navy);
  --ink-2:     #3A5378;
  --ink-3:     #5A7093;
  --ink-inv:   #FFFFFF;

  --line:      rgba(5,26,57,.10);
  --line-2:    rgba(5,26,57,.06);

  --brand:      var(--blue-mid);
  --brand-deep: var(--blue);
  --brand-ink:  var(--blue);
  --brand-soft: var(--blue-pale);

  --focus:     var(--blue);
  --shadow:    0 18px 40px -26px rgba(5,26,57,.35);
  --shadow-lg: 0 26px 60px -30px rgba(5,26,57,.42);

  --font-body:'OPPO Sans',-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --font-disp:'DingTalk JinBuTi','OPPO Sans',-apple-system,BlinkMacSystemFont,"PingFang SC",system-ui,sans-serif;

  --wrap:      1120px;
  --wrap-wide: 1280px;
  --gut:       clamp(20px,5vw,40px);
  --nav-h:     66px;
  --measure:   34em;

  /* 圆角整体加大 */
  --r-xs:   10px;
  --r-sm:   16px;
  --r-md:   22px;
  --r-lg:   30px;
  --r-xl:   40px;
  --r-pill: 999px;

  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.22,1,.36,1);
}

/* ---------------- 深色模式 ----------------
   跟随系统；<html data-theme="dark"> 由内联脚本在首屏前写好，不会闪。 */
:root[data-theme="dark"]{
  --bg:        #051A39;
  --surface:   #0A2347;
  --surface-2: #0D2A54;
  --tint:      #12305C;

  --ink:       #F1F6FF;
  --ink-2:     #A9BDD9;
  --ink-3:     #7E93B3;

  --line:      rgba(255,255,255,.14);
  --line-2:    rgba(255,255,255,.08);

  --brand:      #4E9BFF;
  --brand-deep: #2E7BFF;
  --brand-ink:  #7FB4FF;
  --brand-soft: #12305C;

  --focus:     #7FB4FF;
  --shadow:    0 18px 40px -26px rgba(0,0,0,.6);
  --shadow-lg: 0 26px 60px -30px rgba(0,0,0,.7);

  color-scheme: dark;
}
:root{color-scheme: light}

/* ---------------- 基础 ---------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 24px)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16.5px; line-height:1.85;
  font-weight:400; font-variation-settings:"wght" 400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background-color .4s var(--ease), color .4s var(--ease);
}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
h1,h2,h3,h4,p,dl,dd,ol,ul,figure{margin:0}
ol,ul{padding:0; list-style:none}
::selection{background:rgba(10,89,247,.18)}

:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:8px}

.skip{
  position:absolute; left:12px; top:-64px; z-index:200;
  background:var(--surface); color:var(--ink); padding:11px 18px;
  border-radius:var(--r-pill); box-shadow:inset 0 0 0 1px var(--line), var(--shadow);
  transition:top .2s var(--ease);
}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------------- 排版 ----------------
   钉钉进步体只出现在大标题上；其余一律 OPPO Sans。 */
h1,.h1{
  font-family:var(--font-disp); font-weight:500;
  font-size:clamp(31px,4.6vw,52px); line-height:1.18; letter-spacing:-.01em;
}
h2,.h2{
  font-family:var(--font-disp); font-weight:500;
  font-size:clamp(24px,2.8vw,34px); line-height:1.28; letter-spacing:-.005em;
}
/* h3 及以下不再用展示字体 */
h3,.h3{font-family:var(--font-body); font-weight:600; font-variation-settings:"wght" 600;
  font-size:19px; line-height:1.5}
h4{font-family:var(--font-body); font-weight:600; font-variation-settings:"wght" 600; font-size:13px}
.lead{font-size:clamp(16.5px,1.5vw,18.5px); line-height:1.8; color:var(--ink-2)}
.body{color:var(--ink-2)}
.small{font-size:13.5px; line-height:1.8; color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums}
strong,b{font-weight:600; font-variation-settings:"wght" 600}

.eyebrow{
  font-family:var(--font-body); font-weight:600; font-variation-settings:"wght" 600;
  font-size:12.5px; letter-spacing:.14em;
  color:var(--brand-ink); margin:0 0 16px; display:flex; align-items:center; gap:12px;
}
.eyebrow::before{content:""; width:22px; height:2px; border-radius:2px; background:currentColor; opacity:.5}
.eyebrow--plain::before{display:none}

.prose{max-width:var(--measure)}
.prose p + p{margin-top:1.15em}
.prose h2{margin-top:2.2em}
.prose h3{margin-top:1.8em}
.prose ul{margin-top:1em; display:grid; gap:.5em}
.prose ul li{position:relative; padding-left:1.1em; color:var(--ink-2)}
.prose ul li::before{content:""; position:absolute; left:0; top:.72em; width:6px; height:2px; border-radius:2px; background:var(--brand)}

/* ---------------- 布局 ---------------- */
.wrap{width:min(var(--wrap),100% - var(--gut)*2); margin-inline:auto}
.wrap--wide{width:min(var(--wrap-wide),100% - var(--gut)*2); margin-inline:auto}
.sec{padding:clamp(56px,7vw,104px) 0}
.sec--tight{padding-top:0}
.sec--mist{background:var(--surface-2)}
.sec--line{border-top:1px solid var(--line-2)}

.grid{display:grid; gap:clamp(24px,3.4vw,44px)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.split{display:grid; gap:clamp(32px,5vw,72px); align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}

/* ---------------- 顶栏 ---------------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent; transition:border-color .3s var(--ease), background-color .4s var(--ease);
}
.nav.is-on{border-bottom-color:var(--line)}
.nav__in{height:var(--nav-h); display:flex; align-items:center; gap:18px}
.brand{display:inline-flex; align-items:baseline; gap:9px; flex:0 0 auto}
.brand__word{font-family:var(--font-disp); font-weight:500; font-size:22px; letter-spacing:.05em}
.brand__en{font-family:var(--font-body); font-size:11px; letter-spacing:.2em; color:var(--ink-3)}
.nav__links{display:flex; gap:clamp(14px,2.2vw,30px); margin-left:auto}
.nav__links a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:14.5px; font-weight:500; font-variation-settings:"wght" 500;
  color:var(--ink-2); transition:color .2s var(--ease);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a[aria-current="page"]{color:var(--brand-ink)}
.nav__links a[aria-current="page"]::after{
  content:""; display:block; height:2px; margin-top:3px; border-radius:2px;
  background:var(--brand); position:absolute; left:0; right:0; bottom:6px;
}
.nav__links a{position:relative}
.nav__cta{flex:0 0 auto; margin-left:4px}

.nav__burger{
  display:none; width:42px; height:42px; border-radius:var(--r-pill);
  align-items:center; justify-content:center; color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line);
}
.nav__burger:hover{background:var(--brand-soft)}
.nav__burger svg{width:20px;height:20px}

.drawer{display:none; border-top:1px solid var(--line); background:var(--bg); padding:8px 0 22px}
.drawer.is-open{display:block}
.drawer a{
  display:flex; align-items:center; min-height:52px; padding:0 4px;
  font-size:16.5px; color:var(--ink-2); border-bottom:1px solid var(--line-2);
}
.drawer a:last-of-type{border-bottom:0}
.drawer a[aria-current="page"]{color:var(--brand-ink)}
.drawer .btn{margin-top:16px; width:100%}

/* ---------------- 按钮 ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:46px; padding:0 24px; border-radius:var(--r-pill);
  font-family:var(--font-body); font-weight:600; font-variation-settings:"wght" 600;
  font-size:15px; letter-spacing:.01em; white-space:nowrap;
  transition:background-color .22s var(--ease), color .22s var(--ease),
             box-shadow .22s var(--ease), transform .18s var(--ease);
}
.btn--solid{background:var(--brand-deep); color:#fff; box-shadow:0 10px 24px -14px rgba(10,89,247,.9)}
.btn--solid:hover{background:#0B4BD0; transform:translateY(-1px); box-shadow:0 16px 30px -16px rgba(10,89,247,.95)}
.btn--ghost{color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); background:var(--surface)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--brand); color:var(--brand-ink); transform:translateY(-1px)}
.btn--lg{min-height:54px; padding:0 32px; font-size:16px}
.btn:active{transform:scale(.98)}
.btn[aria-disabled="true"]{background:var(--ink-3); color:#fff; cursor:not-allowed; box-shadow:none}
.btn[aria-disabled="true"]:hover{transform:none; background:var(--ink-3)}
.btn__meta{font-weight:400; font-variation-settings:"wght" 400; font-size:12.5px; opacity:.8; font-variant-numeric:tabular-nums}
.btn--block{width:100%}

.link-more{
  display:inline-flex; align-items:center; gap:6px; min-height:44px;
  font-weight:600; font-variation-settings:"wght" 600; font-size:15px; color:var(--brand-ink);
}
.link-more i{font-style:normal; transition:transform .2s var(--ease)}
.link-more:hover i{transform:translateX(4px)}
a.underline{border-bottom:1.5px solid var(--line); padding-bottom:1px; transition:border-color .2s,color .2s}
a.underline:hover{color:var(--brand-ink); border-color:var(--brand)}

/* ---------------- 首页主视觉 ---------------- */
.hero{
  min-height:calc(100svh - var(--nav-h) - clamp(20px,3vh,34px));
  display:grid; place-items:center; text-align:center;
  margin:clamp(10px,1.6vw,22px) clamp(10px,1.6vw,22px) 0;
  padding:clamp(44px,8vh,100px) 0 clamp(36px,6vh,72px);
  position:relative; overflow:hidden; background:var(--bg);
  border-radius:var(--r-xl);
  box-shadow:inset 0 0 0 1px var(--line-2);
}
/* 点阵背景：canvas 铺满首屏，随指针扩散并缓慢衰减 */
/* 分层：视频在最底(z0) → 点阵压在上面(z1) → 文案最上(z2)。
   点阵必须在视频之上，否则那层模糊视频会把它整个盖掉。 */
.hero__dots{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none}
.hero__bg{position:absolute; inset:-12%; z-index:0; pointer-events:none;
  opacity:0; transition:opacity 1.4s var(--ease)}
.hero__bg.is-on{opacity:1}
.hero__bg video{width:100%; height:100%; object-fit:cover; filter:blur(52px) saturate(105%); transform:scale(1.16)}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 76%, transparent) 0%,
    color-mix(in srgb, var(--bg) 66%, transparent) 42%,
    color-mix(in srgb, var(--bg) 82%, transparent) 76%,
    var(--bg) 100%);
}
.hero__in{position:relative; z-index:2; width:min(760px,100% - var(--gut)*2); margin-inline:auto}
.hero__mark{
  position:relative;
  font-family:var(--font-disp); font-weight:500;
  font-size:clamp(54px,10.5vw,106px); line-height:1; letter-spacing:.2em;
  text-indent:.2em; color:var(--ink);
}

/* 探照灯：平时是「留白」，鼠标扫过的那一小块圆里换成「知序」。
   三层，都以 .hero__in 为坐标原点：
     1. 「留白」本身，圆内被抠掉（mask 挖一个硬边圆洞）
     2. 跟手的圆，用 backdrop-filter 把底下的背景真正反转（不是白色遮罩）
     3. 「知序」，只在同一个圆里露出，颜色取页面底色 —— 正好是反转后的字色
   于是圆内看到的是：反转过的背景 + 知序。移开就恢复成留白。 */
.hero__mark{user-select:none; -webkit-user-select:none}

.hero__mark-main{
  --mx:-999px; --my:-999px; --mr:31px;
  -webkit-mask-image:radial-gradient(circle var(--mr) at var(--mx) var(--my), transparent 99%, #000 100%);
  mask-image:radial-gradient(circle var(--mr) at var(--mx) var(--my), transparent 99%, #000 100%);
}

.hero__spot{
  position:absolute; left:0; top:0; z-index:2; width:62px; height:62px;
  border-radius:50%; pointer-events:none; opacity:0;
  backdrop-filter:invert(1); -webkit-backdrop-filter:invert(1);
  transition:opacity .18s var(--ease);
}
.hero__spot.is-on{opacity:1}

/* 「知序」这一层：和字标同一套字体度量，压在同一个位置上 */
.hero__spot-alt{
  position:absolute; top:0; left:0; width:100%;
  z-index:3; pointer-events:none;
  font-family:var(--font-disp); font-weight:500;
  font-size:clamp(54px,10.5vw,106px); line-height:1; letter-spacing:.2em;
  text-indent:.2em;
  color:var(--bg);
  clip-path:circle(var(--spot-r,31px) at var(--spot-x,-999px) var(--spot-y,-999px));
  opacity:0; transition:opacity .18s var(--ease);
}
.hero__spot-alt.is-on{opacity:1}

/* 这两层不能参与首屏 rise 动画：带动画的元素会变成 backdrop 根，
   圆里的 backdrop-filter 就反转不到背景了（试过，圆会变成透明）。 */
.hero__in > .hero__spot, .hero__in > .hero__spot-alt{animation:none}
.hero__en{margin-top:18px; font-size:12.5px; letter-spacing:.44em; text-indent:.44em; color:var(--ink-3)}
.hero__slogan{
  margin-top:clamp(28px,5vh,46px);
  font-family:var(--font-disp); font-weight:500;
  font-size:clamp(21px,2.9vw,32px); line-height:1.5;
}
.hero__cta{margin-top:clamp(30px,4.6vh,46px); display:flex; gap:14px; justify-content:center; flex-wrap:wrap}




/* 首屏内容逐级浮现 */
.hero__in > *{animation:rise .9s var(--ease-out) both}
.hero__in > *:nth-child(1){animation-delay:.05s}
.hero__in > *:nth-child(2){animation-delay:.12s}
.hero__in > *:nth-child(3){animation-delay:.2s}
.hero__in > *:nth-child(4){animation-delay:.28s}
@keyframes rise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}

/* 首页下方四个入口 */
.entries-sec{padding-top:clamp(72px,11vw,150px)}
.entries{
  display:grid; gap:clamp(14px,1.8vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
}
.entry{
  display:block; padding:26px clamp(20px,2.4vw,28px) 28px;
  background:var(--surface); border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px var(--line-2);
  transition:transform .28s var(--ease-out), box-shadow .28s var(--ease), background-color .3s var(--ease);
}
.entry:hover{transform:translateY(-4px); box-shadow:inset 0 0 0 1px var(--brand), var(--shadow)}
.entry__no{display:block; font-size:12px; font-weight:600; font-variation-settings:"wght" 600;
  letter-spacing:.12em; color:var(--brand-ink)}
.entry__name{display:block; margin-top:14px; font-family:var(--font-body); font-weight:600;
  font-variation-settings:"wght" 600; font-size:18px}
.entry__desc{display:block; margin-top:8px; font-size:14px; line-height:1.75; color:var(--ink-2)}
.entry__arrow{display:inline-flex; margin-top:16px; color:var(--brand); transition:transform .28s var(--ease-out)}
.entry:hover .entry__arrow{transform:translateX(5px)}

/* ---------------- 内页页头 ---------------- */
.ph{padding:clamp(44px,6vw,84px) 0 clamp(24px,3vw,40px)}
.ph__lead{margin-top:18px; max-width:var(--measure)}

/* ---------------- 功能区块 ---------------- */
.feat{padding:clamp(46px,6vw,88px) 0}
.feat__no{font-size:12.5px; letter-spacing:.14em; color:var(--ink-3); margin-bottom:14px}
.feat__body{margin-top:18px}
.feat__body p + p{margin-top:1em}
.feat__note{
  margin-top:20px; padding-top:18px; border-top:1px solid var(--line-2);
  font-size:13.5px; line-height:1.8; color:var(--ink-3); max-width:var(--measure);
}
.feat__media{margin:0}
.feat__media img{width:100%; border-radius:var(--r-lg); background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line-2)}
.feat__cap{margin-top:14px; font-size:13px; color:var(--ink-3)}

.shot-phone{
  width:min(300px,72vw); margin-inline:auto;
  border-radius:34px; overflow:hidden; background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line-2), var(--shadow);
}
.shot-phone img{width:100%}
.feat--a .split{align-items:start}

/* 版式 B：整幅天气带 */
.feat--b{background:linear-gradient(180deg, var(--tint) 0%, var(--surface-2) 52%, var(--bg) 100%)}
.wxbar{
  margin-top:clamp(28px,4vw,44px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  gap:10px; padding-top:8px;
}
.wxbar li{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:18px 6px 20px; border-radius:var(--r-md); background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line-2);
  transition:transform .26s var(--ease-out), box-shadow .26s var(--ease);
}
.wxbar li:hover{transform:translateY(-4px); box-shadow:inset 0 0 0 1px var(--brand), var(--shadow)}
.wxbar svg{width:30px; height:30px; color:var(--brand-ink)}
.wxbar b{font-weight:600; font-variation-settings:"wght" 600; font-size:14.5px}
.feat--b .feat__media{margin-top:clamp(32px,4vw,52px)}
.feat--b .feat__media img{max-width:980px; margin-inline:auto}

/* 版式 C：纸条 */
.feat--c{background:var(--surface-2)}
.feat--c .narrowbox{max-width:40em}
.note-card{
  margin-top:clamp(26px,3.4vw,40px);
  background:var(--surface); border-radius:var(--r-lg);
  padding:clamp(24px,3.2vw,40px);
  box-shadow:inset 0 0 0 1px var(--line-2);
  font-size:clamp(16px,1.7vw,18.5px); line-height:1.95; color:var(--ink);
}
.note-card p + p{margin-top:.9em}
.note-card cite{display:block; margin-top:1.3em; font-style:normal; font-size:13px; color:var(--ink-3)}

/* 版式 D：泡泡机 */
.feat--d{background:linear-gradient(180deg, var(--surface-2) 0%, var(--tint) 100%)}
.rx{margin-top:clamp(30px,4vw,48px); display:flex; flex-direction:column; align-items:center}
.rx__stage{position:relative; width:min(420px,86vw); aspect-ratio:1; margin-inline:auto}
.rx__sky{position:absolute; inset:0 0 34% 0; z-index:4}
/* 机身盒子：base / core / art 三个都按比例挂在它下面 —— 这是 App 里的原始关系，
   比例取自 App 的 styles.css（base 105.35% / core 49.4%×40.6%）。
   之前 base 被当成独立图层，尺寸和位置各算各的，机身顶端就露出一截。 */
.rx__machine{position:absolute; left:50%; bottom:0; width:66%; transform:translateX(-50%); z-index:2}
.rx__base{position:absolute; left:-2.67%; top:2.17%; width:105.35%; max-width:none; z-index:0}
/* ↑ max-width:none 必须有：全局 img{max-width:100%} 会把 105.35% 夹回 100%，
   机内舱就比机身小一圈，环里会缺一块。 */
.rx__art{position:relative; z-index:2; width:100%; display:block}
.rx__core{
  position:absolute; left:49.4%; top:40.6%; width:76px; height:76px; margin:-38px 0 0 -38px;
  z-index:1; opacity:0; pointer-events:none;
  background:url('../release/bubble-6.webp') center/100% 100% no-repeat;
  will-change:transform, opacity;
}
.rx__core.is-rising{z-index:3}
@keyframes rxFloat{from{transform:translate3d(0,0,0)} to{transform:translate3d(0,-13px,0)}}
.rx__panel{
  margin-top:clamp(20px,3vw,30px); width:min(420px,92vw);
  background:var(--surface); border-radius:var(--r-xl);
  box-shadow:inset 0 0 0 1px var(--line-2), var(--shadow);
  padding:22px 22px 24px;
}
.rx__title{font-weight:600; font-variation-settings:"wght" 600; font-size:17px}
.rx__row{
  margin-top:14px; display:flex; align-items:center; gap:10px;
  background:var(--surface-2); border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px var(--line-2); padding:5px 5px 5px 20px;
}
.rx__input{flex:1 1 auto; min-width:0; border:0; background:none; outline:none;
  font-family:inherit; font-size:15px; color:var(--ink); padding:10px 0}
.rx__input::placeholder{color:var(--ink-3)}
.rx__send{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  background:var(--brand-deep); color:#fff; display:grid; place-items:center;
  transition:background-color .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
}
.rx__send:hover:not([disabled]){transform:scale(1.06)}
.rx__send[disabled]{background:var(--line); color:var(--ink-3); cursor:not-allowed}
.rx__send svg{width:18px;height:18px}
.rx__hint{margin-top:12px; font-size:12.5px; color:var(--ink-3)}
.rx__count{font-variant-numeric:tabular-nums}
.rx-fly{
  position:absolute; display:grid; place-items:center; text-align:center;
  border-radius:50%; padding:8px; font-size:12px; line-height:1.45; color:var(--ink);
  background-size:100% 100%; background-repeat:no-repeat;
  will-change:transform, opacity; pointer-events:none;
}

/* ---------------- 卡片 / 说明块 ---------------- */
.cards{display:grid; gap:clamp(16px,2.2vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.card{
  background:var(--surface); border-radius:var(--r-lg);
  padding:clamp(22px,2.8vw,32px); box-shadow:inset 0 0 0 1px var(--line-2);
  transition:transform .28s var(--ease-out), box-shadow .28s var(--ease);
}
.card:hover{transform:translateY(-3px); box-shadow:inset 0 0 0 1px var(--line), var(--shadow)}
.card h3 + p{margin-top:10px}
.card p{font-size:15px; line-height:1.8; color:var(--ink-2)}
.card__tag{font-size:12px; font-weight:600; font-variation-settings:"wght" 600;
  letter-spacing:.12em; color:var(--brand-ink)}

.callout{
  margin-top:clamp(26px,3.4vw,40px);
  background:var(--brand-soft); border-radius:var(--r-lg);
  padding:22px clamp(22px,2.6vw,30px);
}
.callout h3{font-size:16px}
.callout p{margin-top:8px; font-size:14.5px; line-height:1.8; color:var(--ink-2)}

/* ---------------- 规格 ---------------- */
.spec{
  display:grid; gap:1px; background:var(--line-2); border-radius:var(--r-lg); overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
}
.spec > div{background:var(--surface); padding:20px clamp(16px,2vw,22px)}
.spec dt{font-size:12.5px; color:var(--ink-3)}
.spec dd{margin-top:6px; font-weight:600; font-variation-settings:"wght" 600;
  font-size:15.5px; color:var(--ink); overflow-wrap:anywhere}

/* ---------------- 步骤 ---------------- */
.steps{counter-reset:s; display:grid; gap:clamp(18px,2.4vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.steps > li{counter-increment:s; padding:24px clamp(20px,2.4vw,26px);
  background:var(--surface); border-radius:var(--r-lg); box-shadow:inset 0 0 0 1px var(--line-2)}
.steps > li::before{
  content:"0" counter(s); display:block; font-size:12.5px; font-weight:600;
  font-variation-settings:"wght" 600; letter-spacing:.14em;
  color:var(--brand-ink); margin-bottom:10px;
}
.steps h3{font-size:16.5px}
.steps p{margin-top:8px; font-size:14.5px; line-height:1.8; color:var(--ink-2)}

/* ---------------- FAQ ---------------- */
.faq{display:grid; gap:12px}
.faq details{
  background:var(--surface); border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px var(--line-2); overflow:hidden;
  transition:box-shadow .24s var(--ease);
}
.faq details[open]{box-shadow:inset 0 0 0 1px var(--brand)}
.faq summary{
  list-style:none; cursor:pointer; padding:20px 52px 20px 22px; position:relative;
  font-weight:600; font-variation-settings:"wght" 600; font-size:16.5px;
  transition:color .2s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:22px; top:50%; width:10px; height:10px;
  margin-top:-7px; border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg); transition:transform .26s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:-2px; border-color:var(--brand)}
.faq summary:hover{color:var(--brand-ink)}
.faq .faq__a{padding:0 22px 22px; max-width:var(--measure); color:var(--ink-2); font-size:15.5px}
.faq .faq__a p + p{margin-top:.9em}

/* ---------------- 长文档（隐私） ---------------- */
.doc{display:grid; gap:clamp(28px,4vw,56px); align-items:start;
  grid-template-columns:minmax(0,220px) minmax(0,1fr)}
.doc__toc{position:sticky; top:calc(var(--nav-h) + 28px)}
.doc__toc p{font-size:12.5px; letter-spacing:.12em; color:var(--ink-3); margin-bottom:12px}
.doc__toc a{
  display:flex; align-items:center; min-height:44px; padding:2px 0 2px 15px;
  font-size:14px; color:var(--ink-2); border-left:2px solid var(--line);
  transition:color .2s, border-color .2s;
}
.doc__toc a:hover{color:var(--brand-ink); border-color:var(--brand)}
.doc__body h2{margin-top:2.6em}
.doc__body h2:first-child{margin-top:0}
.doc__body h3{margin-top:1.9em; font-size:16.5px}
.doc__body p{margin-top:1em; max-width:var(--measure); color:var(--ink-2)}
.doc__body ul{margin-top:1em; display:grid; gap:.55em; max-width:var(--measure)}
.doc__body ul li{position:relative; padding-left:1.05em; color:var(--ink-2)}
.doc__body ul li::before{content:""; position:absolute; left:0; top:.8em; width:6px; height:2px; border-radius:2px; background:var(--brand)}
.doc__body strong{color:var(--ink)}

.banner{
  background:var(--brand-soft); border-radius:var(--r-lg);
  padding:22px clamp(20px,2.6vw,30px); color:var(--ink);
}
.banner b{color:var(--brand-ink)}
.banner p{margin-top:8px; font-size:14px; line-height:1.8; color:var(--ink-2)}
.banner p:first-child{margin-top:0}

.tbl-wrap{overflow-x:auto; margin-top:1.2em; border-radius:var(--r-md); box-shadow:inset 0 0 0 1px var(--line-2); -webkit-overflow-scrolling:touch}
.tbl{width:100%; border-collapse:collapse; font-size:14.5px; min-width:520px}
.tbl caption{text-align:left; font-size:13px; color:var(--ink-3); padding-bottom:10px}
.tbl th,.tbl td{text-align:left; padding:13px 15px; border-bottom:1px solid var(--line-2); vertical-align:top}
.tbl th{font-weight:600; font-variation-settings:"wght" 600; font-size:13.5px; color:var(--ink); background:var(--surface-2)}
.tbl td{color:var(--ink-2)}
.tbl tr td:first-child{color:var(--ink); font-weight:500; font-variation-settings:"wght" 500}
.tbl tr:last-child td{border-bottom:0}

.doc__body section + section{margin-top:clamp(34px,4.4vw,56px)}
.doc__body h2 span{
  display:inline-block; font-size:12.5px; font-weight:600; font-variation-settings:"wght" 600;
  letter-spacing:.12em; color:var(--brand-ink); margin-right:10px; vertical-align:2px;
}
.doc__body .step{margin-top:1.1em; padding-left:46px; position:relative; max-width:var(--measure)}
.doc__body .step__no{
  position:absolute; left:0; top:.3em; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; background:var(--brand-soft); color:var(--brand-ink);
  font-size:12.5px; font-weight:600; font-variation-settings:"wght" 600;
}
.doc__body .step p{margin-top:0}
.doc__body details{
  background:var(--surface); border-radius:var(--r-md); margin-top:12px;
  box-shadow:inset 0 0 0 1px var(--line-2); overflow:hidden;
}
.doc__body details[open]{box-shadow:inset 0 0 0 1px var(--brand)}
.doc__body details summary{
  list-style:none; cursor:pointer; padding:18px 52px 18px 22px; position:relative;
  font-weight:600; font-variation-settings:"wght" 600; font-size:16px;
}
.doc__body details summary::-webkit-details-marker{display:none}
.doc__body details summary::after{
  content:""; position:absolute; right:22px; top:50%; width:10px; height:10px;
  margin-top:-7px; border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg); transition:transform .26s var(--ease);
}
.doc__body details[open] summary::after{transform:rotate(-135deg); margin-top:-2px; border-color:var(--brand)}
.doc__body details summary:hover{color:var(--brand-ink)}
.doc__body details p{padding:0 22px}
.doc__body details p:last-child{padding-bottom:20px}

/* ---------------- 更新日志 ---------------- */
.rel{
  background:var(--surface); border-radius:var(--r-lg);
  padding:clamp(24px,3vw,34px); margin-top:16px; box-shadow:inset 0 0 0 1px var(--line-2);
}
.rel__head{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px}
.rel__ver{font-family:var(--font-body); font-weight:600; font-variation-settings:"wght" 600; font-size:20px}
.rel__date{font-size:13.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.tag{
  display:inline-flex; align-items:center; height:26px; padding:0 12px;
  border-radius:var(--r-pill); font-size:12px; font-weight:600;
  font-variation-settings:"wght" 600; background:var(--brand-soft); color:var(--brand-ink);
}
.tag--clay{background:var(--surface-2); color:var(--ink-2)}
.tag--line{background:transparent; box-shadow:inset 0 0 0 1px var(--line); color:var(--ink-3)}
.rel__list{margin-top:10px; display:grid; gap:9px; max-width:46em}
.rel__list li{position:relative; padding-left:1.15em; font-size:15px; line-height:1.8; color:var(--ink-2)}
.rel__list li::before{content:""; position:absolute; left:0; top:.82em; width:6px; height:2px; border-radius:2px; background:var(--brand)}
.rel__note{margin-top:14px; font-size:13px; color:var(--ink-3)}
.rel + .rel{margin-top:14px}

/* ---------------- 页脚 ---------------- */
.ft{margin-top:clamp(48px,7vw,96px); border-top:1px solid var(--line); background:var(--bg)}
.ft__in{padding:clamp(40px,5vw,64px) 0 0}
.ft__top{
  display:grid;
  grid-template-columns:minmax(0,170px) minmax(0,170px) minmax(0,1fr);
  column-gap:clamp(32px,5vw,80px);
  row-gap:clamp(24px,3vw,40px);
  align-items:start;
}
.ft__brand{grid-row:1; grid-column:1 / -1; display:flex; align-items:baseline; gap:10px; margin-bottom:6px}
.ft__brand .brand__word{font-size:20px}
.ft__col h4{font-size:12.5px; letter-spacing:.12em; color:var(--ink-3); margin-bottom:12px}
.ft__col a{display:flex; align-items:center; min-height:44px; font-size:14.5px; color:var(--ink-2); transition:color .2s var(--ease)}
.ft__col a:hover{color:var(--brand-ink)}
.ft__col p{font-size:13.5px; line-height:1.85; color:var(--ink-3); max-width:26em}
.ft__safe{
  margin-top:clamp(34px,4.4vw,52px); padding-top:22px; border-top:1px solid var(--line-2);
  font-size:13px; line-height:1.9; color:var(--ink-3); max-width:60em;
}
.ft__safe b{color:var(--ink-2)}
.ft__end{
  margin-top:20px; padding:18px 0 34px; border-top:1px solid var(--line-2);
  display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center;
  font-size:12.5px; color:var(--ink-3);
}
.ft__end .sp{margin-left:auto}

/* ---------------- 页脚里的参赛标志 ----------------
   两枚标志各自带底色，原样放上来；统一高度与圆角，悬停时提亮。 */
.ft__marks{
  grid-row:2; grid-column:3; align-self:start; justify-self:end;
  display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:flex-end;
  gap:clamp(14px,1.8vw,22px);
}
.ft__marks a{
  display:block; flex:0 0 auto; border-radius:12px; overflow:hidden;
  opacity:.78; transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.ft__marks a:hover{opacity:1; transform:translateY(-2px)}
.ft__marks picture{display:block}
.ft__marks a:first-child, .ft__marks a:first-child picture, .ft__marks a:first-child img{border-radius:0}
.ft__marks img{display:block; height:clamp(72px,8vw,108px); width:auto}

/* ---------------- 轻淡入 ---------------- */
.rv{opacity:1; transform:none}
html.js-reveal .rv{opacity:0; transform:translateY(18px);
  transition:opacity .75s var(--ease-out), transform .75s var(--ease-out)}
html.js-reveal .rv.is-in{opacity:1; transform:none}
/* 一组卡片错开一点出现 */
html.js-reveal .cards .rv:nth-child(2),
html.js-reveal .entries .rv:nth-child(2){transition-delay:.08s}
html.js-reveal .cards .rv:nth-child(3),
html.js-reveal .entries .rv:nth-child(3){transition-delay:.16s}
html.js-reveal .entries .rv:nth-child(4){transition-delay:.24s}

/* ---------------- 降低动态 ---------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html.js-reveal .rv{opacity:1 !important; transform:none !important}
  .hero__bg{display:none}
  .hero__in > *{animation:none !important}
}

/* ---------------- 响应式 ---------------- */
@media (max-width: 980px){
  .doc{grid-template-columns:minmax(0,1fr)}
  .doc__toc{position:static; display:grid; gap:0;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
  .doc__toc p{grid-column:1 / -1}
}
@media (max-width: 900px){
  .ft__top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ft__marks{grid-row:auto; grid-column:1 / -1; justify-self:start; justify-content:flex-start; align-self:auto}
  :root{--nav-h:60px}
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:inline-flex}
  .hero{min-height:auto; padding:clamp(40px,10vh,80px) 0 clamp(36px,7vh,64px)}
  .hero__mark{letter-spacing:.14em; text-indent:.14em}
  .hero__cta{flex-direction:column; align-items:stretch}
  .hero__cta .btn{width:100%}
  .rx__sky{display:none}
  .rx__stage{width:min(320px,80vw)}
}
@media (max-width: 560px){
  body{font-size:16px}
  .spec{grid-template-columns:minmax(0,1fr)}
  .wxbar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ft__end .sp{margin-left:0}
}
@media (hover:none){
  .entry:hover,.card:hover,.wxbar li:hover{transform:none}
  .entry:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
  .card:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
}

/* ---------------- 打印 ---------------- */
@media print{
  .nav,.drawer,.ft,.skip,.doc__toc{display:none !important}
  body{background:#fff; color:#000; font-size:11.5pt}
  .doc{grid-template-columns:1fr}
  .banner{background:#f2f2f2}
}