/* roulang page: index */
:root{
    --bg-deep:#0A0912;
    --bg-base:#12101F;
    --surface:#1A1730;
    --surface-2:#221D3D;
    --line:rgba(255,255,255,.08);
    --primary:#C9F24C;
    --primary-ink:#101208;
    --accent-2:#8E7BFF;
    --text-hi:#F6F4EE;
    --text-mid:#B4B1C4;
    --text-low:#7C7990;
    --radius-card:16px;
    --radius-img:14px;
    --radius-btn:999px;
    --shadow-float:0 24px 60px -40px rgba(0,0,0,.9);
    --font-serif:"Noto Serif SC",serif;
    --font-sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
    --font-mono:ui-monospace,"JetBrains Mono",Menlo,monospace;
  }

  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    padding-bottom:64px;
    background:var(--bg-base);
    color:var(--text-hi);
    font-family:var(--font-sans);
    font-size:16px;
    line-height:1.8;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  img{display:block;max-width:100%;height:auto;}
  a{color:inherit;text-decoration:none;}
  button{font:inherit;color:inherit;}
  ul,ol{margin:0;padding:0;list-style:none;}
  p{margin:0;}
  h1,h2,h3,h4{margin:0;font-weight:700;}
  ::selection{background:var(--primary);color:var(--primary-ink);}
  :focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:6px;}

  .container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding-left:20px;
    padding-right:20px;
  }
  @media (min-width:1024px){
    .container{padding-left:40px;padding-right:40px;}
  }

  .h2{
    font-family:var(--font-serif);
    font-weight:700;
    font-size:clamp(24px,3vw,36px);
    line-height:1.25;
    letter-spacing:-0.01em;
    color:var(--text-hi);
  }
  .h3{
    font-family:var(--font-serif);
    font-weight:700;
    font-size:20px;
    line-height:1.4;
    color:var(--text-hi);
  }
  .lead{color:var(--text-mid);font-size:16px;line-height:1.9;}

  /* 纹理 */
  .grid-veil{
    position:absolute;inset:0;pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 78%);
    -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 78%);
  }
  .starfield{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
  .starfield span{
    position:absolute;width:2px;height:2px;border-radius:999px;
    background:#F6F4EE;opacity:.35;
    animation:drift 32s linear infinite;
  }
  .starfield span:nth-child(1){top:18%;left:12%;animation-duration:28s;}
  .starfield span:nth-child(2){top:32%;left:78%;animation-duration:36s;opacity:.5;}
  .starfield span:nth-child(3){top:64%;left:26%;animation-duration:40s;opacity:.28;}
  .starfield span:nth-child(4){top:76%;left:66%;animation-duration:24s;opacity:.42;}
  .starfield span:nth-child(5){top:12%;left:48%;animation-duration:34s;opacity:.3;}
  @keyframes drift{
    0%{transform:translate3d(0,0,0);}
    50%{transform:translate3d(14px,-18px,0);}
    100%{transform:translate3d(0,0,0);}
  }

  /* 导航 */
  .nav-shell{
    background:rgba(18,16,31,.62);
    border:1px solid transparent;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
  }
  .nav-shell.is-scrolled{
    background:rgba(18,16,31,.88);
    border-color:rgba(255,255,255,.08);
    box-shadow:0 18px 50px -40px rgba(0,0,0,.95);
  }
  .nav-link{
    position:relative;
    display:inline-flex;align-items:center;gap:6px;
    padding:8px 12px;border-radius:999px;
    font-size:15px;color:var(--text-mid);
    transition:color .2s ease,background-color .2s ease;
    white-space:nowrap;
  }
  .nav-link:hover{color:var(--text-hi);background:rgba(201,242,76,.08);}
  .nav-link.is-active{color:var(--text-hi);}
  .nav-link.is-active::before{
    content:"";width:6px;height:6px;border-radius:999px;background:var(--primary);
  }
  .logo-mark{
    width:8px;height:8px;background:var(--primary);
    transform:rotate(45deg);
    box-shadow:0 0 0 3px rgba(201,242,76,.14);
    flex:none;
  }

  /* 按钮 */
  .btn-primary{
    position:relative;overflow:hidden;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:14px 28px;border-radius:var(--radius-btn);
    background:var(--primary);color:var(--primary-ink);
    font-size:15px;font-weight:600;line-height:1;
    border:1px solid var(--primary);
    transition:transform .2s ease,box-shadow .3s ease;
  }
  .btn-primary::after{
    content:"";position:absolute;top:0;bottom:0;width:46%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
    transform:translateX(-140%);transition:transform .3s ease;
  }
  .btn-primary:hover::after{transform:translateX(240%);}
  .btn-primary:hover{box-shadow:0 14px 34px -18px rgba(201,242,76,.7);}
  .btn-primary:active{transform:translateY(1px);}
  .btn-primary.btn-sm{padding:11px 22px;font-size:14px;}

  .btn-ghost{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:14px 28px;border-radius:var(--radius-btn);
    border:1px solid rgba(246,244,238,.6);color:var(--text-hi);
    background:transparent;font-size:15px;font-weight:500;line-height:1;
    transition:color .25s ease,border-color .25s ease,background-color .25s ease;
  }
  .btn-ghost:hover{color:var(--primary);border-color:var(--primary);background:rgba(201,242,76,.06);}
  .btn-ghost:active{transform:translateY(1px);}

  .arrow-link{
    display:inline-flex;align-items:center;gap:8px;
    font-size:14px;color:var(--text-mid);
    border-bottom:1px solid transparent;padding-bottom:2px;
    transition:color .2s ease,border-color .2s ease;
  }
  .arrow-link .arw{transition:transform .2s ease;}
  .arrow-link:hover{color:var(--primary);border-color:rgba(201,242,76,.5);}
  .arrow-link:hover .arw{transform:translateX(4px);}

  /* 徽章与标签 */
  .badge{
    display:inline-flex;align-items:center;height:24px;padding:0 12px;
    border-radius:999px;font-size:12px;line-height:1;
    background:rgba(142,123,255,.14);color:var(--accent-2);
    border:1px solid rgba(142,123,255,.22);
    white-space:nowrap;
  }
  .badge-lime{
    background:rgba(201,242,76,.14);color:var(--primary);
    border-color:rgba(201,242,76,.24);
  }
  .chip{
    display:inline-flex;align-items:center;height:32px;padding:0 16px;
    border-radius:999px;font-size:13px;line-height:1;
    border:1px solid var(--line);background:var(--surface);color:var(--text-mid);
    transition:color .2s ease,border-color .2s ease,background-color .2s ease;
    cursor:pointer;
  }
  .chip:hover{color:var(--text-hi);border-color:rgba(201,242,76,.35);}
  .chip.is-active{color:var(--primary);border-color:rgba(201,242,76,.6);background:rgba(201,242,76,.07);}

  /* 卡片 */
  .card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-card);
    padding:24px;
    transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
  }
  .card:hover{
    border-color:rgba(201,242,76,.25);
    transform:translateY(-4px);
    box-shadow:var(--shadow-float);
  }
  .card-media{
    overflow:hidden;border-radius:var(--radius-img);
    border:1px solid var(--line);background:var(--surface);
  }
  .card-media img{transition:transform .4s ease-out;width:100%;height:100%;object-fit:cover;}
  .card:hover .card-media img{transform:scale(1.03);}

  /* 列表行 */
  .row-item{
    display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
    padding:20px 12px;border-bottom:1px solid var(--line);
    transition:background-color .2s ease;
  }
  .row-item:hover{background:rgba(255,255,255,.03);}
  .row-item:hover .row-title{color:var(--primary);}
  .row-title{font-size:16px;color:var(--text-hi);transition:color .2s ease;}

  .line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

  /* 步骤 */
  .step-node{
    width:6px;height:6px;border-radius:999px;background:var(--primary);flex:none;
    margin-top:9px;box-shadow:0 0 0 4px rgba(201,242,76,.12);
  }
  .step-line{
    position:absolute;top:12px;left:0;right:0;height:1px;background:var(--line);
  }

  /* FAQ */
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-q{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
    padding:22px 0;background:none;border:0;text-align:left;cursor:pointer;
    font-size:18px;line-height:1.6;color:var(--text-hi);
    transition:color .2s ease;
  }
  .faq-q:hover{color:var(--primary);}
  .faq-icon{
    position:relative;width:16px;height:16px;flex:none;
    transition:transform .25s ease;
  }
  .faq-icon::before,.faq-icon::after{
    content:"";position:absolute;background:var(--primary);border-radius:2px;
  }
  .faq-icon::before{left:0;right:0;top:7px;height:2px;}
  .faq-icon::after{top:0;bottom:0;left:7px;width:2px;}
  .faq-item.is-open .faq-icon{transform:rotate(45deg);}
  .faq-a{
    max-height:0;overflow:hidden;
    transition:max-height .25s ease;
  }
  .faq-a p{padding:0 0 22px;font-size:15px;line-height:1.9;color:var(--text-mid);max-width:820px;}

  /* 滚动进入 */
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease;}
  .reveal.is-visible{opacity:1;transform:none;}

  /* 移动端菜单 */
  .mobile-panel{
    position:fixed;inset:0;z-index:60;
    background:rgba(10,9,18,.98);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    display:flex;flex-direction:column;
    padding:104px 24px 40px;
    transform:translateY(-100%);
    visibility:hidden;
    transition:transform .3s ease,visibility .3s ease;
  }
  .mobile-panel.is-open{transform:translateY(0);visibility:visible;}
  .mobile-panel a.mobile-link{
    font-size:20px;color:var(--text-hi);padding:14px 0;
    border-bottom:1px solid var(--line);
  }
  .mobile-panel a.mobile-link.is-active{color:var(--primary);}

  /* 底部固定条 */
  .bottom-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    height:64px;
    background:rgba(10,9,18,.94);
    border-top:1px solid var(--line);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    transition:opacity .3s ease,transform .3s ease;
  }
  .bottom-bar.is-hidden{opacity:0;transform:translateY(100%);pointer-events:none;}

  .quote-mark{
    font-family:var(--font-serif);
    font-size:44px;line-height:1;color:rgba(201,242,76,.28);
    display:block;margin-bottom:8px;
  }
  .avatar{
    width:36px;height:36px;border-radius:999px;flex:none;
    background:linear-gradient(135deg,var(--surface-2),#2C2650);
    border:1px solid var(--line);
  }
  .mono-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-0.01em;}

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

  @media (max-width:640px){
    body{font-size:15px;}
    .card{padding:20px;}
    .row-item{padding:16px 8px;}
  }

