/* roulang page: index */
:root{
  --bg:#0F1115;
  --bg-2:#151922;
  --card:#1B2029;
  --card-2:#202634;
  --line:#2A3140;
  --line-soft:#333b4d;
  --primary:#8E1E2F;
  --primary-2:#A12535;
  --primary-soft:rgba(142,30,47,.14);
  --accent:#D2A25A;
  --accent-soft:rgba(210,162,90,.14);
  --text:#F2F4F7;
  --muted:#B3BAC6;
  --weak:#7F8794;
  --shadow:0 18px 40px rgba(0,0,0,.28);
  --shadow-soft:0 12px 28px rgba(0,0,0,.18);
  --r-lg:18px;
  --r-md:14px;
  --r-sm:12px;
  --gap:24px;
  --container:1280px;
  --header-h:82px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(142,30,47,.20), transparent 55%),
    radial-gradient(900px 500px at 95% 0%, rgba(210,162,90,.10), transparent 50%),
    linear-gradient(180deg, #0F1115 0%, #11151C 100%);
  font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
  line-height:1.7;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit}
button{border:0;background:none;color:inherit;cursor:pointer}
::selection{background:rgba(210,162,90,.28);color:#fff}

.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  left:16px;top:16px;width:auto;height:auto;z-index:1000;
  padding:10px 14px;border-radius:999px;background:var(--primary);color:#fff;
}

.container{
  width:min(var(--container), calc(100% - 32px));
  margin:0 auto;
}

.section{
  padding:72px 0;
  position:relative;
}

.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:24px;
}

.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--accent);
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:8px;
}

.section-kicker::before{
  content:"";
  width:18px;height:2px;border-radius:999px;background:var(--accent);
  box-shadow:0 0 0 4px rgba(210,162,90,.08);
}

.section-title{
  margin:0;
  font-size:clamp(24px, 2.4vw, 38px);
  line-height:1.18;
  letter-spacing:-.02em;
}

.section-desc{
  margin:10px 0 0;
  color:var(--muted);
  max-width:68ch;
}

.site-header{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(15,17,21,.72);
  border-bottom:1px solid rgba(255,255,255,0);
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
  backdrop-filter:blur(0);
}
.site-header.is-scrolled{
  background:rgba(15,17,21,.94);
  border-bottom-color:rgba(255,255,255,.06);
  box-shadow:0 10px 26px rgba(0,0,0,.18);
  backdrop-filter:blur(8px);
}

.header-inner{
  min-height:var(--header-h);
  display:flex;
  align-items:center;
  gap:18px;
  padding:12px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:max-content;
  letter-spacing:.02em;
}
.brand-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 14px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(142,30,47,.24), rgba(142,30,47,.14));
  color:#fff;
  border:1px solid rgba(210,162,90,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  font-weight:800;
  font-size:16px;
}
.brand-state{
  color:var(--muted);
  font-size:13px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.header-tools{
  display:flex;
  align-items:center;
  gap:14px;
  margin-left:auto;
}

.site-nav{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.nav-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:42px;
  padding:0 14px;
  border-radius:999px;
  color:var(--muted);
  border:1px solid transparent;
  transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.nav-link:hover,
.nav-link:focus-visible{
  color:var(--text);
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.08);
  transform:translateY(-1px);
}
.nav-link.active{
  color:#fff;
  background:linear-gradient(180deg, rgba(142,30,47,.28), rgba(142,30,47,.18));
  border-color:rgba(142,30,47,.35);
  box-shadow:0 8px 20px rgba(142,30,47,.14);
}

.site-search{
  display:flex;
  align-items:center;
  gap:0;
  min-width:320px;
  max-width:380px;
  width:100%;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.site-search:focus-within{
  border-color:rgba(210,162,90,.42);
  box-shadow:0 0 0 4px rgba(210,162,90,.12);
  background:rgba(255,255,255,.04);
}
.site-search input{
  flex:1;
  min-width:0;
  background:transparent;
  color:var(--text);
  border:0;
  outline:none;
  padding:0 14px 0 16px;
  height:42px;
}
.site-search input::placeholder{color:var(--weak)}
.site-search button{
  height:42px;
  padding:0 16px;
  color:#fff;
  background:linear-gradient(180deg, var(--primary-2), var(--primary));
  border-left:1px solid rgba(255,255,255,.08);
  font-weight:700;
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.site-search button:hover,
.site-search button:focus-visible{
  filter:brightness(1.06);
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.site-search button:active{transform:translateY(0)}

.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--text);
}
.nav-toggle:hover,
.nav-toggle:focus-visible{
  border-color:rgba(210,162,90,.35);
  background:rgba(255,255,255,.05);
}

.hero{
  position:relative;
  overflow:hidden;
  padding:32px 0 18px;
}
.hero-shell{
  position:relative;
  border:1px solid rgba(255,255,255,.07);
  border-radius:28px;
  overflow:hidden;
  background:
    linear-gradient(120deg, rgba(15,17,21,.86), rgba(15,17,21,.40)),
    url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
  box-shadow:var(--shadow);
}
.hero-shell::after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(15,17,21,.12), rgba(15,17,21,.72) 100%);
  pointer-events:none;
}
.hero-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:28px;
  padding:34px;
  min-height:640px;
  align-items:center;
}
.hero-copy{
  padding:8px 4px;
}
.hero-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(210,162,90,.18);
  background:rgba(210,162,90,.08);
  color:#f6d9a2;
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
}
.hero-title{
  margin:18px 0 14px;
  font-size:clamp(38px, 5.2vw, 68px);
  line-height:1.02;
  letter-spacing:-.04em;
  max-width:10.5ch;
}
.hero-title span{
  color:#fff;
  text-shadow:0 10px 26px rgba(0,0,0,.26);
}
.hero-desc{
  margin:0;
  color:rgba(242,244,247,.88);
  font-size:18px;
  line-height:1.8;
  max-width:58ch;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:0 20px;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.01em;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.btn:hover,
.btn:focus-visible{
  transform:translateY(-2px);
}
.btn:active{transform:translateY(0)}
.btn-primary{
  background:linear-gradient(180deg, var(--primary-2), var(--primary));
  color:#fff;
  box-shadow:0 14px 28px rgba(142,30,47,.22);
}
.btn-primary:hover,
.btn-primary:focus-visible{
  box-shadow:0 18px 32px rgba(142,30,47,.28);
  filter:brightness(1.05);
}
.btn-secondary{
  border:1px solid rgba(210,162,90,.32);
  background:rgba(210,162,90,.06);
  color:#f5dfb6;
}
.btn-secondary:hover,
.btn-secondary:focus-visible{
  background:rgba(210,162,90,.12);
  border-color:rgba(210,162,90,.46);
}

.hero-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}
.point{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:var(--muted);
  font-size:13px;
}
.point i{
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(210,162,90,.10);
  display:inline-block;
}

