/* roulang page: index */
:root{
  --jade-950:#042d2b;
  --jade-900:#053c39;
  --jade-800:#094a48;
  --jade-700:#0e5751;
  --jade-600:#18655e;
  --jade-500:#2a7f76;
  --jade-200:#b9d7d1;
  --jade-100:#e4efed;
  --jade-50:#f1f7f5;
  --clay-500:#d26437;
  --clay-600:#b04e26;
  --clay-100:#f7e7dd;
  --paper:#f8f6f1;
  --card:#ffffff;
  --ink:#1e2f2c;
  --text:#2c3b38;
  --muted:#6a7a77;
  --line:#e6e3da;
  --border:#e1e7e3;
  --white:#ffffff;
  --shadow-sm:0 4px 16px rgba(8,54,51,.06);
  --shadow-md:0 6px 24px rgba(8,54,51,.09);
  --shadow-lg:0 16px 44px rgba(8,54,51,.18);
  --radius-xl:26px;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-btn:12px;
  --radius-pill:999px;
  --font: "PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:118px}
body{
  margin:0;
  font-family:var(--font);
  background:var(--paper);
  color:var(--text);
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
p{margin-top:0}
h1,h2,h3,h4{color:var(--ink);line-height:1.35}
:focus-visible{outline:3px solid rgba(24,101,94,.38);outline-offset:2px;border-radius:6px}

.container-x{
  width:100%;
  max-width:1320px;
  margin-right:auto;
  margin-left:auto;
  padding-right:clamp(16px,3.2vw,36px);
  padding-left:clamp(16px,3.2vw,36px);
}
.section{padding:clamp(58px,8.6vw,104px) 0;position:relative}

.text-center{text-align:center}

.btn{
  --bs-btn-font-weight:600;
  --bs-btn-font-size:.95rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:var(--radius-btn);
  padding:.7rem 1.32rem;
  border:1px solid transparent;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s,color .18s;
  text-decoration:none;
}
.btn:active{transform:translateY(0) scale(.99)}
.btn-clay{background:var(--clay-500);border-color:var(--clay-500);color:#fff!important;box-shadow:0 8px 20px rgba(210,100,55,.22);}
.btn-clay:hover,.btn-clay:active,.btn-clay:focus{background:var(--clay-600);border-color:var(--clay-600);color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px rgba(210,100,55,.28)}
.btn-green{background:var(--jade-700);border-color:var(--jade-700);color:#fff!important;box-shadow:0 8px 20px rgba(8,74,72,.18);}
.btn-green:hover,.btn-green:active,.btn-green:focus{background:var(--jade-800);border-color:var(--jade-800);color:#fff;transform:translateY(-2px);box-shadow:0 12px 28px rgba(8,74,72,.25)}
.btn-outline-light{border:1px solid rgba(255,255,255,.42);color:#fff!important;background:rgba(255,255,255,.04)}
.btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff}
.btn-ghost{border:1px solid var(--jade-700);color:var(--jade-800)!important;background:transparent}
.btn-ghost:hover{border-color:var(--jade-600);background:var(--jade-100);color:var(--jade-900)!important}
.btn-lg{padding:.9rem 1.7rem;font-size:1.02rem}
.btn-arrow svg{transition:transform .18s}
.btn:hover .btn-arrow svg{transform:translateX(3px)}

.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.78rem;
  font-weight:600;
  border-radius:var(--radius-pill);
  padding:.2rem .62rem;
  letter-spacing:.02em;
  white-space:nowrap;
}
.tag-jade{background:var(--jade-100);color:var(--jade-800)}
.tag-orange{background:var(--clay-100);color:var(--clay-600)}
.tag-paper{background:#efe9dd;color:#6d512e}
.badge-data{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-variant-numeric:tabular-nums;
  border-radius:var(--radius-pill);
  white-space:nowrap;
}
.badge-data--dark{background:var(--jade-800);color:#fff;font-weight:700;}
.badge-data--orange-light{background:var(--clay-100);color:var(--clay-600);font-weight:700;}
.badge-data--jade-light{background:var(--jade-100);color:var(--jade-800);font-weight:700;}
.badge-data--sm{padding:.16rem .58rem;font-size:.75rem}
.badge-data--md{padding:.38rem .82rem;font-size:.86rem}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:clamp(32px,4vw,50px);
}
.section-head h2{
  font-size:clamp(1.52rem,2.6vw,2.18rem);
  font-weight:800;
  letter-spacing:.01em;
  margin:0 0 .55rem;
}
.section-head p{margin:0;color:var(--muted);font-size:.97rem;max-width:640px}
.section-head-more{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--jade-700);
  font-weight:700;
  font-size:.9rem;
  flex:0 0 auto;
}
.section-head-more svg{transition:transform .18s}
.section-head-more:hover{color:var(--clay-500)}
.section-head-more:hover svg{transform:translateX(4px)}
.eyebrow{
  color:var(--clay-500);
  font-size:.83rem;
  font-weight:700;
  letter-spacing:.16em;
  margin-bottom:10px;
  display:block;
  text-transform:uppercase;
}
.eyebrow-light{color:#eac6a8;}
.muted{color:var(--muted)}

/* ===== Header / 双层导航 ===== */
.site-header{
  position:sticky;
  top:0;
  z-index:1080;
  background:#fff;
}
.topbar{
  background:linear-gradient(135deg,var(--jade-950) 0%,var(--jade-800) 100%);
  color:#fff;
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:66px;
  padding-top:8px;
  padding-bottom:8px;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.brand-mark{
  width:42px;
  height:42px;
  border-radius:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:1rem;
  background:linear-gradient(135deg,#e0793f,var(--clay-500));
  color:#fff;
  letter-spacing:.02em;
  box-shadow:0 5px 15px rgba(210,100,55,.32);
}
.brand-text{
  font-weight:800;
  font-size:1.16rem;
  color:#fff;
  letter-spacing:.01em;
  line-height:1.2;
}
.brand-text small{
  display:block;
  font-weight:400;
  font-size:.68rem;
  color:rgba(255,255,255,.72);
  letter-spacing:.12em;
  margin-top:2px;
}
.topbar-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex:1;
  min-width:0;
}
.search-form{
  display:flex;
  align-items:center;
  width:min(320px,38vw);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.24);
  border-radius:var(--radius-btn);
  overflow:hidden;
  transition:background .18s,border-color .18s,box-shadow .18s;
}
.search-form:focus-within{
  background:#fff;
  border-color:rgba(255,255,255,.96);
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.search-icon{
  flex:0 0 auto;
  display:inline-flex;
  width:40px;
  height:36px;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.7);
}
.search-form:focus-within .search-icon{color:var(--jade-700)}
.search-input{
  width:100%;
  min-width:0;
  border:0;
  background:transparent;
  outline:none;
  color:#fff;
  font-size:.87rem;
  padding:7px 4px;
  font-family:var(--font);
}
.search-form:focus-within .search-input{color:var(--ink)}
.search-input::placeholder{color:rgba(255,255,255,.65)}
.search-form:focus-within .search-input::placeholder{color:var(--muted)}
.search-btn{
  flex:0 0 auto;
  border:0;
  background:transparent;
  color:#fff;
  font-weight:700;
  font-size:.83rem;
  height:36px;
  padding:0 15px;
  border-left:1px solid rgba(255,255,255,.16);
}
.search-form:focus-within .search-btn{
  color:var(--jade-700);
  border-left-color:#e3e9e6;
}
.topbar-cta{
  color:#fff!important;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.36);
  padding:.48rem .86rem;
  font-size:.85rem;
  flex:0 0 auto;
}
.topbar-cta:hover,.topbar-cta:focus{
  background:rgba(255,255,255,.18);
  color:#fff;
  border-color:#fff;
  transform:translateY(-1px);
}

.channel-nav{
  position:relative;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  box-shadow:0 4px 16px rgba(8,54,51,.04);
}
.channel-track{
  display:flex;
  align-items:center;
  gap:8px;
  padding-top:10px;
  padding-bottom:10px;
  overflow-x:auto;
  scrollbar-width:none;
}
.channel-track::-webkit-scrollbar{display:none}
.channel-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  padding:.5rem .9rem;
  border-radius:var(--radius-pill);
  background:transparent;
  color:var(--jade-800);
  border:1px solid transparent;
  font-size:.88rem;
  font-weight:700;
  white-space:nowrap;
  transition:all .16s ease;
}
.channel-item:hover{
  background:var(--jade-100);
  border-color:#d4e2de;
}
.channel-item.active{
  background:linear-gradient(135deg,var(--jade-800),var(--jade-500));
  color:#fff;
  box-shadow:0 5px 14px rgba(8,74,72,.2);
}

/* ===== Hero ===== */
.hero{
  position:relative;
  color:#fff;
  overflow:hidden;
  padding:clamp(48px,7vw,86px) 0;
  background:linear-gradient(135deg,#043c39 0%,#0b5550 48%,#176c63 100%);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url('/assets/images/backpic/back-1.webp');
  background-size:cover;
  background-position:center;
  opacity:.09;
  pointer-events:none;
}
.hero-inner{position:relative;z-index:2}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(350px,.92fr);
  gap:clamp(34px,5vw,72px);
  align-items:center;
}
.hero-copy{padding-right:clamp(0px,2vw,26px)}
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  border-radius:var(--radius-pill);
  padding:.34rem .86rem;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.08em;
  margin-bottom:22px;
  backdrop-filter:blur(3px);
}
.hero-eyebrow .pulse-dot{
  width:7px;height:7px;border-radius:50%;
  background:#e9a16f;
  box-shadow:0 0 0 4px rgba(233,161,111,.2);
}
.hero h1{
  color:#fff;
  font-size:clamp(2.15rem,5vw,3.55rem);
  line-height:1.21;
  font-weight:800;
  letter-spacing:.01em;
  margin:0 0 20px;
  text-wrap:balance;
}
.hero-lead{
  color:rgba(255,255,255,.86);
  font-size:clamp(.98rem,1.55vw,1.1rem);
  line-height:1.9;
  margin-bottom:32px;
  max-width:620px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  margin-bottom:34px;
}
.hero-trustline{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  color:rgba(255,255,255,.82);
  font-size:.84rem;
}
.hero-trustline span{display:inline-flex;align-items:center;gap:7px}
.hero-trustline svg{width:16px;height:16px;color:#e6b184}

.promo-card{
  background:#fff;
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:0 22px 56px rgba(0,0,0,.26);
  color:var(--text);
  transition:transform .22s ease,box-shadow .22s ease;
}
.promo-card:hover{transform:translateY(-5px);box-shadow:0 30px 64px rgba(0,0,0,.3)}
.promo-media{
  position:relative;
  aspect-ratio:16/10;
  background:linear-gradient(135deg,var(--jade-200),#f0e5d8);
}
.promo-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.promo-media .promo-flag{
  position:absolute;
  left:16px;
  top:16px;
  background:linear-gradient(135deg,var(--jade-800),var(--jade-500));
  color:#fff;
  font-weight:700;
  font-size:.78rem;
  padding:.3rem .72rem;
  border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,.24);
}
.promo-media .price-tag{
  position:absolute;
  right:14px;
  bottom:14px;
  background:rgba(255,255,255,.94);
  color:var(--jade-900);
  font-weight:800;
  padding:.42rem .82rem;
  border-radius:var(--radius-pill);
  font-size:.84rem;
  box-shadow:var(--shadow-md);
}
.promo-content{padding:clamp(18px,2vw,28px)}
.promo-content h2{
  font-size:1.24rem;
  font-weight:800;
  margin:0 0 10px;
  color:var(--jade-950);
}
.promo-content p{font-size:.9rem;color:var(--muted);margin-bottom:18px;line-height:1.8}
.promo-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  padding:0;
  margin:0 0 20px;
}
.promo-list li{
  display:inline-flex;
  align-items:center;
  font-size:.78rem;
  color:var(--jade-800);
  background:var(--jade-50);
  border:1px solid var(--jade-200);
  border-radius:var(--radius-pill);
  padding:.22rem .66rem;
}
.promo-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.promo-status .free-label{
  font-weight:800;
  color:var(--clay-600);
}
.promo-status .note{font-size:.8rem;color:var(--muted)}
.promo-cta{width:100%}

/* ===== CMS 最新信息 ===== */
.cms-section{background:var(--paper)}
.cms-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
.fresh-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:22px 24px;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s;
  position:relative;
  height:100%;
}
.fresh-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
  border-color:#cfdad5;
}
.fresh-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.fresh-date{font-size:.78rem;color:var(--muted)}
.fresh-title{
  font-size:1.04rem;
  font-weight:700;
  margin:0 0 8px;
  line-height:1.55;
}
.fresh-title a:hover{color:var(--clay-500);transition:color .16s}
.fresh-excerpt{
  font-size:.87rem;
  line-height:1.8;
  color:var(--muted);
  margin-bottom:14px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.fresh-read{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:.83rem;
  font-weight:700;
  color:var(--jade-700);
}
.fresh-read:hover{color:var(--clay-500)}
.cms-empty{
  border:1px dashed #d3c7b6;
  border-radius:22px;
  background:#fff;
  padding:44px 20px;
  text-align:center;
  color:var(--muted);
}
.cms-empty svg{width:40px;height:40px;margin:0 auto 10px;color:#b7a98f}
.cms-empty p{margin:0}

/* ===== 热门资源 ===== */
.hot-section{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hot-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-auto-rows:minmax(156px,auto);
  gap:22px;
}
.hot-card{
  grid-column:span 2;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s;
}
.hot-card--feature{
  grid-column:span 2;
  grid-row:span 2;
}
.hot-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:#cddbd5;
}
.hot-media{
  position:relative;
  aspect-ratio:5/3;
  background:linear-gradient(135deg,var(--jade-100),#ece4d6);
  overflow:hidden;
}
.hot-card--feature .hot-media{aspect-ratio:auto;flex:0 0 42%;min-height:170px}
.hot-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.hot-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(4,54,51,.08),transparent 44%);
  pointer-events:none;
}
.hot-metric{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:2;
}
.hot-content{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:17px 18px;
  flex:1;
}
.hot-content .topic-label{
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--clay-500);
}
.hot-content h3{
  font-size:.96rem;
  font-weight:700;
  line-height:1.55;
  margin:0;
  color:var(--ink);
}
.hot-card--feature .hot-content h3{font-size:1.22rem}
.hot-content p{
  font-size:.8rem;
  color:var(--muted);
  margin:.1rem 0 .6rem;
  line-height:1.75;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ===== 评价轮播 ===== */
.review-section{
  background:
    linear-gradient(rgba(244,248,246,.95),rgba(244,248,246,.96)),
    url('/assets/images/backpic/back-2.png') center/cover;
  border-bottom:1px solid var(--line);
}
.review-shell{
  max-width:920px;
  margin:0 auto;
  text-align:center;
}
.review-head{
  margin-bottom:30px;
}
.review-figure{
  background:#fff;
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
  padding:clamp(28px,5vw,50px);
  margin:0;
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
}
.quote-glyph{
  width:48px;height:48px;
  border-radius:16px;
  background:var(--jade-100);
  color:var(--jade-700);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
}
.review-quote{
  font-size:clamp(1rem,1.7vw,1.2rem);
  line-height:1.9;
  color:var(--ink);
  margin:0 0 26px;
}
.review-person{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.avatar-circle{
  width:44px;height:44px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.92rem;
  font-weight:700;
  color:#fff;
  background:linear-gradient(135deg,var(--jade-700),var(--jade-500));
}
.review-person strong{
  display:block;
  font-size:.9rem;
  color:var(--ink);
  line-height:1.3;
}
.review-person small{color:var(--muted);font-size:.78rem}
.carousel-indicators{
  position:static;
  justify-content:center;
  gap:8px;
  margin:24px 0 0;
}
.carousel-indicators [data-bs-target]{
  width:9px;
  height:9px;
  border-radius:50%;
  border:1px solid var(--jade-500);
  background:transparent;
  opacity:.5;
  margin:0;
  transition:opacity .2s,width .2s;
}
.carousel-indicators .active{
  opacity:1;
  width:24px;
  border-radius:8px;
  background:var(--jade-500);
}
.review-carousel{
  position:relative;
  padding:0 12px;  
}
.review-carousel .carousel-control-prev,
.review-carousel .carousel-control-next{
  width:44px;
  height:44px;
  top:50%;
  transform:translateY(-50%);
  bottom:auto;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--jade-200);
  color:var(--jade-700);
  opacity:1;
  box-shadow:var(--shadow-md);
  transition:all .18s;
}
.review-carousel .carousel-control-prev{left:0}
.review-carousel .carousel-control-next{right:0}
.review-carousel .carousel-control-prev:hover,
.review-carousel .carousel-control-next:hover{
  background:var(--jade-700);
  color:#fff;
  opacity:1;
}
.review-carousel .ctrl-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

/* ===== 保障条 ===== */
.trust-section{background:#fff}
.trust-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
}
.trust-item{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px 24px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:all .18s;
}
.trust-item:hover{
  background:#fff;
  border-color:#d2ded9;
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}
.trust-icon{
  width:42px;height:42px;
  border-radius:13px;
  background:var(--jade-800);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.trust-item h3{
  font-size:.98rem;
  font-weight:800;
  color:var(--ink);
  margin:4px 0 0;
}
.trust-item p{font-size:.82rem;color:var(--muted);line-height:1.75;margin:0}

/* ===== CTA ===== */
.cta-section{
  background:linear-gradient(135deg,#093d39,#0c5952 52%,#176c61);
  color:#fff;
  overflow:hidden;
}
.cta-card{
  position:relative;
  border-radius:32px;
  padding:clamp(26px,4.7vw,54px);
  display:grid;
  grid-template-columns:1fr auto;
  gap:32px;
  align-items:center;
  background:
    linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),
    url('/assets/images/backpic/back-3.png') right/cover no-repeat;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 60px rgba(0,0,0,.2);
}
.cta-card h2{
  color:#fff;
  font-size:clamp(1.42rem,2.6vw,2.16rem);
  font-weight:800;
  margin:10px 0 14px;
  max-width:720px;
}
.cta-card p{color:rgba(255,255,255,.86);margin-bottom:0;max-width:660px}
.cta-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  min-width:210px;
}
.cta-actions .btn{
  width:min(260px,100%);
}
.cta-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#fff;
  background:rgba(255,255,255,.14);
  border-radius:var(--radius-pill);
  padding:.3rem .82rem;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.06em;
}
.cta-note{font-size:.76rem;color:rgba(255,255,255,.65)!important;line-height:1.6;max-width:280px}