/* roulang page: article */
:root{
  --bg-deep:#0A0912;
  --bg-base:#12101F;
  --surface:#1A1730;
  --surface-2:#221D3D;
  --line:rgba(255,255,255,.08);
  --primary:#C9F24C;
  --primary-ink:#101208;
  --accent-2:#8E7BFF;
  --text-hi:#F6F4EE;
  --text-mid:#B4B1C4;
  --text-low:#7C7990;
  --radius-card:16px;
  --radius-img:14px;
  --radius-input:12px;
  --shadow-card:0 24px 60px -40px rgba(0,0,0,.9);
  --font-serif:'Noto Serif SC',serif;
  --font-sans:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-mono:ui-monospace,'JetBrains Mono',SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg-base);
  color:var(--text-mid);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (min-width:768px){ body{padding-bottom:64px} }
img{max-width:100%;display:block;border-style:none}
a{color:inherit;text-decoration:none;transition:color .2s ease}
button,input{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

.container{width:100%;max-width:1200px;margin:0 auto;padding-left:20px;padding-right:20px}
@media (min-width:1024px){ .container{padding-left:40px;padding-right:40px} }

.grid-texture{
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:48px 48px;
}
.star-layer{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%,rgba(246,244,238,.7) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 38% 68%,rgba(201,242,76,.55) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 72% 14%,rgba(246,244,238,.5) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 56%,rgba(142,123,255,.6) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 56% 88%,rgba(246,244,238,.45) 50%,transparent 51%);
  background-size:420px 420px;
  animation:drift 38s linear infinite;
}
@keyframes drift{
  0%{background-position:0 0,0 0,0 0,0 0,0 0}
  100%{background-position:420px 210px,-420px 160px,300px -240px,-300px 300px,180px -320px}
}

.nav-shell{
  background:rgba(18,16,31,.62);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid transparent;
  transition:background .3s ease,border-color .3s ease;
}
.nav-shell.is-scrolled{background:rgba(18,16,31,.88);border-color:var(--line)}
.logo-mark{
  display:inline-block;width:9px;height:9px;border-radius:2px;
  background:var(--primary);transform:rotate(45deg);flex:none;
}
.nav-link{
  position:relative;display:inline-flex;align-items:center;
  padding:9px 14px;border-radius:999px;font-size:15px;color:var(--text-mid);
  transition:color .2s ease,background .2s ease;
}
.nav-link:hover{color:var(--text-hi);background:rgba(201,242,76,.08)}
.nav-link.is-active{color:var(--text-hi)}
.nav-link.is-active::after{
  content:'';position:absolute;left:50%;bottom:3px;transform:translateX(-50%);
  width:16px;height:2px;border-radius:2px;background:var(--primary);
}

.btn-primary{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:999px;background:var(--primary);color:var(--primary-ink);
  font-size:15px;font-weight:600;line-height:1;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease;box-shadow:0 10px 30px -18px rgba(201,242,76,.6);
}
.btn-primary::after{
  content:'';position:absolute;top:0;left:0;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transform:translateX(-160%);transition:transform .4s ease;
}
.btn-primary:hover::after{transform:translateX(220%)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-primary:active{transform:translateY(1px)}
.btn-sm{padding:10px 20px;font-size:14px}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:999px;border:1px solid rgba(246,244,238,.6);
  color:var(--text-hi);font-size:15px;font-weight:500;line-height:1;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary);background:rgba(201,242,76,.06)}
.arrow-link{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--text-mid);
  transition:color .2s ease;
}
.arrow-link span.ar{transition:transform .25s ease;display:inline-block}
.arrow-link:hover{color:var(--primary)}
.arrow-link:hover span.ar{transform:translateX(4px)}

.badge{
  display:inline-flex;align-items:center;height:24px;padding:0 12px;border-radius:999px;
  font-size:12px;line-height:1;letter-spacing:.02em;
  background:rgba(142,123,255,.14);color:#C3B8FF;border:1px solid rgba(142,123,255,.22);
}
.badge-lime{background:rgba(201,242,76,.14);color:#DDF98A;border-color:rgba(201,242,76,.24)}
.meta-line{font-family:var(--font-mono);font-size:13px;color:var(--text-low);letter-spacing:.02em}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);transition:border-color .3s ease,transform .3s ease;
}
.card:hover{border-color:rgba(201,242,76,.35);transform:translateY(-4px)}