.hero-visual{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:14px;
  align-items:stretch;
}
.hero-poster,
.hero-side{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:var(--card);
  box-shadow:var(--shadow-soft);
}
.hero-poster{
  min-height:520px;
  background:url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
}
.hero-poster::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(15,17,21,.06), rgba(15,17,21,.86));
}
.hero-poster-content{
  position:absolute;
  inset:auto 18px 18px 18px;
  z-index:1;
  display:grid;
  gap:10px;
}
.poster-badge{
  display:inline-flex;
  width:max-content;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(15,17,21,.72);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  font-size:12px;
}
.poster-title{
  margin:0;
  font-size:24px;
  line-height:1.25;
}
.poster-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  color:rgba(242,244,247,.78);
  font-size:13px;
}
.poster-tag{
  padding:6px 9px;
  border-radius:999px;
  background:rgba(210,162,90,.10);
  color:#f7dfaf;
  border:1px solid rgba(210,162,90,.18);
}
.hero-side{
  display:grid;
  gap:14px;
  background:transparent;
  border:0;
  box-shadow:none;
}
.side-card{
  position:relative;
  min-height:252px;
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:var(--card);
  box-shadow:var(--shadow-soft);
}
.side-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.side-card::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(15,17,21,.06), rgba(15,17,21,.82));
}
.side-card-content{
  position:absolute;
  inset:auto 16px 16px 16px;
  z-index:1;
}
.side-card h3{
  margin:0 0 8px;
  font-size:20px;
  line-height:1.28;
}
.side-card p{
  margin:0;
  color:rgba(242,244,247,.78);
  font-size:14px;
}
.side-card small{
  display:inline-flex;
  margin-top:10px;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(15,17,21,.68);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  font-size:12px;
}

.hero-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:14px;
}
.strip-card{
  padding:14px 16px;
  border-radius:18px;
  background:rgba(27,32,41,.88);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-soft);
}
.strip-card strong{
  display:block;
  font-size:16px;
  margin-bottom:4px;
}
.strip-card span{
  color:var(--muted);
  font-size:14px;
}

.chips{
  display:flex;
  gap:10px;
  overflow:auto;
  padding-bottom:6px;
  scrollbar-width:none;
}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 16px;
  border-radius:999px;
  color:var(--muted);
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.chip:hover,
.chip:focus-visible{
  color:#fff;
  border-color:rgba(210,162,90,.32);
  background:rgba(142,30,47,.14);
  transform:translateY(-1px);
}
.chip.active{
  color:#fff;
  border-color:rgba(142,30,47,.34);
  background:rgba(142,30,47,.18);
}

.mosaic{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:18px;
}
.mosaic-card{
  border-radius:24px;
  overflow:hidden;
  background:var(--card);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-soft);
  position:relative;
  min-height:320px;
}
.mosaic-card.large{
  padding:0;
  background:
    linear-gradient(180deg, rgba(15,17,21,.08), rgba(15,17,21,.78)),
    url('/assets/images/coverpic/cover-1.webp') center/cover no-repeat;
}
.mosaic-card.large .mosaic-body{
  position:absolute;
  inset:auto 18px 18px 18px;
}
.mosaic-card.large .mosaic-title{
  font-size:26px;
  max-width:12ch;
}
.mosaic-body{
  padding:22px;
}
.mosaic-title{
  margin:0 0 10px;
  font-size:22px;
  line-height:1.25;
}
.mosaic-desc{
  margin:0;
  color:var(--muted);
}
.mosaic-list{
  display:grid;
  gap:18px;
}
.mini-card{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:14px;
  align-items:stretch;
  min-height:calc((320px - 18px)/2);
}
.mini-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
}
.mini-card .mosaic-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.mini-card .mosaic-title{
  font-size:19px;
}

.meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}
.badge,
.meta-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  border:1px solid transparent;
}
.badge{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.08);
  color:var(--muted);
}
.badge-strong{
  background:rgba(142,30,47,.16);
  border-color:rgba(142,30,47,.28);
  color:#ffd7dd;
}
.badge-warm{
  background:rgba(210,162,90,.13);
  border-color:rgba(210,162,90,.24);
  color:#f7dfaf;
}
.meta-badge{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.08);
  color:var(--muted);
}

.cards-grid{
  display:grid;
  gap:18px;
}
.cards-grid.three{
  grid-template-columns:repeat(3, minmax(0,1fr));
}
.cards-grid.two{
  grid-template-columns:repeat(2, minmax(0,1fr));
}
.feature-card,
.panel-card,
.update-card,
.recommend-card,
.guide-card,
.note-card,
.cta-card{
  border-radius:24px;
  background:linear-gradient(180deg, rgba(27,32,41,.98), rgba(20,24,32,.98));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-soft);
}

