/* roulang page: index */
:root{
  --mk-lime:#A8F04A;
  --mk-lava:#FF5C2B;
  --mk-ink:#0B0E0C;
  --mk-paper:#F7F8F6;
  --mk-card:#FFFFFF;
  --mk-line:#E4E7E3;
  --mk-text:#14181A;
  --mk-sub:#5A6360;
  --mk-radius:16px;
  --mk-radius-lg:20px;
  --mk-shadow:0 1px 2px rgba(11,14,12,.06);
  --mk-max:1240px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--mk-paper);
  color:var(--mk-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",sans-serif;
  font-size:16px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
.num{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.mk-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mk-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--mk-lime);outline-offset:2px;border-radius:6px}

/* 顶部导航 */
.nav-link{position:relative;padding-bottom:2px}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:2px;background:transparent;transition:background .2s ease}
.nav-link:hover::after{background:var(--mk-line)}
.nav-link.is-active{color:var(--mk-text)}
.nav-link.is-active::after{background:var(--mk-lime)}
#siteHeader.is-scrolled{background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--mk-line);box-shadow:var(--mk-shadow)}

/* 移动端抽屉 */
#mkDrawer{position:fixed;inset:0;z-index:70;background:var(--mk-ink);color:#fff;transform:translateX(100%);transition:transform .3s ease;display:flex;flex-direction:column;overflow:hidden}
#mkDrawer.is-open{transform:translateX(0)}
#mkDrawer nav a{transition:color .2s ease}
#mkDrawer nav a:hover{color:var(--mk-lime)}

#mkBurger{position:fixed;right:20px;bottom:24px;z-index:80;width:56px;height:56px;border-radius:999px;background:var(--mk-lime);color:var(--mk-ink);display:grid;place-items:center;border:none;box-shadow:0 10px 24px rgba(11,14,12,.2);cursor:pointer;transition:transform .18s ease}
#mkBurger:active{transform:scale(.95)}
.mk-burger-lines{display:flex;flex-direction:column;gap:4px}
.mk-burger-lines i{display:block;width:20px;height:2px;border-radius:2px;background:var(--mk-ink);transition:transform .25s ease,opacity .25s ease}
#mkBurger[aria-expanded="true"] .mk-burger-lines i:nth-child(1){transform:translateY(6px) rotate(45deg)}
#mkBurger[aria-expanded="true"] .mk-burger-lines i:nth-child(2){opacity:0}
#mkBurger[aria-expanded="true"] .mk-burger-lines i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(min-width:1024px){#mkBurger{display:none}}

/* 倒计时数字块 */
.cd-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:56px;padding:7px 8px;border-radius:12px;background:rgba(11,14,12,.7);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px)}
.cd-cell b{font-variant-numeric:tabular-nums;font-weight:800;font-size:19px;line-height:1.1;color:#fff;letter-spacing:.02em}
.cd-cell i{font-style:normal;font-size:11px;color:rgba(255,255,255,.5);margin-top:2px}
.cd-lava .cd-cell b{color:var(--mk-lava)}

/* 状态点 */
.dot-live{width:8px;height:8px;border-radius:50%;background:var(--mk-lava);display:inline-block;animation:mkPulse 2.4s ease-in-out infinite}
@keyframes mkPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.42;transform:scale(.8)}}

/* 看点条目 */
.look-item{display:flex;gap:20px;align-items:baseline;border-bottom:1px solid rgba(255,255,255,.1);padding:16px 0;transition:border-color .2s ease}
.look-item:hover{border-color:rgba(168,240,74,.6)}
.look-item span.look-t{transition:color .2s ease,transform .2s ease}
.look-item:hover span.look-t{color:var(--mk-lime);transform:translateX(4px)}