.crumbs{font-size:13px;color:var(--text-low);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.crumbs a:hover{color:var(--primary)}
.crumbs .sep{color:var(--text-low);opacity:.7}
.crumbs .current{color:var(--text-hi);max-width:min(420px,60vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.article-body{font-size:17px;line-height:1.95;color:var(--text-mid)}
.article-body>*:first-child{margin-top:0}
.article-body p{margin:0 0 1.2em}
.article-body strong{color:var(--text-hi)}
.article-body h2{
  font-family:var(--font-serif);font-weight:700;font-size:24px;line-height:1.45;
  color:var(--text-hi);margin:48px 0 20px;scroll-margin-top:110px;
}
.article-body h3{
  font-family:var(--font-serif);font-weight:700;font-size:20px;line-height:1.5;
  color:var(--text-hi);margin:32px 0 14px;scroll-margin-top:110px;
}
.article-body h4{font-size:17px;color:var(--text-hi);margin:24px 0 12px;font-weight:700}
.article-body ul{list-style:disc;margin:0 0 1.2em;padding-left:1.5em}
.article-body ol{list-style:decimal;margin:0 0 1.2em;padding-left:1.5em}
.article-body li{margin:.4em 0}
.article-body a{color:var(--primary);border-bottom:1px solid transparent}
.article-body a:hover{border-bottom-color:var(--primary)}
.article-body blockquote{
  margin:28px 0;padding:20px;border-left:3px solid var(--primary);
  background:rgba(255,255,255,.03);border-radius:0 12px 12px 0;color:var(--text-mid);
}
.article-body blockquote p:last-child{margin-bottom:0}
.article-body img{border-radius:var(--radius-img);border:1px solid var(--line);margin:24px 0;width:100%;height:auto}
.article-body figure{margin:24px 0}
.article-body figcaption{font-size:13px;color:var(--text-low);text-align:center;margin-top:10px}
.article-body table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px}
.article-body th,.article-body td{border:1px solid var(--line);padding:12px 14px;text-align:left}
.article-body th{background:var(--surface-2);color:var(--text-hi);font-weight:600}
.article-body hr{border:0;border-top:1px solid var(--line);margin:36px 0}
.article-body code{background:var(--surface-2);padding:2px 6px;border-radius:6px;font-family:var(--font-mono);font-size:15px}

.side-sticky{position:sticky;top:96px}
.toc-link{
  display:block;padding:7px 0 7px 14px;font-size:14px;line-height:1.6;color:var(--text-low);
  border-left:1px solid var(--line);transition:color .2s ease,border-color .2s ease;
}
.toc-link.is-sub{padding-left:26px;font-size:13px}
.toc-link:hover{color:var(--text-hi)}
.toc-link.is-current{color:var(--primary);border-left-color:var(--primary)}

.list-row{
  display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line);
  transition:background .2s ease;
}
.list-row:hover .row-title{color:var(--primary)}

.empty-state{
  border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface);
  padding:48px 24px;text-align:center;
}

.convert-bar{
  position:fixed;left:0;right:0;bottom:0;height:64px;z-index:40;
  background:rgba(10,9,18,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  transition:opacity .3s ease,transform .3s ease;
}
.convert-bar.is-hidden{opacity:0;transform:translateY(100%);pointer-events:none}

.mobile-menu{
  position:fixed;inset:0;z-index:45;background:rgba(10,9,18,.98);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s ease;
}
.mobile-menu.is-open{opacity:1;visibility:visible;transform:none}
.m-link{font-size:20px;color:var(--text-hi);display:inline-block;padding:4px 0}
.m-link:hover{color:var(--primary)}

[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
[data-reveal].is-in{opacity:1;transform:none}

@media (max-width:767px){
  .convert-bar{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* roulang page: category1 */
:root{
  --bg-deep:#0A0912;
  --bg-base:#12101F;
  --surface:#1A1730;
  --surface-2:#221D3D;
  --line:rgba(255,255,255,.08);
  --primary:#C9F24C;
  --primary-ink:#101208;
  --accent-2:#8E7BFF;
  --text-hi:#F6F4EE;
  --text-mid:#B4B1C4;
  --text-low:#7C7990;
  --mono:ui-monospace,"JetBrains Mono",Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  padding-bottom:64px;
  background:var(--bg-base);
  color:var(--text-mid);
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Noto Serif SC","Songti SC",serif;color:var(--text-hi);margin:0;line-height:1.25}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding-left:20px;padding-right:20px}
@media (min-width:1024px){.wrap{padding-left:40px;padding-right:40px}}

/* 导航 */
.nav-shell{
  background:rgba(18,16,31,.62);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid transparent;
  transition:background .3s ease,border-color .3s ease;
}
.nav-shell.is-scrolled{background:rgba(18,16,31,.88);border-color:var(--line)}
.logo-mark{display:inline-block;width:12px;height:12px;border-radius:2px;background:var(--primary);transform:rotate(45deg);box-shadow:0 0 0 3px rgba(201,242,76,.12)}
.nav-link{position:relative;display:inline-flex;align-items:center;height:38px;padding:0 14px;border-radius:999px;font-size:15px;color:var(--text-mid);transition:color .2s ease,background .2s ease}
.nav-link::before{content:"";display:inline-block;width:6px;height:6px;border-radius:999px;background:transparent;margin-right:8px;transition:background .2s ease}
.nav-link:hover{color:var(--text-hi);background:rgba(201,242,76,.08)}
.nav-link.is-active{color:var(--text-hi)}
.nav-link.is-active::before{background:var(--primary)}

/* 按钮 */
.btn-primary{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:999px;background:var(--primary);color:var(--primary-ink);
  font-size:15px;font-weight:600;line-height:1.2;overflow:hidden;
  transition:transform .2s ease,box-shadow .25s ease;
}
.btn-primary::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transform:translateX(-100%);transition:transform .3s ease;pointer-events:none;
}
.btn-primary:hover{box-shadow:0 14px 34px -14px rgba(201,242,76,.55)}
.btn-primary:hover::after{transform:translateX(100%)}
.btn-primary:active{transform:translateY(1px)}
.btn-sm{padding:10px 20px;font-size:14px}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 26px;border-radius:999px;border:1px solid rgba(246,244,238,.6);
  color:var(--text-hi);font-size:15px;font-weight:500;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.btn-ghost:hover{color:var(--primary);border-color:var(--primary);background:rgba(201,242,76,.06)}
.badge{
  display:inline-flex;align-items:center;height:28px;padding:0 14px;border-radius:999px;
  font-size:12px;letter-spacing:.04em;color:var(--primary);
  background:rgba(201,242,76,.12);border:1px solid rgba(201,242,76,.24);
}
.tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:12px;line-height:1;background:rgba(142,123,255,.14);color:#B9ADFF}
.tag-accent{background:rgba(201,242,76,.14);color:var(--primary)}
.arrow-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--primary);border-bottom:1px solid transparent;transition:border-color .2s ease}
.arrow-link:hover{border-color:var(--primary)}
.arrow-link svg{transition:transform .2s ease}
.arrow-link:hover svg{transform:translateX(4px)}

/* 面包屑 */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--text-low)}
.breadcrumb a{transition:color .2s ease}
.breadcrumb a:hover{color:var(--primary)}
.breadcrumb .current{color:var(--text-hi)}
.breadcrumb .sep{color:var(--text-low)}