.feature-card{
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:100%;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.feature-card:hover{
  transform:translateY(-4px);
  border-color:rgba(210,162,90,.24);
  box-shadow:0 18px 36px rgba(0,0,0,.24);
}
.feature-icon{
  width:46px;height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, rgba(142,30,47,.22), rgba(142,30,47,.10));
  border:1px solid rgba(142,30,47,.24);
  color:#ffd7dd;
  font-size:20px;
}
.feature-card h3{
  margin:0;
  font-size:22px;
  line-height:1.2;
}
.feature-card p{
  margin:0;
  color:var(--muted);
}
.feature-card .card-link{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#f7dfaf;
  font-weight:700;
}
.feature-card .card-link:hover,
.feature-card .card-link:focus-visible{
  text-decoration:underline;
  text-underline-offset:4px;
}

.info-panel{
  display:grid;
  gap:14px;
  align-content:start;
}
.panel-card{
  padding:20px;
}
.panel-title{
  margin:0 0 8px;
  font-size:18px;
}
.panel-text{
  margin:0;
  color:var(--muted);
}
.panel-stat{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.updates-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.updates-note{
  color:var(--muted);
  font-size:14px;
}
.updates-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
}
.update-card{
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:100%;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.update-card:hover{
  transform:translateY(-4px);
  border-color:rgba(210,162,90,.24);
  box-shadow:0 18px 36px rgba(0,0,0,.24);
}
.update-card--featured{
  grid-column:span 2;
}
.update-media{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
}
.update-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}
.update-card:hover .update-media img{
  transform:scale(1.04);
}
.update-media::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(15,17,21,.04), rgba(15,17,21,.72));
}
.update-flag{
  position:absolute;
  left:14px;
  top:14px;
  z-index:1;
  display:inline-flex;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(15,17,21,.76);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  font-size:12px;
}
.update-body{
  padding:18px 18px 20px;
  display:grid;
  gap:10px;
}
.update-top{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.update-title{
  margin:0;
  font-size:20px;
  line-height:1.34;
  letter-spacing:-.01em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.update-summary{
  margin:0;
  color:var(--muted);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:3.4em;
}
.update-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:2px;
}
.update-more{
  color:#f7dfaf;
  font-weight:700;
}
.update-more:hover,
.update-more:focus-visible{
  text-decoration:underline;
  text-underline-offset:4px;
}
.update-empty{
  grid-column:1 / -1;
  padding:28px;
  border-radius:20px;
  border:1px dashed rgba(255,255,255,.12);
  background:rgba(255,255,255,.02);
  color:var(--muted);
}

.search-empty{
  margin-top:14px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  color:var(--muted);
}

.recommend-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;
  gap:18px;
}
.recommend-card{
  overflow:hidden;
  position:relative;
  min-height:360px;
  transition:transform .22s ease, border-color .22s ease;
}
.recommend-card:hover{
  transform:translateY(-4px);
  border-color:rgba(210,162,90,.24);
}
.recommend-card .cover{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
}
.recommend-card .cover::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(15,17,21,.08), rgba(15,17,21,.84));
}
.recommend-body{
  position:absolute;
  inset:auto 18px 18px 18px;
  z-index:1;
}
.recommend-body h3{
  margin:10px 0 8px;
  font-size:22px;
  line-height:1.28;
}
.recommend-body p{
  margin:0;
  color:rgba(242,244,247,.80);
}
.recommend-body .mini-line{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.recommend-card.small{
  min-height:260px;
}
.recommend-card.small .recommend-body h3{
  font-size:19px;
}
.recommend-card.small .recommend-body p{
  font-size:14px;
}

.guide-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
}
.guide-card{
  padding:22px;
  min-height:100%;
  position:relative;
  overflow:hidden;
}
.guide-number{
  display:inline-flex;
  width:38px;height:38px;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(142,30,47,.18);
  border:1px solid rgba(142,30,47,.26);
  color:#ffd7dd;
  font-weight:800;
  margin-bottom:14px;
}
.guide-card h3{
  margin:0 0 10px;
  font-size:20px;
}
.guide-card p{
  margin:0;
  color:var(--muted);
}

.faq-list{
  display:grid;
  gap:14px;
}
.faq-item{
  border-radius:18px;
  background:rgba(27,32,41,.96);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  transition:border-color .2s ease, transform .2s ease;
}
.faq-item.open{
  border-color:rgba(210,162,90,.30);
}
.faq-question{
  width:100%;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  color:#fff;
  font-weight:700;
  background:transparent;
}
.faq-question span{
  color:var(--muted);
  font-weight:600;
}
.faq-question::after{
  content:"+";
  width:28px;height:28px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:50%;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  transition:transform .25s ease, background .25s ease;
}
.faq-item.open .faq-question::after{
  content:"−";
  transform:rotate(180deg);
  background:rgba(142,30,47,.18);
  border-color:rgba(142,30,47,.22);
}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .34s ease;
}
.faq-answer-inner{
  padding:0 20px 18px;
  color:var(--muted);
}
.faq-answer-inner p{
  margin:0 0 10px;
}
.faq-answer-inner p:last-child{margin-bottom:0}

.cta-card{
  padding:28px;
  background:
    radial-gradient(700px 220px at 0% 0%, rgba(142,30,47,.24), transparent 55%),
    linear-gradient(180deg, rgba(27,32,41,.98), rgba(19,23,31,.98));
}
.cta-card-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.cta-card h2{
  margin:0 0 10px;
  font-size:clamp(24px, 3vw, 36px);
}
.cta-card p{
  margin:0;
  color:var(--muted);
  max-width:58ch;
}
.cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  flex:0 0 auto;
}