/* ===== FAQ ===== */
.faq-section{background:var(--paper)}
.faq-wrap{
  max-width:900px;
  margin:0 auto;
}
.faq-acc{
  --bs-accordion-border-width:0;
  --bs-accordion-btn-focus-box-shadow:none;
  background:transparent;
  width:100%;
}
.faq-acc .accordion-item{
  background:transparent;
  border:0;
  border-bottom:1px solid #e2ddd2;
  border-radius:0!important;
}
.faq-acc .accordion-header{background:transparent}
.faq-acc .accordion-button{
  background:transparent;
  box-shadow:none;
  color:var(--jade-900);
  font-size:1rem;
  font-weight:700;
  padding:1.08rem 2.3rem 1.08rem .1rem;
  line-height:1.5;
  position:relative;
}
.faq-acc .accordion-button:not(.collapsed){
  background:transparent;
  color:var(--jade-800);
}
.faq-acc .accordion-button::after{
  background-image:none;
  width:20px;
  height:20px;
  position:absolute;
  right:.2rem;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--jade-700);
  font-weight:700;
  font-size:1.1rem;
  content:"+";
  background:var(--jade-100);
  border-radius:50%;
  line-height:1;
}
.faq-acc .accordion-button:not(.collapsed)::after{
  content:"−";
  background:var(--jade-800);
  color:#fff;
}
.faq-acc .accordion-button:hover{
  color:var(--clay-500);
}
.faq-acc .accordion-collapse{background:transparent}
.faq-acc .accordion-body{
  padding:.1rem 2.4rem 1.2rem .1rem;
  color:var(--text);
  line-height:1.95;
  font-size:.92rem;
}
.faq-acc .accordion-body p:last-child{margin-bottom:0}
.faq-code{
  display:block;
  background:var(--jade-950);
  color:#f2e7d3;
  border-radius:14px;
  padding:12px 14px;
  font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  font-size:.82rem;
  line-height:1.7;
  margin:14px 0 4px;
  overflow-x:auto;
}
.faq-help{
  text-align:center;
  margin-top:38px;
  color:var(--muted);
  font-size:.9rem;
}
.faq-help a{
  color:var(--jade-700);
  font-weight:700;
  margin-left:8px;
}
.faq-help a:hover{color:var(--clay-500);text-decoration:underline}

/* ===== Footer ===== */
.site-footer{
  background:var(--jade-950);
  color:#b8c9c5;
  padding:clamp(44px,6vw,72px) 0 24px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr .8fr .9fr 1.1fr;
  gap:40px;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}