/* 纹理 */
.starfield{position:relative;overflow:hidden}
.starfield::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.3;
  background-image:radial-gradient(rgba(255,255,255,.55) 1px,transparent 1px);
  background-size:140px 140px;
  animation:drift 36s linear infinite;
}
.grid-lines{
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:48px 48px;
}
@keyframes drift{from{background-position:0 0}to{background-position:140px 280px}}

.hero-rule{display:block;width:60px;height:1px;background:var(--primary);margin-top:22px}

/* 卡片 */
.entry-card{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 24px 60px -40px rgba(0,0,0,.9);
  transition:transform .4s cubic-bezier(.2,.7,.3,1),border-color .3s ease;
}
.entry-card:hover{transform:translateY(-4px);border-color:rgba(201,242,76,.28)}
.entry-card:hover .card-media img{transform:scale(1.03)}
.card-media{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:14px;border:1px solid var(--line);background:var(--surface-2)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease-out}

/* 要点行 */
.point-row{display:flex;gap:20px;padding:26px 0;border-bottom:1px solid var(--line)}
.point-row:first-child{border-top:1px solid var(--line)}
.point-num{font-family:var(--mono);font-size:15px;color:var(--primary);padding-top:3px;font-variant-numeric:tabular-nums;letter-spacing:.06em}

/* FAQ */
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{display:flex;width:100%;align-items:flex-start;justify-content:space-between;gap:20px;padding:26px 0;font-size:18px;color:var(--text-hi);text-align:left;transition:color .2s ease}
.faq-q:hover{color:var(--primary)}
.faq-icon{position:relative;flex:none;width:16px;height:16px;margin-top:7px}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;background:var(--primary);transition:transform .25s ease}
.faq-icon::before{left:0;top:7px;width:16px;height:2px;border-radius:2px}
.faq-icon::after{left:7px;top:0;width:2px;height:16px;border-radius:2px}
.faq-item.is-open .faq-icon::after{transform:rotate(90deg) scaleX(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.faq-a-inner{padding-bottom:26px;font-size:15px;line-height:1.9;color:var(--text-mid);max-width:720px}

/* CTA 面板 */
.cta-panel{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
  padding:40px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2);
}

/* 底部固定转化条 */
.sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;height:64px;
  background:rgba(10,9,18,.94);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  transition:opacity .3s ease,transform .3s ease;
}
.sticky-bar.is-hidden{opacity:0;transform:translateY(100%);pointer-events:none}

/* 移动端菜单 */
.mobile-menu{
  position:fixed;inset:0;z-index:60;display:none;flex-direction:column;
  padding:104px 24px 32px;background:rgba(10,9,18,.98);
}
.mobile-menu.is-open{display:flex}
.mobile-menu a{display:block;font-size:20px;color:var(--text-mid);padding:10px 0}
.mobile-menu a.is-active{color:var(--primary)}
@media (min-width:1024px){.mobile-menu{display:none !important}}

/* 滚动进入 */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .starfield::before{animation:none}
  html{scroll-behavior:auto}
}

/* roulang page: category2 */
:root{
  --bg-deep:#0A0912;
  --bg-base:#12101F;
  --surface:#1A1730;
  --surface-2:#221D3D;
  --line:rgba(255,255,255,.08);
  --primary:#C9F24C;
  --primary-ink:#101208;
  --accent-2:#8E7BFF;
  --text-hi:#F6F4EE;
  --text-mid:#B4B1C4;
  --text-low:#7C7990;
  --radius-card:16px;
  --radius-img:14px;
  --radius-input:12px;
  --shadow-card:0 24px 60px -40px rgba(0,0,0,.9);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px}
body{
  margin:0;
  padding-bottom:64px;
  background:var(--bg-base);
  color:var(--text-mid);
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{color:var(--text-hi);font-family:"Noto Serif SC",serif;margin:0;letter-spacing:-0.01em}
h1{font-size:clamp(30px,4.4vw,54px);line-height:1.16;font-weight:900}
h2{font-size:clamp(23px,3vw,34px);line-height:1.28;font-weight:700}
h3{font-size:20px;line-height:1.45;font-weight:700}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:6px}
.mono{font-family:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}

/* 背景纹理 */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    radial-gradient(rgba(201,242,76,.55) 1px, transparent 1.6px),
    radial-gradient(rgba(142,123,255,.42) 1px, transparent 1.6px),
    radial-gradient(rgba(255,255,255,.35) 1px, transparent 1.6px);
  background-size:340px 340px, 520px 520px, 240px 240px;
  background-position:20px 60px, 180px 220px, 90px 320px;
  opacity:.35;
  animation:drift 40s linear infinite alternate;
}
@keyframes drift{
  from{background-position:20px 60px, 180px 220px, 90px 320px}
  to{background-position:60px 100px, 120px 160px, 130px 260px}
}
main,.site-footer,.fixed-bar,nav{position:relative;z-index:1}

.container-x{width:100%;max-width:1200px;margin:0 auto;padding-left:20px;padding-right:20px}
@media (min-width:1024px){.container-x{padding-left:40px;padding-right:40px}}
.section{padding-top:64px;padding-bottom:64px}
@media (min-width:1024px){.section{padding-top:100px;padding-bottom:100px}}
.hairline{height:1px;background:var(--line);border:0;margin:0}

/* 导航 */
header.site-head{position:fixed;top:0;left:0;right:0;z-index:50;padding:16px 16px 0}
.nav-shell{
  background:rgba(18,16,31,.62);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid transparent;
  transition:background .3s ease,border-color .3s ease;
  box-shadow:var(--shadow-card);
}
.nav-shell.is-scrolled{background:rgba(18,16,31,.88);border-color:var(--line)}
.logo-mark{
  width:9px;height:9px;border-radius:2px;background:var(--primary);
  transform:rotate(45deg);display:inline-block;flex:none;
}
.nav-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;
  font-size:15px;color:var(--text-mid);
  transition:color .25s ease,background-color .25s ease;
}
.nav-link:hover{color:var(--text-hi);background:rgba(201,242,76,.08)}
.nav-link.is-active{color:var(--text-hi);background:rgba(201,242,76,.08)}
.nav-link.is-active::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--primary);display:inline-block;
}
.btn-primary{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:999px;border:1px solid transparent;
  background:var(--primary);color:var(--primary-ink);
  font-size:15px;font-weight:600;line-height:1;
  transition:transform .2s ease,box-shadow .25s ease;
}
.btn-primary::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 .3s ease;
}
.btn-primary:hover::after{left:130%}
.btn-primary:hover{box-shadow:0 12px 32px -14px rgba(201,242,76,.6)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary.btn-sm{padding:10px 20px;font-size:14px}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:999px;
  border:1px solid rgba(246,244,238,.6);background:transparent;
  color:var(--text-hi);font-size:15px;font-weight:500;
  transition:color .25s ease,border-color .25s ease,background-color .25s ease;
}
.btn-ghost:hover{color:var(--primary);border-color:var(--primary);background:rgba(201,242,76,.06)}
.arrow-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;color:var(--text-mid);transition:color .25s ease;
}
.arrow-link span.arw{transition:transform .25s ease}
.arrow-link:hover{color:var(--primary)}
.arrow-link:hover span.arw{transform:translateX(4px)}
.arrow-link:hover .lbl{text-decoration:underline;text-underline-offset:4px}