/* 横滑轨道 */
.mk-rail{scrollbar-width:thin;scrollbar-color:#333b34 transparent}
.mk-rail::-webkit-scrollbar{height:6px}
.mk-rail::-webkit-scrollbar-thumb{background:#2b322c;border-radius:6px}
.mk-rail::-webkit-scrollbar-track{background:transparent}

/* FAQ */
.mk-faq-item{border-bottom:1px solid var(--mk-line);position:relative;transition:padding .24s ease}
.mk-faq-item.is-open{padding-left:18px}
.mk-faq-item.is-open::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:2px;background:var(--mk-lime)}
.mk-faq-q{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;background:none;border:none;text-align:left;padding:22px 0;cursor:pointer;font-size:18px;font-weight:700;line-height:1.6;color:var(--mk-text)}
.mk-faq-icon{position:relative;width:16px;height:16px;flex:none}
.mk-faq-icon::before,.mk-faq-icon::after{content:"";position:absolute;background:var(--mk-sub);border-radius:2px;transition:transform .24s ease,background .24s ease}
.mk-faq-icon::before{left:0;top:7px;width:16px;height:2px}
.mk-faq-icon::after{left:7px;top:0;width:2px;height:16px}
.mk-faq-item.is-open .mk-faq-icon::after{transform:scaleY(0)}
.mk-faq-item.is-open .mk-faq-icon::before{background:var(--mk-lime)}
.mk-faq-a{max-height:0;overflow:hidden;transition:max-height .26s ease}
.mk-faq-item.is-open .mk-faq-a{max-height:460px}
.mk-faq-a p{padding:0 0 22px;font-size:15px;line-height:1.9;color:var(--mk-sub);max-width:820px}

/* 编号时间轴 */
.step-item{position:relative}
.step-item .step-no{position:absolute;left:-45px;top:2px;width:26px;height:26px;border-radius:50%;background:var(--mk-lime);color:var(--mk-ink);display:grid;place-items:center;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}

/* 按钮 */
.mk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-weight:700;font-size:15px;padding:14px 30px;border:1px solid transparent;cursor:pointer;position:relative;overflow:hidden;transition:transform .18s ease,filter .18s ease,border-color .18s ease,color .18s ease}
.mk-btn:active{transform:scale(.98)}
.mk-btn-primary{background:var(--mk-lime);color:var(--mk-ink)}
.mk-btn-primary:hover{filter:brightness(.94)}
.mk-btn-primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .12s ease}
.mk-btn-primary:hover::after{left:120%}
.mk-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.mk-btn-ghost:hover{border-color:var(--mk-lime);color:var(--mk-lime)}

/* 进入视口动效 */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .dot-live{animation:none}
  .mk-btn-primary::after{display:none}
  .mk-faq-a{transition:none}
  #mkDrawer{transition:none}
}

/* roulang page: article */
:root{
  --mk-ink:#0B0E0C;
  --mk-lime:#A8F04A;
  --mk-orange:#FF5C2B;
  --mk-text:#14181A;
  --mk-sub:#5A6360;
  --mk-paper:#F7F8F6;
  --mk-card:#FFFFFF;
  --mk-line:#E4E7E3;
  --mk-radius:16px;
  --mk-radius-lg:20px;
  --mk-shadow:0 1px 2px rgba(11,14,12,.06);
  --mk-container:1240px;
  --mk-sec:104px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  padding-top:68px;
  font-family:system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  font-size:16px;
  line-height:1.85;
  color:var(--mk-text);
  background:var(--mk-paper);
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
body.no-scroll{overflow:hidden}
img{max-width:100%;display:block;border:0}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--mk-lime);outline-offset:2px;border-radius:6px}
::selection{background:var(--mk-lime);color:var(--mk-ink)}

.num{font-variant-numeric:tabular-nums}
.sec{padding:var(--mk-sec) 0}
.sec-sm{padding:64px 0}

/* ---------- 导航 ---------- */
#siteHeader{background:#fff}
#siteHeader.is-scrolled{
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--mk-line);
  box-shadow:var(--mk-shadow);
}
.nav-link{
  position:relative;
  display:inline-block;
  padding:6px 0;
  color:var(--mk-sub);
  transition:color .2s ease;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-4px;
  height:2px;
  border-radius:2px;
  background:var(--mk-lime);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
}
.nav-link:hover{color:var(--mk-text)}
.nav-link:hover::after{transform:scaleX(1)}
.nav-link.is-active{color:var(--mk-text);font-weight:700}
.nav-link.is-active::after{transform:scaleX(1)}

