/* roulang page: index */
:root{
            --ink:#171316;
            --night:#21191d;
            --wine:#762f48;
            --berry:#a84462;
            --coral:#e18470;
            --cream:#f4ede5;
            --paper:#fffaf4;
            --muted:#927e80;
            --line:rgba(255,250,244,.14);
            --darkline:rgba(33,25,29,.12);
            --shadow:0 14px 35px rgba(31,18,24,.13);
            --radius:16px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--ink);
            background:var(--cream);
            font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
            line-height:1.7;
        }
        a{text-decoration:none;color:inherit}
        button,input{font:inherit}
        button{cursor:pointer}
        .wrap{width:min(1240px,calc(100% - 40px));margin:0 auto}
        .topbar{background:var(--night);color:var(--paper);border-bottom:1px solid var(--line)}
        .brand-row{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
        .brand{display:flex;align-items:center;gap:12px;min-width:0}
        .brand-mark{
            width:39px;height:39px;border-radius:12px;background:var(--coral);color:var(--night);
            display:grid;place-items:center;font-weight:900;font-size:20px;box-shadow:5px 5px 0 rgba(225,132,112,.2)
        }
        .brand-name{font-weight:800;letter-spacing:-.04em;font-size:clamp(15px,2vw,21px);white-space:nowrap}
        .brand-name em{font-style:normal;color:#f0a891}
        .header-tools{display:flex;align-items:center;gap:10px}
        .search{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:4px 5px 4px 15px;background:rgba(255,255,255,.04)}
        .search input{width:170px;border:0;outline:0;background:transparent;color:var(--paper);font-size:13px}
        .search input::placeholder{color:#bba8a7}
        .search button,.tool-btn{border:0;background:transparent;color:var(--paper);padding:8px 11px;border-radius:999px}
        .search button:hover,.tool-btn:hover{background:var(--berry)}
        .tool-btn{border:1px solid var(--line);font-size:13px}
        .icon-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
        .nav-link{min-height:61px;padding:9px 15px;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--night);font-size:14px;color:#d6c6c3;transition:.22s}
        .nav-link span:first-child{font-size:19px;color:var(--coral)}
        .nav-link:hover,.nav-link.active{background:#342329;color:var(--paper);box-shadow:inset 0 -3px var(--coral)}
        .hero{background:var(--night);color:var(--paper);padding:78px 0 72px;position:relative;overflow:hidden}
        .hero:after{content:"";position:absolute;inset:auto -10% -70% 35%;height:500px;background:radial-gradient(ellipse,rgba(168,68,98,.33),transparent 65%);pointer-events:none}
        .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:58px;align-items:center;position:relative;z-index:1}
        .eyebrow,.tag{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(225,132,112,.45);color:#f0a891;border-radius:999px;padding:5px 11px;font-size:12px;letter-spacing:.06em}
        h1{font-size:clamp(36px,5.2vw,70px);line-height:1.12;letter-spacing:-.065em;margin:20px 0 22px;max-width:800px}
        .hero-copy{font-size:17px;color:#d7c8c4;max-width:680px;margin:0 0 28px}
        .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;padding:12px 19px;font-weight:800;font-size:14px;transition:.22s;border:1px solid transparent}
        .btn-primary{background:var(--coral);color:var(--night);box-shadow:0 7px 0 rgba(122,47,72,.55)}
        .btn-primary:hover{background:#f1a18d;transform:translateY(-2px)}
        .btn-outline{border-color:rgba(255,250,244,.35);color:var(--paper)}
        .btn-outline:hover{border-color:var(--coral);background:rgba(225,132,112,.1)}
        .btn:focus,.nav-link:focus,.tool-btn:focus,button:focus,input:focus{outline:3px solid rgba(225,132,112,.45);outline-offset:3px}
        .hero-actions{display:flex;flex-wrap:wrap;gap:13px}
        .hero-meta{display:flex;gap:25px;flex-wrap:wrap;margin-top:35px;color:#bdaaa8;font-size:13px}
        .hero-meta strong{display:block;color:var(--paper);font-size:22px;line-height:1.2}
        .index-panel{background:#302329;border:1px solid rgba(255,250,244,.17);border-radius:21px;padding:20px;box-shadow:18px 18px 0 rgba(118,47,72,.28);transform:rotate(1deg)}
        .panel-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:15px;margin-bottom:16px;font-size:12px;color:#c7b2b1}
        .signal{width:8px;height:8px;background:#a9ca8f;border-radius:50%;display:inline-block;margin-right:6px}
        .cover{height:190px;border-radius:13px;background:linear-gradient(120deg,#563041 0 35%,#b35d70 35% 53%,#3b2732 53%);position:relative;overflow:hidden}
        .cover:before{content:"精选浏览";position:absolute;left:20px;bottom:17px;color:#fff3ec;font-weight:800;font-size:25px;letter-spacing:-.06em}
        .cover:after{content:"";position:absolute;width:180px;height:180px;border:1px solid rgba(255,255,255,.3);border-radius:50%;right:-35px;top:-45px}
        .panel-row{display:flex;justify-content:space-between;gap:12px;margin-top:16px}
        .panel-row b{font-size:14px;color:var(--paper)}
        .panel-row small{display:block;color:#bdaaa8;font-size:11px}
        .section{padding:82px 0}
        .section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:30px}
        .kicker{color:var(--wine);font-size:12px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
        h2{font-size:clamp(27px,3.5vw,43px);line-height:1.18;letter-spacing:-.05em;margin:8px 0 0}
        .section-lead{max-width:560px;color:#756568;font-size:15px}
        .feature-strip{display:grid;grid-template-columns:1.35fr .85fr .85fr;gap:14px}
        .feature{background:var(--paper);border:1px solid var(--darkline);padding:25px;border-radius:var(--radius);min-height:180px;box-shadow:var(--shadow);transition:.2s}
        .feature:first-child{background:var(--wine);color:var(--paper)}
        .feature:hover,.content-card:hover,.topic:hover{transform:translateY(-4px);border-color:var(--coral)}
        .feature-icon{font-size:25px;color:var(--coral)}
        .feature h3{margin:15px 0 7px;font-size:20px}
        .feature p{margin:0;color:#806d70;font-size:14px}.feature:first-child p{color:#e4d4d0}
        .mini-status{display:inline-block;margin-top:16px;color:var(--wine);background:#f1ded5;border-radius:999px;padding:3px 9px;font-size:11px}.feature:first-child .mini-status{color:var(--paper);background:rgba(255,255,255,.13)}
        .directory{background:#eaded5}
        .topic-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}
        .topic{background:var(--paper);border:1px solid var(--darkline);border-radius:18px;padding:28px;min-height:245px;transition:.2s;position:relative;overflow:hidden}
        .topic.large{background:linear-gradient(135deg,#422630,#7a304b);color:var(--paper)}
        .topic.large:after{content:"01";position:absolute;right:20px;bottom:-30px;font-size:170px;line-height:1;font-weight:900;color:rgba(255,255,255,.08)}
        .topic h3{font-size:27px;margin:16px 0 9px;position:relative;z-index:1}.topic p{font-size:14px;color:#806d70;max-width:430px;position:relative;z-index:1}.topic.large p{color:#e6d4d0}
        .topic-link{display:inline-flex;margin-top:18px;font-size:13px;font-weight:800;color:var(--coral);position:relative;z-index:1}
        .topic:not(.large) .topic-link{color:var(--wine)}
        .path-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:45px;align-items:center}
        .path-list{border-left:1px solid #cbaeb0;padding-left:22px}
        .path-item{position:relative;padding:0 0 25px 12px}.path-item:before{content:"";position:absolute;left:-29px;top:6px;width:13px;height:13px;border-radius:50%;background:var(--coral);border:3px solid var(--cream)}
        .path-item b{font-size:17px}.path-item p{margin:5px 0 0;color:#806d70;font-size:14px}
        .screen{background:#241b20;border-radius:20px;padding:18px;color:var(--paper);box-shadow:var(--shadow)}
        .screen-bar{display:flex;gap:7px;border-bottom:1px solid var(--line);padding-bottom:14px}.screen-bar i{width:8px;height:8px;border-radius:50%;background:#d77e70}
        .filter-row{display:flex;gap:8px;margin:17px 0;flex-wrap:wrap}.filter-row span{padding:6px 10px;border:1px solid var(--line);border-radius:8px;color:#c8b5b3;font-size:11px}.filter-row span.on{background:var(--berry);color:white;border-color:var(--berry)}
        .result{display:grid;grid-template-columns:90px 1fr auto;align-items:center;gap:13px;border-top:1px solid var(--line);padding:14px 0}.result-thumb{height:60px;border-radius:8px;background:linear-gradient(145deg,#713b4e,#d38479)}.result h4{margin:0;font-size:14px}.result small{color:#bdaaa8;font-size:11px}
        .update-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.content-card{display:flex;gap:18px;background:var(--paper);border:1px solid var(--darkline);padding:17px;border-radius:15px;transition:.2s}.content-card:first-child{grid-column:span 2}.content-art{width:150px;min-height:108px;border-radius:11px;background:linear-gradient(135deg,#c26b75,#4c2a39);flex:none}.content-card h3{margin:7px 0 5px;font-size:18px}.content-card p{margin:0;color:#806d70;font-size:13px}.card-meta{font-size:11px;color:var(--wine);font-weight:800}
        .stats{background:var(--wine);color:var(--paper);padding:52px 0}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.stat{border-right:1px solid rgba(255,255,255,.2);padding-right:20px}.stat:last-child{border:0}.stat strong{font-size:36px;display:block;color:#f2a38f}.stat span{font-size:13px;color:#e3cfca}
        .notice{background:#2a2024;color:var(--paper);border-radius:18px;padding:28px;display:flex;justify-content:space-between;gap:30px;align-items:center}.notice p{color:#d1bfbc;margin:7px 0 0;font-size:14px;max-width:720px}
        .faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:45px}.faq-item{border-top:1px solid var(--darkline)}.faq-item button{width:100%;background:transparent;border:0;padding:19px 0;text-align:left;display:flex;justify-content:space-between;font-weight:800;color:var(--ink)}.faq-answer{display:none;color:#806d70;font-size:14px;padding:0 35px 18px 0}.faq-item.open .faq-answer{display:block}.faq-item.open button{color:var(--wine)}
        .final-cta{background:#e4c9c2;padding:60px 0}.final-box{display:flex;justify-content:space-between;align-items:center;gap:25px}.final-box p{color:#725e61;max-width:580px;margin:10px 0 0}
        footer{background:var(--night);color:#d7c8c4;padding:48px 0 100px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}.footer-title{font-weight:800;color:var(--paper);margin-bottom:13px}.footer-links{display:flex;flex-direction:column;gap:8px;font-size:13px;color:#bca8a7}.footer-links a:hover{color:var(--coral)}.copyright{border-top:1px solid var(--line);margin-top:35px;padding-top:20px;font-size:12px;color:#9e888b}
        .fixed-cta{position:fixed;z-index:20;bottom:0;left:0;right:0;background:#170f13;color:var(--paper);border-top:1px solid rgba(225,132,112,.45);padding:12px 0 calc(12px + env(safe-area-inset-bottom));box-shadow:0 -8px 28px rgba(20,10,15,.18)}.fixed-inner{display:flex;align-items:center;justify-content:space-between;gap:18px}.fixed-inner p{margin:0;font-size:13px;color:#d4c2bf}.fixed-inner p b{color:#f0a18d}.fixed-actions{display:flex;gap:9px}.close-bar{background:transparent;color:#bba8a8;border:0;font-size:18px;padding:8px}
        .modal{position:fixed;inset:0;background:rgba(18,10,14,.82);z-index:50;display:flex;align-items:center;justify-content:center;padding:20px}.modal-card{background:var(--paper);max-width:490px;border-radius:20px;padding:32px;box-shadow:0 25px 80px rgba(0,0,0,.35)}.modal-card h2{color:var(--night);font-size:29px}.modal-card p{font-size:14px;color:#756568}.modal-actions{display:flex;gap:10px;margin-top:22px}.hidden{display:none!important}
        @media(max-width:1024px){.hero-grid{gap:30px}.wrap{width:min(100% - 32px,900px)}}
        @media(max-width:768px){.brand-row{min-height:68px}.search{display:none}.icon-nav{display:flex;overflow-x:auto;justify-content:flex-start}.nav-link{min-width:145px}.hero{padding:55px 0}.hero-grid,.path-wrap,.faq-grid{grid-template-columns:1fr}.index-panel{max-width:600px;transform:none}.feature-strip,.topic-grid,.update-grid{grid-template-columns:1fr}.content-card:first-child{grid-column:auto}.stats-grid{grid-template-columns:1fr 1fr}.stat:nth-child(2){border:0}.final-box,.notice{align-items:flex-start;flex-direction:column}}
        @media(max-width:520px){.wrap{width:calc(100% - 26px)}h1{font-size:39px}.hero-copy{font-size:15px}.hero-actions,.modal-actions{flex-direction:column}.btn{width:100%}.feature,.topic{padding:21px}.content-card{gap:12px}.content-art{width:92px;min-height:88px}.stats-grid{gap:14px}.stat strong{font-size:28px}.fixed-inner{align-items:stretch;flex-direction:column;gap:8px}.fixed-actions{width:100%}.fixed-actions .btn{flex:1;padding:9px 8px}.close-bar{position:absolute;right:8px;top:5px}.fixed-cta{padding-top:17px}}

/* roulang page: category1 */
:root{
 --ink:#171316;
 --night:#21191d;
 --wine:#762f48;
 --berry:#a84462;
 --coral:#e18470;
 --cream:#f4ede5;
 --paper:#fffaf4;
 --muted:#927e80;
 --line:rgba(255,250,244,.14);
 --darkline:rgba(33,25,29,.12);
 --shadow:0 14px 35px rgba(31,18,24,.13);
 --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;color:var(--ink);background:var(--cream);
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
 line-height:1.7;padding-bottom:82px;
}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
.wrap{width:min(1180px,calc(100% - 40px));margin:0 auto}
.topbar{background:var(--night);color:var(--paper);border-bottom:1px solid var(--line)}
.brand-row{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{width:39px;height:39px;border-radius:12px;background:var(--coral);color:var(--night);display:grid;place-items:center;font-weight:900;font-size:20px;box-shadow:5px 5px 0 rgba(225,132,112,.2)}
.brand-name{font-weight:800;letter-spacing:-.04em;font-size:clamp(15px,2vw,21px);white-space:nowrap}
.brand-name em{font-style:normal;color:#f0a891}
.header-tools{display:flex;align-items:center;gap:10px}
.search{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:4px 5px 4px 15px;background:rgba(255,255,255,.04)}
.search input{width:170px;border:0;outline:0;background:transparent;color:var(--paper);font-size:13px}
.search input::placeholder{color:#bba8a7}
.search button,.tool-btn{border:0;background:transparent;color:var(--paper);padding:8px 11px;border-radius:999px}
.search button:hover,.tool-btn:hover{background:var(--berry)}
.tool-btn{border:1px solid var(--line);font-size:13px}
.icon-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.nav-link{min-height:61px;padding:9px 15px;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--night);font-size:14px;color:#d6c6c3;transition:.22s}
.nav-link span:first-child{font-size:19px;color:var(--coral)}
.nav-link:hover,.nav-link.active{background:#342329;color:var(--paper);box-shadow:inset 0 -3px var(--coral)}
.nav-link:focus,.tool-btn:focus,.btn:focus,button:focus,input:focus,select:focus{outline:3px solid rgba(225,132,112,.45);outline-offset:3px}
.page-head{background:var(--night);color:var(--paper);padding:68px 0 60px;position:relative;overflow:hidden}
.page-head:before{content:"";position:absolute;width:480px;height:480px;border-radius:50%;right:-150px;top:-210px;background:rgba(168,68,98,.24)}
.page-head-grid{display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:end;position:relative;z-index:1}
.eyebrow,.tag{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(225,132,112,.45);color:#f0a891;border-radius:999px;padding:5px 11px;font-size:12px;letter-spacing:.04em}
h1{font-size:clamp(34px,5vw,62px);line-height:1.12;letter-spacing:-.06em;margin:20px 0 18px}
.lead{font-size:17px;color:#d7c8c4;max-width:680px;margin:0}
.status-panel{border:1px solid var(--line);background:rgba(255,250,244,.06);border-radius:16px;padding:22px}
.status-panel strong{display:block;font-size:30px;line-height:1.15;margin:8px 0}
.status-panel p{margin:0;color:#c4b2b0;font-size:13px}
.section{padding:68px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:25px}
.section-head h2{margin:0;font-size:clamp(25px,3vw,38px);letter-spacing:-.04em}
.section-lead{max-width:570px;color:#756568;font-size:15px;margin:0}
.toolbar{background:var(--wine);color:var(--paper);padding:20px;border-radius:16px;box-shadow:var(--shadow);margin-bottom:24px}
.toolbar-top{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap}
.toolbar label{font-size:12px;color:#ead9d4;display:block;margin-bottom:6px}
.toolbar select,.toolbar input{background:#fffaf4;color:var(--ink);border:1px solid transparent;border-radius:9px;padding:9px 12px;font-size:13px;min-width:145px}
.toolbar input{min-width:220px}
.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:17px}
.filter-row button{padding:6px 11px;border:1px solid rgba(255,250,244,.27);border-radius:8px;background:transparent;color:#ead9d4;font-size:12px;transition:.2s}
.filter-row button:hover,.filter-row button.on{background:var(--coral);border-color:var(--coral);color:var(--night)}
.index-layout{display:grid;grid-template-columns:1.3fr .7fr;gap:18px}
.content-card{display:flex;gap:18px;background:var(--paper);border:1px solid var(--darkline);padding:18px;border-radius:15px;transition:.2s;box-shadow:0 7px 20px rgba(31,18,24,.05)}
.content-card:hover{transform:translateY(-4px);border-color:var(--coral);box-shadow:var(--shadow)}
.content-card.main-card{display:block;padding:0;overflow:hidden}
.cover{flex:0 0 150px;aspect-ratio:16/10;border-radius:11px;background:linear-gradient(135deg,#3a222d,#9d5264 56%,#e18470);position:relative;overflow:hidden}
.main-card .cover{width:100%;aspect-ratio:2.1/1;border-radius:0}
.cover:after{content:"成年访问提示";position:absolute;left:14px;bottom:13px;color:#fff4ee;font-size:11px;border:1px solid rgba(255,255,255,.4);padding:4px 8px;border-radius:999px;background:rgba(33,25,29,.4)}
.card-body{padding:18px}
.card-meta{font-size:11px;color:var(--wine);font-weight:800;display:flex;gap:10px;flex-wrap:wrap}
.content-card h3{margin:7px 0 6px;font-size:20px;line-height:1.35}
.content-card p{margin:0;color:#806d70;font-size:13px}
.mini-link{display:inline-flex;margin-top:16px;color:var(--wine);font-size:13px;font-weight:800;border-bottom:1px solid #d7a3a5}
.side-list{display:grid;gap:14px}
.side-list .content-card{display:block}
.side-list .cover{width:100%;height:105px}
.side-list h3{font-size:16px}
.info-box{background:#eadbd3;border:1px solid #d4b9b6;border-radius:16px;padding:22px;margin-top:18px}
.info-box h3{margin:0 0 8px;font-size:18px}
.info-box p{margin:0;color:#806d70;font-size:13px}
.timeline{border-left:1px solid #cbaeb0;padding-left:25px}
.timeline-item{position:relative;padding:0 0 27px 12px}
.timeline-item:before{content:"";position:absolute;left:-33px;top:7px;width:14px;height:14px;border-radius:50%;background:var(--coral);border:3px solid var(--cream)}
.timeline-item strong{font-size:16px}
.timeline-item p{margin:5px 0 0;color:#806d70;font-size:14px}
.pagination{display:flex;justify-content:center;gap:8px;margin-top:30px}
.pagination button{border:1px solid #d6c0bd;background:var(--paper);color:var(--wine);border-radius:9px;padding:9px 14px}
.pagination button:hover,.pagination button.current{background:var(--wine);color:var(--paper)}
.faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:45px}
.faq-grid h2{margin:0 0 12px;font-size:32px}
.faq-grid>div>p{color:#806d70;font-size:14px}
.faq-item{border-top:1px solid var(--darkline)}
.faq-item button{width:100%;background:transparent;border:0;padding:18px 0;text-align:left;display:flex;justify-content:space-between;gap:15px;font-weight:800;color:var(--ink)}
.faq-answer{display:none;color:#806d70;font-size:14px;padding:0 35px 18px 0}
.faq-item.open .faq-answer{display:block}
.faq-item.open button span:last-child{transform:rotate(45deg)}
.faq-item button span:last-child{font-size:22px;color:var(--berry);transition:.2s}
.cta{background:var(--night);color:var(--paper);padding:38px;border-radius:18px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.cta h2{margin:0 0 7px;font-size:28px}
.cta p{margin:0;color:#cdbbb8;font-size:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;padding:12px 19px;font-weight:800;font-size:14px;transition:.22s;border:1px solid transparent}
.btn-primary{background:var(--coral);color:var(--night);box-shadow:0 7px 0 rgba(122,47,72,.55)}
.btn-primary:hover{background:#f1a18d;transform:translateY(-2px)}
.btn-outline{border-color:rgba(255,250,244,.35);color:var(--paper)}
.btn-outline:hover{border-color:var(--coral);background:rgba(225,132,112,.1)}
footer{background:var(--night);color:var(--paper);padding:48px 0 30px;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:35px}
.footer-title{font-weight:800;margin-bottom:13px;color:#f0a891}
.footer-links{display:grid;gap:8px;color:#c8b5b3;font-size:13px}
.footer-links a:hover{color:var(--coral)}
.copyright{border-top:1px solid var(--line);margin-top:35px;padding-top:20px;color:#a99392;font-size:12px}
.bottom-bar{position:fixed;z-index:20;bottom:0;left:0;right:0;background:#2d1d24;color:var(--paper);border-top:1px solid rgba(225,132,112,.35);box-shadow:0 -8px 28px rgba(20,10,15,.18)}
.bottom-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.bottom-inner p{margin:0;color:#d4c1be;font-size:13px}
.age-modal{display:none;position:fixed;z-index:40;inset:0;background:rgba(23,19,22,.78);padding:20px;align-items:center;justify-content:center}
.age-modal.show{display:flex}
.modal-card{max-width:440px;background:var(--paper);border-radius:18px;padding:30px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal-card h2{margin:0 0 10px;font-size:26px}
.modal-card p{color:#806d70;font-size:14px;margin:0 0 20px}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:1024px){.page-head-grid{grid-template-columns:1fr 300px}.index-layout{grid-template-columns:1fr}.footer-grid{grid-template-columns:1.2fr 1fr 1fr}}
@media(max-width:768px){.wrap{width:min(100% - 28px,620px)}.brand-row{min-height:68px}.header-tools .search{width:42px;padding:4px}.search input{display:none}.header-tools{gap:6px}.tool-btn{font-size:12px;padding:7px 8px}.icon-nav{overflow-x:auto;grid-template-columns:repeat(3,minmax(145px,1fr))}.page-head{padding:50px 0}.page-head-grid{grid-template-columns:1fr;gap:28px}.section{padding:52px 0}.section-head{display:block}.section-head .section-lead{margin-top:10px}.toolbar-top{align-items:stretch;display:grid;grid-template-columns:1fr 1fr}.toolbar input{min-width:0;width:100%}.toolbar select{min-width:0;width:100%}.cta{display:block;padding:28px}.cta .btn{margin-top:20px}.faq-grid{grid-template-columns:1fr;gap:20px}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){body{padding-bottom:112px}.brand-name{font-size:14px}.brand-mark{width:34px;height:34px;font-size:17px}.header-tools .tool-btn:last-child{display:none}h1{font-size:35px}.lead{font-size:15px}.toolbar-top{grid-template-columns:1fr}.content-card{gap:12px;padding:13px}.content-card:not(.main-card){display:block}.content-card:not(.main-card) .cover{width:100%;height:130px}.main-card .cover{aspect-ratio:1.45}.footer-grid{grid-template-columns:1fr}.bottom-inner{min-height:100px;display:grid;grid-template-columns:1fr auto;padding:10px 0}.bottom-inner p{grid-column:1/-1}.bottom-inner .btn{padding:9px 13px;font-size:12px}}

/* roulang page: category2 */
:root{
      --ink:#171316;
      --night:#21191d;
      --wine:#762f48;
      --berry:#a84462;
      --coral:#e18470;
      --cream:#f4ede5;
      --paper:#fffaf4;
      --muted:#927e80;
      --line:rgba(255,250,244,.14);
      --darkline:rgba(33,25,29,.12);
      --shadow:0 14px 35px rgba(31,18,24,.13);
      --radius:16px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;color:var(--ink);background:var(--cream);
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      line-height:1.7;
    }
    a{text-decoration:none;color:inherit}
    button,input,select{font:inherit}
    button{cursor:pointer}
    img{display:block;max-width:100%}
    .wrap{width:min(1180px,calc(100% - 40px));margin:0 auto}
    .topbar{background:var(--night);color:var(--paper);border-bottom:1px solid var(--line)}
    .brand-row{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{display:flex;align-items:center;gap:12px;min-width:0}
    .brand-mark{
      width:39px;height:39px;border-radius:12px;background:var(--coral);color:var(--night);
      display:grid;place-items:center;font-weight:900;font-size:20px;box-shadow:5px 5px 0 rgba(225,132,112,.2)
    }
    .brand-name{font-weight:800;letter-spacing:-.04em;font-size:clamp(15px,2vw,21px);white-space:nowrap}
    .brand-name em{font-style:normal;color:#f0a891}
    .header-tools{display:flex;align-items:center;gap:10px}
    .search{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:4px 5px 4px 15px;background:rgba(255,255,255,.04)}
    .search input{width:170px;border:0;outline:0;background:transparent;color:var(--paper);font-size:13px}
    .search input::placeholder{color:#bba8a7}
    .search button,.tool-btn{border:0;background:transparent;color:var(--paper);padding:8px 11px;border-radius:999px}
    .search button:hover,.tool-btn:hover{background:var(--berry)}
    .tool-btn{border:1px solid var(--line);font-size:13px}
    .icon-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
    .nav-link{min-height:61px;padding:9px 15px;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--night);font-size:14px;color:#d6c6c3;transition:.22s}
    .nav-link span{font-size:19px;color:var(--coral)}
    .nav-link:hover,.nav-link.active{background:#342329;color:var(--paper);box-shadow:inset 0 -3px var(--coral)}
    .hero{background:var(--night);color:var(--paper);padding:76px 0 65px;position:relative;overflow:hidden}
    .hero:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 74px,rgba(255,255,255,.025) 75px,transparent 76px);opacity:.55}
    .hero:after{content:"";position:absolute;right:-15%;bottom:-55%;width:650px;height:600px;background:radial-gradient(ellipse,rgba(168,68,98,.35),transparent 67%);pointer-events:none}
    .hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:58px;align-items:center;position:relative;z-index:1}
    .eyebrow,.tag{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(225,132,112,.45);color:#f0a891;border-radius:999px;padding:5px 11px;font-size:12px;letter-spacing:.06em}
    h1,h2,h3,p{margin-top:0}
    h1{font-size:clamp(34px,5vw,64px);line-height:1.13;letter-spacing:-.06em;margin:20px 0 20px;max-width:720px}
    .hero-copy{font-size:17px;color:#d7c8c4;max-width:650px;margin-bottom:27px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:13px}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;padding:12px 19px;font-weight:800;font-size:14px;transition:.22s;border:1px solid transparent}
    .btn-primary{background:var(--coral);color:var(--night);box-shadow:0 7px 0 rgba(122,47,72,.55)}
    .btn-primary:hover{background:#f1a18d;transform:translateY(-2px)}
    .btn-outline{border-color:rgba(255,250,244,.35);color:var(--paper)}
    .btn-outline:hover{border-color:var(--coral);background:rgba(225,132,112,.1)}
    .btn:focus,.nav-link:focus,.tool-btn:focus,button:focus,input:focus,select:focus{outline:3px solid rgba(225,132,112,.45);outline-offset:3px}
    .hero-meta{display:flex;gap:25px;flex-wrap:wrap;margin-top:34px;color:#bdaaa8;font-size:13px}
    .hero-meta strong{display:block;color:var(--paper);font-size:22px;line-height:1.2}
    .hero-panel{background:#302126;border:1px solid rgba(255,250,244,.17);padding:22px;border-radius:18px;box-shadow:0 20px 45px rgba(0,0,0,.18)}
    .abstract-cover{height:250px;border-radius:13px;position:relative;overflow:hidden;background:linear-gradient(135deg,#5d3043,#a84462 48%,#e18470);display:flex;align-items:end;padding:18px}
    .abstract-cover:before{content:"";position:absolute;inset:20px 42% 20px 20px;border:1px solid rgba(255,250,244,.45);transform:skewY(-12deg)}
    .abstract-cover:after{content:"";position:absolute;width:190px;height:190px;border:28px solid rgba(244,237,229,.18);border-radius:50%;right:-35px;top:-30px}
    .cover-caption{position:relative;z-index:1;color:#fffaf4}
    .cover-caption small{display:block;color:#f9c0ae;font-size:11px;letter-spacing:.12em}
    .panel-row{display:flex;justify-content:space-between;gap:12px;margin-top:17px}
    .panel-row b{font-size:14px;color:var(--paper)}
    .panel-row small{display:block;color:#bdaaa8;font-size:11px}
    .section{padding:78px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px}
    .section-kicker{color:var(--wine);font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
    h2{font-size:clamp(25px,3vw,39px);line-height:1.2;letter-spacing:-.045em;margin:7px 0 0}
    .section-lead{max-width:560px;color:#756568;font-size:15px}
    .feature-strip{display:grid;grid-template-columns:1.3fr .85fr .85fr;gap:14px}
    .feature{background:var(--paper);border:1px solid var(--darkline);padding:25px;border-radius:var(--radius);min-height:190px;box-shadow:var(--shadow);transition:.2s}
    .feature:first-child{background:var(--wine);color:var(--paper)}
    .feature:hover,.topic:hover,.timeline-card:hover,.related-card:hover{transform:translateY(-4px);border-color:var(--coral)}
    .feature-icon{font-size:25px;color:var(--coral)}
    .feature h3{margin:14px 0 7px;font-size:20px}
    .feature p{margin:0;color:#806d70;font-size:14px}
    .feature:first-child p{color:#e4d4d0}
    .mini-status{display:inline-block;margin-top:19px;padding:4px 8px;border-radius:6px;background:rgba(168,68,98,.1);color:var(--wine);font-size:11px;font-weight:800}
    .feature:first-child .mini-status{color:var(--paper);background:rgba(255,255,255,.13)}
    .topic-shell{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:stretch}
    .topic{background:var(--paper);border:1px solid var(--darkline);border-radius:18px;padding:28px;box-shadow:var(--shadow);transition:.2s}
    .topic.dark{background:#332329;color:var(--paper);border-color:rgba(255,255,255,.12)}
    .topic h3{font-size:24px;line-height:1.3;margin:13px 0 9px}
    .topic p{font-size:14px;color:#806d70}
    .topic.dark p{color:#d5c4c0}
    .filter-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:21px}
    .filter-row span{padding:6px 10px;border:1px solid rgba(255,250,244,.2);border-radius:8px;color:#c8b5b3;font-size:11px}
    .filter-row span.on{background:var(--berry);color:white;border-color:var(--berry)}
    .timeline{position:relative;padding-left:25px;border-left:1px solid #caaeb0}
    .timeline-item{position:relative;padding:0 0 24px 19px}
    .timeline-item:before{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--coral);left:-32px;top:7px;border:3px solid var(--cream)}
    .timeline-item:last-child{padding-bottom:0}
    .timeline-item time{font-size:11px;color:var(--wine);font-weight:900;letter-spacing:.08em}
    .timeline-item h3{font-size:18px;margin:5px 0}
    .timeline-item p{font-size:13px;color:#806d70;margin:0}
    .band{background:#e5d8ce;border-top:1px solid #d8c5bd;border-bottom:1px solid #d8c5bd}
    .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
    .stat{border-left:3px solid var(--coral);padding:7px 0 7px 16px}
    .stat strong{font-size:32px;line-height:1;color:var(--wine);display:block}
    .stat span{font-size:13px;color:#756568}
    .related-row{display:flex;gap:15px;overflow-x:auto;padding-bottom:9px;scrollbar-color:var(--berry) transparent}
    .related-card{min-width:250px;background:var(--paper);border:1px solid var(--darkline);border-radius:15px;padding:18px;transition:.2s}
    .related-card .stripe{height:6px;border-radius:6px;background:var(--coral);margin-bottom:19px}
    .related-card:nth-child(2) .stripe{background:var(--berry)}
    .related-card:nth-child(3) .stripe{background:var(--wine)}
    .related-card h3{font-size:17px;margin:0 0 7px}
    .related-card p{font-size:13px;color:#806d70;margin:0 0 16px}
    .faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:45px}
    .faq-item{border-top:1px solid var(--darkline)}
    .faq-item button{width:100%;background:transparent;border:0;padding:18px 0;text-align:left;display:flex;justify-content:space-between;gap:20px;font-weight:800;color:var(--ink)}
    .faq-answer{display:none;color:#806d70;font-size:14px;padding:0 35px 18px 0}
    .faq-item.open .faq-answer{display:block}
    .faq-item.open button span:last-child{transform:rotate(45deg)}
    .faq-item button span:last-child{font-size:22px;color:var(--berry);transition:.2s}
    .cta{background:var(--wine);color:var(--paper);padding:46px 0}
    .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:28px}
    .cta h2{margin-bottom:8px}
    .cta p{color:#e4d4d0;margin:0;max-width:660px}
    footer{background:var(--night);color:var(--paper);padding:48px 0 85px}
    .footer-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:42px}
    .footer-title{font-weight:800;margin-bottom:14px;color:#f0a891}
    .footer-links{display:grid;gap:8px;color:#c8b5b3;font-size:13px}
    .footer-links a:hover{color:var(--coral)}
    .copyright{border-top:1px solid var(--line);margin-top:35px;padding-top:20px;color:#a99292;font-size:12px}
    .fixed-bar{position:fixed;z-index:20;left:0;right:0;bottom:0;background:#321f27;color:#fffaf4;border-top:1px solid rgba(255,250,244,.18);box-shadow:0 -8px 25px rgba(22,12,17,.2)}
    .fixed-inner{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:18px}
    .fixed-inner p{margin:0;color:#d8c7c3;font-size:13px}
    .fixed-inner p strong{color:#fffaf4}
    .modal-backdrop{display:none;position:fixed;z-index:40;inset:0;background:rgba(23,13,18,.76);place-items:center;padding:20px}
    .modal-backdrop.show{display:grid}
    .modal{width:min(460px,100%);background:var(--paper);border-radius:18px;padding:28px;box-shadow:0 25px 70px rgba(0,0,0,.3)}
    .modal h2{font-size:27px;margin:0 0 10px}
    .modal p{font-size:14px;color:#806d70}
    .modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
    .btn-dark{background:var(--night);color:var(--paper)}
    .btn-dark:hover{background:var(--berry)}
    @media(max-width:1024px){
      .hero-grid,.topic-shell{grid-template-columns:1fr 1fr;gap:28px}
      .feature-strip{grid-template-columns:1fr 1fr}
      .feature:first-child{grid-column:span 2}
    }
    @media(max-width:768px){
      .wrap{width:min(100% - 28px,640px)}
      .brand-row{min-height:68px}
      .header-tools .search{width:42px;padding:4px}
      .search input{display:none}
      .header-tools .tool-btn:last-child{display:none}
      .icon-nav{display:flex;overflow-x:auto}
      .nav-link{min-width:34%;white-space:nowrap}
      .hero{padding:55px 0 48px}
      .hero-grid,.topic-shell,.faq-grid{grid-template-columns:1fr}
      .hero-panel{order:2}
      .feature-strip{grid-template-columns:1fr}
      .feature:first-child{grid-column:auto}
      .stats-grid{grid-template-columns:repeat(2,1fr);gap:24px}
      .section{padding:58px 0}
      .section-head{display:block}
      .section-lead{margin-top:12px}
      .cta-inner{display:block}
      .cta .btn{margin-top:22px}
      .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
      .footer-grid>div:first-child{grid-column:span 2}
    }
    @media(max-width:520px){
      h1{font-size:35px}
      .brand-name{font-size:14px}
      .brand-mark{width:34px;height:34px;font-size:17px}
      .header-tools{gap:5px}
      .tool-btn{font-size:11px;padding:7px 8px}
      .hero-meta{gap:16px}
      .abstract-cover{height:210px}
      .stats-grid{grid-template-columns:1fr 1fr}
      .footer-grid{grid-template-columns:1fr}
      .footer-grid>div:first-child{grid-column:auto}
      .fixed-inner{min-height:76px}
      .fixed-inner p{font-size:11px;line-height:1.45}
      .fixed-inner .btn{padding:10px 12px;font-size:12px;white-space:nowrap}
    }