/* 移动菜单 */
.mobile-menu{
  position:fixed;inset:0;z-index:60;display:none;
  background:rgba(10,9,18,.96);backdrop-filter:blur(8px);
}
.mobile-menu.is-open{display:block}
.mobile-menu__inner{padding:100px 24px 40px;display:flex;flex-direction:column;gap:20px;height:100%}
.mobile-link{font-size:20px;color:var(--text-hi);padding:6px 0;border-bottom:1px solid var(--line)}
.mobile-link.is-active{color:var(--primary)}
.mobile-close{
  position:absolute;top:22px;right:22px;width:40px;height:40px;border-radius:999px;
  border:1px solid var(--line);background:transparent;color:var(--text-hi);font-size:18px;
}

/* 面包屑 */
.crumb{font-size:13px;color:var(--text-low);display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:104px}
.crumb a{transition:color .25s ease}
.crumb a:hover{color:var(--primary)}
.crumb .sep{color:var(--text-low)}
.crumb .now{color:var(--text-hi)}

/* 分类页 Hero */
.cat-hero{padding-top:28px;padding-bottom:40px}
@media (min-width:1024px){.cat-hero{padding-bottom:56px}}
.cat-hero__lead{max-width:820px;margin-top:22px;font-size:17px;line-height:1.95;color:var(--text-mid)}
.cat-hero__grid{display:grid;gap:32px;grid-template-columns:1fr;margin-top:40px;align-items:start}
@media (min-width:1024px){.cat-hero__grid{grid-template-columns:1.05fr .95fr;gap:56px}}
.hero-media{
  border-radius:20px;border:1px solid var(--line);overflow:hidden;position:relative;
  background:var(--surface);box-shadow:var(--shadow-card);
}
.hero-media img{width:100%;aspect-ratio:16/11;object-fit:cover}
.hero-media__tag{
  position:absolute;right:14px;bottom:14px;
  background:rgba(10,9,18,.86);border:1px solid var(--line);border-radius:12px;
  padding:10px 14px;font-size:13px;color:var(--text-mid);
}
.hero-note{font-size:15px;line-height:1.9;color:var(--text-mid)}
.hero-note + .hero-note{margin-top:16px}
.divider-60{width:60px;height:1px;background:var(--primary);margin:24px 0 0}

/* 数据条 */
.metrics{display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (min-width:768px){.metrics{grid-template-columns:repeat(3,1fr)}}
.metric{padding:28px 4px}
@media (min-width:768px){.metric{padding:36px 28px;border-left:1px solid var(--line)}.metric:first-child{border-left:0}}
.metric__num{font-size:clamp(34px,4vw,46px);color:var(--primary);line-height:1;font-weight:700}
.metric__label{font-size:13px;color:var(--text-low);margin-top:10px;letter-spacing:.04em}
.metric__text{font-size:15px;line-height:1.85;color:var(--text-mid);margin-top:14px}

/* 目录 + 交替图文 */
.toc-layout{display:grid;gap:32px;grid-template-columns:1fr;align-items:start}
@media (min-width:1024px){.toc-layout{grid-template-columns:240px minmax(0,1fr);gap:56px}}
.side-toc{position:static;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface);padding:20px}
@media (min-width:1024px){.side-toc{position:sticky;top:96px}}
.side-toc__title{font-size:13px;color:var(--text-low);letter-spacing:.08em}
.side-toc ul{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
@media (min-width:1024px){.side-toc ul{flex-direction:column;flex-wrap:nowrap;gap:0}}
.side-toc a{
  display:flex;align-items:center;gap:10px;
  font-size:14px;color:var(--text-mid);
  padding:8px 12px;border-radius:999px;
  border:1px solid var(--line);
  transition:color .25s ease,border-color .25s ease,background-color .25s ease;
}
@media (min-width:1024px){
  .side-toc a{border:0;border-radius:0;border-bottom:1px solid var(--line);padding:11px 0}
  .side-toc li:last-child a{border-bottom:0}
}
.side-toc a:hover{color:var(--primary);border-color:rgba(201,242,76,.45);background:rgba(201,242,76,.06)}
.side-toc a .idx{font-size:12px;color:var(--text-low)}

.alt-rows{border-top:1px solid var(--line)}
.alt-row{
  display:grid;gap:22px;grid-template-columns:1fr;
  padding:32px 0;border-bottom:1px solid var(--line);
}
@media (min-width:768px){
  .alt-row{grid-template-columns:minmax(0,40%) minmax(0,60%);gap:36px;align-items:center;padding:40px 0}
  .alt-row--flip{grid-template-columns:minmax(0,60%) minmax(0,40%)}
  .alt-row--flip .alt-row__media{grid-column:2;grid-row:1}
  .alt-row--flip .alt-row__body{grid-column:1;grid-row:1}
}
.alt-row__media{border-radius:var(--radius-img);overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.alt-row__media img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .4s ease-out}
.alt-row:hover .alt-row__media img{transform:scale(1.03)}
.alt-row__index{font-size:14px;color:var(--primary);letter-spacing:.1em}
.alt-row__body h3{margin-top:10px}
.alt-row__body p{margin-top:14px;font-size:15.5px;line-height:1.92}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tag{
  height:24px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;
  font-size:12px;background:rgba(142,123,255,.14);color:#B9ACFF;letter-spacing:.02em;
}
.tag--lime{background:rgba(201,242,76,.14);color:var(--primary)}
.alt-row__link{margin-top:18px}

/* 边界 / 口径 */
.scope-grid{display:grid;gap:32px;grid-template-columns:1fr}
@media (min-width:1024px){.scope-grid{grid-template-columns:repeat(2,1fr);gap:56px}}
.scope-list li{
  padding:18px 0;border-bottom:1px solid var(--line);
  font-size:15px;line-height:1.9;display:flex;gap:12px;
}
.scope-list li::before{
  content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--accent-2);margin-top:11px;
}
.scope-list li.is-lime::before{background:var(--primary)}

/* CTA 卡 */
.cta-card{
  border:1px solid var(--line);border-radius:var(--radius-card);
  background:linear-gradient(180deg,rgba(34,29,61,.85),rgba(26,23,48,.95));
  padding:36px 24px;display:grid;gap:24px;
}
@media (min-width:1024px){.cta-card{grid-template-columns:1fr auto;align-items:center;padding:52px 48px;gap:40px}}
.cta-card p{margin-top:14px;font-size:15.5px;line-height:1.9;max-width:640px}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px}

/* 页脚 */
.site-footer{border-top:1px solid var(--line);background:var(--bg-deep);margin-top:0}
.footer-link{font-size:14px;color:var(--text-mid);transition:color .25s ease}
.footer-link:hover{color:var(--primary)}
.footer-bottom{font-size:13px;color:var(--text-low)}

/* 底部固定转化条 */
.fixed-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;height:64px;
  background:rgba(10,9,18,.94);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  transition:opacity .3s ease,transform .3s ease;
}
.fixed-bar.is-hidden{opacity:0;transform:translateY(100%);pointer-events:none}