#menuFab{
  box-shadow:0 8px 24px rgba(11,14,12,.18);
  transition:transform .2s ease,filter .2s ease;
}
#menuFab:active{transform:scale(.94)}
#navDrawer{will-change:transform;visibility:hidden}
#navDrawer.is-open{visibility:visible}
.drawer-link{transition:color .2s ease,padding-left .2s ease}
.drawer-link:hover{color:var(--mk-lime);padding-left:6px}

/* ---------- 内页首屏 ---------- */
.page-banner{position:relative;background:var(--mk-ink);color:#fff;overflow:hidden}
.page-banner__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28}
.page-banner__veil{
  position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(11,14,12,.96) 0%,rgba(11,14,12,.86) 48%,rgba(11,14,12,.52) 100%);
}
.page-banner__inner{position:relative}
.article-h1{
  font-size:clamp(28px,4.2vw,44px);
  line-height:1.18;
  font-weight:900;
  letter-spacing:-.02em;
  max-width:900px;
}
.crumb a{transition:color .2s ease}
.crumb a:hover{color:var(--mk-lime)}
.crumb .sep{opacity:.4;margin:0 8px}

/* ---------- 正文排版 ---------- */
.article-shell{
  max-width:860px;
  margin:0 auto;
  background:var(--mk-card);
  border:1px solid var(--mk-line);
  border-radius:var(--mk-radius-lg);
  box-shadow:var(--mk-shadow);
  padding:44px 40px 36px;
}
.article-body{max-width:760px;margin:0 auto;font-size:16.5px;line-height:1.9;color:#1b2022}
.article-body > * + *{margin-top:1.35em}
.article-body p{margin:0 0 1.35em}
.article-body h2{
  font-size:clamp(22px,2.6vw,28px);
  font-weight:800;
  line-height:1.4;
  letter-spacing:-.01em;
  margin:2em 0 .8em;
  color:var(--mk-text);
}
.article-body h2::before{
  content:"";
  display:inline-block;
  width:14px;
  height:3px;
  border-radius:2px;
  background:var(--mk-lime);
  vertical-align:middle;
  margin-right:10px;
}
.article-body h3{font-size:21px;font-weight:700;line-height:1.5;margin:1.7em 0 .6em;color:var(--mk-text)}
.article-body h4{font-size:17px;font-weight:700;margin:1.5em 0 .5em}
.article-body a{color:var(--mk-text);text-decoration:underline;text-decoration-color:var(--mk-lime);text-decoration-thickness:2px;text-underline-offset:3px}
.article-body a:hover{color:#2f3a20}
.article-body ul,.article-body ol{padding-left:1.35em;margin:0 0 1.35em}
.article-body ul{list-style:disc}
.article-body ol{list-style:decimal}
.article-body li{margin:.45em 0}
.article-body li::marker{color:#8a9a5f}
.article-body blockquote{
  border-left:3px solid var(--mk-lime);
  background:var(--mk-paper);
  border-radius:0 12px 12px 0;
  padding:16px 20px;
  color:#3c4442;
  font-size:15.5px;
}
.article-body blockquote p:last-child{margin-bottom:0}
.article-body img{border-radius:var(--mk-radius);margin:1.6em auto;width:100%;height:auto}
.article-body figure{margin:1.8em 0}
.article-body figcaption{text-align:center;font-size:13px;color:var(--mk-sub);margin-top:10px;letter-spacing:.02em}
.article-body strong{font-weight:800}
.article-body hr{border:0;border-top:1px solid var(--mk-line);margin:2.2em 0}
.article-body code{background:var(--mk-paper);border:1px solid var(--mk-line);border-radius:6px;padding:2px 6px;font-size:14px}
.article-body pre{background:var(--mk-ink);color:#e8f5dc;padding:18px 20px;border-radius:var(--mk-radius);overflow-x:auto;font-size:14px;line-height:1.7}
.article-body pre code{background:transparent;border:0;padding:0;color:inherit}
.article-body table{width:100%;border-collapse:collapse;font-size:14.5px}
.article-body th,.article-body td{border:1px solid var(--mk-line);padding:10px 12px;text-align:left;vertical-align:top}
.article-body th{background:var(--mk-paper);font-weight:700}

/* ---------- 组件 ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--mk-line);
  border-radius:999px;
  padding:5px 13px;
  font-size:13px;
  line-height:1.6;
  color:var(--mk-sub);
  background:#fff;
  transition:border-color .2s ease,color .2s ease,transform .2s ease;
}
.tag:hover{border-color:var(--mk-lime);color:var(--mk-text);transform:translateY(-1px)}
.tag-lime{background:var(--mk-lime);border-color:var(--mk-lime);color:var(--mk-ink);font-weight:700}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  padding:12px 24px;
  font-size:15px;
  font-weight:700;
  line-height:1.4;
  border:1px solid transparent;
  transition:transform .2s ease,filter .2s ease,border-color .2s ease,background-color .2s ease,color .2s ease;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--mk-lime);color:var(--mk-ink)}
.btn-primary:hover{filter:brightness(.94);transform:translateY(-1px)}
.btn-ghost{background:#fff;border-color:var(--mk-line);color:var(--mk-text)}
.btn-ghost:hover{border-color:var(--mk-lime)}
.btn-ink{background:var(--mk-ink);color:#fff}
.btn-ink:hover{background:#1c221e}
.btn-sm{padding:9px 18px;font-size:14px}
.btn[disabled],.btn.is-disabled{opacity:.5;cursor:not-allowed;transform:none;filter:none}

.card{
  display:block;
  background:var(--mk-card);
  border:1px solid var(--mk-line);
  border-radius:var(--mk-radius);
  box-shadow:var(--mk-shadow);
  overflow:hidden;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.card:hover{transform:translateY(-2px);border-color:var(--mk-lime);box-shadow:0 6px 18px rgba(11,14,12,.08)}
.card-media{overflow:hidden;background:var(--mk-ink);position:relative}
.card-media::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,14,12,0) 55%,rgba(11,14,12,.35) 100%);
}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.card:hover .card-media img{transform:scale(1.03)}

.line-list{border-top:1px solid var(--mk-line)}
.line-list li{border-bottom:1px solid var(--mk-line)}
.line-item{
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:22px 6px;
  transition:transform .2s ease,color .2s ease;
}
.line-item:hover{transform:translateX(4px)}
.line-item:hover .line-title{color:#3f5b1e}
.line-idx{
  font-variant-numeric:tabular-nums;
  font-weight:800;
  font-size:14px;
  color:var(--mk-sub);
  min-width:34px;
  padding-top:5px;
  letter-spacing:.04em;
}
.line-title{font-size:18px;font-weight:700;line-height:1.6;transition:color .2s ease}

/* ---------- FAQ ---------- */
.faq-list{display:grid;gap:14px}
.faq-item{
  background:#fff;
  border:1px solid var(--mk-line);
  border-radius:var(--mk-radius);
  overflow:hidden;
  transition:border-color .24s ease,box-shadow .24s ease;
}
.faq-item.is-open{border-color:var(--mk-lime);box-shadow:var(--mk-shadow)}
.faq-q{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  text-align:left;
  background:transparent;
  border:0;
  padding:20px 22px 20px 26px;
  font-size:18px;
  font-weight:700;
  line-height:1.6;
}
.faq-q::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:var(--mk-lime);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .26s ease;
}
.faq-item.is-open .faq-q::before{transform:scaleY(1)}
.faq-q svg{flex:0 0 auto;transition:transform .26s ease;color:var(--mk-sub)}
.faq-item.is-open .faq-q svg{transform:rotate(45deg);color:var(--mk-text)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .26s ease}
.faq-a-inner{padding:0 26px 22px;font-size:15px;line-height:1.9;color:var(--mk-sub)}

/* ---------- CTA 条 ---------- */
.cta-strip{position:relative;background:var(--mk-ink);color:#fff;overflow:hidden}
.cta-strip::before{
  content:"";
  position:absolute;inset:0;
  background-image:repeating-linear-gradient(135deg,rgba(168,240,74,.055) 0 1px,transparent 1px 16px);
  pointer-events:none;
}
.cta-strip__inner{position:relative}

/* ---------- 页脚 ---------- */
.site-footer{background:var(--mk-ink);color:rgba(255,255,255,.7)}
.site-footer a{transition:color .2s ease}
.site-footer a:hover{color:var(--mk-lime)}

/* ---------- 动效 ---------- */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.reveal.is-in{opacity:1;transform:none}

@media (max-width:1023px){
  :root{--mk-sec:70px}
  .article-shell{padding:30px 22px 26px}
}
@media (max-width:640px){
  :root{--mk-sec:56px}
  body{font-size:15.5px}
  .article-body{font-size:16px}
  .article-body h2{margin-top:1.7em}
  .article-body table{display:block;overflow-x:auto;white-space:nowrap}
  .line-item{gap:14px}
  .faq-q{font-size:16.5px;padding:17px 18px 17px 22px}
  .faq-a-inner{padding:0 22px 18px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* roulang page: category1 */
:root{
    --mk-lime:#A8F04A;
    --mk-orange:#FF5C2B;
    --mk-ink:#0B0E0C;
    --mk-paper:#F7F8F6;
    --mk-card:#FFFFFF;
    --mk-line:#E4E7E3;
    --mk-text:#14181A;
    --mk-sub:#5A6360;
    --radius-card:16px;
    --radius-hero:20px;
    --radius-pill:999px;
    --shadow-soft:0 1px 2px rgba(11,14,12,.06);
    --max-site:1240px;
    --gap-section:104px;
  }
  *,*::before,*::after{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:146px;}
  body{
    margin:0;
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:16px;
    line-height:1.85;
    color:var(--mk-text);
    background:var(--mk-paper);
    -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{font:inherit;}
  h1,h2,h3,h4,p,ul,ol,figure{margin:0;}
  ul,ol{padding:0;list-style:none;}
  .tnum{font-variant-numeric:tabular-nums;}

  a:focus-visible,
  button:focus-visible,
  input:focus-visible{
    outline:2px solid var(--mk-lime);
    outline-offset:2px;
    border-radius:6px;
  }

  #siteHeader.is-scrolled{
    background:rgba(255,255,255,.96);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    box-shadow:0 1px 0 rgba(11,14,12,.06),0 8px 24px rgba(11,14,12,.05);
  }
  .nav-link{
    position:relative;
    padding:6px 0;
    color:var(--mk-sub);
    transition:color .2s ease;
  }
  .nav-link:hover{color:var(--mk-text);}
  .nav-link.is-active{color:var(--mk-text);font-weight:700;}
  .nav-link.is-active::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:-6px;
    height:2px;border-radius:2px;
    background:var(--mk-lime);
  }

  .card{
    background:var(--mk-card);
    border:1px solid var(--mk-line);
    border-radius:var(--radius-card);
    box-shadow:var(--shadow-soft);
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
  }
  .card:hover{
    transform:translateY(-2px);
    border-color:var(--mk-lime);
    box-shadow:0 10px 26px rgba(11,14,12,.08);
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:var(--radius-pill);
    font-weight:700;
    font-size:15px;
    padding:13px 26px;
    transition:transform .18s ease,filter .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease;
  }
  .btn-primary{background:var(--mk-lime);color:var(--mk-ink);}
  .btn-primary:hover{filter:brightness(95%);transform:translateY(-1px);}
  .btn-primary:active{transform:scale(.98);}
  .btn-ghost{
    border:1px solid rgba(255,255,255,.28);
    color:#fff;
    background:transparent;
  }
  .btn-ghost:hover{border-color:var(--mk-lime);color:var(--mk-lime);}
  .btn-outline{
    border:1px solid var(--mk-line);
    color:var(--mk-text);
    background:#fff;
  }
  .btn-outline:hover{border-color:var(--mk-ink);}
  .btn-shine{position:relative;overflow:hidden;}
  .btn-shine::after{
    content:"";
    position:absolute;
    top:0;left:-60%;
    width:40%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
    transform:skewX(-18deg);
    transition:left .45s ease;
  }
  .btn-shine:hover::after{left:130%;}

  .badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border-radius:var(--radius-pill);
    font-size:12.5px;
    font-weight:600;
    padding:5px 12px;
    letter-spacing:.02em;
  }
  .badge-outline{border:1px solid var(--mk-line);color:var(--mk-sub);background:#fff;}
  .badge-lime{background:rgba(168,240,74,.16);color:#2F3A16;border:1px solid rgba(168,240,74,.5);}
  .badge-orange{background:var(--mk-orange);color:#fff;}

  .anchor-pill{
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
    border:1px solid var(--mk-line);
    background:#fff;
    color:var(--mk-sub);
    border-radius:var(--radius-pill);
    font-size:13.5px;
    font-weight:600;
    padding:8px 16px;
    transition:all .2s ease;
  }
  .anchor-pill:hover{border-color:var(--mk-ink);color:var(--mk-text);}
  .anchor-pill.is-current{
    background:var(--mk-lime);
    border-color:var(--mk-lime);
    color:var(--mk-ink);
    font-weight:700;
  }

  .step-row{
    border-top:1px solid var(--mk-line);
    padding:44px 0;
  }
  .step-row:last-child{border-bottom:1px solid var(--mk-line);}
  .step-num{
    font-size:clamp(38px,5vw,58px);
    font-weight:800;
    line-height:1;
    color:var(--mk-line);
    letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;
    transition:color .25s ease;
  }
  .step-row:hover .step-num{color:var(--mk-lime);}

  .dot-live{
    width:8px;height:8px;border-radius:50%;
    background:var(--mk-orange);
    animation:pulseDot 2.4s ease-in-out infinite;
  }
  @keyframes pulseDot{
    0%,100%{opacity:1;transform:scale(1);}
    50%{opacity:.4;transform:scale(.78);}
  }

  .faq-item{
    border:1px solid var(--mk-line);
    border-radius:var(--radius-card);
    background:#fff;
    transition:border-color .22s ease,box-shadow .22s ease;
    overflow:hidden;
  }
  .faq-item + .faq-item{margin-top:12px;}
  .faq-item.is-open{
    border-left:3px solid var(--mk-lime);
    box-shadow:0 6px 20px rgba(11,14,12,.06);
  }
  .faq-q{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    text-align:left;
    padding:20px 22px;
    font-size:18px;
    font-weight:700;
    color:var(--mk-text);
  }
  .faq-ico{
    flex:none;
    width:26px;height:26px;
    border-radius:50%;
    border:1px solid var(--mk-line);
    display:grid;place-items:center;
    transition:transform .25s ease,background-color .25s ease,border-color .25s ease;
  }
  .faq-item.is-open .faq-ico{
    transform:rotate(45deg);
    background:var(--mk-lime);
    border-color:var(--mk-lime);
  }
  .faq-a{
    max-height:0;
    overflow:hidden;
    transition:max-height .26s ease;
  }
  .faq-item.is-open .faq-a{max-height:340px;}
  .faq-a-inner{padding:0 22px 22px;color:var(--mk-sub);font-size:15px;}

  .reveal{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease;}
  .reveal.is-in{opacity:1;transform:none;}

  .grid-texture{
    background-image:
      linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
    background-size:44px 44px;
  }

  .scroll-x{
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .scroll-x > *{scroll-snap-align:start;}
  .scroll-x::-webkit-scrollbar{height:6px;}
  .scroll-x::-webkit-scrollbar-thumb{background:var(--mk-line);border-radius:6px;}

  #mobileDrawer{
    transform:translateY(100%);
    transition:transform .3s ease;
  }
  #mobileDrawer.is-open{transform:translateY(0);}
  body.is-locked{overflow:hidden;}

  @media (max-width:1023px){
    :root{--gap-section:64px;}
    html{scroll-padding-top:120px;}
  }

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important;transition-duration:.001ms !important;}
    html{scroll-behavior:auto;}
    .reveal{opacity:1;transform:none;}
  }

/* roulang page: category2 */
:root{
  --mk-lime:#A8F04A;
  --mk-orange:#FF5C2B;
  --mk-ink:#0B0E0C;
  --mk-paper:#F7F8F6;
  --mk-card:#FFFFFF;
  --mk-line:#E4E7E3;
  --mk-text:#14181A;
  --mk-sub:#5A6360;
  --mk-radius:16px;
  --mk-radius-lg:20px;
  --mk-shadow:0 1px 2px rgba(11,14,12,.06);
  --mk-shadow-hover:0 6px 20px rgba(11,14,12,.09);
  --mk-container:1240px;
  --mk-section:104px;
  --nav-h:68px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  padding-top:var(--nav-h);
  font-family:system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:16px;
  line-height:1.85;
  color:var(--mk-text);
  background:var(--mk-card);
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input{font:inherit;}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0;}
ul,ol{padding:0;list-style:none;}

a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--mk-lime);
  outline-offset:2px;
  border-radius:8px;
}

.num{font-variant-numeric:tabular-nums;letter-spacing:.02em;font-weight:700;}

/* ---------- 导航 ---------- */
#siteHeader{border-bottom:1px solid transparent;background:#fff;}
#siteHeader.is-scrolled{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom-color:var(--mk-line);
  box-shadow:var(--mk-shadow);
}
.nav-link{position:relative;padding:6px 0;color:var(--mk-sub);transition:color .2s ease;}
.nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--mk-lime);opacity:0;transition:opacity .2s ease;
}
.nav-link:hover{color:var(--mk-text);}
.nav-link.is-active{color:var(--mk-text);font-weight:700;}
.nav-link.is-active::after{opacity:1;}

