/* roulang page: index */
:root{
  --ink:#0B0F0E;
  --lime:#C8F751;
  --lime-d:#AEDD34;
  --teal:#2E6F63;
  --bg:#F6F5F1;
  --card:#FFFFFF;
  --text:#12160F;
  --muted:#6B7269;
  --line:#E4E2DA;
  --orange:#E2543A;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:'PingFang SC','HarmonyOS Sans SC','Microsoft YaHei',system-ui,sans-serif;
  font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;border:0;background:none;cursor:pointer;}
h1,h2,h3,h4,p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#D6D4CB;border-radius:999px;border:3px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:#BFBDB3;}

a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{
  outline:2px solid var(--lime);outline-offset:2px;border-radius:12px;
}

/* 侧栏导航 */
.side-nav{position:fixed;top:0;left:0;bottom:0;z-index:50;width:288px;background:var(--ink);
  display:flex;flex-direction:column;transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.2,.7,.3,1);}
.side-nav.open{transform:translateX(0);}
@media(min-width:1024px){
  .side-nav{width:248px;transform:none;transition:none;}
  .main-shift{padding-left:248px;}
}
.nav-item{position:relative;display:flex;align-items:center;min-height:48px;padding:0 24px;
  font-size:14.5px;color:rgba(255,255,255,.68);
  transition:color .18s ease,background-color .18s ease;}
.nav-item::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:20px;background:transparent;transition:background-color .18s ease;}
.nav-item:hover{color:#fff;background:rgba(255,255,255,.045);}
.nav-item:hover::before{background:rgba(200,247,81,.4);}
.nav-item.is-active{color:var(--lime);background:rgba(200,247,81,.06);}
.nav-item.is-active::before{background:var(--lime);}
.nav-group-label{padding:14px 24px 6px;font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.34);}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;
  border-radius:12px;font-size:15px;font-weight:600;white-space:nowrap;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s ease,background-color .18s ease,
             border-color .18s ease,color .18s ease;}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--lime);color:var(--ink);}
.btn-primary:hover{background:var(--lime-d);transform:translateY(-2px);box-shadow:0 8px 24px -12px rgba(11,15,14,.35);}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--text);}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px);}
.btn-dark-ghost{background:transparent;border:1px solid rgba(255,255,255,.24);color:#fff;}
.btn-dark-ghost:hover{color:var(--lime);border-color:rgba(255,255,255,.5);}
.btn-sm{height:44px;padding:0 16px;font-size:14px;border-radius:12px;}

/* 徽章 */
.badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:999px;
  font-size:13px;font-weight:500;line-height:1;white-space:nowrap;}
.badge-lime{background:#EAF9C9;color:#3F5807;}
.badge-teal{background:#E8F1EE;color:#2E6F63;}
.badge-alert{background:#FBE8E3;color:#B23A22;}
.badge-plain{background:#F1F0EA;color:#6B7269;}

/* 卡片 */
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 1px 2px rgba(11,15,14,.06);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s ease;overflow:hidden;}
.card::after{content:"";position:absolute;top:0;left:0;height:2px;width:0;background:var(--lime);
  transition:width .22s cubic-bezier(.2,.7,.3,1);}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 24px -12px rgba(11,15,14,.18);}
.card:hover::after{width:100%;}

/* 序号 */
.num-outline{font-size:clamp(44px,4.4vw,64px);line-height:1;font-weight:800;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1.5px rgba(18,22,15,.28);font-variant-numeric:tabular-nums;}

.section-head{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;}
.head-link{font-size:14px;font-weight:600;color:var(--text);text-decoration:underline;
  text-underline-offset:4px;text-decoration-color:#C9C7BD;transition:color .18s,text-decoration-color .18s;}
.head-link:hover{color:var(--teal);text-decoration-color:var(--lime);}
.head-link i{transition:transform .18s cubic-bezier(.2,.7,.3,1);}
.head-link:hover i{transform:translateX(4px);}

/* 功能清单 */
.feature-row{display:grid;grid-template-columns:1fr;gap:8px;padding:24px 4px;border-top:1px solid var(--line);
  transition:background-color .18s ease;}
.feature-row:hover{background:#FAFAF7;}
@media(min-width:768px){.feature-row{grid-template-columns:4fr 8fr;gap:24px;align-items:start;}}
.feature-row:last-child{border-bottom:1px solid var(--line);}

/* 截图轮播 */
.shot-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--text);display:grid;place-items:center;
  box-shadow:0 1px 2px rgba(11,15,14,.06);transition:background-color .18s,border-color .18s,color .18s;}
.shot-arrow:hover{background:var(--lime);border-color:var(--lime);color:var(--ink);}
.thumb{width:72px;height:48px;border-radius:8px;overflow:hidden;flex:0 0 auto;border:2px solid transparent;
  padding:0;transition:border-color .18s ease;}
.thumb.is-active{border-color:var(--lime);}
.thumb img{width:100%;height:100%;object-fit:cover;}

/* 系统要求键值行 */
.kv{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;
  border-bottom:1px solid var(--line);font-size:14px;}
.kv:last-of-type{border-bottom:0;}
.kv .k{color:var(--muted);font-size:13px;}
.kv .v{font-weight:600;font-size:15px;text-align:right;}

/* FAQ */
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:56px;padding:14px 4px;cursor:pointer;font-size:16px;font-weight:600;
  color:var(--text);list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item .plus{color:var(--teal);font-size:15px;transition:transform .2s cubic-bezier(.2,.7,.3,1);flex:0 0 auto;}
.faq-item[open] .plus{transform:rotate(45deg);}
.faq-item p{padding:0 4px 20px;font-size:15px;line-height:1.8;color:var(--muted);max-width:720px;}

/* 空态 */
.empty-state{border-top:1px dashed var(--line);border-radius:16px;background:#FCFBF8;
  padding:48px 24px;text-align:center;color:var(--muted);font-size:14px;}

/* 文本截断 */
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* 网格底纹 */
.grid-tex{background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:34px 34px;}

/* 入场动画 */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1);}
.reveal.in{opacity:1;transform:none;}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  .reveal{opacity:1;transform:none;}
}