/* 滚动进入 */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* roulang page: category3 */
:root{
    --bg-deep:#0A0912;
    --bg-base:#12101F;
    --surface:#1A1730;
    --surface-2:#221D3D;
    --line:rgba(255,255,255,.08);
    --primary:#C9F24C;
    --primary-ink:#101208;
    --accent-2:#8E7BFF;
    --text-hi:#F6F4EE;
    --text-mid:#B4B1C4;
    --text-low:#7C7990;
    --radius-card:16px;
    --radius-img:14px;
    --shadow-card:0 24px 60px -40px rgba(0,0,0,.9);
    --font-mono: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
  body{
    margin:0;
    background:var(--bg-base);
    color:var(--text-mid);
    font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
    font-size:16px;
    line-height:1.9;
    -webkit-font-smoothing:antialiased;
    padding-bottom:64px;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; cursor:pointer; }
  h1,h2,h3,h4{ color:var(--text-hi); font-family:"Noto Serif SC",serif; margin:0; }
  p{ margin:0; }
  ul,ol{ margin:0; padding:0; list-style:none; }

  .container{ width:100%; max-width:1200px; margin-inline:auto; padding-inline:20px; }
  @media (min-width:1024px){ .container{ padding-inline:40px; } }

  a:focus-visible, button:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:3px;
    border-radius:6px;
  }

  /* ---------- 导航 ---------- */
  .nav-shell{
    background:rgba(18,16,31,.62);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    border:1px solid transparent;
    transition:background .3s ease, border-color .3s ease;
  }
  .nav-shell.is-scrolled{
    background:rgba(18,16,31,.88);
    border-color:var(--line);
  }
  .logo-mark{
    display:inline-block;
    width:9px; height:9px;
    background:var(--primary);
    border-radius:1px;
    transform:rotate(45deg);
    flex:none;
  }
  .nav-link{
    display:inline-flex;
    align-items:center;
    height:36px;
    padding:0 14px;
    border-radius:999px;
    font-size:15px;
    line-height:1;
    color:var(--text-mid);
    transition:color .2s ease, background-color .2s ease;
  }
  .nav-link:hover{ color:var(--text-hi); background:rgba(201,242,76,.08); }
  .nav-link.is-active{ color:var(--text-hi); }
  .nav-link.is-active::before{
    content:"";
    width:6px; height:6px;
    border-radius:999px;
    background:var(--primary);
    margin-right:8px;
    flex:none;
  }

  /* ---------- 按钮 ---------- */
  .btn-primary{
    position:relative;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:var(--primary);
    color:var(--primary-ink);
    font-size:15px;
    font-weight:600;
    line-height:1;
    padding:14px 28px;
    border:0;
    border-radius:999px;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .btn-primary::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    transform:translateX(-120%);
    transition:transform .3s ease;
  }
  .btn-primary:hover::after{ transform:translateX(120%); }
  .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 12px 28px -18px rgba(201,242,76,.9); }
  .btn-primary:active{ transform:translateY(1px); }
  .btn-sm{ padding:10px 20px; font-size:14px; }

  .btn-ghost{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:transparent;
    border:1px solid rgba(246,244,238,.6);
    color:var(--text-hi);
    font-size:15px;
    font-weight:500;
    line-height:1;
    padding:13px 26px;
    border-radius:999px;
    transition:color .2s ease, border-color .2s ease, transform .2s ease;
  }
  .btn-ghost:hover{ color:var(--primary); border-color:var(--primary); transform:translateY(-1px); }

  /* ---------- 通用视觉 ---------- */
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    letter-spacing:.08em;
    color:var(--primary);
  }
  .eyebrow::before{
    content:"";
    width:6px; height:6px;
    border-radius:999px;
    background:var(--primary);
    flex:none;
  }
  .hairline{
    width:60px; height:1px;
    background:var(--primary);
    border:0;
    margin:26px 0 0;
  }
  .badge{
    display:inline-flex;
    align-items:center;
    height:24px;
    padding:0 12px;
    border-radius:999px;
    font-size:12px;
    line-height:1;
    background:rgba(142,123,255,.14);
    color:var(--accent-2);
  }
  .badge-lime{
    background:rgba(201,242,76,.14);
    color:var(--primary);
  }
  .arrow-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    color:var(--primary);
  }
  .arrow-link svg{ transition:transform .2s ease; }
  .arrow-link:hover{ text-decoration:underline; text-underline-offset:4px; }
  .arrow-link:hover svg{ transform:translateX(4px); }

  /* ---------- 内页首屏 ---------- */
  .page-hero{
    position:relative;
    overflow:hidden;
    padding:132px 0 64px;
    background:var(--bg-base);
  }
  .page-hero .hero-bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:.22;
  }
  .page-hero .hero-fade{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(18,16,31,.72) 0%, rgba(18,16,31,.86) 45%, var(--bg-base) 100%);
  }
  .grid-overlay{
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size:48px 48px;
    -webkit-mask-image:radial-gradient(ellipse at 50% 0%, #000 8%, transparent 68%);
    mask-image:radial-gradient(ellipse at 50% 0%, #000 8%, transparent 68%);
  }
  .crumb{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--text-low);
    margin-bottom:16px;
  }
  .crumb a{ color:var(--text-low); transition:color .2s ease; }
  .crumb a:hover{ color:var(--primary); }
  .crumb .sep{ color:rgba(255,255,255,.2); }
  .crumb .now{ color:var(--text-hi); }

  /* ---------- 准备清单 ---------- */
  .prep-bar{
    border:1px solid var(--line);
    border-radius:var(--radius-card);
    background:var(--surface);
    box-shadow:var(--shadow-card);
    display:grid;
    gap:0;
    overflow:hidden;
  }
  .prep-item{
    padding:22px 24px;
    display:flex;
    gap:16px;
    align-items:flex-start;
  }
  .prep-item + .prep-item{ border-top:1px solid var(--line); }
  @media (min-width:768px){
    .prep-bar{ grid-template-columns:repeat(3,1fr); }
    .prep-item + .prep-item{ border-top:0; border-left:1px solid var(--line); }
  }
  .mono-no{
    font-family:var(--font-mono);
    font-variant-numeric:tabular-nums;
    font-size:13px;
    color:var(--primary);
    letter-spacing:.06em;
    padding-top:2px;
    flex:none;
  }

  /* ---------- 时间轴 ---------- */
  .timeline{
    position:relative;
  }
  .timeline::before{
    content:"";
    position:absolute;
    top:8px; bottom:8px; left:5px;
    width:1px;
    background:linear-gradient(180deg, rgba(201,242,76,.45), rgba(255,255,255,.08) 16%, rgba(255,255,255,.08) 84%, rgba(201,242,76,.45));
  }
  .tl-node{
    position:relative;
    padding-left:38px;
    padding-bottom:44px;
  }
  .tl-node:last-child{ padding-bottom:0; }
  .tl-dot{
    position:absolute;
    left:0; top:12px;
    width:10px; height:10px;
    border-radius:999px;
    background:var(--primary);
    box-shadow:0 0 0 4px rgba(201,242,76,.14);
  }
  .tl-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-card);
    padding:24px;
    box-shadow:var(--shadow-card);
    transition:border-color .3s ease, transform .3s ease;
  }
  .tl-card:hover{ border-color:rgba(201,242,76,.35); transform:translateY(-4px); }
  .tl-thumb{
    width:100%;
    height:170px;
    object-fit:cover;
    border-radius:var(--radius-img);
    border:1px solid var(--line);
    margin-bottom:18px;
  }
  .tl-title{
    font-size:20px;
    line-height:1.5;
    color:var(--text-hi);
    font-family:"Noto Serif SC",serif;
    font-weight:700;
  }
  .tl-text{
    margin-top:12px;
    font-size:15px;
    line-height:1.9;
    color:var(--text-mid);
  }
  .tl-note{
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid var(--line);
    font-size:13px;
    line-height:1.8;
    color:var(--text-low);
  }

  @media (min-width:1024px){
    .timeline{ max-width:920px; margin:0 auto; }
    .timeline::before{ left:50%; }
    .tl-node{
      width:calc(50% - 48px);
      padding-left:0;
      padding-bottom:56px;
    }
    .tl-node:nth-child(odd){ margin-right:auto; }
    .tl-node:nth-child(even){ margin-left:auto; }
    .tl-node:nth-child(odd) .tl-dot{ left:auto; right:-53px; top:36px; }
    .tl-node:nth-child(even) .tl-dot{ left:-53px; top:36px; }
  }

  /* ---------- CTA 卡 ---------- */
  .cta-card{
    position:relative;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:20px;
    background:var(--surface-2);
    box-shadow:var(--shadow-card);
    padding:40px 28px;
    display:flex;
    flex-wrap:wrap;
    gap:28px;
    align-items:center;
    justify-content:space-between;
  }
  @media (min-width:1024px){ .cta-card{ padding:56px 48px; } }
  .cta-card::before{
    content:"";
    position:absolute;
    right:-80px; top:-80px;
    width:260px; height:260px;
    border-radius:999px;
    background:radial-gradient(circle, rgba(201,242,76,.18), transparent 68%);
    pointer-events:none;
  }

  /* ---------- 页脚 ---------- */
  footer a{ font-size:14px; color:var(--text-mid); transition:color .2s ease; }
  footer a:hover{ color:var(--primary); }

  /* ---------- 底部转化条 ---------- */
  .sticky-cta{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:40;
    height:64px;
    background:rgba(10,9,18,.94);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    border-top:1px solid var(--line);
    transition:transform .3s ease, opacity .3s ease;
  }
  .sticky-cta.is-hidden{ transform:translateY(100%); opacity:0; pointer-events:none; }
  .sticky-cta .container{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .sticky-cta .msg{ font-size:14px; color:var(--text-mid); }
  @media (max-width:519px){
    .sticky-cta .msg{ display:none; }
    .sticky-cta .container{ justify-content:center; }
  }

  /* ---------- 移动端菜单 ---------- */
  #mobileMenu{
    position:fixed;
    inset:0;
    z-index:60;
    background:rgba(10,9,18,.98);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:32px 28px;
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease, visibility .25s ease;
  }
  #mobileMenu.is-open{ opacity:1; visibility:visible; }
  .m-link{
    display:block;
    font-size:20px;
    line-height:1.4;
    color:var(--text-mid);
    padding:10px 0;
    transition:color .2s ease;
  }
  .m-link:hover{ color:var(--text-hi); }
  .m-link.is-active{ color:var(--primary); }

  /* ---------- 进入动画 ---------- */
  .reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
  .reveal.is-in{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .reveal{ opacity:1; transform:none; transition:none; }
    .btn-primary::after{ display:none; }
    .tl-card, .btn-primary, .btn-ghost{ transition:none; }
  }

