/* roulang page: index */
:root{
  --berry:#281a32;--plum:#3b2450;--lime:#cbea68;--coral:#f47b61;
  --cream:#fff9ef;--mist:#f3edf7;--lavender:#e8e1ec;--ink:#302638;
  --muted:#786d7e;--line:#ded4e3;--white:#fff;--radius:16px;
  --shadow:0 14px 38px rgba(40,26,50,.09);--ease:all .25s ease;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.7;font-size:15px}
a{color:inherit;text-decoration:none;transition:var(--ease)}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
button{cursor:pointer;border:0}
.container{width:min(1180px,calc(100% - 40px));margin:auto}
.section{padding:88px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:34px}
.eyebrow{color:var(--coral);font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
h1,h2,h3{color:var(--berry);line-height:1.2;letter-spacing:-.03em}
h1{font-size:clamp(38px,5vw,66px);max-width:680px}
h2{font-size:clamp(28px,3.4vw,42px)}
h3{font-size:19px}
p{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 21px;border-radius:10px;font-weight:800;border:1px solid transparent;transition:var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 9px 20px rgba(40,26,50,.15)}
.btn:focus,.nav-link:focus,.faq-q:focus,input:focus,select:focus,textarea:focus{outline:3px solid rgba(203,234,104,.65);outline-offset:3px}
.btn-primary{background:var(--lime);color:var(--berry)}
.btn-secondary{border-color:var(--berry);color:var(--berry);background:transparent}
.btn-light{background:var(--cream);color:var(--berry)}
.tag{display:inline-flex;padding:4px 10px;border-radius:30px;background:var(--mist);font-size:12px;color:var(--plum);font-weight:700}
.tag.hot{background:#ffe1d8;color:#a34a38}
.site-header{background:var(--cream);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.navbar{height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;color:var(--berry);font-size:17px;white-space:nowrap}
.brand-mark{width:38px;height:38px;border-radius:12px;background:var(--lime);display:grid;place-items:center;color:var(--berry);font-size:20px;font-weight:900}
.brand small{display:block;color:var(--coral);font-size:10px;letter-spacing:.08em}
.nav-list{display:flex;align-items:center;gap:5px;list-style:none}
.nav-link{display:block;padding:10px 14px;border-radius:9px;font-weight:700;color:#5d5065}
.nav-link:hover,.nav-link.active{background:var(--lavender);color:var(--berry)}
.nav-link.active{box-shadow:inset 0 -3px var(--lime)}
.menu-toggle{display:none;background:var(--plum);color:var(--white);width:42px;height:40px;border-radius:9px;font-size:20px}
.hero{padding:78px 0 72px;background:var(--mist);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:70px}
.hero-copy p{font-size:18px;max-width:600px;margin:24px 0 30px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-note{margin-top:19px!important;font-size:13px!important;color:var(--muted)}
.hero-art{position:relative;min-height:390px}
.art-panel{position:absolute;background:var(--berry);border-radius:24px;box-shadow:var(--shadow);color:var(--white)}
.art-main{inset:18px 0 20px 46px;padding:30px}
.art-main h3{color:var(--white);font-size:28px;margin:25px 0 8px}
.art-main p{color:#cfc1d8}
.art-top{display:flex;justify-content:space-between;align-items:center}
.art-dot{width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:18px 0 var(--coral),36px 0 #fff}
.art-bars{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:35px}
.art-bars span{height:94px;border-radius:12px;background:linear-gradient(145deg,#80629a,#f47b61)}
.art-bars span:nth-child(2){background:linear-gradient(145deg,#cbea68,#9272ac);transform:translateY(22px)}
.art-bars span:nth-child(3){background:linear-gradient(145deg,#f3b26e,#503566)}
.art-float{right:-12px;bottom:0;width:150px;padding:18px;background:var(--lime);color:var(--berry);transform:rotate(5deg)}
.art-float strong{font-size:28px;display:block}
.quick{margin-top:-28px;position:relative;z-index:2}
.quick-bar{display:grid;grid-template-columns:repeat(4,1fr);background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.quick-item{padding:22px 24px;border-right:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.quick-item:last-child{border:0}.quick-item:hover{background:var(--mist)}
.quick-item strong{display:block;color:var(--berry)}.quick-item span{font-size:12px;color:var(--muted)}
.arrow{color:var(--coral);font-size:22px}
.games{background:var(--cream)}
.game-grid{display:grid;grid-template-columns:1.25fr .85fr .85fr;gap:18px}
.game-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:var(--ease)}
.game-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.game-cover{height:180px;padding:18px;display:flex;align-items:end;background:linear-gradient(135deg,#4a2d5e,#f47b61)}
.game-card:first-child .game-cover{height:230px;background:linear-gradient(135deg,#281a32 20%,#8b5b9e 55%,#cbea68)}
.game-cover b{font-size:28px;color:var(--white)}
.game-body{padding:20px}.game-body p{font-size:13px;margin:9px 0 16px}
.featured{grid-row:span 2}
.content-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:22px}
.feature-card,.mini-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.feature-card{min-height:280px;background:var(--plum);color:var(--white);display:flex;flex-direction:column;justify-content:end}
.feature-card h3{color:var(--white);font-size:28px;margin:12px 0}.feature-card p{color:#ddcfe4}
.mini-stack{display:grid;gap:12px}.mini-card{display:flex;gap:16px;align-items:center}.mini-no{font-size:28px;font-weight:900;color:var(--coral)}
.news-wrap{background:var(--mist)}
.news-list{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.news-row{display:grid;grid-template-columns:100px 110px 1fr 90px;align-items:center;gap:18px;padding:20px 24px;border-bottom:1px solid var(--line)}
.news-row:last-child{border:0}.news-row:hover{background:#fffdf8}
.news-date{font-weight:800;color:var(--berry)}.news-row h3{font-size:17px}.news-row p{font-size:13px;margin-top:4px}.news-arrow{color:var(--coral);font-size:20px;text-align:right}
.empty{padding:32px;text-align:center;color:var(--muted)}
.guide{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{padding:24px;background:var(--white);border-top:4px solid var(--lime);border-radius:var(--radius);box-shadow:0 5px 20px rgba(40,26,50,.04)}
.step-num{font-size:38px;font-weight:900;color:var(--coral);line-height:1}.step h3{margin:16px 0 7px}
.ranking{background:var(--berry);color:var(--white)}.ranking h2,.ranking .eyebrow{color:var(--white)}
.rank-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rank-item{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:15px;padding:18px 20px;border:1px solid #523d61;border-radius:12px}
.rank-item:first-child{background:var(--lime);color:var(--berry);border-color:var(--lime)}.rank-item h3{color:inherit}.rank-no{font-size:27px;font-weight:900}
.play-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px}.play-card{padding:28px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius)}.play-card ul{list-style:none;margin-top:18px}.play-card li{padding:10px 0;border-bottom:1px dashed var(--line);color:var(--muted)}.play-card li::before{content:"✓";color:var(--coral);font-weight:900;margin-right:10px}
.download{background:var(--coral);color:var(--white)}.download h2,.download p{color:var(--white)}.download-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:50px}.download-box{background:var(--cream);color:var(--berry);border-radius:18px;padding:28px;display:flex;align-items:center;gap:25px}.qr{width:112px;height:112px;background:repeating-linear-gradient(45deg,var(--berry) 0 5px,var(--cream) 5px 10px);border:9px solid var(--white);flex:none}
.mobile-show{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:end}.screen{background:var(--berry);border:7px solid #4f3860;border-radius:25px;padding:13px;height:260px;color:var(--white)}.screen:nth-child(2){height:310px;background:#4a2d5e}.screen-top{height:40px;border-bottom:1px solid #755e80}.screen-block{height:80px;border-radius:10px;background:var(--lime);margin-top:15px}.screen p{font-size:12px;color:#d8c9df;margin-top:14px}
.timeline{border-left:2px solid var(--coral);padding-left:28px;display:grid;gap:22px}.timeline-item{position:relative}.timeline-item::before{content:"";position:absolute;left:-36px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--lime);border:3px solid var(--coral)}.timeline-item strong{color:var(--coral);font-size:13px}.timeline-item h3{margin:4px 0}
.activity{background:var(--lavender)}.activity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.activity-card{padding:24px;background:var(--cream);border-radius:var(--radius);border-left:5px solid var(--coral)}.activity-card h3{margin:10px 0}
.notice{display:flex;gap:20px;align-items:flex-start;background:#f0f7ce;border:1px solid #d8e99a;border-radius:var(--radius);padding:25px}.notice-icon{font-size:25px}
.faq-list{border-top:1px solid var(--line)}.faq{border-bottom:1px solid var(--line)}.faq-q{width:100%;background:transparent;text-align:left;padding:21px 4px;font-weight:800;color:var(--berry);display:flex;justify-content:space-between}.faq-q span{color:var(--coral);font-size:20px}.faq-a{display:none;padding:0 38px 20px 4px}.faq.open .faq-a{display:block}
.final-cta{padding:60px 0;background:var(--plum)}.final-box{display:flex;justify-content:space-between;align-items:center;gap:30px}.final-box h2,.final-box p{color:var(--white)}.final-box p{margin-top:10px}
.site-footer{background:var(--berry);color:#d9cde0;padding:56px 0 22px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:35px}.footer-brand{color:var(--white);font-size:19px;font-weight:900;margin-bottom:12px}.site-footer h3{color:var(--lime);font-size:14px;margin-bottom:14px}.site-footer ul{list-style:none}.site-footer li{margin:8px 0;font-size:13px}.site-footer a:hover{color:var(--lime)}.copyright{border-top:1px solid #493452;margin-top:35px;padding-top:18px;font-size:12px;display:flex;justify-content:space-between;gap:15px}
@media(max-width:900px){.hero-grid,.download-grid,.content-grid{grid-template-columns:1fr}.hero-art{min-height:320px}.game-grid{grid-template-columns:1fr 1fr}.featured{grid-row:auto}.guide{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.container{width:min(100% - 28px,560px)}.navbar{height:68px}.menu-toggle{display:block}.nav-list{display:none;position:absolute;top:68px;left:14px;right:14px;padding:10px;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.nav-list.show{display:flex}.nav-link{padding:13px 15px}.brand{font-size:14px}.hero{padding:58px 0}.hero-copy p{font-size:16px}.hero-art{min-height:270px}.art-main{inset:12px 0 15px 18px;padding:22px}.art-main h3{font-size:22px}.quick-bar{grid-template-columns:1fr 1fr}.quick-item{padding:16px;border-bottom:1px solid var(--line)}.quick-item:nth-child(2){border-right:0}.section{padding:62px 0}.section-head{display:block;margin-bottom:24px}.section-head p{margin-top:10px}.game-grid,.rank-list,.play-layout,.activity-grid,.guide{grid-template-columns:1fr}.game-card:first-child .game-cover,.game-cover{height:170px}.news-row{grid-template-columns:72px 1fr 28px;gap:10px;padding:17px 14px}.news-row .tag{display:none}.news-row p{display:none}.download-box{display:block}.qr{margin-bottom:18px}.mobile-show{gap:8px}.screen{height:205px;padding:8px;border-width:5px}.screen:nth-child(2){height:250px}.screen-block{height:55px}.final-box{display:block}.final-box .btn{margin-top:22px}.footer-grid{grid-template-columns:1fr 1fr;gap:25px}.copyright{display:block}.copyright span{display:block;margin-top:8px}}

/* roulang page: article */
:root{
      --berry:#281a32;--plum:#3b2450;--lime:#cbea68;--coral:#f47b61;
      --cream:#fff9ef;--mist:#f3edf7;--lavender:#e8e1ec;--ink:#302638;
      --muted:#786d7e;--line:#ded4e3;--white:#fff;--radius:16px;
      --shadow:0 14px 38px rgba(40,26,50,.09);--ease:all .25s ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.7;font-size:15px}
    a{color:inherit;text-decoration:none;transition:var(--ease)}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer;border:0}
    h1,h2,h3,h4,p{margin-top:0}
    h1,h2,h3,h4{color:var(--berry);line-height:1.3;font-weight:850}
    .container{width:min(1180px,calc(100% - 40px));margin:auto}
    .section{padding:82px 0}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:32px}
    .eyebrow{color:var(--coral);font-size:12px;font-weight:800;letter-spacing:.13em}
    .muted{color:var(--muted)}
    .tag{display:inline-flex;padding:4px 10px;border-radius:30px;background:var(--mist);font-size:12px;color:var(--plum);font-weight:700}
    .tag.hot{background:#ffe1d8;color:#a34a38}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 21px;border-radius:10px;font-weight:800;border:1px solid transparent;transition:var(--ease)}
    .btn:hover{transform:translateY(-2px);box-shadow:0 9px 20px rgba(40,26,50,.15)}
    .btn:focus,.nav-link:focus,.faq-q:focus,input:focus,select:focus,textarea:focus{outline:3px solid rgba(203,234,104,.65);outline-offset:3px}
    .btn-primary{background:var(--lime);color:var(--berry)}
    .btn-secondary{border-color:var(--berry);color:var(--berry);background:transparent}
    .btn-light{background:var(--cream);color:var(--berry)}
    .site-header{background:var(--cream);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
    .navbar{height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
    .brand{display:flex;align-items:center;gap:12px;font-weight:900;color:var(--berry);font-size:17px;white-space:nowrap}
    .brand-mark{width:38px;height:38px;border-radius:12px;background:var(--lime);display:grid;place-items:center;color:var(--berry);font-size:20px;font-weight:900}
    .brand small{display:block;color:var(--coral);font-size:10px;letter-spacing:.08em}
    .nav-list{display:flex;align-items:center;gap:5px;list-style:none;margin:0;padding:0}
    .nav-link{display:block;padding:10px 14px;border-radius:9px;font-weight:700;color:#5d5065}
    .nav-link:hover,.nav-link.active{background:var(--lavender);color:var(--berry)}
    .nav-link.active{box-shadow:inset 0 -3px var(--lime)}
    .menu-toggle{display:none;background:var(--plum);color:var(--white);width:42px;height:40px;border-radius:9px;font-size:20px}
    .article-hero{padding:74px 0 54px;background:var(--mist);border-bottom:1px solid var(--line)}
    .crumbs{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13px;margin-bottom:24px}
    .crumbs a:hover{color:var(--coral)}
    .crumbs span:last-child{color:var(--berry);font-weight:700;max-width:620px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .article-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:56px;align-items:end}
    .article-title{font-size:clamp(34px,5vw,58px);letter-spacing:-.035em;margin:14px 0 22px;max-width:850px}
    .article-description{font-size:18px;color:#5f5366;max-width:760px;margin-bottom:24px}
    .article-meta{display:flex;flex-wrap:wrap;gap:10px 22px;color:var(--muted);font-size:13px}
    .article-cover{min-height:220px;border-radius:22px;background:linear-gradient(145deg,var(--berry),var(--plum) 55%,var(--coral));padding:24px;display:flex;align-items:end;position:relative;overflow:hidden;box-shadow:var(--shadow)}
    .article-cover:before,.article-cover:after{content:"";position:absolute;border:1px solid rgba(203,234,104,.35);border-radius:50%}
    .article-cover:before{width:220px;height:220px;right:-80px;top:-70px}
    .article-cover:after{width:120px;height:120px;left:-30px;bottom:-50px}
    .cover-label{position:relative;z-index:1;color:var(--white);font-weight:800;font-size:21px;max-width:190px}
    .reading-section{background:var(--cream)}
    .reading-layout{display:grid;grid-template-columns:minmax(0,780px) 290px;gap:54px;align-items:start}
    .article-content{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:clamp(25px,5vw,56px);box-shadow:0 8px 25px rgba(40,26,50,.04)}
    .article-content h2{font-size:30px;margin:35px 0 15px}
    .article-content h3{font-size:22px;margin:28px 0 12px}
    .article-content p{font-size:17px;line-height:2;margin:0 0 21px;color:#4e4355}
    .article-content ul,.article-content ol{padding-left:25px;margin:18px 0 25px;color:#4e4355}
    .article-content li{margin:9px 0;padding-left:5px}
    .article-content blockquote{margin:28px 0;padding:20px 24px;background:var(--mist);border-left:4px solid var(--coral);border-radius:0 12px 12px 0;color:var(--plum);font-weight:700}
    .article-content img{border-radius:14px;margin:26px auto}
    .article-content table{width:100%;border-collapse:collapse;margin:25px 0}
    .article-content th,.article-content td{padding:12px;border:1px solid var(--line);text-align:left}
    .article-content th{background:var(--mist);color:var(--berry)}
    .article-content a{color:#9a4939;text-decoration:underline;text-underline-offset:3px}
    .article-aside{position:sticky;top:105px}
    .aside-card{background:var(--plum);color:var(--white);border-radius:18px;padding:24px;margin-bottom:18px}
    .aside-card h3{color:var(--white);font-size:19px;margin-bottom:15px}
    .aside-card p{color:#ddcfe4;font-size:13px}
    .aside-list{list-style:none;padding:0;margin:0}
    .aside-list li{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.15);font-size:13px}
    .aside-list li:last-child{border:0}
    .aside-list a:hover{color:var(--lime)}
    .note-card{background:var(--lime);color:var(--berry);border-radius:18px;padding:22px}
    .note-card strong{display:block;margin-bottom:6px}
    .article-actions{background:var(--lavender);padding:42px 0}
    .action-grid{display:flex;justify-content:space-between;gap:18px;align-items:center}
    .action-item{max-width:390px}
    .action-item small{display:block;color:var(--coral);font-weight:800;margin-bottom:4px}
    .action-item h3{font-size:18px;margin:0}
    .action-item:hover h3{color:#9a4939}
    .related{background:var(--mist)}
    .related-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:18px}
    .related-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:24px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;transition:var(--ease)}
    .related-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
    .related-card h3{font-size:20px;margin:14px 0 8px}
    .related-card p{font-size:13px;color:var(--muted);margin-bottom:15px}
    .card-link{color:#9a4939;font-weight:800;font-size:13px}
    .download-strip{background:var(--berry);color:var(--white);padding:44px 0}
    .download-content{display:flex;justify-content:space-between;align-items:center;gap:30px}
    .download-content h2{color:var(--white);font-size:30px;margin:8px 0 10px}
    .download-content p{color:#d8c9df;margin:0;max-width:620px}
    .download-badge{display:flex;gap:10px;flex-wrap:wrap;margin-top:15px}
    .feedback{background:var(--cream)}
    .feedback-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:45px;align-items:start}
    .feedback-copy h2{font-size:32px;margin:10px 0 14px}
    .feedback-form{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:28px}
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .field{margin-bottom:16px}
    .field.full{grid-column:1/-1}
    .field label{display:block;font-weight:800;color:var(--berry);font-size:13px;margin-bottom:7px}
    .field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:#fffdf8;border-radius:10px;padding:12px 13px;color:var(--ink)}
    .field textarea{min-height:115px;resize:vertical}
    .privacy-note{font-size:12px;color:var(--muted);margin:12px 0 0}
    .empty-state{padding:42px 20px;text-align:center;background:var(--mist);border-radius:14px;color:var(--muted)}
    .empty-state strong{display:block;color:var(--berry);font-size:18px;margin-bottom:5px}
    .site-footer{background:var(--berry);color:#d8c9df;padding:58px 0 24px}
    .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;padding-bottom:38px}
    .footer-brand{color:var(--lime);font-weight:900;font-size:19px;margin-bottom:10px}
    .site-footer p{font-size:13px;max-width:230px}
    .site-footer h3{color:var(--white);font-size:14px;margin:0 0 13px}
    .site-footer ul{list-style:none;padding:0;margin:0}
    .site-footer li{margin:8px 0;font-size:13px}
    .site-footer a:hover{color:var(--lime)}
    .copyright{border-top:1px solid rgba(255,255,255,.15);padding-top:20px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;color:#b9a9c1}
    @media(max-width:1024px){
      .navbar{gap:15px}.nav-link{padding:9px 9px;font-size:13px}
      .article-hero-grid,.reading-layout{grid-template-columns:1fr}
      .article-cover{min-height:150px}
      .article-aside{position:static;display:grid;grid-template-columns:1fr 1fr;gap:18px}
      .aside-card,.note-card{margin:0}
      .related-grid{grid-template-columns:1fr 1fr}
      .related-card:first-child{grid-column:1/-1}
    }
    @media(max-width:768px){
      .container{width:min(100% - 30px,620px)}
      .navbar{height:68px}.menu-toggle{display:block}
      .nav-list{display:none;position:absolute;left:15px;right:15px;top:76px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}
      .nav-list.open{display:flex}.nav-link{padding:13px 14px}
      .brand{font-size:15px}.brand-mark{width:34px;height:34px}
      .article-hero{padding:50px 0 40px}.article-title{font-size:38px}
      .article-description{font-size:16px}.section{padding:58px 0}
      .article-aside{grid-template-columns:1fr}.action-grid,.download-content{align-items:flex-start;flex-direction:column}
      .related-grid,.feedback-grid{grid-template-columns:1fr}
      .related-card:first-child{grid-column:auto}
      .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
    }
    @media(max-width:520px){
      .brand small{display:none}.article-title{font-size:31px}
      .article-content{padding:23px 19px}.article-content p{font-size:16px}
      .form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}
      .footer-grid{grid-template-columns:1fr}.copyright{display:block}.copyright span{display:block;margin-bottom:8px}
    }

/* roulang page: category1 */
:root{
      --berry:#281a32;--plum:#3b2450;--lime:#cbea68;--coral:#f47b61;
      --cream:#fff9ef;--mist:#f3edf7;--lavender:#e8e1ec;--ink:#302638;
      --muted:#786d7e;--line:#ded4e3;--white:#fff;--radius:16px;
      --shadow:0 14px 38px rgba(40,26,50,.09);--ease:all .25s ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.7;font-size:15px}
    a{color:inherit;text-decoration:none;transition:var(--ease)}
    a:hover{color:var(--coral)}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer;border:0}
    h1,h2,h3,p{margin-top:0}
    h1,h2,h3{line-height:1.25;color:var(--berry);font-weight:900}
    h1{font-size:clamp(38px,5vw,66px);letter-spacing:-.04em}
    h2{font-size:clamp(28px,3.2vw,42px)}
    h3{font-size:19px}
    .container{width:min(1180px,calc(100% - 40px));margin:auto}
    .section{padding:86px 0}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:34px}
    .section-head p{max-width:600px;color:var(--muted);margin-bottom:0}
    .eyebrow{color:var(--coral);font-size:12px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
    .tag{display:inline-flex;padding:4px 10px;border-radius:30px;background:var(--mist);font-size:12px;color:var(--plum);font-weight:700}
    .tag.hot{background:#ffe1d8;color:#a34a38}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 21px;border-radius:10px;font-weight:800;border:1px solid transparent;transition:var(--ease)}
    .btn:hover{transform:translateY(-2px);box-shadow:0 9px 20px rgba(40,26,50,.15)}
    .btn-primary{background:var(--lime);color:var(--berry)}
    .btn-secondary{border-color:var(--berry);color:var(--berry);background:transparent}
    .btn-light{background:var(--cream);color:var(--berry)}
    .btn:focus,.nav-link:focus,.faq-q:focus,input:focus,select:focus{outline:3px solid rgba(203,234,104,.65);outline-offset:3px}
    .site-header{background:var(--cream);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
    .navbar{height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
    .brand{display:flex;align-items:center;gap:12px;font-weight:900;color:var(--berry);font-size:17px;white-space:nowrap}
    .brand-mark{width:38px;height:38px;border-radius:12px;background:var(--lime);display:grid;place-items:center;color:var(--berry);font-size:20px;font-weight:900}
    .brand small{display:block;color:var(--coral);font-size:10px;letter-spacing:.08em}
    .nav-list{display:flex;align-items:center;gap:5px;list-style:none;margin:0;padding:0}
    .nav-link{display:block;padding:10px 14px;border-radius:9px;font-weight:700;color:#5d5065}
    .nav-link:hover,.nav-link.active{background:var(--lavender);color:var(--berry)}
    .nav-link.active{box-shadow:inset 0 -3px var(--lime)}
    .menu-toggle{display:none;background:var(--plum);color:var(--white);width:42px;height:40px;border-radius:9px;font-size:20px}
    .page-hero{padding:82px 0 74px;background:var(--mist);position:relative;overflow:hidden}
    .page-hero:after{content:"";position:absolute;width:310px;height:310px;border-radius:50%;background:var(--lime);opacity:.28;right:-90px;top:-120px}
    .hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:center;position:relative;z-index:1}
    .page-hero p{font-size:18px;max-width:670px;color:#5f5367;margin:22px 0 28px}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
    .entry-visual{background:var(--berry);border-radius:24px;padding:26px;color:var(--white);min-height:275px;box-shadow:var(--shadow);position:relative}
    .entry-visual:before,.entry-visual:after{content:"";position:absolute;border:1px solid rgba(203,234,104,.45);border-radius:50%}
    .entry-visual:before{width:190px;height:190px;right:25px;top:30px}
    .entry-visual:after{width:120px;height:120px;right:60px;top:65px}
    .visual-top{display:flex;justify-content:space-between;position:relative;z-index:1}
    .visual-title{position:relative;z-index:1;margin-top:70px}
    .visual-title strong{font-size:31px;color:var(--lime);display:block}
    .visual-title span{color:#d7c9df;font-size:13px}
    .filter-panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;gap:24px;align-items:center;flex-wrap:wrap;box-shadow:0 8px 24px rgba(40,26,50,.04)}
    .filter-title{font-weight:900;color:var(--berry);margin-right:5px}
    .filter-tags{display:flex;gap:9px;flex-wrap:wrap}
    .filter-tags .tag{cursor:pointer}
    .filter-tags .tag:hover,.filter-tags .tag.selected{background:var(--lime);color:var(--berry)}
    .entry-list{display:grid;gap:14px}
    .entry-card{display:grid;grid-template-columns:88px 1fr auto;align-items:center;gap:22px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;transition:var(--ease)}
    .entry-card:hover{transform:translateX(5px);box-shadow:var(--shadow);border-color:#cdbfd5}
    .entry-icon{height:76px;border-radius:13px;background:linear-gradient(145deg,var(--plum),#8b5b9e);display:grid;place-items:center;color:var(--lime);font-size:28px;font-weight:900}
    .entry-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:7px}
    .entry-card h3{margin:0 0 5px}
    .entry-card p{margin:0;color:var(--muted);font-size:13px}
    .entry-date{font-size:12px;color:var(--muted);white-space:nowrap}
    .recommend{background:var(--berry);color:var(--white)}
    .recommend h2,.recommend h3{color:var(--white)}
    .recommend .section-head p{color:#d8cadf}
    .recommend-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}
    .recommend-main,.recommend-side{border-radius:var(--radius);padding:28px;border:1px solid #523d61}
    .recommend-main{min-height:250px;background:linear-gradient(135deg,#4c2d60,#281a32)}
    .recommend-main p,.recommend-side p{color:#d8cadf}
    .recommend-main h3{font-size:29px;margin:22px 0 10px}
    .recommend-side{display:grid;gap:15px}
    .recommend-mini{padding-bottom:15px;border-bottom:1px solid #523d61}
    .recommend-mini:last-child{border:0;padding-bottom:0}
    .tips{background:var(--lavender)}
    .tip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
    .tip{background:var(--cream);border-radius:var(--radius);padding:24px;border:1px solid var(--line)}
    .tip-number{font-size:38px;color:var(--coral);font-weight:900;line-height:1}
    .tip h3{margin:15px 0 8px}
    .tip p{color:var(--muted);font-size:13px;margin-bottom:0}
    .mobile-panel{display:grid;grid-template-columns:.85fr 1.15fr;gap:55px;align-items:center}
    .device-stack{height:285px;position:relative}
    .device{position:absolute;width:145px;height:260px;border:8px solid var(--berry);border-radius:25px;background:var(--mist);padding:16px;box-shadow:var(--shadow)}
    .device:first-child{left:35px;top:18px;transform:rotate(-8deg)}
    .device:last-child{left:155px;top:0;transform:rotate(7deg);background:var(--plum);border-color:var(--plum)}
    .device-bar{height:10px;width:55px;background:var(--coral);border-radius:10px;margin:2px auto 25px}
    .device-block{height:55px;background:var(--lime);border-radius:10px;margin-bottom:12px}
    .device:last-child .device-block{background:#8b5b9e}
    .mobile-copy ul{padding:0;margin:22px 0 0;list-style:none}
    .mobile-copy li{padding:10px 0;border-bottom:1px dashed var(--line);color:var(--muted)}
    .mobile-copy li:before{content:"✓";color:var(--coral);font-weight:900;margin-right:10px}
    .faq-list{border-top:1px solid var(--line)}
    .faq{border-bottom:1px solid var(--line)}
    .faq-q{width:100%;background:transparent;text-align:left;padding:21px 4px;font-weight:800;color:var(--berry);display:flex;justify-content:space-between;align-items:center}
    .faq-q span{color:var(--coral);font-size:20px}
    .faq-a{display:none;padding:0 38px 20px 4px;color:var(--muted)}
    .faq.open .faq-a{display:block}
    .faq.open .faq-q span{transform:rotate(45deg)}
    .cta-band{background:var(--plum);color:var(--white);padding:42px 48px;border-radius:22px;display:flex;align-items:center;justify-content:space-between;gap:30px}
    .cta-band h2{color:var(--white);margin-bottom:9px}
    .cta-band p{margin:0;color:#d8cadf}
    .site-footer{background:var(--berry);color:#d8cadf;padding:58px 0 24px}
    .footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:35px}
    .footer-brand{font-size:20px;font-weight:900;color:var(--lime);margin-bottom:12px}
    .site-footer h3{color:var(--white);font-size:15px;margin-bottom:14px}
    .site-footer p{font-size:13px;max-width:250px}
    .site-footer ul{list-style:none;padding:0;margin:0}
    .site-footer li{margin:7px 0;font-size:13px}
    .site-footer a:hover{color:var(--lime)}
    .copyright{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #523d61;margin-top:38px;padding-top:20px;font-size:12px;color:#aa9ab3}
    @media(max-width:1024px){
      .hero-inner,.mobile-panel{gap:35px}
      .tip-grid{grid-template-columns:repeat(2,1fr)}
      .footer-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:768px){
      .container{width:min(100% - 28px,620px)}
      .navbar{height:68px}
      .menu-toggle{display:block}
      .nav-list{display:none;position:absolute;left:14px;right:14px;top:74px;background:var(--cream);padding:10px;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}
      .nav-list.open{display:flex}
      .nav-link{padding:13px 14px}
      .hero-inner,.mobile-panel,.recommend-grid{grid-template-columns:1fr}
      .page-hero{padding:60px 0}
      .entry-visual{min-height:220px}
      .section{padding:62px 0}
      .section-head{display:block}
      .section-head p{margin-top:12px}
      .entry-card{grid-template-columns:62px 1fr;gap:14px;padding:15px}
      .entry-card .btn{grid-column:2;justify-self:start}
      .entry-icon{height:62px}
      .entry-date{display:none}
      .recommend-main{min-height:210px}
      .cta-band{display:block;padding:30px 24px}
      .cta-band .btn{margin-top:22px}
      .copyright{display:block}
      .copyright span{display:block;margin-top:6px}
    }
    @media(max-width:520px){
      h1{font-size:40px}
      .hero-actions .btn{width:100%}
      .filter-panel{display:block}
      .filter-tags{margin-top:13px}
      .tip-grid,.footer-grid{grid-template-columns:1fr}
      .device-stack{transform:scale(.9);transform-origin:left center}
      .brand{font-size:15px}
      .brand small{display:none}
    }

/* roulang page: category3 */
:root{
      --berry:#281a32;--plum:#3b2450;--lime:#cbea68;--coral:#f47b61;
      --cream:#fff9ef;--mist:#f3edf7;--lavender:#e8e1ec;--ink:#302638;
      --muted:#786d7e;--line:#ded4e3;--white:#fff;--radius:16px;
      --shadow:0 14px 38px rgba(40,26,50,.09);--ease:all .25s ease
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.7;font-size:15px}
    a{color:inherit;text-decoration:none;transition:var(--ease)}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer;border:0}
    h1,h2,h3,p{margin-top:0}
    h1,h2,h3{line-height:1.25;color:var(--berry);font-weight:900}
    h1{font-size:clamp(36px,5vw,64px);letter-spacing:-.04em}
    h2{font-size:clamp(28px,3.4vw,42px)}
    h3{font-size:19px}
    .container{width:min(1180px,calc(100% - 40px));margin:auto}
    .section{padding:88px 0}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:34px}
    .section-head p{max-width:570px;color:var(--muted);margin-bottom:0}
    .eyebrow{color:var(--coral);font-size:12px;font-weight:800;letter-spacing:.13em}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 21px;border-radius:10px;font-weight:800;border:1px solid transparent;transition:var(--ease)}
    .btn:hover{transform:translateY(-2px);box-shadow:0 9px 20px rgba(40,26,50,.15)}
    .btn:focus,.nav-link:focus,.faq-q:focus,input:focus,select:focus,textarea:focus{outline:3px solid rgba(203,234,104,.65);outline-offset:3px}
    .btn-primary{background:var(--lime);color:var(--berry)}
    .btn-secondary{border-color:var(--berry);color:var(--berry);background:transparent}
    .btn-light{background:var(--cream);color:var(--berry)}
    .tag{display:inline-flex;padding:4px 10px;border-radius:30px;background:var(--mist);font-size:12px;color:var(--plum);font-weight:700}
    .tag.hot{background:#ffe1d8;color:#a34a38}
    .site-header{background:var(--cream);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
    .navbar{height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
    .brand{display:flex;align-items:center;gap:12px;font-weight:900;color:var(--berry);font-size:17px;white-space:nowrap}
    .brand-mark{width:38px;height:38px;border-radius:12px;background:var(--lime);display:grid;place-items:center;color:var(--berry);font-size:20px;font-weight:900}
    .brand small{display:block;color:var(--coral);font-size:10px;letter-spacing:.08em}
    .nav-list{display:flex;align-items:center;gap:5px;list-style:none;margin:0;padding:0}
    .nav-link{display:block;padding:10px 14px;border-radius:9px;font-weight:700;color:#5d5065}
    .nav-link:hover,.nav-link.active{background:var(--lavender);color:var(--berry)}
    .nav-link.active{box-shadow:inset 0 -3px var(--lime)}
    .menu-toggle{display:none;background:var(--plum);color:var(--white);width:42px;height:40px;border-radius:9px;font-size:20px}
    .page-hero{padding:72px 0 64px;background:var(--mist)}
    .page-hero-grid{display:grid;grid-template-columns:1fr .9fr;gap:70px;align-items:center}
    .page-hero p{font-size:18px;color:#5e5167;max-width:620px;margin:22px 0 28px}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
    .hero-stamp{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
    .device-stage{min-height:350px;position:relative;display:flex;align-items:center;justify-content:center}
    .device-glow{position:absolute;width:280px;height:280px;border-radius:50%;background:var(--lime);opacity:.55;filter:blur(2px)}
    .phone{position:relative;width:215px;height:390px;border:9px solid var(--berry);border-radius:32px;background:#fdf8ee;box-shadow:18px 22px 0 rgba(59,36,80,.12);overflow:hidden;transform:rotate(5deg)}
    .phone-top{height:28px;background:var(--berry);width:90px;margin:auto;border-radius:0 0 14px 14px}
    .phone-screen{padding:23px 16px}
    .screen-label{font-size:11px;color:var(--coral);font-weight:800}
    .screen-title{font-size:23px;font-weight:900;color:var(--berry);margin:10px 0 17px}
    .screen-block{height:94px;border-radius:13px;background:linear-gradient(135deg,var(--plum),#806092);margin-bottom:13px;position:relative}
    .screen-block:after{content:"试玩入口";position:absolute;left:13px;bottom:12px;color:var(--lime);font-weight:800}
    .screen-row{display:flex;gap:8px}.screen-row i{height:50px;flex:1;background:var(--lavender);border-radius:10px;display:block}
    .float-note{position:absolute;right:0;bottom:35px;background:var(--white);padding:16px 18px;border-radius:14px;box-shadow:var(--shadow);font-weight:800;color:var(--berry)}
    .float-note b{display:block;color:var(--coral);font-size:24px}
    .download-panel{background:var(--berry);color:var(--white);border-radius:22px;padding:36px;display:grid;grid-template-columns:1fr .8fr;gap:32px;align-items:center}
    .download-panel h2,.download-panel h3{color:var(--white)}
    .download-panel p{color:#d6cbdc}
    .qr{width:142px;height:142px;background:repeating-linear-gradient(45deg,var(--cream) 0 6px,var(--berry) 6px 11px);border:12px solid var(--cream);border-radius:8px;margin:auto}
    .download-meta{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0 23px}
    .download-meta .tag{background:#503864;color:var(--cream)}
    .path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .path-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:var(--ease)}
    .path-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
    .path-number{width:38px;height:38px;border-radius:12px;background:var(--lime);display:grid;place-items:center;font-size:18px;font-weight:900;color:var(--berry);margin-bottom:20px}
    .path-card p,.feature p,.compat-card p{color:var(--muted);font-size:14px}
    .interface-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center}
    .screen-rail{display:flex;gap:14px;align-items:end}
    .mini-phone{width:145px;height:260px;border:7px solid var(--berry);border-radius:22px;background:var(--white);padding:25px 10px 10px}
    .mini-phone:nth-child(2){height:310px;background:var(--plum);transform:translateY(-22px)}
    .mini-phone:nth-child(3){background:#f1dfb9}
    .mini-line{height:10px;border-radius:8px;background:var(--lavender);margin-bottom:10px}
    .mini-phone:nth-child(2) .mini-line{background:#6c527a}
    .mini-cover{height:70px;border-radius:10px;background:linear-gradient(135deg,var(--coral),var(--lime));margin-bottom:14px}
    .feature-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:25px}
    .feature{padding:20px;background:var(--mist);border-radius:14px}
    .feature strong{display:block;color:var(--berry);margin-bottom:5px}
    .version-strip{background:var(--plum);color:var(--white);border-radius:18px;padding:28px 32px;display:grid;grid-template-columns:130px 1fr auto;gap:24px;align-items:center}
    .version-strip h3{color:var(--white);margin:4px 0}.version-strip p{color:#d8cede;margin:0;font-size:14px}
    .version-code{font-size:30px;font-weight:900;color:var(--lime)}
    .compat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
    .compat-card{padding:22px;background:var(--white);border:1px solid var(--line);border-radius:14px}
    .compat-card strong{display:block;color:var(--berry);margin-bottom:6px}
    .faq-list{border-top:1px solid var(--line);max-width:850px}
    .faq{border-bottom:1px solid var(--line)}
    .faq-q{width:100%;background:transparent;text-align:left;padding:21px 4px;font-weight:800;color:var(--berry);display:flex;justify-content:space-between}
    .faq-q span{color:var(--coral);font-size:20px}
    .faq-a{display:none;padding:0 38px 20px 4px;color:var(--muted)}
    .faq.open .faq-a{display:block}
    .feedback{background:var(--lavender);border-radius:20px;padding:34px}
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
    .field label{display:block;font-weight:800;color:var(--berry);margin-bottom:7px}
    .field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:var(--cream);border-radius:10px;padding:12px 14px;color:var(--ink)}
    .field textarea{min-height:120px;resize:vertical}
    .field.full{grid-column:1/-1}
    .form-note{font-size:12px;color:var(--muted);margin:14px 0 0}
    .site-footer{background:var(--berry);color:#d8cede;padding:56px 0 24px}
    .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:35px}
    .footer-brand{font-size:20px;font-weight:900;color:var(--white);margin-bottom:12px}
    .site-footer p{font-size:13px}.site-footer h3{font-size:15px;color:var(--lime);margin-bottom:14px}
    .site-footer ul{list-style:none;padding:0;margin:0}.site-footer li{margin:8px 0;font-size:13px}
    .site-footer a:hover{color:var(--lime)}
    .copyright{border-top:1px solid #503b5d;margin-top:38px;padding-top:20px;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:#ad9eb5}
    @media(max-width:1024px){.page-hero-grid,.interface-wrap{gap:35px}.container{width:min(100% - 32px,900px)}}
    @media(max-width:768px){
      .navbar{height:68px}.menu-toggle{display:block}.nav-list{display:none;position:absolute;top:68px;left:16px;right:16px;background:var(--cream);padding:10px;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.nav-list.show{display:flex}.nav-link{padding:13px 15px}
      .page-hero-grid,.download-panel,.interface-wrap{grid-template-columns:1fr}.page-hero{padding:54px 0}.device-stage{min-height:360px}.section{padding:64px 0}.section-head{display:block}.section-head p{margin-top:12px}
      .path-grid,.compat-grid{grid-template-columns:1fr 1fr}.version-strip{grid-template-columns:1fr;text-align:center}.version-code{font-size:25px}.qr{margin:0 auto}
      .footer-grid{grid-template-columns:1fr 1fr}.copyright{display:block}.copyright span{display:block;margin-top:8px}
    }
    @media(max-width:520px){
      h1{font-size:37px}.container{width:calc(100% - 28px)}.hero-actions .btn{width:100%}.float-note{right:-4px}.path-grid,.compat-grid,.feature-list,.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.download-panel{padding:25px 20px}.screen-rail{justify-content:center;gap:7px}.mini-phone{width:98px;height:215px}.mini-phone:nth-child(2){height:255px}.mini-cover{height:53px}.footer-grid{grid-template-columns:1fr}.brand{font-size:14px}
    }

/* roulang page: category2 */
:root{
      --berry:#281a32;--plum:#3b2450;--lime:#cbea68;--coral:#f47b61;
      --cream:#fff9ef;--mist:#f3edf7;--lavender:#e8e1ec;--ink:#302638;
      --muted:#786d7e;--line:#ded4e3;--white:#fff;--radius:16px;
      --shadow:0 14px 38px rgba(40,26,50,.09);--ease:all .25s ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.7;font-size:15px}
    a{color:inherit;text-decoration:none;transition:var(--ease)}
    a:hover{color:var(--coral)}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer;border:0}
    h1,h2,h3,p{margin-top:0}
    h1,h2,h3{line-height:1.25;color:var(--berry);font-weight:900}
    .container{width:min(1180px,calc(100% - 40px));margin:auto}
    .section{padding:88px 0}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:34px}
    .section-head h2{font-size:34px;margin:8px 0 0}
    .eyebrow{color:var(--coral);font-size:12px;font-weight:800;letter-spacing:.13em}
    .muted{color:var(--muted)}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 21px;border-radius:10px;font-weight:800;border:1px solid transparent;transition:var(--ease)}
    .btn:hover{transform:translateY(-2px);box-shadow:0 9px 20px rgba(40,26,50,.15)}
    .btn:focus,.nav-link:focus,.faq-q:focus,input:focus,select:focus,textarea:focus{outline:3px solid rgba(203,234,104,.65);outline-offset:3px}
    .btn-primary{background:var(--lime);color:var(--berry)}
    .btn-secondary{border-color:var(--berry);color:var(--berry);background:transparent}
    .tag{display:inline-flex;padding:4px 10px;border-radius:30px;background:var(--mist);font-size:12px;color:var(--plum);font-weight:700}
    .tag.hot{background:#ffe1d8;color:#a34a38}
    .site-header{background:var(--cream);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
    .navbar{height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
    .brand{display:flex;align-items:center;gap:12px;font-weight:900;color:var(--berry);font-size:17px;white-space:nowrap}
    .brand-mark{width:38px;height:38px;border-radius:12px;background:var(--lime);display:grid;place-items:center;color:var(--berry);font-size:20px;font-weight:900}
    .brand small{display:block;color:var(--coral);font-size:10px;letter-spacing:.08em}
    .nav-list{display:flex;align-items:center;gap:5px;list-style:none;margin:0;padding:0}
    .nav-link{display:block;padding:10px 14px;border-radius:9px;font-weight:700;color:#5d5065}
    .nav-link:hover,.nav-link.active{background:var(--lavender);color:var(--berry)}
    .nav-link.active{box-shadow:inset 0 -3px var(--lime)}
    .menu-toggle{display:none;background:var(--plum);color:var(--white);width:42px;height:40px;border-radius:9px;font-size:20px}
    .news-hero{background:var(--plum);color:var(--white);padding:78px 0 82px;position:relative;overflow:hidden}
    .news-hero:after{content:"";position:absolute;width:330px;height:330px;border:1px solid rgba(203,234,104,.35);border-radius:50%;right:7%;top:-150px}
    .hero-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;position:relative;z-index:1}
    .news-hero h1{font-size:clamp(38px,5vw,64px);color:var(--white);margin:12px 0 20px;max-width:680px}
    .news-hero p{font-size:18px;color:#e1d5e7;max-width:630px;margin-bottom:28px}
    .hero-meta{display:flex;gap:10px;flex-wrap:wrap}
    .hero-meta .tag{background:rgba(255,255,255,.1);color:var(--lime)}
    .bulletin{background:var(--cream);color:var(--ink);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);transform:rotate(2deg)}
    .bulletin-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:20px}
    .bulletin h3{font-size:22px;margin:0}
    .bulletin-row{display:flex;gap:15px;padding:14px 0;border-bottom:1px dashed var(--line)}
    .bulletin-row:last-child{border:0}
    .bulletin-date{font-size:12px;color:var(--coral);font-weight:800;min-width:74px}
    .bulletin-row strong{font-size:14px}
    .filter-bar{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;box-shadow:0 8px 25px rgba(40,26,50,.05)}
    .filter-bar strong{margin-right:8px;color:var(--berry)}
    .filter-bar a{padding:8px 14px;border-radius:30px;background:var(--mist);font-size:13px;font-weight:700}
    .filter-bar a:hover,.filter-bar a.current{background:var(--lime);color:var(--berry)}
    .article-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px}
    .news-card,.topic-card,.update-card,.subscribe-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);transition:var(--ease)}
    .news-card:hover,.topic-card:hover,.update-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
    .news-card{padding:28px}
    .news-card.large{background:var(--berry);color:var(--white);min-height:300px;display:flex;flex-direction:column;justify-content:end}
    .news-card.large h3{color:var(--white);font-size:30px;margin:14px 0}
    .news-card.large p{color:#d9cde0}
    .news-card h3{font-size:20px;margin:13px 0 8px}
    .card-date{font-size:12px;color:var(--muted)}
    .side-news{display:grid;gap:14px}
    .side-news .news-card{padding:21px}
    .side-news h3{font-size:17px}
    .topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .topic-card{padding:25px}
    .topic-icon{width:45px;height:45px;border-radius:13px;background:var(--lavender);display:grid;place-items:center;font-size:21px;margin-bottom:18px}
    .topic-card h3{font-size:20px;margin-bottom:9px}
    .topic-card p{font-size:14px;color:var(--muted);margin-bottom:18px}
    .update-section{background:var(--mist)}
    .timeline{border-left:2px solid var(--coral);margin-left:10px;padding-left:30px;display:grid;gap:20px}
    .update-card{padding:22px 25px;position:relative}
    .update-card:before{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--lime);border:3px solid var(--coral);left:-38px;top:28px}
    .update-card .version{color:var(--coral);font-weight:900;font-size:13px}
    .update-card h3{font-size:19px;margin:6px 0}
    .subscribe-wrap{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:stretch}
    .subscribe-card{padding:30px}
    .subscribe-card.dark{background:var(--berry);color:var(--white)}
    .subscribe-card.dark h2{color:var(--white);font-size:31px}
    .subscribe-card.dark p{color:#dacde2}
    .form-row{display:flex;gap:10px;margin-top:20px}
    .form-control{width:100%;background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:13px 15px;color:var(--ink)}
    .form-control:focus{border-color:var(--coral);box-shadow:none}
    .privacy{font-size:12px;color:var(--muted);margin:13px 0 0}
    .faq-list{border-top:1px solid var(--line)}
    .faq{border-bottom:1px solid var(--line)}
    .faq-q{width:100%;background:transparent;text-align:left;padding:21px 4px;font-weight:800;color:var(--berry);display:flex;justify-content:space-between;align-items:center}
    .faq-q span{color:var(--coral);font-size:20px}
    .faq-a{display:none;padding:0 38px 20px 4px;color:var(--muted)}
    .faq.open .faq-a{display:block}
    .faq.open .faq-q span{transform:rotate(45deg);display:inline-block}
    .cta{background:var(--lime);padding:48px 0}
    .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}
    .cta h2{font-size:32px;margin:0 0 8px}
    .site-footer{background:var(--berry);color:#d9cce1;padding:58px 0 24px}
    .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:35px}
    .footer-brand{font-size:21px;font-weight:900;color:var(--white);margin-bottom:12px}
    .site-footer p{font-size:14px}
    .site-footer h3{font-size:15px;color:var(--lime);margin-bottom:14px}
    .site-footer ul{list-style:none;margin:0;padding:0}
    .site-footer li{margin:8px 0;font-size:14px}
    .site-footer a:hover{color:var(--lime)}
    .copyright{border-top:1px solid #4b3858;margin-top:38px;padding-top:18px;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:#b8a9c1}
    @media(max-width:900px){
      .hero-layout,.article-grid,.subscribe-wrap{grid-template-columns:1fr;gap:30px}
      .topic-grid{grid-template-columns:repeat(2,1fr)}
      .footer-grid{grid-template-columns:repeat(2,1fr)}
      .bulletin{transform:none}
    }
    @media(max-width:700px){
      .container{width:min(100% - 28px,1180px)}
      .navbar{height:68px}
      .menu-toggle{display:block}
      .nav-list{display:none;position:absolute;top:68px;left:14px;right:14px;padding:10px;background:var(--cream);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}
      .nav-list.show{display:flex}
      .nav-link{padding:13px 15px}
      .brand{font-size:14px}
      .brand-mark{width:34px;height:34px}
      .section{padding:62px 0}
      .section-head{display:block;margin-bottom:24px}
      .section-head h2{font-size:29px}
      .news-hero{padding:58px 0 60px}
      .news-hero h1{font-size:40px}
      .news-hero p{font-size:16px}
      .topic-grid{grid-template-columns:1fr}
      .form-row{display:grid}
      .cta-inner{display:block}
      .cta .btn{margin-top:20px}
      .footer-grid{grid-template-columns:1fr 1fr;gap:25px}
      .copyright{display:block;line-height:2}
    }
    @media(max-width:430px){
      .footer-grid{grid-template-columns:1fr}
      .news-card.large h3{font-size:25px}
      .filter-bar{padding:16px}
    }