.footer-brand .brand-text{
  font-size:1.04rem;
}
.footer-about{
  font-size:.86rem;
  line-height:1.9;
  color:#9fb4ae;
  max-width:360px;
}
.footer-about .footer-domain{
  color:#e3efe9;
  opacity:.8;
}
.footer-title{
  font-size:.9rem;
  color:#fff;
  font-weight:700;
  letter-spacing:.06em;
  margin:4px 0 16px;
  display:block;
}
.footer-links{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:9px;
}
.footer-links a{
  color:#9fb4ae;
  font-size:.87rem;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.footer-links a:hover{color:#fff;transform:translateX(2px)}
.footer-links a::before{
  content:"›";
  color:var(--clay-500);
  font-weight:700;
}
.footer-newsletter p{
  font-size:.84rem;
  color:#9fb4ae;
  margin-bottom:14px;
}
.newsletter-form{
  display:flex;
  gap:8px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  padding:6px;
}
.newsletter-form:focus-within{
  border-color:#64a59c;
  box-shadow:0 0 0 4px rgba(100,165,156,.16);
}
.newsletter-form input{
  flex:1;
  min-width:0;
  border:0;
  background:transparent;
  color:#fff;
  font-size:.85rem;
  outline:none;
  padding:0 8px;
}
.newsletter-form input::placeholder{color:rgba(255,255,255,.42)}
.newsletter-form button{
  border:0;
  border-radius:9px;
  background:var(--clay-500);
  color:#fff;
  font-weight:700;
  font-size:.8rem;
  padding:.42rem .8rem;
  white-space:nowrap;
  transition:background .16s;
}
.newsletter-form button:hover{background:var(--clay-600)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:36px;
  padding-top:24px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px;
  font-size:.8rem;
  color:#8aa39c;
}
.footer-bottom a{color:#d5e4df}
.footer-bottom a:hover{color:#fff}

/* ===== Responsive ===== */
@media (max-width:1199.98px){
  .hero-grid{grid-template-columns:1fr .9fr;gap:30px}
  .promo-card{max-width:520px;margin-left:auto;margin-right:auto}
  .trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr}
  .footer-newsletter{grid-column:span 3;padding-top:8px}
}
@media (max-width:991.98px){
  .topbar-inner{flex-wrap:wrap;justify-content:center;gap:12px}
  .topbar-right{flex:auto;width:100%;justify-content:center}
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{padding-right:0}
  .hero h1{max-width:720px}
  .hero-trustline{margin-bottom:8px}
  .promo-card{max-width:560px;width:100%}
  .hot-grid{grid-template-columns:repeat(2,1fr)}
  .hot-card{grid-column:span 1}
  .hot-card--feature{grid-column:span 2;grid-row:auto}
  .hot-card--feature .hot-media{aspect-ratio:16/9;flex:none}
  .cta-card{grid-template-columns:1fr}
  .cta-actions{flex-direction:row;align-items:center}
  .cta-actions .btn{width:auto}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer-newsletter{grid-column:span 2}
}
@media (max-width:767.98px){
  .section-head{flex-direction:column;align-items:flex-start;gap:8px}
  .cms-grid{grid-template-columns:1fr}
  .hot-grid{grid-template-columns:1fr;gap:18px}
  .hot-card,.hot-card--feature{grid-column:auto;grid-row:auto}
  .hot-card--feature .hot-media{flex:none;aspect-ratio:16/9}
  .review-figure{padding:24px 18px}
  .trust-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-newsletter{grid-column:auto}
  .faq-acc .accordion-button{font-size:.94rem;white-space:normal;padding-right:2.2rem}
  .faq-acc .accordion-body{padding-right:.2rem}
  .brand-text{font-size:1.06rem}
  .brand-mark{width:38px;height:38px}
  .search-form{width:100%;min-width:0}
  .topbar-cta{display:none}
  .topbar-inner{min-height:56px}
}
@media (max-width:575.98px){
  .topbar-right{justify-content:center}
  .search-icon{display:none}
  .search-form{max-width:100%}
  .search-btn{padding:0 12px}
  .hero-actions .btn{width:100%}
  .hero-trustline{flex-direction:column;gap:7px}
  .trust-grid{grid-template-columns:1fr}
  .section{padding:52px 0}
  .channel-item{font-size:.82rem;padding:.45rem .76rem}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    transition:none!important;
    animation:none!important;
    scroll-behavior:auto!important;
  }
}
.cover-fallback{
  background:linear-gradient(135deg,var(--jade-100),#e9d9c3);
}
.cover-fallback::before{
  content:"NG";
  display:block;
  width:100%;
  height:100%;
  min-height:120px;
  color:var(--jade-600);
  font-size:1.4rem;
  font-weight:800;
  text-align:center;
  line-height:160px;
}

/* roulang page: category1 */
:root {
  --brand-dark: #07413f;
  --brand-primary: #094A48;
  --brand-mid: #18655E;
  --brand-light: #E7F0EE;
  --brand-pale: #F0F6F4;
  --accent: #D26437;
  --accent-light: #FBF1EC;
  --deep-bg: #062F2E;
  --paper: #F7F4EF;
  --card-bg: #ffffff;
  --body-text: #203231;
  --muted-text: #5F6C69;
  --light-text: #9DB4B0;
  --border-light: #E3E7E3;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --shadow-card: 0 6px 24px rgba(8, 54, 51, 0.08);
  --shadow-hover: 0 16px 40px rgba(8, 54, 51, 0.16);
  --shadow-cta: 0 8px 20px rgba(210, 100, 55, 0.22);
  --transition-base: all 0.25s ease;
  --font-stack: "PingFang SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}
body {
  font-family: var(--font-stack);
  background: var(--paper);
  color: var(--body-text);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  text-decoration: none;
  color: var(--brand-primary);
  transition: var(--transition-base);
}
a:hover {
  color: var(--brand-mid);
}
.container-x {
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
.container-narrow {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.badge-dot {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
  background: var(--brand-mid);
  color: #fff;
  border: none;
}
.badge-accent {
  background: var(--accent-light);
  color: var(--accent);
}
.section-title {
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  font-weight: 700;
  color: var(--brand-dark);
  line-height: 1.4;
  margin: 0;
}
.text-muted-small {
  color: var(--muted-text);
  font-size: 0.9rem;
}
.btn-theme-primary {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.65rem 1.6rem;
  transition: var(--transition-base);
  box-shadow: var(--shadow-cta);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.btn-theme-primary:hover {
  background: #B5531F;
  color: #fff;
  transform: translateY(-1px);
}
.btn-theme-secondary {
  background: transparent;
  border: 1px solid var(--brand-mid);
  color: var(--brand-dark);
  border-radius: var(--radius-sm);
  padding: 0.6rem 1.5rem;
  font-weight: 600;
  transition: var(--transition-base);
}
.btn-theme-secondary:hover {
  background: var(--brand-light);
}
/* Top bar */
.site-topbar {
  background: var(--deep-bg);
  position: relative;
  z-index: 1030;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 70px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}
.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand-mid));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.brand-text {
  color: #fff;
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.topbar-search {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  display: flex;
  align-items: center;
  padding: 2px 2px 2px 1rem;
  max-width: 300px;
}
.topbar-search input {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 0.88rem;
  width: 180px;
  outline: none;
}
.topbar-search input::placeholder {
  color: #aec0bd;
}
.topbar-search button {
  background: var(--accent);
  border: none;
  color: #fff;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.38rem 1.1rem;
  cursor: pointer;
  transition: var(--transition-base);
}
.topbar-search button:hover {
  background: #b5531f;
}
.topbar-cta {
  white-space: nowrap;
  font-size: 0.92rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.24);
  color: #fff;
  border-radius: 999px;
  padding: 0.4rem 1.2rem;
  font-weight: 600;
  transition: var(--transition-base);
}
.topbar-cta:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
/* Channel nav */
.channel-nav {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-light);
  z-index: 1020;
}
.channel-track {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  overflow-x: auto;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  scrollbar-width: thin;
  scrollbar-color: #cfdbd8 transparent;
}
.channel-track::-webkit-scrollbar {
  height: 4px;
}
.channel-track::-webkit-scrollbar-thumb {
  background: #cfdbd8;
  border-radius: 99px;
}
.channel-item {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.95rem;
  margin-right: 0.3rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand-primary);
  background: transparent;
  border: 1px solid transparent;
  transition: var(--transition-base);
}
.channel-item:hover {
  background: var(--brand-pale);
  color: var(--brand-dark);
}
.channel-item.active {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-mid));
  color: #fff;
}
html:focus-within {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* layout page container */
.doc-page {
  padding: 48px 0 80px;
}
.doc-header {
  margin-bottom: 2rem;
  position: relative;
  background: linear-gradient(135deg, #f8faf8 0%, #eef3f0 100%);
  padding: 2.8rem 0 2.2rem;
  border-bottom: 1px solid rgba(24,101,94,0.08);
}
.breadcrumb-line {
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  color: var(--muted-text);
  margin-bottom: 0.7rem;
}
.breadcrumb-line a {
  color: var(--muted-text);
}
.breadcrumb-line a:hover {
  color: var(--brand-primary);
}
.doc-header h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--brand-dark);
  line-height: 1.25;
  margin-top: 0.5rem;
}
.doc-intro {
  font-size: 1rem;
  color: #49626a;
  line-height: 1.9;
  margin: 1rem 0 0;
  max-width: 880px;
}
/* two columns */
.doc-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  margin-top: 2.2rem;
}
.toc-side {
  position: relative;
}
.toc-sticky {
  position: sticky;
  top: 120px;
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid #e8eae6;
  padding: 1.6rem 1.4rem;
  box-shadow: var(--shadow-card);
}
.toc-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--brand-dark);
  margin: 0 0 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #e4e9e6;
}
.toc-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc-links li {
  margin: 0;
  padding: 0 0 0.35rem;
}
.toc-links li a {
  display: block;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--body-text);
  border-left: 2px solid transparent;
  transition: var(--transition-base);
}
.toc-links li a:hover {
  background: var(--brand-light);
  color: var(--brand-primary);
  border-left-color: var(--brand-mid);
}
.content-main-text {
  background: #fff;
  padding: 2rem 2.5rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid #ecefeb;
  margin-bottom: 2rem;
}
.section-anchor {
  scroll-margin-top: 130px;
}
.section-anchor h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--brand-dark);
  margin-top: 2.4rem;
  margin-bottom: 1.2rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--brand-light);
}
.section-anchor h2 .anker-icon {
  color: var(--brand-light);
  margin-right: 0.4rem;
  font-size: 1.6rem;
}
.code-block {
  background: #122120;
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
  overflow-x: auto;
  position: relative;
  margin: 1.2rem 0;
  font-size: 0.84rem;
  line-height: 1.7;
  color: #e6edc5;
}
.code-block code {
  color: #e6edc5;
  font-family: "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", monospace;
  white-space: pre;
}
.note-callout {
  background: var(--brand-pale);
  border-left: 4px solid var(--brand-mid);
  border-radius: 8px;
  padding: 1rem 1.3rem;
  margin: 1.3rem 0;
  font-size: 0.95rem;
}
.note-callout strong {
  color: var(--brand-dark);
}
/* install method cards */
.install-methods {
  margin-top: 2rem;
}
.install-methods .method-num {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  background: var(--brand-mid);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 800;
  margin-right: 0.8rem;
}
.clone-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.clone-list li {
  margin-bottom: 0.9rem;
  background: #fdfdf9;
  border: 1px solid #e9eee9;
  border-radius: 12px;
  padding: 0.9rem 1rem;
  display: flex;
  gap: 0.9rem;
  transition: var(--transition-base);
}
.clone-list li:hover {
  border-color: #c8dcd6;
}
.clone-list li svg {
  margin-right: 0.5rem;
  flex-shrink: 0;
}
/* quick facts */
.stat-strip {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand-mid));
  padding: 2rem 0;
  margin: 2rem 0;
  border-radius: 20px;
}
.stat-strip .stat-item {
  text-align: center;
  border-left: 1px solid rgba(255,255,255,0.13);
  padding: 0.5rem 0.5rem;
}
.stat-strip .stat-item:first-child {
  border-left: none;
}
.stat-strip .stat-value {
  font-size: 1.7rem;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.stat-strip .stat-label {
  color: rgba(255,255,255,0.72);
  font-size: 0.85rem;
  margin-top: 0.2rem;
}
/* FAQ */
.faq-section-class {
  margin-top: 2.4rem;
}
.faq-item {
  border-bottom: 1px solid #e5e9e4;
  padding: 1.4rem 0;
}
.faq-item:last-child {
  border-bottom: none;
}
.faq-item-title {
  display: flex;
  gap: 0.8rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 0.5rem;
}
.faq-item-answer {
  color: var(--muted-text);
  font-size: 0.96rem;
  padding-left: 2rem;
}
/* sub nav / anchor buttons */
.anchor-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.6rem 0 0.5rem;
}
.anchor-pills a {
  background: #fff;
  border: 1px solid #d9e4dd;
  border-radius: 999px;
  padding: 0.4rem 1.1rem;
  font-size: 0.88rem;
  color: var(--brand-dark);
  font-weight: 600;
  transition: var(--transition-base);
}
.anchor-pills a:hover {
  background: var(--brand-light);
  border-color: var(--brand-mid);
}
/* CTA card */
.cta-card {
  border-radius: 28px;
  background: linear-gradient(135deg, var(--deep-bg), var(--brand-mid));
  color: #fff;
  padding: 3rem 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 3rem 0 0;
}
.cta-card:after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
  top: -120px;
  right: -80px;
}
.cta-card h2 {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 0.7rem;
  color: #fff;
}
.cta-card p {
  color: rgba(255,255,255,0.75);
  max-width: 640px;
  margin: 0 auto 2rem;
}
/* footer */
.site-footer {
  background: var(--deep-bg);
  color: #b3c6c2;
  padding: 4.5rem 0 0;
  margin-top: 0px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 3rem;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
  color: #fff;
}
.footer-brand:hover {
  color: #fff;
}
.footer-brand .brand-mark {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-mid));
}
.footer-brand .brand-text {
  font-size: 1.25rem;
  color: #fff;
  font-weight: 800;
}
.footer-about p {
  color: #94a8a4;
  font-size: 0.9rem;
  line-height: 1.8;
}
.footer-title {
  display: block;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
  letter-spacing: 0.02em;
}
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links li {
  margin-bottom: 0.7rem;
}
.footer-links a {
  color: #a1b6b2;
  font-size: 0.9rem;
}
.footer-links a:hover {
  color: #fff;
  padding-left: 4px;
}
.footer-domain {
  color: #6f8d8a;
  font-size: 0.8rem;
}
.footer-newsletter p {
  font-size: 0.88rem;
  color: #a1b6b2;
}
.newsletter-form {
  display: flex;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 4px 4px 4px 1rem;
  margin: 0;
  margin-top: 1rem;
  max-width: 300px;
  border: 1px solid rgba(255,255,255,0.09);
}
.newsletter-form input {
  background: transparent;
  border: none;
  color: #fff;
  flex: 1;
  font-size: 0.85rem;
  min-width: 0;
}
.newsletter-form input:focus {
  outline: none;
}
.newsletter-form button {
  background: var(--accent);
  border: none;
  border-radius: 999px;
  padding: 0.4rem 1.2rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: var(--transition-base);
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.09);
  margin-top: 4rem;
  padding: 1.7rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.footer-bottom span {
  font-size: 0.8rem;
  color: #718985;
}
@media (max-width: 992px) {
  .doc-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .toc-sticky {
    position: static;
    top: 0;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .content-main-text {
    padding: 1.4rem 1.2rem;
  }
  .cta-card {
    padding: 2rem 1.8rem;
  }
  .topbar-cta {
    display: none;
  }
  .stat-strip {
    padding: 1.6rem 0;
  }
}
@media (max-width: 768px) {
  .topbar-search {
    display: none;
  }
  .brand-text {
    font-size: 1.1rem;
  }
  .topbar-inner {
    min-height: 64px;
  }
  .anchor-pills {
    gap: 0.4rem;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  .section-anchor h2 {
    font-size: 1.4rem;
  }
}
@media (max-width: 576px) {
  .container-x {
    padding-left: 16px;
    padding-right: 16px;
  }
  .cta-card h2 {
    font-size: 1.3rem;
  }
  .brand-mark {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
  }
  .clone-list li {
    flex-wrap: wrap;
  }
}

/* roulang page: article */
:root {
            --brand-deep: #083a35;
            --brand-main: #0c544d;
            --brand-soft: #177068;
            --brand-pale: #e4efec;
            --clay: #c86235;
            --clay-deep: #ad4d22;
            --clay-pale: #f9e4d8;
            --paper: #f7f2ea;
            --card: #ffffff;
            --ink: #243a38;
            --text-light: #5f7370;
            --line: #e5dfd4;
            --darkest: #081f1c;
            --white-soft: #edf5f2;
            --radius-lg: 24px;
            --radius-md: 16px;
            --radius-sm: 10px;
            --shadow-card: 0 8px 28px rgba(8, 54, 51, 0.07);
            --shadow-hover: 0 18px 42px rgba(8, 54, 51, 0.14);
            --shadow-cta: 0 8px 20px rgba(208, 90, 45, 0.24);
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 96px;
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }
            *,
            *::before,
            *::after {
                transition: none !important;
                animation: none !important;
            }
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
            font-size: 16px;
            line-height: 1.75;
            color: var(--ink);
            background: var(--paper);
            font-variant-numeric: tabular-nums;
            -webkit-font-smoothing: antialiased;
        }

        a {
            color: var(--brand-main);
            text-decoration: none;
            transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
        }

        a:hover {
            color: var(--clay);
        }

        img {
            max-width: 100%;
            display: block;
            height: auto;
        }

        .container-x {
            max-width: 1320px;
            margin-inline: auto;
            padding-inline: clamp(1rem, 3vw, 2rem);
        }

        .container-narrow {
            max-width: 980px;
            margin-inline: auto;
        }

        .btn {
            border-radius: var(--radius-sm);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            border: 1px solid transparent;
            padding: 0.65rem 1.45rem;
            font-weight: 700;
            font-size: 0.95rem;
            line-height: 1.4;
            transition: all 0.2s ease;
        }

        .btn:focus-visible {
            outline: 3px solid rgba(12, 90, 82, 0.32);
            outline-offset: 2px;
        }

        .btn-clay {
            background: var(--clay);
            border-color: var(--clay);
            color: #fff;
            box-shadow: var(--shadow-cta);
        }

        .btn-clay:hover,
        .btn-clay:focus {
            background: var(--clay-deep);
            border-color: var(--clay-deep);
            color: #fff;
            transform: translateY(-2px);
        }

        .btn-ghost {
            background: transparent;
            border: 1px solid var(--brand-main);
            color: var(--brand-main);
        }

        .btn-ghost:hover {
            background: var(--brand-pale);
            color: var(--brand-deep);
        }

        .site-header {
            position: relative;
            z-index: 1030;
            background: #fff;
        }

        @media (min-width: 992px) {
            .site-header {
                position: sticky;
                top: 0;
                box-shadow: 0 10px 36px rgba(6, 45, 40, 0.06);
            }
        }

        .topbar-wrap {
            background: linear-gradient(135deg, #08221f 0%, #0c3632 100%);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .topbar-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1.25rem;
            min-height: 68px;
            padding-top: 0.65rem;
            padding-bottom: 0.65rem;
            flex-wrap: wrap;
        }

        .site-brand {
            display: inline-flex;
            align-items: center;
            gap: 0.7rem;
            flex-shrink: 0;
        }

        .brand-mark {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            border-radius: 12px;
            background: linear-gradient(135deg, #1b877b, #0c544d);
            color: #fff;
            font-size: 1rem;
            font-weight: 800;
            letter-spacing: 0.02em;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 14px rgba(0, 0, 0, 0.18);
        }

        .brand-name {
            font-size: 1.15rem;
            font-weight: 800;
            color: #f7f3ea;
            letter-spacing: 0.01em;
            white-space: nowrap;
        }

        .topbar-tools {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex: 1 1 auto;
            justify-content: flex-end;
            min-width: 0;
        }

        .topbar-search {
            display: flex;
            align-items: center;
            width: min(390px, 100%);
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.28);
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
        }

        .topbar-search:focus-within {
            border-color: #8fc7bc;
            box-shadow: 0 0 0 3px rgba(45, 139, 125, 0.22), 0 4px 14px rgba(0, 0, 0, 0.1);
        }

        .topbar-search input {
            flex: 1 1 auto;
            min-width: 0;
            border: 0;
            background: transparent;
            padding: 0.55rem 0.85rem;
            font-size: 0.9rem;
            color: #1f3734;
            outline: none;
        }

        .topbar-search input::placeholder {
            color: #8e9a97;
        }

        .btn-search-go {
            border: 0;
            background: transparent;
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #0b524a;
            cursor: pointer;
            transition: background 0.2s ease;
            flex-shrink: 0;
        }

        .btn-search-go:hover {
            background: #dff0eb;
            color: #0b3c37;
        }

        .btn-search-go svg {
            width: 18px;
            height: 18px;
        }

        .channel-nav {
            background: #fffdf7;
            border-bottom: 1px solid var(--line);
            position: relative;
        }

        .channel-track {
            display: flex;
            gap: 0.4rem;
            align-items: center;
            overflow-x: auto;
            scrollbar-width: thin;
            padding-top: 0.55rem;
            padding-bottom: 0.55rem;
            scroll-behavior: smooth;
        }

        .channel-track::-webkit-scrollbar {
            height: 3px;
        }

        .channel-track::-webkit-scrollbar-track {
            background: #eee7dc;
            border-radius: 20px;
        }

        .channel-track::-webkit-scrollbar-thumb {
            background: #c6bab0;
            border-radius: 20px;
        }

        .channel-item {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.52rem 1.15rem;
            border-radius: 999px;
            font-size: 0.9rem;
            font-weight: 600;
            color: #31514d;
            background: #eef0ea;
            border: 1px solid transparent;
            white-space: nowrap;
            transition: all 0.2s ease;
        }

        .channel-item:hover {
            background: #e0e9e4;
            color: #08332f;
            transform: translateY(-1px);
        }

        .channel-item:focus-visible {
            outline: 3px solid rgba(14, 94, 84, 0.26);
            outline-offset: 1px;
        }

        .channel-item.active {
            background: linear-gradient(135deg, #0f6760, #0b4e47);
            color: #fff;
            font-weight: 700;
            box-shadow: 0 6px 18px rgba(7, 89, 80, 0.18);
        }

        .site-main {
            overflow: clip;
        }

        .post-hero {
            position: relative;
            background: linear-gradient(135deg, #0b211d 0%, #083a35 55%, #0e6157 100%);
            color: #f2f0ea;
            padding: clamp(2.8rem, 7vw, 4.6rem) 0 clamp(2rem, 5vw, 3.4rem);
            overflow: hidden;
        }

        .post-hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background: url('/assets/images/backpic/back-2.png') center / cover no-repeat;
            opacity: 0.1;
            pointer-events: none;
        }

        .post-hero::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(5, 28, 25, 0.1), rgba(5, 28, 25, 0.35), rgba(5, 28, 25, 0.1));
            pointer-events: none;
        }

        .post-hero .container-x {
            position: relative;
            z-index: 2;
        }

        .breadcrumb-bar {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            font-size: 0.84rem;
            color: rgba(232, 243, 238, 0.68);
            margin-bottom: 1.4rem;
            gap: 0.35rem;
        }

        .breadcrumb-bar a {
            color: rgba(232, 243, 238, 0.9);
            font-weight: 500;
            text-decoration: none;
        }

        .breadcrumb-bar a:hover {
            color: #fff;
        }

        .breadcrumb-bar .sep {
            margin: 0 0.2rem;
            opacity: 0.55;
        }

        .post-title {
            max-width: 880px;
            font-size: clamp(1.9rem, 4.2vw, 3rem);
            font-weight: 800;
            line-height: 1.28;
            color: #fff;
            letter-spacing: 0.01em;
            margin: 0;
            text-wrap: balance;
        }

        .post-meta {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.9rem 1.3rem;
            margin-top: 1.5rem;
            color: rgba(235, 246, 241, 0.82);
            font-size: 0.88rem;
        }

        .post-meta .meta-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 999px;
            padding: 0.25rem 0.8rem;
            color: #f6f2e9;
            font-weight: 600;
        }

        .post-meta .meta-chip svg {
            width: 14px;
            height: 14px;
            opacity: 0.8;
        }

        .article-layout-section {
            padding: clamp(2.6rem, 6vw, 4.4rem) 0 clamp(2.4rem, 5vw, 3.6rem);
        }

        .article-primary {
            min-width: 0;
        }

        .article-prose-wrap {
            background: var(--card);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-card);
            padding: clamp(1.4rem, 4vw, 2.8rem);
            border: 1px solid rgba(255, 255, 255, 0.6);
        }

        .article-prose {
            font-size: 1.065rem;
            line-height: 1.95;
            color: #263b39;
            word-break: break-word;
            overflow-wrap: break-word;
        }

        .article-prose > * + * {
            margin-top: 1.25rem;
        }

        .article-prose h2 {
            font-size: clamp(1.35rem, 2.4vw, 1.8rem);
            font-weight: 800;
            line-height: 1.45;
            color: #0d3f3a;
            margin-top: 2.6rem;
            margin-bottom: 0.8rem;
            padding-bottom: 0.6rem;
            border-bottom: 1px solid #e9e1d5;
            padding-left: 0.3rem;
        }

        .article-prose h3 {
            font-size: 1.2rem;
            font-weight: 700;
            margin-top: 2rem;
            color: #123d38;
        }

        .article-prose p {
            margin: 0.2rem 0 1rem;
        }

        .article-prose ul,
        .article-prose ol {
            padding-left: 1.25rem;
            margin-bottom: 1.2rem;
        }

        .article-prose li {
            margin-bottom: 0.4rem;
        }

        .article-prose blockquote {
            position: relative;
            background: #eef5f1;
            border-left: 4px solid var(--brand-main);
            border-radius: 0 14px 14px 0;
            padding: 1rem 1.4rem;
            color: #38534f;
            margin: 1.6rem 0;
        }

        .article-prose blockquote p {
            margin: 0;
            font-style: normal;
        }

        .article-prose code {
            background: #e4eae6;
            color: #123b35;
            border-radius: 6px;
            padding: 0.18rem 0.5rem;
            font-size: 0.92em;
        }

        .article-prose pre {
            background: #0a2b27;
            color: #f0ece2;
            padding: 1.4rem 1.5rem;
            border-radius: 16px;
            overflow: auto;
            font-size: 0.92rem;
            line-height: 1.7;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .article-prose pre code {
            background: transparent;
            color: inherit;
            padding: 0;
            font-size: inherit;
        }

        .article-prose table {
            width: 100%;
            border-collapse: collapse;
            margin: 1.8rem 0;
            font-size: 0.95rem;
        }

        .article-prose thead th {
            background: #f0f0e9;
            color: #17433e;
            border-bottom: 2px solid #c9d8d2;
            padding: 0.75rem 0.9rem;
            font-weight: 700;
            text-align: left;
        }

        .article-prose tbody td {
            border-bottom: 1px solid #e3ddd1;
            padding: 0.7rem 0.9rem;
        }

        .article-prose a {
            text-decoration: underline;
            text-underline-offset: 3px;
            font-weight: 600;
        }

        .article-prose img {
            border-radius: 16px;
            height: auto;
        }

        .article-prose hr {
            opacity: 0.2;
            margin: 2.2rem 0;
        }

        .article-aside {
            min-width: 0;
        }

        .side-sticky {
            position: sticky;
            top: 98px;
        }

        .side-card {
            background: #fffdf8;
            border: 1px solid #e8e2d7;
            border-radius: 18px;
            box-shadow: 0 8px 24px rgba(8, 54, 51, 0.05);
            padding: 1.25rem 1.2rem;
            margin-bottom: 1rem;
        }

        .side-card h2 {
            font-size: 0.95rem;
            font-weight: 800;
            color: #0c443e;
            margin: 0 0 0.85rem;
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }

        .side-card h2 svg {
            width: 18px;
            height: 18px;
            color: var(--clay);
        }

        .side-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }

        .side-list li a {
            display: flex;
            align-items: flex-start;
            gap: 0.65rem;
            color: #2c4d49;
            font-size: 0.9rem;
            padding: 0.45rem 0.55rem;
            border-radius: 10px;
            transition: background 0.2s ease, color 0.2s ease;
        }

        .side-list li a:hover {
            background: #ebf2eb;
            color: #093f39;
            transform: translateX(3px);
        }

        .side-list .bullet {
            background: var(--clay);
            border-radius: 50%;
            width: 0.5rem;
            height: 0.5rem;
            flex: 0 0 auto;
            margin-top: 0.65rem;
        }

        .side-card-cmd {
            border-radius: 12px;
            background: #f4f1ea;
            border: 1px solid #e7dfd3;
            padding: 0.8rem 0.9rem;
            font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
            font-size: 0.8rem;
            color: #1e4540;
            line-height: 1.7;
            margin: 0.8rem 0 0.2rem;
        }

        .side-note {
            font-size: 0.84rem;
            color: #687975;
            line-height: 1.7;
            background: #edf6f2;
            border-radius: 12px;
            padding: 0.9rem 1rem;
            margin: 0.7rem 0 0;
        }

        .side-note strong {
            color: #0b4c44;
        }

        .related-section {
            padding: 0 0 clamp(3rem, 8vw, 6rem);
        }

        .related-heading {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .related-heading h2 {
            font-size: clamp(1.4rem, 2.6vw, 1.9rem);
            font-weight: 800;
            color: #0f403b;
            margin: 0;
        }

        .related-heading a {
            font-size: 0.9rem;
            font-weight: 600;
            white-space: nowrap;
        }

        .related-row {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.2rem;
        }

        .related-card {
            background: #fffdf8;
            border: 1px solid #ebe4d8;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow-card);
            transition: all 0.24s ease;
            height: 100%;
            display: flex;
        }

        .related-card:hover {
            box-shadow: var(--shadow-hover);
            transform: translateY(-5px);
        }

        .related-card-main {
            background: #fffdf8;
            border-radius: 16px;
        }

        .related-card-main .related-cover {
            background: #d5e4de;
            position: relative;
            min-height: 220px;
            overflow: hidden;
            border-radius: 0;
        }

        .related-card-main .related-cover img {
            width: 100%;
            height: 210px;
            object-fit: cover;
            transition: transform 0.4s ease;
        }

        .related-card:hover .related-cover img {
            transform: scale(1.04);
        }

        .related-card-main .related-body {
            padding: 1.2rem 1.3rem 1.4rem;
        }

        .related-card-main h3 {
            font-size: 1.15rem;
            font-weight: 700;
            color: #163d37;
            margin: 0 0 0.45rem;
            line-height: 1.45;
        }

        .related-card-main p {
            color: #60736f;
            font-size: 0.92rem;
            margin: 0;
            line-height: 1.7;
        }

        .related-compact {
            display: grid;
            gap: 1rem;
            grid-template-columns: repeat(2, 1fr);
        }

        .related-compact .related-card {
            border-radius: 18px;
            flex-direction: column;
        }

        .related-compact .related-cover {
            height: 130px;
            background: #dce8e2;
        }

        .related-compact .related-cover img {
            width: 100%;
            height: 130px;
            object-fit: cover;
        }

        .related-compact .related-body {
            padding: 1.1rem 1.15rem 1.25rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 0.8rem;
            flex: 1;
        }

        .related-compact h3 {
            font-size: 1.02rem;
            font-weight: 700;
            color: #173f39;
            line-height: 1.5;
            margin: 0;
        }

        .related-tag {
            align-self: flex-start;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            color: var(--clay);
            background: var(--clay-pale);
            border-radius: 999px;
            padding: 0.3rem 0.8rem;
        }

        .notfound-section {
            padding: clamp(3rem, 8vw, 6rem) 0;
            min-height: 50vh;
        }

        .notfound-card {
            max-width: 680px;
            margin: 0 auto;
            text-align: center;
            background: #fff;
            border-radius: 26px;
            padding: clamp(2rem, 5vw, 3.6rem);
            border: 1px solid #e9e0d3;
            box-shadow: var(--shadow-card);
        }

        .notfound-card .nf-mark {
            width: 68px;
            height: 68px;
            margin: 0 auto 1.2rem;
            border-radius: 18px;
            background: #f1e5d8;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--clay);
        }

        .notfound-card h1 {
            font-size: 1.5rem;
            font-weight: 800;
            color: #0e463f;
            margin: 0 0 0.8rem;
        }

        .notfound-card p {
            color: #71807c;
            font-size: 0.98rem;
            margin-bottom: 1.8rem;
        }

        .site-footer {
            background: #06211e;
            color: #b9c9c5;
            padding: 3rem 0 0;
            border-top: 1px solid rgba(255, 255, 255, 0.03);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.35fr 0.9fr 0.9fr 1.25fr;
            gap: 2.2rem;
            padding: 1.2rem 0 2.1rem;
        }

        .footer-brand {
            display: inline-flex;
            align-items: center;
            gap: 0.7rem;
            font-size: 1.1rem;
            font-weight: 800;
            color: #e9f2ed;
            margin-bottom: 0.8rem;
        }

        .footer-brand .brand-mark {
            width: 36px;
            height: 36px;
            border-radius: 10px;
        }

        .footer-brand .brand-text {
            color: #f4f1e8;
        }

        .footer-about {
            font-size: 0.9rem;
            line-height: 1.8;
            color: #aebfba;
        }

        .footer-about a {
            color: #dbe9e4;
        }

        .footer-domain {
            color: #79908b;
            font-size: 0.8rem;
            letter-spacing: 0.02em;
        }

        .footer-title {
            display: block;
            color: #e2ece7;
            font-size: 0.82rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            margin-bottom: 1rem;
            text-transform: uppercase;
        }

        .footer-links {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 0.55rem;
        }

        .footer-links a {
            color: #aebfba;
            font-size: 0.9rem;
            transition: color 0.2s ease, padding-left 0.2s ease;
            padding-left: 0;
        }

        .footer-links a:hover {
            color: #fff;
            padding-left: 4px;
        }

        .footer-newsletter p {
            color: #aebfba;
            font-size: 0.88rem;
            line-height: 1.8;
            margin: 0 0 1px;
        }

        .newsletter-form {
            display: flex;
            gap: 0.6rem;
            margin-top: 1rem;
        }

        .newsletter-form input {
            flex: 1;
            min-width: 0;
            border-radius: 10px;
            border: 1px solid #3d6861;
            background: #0a2f2b;
            color: #e9f2ee;
            padding: 0.6rem 0.8rem;
            font-size: 0.88rem;
            outline: none;
        }

        .newsletter-form input::placeholder {
            color: #8aa6a0;
        }

        .newsletter-form input:focus {
            border-color: #55a99c;
            box-shadow: 0 0 0 3px rgba(80, 177, 158, 0.22);
        }

        .newsletter-form button {
            border: 0;
            border-radius: 10px;
            background: var(--clay);
            color: #fff;
            font-weight: 700;
            padding: 0.6rem 1.15rem;
            font-size: 0.9rem;
            white-space: nowrap;
            cursor: pointer;
            box-shadow: var(--shadow-cta);
        }

        .newsletter-form button:hover {
            background: #b05429;
            transform: translateY(-1px);
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            padding: 1.2rem 0;
            display: flex;
            justify-content: space-between;
            gap: 0.5rem;
            flex-wrap: wrap;
            color: #7b938e;
            font-size: 0.8rem;
        }

        .footer-bottom span {
            display: inline-block;
        }

        @media (max-width: 991.98px) {
            .post-hero {
                padding-top: 2.2rem;
            }

            .topbar-row {
                flex-wrap: wrap;
            }

            .channel-track {
                flex-wrap: nowrap;
            }

            .footer-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .related-row {
                grid-template-columns: 1fr;
            }

            .related-compact {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 767.98px) {
            .site-header {
                position: relative;
                box-shadow: none;
            }

            .topbar-row {
                flex-wrap: nowrap;
                gap: 0.65rem;
                min-height: 62px;
            }

            .brand-name {
                font-size: 1.02rem;
            }

            .brand-mark {
                width: 36px;
                height: 36px;
                font-size: 0.9rem;
                border-radius: 10px;
            }

            .topbar-search {
                width: calc(100% - 1rem);
                position: absolute;
                left: 0.5rem;
                right: 0.5rem;
                opacity: 0;
                visibility: hidden;
                transform: translateY(-6px);
                transition: all 0.2s ease;
                pointer-events: none;
                z-index: 20;
            }
        }

        @media (max-width: 575.98px) {
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 1.6rem;
            }

            .topbar-tools .btn-navlink {
                display: none !important;
            }

            .topbar-search {
                display: none;
            }

            .article-prose-wrap {
                padding: 1.2rem;
                border-radius: 18px;
            }

            .related-compact {
                grid-template-columns: 1fr;
            }

            .post-meta {
                gap: 0.55rem 0.6rem;
            }

            .channel-nav {
                position: relative;
                z-index: 20;
                background: #fffdf7;
            }

            .channel-track {
                scroll-padding-inline: 1rem;
                padding-inline: 1rem;
            }
        }

/* roulang page: category2 */
:root {
  --ink-deep: #0B3533;
  --brand: #14554F;
  --brand-2: #18655E;
  --accent: #D96C3B;
  --accent-dark: #C95C31;
  --paper: #F6F3EC;
  --card: #FFFFFF;
  --line: #E9E2D4;
  --text: #263634;
  --muted: #6D7B77;
  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-btn: 12px;
  --shadow-card: 0 6px 24px rgba(8,54,51,.08);
  --shadow-hover: 0 16px 40px rgba(8,54,51,.16);
  --shadow-accent: 0 8px 20px rgba(210,100,55,.22);
  --font-main: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: auto;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
body.modal-open, body:has(.modal[open]) {
  padding-right: 0 !important;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
button, input, select, textarea {
  font-family: inherit;
}
.container-x {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 22px;
}
.section {
  padding: clamp(60px, 9vw, 110px) 0;
}
@media (max-width: 768px) {
  .container-x {
    padding: 0 16px;
  }
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: var(--radius-btn);
  font-weight: 700;
  line-height: 1;
  padding: .85rem 1.55rem;
  border: 0;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:focus-visible, .channel-item:focus-visible, a:focus-visible, .accordion-button:focus-visible {
  outline: 3px solid rgba(217,108,59,.45);
  outline-offset: 3px;
}
.btn-accent {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.btn-accent:hover, .btn-accent:active {
  background: var(--accent-dark);
  color: #fff;
  transform: translateY(-2px);
}
.btn-primary-deep {
  background: var(--brand-2);
  color: #fff;
}
.btn-primary-deep:hover {
  background: var(--ink-deep);
  color: #fff;
  transform: translateY(-2px);
}
.btn-ghost-light {
  border: 1px solid rgba(255,255,255,.8);
  background: transparent;
  color: #fff;
  padding: .78rem 1.4rem;
}
.btn-ghost-light:hover {
  background: rgba(255,255,255,.12);
  border-color: #fff;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 1050;
}
.site-topbar {
  background: #082624;
  color: #fff;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .75rem 22px;
}
@media (min-width: 1321px) {
  .topbar-inner {
    margin: 0 auto;
    max-width: 1320px;
    padding: .75rem 22px;
  }
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  flex-shrink: 0;
}
.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0A3F3A, #228178);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .02em;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.brand-text {
  font-size: 1.22rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: .01em;
}
.topbar-tools {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.topbar-search {
  position: relative;
}
.topbar-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #5B6E6A;
  pointer-events: none;
}
.topbar-searchInput {
  border: 0;
  border-radius: 999px;
  background: #fff;
  width: 230px;
  padding: .55rem 1rem .55rem 2.35rem;
  font-size: .9rem;
  transition: box-shadow .2s ease, width .2s ease;
}
.topbar-searchInput:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(217,108,59,.4);
}
.channel-nav {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 1040;
}
.channel-track {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: .55rem 22px;
  scrollbar-width: none;
}
.channel-track::-webkit-scrollbar {
  display: none;
}
.channel-item {
  white-space: nowrap;
  padding: .42rem 1.15rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  color: #17605A;
  background: #F0EDE5;
  border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.channel-item:hover {
  background: #E2DFD4;
  color: #0D504A;
}
.channel-item.active {
  background: linear-gradient(135deg, #0B4A44, #1A6B62);
  color: #fff;
  box-shadow: 0 6px 16px rgba(26,107,98,.2);
}
@media (max-width: 992px) {
  .topbar-searchInput {
    width: 165px;
  }
}
@media (max-width: 700px) {
  .topbar-inner {
    gap: .5rem;
  }
  .brand-text {
    font-size: 1rem;
  }
  .brand-mark {
    width: 36px;
    height: 36px;
    font-size: .9rem;
  }
  .topbar-search,
  .topbar-tools .btn {
    display: none;
  }
  .channel-track {
    padding: .45rem 16px;
  }
}
.category-hero {
  background:
    linear-gradient(135deg, rgba(5,43,40,.97), rgba(22,101,92,.91)),
    url('/assets/images/backpic/back-2.png') center / cover no-repeat;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.category-hero .row {
  padding-top: clamp(50px, 7vw, 92px);
  padding-bottom: clamp(50px, 7vw, 92px);
}
.hero-crumb {
  font-size: .88rem;
  color: rgba(255,255,255,.72);
  margin-bottom: 1.15rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.hero-crumb a {
  transition: opacity .2s;
}
.hero-crumb a:hover {
  opacity: .7;
}
.hero-crumb .sep {
  opacity: .55;
}
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .9rem;
  border-radius: 999px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.2);
  font-size: .86rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #F6D8C7;
}
.category-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 1rem;
  color: #fff;
}
.hero-lead {
  font-size: 1.06rem;
  line-height: 1.8;
  color: rgba(255,255,255,.88);
  max-width: 640px;
  margin-bottom: 1.8rem;
}
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .8rem;
}
.hero-notes {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
  font-size: .85rem;
  color: rgba(255,255,255,.72);
}
.hero-notes span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.hero-notes svg {
  opacity: .75;
}
.ticket-card {
  background: #FCF9F3;
  color: #0D504A;
  border-radius: 26px;
  padding: 1.7rem 1.8rem 1.5rem;
  box-shadow: 0 24px 70px rgba(0,0,0,.26);
  position: relative;
  max-width: 520px;
  margin-left: auto;
}
.ticket-card::before,
.ticket-card::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0E4C43;
  top: 46%;
}
.ticket-card::before {
  left: -10px;
}
.ticket-card::after {
  right: -10px;
}
.ticket-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.ticket-title {
  font-weight: 800;
  font-size: 1.08rem;
  color: #0C4A43;
}
.ticket-type {
  background: #F2E6D6;
  color: #B25C2E;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  padding: .15rem .65rem;
  letter-spacing: .03em;
}
.ticket-list {
  list-style: none;
  margin: 1.2rem 0 1.1rem;
  padding: 1.2rem 0;
  border-top: 2px dashed #DED2BE;
  border-bottom: 2px dashed #DED2BE;
}
.ticket-list li {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-weight: 700;
  font-size: .97rem;
  padding: .42rem 0;
  color: #244F49;
}
.ticket-list svg {
  flex-shrink: 0;
}
.ticket-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  font-size: .82rem;
  color: #7B847B;
}
.eyebrow {
  display: inline-block;
  font-size: .86rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: .04em;
  margin-bottom: .45rem;
}
.section-head {
  margin-bottom: 2.6rem;
}
.section-head h2 {
  font-size: clamp(1.55rem, 2.7vw, 2.25rem);
  font-weight: 800;
  line-height: 1.3;
  color: #0B3F3B;
  margin: 0;
}
.section-head p {
  color: var(--muted);
  margin: .7rem 0 0;
  max-width: 760px;
}
.section-head.text-center {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.deploy-sequence {
  background: var(--paper);
  scroll-margin-top: 170px;
}
.step-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  position: relative;
  max-width: 980px;
}
.step-list::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 20px;
  bottom: 20px;
  width: 3px;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(20,85,79,.30), rgba(217,108,59,.28));
}
.step-item {
  position: relative;
  padding-left: 86px;
  margin-bottom: 30px;
}
.step-item:last-child {
  margin-bottom: 0;
}
.step-badge {
  position: absolute;
  left: 0;
  top: 6px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(20,85,79,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--brand-2);
  font-size: 1.2rem;
  box-shadow: 0 6px 16px rgba(8,54,51,.1);
  z-index: 1;
}
.step-panel {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 26px 30px;
  border: 1px solid rgba(233,226,212,.8);
  box-shadow: var(--shadow-card);
  transition: box-shadow .25s ease, transform .25s ease;
}
.step-panel:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
.step-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
}
.step-title-row h3 {
  font-size: 1.22rem;
  font-weight: 800;
  color: #0A3F3B;
  margin: 0;
}
.step-tag {
  background: #F4E6D8;
  color: #A65324;
  padding: .18rem .7rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}
