/* roulang page: index */
:root{--ink:#16283d;--muted:#64748b;--line:#dce8f5;--bg:#f7faff;--blue:#2474d7;--cyan:#0f9f9a;--radius:16px}
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:linear-gradient(180deg,#fbfdff 0%,#f6f9fe 45%,#fbfdff 100%);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;line-height:1.7}
    a{text-decoration:none;color:inherit}
    button,a{transition:all .2s ease}
    button:focus-visible,a:focus-visible{outline:3px solid rgba(36,116,215,.34);outline-offset:3px}
    .container{width:min(1200px,calc(100% - 40px));margin:auto}
    .grid-bg{background-image:linear-gradient(rgba(64,123,202,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(64,123,202,.065) 1px,transparent 1px);background-size:28px 28px}
    .film{background:linear-gradient(135deg,#e8f1ff,#f7f4ff 58%,#eafcff);position:relative;overflow:hidden}
    .film:before,.film:after{content:"";position:absolute;left:0;right:0;height:12px;background:repeating-linear-gradient(90deg,rgba(36,116,215,.22) 0 12px,transparent 12px 22px)}
    .film:before{top:9px}.film:after{bottom:9px}
    .cover{background:linear-gradient(135deg,#bed8fa 0%,#dce9ff 42%,#d7d2f4 100%);position:relative;overflow:hidden}
    .cover:before{content:"";position:absolute;width:130%;height:58%;background:rgba(255,255,255,.46);transform:rotate(-29deg);left:-25%;top:18%}
    .cover:after{content:"";position:absolute;width:38%;height:38%;border-radius:999px;background:rgba(45,104,191,.19);right:12%;bottom:13%;box-shadow:-92px -44px 0 rgba(15,159,154,.10)}
    .card-hover:hover{transform:translateY(-3px);box-shadow:0 20px 42px rgba(31,76,135,.16)}
    .faq-answer{display:none}.faq-item.open .faq-answer{display:block}.faq-item.open .faq-icon{transform:rotate(45deg)}
    #mobileMenu{display:none}#mobileMenu.open{display:block}
    #ageGate{display:flex}
    @media(max-width:767px){.container{width:min(100% - 28px,1200px)}.desktop-nav{display:none}.mobile-toggle{display:inline-flex}.hero-copy{padding-top:10px}.hero-visual{min-height:340px}.section-space{padding:58px 0}}
    @media(min-width:768px){.mobile-toggle{display:none}}

/* roulang page: category1 */
:root{--ink:#16283d;--muted:#64748b;--line:#dce8f5;--bg:#f7faff;--blue:#2474d7;--cyan:#0f9f9a;--radius:16px}
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:linear-gradient(180deg,#fbfdff 0%,#f6f9fe 45%,#fbfdff 100%);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;line-height:1.7}
    a{text-decoration:none;color:inherit}
    img{display:block;max-width:100%}
    button,a{transition:all .2s ease}
    button{font:inherit;cursor:pointer}
    button:focus-visible,a:focus-visible{outline:3px solid rgba(36,116,215,.34);outline-offset:3px}
    .container{width:min(100% - 28px,1200px);margin:auto}
    .grid-bg{background-image:linear-gradient(rgba(64,123,202,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(64,123,202,.065) 1px,transparent 1px);background-size:28px 28px}
    .card-hover:hover{transform:translateY(-3px);box-shadow:0 20px 42px rgba(31,76,135,.16)}
    .faq-answer{display:none}
    .faq-item.open .faq-answer{display:block}
    .faq-item.open .faq-icon{transform:rotate(45deg)}
    #mobileMenu{display:none}
    #mobileMenu.open{display:block}
    .desktop-nav{display:none}
    .mobile-toggle{display:inline-flex}
    .cover-art{position:relative;overflow:hidden;background:linear-gradient(135deg,#c8dcf8 0%,#718fc5 46%,#d9d3ef 100%)}
    .cover-art:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 22%,rgba(255,255,255,.76),transparent 17%),linear-gradient(118deg,transparent 0 37%,rgba(255,255,255,.23) 37% 42%,transparent 42% 100%)}
    .cover-art:after{content:"";position:absolute;left:10%;right:10%;bottom:15%;height:20%;border:1px solid rgba(255,255,255,.5);border-radius:9px;box-shadow:0 -40px 0 rgba(255,255,255,.08),0 -80px 0 rgba(255,255,255,.06)}
    .film-strip{background:repeating-linear-gradient(90deg,rgba(36,116,215,.1) 0 20px,transparent 20px 28px);border-top:1px solid rgba(36,116,215,.12);border-bottom:1px solid rgba(36,116,215,.12)}
    .filter-btn{white-space:nowrap;border:1px solid var(--line);background:#fff;color:#52657a}
    .filter-btn:hover,.filter-btn.active{border-color:#2474d7;background:#eff7ff;color:#195db4}
    .page-num{display:inline-flex;height:38px;min-width:38px;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--line);background:#fff;color:#52657a}
    .page-num:hover{background:#eff7ff;color:#195db4}
    .page-num.active{background:#2474d7;border-color:#2474d7;color:white}
    .age-layer{display:none}
    .age-layer.show{display:flex}
    @media(min-width:768px){.desktop-nav{display:flex}.mobile-toggle{display:none}}
    @media(max-width:767px){.channel-art{min-height:220px}.filter-scroll{overflow-x:auto;padding-bottom:6px}.filter-scroll::-webkit-scrollbar{height:5px}.filter-scroll::-webkit-scrollbar-thumb{background:#c9d9ed;border-radius:99px}}