/* roulang page: category4 */
:root{
    --bg-deep:#0A0912;
    --bg-base:#12101F;
    --surface:#1A1730;
    --surface-2:#221D3D;
    --line:rgba(255,255,255,.08);
    --primary:#C9F24C;
    --primary-ink:#101208;
    --accent-2:#8E7BFF;
    --text-hi:#F6F4EE;
    --text-mid:#B4B1C4;
    --text-low:#7C7990;
    --radius-card:16px;
    --radius-img:14px;
    --radius-input:12px;
    --shadow-card:0 24px 60px -40px rgba(0,0,0,.9);
  }

  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg-base);
    color:var(--text-mid);
    font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
    font-size:16px;
    line-height:1.9;
    padding-bottom:76px;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{font-family:"Noto Serif SC","Songti SC",serif;color:var(--text-hi);margin:0;font-weight:700;}
  p{margin:0;}
  ul{margin:0;padding:0;list-style:none;}
  a{color:inherit;text-decoration:none;}
  img{display:block;max-width:100%;}
  button{font-family:inherit;}
  ::selection{background:rgba(201,242,76,.28);color:#fff;}

  .font-serifcn{font-family:"Noto Serif SC","Songti SC",serif;}
  .num{font-family:ui-monospace,"JetBrains Mono","SFMono-Regular",Menlo,monospace;font-variant-numeric:tabular-nums;letter-spacing:.02em;}

  .container{width:100%;max-width:1200px;margin:0 auto;padding-left:20px;padding-right:20px;}
  @media (min-width:1024px){.container{padding-left:40px;padding-right:40px;}}

  /* ---------- 导航 ---------- */
  .nav-shell{
    background:rgba(18,16,31,.62);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    border:1px solid transparent;
    box-shadow:0 24px 60px -40px rgba(0,0,0,.9);
    transition:background-color .3s ease,border-color .3s ease;
  }
  .nav-shell.is-scrolled{
    background:rgba(18,16,31,.88);
    border-color:var(--line);
  }
  .logo-mark{
    position:relative;
    display:inline-block;
    width:13px;height:13px;
    background:var(--primary);
    transform:rotate(45deg);
    border-radius:3px;
    flex:0 0 13px;
  }
  .logo-mark::after{
    content:"";
    position:absolute;
    inset:4px;
    background:var(--bg-deep);
    border-radius:1px;
  }
  .nav-link{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 14px;
    border-radius:999px;
    font-size:15px;
    line-height:1.4;
    color:var(--text-mid);
    transition:color .2s ease,background-color .2s ease;
    white-space:nowrap;
  }
  .nav-link:hover{color:var(--text-hi);background:rgba(201,242,76,.08);}
  .nav-link:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
  .nav-link.is-active{color:var(--text-hi);}
  .nav-link.is-active::before{
    content:"";
    width:6px;height:6px;border-radius:999px;background:var(--primary);
    flex:0 0 6px;
  }

  /* ---------- 按钮 ---------- */
  .btn-primary{
    position:relative;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:14px 28px;
    border:0;
    border-radius:999px;
    background:var(--primary);
    color:var(--primary-ink);
    font-size:15px;
    font-weight:600;
    line-height:1.4;
    cursor:pointer;
    transition:transform .2s ease,box-shadow .2s ease;
  }
  .btn-primary::after{
    content:"";
    position:absolute;
    top:0;left:-120%;
    width:58%;height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
    transform:skewX(-18deg);
    transition:left .3s ease;
  }
  .btn-primary:hover::after{left:135%;}
  .btn-primary:hover{box-shadow:0 10px 30px -14px rgba(201,242,76,.7);}
  .btn-primary:active{transform:translateY(1px);}
  .btn-primary:focus-visible{outline:2px solid var(--primary);outline-offset:3px;}
  .btn-sm{padding:10px 20px;font-size:14px;}
  .btn-block{width:100%;}

  .btn-ghost{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:13px 26px;
    border-radius:999px;
    border:1px solid rgba(246,244,238,.6);
    background:transparent;
    color:var(--text-hi);
    font-size:15px;
    font-weight:500;
    line-height:1.4;
    cursor:pointer;
    transition:color .2s ease,border-color .2s ease,background-color .2s ease;
  }
  .btn-ghost:hover{color:var(--primary);border-color:var(--primary);background:rgba(201,242,76,.06);}
  .btn-ghost:focus-visible{outline:2px solid var(--primary);outline-offset:3px;}

  .link-arrow{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    color:var(--text-mid);
    transition:color .2s ease;
  }
  .link-arrow svg{transition:transform .2s ease;}
  .link-arrow:hover{color:var(--primary);}
  .link-arrow:hover svg{transform:translateX(4px);}
  .link-arrow:hover span{text-decoration:underline;text-underline-offset:4px;}

  /* ---------- 纹理 ---------- */
  .grid-tex{position:relative;}
  .grid-tex::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:48px 48px;
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 78%);
    mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 78%);
  }
  .star-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
  .star-field::before{
    content:"";
    position:absolute;
    inset:-20%;
    opacity:.6;
    background-image:
      radial-gradient(1.6px 1.6px at 18% 26%,rgba(246,244,238,.55),transparent 60%),
      radial-gradient(1.4px 1.4px at 68% 14%,rgba(201,242,76,.5),transparent 60%),
      radial-gradient(1.2px 1.2px at 44% 62%,rgba(246,244,238,.4),transparent 60%),
      radial-gradient(1.4px 1.4px at 86% 48%,rgba(142,123,255,.45),transparent 60%),
      radial-gradient(1.2px 1.2px at 28% 84%,rgba(246,244,238,.32),transparent 60%),
      radial-gradient(1.4px 1.4px at 76% 82%,rgba(201,242,76,.32),transparent 60%);
    animation:starDrift 38s linear infinite;
  }
  @keyframes starDrift{
    from{transform:translate3d(0,0,0);}
    to{transform:translate3d(-2%,-3%,0);}
  }

  /* ---------- 卡片 / 标签 ---------- */
  .card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-card);
    box-shadow:var(--shadow-card);
    transition:border-color .25s ease,transform .25s ease;
  }
  .badge{
    display:inline-flex;
    align-items:center;
    height:24px;
    padding:0 12px;
    border-radius:999px;
    font-size:12px;
    line-height:1;
    letter-spacing:.02em;
    background:rgba(142,123,255,.14);
    color:#B6A9FF;
    white-space:nowrap;
  }
  .badge-lime{background:rgba(201,242,76,.14);color:#D5F574;}
  .chip{
    display:inline-flex;
    align-items:center;
    height:36px;
    padding:0 18px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.02);
    color:var(--text-mid);
    font-size:14px;
    line-height:1;
    cursor:pointer;
    transition:color .2s ease,border-color .2s ease,background-color .2s ease;
    white-space:nowrap;
  }
  .chip:hover{color:var(--text-hi);border-color:rgba(246,244,238,.3);}
  .chip.is-active{
    color:var(--primary);
    border-color:var(--primary);
    background:rgba(201,242,76,.1);
  }
  .chip:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}

  /* ---------- 搜索框 ---------- */
  .search-wrap{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    max-width:560px;
    padding:8px 8px 8px 18px;
    border:1px solid var(--line);
    border-radius:999px;
    background:#14122A;
    transition:border-color .2s ease,box-shadow .2s ease;
  }
  .search-wrap:focus-within{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(201,242,76,.12);
  }
  .search-input{
    flex:1 1 auto;
    min-width:0;
    border:0;
    background:transparent;
    color:var(--text-hi);
    font-size:15px;
    line-height:1.6;
    padding:8px 0;
    outline:none;
  }
  .search-input::placeholder{color:var(--text-low);}
  .search-btn{
    flex:0 0 auto;
    height:40px;
    padding:0 22px;
    border:0;
    border-radius:999px;
    background:var(--primary);
    color:var(--primary-ink);
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:transform .2s ease;
  }
  .search-btn:active{transform:translateY(1px);}
  .search-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}

  /* ---------- FAQ 手风琴 ---------- */
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-item:first-child{border-top:1px solid var(--line);}
  .faq-q{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    width:100%;
    padding:22px 0;
    border:0;
    background:transparent;
    text-align:left;
    cursor:pointer;
    color:var(--text-hi);
    font-size:18px;
    font-family:"Noto Serif SC","Songti SC",serif;
    font-weight:700;
    line-height:1.6;
    transition:color .2s ease;
  }
  .faq-q:hover{color:var(--primary);}
  .faq-q:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:8px;}
  .faq-icon{
    position:relative;
    flex:0 0 16px;
    width:16px;height:16px;
    margin-top:7px;
    transition:transform .25s ease;
  }
  .faq-icon::before,.faq-icon::after{
    content:"";
    position:absolute;
    background:var(--text-mid);
    border-radius:2px;
    transition:background-color .25s ease;
  }
  .faq-icon::before{left:0;top:7px;width:16px;height:2px;}
  .faq-icon::after{top:0;left:7px;width:2px;height:16px;}
  .faq-item.is-open .faq-icon{transform:rotate(45deg);}
  .faq-item.is-open .faq-icon::before,
  .faq-item.is-open .faq-icon::after{background:var(--primary);}
  .faq-a{
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
  }
  .faq-item.is-open .faq-a{max-height:460px;}
  .faq-a-inner{
    padding:0 0 22px;
    font-size:15px;
    line-height:1.9;
    color:var(--text-mid);
    max-width:64ch;
  }

  /* ---------- 资源卡 ---------- */
  .resource-card{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:18px;
    border:1px solid var(--line);
    border-radius:var(--radius-card);
    background:rgba(255,255,255,.015);
    transition:border-color .25s ease,transform .25s ease,background-color .25s ease;
  }
  .resource-card:hover{
    border-color:rgba(201,242,76,.35);
    transform:translateY(-4px);
    background:rgba(201,242,76,.03);
  }
  .resource-card:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
  .resource-icon{
    flex:0 0 38px;
    width:38px;height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:rgba(142,123,255,.14);
    color:#B6A9FF;
  }
  .resource-card:hover .resource-icon{
    background:rgba(201,242,76,.14);
    color:var(--primary);
  }
  .resource-card .r-arrow{
    margin-left:auto;
    flex:0 0 auto;
    color:var(--text-low);
    transition:transform .2s ease,color .2s ease;
    margin-top:8px;
  }
  .resource-card:hover .r-arrow{color:var(--primary);transform:translateX(4px);}

  /* ---------- 移动菜单 ---------- */
  .mobile-menu{
    position:fixed;
    inset:0;
    z-index:60;
    display:flex;
    flex-direction:column;
    padding:24px 22px 32px;
    background:rgba(10,9,18,.98);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .25s ease,transform .25s ease,visibility .25s ease;
  }
  .mobile-menu.is-open{opacity:1;visibility:visible;transform:none;}
  .mobile-link{
    display:block;
    padding:10px 0;
    font-size:20px;
    line-height:1.6;
    color:var(--text-mid);
    transition:color .2s ease;
  }
  .mobile-link:hover,.mobile-link.is-active{color:var(--primary);}

  /* ---------- 底部固定转化条 ---------- */
  .fixed-cta{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:40;
    height:64px;
    background:rgba(10,9,18,.94);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    border-top:1px solid var(--line);
    transition:transform .3s ease,opacity .3s ease;
  }
  .fixed-cta.is-hidden{transform:translateY(100%);opacity:0;pointer-events:none;}
  .fixed-cta-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    height:64px;
  }

  /* ---------- 动效 ---------- */
  .reveal{
    opacity:0;
    transform:translateY(16px);
    transition:opacity .5s ease,transform .5s ease;
  }
  .reveal.is-in{opacity:1;transform:none;}

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

  /* ---------- 响应式微调 ---------- */
  @media (max-width:1023px){
    .faq-q{font-size:17px;padding:20px 0;}
  }
  @media (max-width:640px){
    body{padding-bottom:72px;}
    .fixed-cta-inner .fixed-note{font-size:13px;}
    .search-wrap{max-width:100%;}
    .faq-q{gap:14px;}
    .resource-card{padding:16px;}
  }