/* roulang page: index */
:root{
  --bg:#0C0612;
  --panel:#170A24;
  --surface:#1F1130;
  --line:rgba(255,255,255,.09);
  --brand:#A855F7;
  --branddeep:#7C3AED;
  --hot:#EC4899;
  --signal:#22D3EE;
  --text:#f6f0ff;
  --muted:rgba(235,228,255,.64);
  --radius-lg:24px;
  --radius-md:16px;
  --shadow:0 14px 40px rgba(0,0,0,.35);
  --shadow-brand:0 0 0 1px rgba(168,85,247,.28),0 18px 45px rgba(168,85,247,.22);
  --gradient:linear-gradient(135deg,#A855F7,#EC4899);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;font-family:'PingFang SC','Microsoft YaHei','Noto Sans SC',ui-sans-serif,sans-serif;background:#0C0612;color:var(--text);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(760px at 88% -6%,rgba(236,72,153,.15),transparent 62%),radial-gradient(900px at -8% 24%,rgba(168,85,247,.12),transparent 60%),var(--bg)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(circle at center,black,transparent 90%)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:10px}
::-webkit-scrollbar{width:10px;height:6px;background:#0F0918}
::-webkit-scrollbar-thumb{background:#2e1b44;border-radius:20px}
::-webkit-scrollbar-thumb:hover{background:#432764}
#siteHeader{background:rgba(12,6,18,.52);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.05);transition:background .3s ease,border-color .3s ease}
#siteHeader.scrolled{background:rgba(12,6,18,.86);border-bottom-color:rgba(255,255,255,.09)}
.logo-dot{width:11px;height:11px;border-radius:50%;background:var(--gradient);box-shadow:0 0 0 4px rgba(168,85,247,.14),0 0 18px rgba(236,72,153,.45);display:inline-block}
.nav-link{position:relative;font-size:14px;font-weight:500;color:rgba(235,228,255,.68);padding:6px 2px;margin:0 2px;letter-spacing:.01em;transition:color .2s ease}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:99px;background:var(--gradient);transform:scaleX(0);transform-origin:right;transition:transform .25s ease-out}
.nav-link:hover,.nav-link.active{color:#fff}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1);transform-origin:left}
.nav-cta{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--gradient);border:1px solid transparent;color:#fff;border-radius:999px;padding:9px 18px;font-size:14px;font-weight:600;box-shadow:0 8px 26px rgba(168,85,247,.25);transition:transform .25s ease,box-shadow .25s ease}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(168,85,247,.4)}
.nav-cta:active{transform:scale(.98)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 24px;font-weight:600;border:1px solid transparent;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease;font-size:15px;line-height:1.2}
.btn-primary{background:var(--gradient);color:#fff;box-shadow:0 12px 30px rgba(168,85,247,.24)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 15px 36px rgba(168,85,247,.4)}
.btn-primary:active{transform:scale(.98)}
.btn-ghost{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.13);color:rgba(245,240,255,.9)}
.btn-ghost:hover{border-color:rgba(168,85,247,.72);background:rgba(168,85,247,.08);color:#fff}
.chip{display:inline-flex;align-items:center;border-radius:999px;padding:8px 17px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);color:rgba(235,228,255,.76);font-size:14px;cursor:pointer;transition:all .2s ease}
.chip:hover{color:#fff;border-color:rgba(168,85,247,.55)}
.chip.is-active{background:var(--gradient);border-color:transparent;color:#fff;box-shadow:0 8px 24px rgba(168,85,247,.28)}
.tag{display:inline-flex;align-items:center;gap:5px;background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.16);color:#e9d5ff;font-size:12px;font-weight:500;padding:3px 10px;border-radius:999px}
.tag-hot{background:rgba(236,72,153,.12);border-color:rgba(236,72,153,.18);color:#fbcfe8}
.tag-cyan{background:rgba(34,211,238,.1);border-color:rgba(34,211,238,.16);color:#a5f3fc}
.search-box{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);border-radius:999px;padding:7px 14px;transition:border-color .25s ease,box-shadow .25s ease,background .25s ease}
.search-box:focus-within{border-color:rgba(34,211,238,.7);background:rgba(255,255,255,.07);box-shadow:0 0 0 3px rgba(34,211,238,.12)}
.search-box input{background:transparent;border:none;outline:none;color:#fff;width:130px;font-size:14px}
.search-box input::placeholder{color:rgba(235,228,255,.4)}
.topic-card{background:linear-gradient(180deg,#170A24,#120718);border:1px solid rgba(255,255,255,.08);border-radius:20px;overflow:hidden;transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease,opacity .2s}
.topic-card:hover{border-color:rgba(168,85,247,.42);transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.34),0 0 0 1px rgba(168,85,247,.12)}
.topic-card .cover{height:150px;background-size:cover;background-position:center;position:relative}
.topic-card .cover::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 34%,rgba(12,6,18,.62))}
.update-item{display:flex;align-items:flex-start;gap:10px;padding:12px 10px;border-radius:12px;transition:background .2s}
.update-item:hover{background:rgba(255,255,255,.055)}
.update-item .dot{width:7px;height:7px;border-radius:50%;background:#A855F7;margin-top:9px;flex:none;box-shadow:0 0 9px rgba(168,85,247,.55)}
.pg-item{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:40px;height:40px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);color:rgba(235,228,255,.66);font-size:14px;font-weight:600;transition:all .2s ease}
.pg-item:hover{color:#fff;border-color:rgba(168,85,247,.55)}
.pg-item.active{background:var(--gradient);border-color:transparent;color:#fff;box-shadow:0 8px 22px rgba(168,85,247,.32)}
.pg-item.disabled{opacity:.34;pointer-events:none}
.faq-mini{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:16px 18px;transition:border-color .2s ease}
.faq-mini summary{cursor:pointer;font-size:15px;font-weight:600;color:#fff;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq-mini summary::-webkit-details-marker{display:none}
.faq-mini[open]{border-color:rgba(168,85,247,.28)}
.faq-mini-text{color:var(--muted);font-size:13px;line-height:1.8;padding:10px 0 2px}
.faq-icon{flex:none;position:relative;width:20px;height:20px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);transition:transform .3s ease}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;top:50%;left:50%;background:rgba(236,72,153,.95);border-radius:2px}
.faq-icon::before{width:9px;height:2px;transform:translate(-50%,-50%)}
.faq-icon::after{width:2px;height:9px;transform:translate(-50%,-50%)}
.faq-mini[open] .faq-icon{transform:rotate(45deg)}
.breadcrumb{font-size:13px;color:rgba(235,228,255,.58);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.breadcrumb a:hover{color:#fff}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;color:rgba(236,72,153,.9);text-transform:uppercase}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:#EC4899;box-shadow:0 0 12px rgba(236,72,153,.8)}
.aside-title{font-size:17px;font-weight:700;color:#fff;display:flex;align-items:center;gap:9px}
.aside-title::before{content:"";width:4px;height:14px;border-radius:4px;background:linear-gradient(135deg,#A855F7,#EC4899)}
.mobile-drawer{position:fixed;inset:0;z-index:100;background:rgba(12,6,18,.98);backdrop-filter:blur(18px);display:none;flex-direction:column;padding:24px;overflow-y:auto}
.mobile-drawer.open{display:flex}
.mobile-drawer a{font-size:20px;font-weight:600;color:rgba(235,228,255,.86);padding:10px 4px;border-bottom:1px solid rgba(255,255,255,.06)}
.mobile-drawer a:hover{color:#fff}
@media(max-width:1024px){.nav-links{display:none}.search-box{display:none}.nav-cta{display:none}}

/* roulang page: category1 */
:root{
    --bg:#0C0612;
    --panel:#170A24;
    --surface:#1F1130;
    --line:rgba(255,255,255,.09);
    --brand:#A855F7;
    --branddeep:#7C3AED;
    --hot:#EC4899;
    --signal:#22D3EE;
    --text:#f6f0ff;
    --muted:rgba(235,228,255,.64);
    --radius-lg:24px;
    --radius-md:16px;
    --shadow:0 14px 40px rgba(0,0,0,.35);
    --shadow-brand:0 0 0 1px rgba(168,85,247,.28),0 18px 45px rgba(168,85,247,.22);
    --gradient:linear-gradient(135deg,#A855F7,#EC4899);
  }

  html{scroll-behavior:smooth;scroll-padding-top:100px}
  body{
    margin:0;
    font-family:'PingFang SC','Microsoft YaHei','Noto Sans SC',ui-sans-serif,sans-serif;
    background:#0C0612;
    color:var(--text);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-2;
    background:
      radial-gradient(760px at 88% -6%,rgba(236,72,153,.15),transparent 62%),
      radial-gradient(900px at -8% 24%,rgba(168,85,247,.12),transparent 60%),
      var(--bg);
  }
  body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
    background-size:38px 38px;
    mask-image:radial-gradient(circle at center,black,transparent 90%);
  }
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  button,input,textarea,select{font:inherit;color:inherit}
  ::selection{background:#A855F7;color:#fff}
  :focus-visible{
    outline:2px solid #22D3EE;
    outline-offset:3px;
    border-radius:6px;
  }
  *::-webkit-scrollbar{width:10px;height:8px}
  *::-webkit-scrollbar-track{background:#0C0612}
  *::-webkit-scrollbar-thumb{background:#2c183d;border-radius:12px;border:2px solid #0C0612}
  *::-webkit-scrollbar-thumb:hover{background:#7C3AED}

  #siteHeader{
    background:rgba(12,6,18,.52);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,255,255,.05);
    transition:background .3s ease,border-color .3s ease;
  }
  #siteHeader.scrolled{
    background:rgba(12,6,18,.88);
    border-bottom-color:rgba(255,255,255,.09);
  }
  .logo-dot{
    width:11px;height:11px;border-radius:50%;
    background:var(--gradient);
    box-shadow:0 0 0 4px rgba(168,85,247,.14),0 0 18px rgba(236,72,153,.45);
    display:inline-block;
    flex:none;
  }
  .nav-link{
    position:relative;
    font-size:14px;
    font-weight:500;
    color:rgba(235,228,255,.68);
    padding:6px 2px;
    margin:0 2px;
    letter-spacing:.02em;
    transition:color .2s ease;
  }
  .nav-link::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:-4px;
    height:2px;
    border-radius:99px;
    background:var(--gradient);
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .22s ease-out;
  }
  .nav-link:hover,.nav-link.active{color:#fff}
  .nav-link:hover::after,.nav-link.active::after{
    transform:scaleX(1);
    transform-origin:left;
  }
  .nav-cta{
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    background:var(--gradient);
    border:1px solid transparent;
    color:#fff;border-radius:999px;
    padding:9px 18px;
    font-size:14px;font-weight:600;
    box-shadow:0 8px 26px rgba(168,85,247,.25);
    transition:transform .25s ease,box-shadow .25s ease;
    white-space:nowrap;
  }
  .nav-cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(168,85,247,.4)}
  .nav-cta:active{transform:scale(.98)}

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    border-radius:999px;padding:12px 24px;
    font-weight:600;border:1px solid transparent;
    cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease;
    font-size:15px;line-height:1.2;
  }
  .btn-primary{
    background:var(--gradient);
    color:#fff;
    box-shadow:0 12px 30px rgba(168,85,247,.24);
  }
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 15px 36px rgba(168,85,247,.4)}
  .btn-primary:active{transform:scale(.98)}
  .btn-ghost{
    background:rgba(255,255,255,.04);
    border-color:rgba(255,255,255,.13);
    color:rgba(245,240,255,.92);
  }
  .btn-ghost:hover{border-color:rgba(168,85,247,.72);background:rgba(168,85,247,.08);color:#fff}
  .btn-ghost:active{transform:scale(.98)}

  .tag{
    display:inline-flex;align-items:center;gap:5px;
    background:rgba(168,85,247,.12);
    border:1px solid rgba(168,85,247,.18);
    color:#e9d5ff;
    font-size:12px;font-weight:500;
    padding:3px 10px;
    border-radius:999px;
    white-space:nowrap;
  }
  .tag-hot{
    background:rgba(236,72,153,.12);
    border-color:rgba(236,72,153,.2);
    color:#fbcfe8;
  }
  .tag-cyan{
    background:rgba(34,211,238,.1);
    border-color:rgba(34,211,238,.16);
    color:#a5f3fc;
  }

  .search-box{
    display:flex;align-items:center;gap:8px;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.11);
    border-radius:999px;
    padding:7px 14px;
    transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
  }
  .search-box:focus-within{
    border-color:rgba(34,211,238,.7);
    background:rgba(255,255,255,.07);
    box-shadow:0 0 0 3px rgba(34,211,238,.12);
  }
  .search-box input{background:transparent;border:none;outline:none;color:#fff;width:130px;font-size:14px}
  .search-box input::placeholder{color:rgba(235,228,255,.4)}

  .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:rgba(235,228,255,.5)}
  .crumb a{display:inline-flex;align-items:center;gap:6px;transition:color .2s}
  .crumb a:hover{color:#e9d5ff}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:12px;font-weight:600;
    letter-spacing:.15em;
    color:rgba(235,228,255,.56);
    text-transform:uppercase;
  }
  .eyebrow::before{
    content:"";width:28px;height:1px;
    background:linear-gradient(90deg,transparent,#A855F7);
  }

  .chip{
    display:inline-flex;align-items:center;
    border-radius:999px;
    padding:8px 18px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.1);
    color:rgba(235,228,255,.76);
    font-size:14px;
    cursor:pointer;
    transition:all .2s ease;
    white-space:nowrap;
  }
  .chip:hover{color:#fff;border-color:rgba(168,85,247,.55)}
  .chip.is-active{
    background:var(--gradient);
    border-color:transparent;
    color:#fff;
    box-shadow:0 8px 24px rgba(168,85,247,.28);
  }

  .topic-card{
    background:linear-gradient(180deg,#170A24,#120718);
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    overflow:hidden;
    transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
    display:flex;
    flex-direction:column;
  }
  .topic-card:hover{
    border-color:rgba(168,85,247,.42);
    transform:translateY(-4px);
    box-shadow:0 18px 44px rgba(0,0,0,.34),0 0 0 1px rgba(168,85,247,.12);
  }
  .topic-card:focus-within{
    outline:none;
    border-color:rgba(168,85,247,.5);
    box-shadow:0 0 0 1px rgba(168,85,247,.45),0 18px 44px rgba(0,0,0,.34);
  }
  .topic-card .cover{
    position:relative;
    aspect-ratio:16/10;
    overflow:hidden;
    background:linear-gradient(180deg,#1F1130,#120718);
  }
  .topic-card .cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .45s ease,opacity .3s ease;
  }
  .topic-card:hover .cover img{transform:scale(1.04)}
  .topic-card .cover::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 20%,rgba(12,6,18,.72));
    pointer-events:none;
  }
  .topic-card .cover-content{
    position:relative;
    z-index:2;
  }

  .update-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px 10px;
    border-radius:12px;
    transition:background .2s;
  }
  .update-item:hover{background:rgba(255,255,255,.055)}
  .update-item .dot{
    width:7px;height:7px;
    border-radius:50%;
    background:#A855F7;
    margin-top:9px;
    flex:none;
    box-shadow:0 0 9px rgba(168,85,247,.55);
  }

  .pg-item{
    display:inline-flex;align-items:center;justify-content:center;gap:4px;
    min-width:40px;height:40px;
    padding:0 10px;
    border-radius:999px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.09);
    color:rgba(235,228,255,.66);
    font-size:14px;font-weight:600;
    transition:all .2s ease;
  }
  .pg-item:hover{color:#fff;border-color:rgba(168,85,247,.55)}
  .pg-item.active{
    background:var(--gradient);
    border-color:transparent;
    color:#fff;
    box-shadow:0 8px 22px rgba(168,85,247,.32);
  }
  .pg-item.disabled{opacity:.34;pointer-events:none}

  .side-panel{
    background:linear-gradient(180deg,rgba(23,10,36,.88),rgba(18,7,24,.88));
    border:1px solid rgba(255,255,255,.075);
    border-radius:20px;
    padding:20px;
  }
  .side-panel .panel-title{
    font-size:15px;
    font-weight:700;
    color:#fff;
    letter-spacing:.02em;
  }
  .tag-cloud .tag-link{
    display:inline-flex;
    align-items:center;
    padding:5px 12px;
    margin:0 6px 8px 0;
    border-radius:999px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.085);
    color:rgba(235,228,255,.68);
    font-size:13px;
    transition:all .2s ease;
  }
  .tag-cloud .tag-link:hover{
    color:#fff;
    border-color:rgba(168,85,247,.55);
    background:rgba(168,85,247,.08);
  }
  .tag-cloud .tag-link strong{color:#fff;font-weight:600;margin-right:2px}

  .faq-mini{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.075);
    border-radius:16px;
    padding:16px 18px;
    transition:border-color .2s ease,background .2s ease;
  }
  .faq-mini:hover{border-color:rgba(255,255,255,.15)}
  .faq-mini summary{
    cursor:pointer;
    font-size:15px;
    font-weight:600;
    color:#fff;
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
  }
  .faq-mini summary::-webkit-details-marker{display:none}
  .faq-mini summary .icon{
    flex:none;
    width:24px;height:24px;
    border-radius:50%;
    background:rgba(168,85,247,.14);
    border:1px solid rgba(168,85,247,.3);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    color:#c4b5fd;
    transition:transform .25s ease,background .25s ease;
  }
  .faq-mini details[open] summary .icon{transform:rotate(45deg);background:rgba(236,72,153,.18)}
  .faq-mini p{
    margin:10px 0 0;
    font-size:14px;
    color:rgba(235,228,255,.58);
    line-height:1.8;
  }

  .mobile-nav-text{
    font-size:16px;
    font-weight:600;
    color:#fff;
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  .mobile-nav-text:hover{color:#e9d5ff;border-color:rgba(168,85,247,.4)}

  .card-arrow{
    display:inline-flex;
    align-items:center;
    color:#c4b5fd;
    font-size:14px;
    font-weight:600;
    gap:4px;
    transition:color .2s ease,gap .2s ease;
  }
  .card-arrow:hover{color:#e9d5ff;gap:8px}

  .category-cta{
    background:
      radial-gradient(460px at 12% 40%,rgba(168,85,247,.16),transparent 60%),
      radial-gradient(420px at 88% 20%,rgba(236,72,153,.12),transparent 55%),
      linear-gradient(180deg,#170A24,#120718);
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    padding:28px 24px;
    position:relative;
    overflow:hidden;
  }
  .category-cta::after{
    content:"";
    position:absolute;
    top:-70px;right:-30px;
    width:220px;height:220px;
    background:radial-gradient(circle,rgba(236,72,153,.2),transparent 65%);
    pointer-events:none;
  }