/* 移动端抽屉 */
#menuBtn{transition:transform .2s ease,box-shadow .2s ease;}
#menuBtn:active{transform:scale(.96);}
#mobileDrawer{display:none;}
#mobileDrawer.is-open{display:flex;}
.drawer-link{
  display:block;font-size:24px;font-weight:700;line-height:1.9;
  color:#fff;padding:6px 0;transition:color .2s ease;
}
.drawer-link:hover,.drawer-link.is-active{color:var(--mk-lime);}

/* ---------- 锚点胶囊 ---------- */
.anchor-pill{
  flex:none;display:inline-block;padding:8px 16px;border-radius:999px;
  border:1px solid var(--mk-line);font-size:14px;font-weight:600;
  color:var(--mk-sub);white-space:nowrap;transition:all .2s ease;
}
.anchor-pill:hover{border-color:var(--mk-lime);color:var(--mk-text);}
.anchor-pill.is-active{background:var(--mk-lime);border-color:var(--mk-lime);color:var(--mk-ink);}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none;}
.no-scrollbar::-webkit-scrollbar{display:none;}

/* ---------- 卡片 ---------- */
.mk-card{
  background:var(--mk-card);
  border:1px solid var(--mk-line);
  border-radius:var(--mk-radius);
  box-shadow:var(--mk-shadow);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.mk-card:hover{transform:translateY(-2px);box-shadow:var(--mk-shadow-hover);border-color:var(--mk-lime);}
.mk-card-flat:hover{transform:none;border-color:var(--mk-line);box-shadow:var(--mk-shadow);}

/* ---------- 定义式两列 ---------- */
.dl-row{
  display:grid;grid-template-columns:180px 1fr;gap:8px 24px;
  padding:18px 0;border-bottom:1px solid var(--mk-line);
}
.dl-row:last-child{border-bottom:none;padding-bottom:0;}
.dl-row dt{font-size:14px;color:var(--mk-sub);font-weight:600;letter-spacing:.02em;}
.dl-row dd{font-size:15px;line-height:1.85;color:var(--mk-text);}

/* ---------- 表格 ---------- */
.mk-table{width:100%;border-collapse:collapse;font-size:15px;min-width:620px;}
.mk-table th{
  text-align:left;font-size:13px;font-weight:700;color:var(--mk-sub);
  letter-spacing:.04em;padding:14px 18px;border-bottom:1px solid var(--mk-line);
  background:var(--mk-paper);
}
.mk-table td{padding:18px;border-bottom:1px solid var(--mk-line);vertical-align:top;line-height:1.8;}
.mk-table tbody tr:last-child td{border-bottom:none;}
.mk-table tbody tr:hover td{background:#FCFDFB;}

/* ---------- FAQ ---------- */
.faq-item{
  border-bottom:1px solid var(--mk-line);
  border-left:3px solid transparent;
  padding-left:0;
  transition:border-color .26s ease,padding-left .26s ease,background .26s ease;
}
.faq-item.is-open{border-left-color:var(--mk-lime);padding-left:18px;background:#FCFDFB;}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  text-align:left;padding:22px 20px 22px 0;font-size:18px;font-weight:700;color:var(--mk-text);
  transition:color .2s ease;
}
.faq-q:hover{color:#3E4A44;}
.faq-icon{
  flex:none;width:26px;height:26px;border-radius:999px;border:1px solid var(--mk-line);
  display:grid;place-items:center;font-size:16px;font-weight:700;color:var(--mk-sub);
  transition:transform .26s ease,background .26s ease,color .26s ease,border-color .26s ease;
}
.faq-item.is-open .faq-icon{background:var(--mk-lime);border-color:var(--mk-lime);color:var(--mk-ink);transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .26s ease;}
.faq-item.is-open .faq-a{max-height:360px;}
.faq-a p{padding:0 20px 24px 0;font-size:15px;line-height:1.9;color:var(--mk-sub);}

/* ---------- 编号列表 ---------- */
.step-row{
  display:grid;grid-template-columns:70px 1fr;gap:20px;align-items:start;
  padding:24px 0;border-bottom:1px solid var(--mk-line);
}
.step-row:last-child{border-bottom:none;}
.step-num{
  font-variant-numeric:tabular-nums;font-weight:800;font-size:22px;
  color:var(--mk-ink);letter-spacing:.02em;
}
.step-row:hover .step-num{color:#5F8F1F;}

/* ---------- 动效 ---------- */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease;}
.reveal.is-in{opacity:1;transform:none;}

.status-dot{width:8px;height:8px;border-radius:999px;background:var(--mk-orange);animation:breathe 2.4s ease-in-out infinite;}
@keyframes breathe{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.45;transform:scale(.82);}}

.cta-bar{
  background-image:repeating-linear-gradient(135deg,rgba(168,240,74,.06) 0 2px,transparent 2px 14px);
}
.btn-lime{position:relative;overflow:hidden;}
.btn-lime::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:left .45s ease;
}
.btn-lime:hover::after{left:140%;}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
  .reveal{opacity:1;transform:none;}
  html{scroll-behavior:auto;}
}

/* ---------- 响应式 ---------- */
@media (max-width:1023px){
  :root{--nav-h:64px;--mk-section:72px;}
  body{font-size:15.5px;}
}
@media (max-width:767px){
  .dl-row{grid-template-columns:1fr;gap:4px;}
  .dl-row dt{font-size:13px;}
  .step-row{grid-template-columns:48px 1fr;gap:14px;}
  .step-num{font-size:19px;}
  .faq-q{font-size:16.5px;padding:18px 12px 18px 0;}
  .mk-table th,.mk-table td{padding:13px 14px;}
}
@media (max-width:520px){
  :root{--mk-section:60px;}
  h1{letter-spacing:-.01em;}
}
