/* roulang page: index */
:root{--bg:#060B18;--panel:#0B1222;--panel-2:#0D1526;--line:rgba(255,255,255,.08);--white:#F8FAFC;--text:#94A3B8;--muted:#64748B;--brand:#3D7EFF;--accent:#22D3EE;--brand-shadow:0 0 24px rgba(59,130,246,.35)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--white);font-family:"PingFang SC","HarmonicOS Sans SC","Microsoft YaHei","system-ui",sans-serif;overflow-x:hidden}
body::selection{background:rgba(34,211,238,.25)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:#050810}
::-webkit-scrollbar-thumb{border-radius:20px;background:#1e293b}
::-webkit-scrollbar-thumb:hover{background:#334155}
.no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}
.no-scrollbar::-webkit-scrollbar{display:none}
.container-page{width:100%;max-width:80rem;margin:0 auto;padding-left:1rem;padding-right:1rem}
@media (min-width:640px){.container-page{padding-left:1.5rem;padding-right:1.5rem}}
@media (min-width:1024px){.container-page{padding-left:2rem;padding-right:2rem}}
.glass-card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:1.5rem;backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:border-color .3s,background .3s,transform .3s}
.glass-card:hover{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.07)}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;color:var(--accent);font-size:.75rem;letter-spacing:.28em;text-transform:uppercase;font-weight:500}
.eyebrow::before{content:"";display:block;width:2rem;height:1px;background:linear-gradient(90deg,transparent,var(--accent))}
.gradient-text{background:linear-gradient(100deg,#fff 20%,#a5f3fc 60%,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:12px;padding:.7rem 1.25rem;background:#3D7EFF;color:#fff;font-weight:500;font-size:.875rem;box-shadow:0 0 24px rgba(59,130,246,.35);transition:background .3s,box-shadow .3s,transform .2s}
.btn-primary:hover{background:#5a92ff;box-shadow:0 0 34px rgba(59,130,246,.6);transform:translateY(-1px)}
.btn-primary:focus{outline:2px solid rgba(34,211,238,.8);outline-offset:3px}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:.7rem 1.25rem;color:#e2e8f0;font-weight:500;font-size:.875rem;transition:border-color .3s,color .3s,background .3s}
.btn-outline:hover{border-color:rgba(34,211,238,.7);color:#fff;background:rgba(255,255,255,.04)}
.btn-outline:focus{outline:2px solid rgba(34,211,238,.5);outline-offset:3px}
.logo-icon{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:.75rem;background:linear-gradient(135deg,#3D7EFF,#22D3EE);box-shadow:0 0 18px rgba(45,212,238,.35)}
.nav-pill{white-space:nowrap;padding:.45rem 1rem;border-radius:999px;font-size:.875rem;color:#94a3b8;border:1px solid transparent;transition:color .2s,background .2s,border-color .2s;display:inline-flex;align-items:center}
.nav-pill:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-pill.active{color:#22d3ee;background:rgba(34,211,238,.08);border-color:rgba(34,211,238,.28);box-shadow:0 0 18px rgba(34,211,238,.15)}
.channel-row{transition:transform .25s ease,opacity .25s ease}
.channel-row.nav-hidden{transform:translateY(-8px);opacity:0;pointer-events:none}
.search-pill{height:2.4rem;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);border-radius:999px;padding-left:1rem;padding-right:.5rem;display:flex;align-items:center;gap:.5rem;color:#64748b;transition:border-color .2s,background .2s}
.search-pill:focus-within{border-color:rgba(34,211,238,.45);background:rgba(255,255,255,.08)}
.search-pill input{background:transparent;border:0;color:#e2e8f0;width:100%;font-size:.875rem}
.search-pill input::placeholder{color:#475569}
.search-pill:focus-within input{outline:none}
kbd{border:1px solid rgba(255,255,255,.12);border-radius:.375rem;padding:.1rem .4rem;font-size:.75rem;background:rgba(255,255,255,.06);color:#64748b}
.text-link{color:#94a3b8;font-size:.875rem;transition:color .2s}
.text-link:hover{color:#22d3ee}
.text-gradient-brand{background:linear-gradient(120deg,#67e8f9,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.marquee-mask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee{display:flex;width:max-content;animation:marquee 40s linear infinite}
.marquee:hover{animation-play-state:paused}
.marquee-item{display:flex;align-items:center;gap:.5rem;padding:0 2.5rem;color:#64748b;font-size:1rem;white-space:nowrap;opacity:.6;transition:opacity .3s}
.marquee-item:hover{opacity:1}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(circle at 65% 40%,#000,transparent 75%);-webkit-mask-image:radial-gradient(circle at 65% 40%,#000,transparent 75%)}
.terminal{background:rgba(11,18,34,.82);border:1px solid rgba(255,255,255,.14);border-radius:1.25rem;backdrop-filter:blur(18px);box-shadow:0 30px 80px -20px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08)}
.terminal-bar{display:flex;align-items:center;gap:.5rem;padding:.85rem 1rem;border-bottom:1px solid rgba(255,255,255,.08)}
.terminal-dot{width:.65rem;height:.65rem;border-radius:999px}
.terminal-body{padding:1rem 1.1rem 1.2rem}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.scene-card img{transition:transform .5s}
.scene-card:hover img{transform:scale(1.04)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-icon{font-size:1.4rem;font-weight:300;line-height:1;transition:transform .3s;color:#22d3ee;margin-left:1rem}
.pulse-dot{position:relative}
.pulse-dot::after{content:"";position:absolute;left:-.35rem;top:50%;width:.4rem;height:.4rem;border-radius:50%;transform:translateY(-50%);background:#22d3ee;box-shadow:0 0 0 0 rgba(34,211,238,.55);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,211,238,.5)}70%{box-shadow:0 0 0 6px rgba(34,211,238,0)}100%{box-shadow:0 0 0 0 rgba(34,211,238,0)}}
.stat-num{font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.hex-card{position:relative;overflow:hidden}
.hex-card::after{content:"";position:absolute;right:-4rem;top:-4rem;width:12rem;height:12rem;background:radial-gradient(circle,rgba(34,211,238,.18),transparent 70%);opacity:0;transition:opacity .4s}
.hex-card:hover::after{opacity:1}
@keyframes scan{0%{transform:translateX(-120%)}100%{transform:translateX(300%)}}
.scanline{position:relative;overflow:hidden}
.scanline::before{content:"";position:absolute;top:0;left:0;height:100%;width:30%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.08),transparent);transform:translateX(-200%);animation:scan 3.4s infinite}
.hover-lift{transition:transform .3s,border-color .3s,background .3s}
.hover-lift:hover{transform:translateY(-4px);border-color:rgba(34,211,238,.4);background:rgba(255,255,255,.07)}
.footer-bg{background:#050810}
::focus-visible{outline:2px solid #22d3ee;outline-offset:3px}
input[type="text"]:focus,input[type="search"]:focus{border-color:rgba(34,211,238,.45)}

/* roulang page: category1 */
:root{
    --bg:#060B18;
    --bg-2:#0B1222;
    --bg-3:#0D1526;
    --blue:#3D7EFF;
    --cyan:#22D3EE;
    --cyan-soft:#7DD3FC;
    --text:#F8FAFC;
    --muted:#94A3B8;
    --faint:#64748B;
    --border:rgba(255,255,255,.08);
    --radius:1rem;
    --radius-lg:1.5rem;
  }
  *{
    box-sizing:border-box;
  }
  html{
    scroll-behavior:smooth;
  }
  body{
    font-family:"PingFang SC","HarmonicOS Sans SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
    background:var(--bg);
    color:var(--muted);
    line-height:1.75;
    overflow-x:hidden;
  }
  ::selection{
    background:rgba(34,211,238,.26);
    color:#fff;
  }
  .container-page{
    width:100%;
    max-width:1280px;
    margin-left:auto;
    margin-right:auto;
    padding-left:1rem;
    padding-right:1rem;
  }
  @media (min-width:640px){
    .container-page{
      padding-left:1.5rem;
      padding-right:1.5rem;
    }
  }
  @media (min-width:1024px){
    .container-page{
      padding-left:2rem;
      padding-right:2rem;
    }
  }
  .no-scrollbar::-webkit-scrollbar{
    display:none;
  }
  .no-scrollbar{
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  a,button,input,textarea,[tabindex]{
    -webkit-tap-highlight-color:transparent;
  }
  a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
    outline:2px solid var(--cyan);
    outline-offset:3px;
    border-radius:6px;
  }
  img{
    max-width:100%;
    display:block;
  }
  .text-gradient{
    background-image:linear-gradient(95deg,#f8fafc,#7dd3fc 42%,#22d3ee);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .eyebrow{
    letter-spacing:.3em;
    text-transform:uppercase;
    font-size:.75rem;
    font-weight:600;
    color:#67e8f9;
  }
  @media (min-width:768px){
    .eyebrow{
      font-size:.875rem;
    }
  }
  .site-header{
    background:rgba(6,11,24,.78);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
  }
  .logo-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:10px;
    background:linear-gradient(145deg,rgba(61,126,255,.3),rgba(34,211,238,.15));
    border:1px solid rgba(255,255,255,.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 18px rgba(61,126,255,.15);
  }
  .announcement-bar{
    background:linear-gradient(180deg,#050810,#070d1c);
    border-bottom:1px solid rgba(255,255,255,.05);
  }
  .pulse-dot{
    width:6px;
    height:6px;
    border-radius:9999px;
    background:var(--cyan);
    animation:pulse-dot 1.8s ease-out infinite;
  }
  @keyframes pulse-dot{
    0%{box-shadow:0 0 0 0 rgba(34,211,238,.45);}
    70%{box-shadow:0 0 0 8px rgba(34,211,238,0);}
    100%{box-shadow:0 0 0 0 rgba(34,211,238,0);}
  }
  .nav-pill{
    white-space:nowrap;
    border-radius:9999px;
    padding:.42rem .9rem;
    font-size:.875rem;
    line-height:1.25rem;
    border:1px solid transparent;
    transition:all .2s ease;
  }
  .nav-pill:hover{
    color:#fff;
    background:rgba(255,255,255,.08);
  }
  .nav-pill.active{
    background:rgba(34,211,238,.1);
    border-color:rgba(34,211,238,.28);
    color:#67e8f9;
    box-shadow:0 0 18px rgba(34,211,238,.12);
  }
  .hero-grid-pattern{
    background-image:
      linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:44px 44px;
    -webkit-mask-image:radial-gradient(ellipse at 65% 30%,#000 0%,transparent 70%);
    mask-image:radial-gradient(ellipse at 65% 30%,#000 0%,transparent 70%);
  }
  .card-glass{
    background:rgba(255,255,255,.045);
    border:1px solid var(--border);
    border-radius:1.5rem;
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    transition:background .3s ease,border .3s ease,transform .3s ease;
  }
  .card-glass:hover{
    background:rgba(255,255,255,.07);
    border-color:rgba(255,255,255,.16);
    transform:translateY(-2px);
  }
  .btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    background:var(--blue);
    color:#fff;
    font-weight:600;
    border-radius:.75rem;
    padding:.75rem 1.4rem;
    font-size:.95rem;
    box-shadow:0 0 24px rgba(61,126,255,.32);
    transition:background .25s ease,box-shadow .25s ease,transform .25s ease;
  }
  .btn-primary:hover{
    background:#5b93ff;
    box-shadow:0 0 34px rgba(61,126,255,.52);
    transform:translateY(-1px);
  }
  .btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    background:transparent;
    color:#e2e8f0;
    font-weight:500;
    border-radius:.75rem;
    padding:.75rem 1.4rem;
    font-size:.95rem;
    border:1px solid rgba(255,255,255,.16);
    transition:border-color .25s ease,color .25s ease,background .25s ease;
  }
  .btn-secondary:hover{
    border-color:rgba(34,211,238,.65);
    color:#fff;
    background:rgba(34,211,238,.06);
  }
  .metric-value{
    font-family:"Rajdhani","DIN Alternate",ui-monospace,SFMono-Regular,monospace;
    font-variant-numeric:tabular-nums;
    letter-spacing:.02em;
  }
  .corner-glow{
    position:relative;
    overflow:hidden;
  }
  .corner-glow::before{
    content:"";
    position:absolute;
    width:74px;
    height:74px;
    right:-18px;
    top:-18px;
    border-radius:9999px;
    background:rgba(34,211,238,.12);
    filter:blur(24px);
    transition:opacity .3s;
    opacity:.65;
    pointer-events:none;
  }
  .corner-glow:hover::before{
    opacity:1;
  }
  .faq-answer{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .35s ease;
  }
  .faq-answer-inner{
    overflow:hidden;
  }
  .faq-item.open .faq-answer{
    grid-template-rows:1fr;
  }
  .faq-question-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:none;
    width:2rem;
    height:2rem;
    border-radius:9999px;
    border:1px solid rgba(255,255,255,.1);
    color:#94a3b8;
    font-size:1.1rem;
    transition:transform .3s ease,border-color .3s ease,color .3s ease,background .3s ease;
  }
  .faq-question:hover .faq-question-icon{
    border-color:rgba(34,211,238,.4);
    color:#67e8f9;
  }
  .faq-item.open .faq-question-icon{
    transform:rotate(45deg);
    background:rgba(34,211,238,.12);
    border-color:rgba(34,211,238,.4);
    color:#22d3ee;
  }
  .soft-banner{
    background:
      radial-gradient(circle at 8% 20%,rgba(61,126,255,.18),transparent 30%),
      radial-gradient(circle at 88% 82%,rgba(34,211,238,.13),transparent 32%),
      #0B1222;
    border:1px solid rgba(255,255,255,.08);
    border-radius:1.5rem;
  }
  .footer-bg{
    background:#050810;
  }
  .footer-bg a{
    transition:color .2s ease;
  }
  .check-line{
    position:relative;
    padding-left:2rem;
  }
  .check-line::before{
    content:"";
    position:absolute;
    left:0;
    top:.32rem;
    width:1.1rem;
    height:1.1rem;
    border-radius:9999px;
    background:rgba(34,211,238,.15);
    border:1px solid rgba(34,211,238,.4);
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 8.5 6.5 11 12 5' stroke='%2322D3EE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
  }
  .step-number{
    font-family:"Rajdhani","DIN Alternate",ui-monospace,monospace;
    font-size:2.75rem;
    line-height:1;
    font-weight:700;
    color:rgba(34,211,238,.35);
    transition:color .3s ease;
  }
  .step-card:hover .step-number{
    color:#22d3ee;
  }
  .tag-pill{
    display:inline-flex;
    align-items:center;
    border-radius:9999px;
    padding:.3rem .75rem;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
    color:#7d8ba3;
    font-size:.8rem;
    transition:all .2s ease;
  }
  .tag-pill:hover{
    border-color:rgba(34,211,238,.35);
    color:#67e8f9;
    background:rgba(34,211,238,.06);
  }

/* roulang page: article */
:root{
  --bg:#060B18;
  --bg-card:rgba(255,255,255,.04);
  --bg-panel:#0B1222;
  --bg-footer:#050810;
  --line:rgba(255,255,255,.08);
  --line-soft:rgba(255,255,255,.06);
  --text-strong:#F8FAFC;
  --text:#C7D0DD;
  --text-body:#94A3B8;
  --text-muted:#64748B;
  --brand:#3D7EFF;
  --brand-hover:#5A91FF;
  --accent:#22D3EE;
  --accent-soft:#7DD3FC;
  --success:#34D399;
  --radius:1.25rem;
  --shadow-glow:0 0 24px rgba(59,130,246,.35);
  --font-sans:"PingFang SC","HarmonicOS Sans SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text-body);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
  margin:0;
  color:var(--text-strong);
  line-height:1.25;
  letter-spacing:-.02em;
  text-wrap:balance;
}
p{margin:0}
a{color:inherit;text-decoration:none;transition:color .2s ease,border-color .2s ease,background .2s ease}
img{display:block;max-width:100%;height:auto}
button{font-family:inherit}
svg{vertical-align:middle}
input{font-family:inherit}
::selection{background:rgba(34,211,238,.35);color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:2px solid rgba(34,211,238,.75);
  outline-offset:3px;
  border-radius:8px;
}
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}
.container-page{
  width:100%;
  max-width:80rem;
  margin-left:auto;
  margin-right:auto;
  padding-left:1.25rem;
  padding-right:1.25rem;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.28em;
  color:var(--accent);
  text-transform:uppercase;
}
.logo-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(61,126,255,.22),rgba(34,211,238,.10));
  border:1px solid rgba(61,126,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  color:#fff;
}
.text-gradient{
  background:linear-gradient(94deg,#fff 30%,#7DD3FC 68%,#22D3EE 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border:1px solid rgba(93,145,255,.55);
  background:linear-gradient(180deg,rgba(90,145,255,.95),rgba(53,112,238,.98));
  color:#fff;
  font-weight:600;
  font-size:.92rem;
  line-height:1;
  padding:.95rem 1.4rem;
  border-radius:.8rem;
  box-shadow:var(--shadow-glow);
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.btn-primary:hover{
  background:linear-gradient(180deg,rgba(110,165,255,.98),rgba(73,132,255,.98));
  box-shadow:0 0 34px rgba(59,130,246,.56);
  transform:translateY(-2px);
  color:#fff;
}
.btn-primary:active{transform:translateY(0)}
.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.03);
  color:#E2E8F0;
  font-weight:600;
  font-size:.92rem;
  line-height:1;
  padding:.95rem 1.4rem;
  border-radius:.8rem;
  transition:border-color .25s ease,color .25s ease,background .25s ease,transform .25s ease;
}
.btn-outline:hover{
  border-color:rgba(34,211,238,.7);
  color:#fff;
  background:rgba(34,211,238,.07);
  transform:translateY(-2px);
}
.topbar{
  position:relative;
  z-index:60;
  border-bottom:1px solid var(--line-soft);
  background:rgba(5,8,16,.75);
  overflow:hidden;
  transition:max-height .3s ease,opacity .3s ease,padding .3s ease;
}
.topbar-inner{
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-top:.4rem;
  padding-bottom:.4rem;
}
.topbar-inner p{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-size:.8rem;
  color:var(--text-body);
}
.topbar-dot{
  width:6px;
  height:6px;
  flex:0 0 auto;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 0 rgba(34,211,238,.55);
  animation:dot-pulse 1.8s infinite;
}
@keyframes dot-pulse{
  0%{box-shadow:0 0 0 0 rgba(34,211,238,.55)}
  70%{box-shadow:0 0 0 8px rgba(34,211,238,0)}
  100%{box-shadow:0 0 0 0 rgba(34,211,238,0)}
}
.topbar-link{
  color:#94A3B8;
  font-size:.8rem;
  white-space:nowrap;
}
.topbar-link:hover{color:var(--accent)}
.site-header{
  position:sticky;
  top:0;
  left:0;
  right:0;
  z-index:50;
  border-bottom:1px solid rgba(255,255,255,.05);
  background:rgba(6,11,24,.78);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.header-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:72px;
  gap:1rem;
}
.logo-lockup{
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-shrink:0;
}
.brand-name{
  font-size:1.42rem;
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1;
  color:#fff;
}
.brand-name span{color:var(--accent)}
.brand-sub{
  display:block;
  margin-top:.3rem;
  font-size:.65rem;
  letter-spacing:.16em;
  color:#64748B;
  white-space:nowrap;
}
.header-search{
  margin-left:auto;
}
.search-shell{
  display:flex;
  align-items:center;
  gap:.5rem;
  width:min(21rem,100%);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  padding:.45rem .45rem .45rem 1rem;
  color:#64748B;
  transition:border-color .2s ease,background .2s ease;
}
.search-shell:focus-within{
  border-color:rgba(34,211,238,.5);
  background:rgba(255,255,255,.07);
  box-shadow:0 0 0 4px rgba(34,211,238,.06);
}
.search-shell input{
  width:100%;
  min-width:0;
  background:transparent;
  border:0;
  outline:0;
  color:#E2E8F0;
  font-size:.86rem;
}
.search-shell input::placeholder{color:#475569}
.search-key{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  padding:.2rem .45rem;
  font-size:.62rem;
  color:#64748B;
  background:rgba(255,255,255,.03);
}
.header-auth{
  display:inline-flex;
  flex-shrink:0;
  align-items:center;
  gap:.35rem;
  font-size:.86rem;
  color:#94A3B8;
  white-space:nowrap;
}
.header-auth a:hover{color:#fff}
.header-cta{
  padding:.62rem .95rem;
  font-size:.82rem;
  border-radius:10px;
  box-shadow:0 0 18px rgba(59,130,246,.24);
}
.nav-bar{
  border-top:1px solid rgba(255,255,255,.05);
  background:rgba(8,13,26,.3);
  transition:max-height .3s ease,opacity .3s ease,padding .3s ease;
}
.nav-row{
  display:flex;
  align-items:center;
  gap:.25rem;
  padding-top:.35rem;
  padding-bottom:.35rem;
}
.nav-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  padding:.42rem .92rem;
  border-radius:999px;
  border:1px solid transparent;
  font-size:.86rem;
  font-weight:500;
  color:#94A3B8;
  transition:color .2s ease,background .2s ease,border-color .2s ease;
}
.nav-pill:hover{
  color:#fff;
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.05);
}
.nav-pill.active{
  color:#67E8F9;
  background:rgba(34,211,238,.10);
  border-color:rgba(34,211,238,.25);
  box-shadow:0 0 16px rgba(34,211,238,.08);
}
.topbar-rollup{
  max-height:0 !important;
  opacity:0;
  overflow:hidden;
  border-bottom-color:transparent;
}
.nav-row-rollup{
  max-height:0 !important;
  padding-top:0;
  padding-bottom:0;
  border-top-color:transparent;
  opacity:0;
  overflow:hidden;
}
.article-hero{
  position:relative;
  overflow:hidden;
  background:#0B1222;
}
.article-hero-bg{
  position:absolute;
  inset:0;
  background-image:url('/assets/images/backpic/back-2.webp');
  background-position:center;
  background-size:cover;
  opacity:.22;
}
.article-hero::after{
  content:"";
  position:absolute;
  inset:auto -10% -20% auto;
  width:70%;
  height:70%;
  background:radial-gradient(closest-side,rgba(34,211,238,.16),transparent 68%);
  pointer-events:none;
}
.article-hero-inner{
  position:relative;
  z-index:2;
  max-width:52rem;
  margin:0 auto;
  padding-top:4.5rem;
  padding-bottom:4rem;
}
@media(min-width:1024px){
  .article-hero-inner{padding-top:6rem;padding-bottom:5.5rem}
}
.crumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.55rem;
  font-size:.86rem;
  color:#64748B;
}
.crumb a{color:#94A3B8}
.crumb a:hover{color:var(--accent)}
.crumb-sep{color:#334155}
.crumb-current{color:#CBD5E1;font-weight:500}
.article-kicker{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-top:1.1rem;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.08em;
  color:#7DD3FC;
  border:1px solid rgba(125,211,252,.22);
  background:rgba(125,211,252,.07);
  padding:.35rem .8rem;
  border-radius:999px;
}
.article-title{
  max-width:48rem;
  margin-top:1.35rem;
  font-size:clamp(1.8rem,4vw,3.2rem);
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1.2;
  color:var(--text-strong);
}
.article-summary{
  max-width:42rem;
  margin-top:1.4rem;
  color:#B0B8C6;
  font-size:1rem;
  line-height:2;
}
.article-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem;
  margin-top:1.6rem;
  color:#64748B;
  font-size:.86rem;
}
.meta-pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.meta-pill svg{color:var(--accent)}
.meta-split{
  width:1px;
  height:14px;
  background:rgba(255,255,255,.12);
}
.article-main-shell{
  position:relative;
  z-index:3;
}
.article-card-wrap{
  max-width:56rem;
  margin-left:auto;
  margin-right:auto;
  padding:2rem 1.25rem 3rem;
}
.article-card{
  background:rgba(255,255,255,.028);
  border:1px solid rgba(255,255,255,.075);
  border-radius:1.75rem;
  padding:1.5rem 1.25rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 30px 70px -30px rgba(0,0,0,.5);
  backdrop-filter:blur(8px);
}
@media(min-width:768px){
  .article-card{padding:3rem}
}
.article-body{
  max-width:46rem;
  margin:0 auto;
  color:#C7D0DD;
  font-size:1.07rem;
  line-height:2;
}
.article-body > * + *{margin-top:1.4rem}
.article-body h2{
  position:relative;
  margin-top:3rem;
  margin-bottom:.9rem;
  padding-left:1.05rem;
  font-size:1.5rem;
  font-weight:750;
  letter-spacing:-.02em;
  color:#F8FAFC;
  line-height:1.4;
}
.article-body h2::before{
  content:"";
  position:absolute;
  left:0;
  top:.38em;
  bottom:.38em;
  width:4px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--brand),var(--accent));
}
.article-body h3{
  margin-top:2.2rem;
  margin-bottom:.6rem;
  font-size:1.2rem;
  font-weight:700;
  color:#EDF2F7;
}
.article-body h4{
  margin-top:1.6rem;
  font-size:1.06rem;
  font-weight:700;
  color:#E2E8F0;
}
.article-body p{color:#B9C2D0}
.article-body a{
  color:#7DD3FC;
  text-decoration:underline;
  text-decoration-color:rgba(34,211,238,.3);
  text-underline-offset:4px;
}
.article-body a:hover{color:#fff;text-decoration-color:var(--accent)}
.article-body strong,.article-body b{color:#E2E8F0;font-weight:650}
.article-body em{color:#CBD5E1}
.article-body ul,.article-body ol{
  padding-left:1.2rem;
  margin-top:1.4rem;
  margin-bottom:1.4rem;
}
.article-body ul{list-style:disc}
.article-body ol{list-style:decimal}
.article-body li{margin:.55rem 0;padding-left:.15rem}
.article-body li::marker{color:var(--accent)}
.article-body blockquote{
  position:relative;
  border:1px solid rgba(61,126,255,.18);
  border-left:3px solid var(--brand);
  background:rgba(61,126,255,.06);
  border-radius:.9rem;
  padding:1.25rem 1.5rem;
  color:#B9C9E0;
}
.article-body blockquote p{color:#B9C9E0}
.article-body blockquote cite{
  display:block;
  margin-top:.7rem;
  font-size:.85rem;
  font-style:normal;
  color:#64748B;
}
.article-body img{
  border-radius:1rem;
  border:1px solid rgba(255,255,255,.08);
  margin:2rem 0;
  width:100%;
  height:auto;
}
.article-body figure{
  margin:2rem 0;
}
.article-body figcaption{
  margin-top:.7rem;
  font-size:.82rem;
  color:#64748B;
  text-align:center;
}
.article-body hr{
  height:1px;
  border:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  margin:2.5rem 0;
}
.article-body table{
  width:100%;
  margin:2rem 0;
  border-collapse:collapse;
  font-size:.95rem;
  line-height:1.6;
  overflow:hidden;
  border-radius:.9rem;
}
.article-body th{
  text-align:left;
  background:rgba(61,126,255,.14);
  color:#E2E8F0;
  border:1px solid rgba(255,255,255,.08);
  padding:.8rem 1rem;
  font-weight:600;
}
.article-body td{
  border:1px solid rgba(255,255,255,.07);
  padding:.75rem 1rem;
  color:#AEB8C6;
}
.article-body tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.article-body pre{
  background:#0B1526;
  border:1px solid rgba(255,255,255,.09);
  border-radius:1rem;
  padding:1.25rem 1.5rem;
  overflow-x:auto;
  color:#D5E4F4;
  font-size:.9rem;
  line-height:1.8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.article-body code{
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  background:rgba(34,211,238,.08);
  border:1px solid rgba(34,211,238,.12);
  border-radius:.4rem;
  padding:.15rem .4rem;
  font-size:.9em;
  color:#A5F3FC;
}
.article-body pre code{
  background:transparent;
  border:0;
  padding:0;
  color:inherit;
  font-size:inherit;
}
.article-break{
  height:1px;
  margin:2.2rem 0 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
}
.article-bottom{
  max-width:46rem;
  margin:0 auto;
  padding-top:1.6rem;
}
.post-tag-list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
}
.post-tag-list span{
  display:inline-flex;
  align-items:center;
  font-size:.8rem;
  color:#94A3B8;
  padding:.3rem .8rem;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  background:rgba(255,255,255,.03);
}
.post-tag-list span:hover{
  color:#67E8F9;
  border-color:rgba(34,211,238,.4);
}
.article-pager{
  display:grid;
  grid-template-columns:1fr;
  gap:.9rem;
  margin-top:2rem;
}
@media(min-width:768px){.article-pager{grid-template-columns:1fr 1fr}}
.pager-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.025);
  border-radius:1rem;
  padding:1rem 1.15rem;
  color:#CBD5E1;
  font-size:.92rem;
  transition:border-color .22s ease,background .22s ease,transform .22s ease;
}
.pager-card:hover{
  border-color:rgba(125,211,252,.55);
  background:rgba(125,211,252,.06);
  transform:translateY(-2px);
  color:#fff;
}
.pager-card.next{flex-direction:row-reverse;text-align:right}
.pager-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:#7DD3FC;
  font-size:1rem;
  flex:0 0 auto;
  transition:background .2s ease,color .2s ease;
}
.pager-card:hover .pager-icon{
  background:rgba(34,211,238,.16);
  color:#fff;
}
.return-row{
  margin-top:1.5rem;
  text-align:center;
}
.return-row a{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  font-size:.9rem;
  font-weight:600;
  color:#94A3B8;
  padding:.75rem 1.5rem;
  border-radius:999px;
  border:1px solid transparent;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.return-row a:hover{
  color:#fff;
  border-color:rgba(34,211,238,.4);
  background:rgba(34,211,238,.06);
}
.no-content-section{
  max-width:38rem;
  margin:0 auto;
  padding:5.5rem 1.25rem;
}
.no-content-card{
  text-align:center;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.025);
  border-radius:1.5rem;
  padding:3.2rem 2rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.no-content-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  margin:0 auto 1.1rem;
  border-radius:18px;
  background:rgba(34,211,238,.08);
  border:1px solid rgba(34,211,238,.2);
  color:var(--accent);
}
.no-content-card h1{
  font-size:1.6rem;
  font-weight:800;
  color:#F8FAFC;
}
.no-content-card p{
  margin-top:.8rem;
  color:#94A3B8;
  font-size:.96rem;
}
.no-content-card .btn-primary{
  margin-top:1.8rem;
}
.related-section{
  background:linear-gradient(180deg,transparent,rgba(13,21,38,.6) 30%,transparent);
  border-top:1px solid rgba(255,255,255,.05);
}
.related-inner{
  max-width:72rem;
  margin:0 auto;
  padding:4.5rem 1.25rem 3rem;
}
.related-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.8rem;
}
.related-head h2{
  font-size:1.6rem;
  font-weight:800;
  color:#F8FAFC;
}
.related-head a{
  font-size:.9rem;
  color:#94A3B8;
  white-space:nowrap;
}
.related-head a:hover{color:var(--accent)}
.related-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.1rem;
}
@media(min-width:768px){.related-grid{grid-template-columns:repeat(3,1fr)}}
.related-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  border-radius:1.25rem;
  transition:transform .28s ease,border-color .28s ease,background .28s ease;
}
.related-card:hover{
  transform:translateY(-4px);
  border-color:rgba(125,211,252,.45);
  background:rgba(255,255,255,.05);
}
.related-thumb-frame{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/10;
  background:#0E1728;
}
.related-thumb-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.95;
  transition:transform .45s ease,opacity .45s ease;
}
.related-card:hover .related-thumb-frame img{
  transform:scale(1.05);
  opacity:1;
}
.related-thumb-frame::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 58%,rgba(6,11,24,.2));
  pointer-events:none;
}
.related-body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:1.1rem 1.2rem 1.2rem;
}
.related-badge{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  font-size:.68rem;
  letter-spacing:.08em;
  font-weight:700;
  color:#67E8F9;
  text-transform:uppercase;
  border:1px solid rgba(34,211,238,.22);
  background:rgba(34,211,238,.08);
  border-radius:999px;
  padding:.2rem .6rem;
}
.related-card h3{
  margin-top:.8rem;
  font-size:1.02rem;
  font-weight:700;
  line-height:1.5;
  color:#F1F5F9;
}
.related-card h3:hover{color:var(--accent)}
.related-excerpt{
  margin-top:.6rem;
  font-size:.87rem;
  line-height:1.7;
  color:#7C8598;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  flex:1;
}
.related-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.65rem;
  margin-top:1rem;
  padding-top:.8rem;
  border-top:1px solid rgba(255,255,255,.06);
  color:#64748B;
  font-size:.77rem;
}
.related-meta span:last-child{
  color:#7DD3FC;
  display:inline-flex;
  align-items:center;
  gap:.3rem;
}
.cta-section{
  position:relative;
  overflow:hidden;
  padding:3.5rem 1.25rem 4.5rem;
}
.cta-panel{
  position:relative;
  overflow:hidden;
  max-width:72rem;
  margin:0 auto;
  border:1px solid rgba(125,211,252,.2);
  background:
    radial-gradient(600px 300px at 85% -20%,rgba(34,211,238,.15),transparent 60%),
    radial-gradient(700px 300px at 0% 120%,rgba(59,130,246,.22),transparent 55%),
    rgba(10,17,32,.9);
  border-radius:2rem;
  padding:2.4rem 1.5rem;
  text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
@media(min-width:768px){.cta-panel{padding:4.2rem 3rem}}
.cta-panel::before{
  content:"";
  position:absolute;
  top:-70px;
  left:50%;
  width:420px;
  height:150px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.18),transparent);
  filter:blur(20px);
  transform:translateX(-50%);
  animation:scan-flow 5s ease-in-out infinite;
}
@keyframes scan-flow{
  0%,100%{opacity:.35;transform:translate(-50%,-14px)}
  50%{opacity:.8;transform:translate(-50%,10px)}
}
.cta-panel h2{
  position:relative;
  font-size:clamp(1.55rem,4vw,2.5rem);
  font-weight:800;
  letter-spacing:-.03em;
  color:#F8FAFC;
}
.cta-panel p{
  position:relative;
  margin:1rem auto 0;
  max-width:40rem;
  color:#94A3B8;
  font-size:1rem;
  line-height:2;
}
.cta-actions{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  margin-top:2rem;
}
.footer-bg{
  background:#050810;
  border-top:1px solid rgba(34,211,238,.12);
}
.footer-title{
  color:#E2E8F0;
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.footer-links{
  list-style:none;
  margin:.5rem 0 0;
  padding:0;
}
.footer-links li{margin-top:.88rem}
.footer-links a{
  color:#64748B;
  font-size:.9rem;
  line-height:1.5;
}
.footer-links a:hover{color:var(--accent)}
.footer-divider{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 25%,rgba(255,255,255,.08) 75%,transparent);
  margin-top:2.6rem;
}
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.8rem;
  padding-top:1.6rem;
  padding-bottom:2.4rem;
  font-size:.78rem;
  color:#475569;
}
.footer-bottom a{color:#64748B}
.footer-bottom a:hover{color:#94A3B8}
@media(max-width:1023px){
  .header-search{display:none}
  .header-auth{display:none}
}
@media(max-width:640px){
  .container-page{padding-left:1rem;padding-right:1rem}
  .toppbar p{font-size:.75rem}
  .brand-name{font-size:1.22rem}
  .header-main{min-height:66px}
  .header-cta{padding:.55rem .82rem;font-size:.78rem}
  .hero-cta .btn-primary,.hero-cta .btn-outline{padding:.8rem 1.1rem}
  .article-card-wrap{padding-left:.75rem;padding-right:.75rem}
  .article-card{padding:1rem .75rem;border-radius:1.25rem}
  .article-bottom{padding-left:.25rem;padding-right:.25rem}
  .no-content-card{padding:2.4rem 1rem}
}

/* roulang page: category2 */
:root{
    --bg:#060B18;
    --bg-soft:#0B1222;
    --bg-muted:#0D1526;
    --brand:#3D7EFF;
    --accent:#22D3EE;
    --cyan-soft:#7DD3FC;
    --sky:#38BDF8;
    --text-head:#F8FAFC;
    --text-body:#94A3B8;
    --text-mute:#64748B;
    --border-soft:rgba(255,255,255,.08);
    --glass:rgba(255,255,255,.04);
    --radius:1rem;
    --font-ui:"PingFang SC","HarmonicOS Sans SC","Microsoft YaHei","system-ui",sans-serif;
  }
  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text-body);
    font-family:var(--font-ui);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  ::selection{background:rgba(34,211,238,.28);color:#fff;}
  a,button,input,textarea{transition:all .25s ease;}
  img{max-width:100%;height:auto;display:block;}
  .container-page{max-width:80rem;margin-left:auto;margin-right:auto;padding-left:1.25rem;padding-right:1.25rem;}
  @media(min-width:768px){.container-page{padding-left:2rem;padding-right:2rem;}}
  .no-scrollbar{scrollbar-width:none;}
  .no-scrollbar::-webkit-scrollbar{display:none;}
  .grad-text{
    background:linear-gradient(90deg,#ffffff 0%,#a5f3fc 45%,#22d3ee 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .glass-card{
    background:var(--glass);
    border:1px solid var(--border-soft);
    border-radius:1.25rem;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  }
  .eyebrow{
    font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:#67e8f9;
    font-weight:600;
  }
  .btn-primary{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    background:var(--brand);color:#fff;font-weight:500;border-radius:.8rem;
    padding:.75rem 1.5rem;border:1px solid rgba(61,126,255,.5);
    box-shadow:0 0 24px rgba(61,126,255,.32);
  }
  .btn-primary:hover{background:#5b92ff;transform:translateY(-1px);box-shadow:0 0 34px rgba(61,126,255,.52);}
  .btn-ghost{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    border:1px solid rgba(255,255,255,.16);color:#e2e8f0;border-radius:.8rem;
    padding:.75rem 1.5rem;font-weight:500;background:rgba(255,255,255,.02);
  }
  .btn-ghost:hover{border-color:rgba(34,211,238,.7);color:#fff;background:rgba(34,211,238,.06);}
  .logo-icon{
    display:inline-flex;align-items:center;justify-content:center;width:2.2rem;height:2.2rem;
    border-radius:.7rem;border:1px solid rgba(34,211,238,.28);
    background:linear-gradient(145deg,rgba(34,211,238,.12),rgba(61,126,255,.18));
    box-shadow:0 0 20px rgba(34,211,238,.12);
  }
  .top-notice{
    background:rgba(8,14,27,.9);border-bottom:1px solid rgba(255,255,255,.06);
    color:var(--text-mute);font-size:.82rem;
  }
  .pulse-dot{position:relative;display:inline-flex;width:.4rem;height:.4rem;border-radius:9999px;background:#22d3ee;}
  .pulse-dot::after{content:"";position:absolute;inset:-4px;border-radius:9999px;border:1px solid rgba(34,211,238,.6);animation:pulseRing 2s ease-out infinite;}
  @keyframes pulseRing{0%{transform:scale(.4);opacity:1;}80%,100%{transform:scale(1.4);opacity:0;}}
  .site-header{
    position:sticky;top:0;z-index:50;
    background:rgba(6,11,24,.76);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,.05);
  }
  .nav-pill{
    display:inline-flex;align-items:center;flex-shrink:0;
    padding:.45rem 1rem;border-radius:9999px;font-size:.875rem;color:#94a3b8;
    border:1px solid transparent;white-space:nowrap;font-weight:500;
  }
  .nav-pill:hover{color:#fff;background:rgba(255,255,255,.07);}
  .nav-pill.active{
    color:#67e8f9;border-color:rgba(34,211,238,.35);
    background:rgba(34,211,238,.08);
    box-shadow:0 0 18px rgba(34,211,238,.1);
  }
  .category-hero-bg{
    position:absolute;inset:0;background-image:url("/assets/images/backpic/back-2.webp");
    background-size:cover;background-position:center;opacity:.14;
  }
  .category-hero-mask{
    position:absolute;inset:0;
    background:radial-gradient(ellipse 70% 100% at 20% 0%,rgba(61,126,255,.12),transparent 60%),
               radial-gradient(ellipse 60% 90% at 90% 20%,rgba(34,211,238,.08),transparent 60%);
  }
  .hero-grid-floor{
    position:absolute;inset:auto 0 0 0;height:34%;
    background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:36px 36px;mask-image:linear-gradient(to top,#000,transparent);
  }
  .float-panel{
    border:1px solid rgba(255,255,255,.1);border-radius:1.4rem;
    background:rgba(13,21,38,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    box-shadow:0 30px 80px -24px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.07);
  }
  .scanGlow{
    position:relative;overflow:hidden;
  }
  .scanGlow::before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(100deg,transparent 20%,rgba(34,211,238,.18) 50%,transparent 80%);
    transform:translateX(-120%);animation:scanEffect 5s ease-in-out infinite;
  }
  @keyframes scanEffect{0%{transform:translateX(-120%);}55%,100%{transform:translateX(120%);}}
  .stat-card{border-top:1px solid rgba(255,255,255,.06);}
  .tag-pill{
    display:inline-flex;align-items:center;border-radius:9999px;
    border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03);
    color:#94a3b8;font-size:.8rem;padding:.25rem .75rem;white-space:nowrap;
  }
  .tag-pill:hover{color:#a5f3fc;border-color:rgba(34,211,238,.35);}
  .feature-card{
    position:relative;overflow:hidden;
    background:var(--glass);border:1px solid var(--border-soft);border-radius:1.2rem;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    padding:1.5rem;
    transition:transform .3s ease,border-color .3s ease,background .3s ease;
  }
  .feature-card:hover{transform:translateY(-4px);border-color:rgba(34,211,238,.26);background:rgba(255,255,255,.055);}
  .corner-dot{
    position:absolute;top:1rem;right:1rem;width:5px;height:5px;border-radius:9999px;
    background:rgba(34,211,238,.7);box-shadow:0 0 10px rgba(34,211,238,.4);
  }
  .icon-sq{
    display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;
    border-radius:.75rem;border:1px solid rgba(34,211,238,.2);
    background:rgba(34,211,238,.06);color:#67e8f9;
  }
  .widget-block{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:1.2rem;padding:1.4rem;}
  .widget-block h3{font-size:1rem;font-weight:600;color:#f8fafc;}
  .list-row{
    display:flex;gap:.85rem;align-items:flex-start;padding:.9rem .15rem;
    border-bottom:1px solid rgba(255,255,255,.05);
  }
  .list-row:last-child{border-bottom:none;}
  .list-row:hover .list-arrow{transform:translateX(4px);color:#22d3ee;}
  .list-arrow{margin-left:auto;color:#64748b;transition:transform .25s ease,color .25s ease;font-size:1rem;}
  .process-index{
    font-family:"Rajdhani","SF Mono",ui-monospace,monospace;font-size:1.8rem;line-height:1;font-weight:800;
    color:rgba(125,211,252,.95);
  }
  .process-line{position:relative;}
  .process-line::before{content:"";position:absolute;left:2.25rem;top:3rem;bottom:0;width:1px;background:linear-gradient(to bottom,rgba(34,211,238,.32),rgba(255,255,255,.04));}
  .faq-item{border-bottom:1px solid rgba(255,255,255,.06);}
  .faq-toggle{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:1.35rem .2rem;color:#e2e8f0;font-size:1.06rem;text-align:left;width:100%;
  }
  .faq-toggle span:first-child{font-weight:500;}
  .faq-icon{
    flex-shrink:0;width:1.9rem;height:1.9rem;border-radius:.6rem;position:relative;
    border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);
  }
  .faq-icon::before,.faq-icon::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#94a3b8;border-radius:2px;}
  .faq-icon::before{width:10px;height:2px;}
  .faq-icon::after{width:2px;height:10px;}
  .faq-item[aria-expanded="true"] .faq-icon::after{opacity:0;transform:translate(-50%,-50%) rotate(90deg);}
  .faq-item[aria-expanded="true"] .faq-icon{border-color:rgba(34,211,238,.4);}
  .faq-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease;}
  .faq-item[aria-expanded="true"] .faq-panel{grid-template-rows:1fr;}
  .faq-content{overflow:hidden;}
  .faq-content>div{padding:0 .2rem 1.5rem;color:#94a3b8;font-size:.97rem;line-height:1.9;}
  .cta-panel{
    background:radial-gradient(80% 120% at 20% 10%,rgba(61,126,255,.24),transparent 60%),
               radial-gradient(60% 110% at 90% 90%,rgba(34,211,238,.12),transparent 60%),
               #0b1222;
    border:1px solid rgba(255,255,255,.08);
    overflow:hidden;position:relative;
  }
  .cta-panel::before,.cta-panel::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.04);}
  .cta-panel::before{width:220px;height:220px;border-radius:9999px;top:-110px;right:-40px;}
  .cta-panel::after{width:130px;height:130px;border-radius:9999px;bottom:-70px;left:8%;}
  .footer-bg{background:#050810;}
  .footer-bottom{border-top:1px solid rgba(255,255,255,.05);}
  input:focus-visible,button:focus-visible,a:focus-visible{
    outline:2px solid rgba(34,211,238,.55);outline-offset:2px;border-radius:4px;
  }
  .search-box{
    border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);
    border-radius:9999px;display:flex;align-items:center;gap:.5rem;
  }
  .search-box:focus-within{border-color:rgba(34,211,238,.35);box-shadow:0 0 0 3px rgba(34,211,238,.08);}
  @media (max-width:767px){
    .hero-cta .btn-primary,.hero-cta .btn-ghost{width:100%;}
  }

/* roulang page: category3 */
:root {
    --bg: #060B18;
    --bg2: #0B1222;
    --bg3: #0D1526;
    --card: rgba(255,255,255,0.04);
    --card-border: rgba(255,255,255,0.08);
    --blue: #3D7EFF;
    --cyan: #22D3EE;
    --cyan-light: #7DD3FC;
    --sky: #38BDF8;
    --success: #34D399;
    --warning: #FBBF24;
    --text: #F8FAFC;
    --muted: #94A3B8;
    --subtle: #64748B;
    --radius: 1rem;
    --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: #CBD5E1;
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
}

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

button,
input {
    font-family: inherit;
}

::selection {
    background: rgba(34, 211, 238, 0.28);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
    border-radius: 6px;
}

.no-scrollbar {
    scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.container-page {
    width: 100%;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (max-width: 640px) {
    .container-page {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

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

.header-bg {
    background: rgba(6, 11, 24, 0.72);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(61, 126, 255, 0.28), rgba(34, 211, 238, 0.1));
    border: 1px solid rgba(125, 211, 252, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px -16px rgba(61, 126, 255, 0.9);
}

.nav-pill {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 9px 17px;
    font-size: 14px;
    line-height: 1;
    color: #94A3B8;
    border: 1px solid transparent;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
    white-space: nowrap;
}
.nav-pill:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
}
.nav-pill.active {
    color: #67E8F9;
    background: rgba(34, 211, 238, 0.1);
    border-color: rgba(34, 211, 238, 0.32);
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.13);
}

.channel-row {
    display: none;
}
.channel-row.open {
    display: block;
}

@media (min-width: 768px) {
    .channel-row {
        display: block;
    }
}

.btn-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #3D7EFF;
    color: #fff;
    font-weight: 500;
    padding: 12px 20px;
    box-shadow: 0 0 24px rgba(59, 130, 246, 0.3);
    transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.btn-main:hover {
    background: #5b93ff;
    box-shadow: 0 0 34px rgba(59, 130, 246, 0.42);
    transform: translateY(-1px);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.14);
    color: #E2E8F0;
    padding: 12px 20px;
    font-weight: 500;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.btn-outline:hover {
    border-color: rgba(34, 211, 238, 0.65);
    color: #fff;
    background: rgba(34, 211, 238, 0.05);
}

.btn-sm {
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 12px;
}

.page-section {
    padding: 96px 0;
}

@media (max-width: 768px) {
    .page-section {
        padding: 60px 0;
    }
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    color: #67E8F9;
}
.eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: #22D3EE;
    box-shadow: 0 0 12px rgba(34,211,238,.6);
}

.glass-card {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}
.glass-card:hover {
    border-color: rgba(255, 255, 255, 0.17);
    background: rgba(255, 255, 255, 0.065);
}

.glass-soft {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
}

.hero-bg {
    background:
        radial-gradient(48% 80% at 84% 12%, rgba(59, 130, 246, 0.18), transparent 72%),
        radial-gradient(36% 58% at 12% 88%, rgba(34, 211, 238, 0.06), transparent 75%);
}
.hero-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
}

.stat-block {
    border-left: 1px solid rgba(255, 255, 255, 0.09);
    padding-left: 20px;
}

.panel-window {
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 24px 80px -30px rgba(0,0,0,0.75);
    backdrop-filter: blur(16px);
    overflow: hidden;
}

.entry-row {
    position: relative;
    display: flex;
    gap: 18px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.035);
    padding: 22px;
    transition: transform .24s ease, border-color .24s ease, background-color .24s ease;
}
.entry-row:hover {
    border-color: rgba(34, 211, 238, 0.34);
    background: rgba(255,255,255,0.055);
    transform: translateX(4px);
}
.entry-num {
    font-weight: 700;
    font-size: 34px;
    line-height: 1;
    color: rgba(248, 250, 252, 0.15);
    font-variant-numeric: tabular-nums;
}
.entry-row:hover .entry-num {
    color: rgba(34, 211, 238, 0.42);
}

.step-card {
    position: relative;
    border-radius: 22px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 28px;
    transition: transform .25s ease, border-color .25s ease;
}
.step-card:hover {
    transform: translateY(-4px);
    border-color: rgba(34,211,238,0.3);
}
.step-index {
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(125,211,252,0.5);
}

.tag-bubble {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    color: #94A3B8;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
}

.faq-wrap {
    border-top: 1px solid rgba(255,255,255,0.05);
}
.faq-item {
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding-top: 24px;
    padding-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    font-size: 16px;
    font-weight: 500;
    color: #E2E8F0;
    transition: color .2s ease;
}
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary:hover {
    color: #7DD3FC;
}
.faq-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.13);
    color: #22D3EE;
    font-size: 20px;
    transition: transform .3s ease, background-color .3s ease, border-color .3s ease;
}
.faq-item[open] .faq-icon {
    transform: rotate(45deg);
    background: rgba(34,211,238,.14);
    border-color: rgba(34,211,238,.4);
}
.faq-content {
    padding-bottom: 26px;
    max-width: 880px;
    color: #94A3B8;
    font-size: 15px;
}
.faq-item[open] .faq-content {
    animation: faq-in .28s ease;
}
@keyframes faq-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cta-glow {
    background:
        radial-gradient(50% 90% at 80% 10%, rgba(61,126,255,0.22), transparent 70%),
        radial-gradient(50% 90% at 10% 90%, rgba(34,211,238,0.12), transparent 70%),
        #0B1222;
}

.footer-bg {
    background: #050810;
}

.media-card {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.08);
}
.media-card .shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 11, 24, 0.05), rgba(6, 11, 24, 0.88) 100%);
}

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