.footer{
  margin-top:18px;
  padding:44px 0 26px;
  border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(12,14,18,.5), rgba(12,14,18,.92));
}
.footer-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr 1fr;
  gap:20px;
}
.footer-col{
  color:var(--muted);
}
.footer-brand{
  color:#fff;
  font-size:18px;
  font-weight:800;
  margin:0 0 10px;
}
.footer-text{
  margin:0 0 14px;
}
.footer-title{
  color:#fff;
  margin:0 0 12px;
  font-size:15px;
}
.footer-links{
  display:grid;
  gap:10px;
}
.footer-links a{
  color:var(--muted);
  transition:color .2s ease, transform .2s ease;
}
.footer-links a:hover,
.footer-links a:focus-visible{
  color:#fff;
  transform:translateX(2px);
}
.footer-note{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  color:var(--weak);
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
}
.footer-note strong{color:#fff}

.hr{
  height:1px;
  margin:0;
  border:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
}

.sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

[data-search-item][hidden]{display:none !important}

button:disabled,
input:disabled{
  cursor:not-allowed;
  opacity:.55;
}

:focus-visible{
  outline:2px solid rgba(210,162,90,.78);
  outline-offset:2px;
}

@media (max-width: 1200px){
  .hero-inner{grid-template-columns:1fr;min-height:auto}
  .hero-visual{grid-template-columns:1fr 1fr}
  .mosaic,.recommend-grid,.footer-grid{grid-template-columns:1fr 1fr}
  .updates-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide-grid,.cards-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .update-card--featured{grid-column:span 2}
}
@media (max-width: 992px){
  .header-inner{gap:12px}
  .site-search{min-width:0;width:min(100%, 340px)}
  .hero-strip{grid-template-columns:1fr}
  .recommend-grid{grid-template-columns:1fr 1fr}
  .recommend-card:first-child{grid-column:1 / -1}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 768px){
  .header-inner{flex-wrap:wrap}
  .header-tools{
    width:100%;
    flex-wrap:wrap;
    margin-left:0;
    display:none;
    padding-top:8px;
  }
  .site-header.nav-open .header-tools{display:flex}
  .site-nav{
    width:100%;
    order:2;
    display:none;
    padding:10px 0 2px;
  }
  .site-header.nav-open .site-nav{display:flex}
  .site-search{
    width:100%;
    order:3;
    max-width:none;
  }
  .nav-toggle{display:inline-flex;margin-left:auto}
  .brand-state{display:none}
  .hero-shell{border-radius:22px}
  .hero-inner{padding:22px}
  .hero-title{max-width:13ch}
  .hero-visual{grid-template-columns:1fr}
  .side-card{min-height:220px}
  .mosaic,.cards-grid.two,.cards-grid.three,.updates-grid,.recommend-grid,.guide-grid,.footer-grid{
    grid-template-columns:1fr;
  }
  .update-card--featured{grid-column:auto}
  .cta-card-inner{flex-direction:column;align-items:flex-start}
}
@media (max-width: 576px){
  .container{width:min(var(--container), calc(100% - 24px))}
  .section{padding:56px 0}
  .hero{padding-top:18px}
  .hero-inner{padding:18px}
  .hero-desc{font-size:16px}
  .hero-title{font-size:clamp(30px, 10vw, 44px)}
  .hero-poster{min-height:360px}
  .feature-card,.panel-card,.guide-card,.cta-card,.update-body{padding:18px}
  .site-search input{padding-left:14px}
  .section-head,
  .updates-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .faq-question{padding:16px 16px}
  .faq-answer-inner{padding:0 16px 16px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* roulang page: article */
:root{
      --bg:#0F1115;
      --bg-2:#151922;
      --card:#1B2029;
      --card-2:#202634;
      --line:#2A3140;
      --line-soft:#333b4d;
      --primary:#8E1E2F;
      --primary-2:#A12535;
      --primary-soft:rgba(142,30,47,.14);
      --accent:#D2A25A;
      --accent-soft:rgba(210,162,90,.14);
      --text:#F2F4F7;
      --muted:#B3BAC6;
      --weak:#7F8794;
      --shadow:0 18px 40px rgba(0,0,0,.28);
      --shadow-soft:0 12px 28px rgba(0,0,0,.18);
      --r-lg:18px;
      --r-md:14px;
      --r-sm:12px;
      --gap:24px;
      --container:1280px;
      --header-h:82px;
    }
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(1200px 500px at 10% -10%, rgba(142,30,47,.20), transparent 55%),
        radial-gradient(900px 500px at 95% 0%, rgba(210,162,90,.10), transparent 50%),
        linear-gradient(180deg, #0F1115 0%, #11151C 100%);
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
      line-height:1.7;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
      overflow-x:hidden;
    }
    ::selection{background:rgba(210,162,90,.25);color:#fff}
    a{color:inherit;text-decoration:none;transition:color .2s ease, opacity .2s ease}
    a:hover{color:#fff}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    button{border:0;background:none;color:inherit;cursor:pointer}
    button:disabled,
    .btn.disabled,
    .nav-link.disabled{
      opacity:.55;
      cursor:not-allowed;
      pointer-events:none;
    }
    .sr-only{
      position:absolute!important;
      width:1px!important;
      height:1px!important;
      padding:0!important;
      margin:-1px!important;
      overflow:hidden!important;
      clip:rect(0,0,0,0)!important;
      white-space:nowrap!important;
      border:0!important;
    }
    .container{
      width:min(var(--container), calc(100% - 32px));
      margin:0 auto;
    }
    .section{
      padding:72px 0;
      position:relative;
    }
    .section-tight{padding-top:28px}
    .section-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:16px;
      margin-bottom:24px;
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--accent);
      font-size:13px;
      letter-spacing:.12em;
      text-transform:uppercase;
      margin:0 0 8px;
    }
    .section-kicker::before{
      content:"";
      width:18px;height:2px;border-radius:999px;background:var(--accent);
      box-shadow:0 0 0 4px rgba(210,162,90,.08);
    }
    .section-title{
      margin:0;
      font-size:clamp(24px, 2.4vw, 38px);
      line-height:1.18;
      letter-spacing:-.02em;
    }
    .section-desc{
      margin:10px 0 0;
      color:var(--muted);
      max-width:68ch;
    }
    .section-actions{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .pill-link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-height:40px;
      padding:0 14px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.02);
      color:var(--muted);
      transition:transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
    }
    .pill-link:hover,
    .pill-link:focus-visible{
      color:var(--text);
      transform:translateY(-1px);
      border-color:rgba(210,162,90,.35);
      background:rgba(255,255,255,.04);
      box-shadow:0 8px 20px rgba(0,0,0,.12);
      outline:none;
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:80;
      background:rgba(15,17,21,.72);
      border-bottom:1px solid rgba(255,255,255,0);
      transition:background .25s ease, border-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
      backdrop-filter:blur(0);
    }
    .site-header.is-scrolled{
      background:rgba(15,17,21,.94);
      border-bottom-color:rgba(255,255,255,.06);
      box-shadow:0 10px 26px rgba(0,0,0,.18);
      backdrop-filter:blur(8px);
    }
    .header-inner{
      min-height:var(--header-h);
      display:flex;
      align-items:center;
      gap:18px;
      padding:12px 0;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:max-content;
      letter-spacing:.02em;
    }
    .brand-mark{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:40px;
      padding:0 14px;
      border-radius:999px;
      background:linear-gradient(180deg, rgba(142,30,47,.24), rgba(142,30,47,.14));
      color:#fff;
      border:1px solid rgba(210,162,90,.22);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
      font-weight:800;
      font-size:16px;
    }
    .brand-state{
      color:var(--muted);
      font-size:13px;
      padding:5px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
    }
    .header-tools{
      display:flex;
      align-items:center;
      gap:14px;
      margin-left:auto;
      flex:1;
      justify-content:flex-end;
    }
    .site-nav{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
    }
    .nav-link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      height:42px;
      padding:0 14px;
      border-radius:999px;
      color:var(--muted);
      border:1px solid transparent;
      transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .nav-link:hover,
    .nav-link:focus-visible{
      color:var(--text);
      background:rgba(255,255,255,.03);
      border-color:rgba(255,255,255,.08);
      transform:translateY(-1px);
      outline:none;
    }
    .nav-link.active{
      color:#fff;
      background:linear-gradient(180deg, rgba(142,30,47,.28), rgba(142,30,47,.18));
      border-color:rgba(142,30,47,.35);
      box-shadow:0 8px 20px rgba(142,30,47,.14);
    }
    .site-search{
      display:flex;
      align-items:center;
      min-width:320px;
      max-width:380px;
      width:100%;
      background:rgba(255,255,255,.03);
      border:1px solid var(--line);
      border-radius:999px;
      overflow:hidden;
      transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .site-search:focus-within{
      border-color:rgba(210,162,90,.42);
      box-shadow:0 0 0 4px rgba(210,162,90,.12);
      background:rgba(255,255,255,.04);
    }
    .site-search input{
      flex:1;
      min-width:0;
      background:transparent;
      color:var(--text);
      border:0;
      outline:none;
      padding:0 14px 0 16px;
      height:42px;
    }
    .site-search input::placeholder{color:var(--weak)}
    .site-search button{
      height:42px;
      padding:0 16px;
      color:#fff;
      background:linear-gradient(180deg, var(--primary-2), var(--primary));
      border-left:1px solid rgba(255,255,255,.08);
      font-weight:700;
      transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
    }
    .site-search button:hover,
    .site-search button:focus-visible{
      filter:brightness(1.06);
      transform:translateY(-1px);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
      outline:none;
    }
    .site-search button:active{transform:translateY(0)}
    .nav-toggle{
      display:none;
      align-items:center;
      justify-content:center;
      width:44px;
      height:44px;
      border-radius:14px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      color:var(--text);
      transition:transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }
    .nav-toggle:hover,
    .nav-toggle:focus-visible{
      border-color:rgba(210,162,90,.35);
      background:rgba(255,255,255,.05);
      transform:translateY(-1px);
      outline:none;
    }
    .article-banner{
      position:relative;
      overflow:hidden;
      padding:28px 0 8px;
    }
    .article-banner::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(900px 300px at 12% 0%, rgba(142,30,47,.20), transparent 55%),
        radial-gradient(640px 240px at 86% 10%, rgba(210,162,90,.10), transparent 55%);
      pointer-events:none;
    }
    .banner-shell{
      position:relative;
      overflow:hidden;
      border-radius:28px;
      border:1px solid rgba(255,255,255,.07);
      background:
        linear-gradient(120deg, rgba(15,17,21,.88), rgba(15,17,21,.45)),
        url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
      box-shadow:var(--shadow);
    }
    .banner-shell::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(15,17,21,.14), rgba(15,17,21,.76));
      pointer-events:none;
    }
    .banner-inner{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:26px;
      padding:34px;
      align-items:center;
    }
    .breadcrumb{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
      color:var(--weak);
      font-size:13px;
      margin-bottom:16px;
    }
    .breadcrumb a{
      color:var(--muted);
    }
    .breadcrumb a:hover,
    .breadcrumb a:focus-visible{
      color:#fff;
      text-decoration:underline;
      outline:none;
    }
    .page-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-height:34px;
      padding:0 12px;
      border-radius:999px;
      color:#f7d7b4;
      background:rgba(210,162,90,.08);
      border:1px solid rgba(210,162,90,.18);
      font-size:13px;
      margin-bottom:14px;
    }
    .page-title{
      margin:0;
      font-size:clamp(34px, 5vw, 58px);
      line-height:1.08;
      letter-spacing:-.04em;
      max-width:13.5em;
      text-wrap:balance;
    }
    .page-desc{
      margin:18px 0 0;
      color:var(--muted);
      max-width:62ch;
      font-size:16px;
    }
    .meta-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:18px;
    }
    .meta-badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-height:34px;
      padding:0 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      color:var(--muted);
      font-size:13px;
    }
    .meta-badge.emphasis{
      border-color:rgba(210,162,90,.20);
      background:rgba(210,162,90,.08);
      color:#f5dcad;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:22px;
    }
    .btn-brand,
    .btn-outline,
    .btn-soft{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:44px;
      padding:0 18px;
      border-radius:999px;
      font-weight:700;
      letter-spacing:.01em;
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease, filter .2s ease;
      user-select:none;
      white-space:nowrap;
    }
    .btn-brand{
      color:#fff;
      background:linear-gradient(180deg, var(--primary-2), var(--primary));
      box-shadow:0 10px 24px rgba(142,30,47,.22);
      border:1px solid rgba(255,255,255,.05);
    }
    .btn-brand:hover,
    .btn-brand:focus-visible{
      color:#fff;
      transform:translateY(-1px);
      filter:brightness(1.06);
      box-shadow:0 12px 28px rgba(142,30,47,.28);
      outline:none;
    }
    .btn-brand:active{transform:translateY(0)}
    .btn-outline{
      color:var(--text);
      background:rgba(255,255,255,.02);
      border:1px solid var(--line);
    }
    .btn-outline:hover,
    .btn-outline:focus-visible{
      color:#fff;
      border-color:rgba(210,162,90,.35);
      background:rgba(255,255,255,.05);
      transform:translateY(-1px);
      outline:none;
    }
    .btn-soft{
      color:#f6d8a0;
      background:rgba(210,162,90,.08);
      border:1px solid rgba(210,162,90,.18);
    }
    .btn-soft:hover,
    .btn-soft:focus-visible{
      color:#fff;
      background:rgba(210,162,90,.12);
      border-color:rgba(210,162,90,.25);
      transform:translateY(-1px);
      outline:none;
    }
    .banner-visual{
      display:grid;
      gap:14px;
      align-items:start;
    }
    .visual-frame{
      position:relative;
      overflow:hidden;
      border-radius:24px;
      border:1px solid rgba(255,255,255,.07);
      background:var(--card);
      box-shadow:var(--shadow-soft);
      min-height:330px;
    }
    .visual-frame img{
      width:100%;
      height:100%;
      min-height:330px;
      object-fit:cover;
      transform:scale(1.01);
    }
    .visual-overlay{
      position:absolute;
      left:18px;
      right:18px;
      bottom:18px;
      padding:16px 16px 15px;
      border-radius:18px;
      background:linear-gradient(180deg, rgba(15,17,21,.15), rgba(15,17,21,.72));
      border:1px solid rgba(255,255,255,.08);
      backdrop-filter:blur(6px);
    }
    .visual-overlay .visual-label{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:0 10px;
      border-radius:999px;
      color:#f5dcad;
      background:rgba(210,162,90,.10);
      border:1px solid rgba(210,162,90,.18);
      font-size:12px;
      margin-bottom:10px;
    }
    .visual-overlay strong{
      display:block;
      font-size:18px;
      line-height:1.25;
      margin-bottom:4px;
    }
    .visual-overlay p{
      margin:0;
      color:var(--muted);
      font-size:13px;
    }
    .stack-cards{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:14px;
    }
    .mini-card{
      position:relative;
      overflow:hidden;
      border-radius:18px;
      border:1px solid var(--line);
      background:var(--card);
      box-shadow:var(--shadow-soft);
      min-height:150px;
      transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .mini-card:hover{
      transform:translateY(-3px);
      border-color:rgba(210,162,90,.28);
      box-shadow:0 18px 28px rgba(0,0,0,.22);
    }
    .mini-card img{
      width:100%;
      height:150px;
      object-fit:cover;
    }
    .mini-copy{
      position:absolute;
      left:12px;
      right:12px;
      bottom:12px;
      display:grid;
      gap:6px;
      padding:12px;
      border-radius:14px;
      background:linear-gradient(180deg, rgba(15,17,21,.06), rgba(15,17,21,.74));
      border:1px solid rgba(255,255,255,.07);
      backdrop-filter:blur(5px);
    }
    .mini-tag{
      display:inline-flex;
      align-items:center;
      width:max-content;
      min-height:24px;
      padding:0 8px;
      border-radius:999px;
      font-size:12px;
      color:#f6d7aa;
      background:rgba(210,162,90,.10);
      border:1px solid rgba(210,162,90,.16);
    }
    .mini-copy strong{
      font-size:14px;
      line-height:1.35;
      color:#fff;
    }
    .article-grid{
      display:grid;
      grid-template-columns:minmax(0, 1.25fr) minmax(300px, .75fr);
      gap:24px;
      align-items:start;
    }
    .content-card,
    .side-card,
    .cta-panel,
    .empty-card,
    .recommend-card,
    .faq-item{
      background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--card);
      border:1px solid var(--line);
      border-radius:var(--r-lg);
      box-shadow:var(--shadow-soft);
    }
    .content-card{
      padding:26px;
      overflow:hidden;
    }
    .content-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:16px;
      margin-bottom:14px;
    }
    .content-head .section-title{
      font-size:clamp(22px, 2.2vw, 32px);
    }
    .content-head-tools{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .content-note{
      margin:0 0 20px;
      padding:14px 16px;
      border-radius:16px;
      background:rgba(142,30,47,.10);
      border:1px solid rgba(142,30,47,.20);
      color:#f2dada;
    }
    .cms-content{
      max-width:860px;
      color:var(--text);
      font-size:16px;
      line-height:1.85;
      word-break:break-word;
    }
    .cms-content > :first-child{margin-top:0}
    .cms-content > :last-child{margin-bottom:0}
    .cms-content p{
      margin:0 0 1em;
      color:var(--text);
    }
    .cms-content h2,
    .cms-content h3,
    .cms-content h4{
      margin:1.7em 0 .8em;
      line-height:1.28;
      letter-spacing:-.02em;
      color:#fff;
    }
    .cms-content h2{font-size:1.5em}
    .cms-content h3{font-size:1.22em}
    .cms-content h4{font-size:1.05em}
    .cms-content ul,
    .cms-content ol{
      margin:0 0 1.1em 1.3em;
      padding:0;
      color:var(--text);
    }
    .cms-content li{margin:.35em 0}
    .cms-content a{
      color:#f1cd83;
      text-decoration:none;
      border-bottom:1px solid rgba(241,205,131,.45);
      transition:color .2s ease, border-color .2s ease, filter .2s ease;
    }
    .cms-content a:hover,
    .cms-content a:focus-visible{
      color:#fff;
      border-bottom-color:#fff;
      filter:brightness(1.06);
      outline:none;
    }
    .cms-content blockquote{
      margin:1.2em 0;
      padding:18px 18px 18px 20px;
      border-left:4px solid var(--accent);
      background:rgba(210,162,90,.08);
      border-radius:0 16px 16px 0;
      color:#f7e7c5;
    }
    .cms-content hr{
      margin:2em 0;
      border:0;
      border-top:1px solid var(--line);
      opacity:1;
    }
    .cms-content figure{
      margin:1.4em 0;
    }
    .cms-content figure img,
    .cms-content img{
      border-radius:18px;
      box-shadow:var(--shadow-soft);
    }
    .cms-content figcaption{
      margin-top:8px;
      color:var(--weak);
      font-size:13px;
      text-align:center;
    }
    .cms-content pre{
      margin:1.2em 0;
      padding:18px;
      overflow:auto;
      border-radius:16px;
      background:#0c0f15;
      border:1px solid var(--line);
      color:#d9e2f2;
    }
    .cms-content code{
      padding:.18em .42em;
      border-radius:8px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
      color:#ffdca0;
    }
    .cms-content table{
      width:100%;
      margin:1.4em 0;
      border-collapse:separate;
      border-spacing:0;
      overflow:hidden;
      border-radius:16px;
      border:1px solid var(--line);
    }
    .cms-content th,
    .cms-content td{
      padding:12px 14px;
      border-bottom:1px solid rgba(255,255,255,.06);
      text-align:left;
    }
    .cms-content th{
      color:#fff;
      background:rgba(255,255,255,.03);
    }
    .cms-content tr:last-child td{border-bottom:0}
    .sidebar{
      position:sticky;
      top:104px;
      display:grid;
      gap:16px;
    }
    .side-card{
      padding:20px;
    }
    .side-title{
      margin:0 0 12px;
      color:#fff;
      font-size:18px;
      line-height:1.3;
    }
    .info-list{
      display:grid;
      gap:10px;
      margin:0;
    }
    .info-row{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
      padding:12px 0;
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .info-row:last-child{border-bottom:0;padding-bottom:0}
    .info-label{
      color:var(--weak);
      font-size:13px;
      min-width:5em;
    }
    .info-value{
      color:var(--text);
      font-size:14px;
      text-align:right;
      word-break:break-word;
    }
    .chip-list{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      min-height:34px;
      padding:0 12px;
      border-radius:999px;
      border:1px solid var(--line);
      color:var(--muted);
      background:rgba(255,255,255,.02);
      transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
    }
    .chip:hover,
    .chip:focus-visible{
      color:#fff;
      background:rgba(142,30,47,.18);
      border-color:rgba(142,30,47,.34);
      transform:translateY(-1px);
      outline:none;
    }
    .preview-card{
      overflow:hidden;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.07);
      background:var(--bg-2);
    }
    .preview-card img{
      width:100%;
      aspect-ratio:1.45/1;
      object-fit:cover;
    }
    .preview-copy{
      padding:14px;
    }
    .preview-copy strong{
      display:block;
      font-size:15px;
      color:#fff;
      margin-bottom:4px;
    }
    .preview-copy p{
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.65;
    }
    .sidebar-actions{
      display:grid;
      gap:10px;
    }
    .sidebar-actions .btn-brand,
    .sidebar-actions .btn-outline{
      width:100%;
      justify-content:center;
    }
    .recommend-grid{
      display:grid;
      grid-template-columns:repeat(12, minmax(0, 1fr));
      gap:20px;
    }
    .recommend-card{
      overflow:hidden;
      display:flex;
      flex-direction:column;
      min-height:100%;
      transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .recommend-card:hover{
      transform:translateY(-4px);
      border-color:rgba(210,162,90,.28);
      box-shadow:0 18px 32px rgba(0,0,0,.24);
    }
    .recommend-card.featured{grid-column:span 6}
    .recommend-card.small{grid-column:span 3}
    .recommend-media{
      position:relative;
      overflow:hidden;
      aspect-ratio:16/9;
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .recommend-media img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform .35s ease;
    }
    .recommend-card:hover .recommend-media img{
      transform:scale(1.04);
    }
    .recommend-badge{
      position:absolute;
      left:14px;
      top:14px;
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:0 10px;
      border-radius:999px;
      color:#f5dfaf;
      background:rgba(15,17,21,.66);
      border:1px solid rgba(210,162,90,.20);
      backdrop-filter:blur(5px);
      font-size:12px;
    }
    .recommend-body{
      padding:18px;
      display:grid;
      gap:10px;
      flex:1;
    }
    .recommend-title{
      margin:0;
      font-size:18px;
      line-height:1.28;
      letter-spacing:-.01em;
      color:#fff;
      text-wrap:balance;
    }
    .recommend-desc{
      margin:0;
      color:var(--muted);
      font-size:14px;
      line-height:1.7;
    }
    .recommend-meta{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:auto;
    }
    .recommend-meta .meta-badge{min-height:30px}
    .recommend-link{
      display:inline-flex;
      align-items:center;
      width:max-content;
      gap:8px;
      margin-top:2px;
      color:#f4d392;
      font-weight:700;
    }
    .recommend-link:hover,
    .recommend-link:focus-visible{
      color:#fff;
      text-decoration:underline;
      outline:none;
    }
    .faq-list{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:16px;
    }
    .faq-item{
      overflow:hidden;
    }
    .faq-item summary{
      list-style:none;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      padding:18px 20px;
      cursor:pointer;
      color:#fff;
      font-weight:700;
      line-height:1.4;
      transition:background .2s ease, color .2s ease;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary::after{
      content:"+";
      flex:0 0 auto;
      width:28px;
      height:28px;
      border-radius:999px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border:1px solid var(--line);
      color:var(--muted);
      background:rgba(255,255,255,.03);
      transition:transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
    }
    .faq-item[open] summary{
      background:rgba(142,30,47,.08);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .faq-item[open] summary::after{
      content:"–";
      color:#fff;
      border-color:rgba(210,162,90,.28);
      background:rgba(210,162,90,.10);
    }
    .faq-body{
      padding:0 20px 18px;
      color:var(--muted);
    }
    .faq-body p{
      margin:12px 0 0;
      line-height:1.8;
    }
    .cta-panel{
      padding:28px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      background:
        linear-gradient(120deg, rgba(142,30,47,.16), rgba(210,162,90,.08)),
        var(--card);
    }
    .cta-title{
      margin:0 0 8px;
      font-size:clamp(22px, 2vw, 30px);
      line-height:1.2;
      color:#fff;
    }
    .cta-text{
      margin:0;
      color:var(--muted);
      max-width:60ch;
    }
    .cta-actions{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .empty-shell{
      padding:70px 0 90px;
    }
    .empty-card{
      max-width:760px;
      margin:0 auto;
      padding:36px 28px;
      text-align:center;
    }
    .empty-title{
      margin:0;
      font-size:clamp(30px, 4vw, 48px);
      line-height:1.1;
      color:#fff;
    }
    .empty-text{
      margin:16px auto 0;
      color:var(--muted);
      max-width:52ch;
      font-size:16px;
    }
    .empty-card .hero-actions{
      justify-content:center;
    }
    .footer{
      margin-top:12px;
      padding:52px 0 26px;
      background:#0D1015;
      border-top:1px solid rgba(255,255,255,.06);
      color:#D5DAE2;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr .9fr .9fr;
      gap:22px;
    }
    .footer-col{
      min-width:0;
    }
    .footer-brand{
      margin:0 0 10px;
      font-weight:800;
      font-size:20px;
      color:#fff;
      letter-spacing:.01em;
    }
    .footer-title{
      margin:0 0 12px;
      font-size:15px;
      color:#fff;
      font-weight:700;
    }
    .footer-text{
      margin:0;
      color:#B6BECA;
      line-height:1.8;
    }
    .footer-links{
      display:grid;
      gap:10px;
      color:#B6BECA;
    }
    .footer-links a{
      color:#B6BECA;
      transition:color .2s ease, transform .2s ease;
    }
    .footer-links a:hover,
    .footer-links a:focus-visible{
      color:#fff;
      transform:translateX(2px);
      outline:none;
    }
    .footer-links span{
      line-height:1.7;
    }
    .footer-note{
      margin-top:22px;
      padding-top:18px;
      border-top:1px solid rgba(255,255,255,.06);
      display:flex;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
      color:#97A0AF;
      font-size:13px;
    }
    .footer-note strong{color:#fff}
    .nav-toggle:focus-visible,
    .btn-brand:focus-visible,
    .btn-outline:focus-visible,
    .btn-soft:focus-visible,
    .chip:focus-visible,
    .meta-badge:focus-visible{
      box-shadow:0 0 0 4px rgba(210,162,90,.14);
    }
    @media (max-width: 1199px){
      .banner-inner{grid-template-columns:1fr}
      .article-grid{grid-template-columns:1fr}
      .sidebar{position:static}
      .recommend-card.featured{grid-column:span 12}
      .recommend-card.small{grid-column:span 6}
    }
    @media (max-width: 991px){
      .section{padding:60px 0}
      .header-tools{gap:10px}
      .site-search{min-width:260px}
      .footer-grid{grid-template-columns:1fr 1fr}
      .cta-panel{flex-direction:column;align-items:flex-start}
      .cta-actions{justify-content:flex-start}
      .faq-list{grid-template-columns:1fr}
    }
    @media (max-width: 767px){
      .header-inner{gap:10px}
      .brand-state{display:none}
      .nav-toggle{display:inline-flex;margin-left:auto}
      .header-tools{
        position:absolute;
        left:16px;
        right:16px;
        top:calc(var(--header-h) - 6px);
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:12px;
        padding:16px;
        border-radius:20px;
        border:1px solid var(--line);
        background:rgba(15,17,21,.98);
        box-shadow:var(--shadow);
      }
      .header-tools.is-open{display:flex}
      .site-nav{justify-content:flex-start}
      .site-search{min-width:0;max-width:none;width:100%}
      .banner-inner{padding:20px}
      .visual-frame{min-height:250px}
      .visual-frame img{min-height:250px}
      .stack-cards{grid-template-columns:1fr}
      .page-title{max-width:none;font-size:clamp(28px, 10vw, 44px)}
      .content-card{padding:20px}
      .content-head{flex-direction:column;align-items:flex-start}
      .section-head{flex-direction:column;align-items:flex-start}
      .section-actions{justify-content:flex-start}
      .recommend-card.small{grid-column:span 12}
      .cta-panel{padding:22px}
      .footer-grid{grid-template-columns:1fr}
    }
    @media (max-width: 575px){
      .container{width:min(var(--container), calc(100% - 24px))}
      .section{padding:48px 0}
      .article-banner{padding-top:18px}
      .banner-shell{border-radius:22px}
      .banner-inner{gap:18px;padding:18px}
      .hero-actions,
      .cta-actions{
        width:100%;
      }
      .hero-actions .btn-brand,
      .hero-actions .btn-outline,
      .hero-actions .btn-soft,
      .cta-actions .btn-brand,
      .cta-actions .btn-outline{
        width:100%;
      }
      .meta-row{gap:8px}
      .meta-badge{min-height:30px}
      .page-desc,.section-desc,.cta-text,.faq-body{font-size:14px}
      .content-note{padding:12px 14px}
      .mini-card{min-height:132px}
      .mini-card img{height:132px}
      .recommend-body{padding:16px}
      .recommend-title{font-size:17px}
      .footer{padding:42px 0 22px}
    }

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}