.step-panel > p {
  margin: .65rem 0 1rem;
  color: var(--muted);
}
.code-block {
  background: #0B2A28;
  border-radius: 16px;
  padding: 18px 20px;
  margin: 1rem 0;
  overflow-x: auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.code-block pre {
  margin: 0;
  color: #EEE9DB;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: .9rem;
  line-height: 1.75;
  white-space: pre;
}
.code-block code {
  font-family: inherit;
  color: inherit;
}
.note-line {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  background: #FAEFE3;
  border: 1px solid #F1D8C0;
  border-radius: 14px;
  padding: .8rem 1rem;
  color: #754B2B;
  font-size: .89rem;
  line-height: 1.7;
}
.note-line svg {
  flex-shrink: 0;
  margin-top: .1rem;
}
.metric-ribbon {
  background: #0A2826;
  color: #fff;
  padding: clamp(50px, 7vw, 84px) 0;
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.metric-cell {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 22px;
  text-align: center;
  padding: 2rem 1rem 1.6rem;
}
.metric-num {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 800;
  color: #F1A268;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.metric-key {
  margin-top: .7rem;
  font-size: .93rem;
  color: rgba(255,255,255,.82);
  font-weight: 600;
}
@media (max-width: 991px) {
  .step-list {
    max-width: 100%;
  }
  .metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ticket-card {
    margin: 0 auto;
  }
}
@media (max-width: 560px) {
  .step-list::before {
    left: 20px;
  }
  .step-list {
    padding-left: 0;
  }
  .step-item {
    padding-left: 62px;
  }
  .step-badge {
    width: 44px;
    height: 44px;
    font-size: 1rem;
    left: 0;
  }
  .step-panel {
    padding: 20px 18px;
    border-radius: 20px;
  }
  .metric-grid {
    grid-template-columns: 1fr;
  }
}
.guard-block {
  background: #FDFBF5;
}
.guard-wrap {
  max-width: 1080px;
  margin: 0 auto;
}
.guard-card {
  background: #fff;
  border-radius: 24px;
  padding: 1.8rem 1.9rem;
  box-shadow: var(--shadow-card);
  border-top: 4px solid var(--accent);
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease;
}
.guard-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
.guard-card h3 {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 800;
  font-size: 1.1rem;
  color: #0A3F3B;
  margin-bottom: .5rem;
}
.guard-card h3 svg {
  flex-shrink: 0;
}
.guard-card > p {
  color: var(--muted);
  margin-bottom: .9rem;
}
.guard-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.guard-card li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .35rem 0;
  font-size: .95rem;
  color: #334B47;
}
.guard-card li svg {
  flex-shrink: 0;
  margin-top: .62rem;
}
.faq-panel {
  background: var(--paper);
  scroll-margin-top: 170px;
}
.faq-panel .faq-wrap {
  max-width: 880px;
  margin: 0 auto;
}
.faq-panel .section-head {
  text-align: center;
}
.faq-panel .section-head p {
  margin-left: auto;
  margin-right: auto;
}
.accordion--plain .accordion-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #E0D9C8;
}
.accordion--plain .accordion-button {
  background: transparent;
  color: #0A3F3B;
  font-weight: 800;
  font-size: 1.06rem;
  padding: 1.25rem .2rem;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  gap: .8rem;
}
.accordion--plain .accordion-button:not(.collapsed) {
  color: #0A3F3B;
  background: transparent;
  box-shadow: none;
}
.accordion--plain .accordion-button::after {
  content: "+";
  background-image: none;
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  background: #EFE8D9;
  color: #14554F;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1;
  margin-left: auto;
  transform: none;
  transition: transform .25s ease, background .25s ease;
}
.accordion--plain .accordion-button:not(.collapsed)::after {
  content: "+";
  background-image: none;
  transform: rotate(45deg);
  background: #0C4A44;
  color: #fff;
}
.accordion--plain .accordion-body {
  padding: 0 .2rem 1.5rem;
  color: #52706A;
  font-size: 1rem;
  line-height: 1.9;
}
.accordion--plain .accordion-body p:last-child {
  margin-bottom: 0;
}
.cta-section {
  background: #0F403B;
}
.cta-card {
  border-radius: 32px;
  background: linear-gradient(135deg, #0B3B38, #1F6F64);
  padding: clamp(2rem, 5vw, 3.8rem);
  color: #fff;
  overflow: hidden;
  position: relative;
}
.cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 82% 18%, rgba(255,255,255,.12), transparent 32%);
  pointer-events: none;
}
.cta-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2.5rem;
  align-items: center;
  position: relative;
}
.cta-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  margin: 0 0 .8rem;
  line-height: 1.3;
}
.cta-head p {
  color: rgba(255,255,255,.85);
  max-width: 580px;
  margin-bottom: 1.5rem;
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
}
.cta-visual {
  border-radius: 24px;
  overflow: hidden;
  background: #F6F1E7;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.cta-visual img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
@media (max-width: 991px) {
  .cta-grid {
    grid-template-columns: 1fr;
  }
  .cta-visual {
    max-width: 560px;
  }
}
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .category-hero .col-lg-7,
  .category-hero .col-lg-5 {
    animation: fade-up .5s ease both;
  }
  .category-hero .col-lg-5 {
    animation-delay: .08s;
  }
}
.site-footer {
  background: #08211F;
  color: #C9D3CD;
}
.site-footer .container-x {
  padding-top: 56px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.6fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1rem;
}
.footer-brand .brand-mark {
  background: linear-gradient(135deg, #1B6A61, #2E9487);
}
.footer-brand .brand-text {
  font-size: 1.12rem;
}
.footer-title {
  display: block;
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 1rem;
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li + li {
  margin-top: .5rem;
}
.footer-links a {
  color: #AEBEB5;
  font-size: .92rem;
  transition: color .2s ease;
}
.footer-links a:hover {
  color: #fff;
}
.footer-about p {
  font-size: .92rem;
  color: #AEBEB5;
  line-height: 1.8;
}
.footer-domain {
  letter-spacing: .04em;
}
.newsletter-form {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: #fff;
  border-radius: 14px;
  padding: .32rem;
  margin-top: .6rem;
}
.newsletter-form input {
  border: 0;
  background: transparent;
  flex: 1;
  min-width: 0;
  padding: .45rem .55rem;
  font-size: .9rem;
  color: #263634;
  outline: none;
}
.newsletter-form input:focus {
  box-shadow: inset 0 0 0 2px rgba(26,107,98,.5);
  border-radius: 10px;
}
.newsletter-form button {
  background: var(--accent);
  border: 0;
  color: #fff;
  border-radius: 10px;
  padding: .55rem 1rem;
  font-weight: 700;
  transition: background .2s ease;
  cursor: pointer;
}
.newsletter-form button:hover {
  background: var(--accent-dark);
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 1.35rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  font-size: .84rem;
  color: #8CA29A;
}
@media (max-width: 1199px) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
  .footer-newsletter {
    grid-column: 1 / -1;
  }
}
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .footer-newsletter {
    grid-column: auto;
  }
}
@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* roulang page: category3 */
:root {
    --deep: #082F2C;
    --deep-2: #0C4440;
    --teal: #0E5550;
    --teal-bright: #1B6F66;
    --paper: #F7F3EB;
    --paper-deep: #EFE8DB;
    --white: #FFFFFF;
    --ink: #203231;
    --muted: #687874;
    --terracotta: #C96F45;
    --terracotta-dark: #AE5735;
    --amber: #D8C29A;
    --sage: #E3EBE4;
    --border: #DEE2DB;
    --card-border: #E7E3DA;
    --shadow: 0 6px 24px rgba(8, 54, 51, 0.08);
    --shadow-lg: 0 16px 40px rgba(8, 54, 51, 0.16);
    --radius-xl: 26px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  }

  html {
    scroll-behavior: smooth;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--paper);
    color: var(--ink);
    line-height: 1.8;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  a {
    color: var(--teal);
    text-decoration: none;
  }

  a:hover {
    color: var(--deep);
  }

  .container-x {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: 24px;
  }

  .text-muted {
    color: var(--muted) !important;
  }

  .section-space {
    padding-block: clamp(3.2rem, 7vw, 5.5rem);
  }

  .section-head {
    max-width: 860px;
    margin-bottom: clamp(2rem, 4vw, 3.4rem);
  }

  .section-head .eyebrow {
    margin-bottom: .8rem;
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--terracotta-dark);
    text-transform: none;
  }

  .eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--terracotta);
    display: inline-block;
  }

  .section-head h2,
  .section-title {
    font-size: clamp(1.55rem, 2.7vw, 2.25rem);
    font-weight: 800;
    line-height: 1.3;
    color: var(--deep);
    letter-spacing: -.02em;
    margin: 0 0 .8rem;
  }

  .section-head p {
    font-size: 1rem;
    color: var(--muted);
    max-width: 760px;
    margin: 0;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .68rem 1.2rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: .94rem;
    border: 1px solid transparent;
    transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
  }

  .btn:hover,
  .btn:focus {
    transform: translateY(-1px);
    color: inherit;
  }

  .btn:focus-visible,
  .form-control:focus-visible,
  .form-select:focus-visible,
  .site-search input:focus-visible,
  .newsletter-form input:focus-visible {
    outline: 3px solid rgba(27, 111, 102, .25);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(27, 111, 102, .18) !important;
  }

  .btn-terracotta {
    background: var(--terracotta);
    border-color: var(--terracotta);
    color: #fff;
    box-shadow: 0 8px 20px rgba(201, 111, 69, .22);
  }

  .btn-terracotta:hover,
  .btn-terracotta:active {
    background: var(--terracotta-dark);
    border-color: var(--terracotta-dark);
    color: #fff;
    box-shadow: 0 10px 24px rgba(174, 87, 53, .28);
  }

  .btn-deep {
    background: linear-gradient(135deg, var(--deep), var(--teal));
    border-color: transparent;
    color: #fff;
  }

  .btn-deep:hover,
  .btn-deep:active {
    background: linear-gradient(135deg, var(--deep-2), var(--teal-bright));
    border-color: transparent;
    color: #fff;
    box-shadow: var(--shadow-lg);
  }

  .btn-outline-paper {
    background: transparent;
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
  }

  .btn-outline-paper:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border-color: #fff;
  }

  .btn-ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .6);
    color: #fff;
  }

  .btn-ghost:hover {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    border-color: #fff;
  }

  .btn-ghost-deep {
    background: transparent;
    border-color: var(--teal);
    color: var(--teal);
  }

  .btn-ghost-deep:hover {
    background: var(--sage);
    color: var(--deep);
    border-color: var(--teal);
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
  }

  .site-topbar {
    background: var(--deep);
    background-image: radial-gradient(circle at 90% 10%, rgba(216, 194, 154, .14), transparent 28%);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }

  .topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    min-height: 74px;
    padding-block: .8rem;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: .78rem;
    color: #fff;
    flex-shrink: 0;
  }

  .brand:hover {
    color: #fff;
  }

  .brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: linear-gradient(135deg, #B86035, var(--terracotta));
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -.02em;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
  }

  .brand-text {
    font-size: 1.2rem;
    font-weight: 800;
    color: #FFF7EC;
    letter-spacing: -.01em;
    white-space: nowrap;
  }

  .topbar-actions {
    display: flex;
    align-items: center;
    gap: .9rem;
    flex: 1;
    justify-content: flex-end;
  }

  .site-search {
    display: flex;
    align-items: center;
    width: min(32vw, 300px);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    overflow: hidden;
  }

  .site-search svg {
    flex: 0 0 auto;
    margin-left: .85rem;
    color: #CBDCD4;
  }

  .site-search input {
    min-width: 0;
    flex: 1;
    background: transparent;
    border: 0;
    color: #F7F0E5;
    font-size: .9rem;
    padding: .55rem .75rem;
    outline: none;
  }

  .site-search input::placeholder {
    color: #AEB9B4;
  }

  .site-search button {
    border: 0;
    background: var(--teal);
    color: #fff;
    font-size: .86rem;
    font-weight: 700;
    padding: .58rem 1rem;
    cursor: pointer;
    transition: background .2s ease;
  }

  .site-search button:hover,
  .site-search button:focus-visible {
    background: var(--teal-bright);
    color: #fff;
  }

  .topbar-cta {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .channel-nav {
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--border);
  }

  .channel-track {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding-block: .8rem;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--sage) transparent;
  }

  .channel-track::-webkit-scrollbar {
    height: 5px;
  }

  .channel-track::-webkit-scrollbar-thumb {
    background: var(--sage);
    border-radius: 20px;
  }

  .channel-item {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
    padding: .48rem 1.08rem;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--teal);
    background: transparent;
    transition: background .2s ease, color .2s ease, transform .2s ease;
  }

  .channel-item:hover {
    color: var(--deep);
    background: var(--sage);
  }

  .channel-item.active {
    color: #fff;
    background: linear-gradient(135deg, var(--deep), var(--teal));
    box-shadow: 0 5px 14px rgba(8, 54, 51, .16);
  }

  .channel-item.active:hover {
    color: #fff;
  }

  .breadcrumb-wrap {
    background: var(--paper-deep);
    border-bottom: 1px solid var(--border);
    padding-block: .7rem;
  }

  .breadcrumb-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    margin: 0;
    padding: 0;
    font-size: .84rem;
    color: var(--muted);
  }

  .breadcrumb-list li {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
  }

  .breadcrumb-list li + li::before {
    content: "/";
    color: #A9B7B1;
    font-weight: 400;
  }

  .breadcrumb-list a {
    color: var(--muted);
  }

  .breadcrumb-list a:hover {
    color: var(--teal);
  }

  .cat3-hero {
    position: relative;
    background-color: var(--deep);
    background-image: linear-gradient(180deg, rgba(8, 47, 44, .96), rgba(12, 68, 64, .9)), url("/assets/images/backpic/back-1.webp");
    background-size: cover;
    background-position: center 70%;
    color: #fff;
    padding-block: clamp(3rem, 6vw, 5.2rem);
    overflow: hidden;
  }

  .cat3-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(216, 194, 154, .55), transparent);
  }

  .cat3-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    position: relative;
    z-index: 1;
  }

  .hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .82rem;
    font-weight: 700;
    color: #EACEB2;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    padding: .35rem .9rem;
    margin-bottom: 1.4rem;
  }

  .cat3-hero h1 {
    font-size: clamp(2.2rem, 4.8vw, 3.5rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.025em;
    color: #FFF7EB;
    margin: 0 0 1.1rem;
    max-width: 9em;
  }

  .cat3-hero .hero-lead {
    font-size: 1.05rem;
    line-height: 1.85;
    color: #C7D3CB;
    max-width: 580px;
    margin: 0 0 1.8rem;
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-bottom: 2rem;
  }

  .hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.2rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
    padding-top: 1.2rem;
  }

  .hero-stat {
    display: flex;
    flex-direction: column;
  }

  .hero-stat strong {
    font-size: 1.55rem;
    font-weight: 800;
    color: #F6D9B1;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }

  .hero-stat span {
    font-size: .78rem;
    color: #B5C8BE;
  }

  .logboard {
    background: rgba(255, 253, 248, .97);
    color: var(--ink);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: 0 18px 44px rgba(0, 28, 25, .35);
  }

  .logboard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--card-border);
  }

  .logboard-title {
    font-weight: 800;
    color: var(--deep);
    font-size: .95rem;
  }

  .logboard-tag {
    font-size: .72rem;
    color: var(--terracotta-dark);
    background: #F7E3D7;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-weight: 700;
  }

  .logboard-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .62rem;
  }

  .logboard-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: var(--paper);
    border-radius: 12px;
    padding: .52rem .7rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    color: #314544;
    border: 1px solid var(--border);
    overflow-wrap: anywhere;
  }

  .log-level {
    flex: 0 0 auto;
    font-size: .64rem;
    font-weight: 800;
    padding: .12rem .5rem;
    border-radius: 999px;
    color: #fff;
  }

  .log-level.warn {
    background: #B87444;
  }

  .log-level.err {
    background: #B65348;
  }

  .log-level.info {
    background: var(--teal);
  }

  .qa-compare-section {
    background: var(--paper);
  }

  .section-head-inline {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
  }

  .section-head-inline .section-head {
    margin-bottom: 0;
  }

  .qa-list {
    display: flex;
    flex-direction: column;
    gap: clamp(1.2rem, 2.5vw, 2rem);
    margin-top: 2.6rem;
  }

  .qa-row {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
    position: relative;
  }

  .qa-row:hover {
    box-shadow: var(--shadow-lg);
    border-color: #D4DDD5;
    transform: translateY(-2px);
  }

  .qa-q {
    background: linear-gradient(145deg, #103F3B, #15594F);
    color: #F2EADB;
    padding: clamp(1.5rem, 2.4vw, 2.1rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.2rem;
    min-height: 100%;
  }

  .qa-q-mark {
    font-family: var(--font-mono);
    font-size: .8rem;
    color: #D9C29A;
    border: 1px solid rgba(216, 194, 154, .35);
    border-radius: 999px;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .14);
    font-weight: 800;
    margin-bottom: 1.4rem;
  }

  .qa-q h3 {
    font-size: 1.12rem;
    line-height: 1.65;
    font-weight: 800;
    color: #F4ECDF;
    margin: 0;
  }

  .qa-a {
    padding: clamp(1.5rem, 2.8vw, 2.3rem);
    background: #FFFDF9;
  }

  .qa-a > p {
    margin: 0 0 1rem;
    font-size: .95rem;
    line-height: 1.85;
    color: #314441;
  }

  .code-block {
    display: block;
    background: #0B2623;
    border: 1px solid #194B42;
    border-radius: var(--radius-md);
    padding: 1rem 1.2rem;
    margin: 1rem 0 1.1rem;
    overflow-x: auto;
    color: #E6DFD0;
    font-family: var(--font-mono);
    font-size: .79rem;
    line-height: 1.7;
  }

  .code-block code {
    font-family: var(--font-mono);
    color: inherit;
    background: transparent;
    padding: 0;
    white-space: pre;
  }

  .inline-code {
    background: #F0E8DB;
    color: var(--terracotta-dark);
    border: 1px solid #EBDCCD;
    border-radius: 7px;
    padding: .08rem .4rem;
    font-family: var(--font-mono);
    font-size: .84em;
  }

  .qa-note {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    background: #F7EFE4;
    border-left: 3px solid var(--terracotta);
    color: #564942;
    border-radius: 10px;
    padding: .8rem 1rem;
    font-size: .87rem;
    line-height: 1.7;
    margin-top: .9rem;
  }

  .qa-note svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    fill: var(--terracotta);
    margin-top: .2rem;
  }

  .qa-note code {
    color: #7C3F27;
    background: #E9DECF;
    border-radius: 5px;
    padding: .05rem .3rem;
    font-size: .82em;
  }

  .check-strip {
    background: #E5EEE7;
    border-top: 1px solid #D4E0D5;
    border-bottom: 1px solid #D4E0D5;
  }

  .check-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    counter-reset: check;
    padding-block: 2.4rem;
  }

  .check-item {
    position: relative;
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 1.35rem 1.3rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--card-border);
    transition: transform .25s ease, box-shadow .25s ease;
  }

  .check-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
  }

  .check-item strong {
    display: block;
    font-size: .86rem;
    color: var(--deep);
    margin-bottom: .45rem;
  }

  .check-item code {
    font-family: var(--font-mono);
    font-size: .78rem;
    color: #305B50;
    display: block;
    background: transparent;
    padding: 0;
  }

  .check-count {
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 800;
    color: var(--terracotta);
    margin-bottom: .3rem;
    display: inline-flex;
  }

  .check-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--teal), var(--terracotta));
    border-radius: 99px 0 0 99px;
    opacity: 0;
    transition: opacity .25s ease;
  }

  .check-item:hover::after {
    opacity: 1;
  }

  .cheat-section {
    background: var(--deep);
    background-image: radial-gradient(circle at 8% 10%, rgba(27, 111, 102, .55), transparent 32%), radial-gradient(circle at 94% 88%, rgba(201, 111, 69, .2), transparent 32%);
    color: #E7EEE7;
  }

  .cheat-section .section-head h2 {
    color: #F7EEDF;
  }

  .cheat-section .section-head p {
    color: #AFC4BA;
  }

  .cheat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
  }

  .terminal-card {
    background: #0C2623;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .24);
  }

  .terminal-bar {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255, 255, 255, .045);
    padding: .7rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }

  .terminal-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
  }

  .terminal-dot.red {
    background: #BB6B4C;
  }

  .terminal-dot.yellow {
    background: #C6A45C;
  }

  .terminal-dot.green {
    background: var(--teal-bright);
  }

  .terminal-title {
    margin-left: .5rem;
    font-size: .7rem;
    color: #91A89D;
    font-family: var(--font-mono);
  }

  .terminal-body {
    padding: 1.1rem 1.1rem 1.3rem;
    overflow-x: auto;
  }

  .terminal-body pre {
    margin: 0;
    color: #E3DAC7;
    font-family: var(--font-mono);
    font-size: .76rem;
    line-height: 1.75;
    white-space: pre-wrap;
    word-break: break-all;
  }

  .manual-cta-section {
    background: var(--paper);
  }

  .manual-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    align-items: center;
    gap: 2.4rem;
    background: linear-gradient(135deg, var(--deep), var(--teal));
    border-radius: 30px;
    padding: clamp(2rem, 5vw, 3.8rem);
    color: #fff;
    box-shadow: 0 22px 56px rgba(8, 47, 44, .35);
    overflow: hidden;
    position: relative;
  }

  .manual-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 3% 85%, rgba(216, 194, 154, .16), transparent 25%), url("/assets/images/coverpic/cover-8.webp");
    background-size: cover;
    background-position: center;
    opacity: .08;
  }

  .manual-cta-body,
  .manual-cta-img {
    position: relative;
    z-index: 1;
  }

  .manual-cta-body .eyebrow {
    color: #E9C9A6;
  }

  .manual-cta-body .eyebrow::before {
    background: #E9C9A6;
  }

  .manual-cta h2 {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 800;
    line-height: 1.3;
    color: #FFF4E6;
    margin: .4rem 0 1rem;
  }

  .manual-cta p {
    color: #C6D6CD;
    max-width: 660px;
    margin-bottom: 1.6rem;
    line-height: 1.85;
  }

  .manual-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
  }

  .manual-cta-img {
    text-align: right;
  }

  .manual-cta-img img {
    width: 100%;
    max-width: 280px;
    height: auto;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
    background: #17372F;
    object-fit: cover;
    aspect-ratio: 16 / 10;
  }

  .faq-expand-section {
    background: var(--paper-deep);
  }

  .faq-expand-wrap {
    max-width: 960px;
    margin-inline: auto;
  }

  .faq-accordion {
    border-top: 1px solid var(--border);
  }

  .accordion-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }

  .accordion-button {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--deep);
    font-weight: 800;
    font-size: .98rem;
    padding: 1.2rem .4rem;
    text-align: left;
    border-radius: 0;
    position: relative;
  }

  .accordion-button:hover {
    color: var(--teal);
    background: transparent;
  }

  .accordion-button:not(.collapsed) {
    background: transparent;
    color: var(--deep);
    box-shadow: none;
  }

  .accordion-button:focus,
  .accordion-button:focus-visible {
    border: 0;
    box-shadow: none;
    outline: 3px solid rgba(27, 111, 102, .14);
    background: transparent;
  }

  .accordion-button::after {
    content: "+";
    background-image: none;
    width: 24px;
    height: 24px;
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--terracotta);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: rotate(0deg);
    transition: transform .22s ease;
    line-height: 1;
    font-family: var(--font-sans);
  }

  .accordion-button:not(.collapsed)::after {
    transform: rotate(45deg);
    background-image: none;
    color: var(--teal);
  }

  .accordion-body {
    padding: 0 .4rem 1.4rem;
    color: #435350;
    font-size: .92rem;
    line-height: 1.9;
  }

  .accordion-body code {
    background: #E8E1D4;
    color: #6D442C;
    border-radius: 6px;
    padding: .08rem .35rem;
    font-family: var(--font-mono);
    font-size: .84em;
  }

  .faq-more {
    margin-top: 2.2rem;
    text-align: center;
    font-size: .92rem;
  }

  .faq-more a {
    color: var(--teal);
    font-weight: 700;
    border-bottom: 1px solid rgba(14, 85, 80, .35);
  }

  .faq-more a:hover {
    color: var(--terracotta);
    border-bottom-color: var(--terracotta);
  }

  .site-footer {
    background: #0B2E2B;
    background-image: radial-gradient(circle at 10% 15%, rgba(27, 111, 102, .24), transparent 30%);
    color: #C6D5CE;
    padding-top: 4.2rem;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.4fr;
    gap: 2.4rem;
    padding-bottom: 2.8rem;
  }

  .footer-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: #fff;
    font-size: 1.08rem;
    font-weight: 800;
    margin-bottom: .9rem;
  }

  .footer-brand:hover {
    color: #fff;
  }

  .footer-brand .brand-mark {
    width: 34px;
    height: 34px;
    font-size: .9rem;
    border-radius: 10px;
  }

  .footer-about p {
    font-size: .86rem;
    line-height: 1.8;
    color: #AABEB5;
  }

  .footer-title {
    display: inline-block;
    color: #F0E6D5;
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .06em;
    margin-bottom: 1.1rem;
  }

  .footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
  }

  .footer-links a {
    color: #A4B8AF;
    font-size: .86rem;
  }

  .footer-links a:hover {
    color: #F0D1AD;
  }

  .footer-newsletter p {
    font-size: .85rem;
    color: #A2B7AD;
    line-height: 1.7;
    margin-bottom: 1rem;
  }

  .newsletter-form {
    display: flex;
    width: 100%;
    max-width: 360px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    overflow: hidden;
  }

  .newsletter-form input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: #F0EDE2;
    font-size: .9rem;
    padding: .68rem .9rem;
  }

  .newsletter-form input::placeholder {
    color: #81968C;
  }

  .newsletter-form button {
    border: 0;
    background: var(--terracotta);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    padding: .68rem 1rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s ease;
  }

  .newsletter-form button:hover,
  .newsletter-form button:focus-visible {
    background: var(--terracotta-dark);
    color: #fff;
  }

  .site-footer .footer-domain {
    font-family: var(--font-mono);
    color: #768F84;
  }

  .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-block: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    color: #89A095;
    font-size: .78rem;
  }

  .section-bottom-gap {
    padding-bottom: clamp(3rem, 6vw, 5rem);
  }

  @media (max-width: 991.98px) {
    .cat3-hero-grid {
      grid-template-columns: 1fr;
    }

    .logboard {
      max-width: 560px;
    }

    .format-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .qa-row {
      grid-template-columns: 1fr;
    }

    .qa-q {
      min-height: 0;
    }

    .qa-q-mark {
      margin-bottom: .8rem;
    }

    .check-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .cheat-grid {
      grid-template-columns: 1fr;
    }

    .manual-cta {
      grid-template-columns: 1fr;
    }

    .manual-cta-img {
      text-align: left;
      padding-top: 0;
    }

    .footer-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (max-width: 767.98px) {
    .site-header {
      position: relative;
    }

    .channel-nav {
      position: sticky;
      top: 0;
      z-index: 1030;
      background: #fff;
    }

    .section-space {
      padding-block: 3rem;
    }

    .topbar-inner {
      flex-wrap: wrap;
      gap: .8rem;
      padding-block: .7rem;
    }

    .brand-text {
      font-size: 1.05rem;
    }

    .topbar-actions {
      width: 100%;
      flex-wrap: nowrap;
      gap: .6rem;
    }

    .site-search {
      width: 100%;
      flex: 1;
    }

    .topbar-cta {
      display: none;
    }

    .container-x {
      padding-inline: 18px;
    }

    .cat3-hero {
      padding-top: 2.8rem;
    }

    .cat3-hero h1 {
      font-size: clamp(1.8rem, 8vw, 2.5rem);
    }

    .hero-actions {
      flex-direction: column;
      align-items: stretch;
    }

    .hero-actions .btn {
      width: 100%;
    }

    .hero-stats {
      gap: 1rem 1.4rem;
    }

    .format-grid {
      grid-template-columns: 1fr;
    }

    .check-grid {
      grid-template-columns: 1fr;
    }

    .manual-cta {
      padding: 2rem 1.3rem;
      border-radius: 22px;
    }

    .manual-cta-actions .btn {
      width: 100%;
    }

    .footer-grid {
      padding-top: 2.4rem;
      grid-template-columns: 1fr;
      padding-bottom: 1.4rem;
      gap: 1.8rem;
    }

    .footer-bottom {
      justify-content: center;
      text-align: center;
    }
  }

  @media (max-width: 480px) {
    .site-search button {
      padding-inline: .8rem;
    }

    .topbar-actions {
      justify-content: stretch;
    }

    .logboard {
      padding: 1.2rem;
    }

    .qa-a {
      padding: 1.3rem 1rem;
    }

    .qa-q {
      padding: 1.3rem 1rem;
    }

    .channel-item {
      font-size: .84rem;
      padding: .42rem .85rem;
    }

    .check-item {
      padding: 1.1rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      transition-duration: .01ms !important;
      animation-duration: .01ms !important;
    }
  }