/* roulang page: article */
:root{
  --ink:#0B0F0E; --accent:#C8F751; --accent-deep:#AEDD34; --pine:#2E6F63;
  --sand:#F6F5F1; --paper:#FFFFFF; --body:#12160F; --muted:#6B7269;
  --line:#E4E2DA; --alert:#E2543A; --row:#FAFAF7;
  --r-card:16px; --r-shot:20px; --r-btn:12px;
  --sh-sm:0 1px 2px rgba(11,15,14,.06);
  --sh-md:0 8px 24px -12px rgba(11,15,14,.18);
  --sh-lg:0 28px 60px -30px rgba(11,15,14,.35);
  --ease:cubic-bezier(.2,.7,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--sand); color:var(--body);
  font-family:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",ui-sans-serif,system-ui,sans-serif;
  font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
input,textarea{font:inherit}
::selection{background:#C8F751; color:#0B0F0E}
.tnum{font-variant-numeric:tabular-nums}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#EDEBE4}
::-webkit-scrollbar-thumb{background:#C6C6BC;border-radius:99px;border:2px solid #EDEBE4}
::-webkit-scrollbar-thumb:hover{background:#A9A99E}

/* 侧栏导航 */
.nav-item{
  position:relative; display:flex; align-items:center; gap:10px;
  height:48px; padding:0 20px 0 22px; font-size:15px; color:rgba(255,255,255,.62);
  transition:color .18s var(--ease), background-color .18s var(--ease);
}
.nav-item::before{
  content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px;
  background:transparent; border-radius:0 3px 3px 0; transition:background-color .18s var(--ease);
}
.nav-item:hover{color:#fff; background:rgba(255,255,255,.04)}
.nav-item:hover::before{background:rgba(200,247,81,.4)}
.nav-item.is-active{color:#fff; font-weight:600}
.nav-item.is-active::before{background:var(--accent)}
.nav-item.is-active i{color:var(--accent)}

.drawer-link{
  display:flex; align-items:center; gap:12px; height:52px; padding:0 22px;
  font-size:16px; color:rgba(255,255,255,.7); border-bottom:1px solid rgba(255,255,255,.06);
}
.drawer-link.is-active{color:#fff; font-weight:600; background:rgba(200,247,81,.08)}
.drawer-link.is-active i{color:var(--accent)}

/* 按钮 */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 22px; border-radius:var(--r-btn); font-size:15px; font-weight:600;
  transition:transform .16s var(--ease), background-color .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.btn-primary{background:var(--accent); color:var(--ink); box-shadow:var(--sh-sm)}
.btn-primary:hover{background:var(--accent-deep); transform:translateY(-2px); box-shadow:var(--sh-md)}
.btn-primary:active{transform:scale(.98)}
.btn-ghost{border:1px solid var(--line); background:#fff; color:var(--body)}
.btn-ghost:hover{border-color:var(--ink); color:var(--ink); transform:translateY(-2px)}
.btn-dark-ghost{border:1px solid rgba(255,255,255,.24); color:#fff}
.btn-dark-ghost:hover{color:var(--accent); border-color:rgba(200,247,81,.6)}
.btn-sm{height:38px; padding:0 16px; font-size:14px; border-radius:10px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* 徽章 */
.badge{display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 12px;
  border-radius:999px; font-size:13px; font-weight:500; white-space:nowrap}
.badge-accent{background:#EAF9C9; color:#3C4A12}
.badge-pine{background:#E8F1EE; color:#1F4C43}
.badge-alert{background:#FBE8E3; color:#93331F}
.badge-plain{background:#fff; border:1px solid var(--line); color:var(--muted)}

/* 卡片 */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--sh-sm); position:relative; overflow:hidden;
  transition:box-shadow .2s var(--ease), transform .2s var(--ease);}
.card::after{content:""; position:absolute; inset:0 auto auto 0; height:2px; width:0;
  background:var(--accent); transition:width .22s var(--ease);}
.card:hover{box-shadow:var(--sh-md); transform:translateY(-2px)}
.card:hover::after{width:100%}

/* 分隔列表 */
.rule-list > * + *{border-top:1px solid var(--line)}

/* 阅读进度 */
#progress{transition:width .08s linear}

/* 正文排版 */
.prose-pg{font-size:17px; line-height:1.9; color:var(--body); word-wrap:break-word}
.prose-pg > *:first-child{margin-top:0}
.prose-pg p{margin:1.4em 0}
.prose-pg h2{font-size:24px; line-height:1.35; font-weight:700; margin:2.2em 0 .85em;
  padding-left:16px; position:relative; scroll-margin-top:96px}
.prose-pg h2::before{content:""; position:absolute; left:0; top:.32em; width:4px; height:20px;
  background:var(--accent); border-radius:2px}
.prose-pg h3{font-size:20px; line-height:1.4; font-weight:600; margin:1.8em 0 .6em; scroll-margin-top:96px}
.prose-pg blockquote{margin:1.5em 0; padding:14px 18px; font-size:15px; color:#3B4137;
  background:var(--sand); border-left:3px solid var(--pine); border-radius:0 12px 12px 0}
.prose-pg blockquote p{margin:.4em 0}
.prose-pg pre{margin:1.5em 0; padding:16px 18px; background:var(--ink); color:#E8EAE4;
  border-radius:12px; overflow-x:auto; font-size:14px; line-height:1.7}
.prose-pg pre code{background:none; color:inherit; padding:0; font-size:14px}
.prose-pg code{background:#F0EFE9; color:#2E3A2A; padding:2px 6px; border-radius:6px;
  font-size:14.5px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.prose-pg table{width:100%; border-collapse:collapse; margin:1.5em 0; font-size:15px}
.prose-pg th,.prose-pg td{border:1px solid var(--line); padding:10px 14px; text-align:left}
.prose-pg th{background:#F3F2EC; font-weight:600}
.prose-pg tbody tr:nth-child(even){background:var(--row)}
.prose-pg img{border-radius:12px; margin:1.6em auto; max-width:100%}
.prose-pg figure{margin:1.6em 0}
.prose-pg figcaption{text-align:center; font-size:13px; color:var(--muted); margin-top:10px}
.prose-pg a{text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--accent-deep); text-decoration-thickness:2px}
.prose-pg a:hover{text-decoration-color:var(--ink)}
.prose-pg ul{margin:1.1em 0; padding-left:22px; list-style:disc}
.prose-pg ul li{margin:.5em 0}
.prose-pg ul li::marker{color:var(--pine)}
.prose-pg ol{counter-reset:pgol; list-style:none; margin:1.1em 0; padding-left:0}
.prose-pg ol > li{counter-increment:pgol; position:relative; padding-left:42px; margin:.7em 0}
.prose-pg ol > li::before{content:counter(pgol,decimal-leading-zero); position:absolute; left:0; top:.35em;
  width:28px; height:28px; border-radius:8px; background:#EAF9C9; color:#3C4A12;
  font-size:12px; font-weight:700; display:grid; place-items:center; font-variant-numeric:tabular-nums}
.prose-pg hr{border:0; border-top:1px solid var(--line); margin:2.4em 0}
.prose-pg > p:first-of-type::first-letter{font-size:2.6em; line-height:1; font-weight:800;
  float:left; margin:.06em .12em 0 0; color:var(--ink)}

/* 空态 */
.empty-state{border-top:1px dashed var(--line); padding:52px 24px; text-align:center; border-radius:16px; background:#fff}
.empty-state .ico{width:56px; height:56px; margin:0 auto 16px; border-radius:16px;
  background:var(--sand); display:grid; place-items:center; color:var(--muted); font-size:22px}

/* 目录 */
.toc-link{display:block; padding:7px 0 7px 14px; font-size:14px; color:var(--muted);
  border-left:2px solid var(--line); transition:color .16s var(--ease), border-color .16s var(--ease)}
.toc-link:hover{color:var(--body)}
.toc-link.lvl-3{padding-left:26px; font-size:13.5px}
.toc-link.is-current{color:var(--ink); font-weight:600; border-left-color:var(--accent)}

.grid-texture{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:32px 32px}

.fade-up{opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease)}
.fade-up.in{opacity:1; transform:none}

@media (max-width:639px){
  .prose-pg{font-size:16.5px; line-height:1.85}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  .fade-up{opacity:1; transform:none}
  html{scroll-behavior:auto}
}

/* roulang page: category1 */
:root{
  --ink:#0B0F0E;
  --accent:#C8F751;
  --accent-dark:#AEDD34;
  --pine:#2E6F63;
  --sand:#F6F5F1;
  --body:#12160F;
  --muted:#6B7269;
  --line:#E4E2DA;
  --warn:#E2543A;
  --r-card:16px;
  --r-shot:20px;
  --r-ctl:12px;
  --sh-xs:0 1px 2px rgba(11,15,14,.06);
  --sh-md:0 8px 24px -12px rgba(11,15,14,.18);
  --sh-lg:0 28px 60px -30px rgba(11,15,14,.35);
  --ease:cubic-bezier(.2,.7,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--sand);
  color:var(--body);
  font-family:"Inter","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",ui-sans-serif,system-ui,sans-serif;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.tnum{font-variant-numeric:tabular-nums}
::selection{background:var(--accent);color:var(--ink)}

/* 滚动条 */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(11,15,14,.18);border-radius:999px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(11,15,14,.32);background-clip:padding-box}

/* 左侧导航 */
.sidebar-link{
  position:relative;
  display:flex;
  align-items:center;
  height:48px;
  padding:0 12px 0 18px;
  border-radius:10px;
  font-size:14.5px;
  color:rgba(255,255,255,.62);
  transition:color .18s var(--ease),background-color .18s var(--ease);
}
.sidebar-link::before{
  content:"";
  position:absolute;left:0;top:50%;
  transform:translateY(-50%);
  width:3px;height:16px;border-radius:2px;
  background:transparent;
  transition:background-color .18s var(--ease),height .18s var(--ease);
}
.sidebar-link:hover{color:#fff;background:rgba(255,255,255,.045)}
.sidebar-link:hover::before{background:rgba(200,247,81,.4)}
.sidebar-link.is-active{color:#fff;background:rgba(255,255,255,.07)}
.sidebar-link.is-active::before{background:var(--accent);height:22px}
.sidebar-link--lg{height:52px;font-size:15px}

/* 抽屉 */
#drawer{transform:translateX(-100%);transition:transform .28s var(--ease);will-change:transform}
#drawer.is-open{transform:translateX(0)}
#overlay{transition:opacity .24s var(--ease)}
#overlay.is-open{opacity:1;pointer-events:auto}

/* 按钮 */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 22px;
  border-radius:var(--r-ctl);
  background:var(--accent);color:var(--ink);
  font-size:15px;font-weight:600;white-space:nowrap;
  transition:background-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.btn-primary:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn-primary:active{transform:scale(.98)}
.btn-primary i{transition:transform .18s var(--ease)}
.btn-primary:hover i{transform:translateX(4px)}
.btn-sm{height:38px;padding:0 16px;font-size:13.5px;border-radius:10px}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 22px;
  border-radius:var(--r-ctl);
  border:1px solid rgba(255,255,255,.24);
  color:#fff;font-size:15px;font-weight:600;white-space:nowrap;
  transition:color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease);
}
.btn-ghost:hover{color:var(--accent);border-color:rgba(200,247,81,.5);transform:translateY(-2px)}
.btn-ghost:active{transform:scale(.98)}
.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 18px;
  border-radius:var(--r-ctl);
  border:1px solid var(--line);background:#fff;color:var(--body);
  font-size:14px;font-weight:600;
  transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.btn-outline:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--sh-xs)}

/* 徽章 */
.badge{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;font-size:13px;font-weight:500;white-space:nowrap}
.badge-accent{background:#EAF9C9;color:#3F5A0D}
.badge-pine{background:#E8F1EE;color:#2E6F63}
.badge-warn{background:#FBE8E3;color:#B23A22}
.badge-plain{background:#F1F0EB;color:#6B7269}

/* 筛选胶囊 */
.chip{
  display:inline-flex;align-items:center;height:38px;padding:0 17px;
  border-radius:999px;border:1px solid var(--line);background:#fff;
  font-size:14px;color:var(--muted);
  transition:color .18s var(--ease),border-color .18s var(--ease),background-color .18s var(--ease);
}
.chip:hover{border-color:var(--ink);color:var(--body)}
.chip.is-on{background:var(--accent);border-color:var(--accent);color:var(--ink);font-weight:600}

/* 卡片 */
.pg-card{
  position:relative;
  display:block;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--sh-xs);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.pg-card::after{
  content:"";position:absolute;top:0;left:0;height:2px;width:0;background:var(--accent);
  transition:width .3s var(--ease);
}
.pg-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:#D8D6CC}
.pg-card:hover::after{width:100%}

.thumb{border-radius:12px;overflow:hidden;background:#EFEEE9}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.pg-card:hover .thumb img{transform:scale(1.03)}

/* 区块标题 */
.sec-index{
  font-size:clamp(40px,5vw,60px);
  line-height:.88;
  font-weight:800;
  letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1.2px rgba(46,111,99,.45);
  font-variant-numeric:tabular-nums;
  flex:none;
}
.link-more{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:600;color:var(--body);
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(11,15,14,.25);
  transition:color .18s var(--ease),text-decoration-color .18s var(--ease);
}
.link-more:hover{color:var(--pine);text-decoration-color:var(--pine)}
.link-more i{transition:transform .18s var(--ease)}
.link-more:hover i{transform:translateX(4px)}

/* 非对称清单 */
.info-row{border-bottom:1px solid var(--line);transition:background-color .18s var(--ease)}
.info-row:hover{background:#FAFAF7}

/* 场景行 */
.scene-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  min-height:64px;padding:18px 0;border-bottom:1px solid var(--line);
  transition:background-color .18s var(--ease);
}
.scene-row:hover{background:#FAFAF7}

/* 流程 */
.step-card{
  position:relative;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:24px;box-shadow:var(--sh-xs);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.step-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.step-num{
  font-size:40px;line-height:1;font-weight:800;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1.2px rgba(46,111,99,.5);
  font-variant-numeric:tabular-nums;
}

/* FAQ */
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;min-height:56px;padding:16px 0;text-align:left;
  font-size:17px;font-weight:600;color:var(--body);
  transition:color .18s var(--ease);
}
.faq-q:hover{color:var(--pine)}
.faq-q i{flex:none;color:var(--muted);transition:transform .22s var(--ease),color .18s var(--ease)}
.faq-item.is-open .faq-q i{transform:rotate(45deg);color:var(--ink)}
.faq-a{display:none;padding:0 0 22px}
.faq-item.is-open .faq-a{display:block}
.faq-a p{font-size:15px;line-height:1.85;color:var(--muted);max-width:720px}

/* 顶栏 */
#topbar{transition:background-color .2s var(--ease),box-shadow .2s var(--ease)}
#topbar.is-scrolled{background:rgba(246,245,241,.94);box-shadow:0 1px 0 var(--line),0 8px 20px -18px rgba(11,15,14,.4)}

/* 入场 */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

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

/* roulang page: category2 */
:root{
  --ink:#0B0F0E;
  --accent:#C8F751;
  --accent-2:#AEDD34;
  --teal:#2E6F63;
  --sand:#F6F5F1;
  --card:#FFFFFF;
  --text:#12160F;
  --muted:#6B7269;
  --line:#E4E2DA;
  --warn:#E2543A;
  --radius:16px;
  --radius-lg:20px;
  --radius-btn:12px;
  --shadow-sm:0 1px 2px rgba(11,15,14,.06);
  --shadow-md:0 8px 24px -12px rgba(11,15,14,.18);
  --shadow-lg:0 28px 60px -30px rgba(11,15,14,.35);
  --ease:cubic-bezier(.2,.7,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;background:var(--sand);color:var(--text);
  font-family:Inter,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;border-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
::selection{background:var(--accent);color:var(--ink)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#EFEEE8}
::-webkit-scrollbar-thumb{background:#CFCDC3;border-radius:8px;border:2px solid #EFEEE8}
::-webkit-scrollbar-thumb:hover{background:#B7B4A8}

/* 左侧 App Shell */
.shell{position:fixed;top:0;left:0;bottom:0;width:248px;background:var(--ink);border-right:1px solid rgba(255,255,255,.08);display:none;flex-direction:column;z-index:25}
@media (min-width:1024px){.shell{display:flex}}
.shell-scroll{flex:1 1 auto;overflow-y:auto;padding:24px 8px 8px}
.shell-scroll::-webkit-scrollbar{width:6px}
.shell-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border:0}
.brandmark{width:28px;height:28px;border-radius:7px;background:var(--accent);color:var(--ink);display:grid;place-items:center;font-weight:800;font-size:13px;letter-spacing:-.02em}
.navgroup+.navgroup{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.navgroup-label{padding:0 16px 8px;font-size:12px;color:rgba(255,255,255,.34);letter-spacing:.02em}
.navlink{position:relative;display:flex;align-items:center;gap:12px;min-height:48px;padding:0 16px;font-size:14px;color:rgba(255,255,255,.62);transition:color .18s var(--ease),background-color .18s var(--ease)}
.navlink::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:transparent;transition:background-color .18s var(--ease)}
.navlink:hover{color:#fff;background:rgba(255,255,255,.045)}
.navlink:hover::before{background:rgba(200,247,81,.4)}
.navlink.is-active{color:#fff;background:rgba(200,247,81,.09)}
.navlink.is-active::before{background:var(--accent)}
.navlink i{width:16px;text-align:center;font-size:13px;opacity:.85}

/* 抽屉 */
@media (max-width:1023px){
  #drawer{transform:translateX(-100%)}
  #drawer.is-open{transform:translateX(0)}
}
#drawer{transition:transform .3s var(--ease)}
#drawer a{min-height:52px;display:flex;align-items:center}
#overlay{opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
#overlay.is-open{opacity:1;pointer-events:auto}
body.is-locked{overflow:hidden}

/* 组件 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border-radius:var(--radius-btn);font-weight:600;font-size:15px;transition:transform .18s var(--ease),background-color .18s var(--ease),box-shadow .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--accent);color:var(--ink);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--accent-2);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-primary:hover .btn-arrow{transform:translateX(4px)}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-dark-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.24)}
.btn-dark-ghost:hover{color:var(--accent);border-color:rgba(200,247,81,.55);transform:translateY(-2px)}
.btn-sm{height:36px;padding:0 14px;font-size:13px;border-radius:10px}
.btn-arrow{transition:transform .18s var(--ease)}

.badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:13px;line-height:1;white-space:nowrap}
.badge-lime{background:#EAF9C9;color:#3D5410}
.badge-teal{background:#E8F1EE;color:#22564C}
.badge-warn{background:#FBE8E3;color:#A3331D}
.badge-plain{background:#F1F0EA;color:var(--muted)}

.pill{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:14px;color:var(--muted);transition:all .18s var(--ease);white-space:nowrap}
.pill:hover{border-color:var(--ink);color:var(--ink)}
.pill.is-active{background:var(--accent);border-color:var(--accent);color:var(--ink);font-weight:600}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}

.sec-num{font-size:clamp(34px,4.6vw,64px);line-height:1;font-weight:800;letter-spacing:-.045em;color:transparent;-webkit-text-stroke:1.4px rgba(46,111,99,.42);font-variant-numeric:tabular-nums;user-select:none}
.sec-num.on-dark{-webkit-text-stroke:1.4px rgba(200,247,81,.55)}

.list-row{position:relative;display:grid;gap:20px;padding:20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:background-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
.list-row::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:0 3px 3px 0;background:var(--accent);opacity:0;transform:scaleY(.45);transform-origin:center;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.list-row:hover{background:#FAFAF7;transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#D8D6CC}
.list-row:hover::before{opacity:1;transform:scaleY(1)}
.list-row h3 a:hover{color:var(--teal)}
@media (min-width:640px){.list-row{grid-template-columns:240px minmax(0,1fr)}}
@media (min-width:1024px){.list-row{min-height:168px;align-items:center}}

.rank-row{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 4px;border-bottom:1px solid var(--line);transition:background-color .18s var(--ease),padding-left .18s var(--ease)}
.rank-row:last-child{border-bottom:0}
.rank-row:hover{background:#FAFAF7;padding-left:8px}
.rank-row:hover .rank-no{color:var(--teal)}
.rank-no{font-size:15px;font-weight:800;color:#C3C0B4;font-variant-numeric:tabular-nums;transition:color .18s var(--ease)}

.step{position:relative;padding-left:56px;padding-bottom:28px}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;left:19px;top:44px;bottom:0;width:1px;background:rgba(255,255,255,.14)}
.step:last-child::before{display:none}
.step-dot{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:999px;border:1px solid rgba(200,247,81,.45);color:var(--accent);display:grid;place-items:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;background:rgba(200,247,81,.07)}

.faq-item{border-bottom:1px solid var(--line)}
.faq-item:last-child{border-bottom:0}
.faq-q{display:flex;align-items:center;gap:16px;width:100%;min-height:56px;padding:16px 4px;text-align:left;font-size:16px;font-weight:600;color:var(--text);transition:color .18s var(--ease)}
.faq-q:hover{color:var(--teal)}
.faq-icon{flex:0 0 auto;margin-left:auto;width:26px;height:26px;border-radius:999px;border:1px solid var(--line);display:grid;place-items:center;font-size:12px;color:var(--muted);transition:transform .24s var(--ease),background-color .24s var(--ease),color .24s var(--ease),border-color .24s var(--ease)}
.faq-item.is-open .faq-icon{transform:rotate(45deg);background:var(--accent);color:var(--ink);border-color:var(--accent)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.faq-a-inner{padding:0 46px 20px 4px;font-size:15px;line-height:1.8;color:var(--muted)}

.grid-tex{background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:44px 44px}
.hero-veil{background-image:linear-gradient(rgba(246,245,241,.94),rgba(246,245,241,.96)),url('/assets/images/backpic/back-2.png');background-size:cover;background-position:center;background-repeat:no-repeat}
.cta-veil{background-image:linear-gradient(rgba(11,15,14,.93),rgba(11,15,14,.96)),url('/assets/images/backpic/back-1.png');background-size:cover;background-position:center}

.reveal{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* roulang page: category3 */
:root{
  --ink:#0B0F0E;
  --accent:#C8F751;
  --accent-hover:#AEDD34;
  --teal:#2E6F63;
  --bg:#F6F5F1;
  --card:#FFFFFF;
  --text:#12160F;
  --muted:#6B7269;
  --line:#E4E2DA;
  --warn:#E2543A;
  --hover-row:#FAFAF7;
  --radius-card:16px;
  --radius-shot:20px;
  --radius-ctl:12px;
  --shadow-sm:0 1px 2px rgba(11,15,14,.06);
  --shadow-md:0 8px 24px -12px rgba(11,15,14,.18);
  --shadow-lg:0 28px 60px -30px rgba(11,15,14,.35);
  --ease:cubic-bezier(.2,.7,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
::selection{background:var(--accent);color:var(--ink)}

/* 侧栏 */
.side{background:var(--ink);border-right:1px solid rgba(255,255,255,.08)}
.side-link{
  position:relative;display:flex;align-items:center;height:48px;
  padding:0 16px 0 18px;font-size:14.5px;color:rgba(255,255,255,.62);
  transition:color .18s var(--ease),background-color .18s var(--ease);
}
.side-link::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;
  transition:background-color .18s var(--ease);
}
.side-link:hover{color:#fff;background:rgba(255,255,255,.045)}
.side-link:hover::before{background:rgba(200,247,81,.4)}
.side-link.is-active{color:#fff;background:rgba(255,255,255,.07)}
.side-link.is-active::before{background:var(--accent)}
.side-group-title{
  padding:0 18px;margin:22px 0 8px;font-size:11.5px;letter-spacing:.16em;
  color:rgba(255,255,255,.32);text-transform:uppercase;
}
.side-sep{height:1px;background:rgba(255,255,255,.08);margin:18px 18px}

/* 抽屉 */
.drawer{
  position:fixed;top:0;left:0;bottom:0;width:288px;background:var(--ink);z-index:60;
  transform:translateX(-102%);transition:transform .26s var(--ease);
  display:flex;flex-direction:column;overflow-y:auto;
}
.drawer.open{transform:translateX(0)}
.overlay{
  position:fixed;inset:0;background:rgba(11,15,14,.6);z-index:55;
  opacity:0;visibility:hidden;transition:opacity .24s var(--ease),visibility .24s var(--ease);
}
.overlay.show{opacity:1;visibility:visible}
.drawer-link{
  position:relative;display:flex;align-items:center;height:52px;padding:0 20px;
  font-size:15px;color:rgba(255,255,255,.66);
  transition:color .18s var(--ease),background-color .18s var(--ease);
}
.drawer-link::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent}
.drawer-link:hover{color:#fff;background:rgba(255,255,255,.05)}
.drawer-link.is-active{color:#fff;background:rgba(255,255,255,.07)}
.drawer-link.is-active::before{background:var(--accent)}

/* 顶部信息条 */
.topbar{
  background:rgba(246,245,241,.86);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line);
}

/* 按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 22px;border-radius:var(--radius-ctl);
  font-size:15px;font-weight:600;white-space:nowrap;
  transition:transform .18s var(--ease),background-color .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--accent);color:var(--ink);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-primary:hover .btn-arrow{transform:translateX(4px)}
.btn-outline{background:#fff;border:1px solid var(--line);color:var(--text)}
.btn-outline:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-ghost-dark{background:transparent;border:1px solid rgba(255,255,255,.24);color:#fff}
.btn-ghost-dark:hover{color:var(--accent);border-color:rgba(200,247,81,.6);transform:translateY(-2px)}
.btn-sm{height:38px;padding:0 16px;font-size:13.5px}
.btn-arrow{transition:transform .18s var(--ease)}

/* 徽章 */
.badge{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;
  border-radius:999px;font-size:13px;font-weight:500;line-height:1;
}
.badge-lime{background:var(--lime1);color:#3F5A0C}
.badge-teal{background:var(--teal1);color:#1E4C43}
.badge-warn{background:var(--warn1);color:#9C3320}
.badge-line{background:#fff;border:1px solid var(--line);color:var(--muted)}

/* 卡片 */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease);
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.card:hover::after{transform:scaleX(1)}

/* 区块标题三段式 */
.sec-num{
  font-size:clamp(36px,4.6vw,60px);font-weight:200;line-height:.9;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1px rgba(11,15,14,.24);
  font-variant-numeric:tabular-nums;flex:0 0 auto;
}
.sec-link{
  font-size:14px;color:var(--muted);text-decoration:underline;
  text-underline-offset:4px;text-decoration-color:var(--line);
  transition:color .18s var(--ease),text-decoration-color .18s var(--ease);
}
.sec-link:hover{color:var(--ink);text-decoration-color:var(--accent)}

/* Hero */
.page-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:#fff}
.page-hero-bg{position:absolute;inset:0;background-image:url('/assets/images/backpic/back-2.png');background-size:cover;background-position:center;opacity:.16}
.page-hero-mask{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.95))}
.page-hero-inner{position:relative;z-index:2}

/* 时间轴条目 */
.tl-row{
  display:flex;align-items:flex-start;gap:20px;padding:22px 12px;
  border-bottom:1px solid var(--line);
  transition:background-color .18s var(--ease);
}
.tl-row:first-child{border-top:1px solid var(--line)}
.tl-row:hover{background:var(--hover-row)}
.tl-num{
  flex:0 0 auto;width:2.3em;font-size:clamp(30px,4.4vw,52px);font-weight:800;line-height:1;
  letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.5px rgba(11,15,14,.26);
  font-variant-numeric:tabular-nums;
  transition:color .2s var(--ease),-webkit-text-stroke-color .2s var(--ease);
}
.tl-row:hover .tl-num{color:var(--accent);-webkit-text-stroke-color:var(--accent)}
.tl-go{
  margin-left:auto;align-self:center;color:var(--muted);opacity:0;
  transition:opacity .2s var(--ease),transform .2s var(--ease),color .2s var(--ease);
}
.tl-row:hover .tl-go{opacity:1;transform:translateX(4px);color:var(--ink)}

/* 流程步骤 */
.step{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);
  padding:22px;position:relative;overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.step:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.step-line{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}

/* 清单行 */
.plain-row{
  display:grid;gap:6px;padding:20px 0;border-bottom:1px solid var(--line);
  transition:background-color .18s var(--ease);
}
.plain-row:hover{background:var(--hover-row)}

/* FAQ */
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  display:flex;align-items:center;gap:16px;width:100%;min-height:56px;
  padding:14px 4px;text-align:left;font-size:16.5px;font-weight:600;
  transition:color .18s var(--ease);
}
.faq-q:hover{color:var(--teal)}
.faq-ico{
  margin-left:auto;flex:0 0 auto;width:26px;height:26px;border-radius:999px;
  border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);
  transition:transform .22s var(--ease),background-color .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
}
.faq-item.open .faq-ico{transform:rotate(45deg);background:var(--accent);color:var(--ink);border-color:var(--accent)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.faq-a p{padding:0 4px 20px;font-size:15px;line-height:1.8;color:var(--muted);max-width:760px}

/* 分页 */
.page-btn{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;
  padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#fff;
  font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;
  transition:all .18s var(--ease);
}
.page-btn:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)}
.page-btn.is-current{background:var(--accent);border-color:var(--accent);color:var(--ink);font-weight:700}

/* CTA */
.cta-block{
  position:relative;overflow:hidden;background:var(--ink);border-radius:var(--radius-shot);
}
.cta-block::before{
  content:"";position:absolute;inset:0;background-image:url('/assets/images/backpic/back-3.webp');
  background-size:cover;background-position:center;opacity:.08;
}
.cta-block::after{
  content:"";position:absolute;inset:0;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px);
  background-size:32px 32px;
}
.cta-inner{position:relative;z-index:2}

/* 图文块 */
.media-shot{border-radius:var(--radius-shot);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--line)}

/* 页脚 */
footer a{transition:color .18s var(--ease)}

/* 入场动画 */
[data-reveal]{will-change:transform,opacity}

@media (max-width:1023px){
  .drawer{width:288px}
}
@media (max-width:639px){
  .tl-row{gap:14px;padding:18px 4px}
  .tl-go{display:none}
  .page-hero-bg{background-position:70% center}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  .btn:hover,.card:hover,.step:hover,.page-btn:hover{transform:none!important}
}