/* roulang page: index */
:root{
            --ink:#171523;
            --ink-soft:#28243a;
            --muted:#716c7d;
            --paper:#f7f6f2;
            --white:#fff;
            --lime:#c9f45b;
            --lime-dark:#9fc738;
            --coral:#f47c62;
            --violet:#514064;
            --line:#e7e3e9;
            --dark-line:rgba(255,255,255,.13);
            --radius:18px;
            --shadow:0 18px 45px rgba(28,20,45,.10);
            --container:1200px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;background:var(--paper);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%}
        button,input{font:inherit}
        button{cursor:pointer}
        .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
        .notice{height:38px;background:#242033;color:#ddd8e3;font-size:13px}
        .notice .container{height:100%;display:flex;align-items:center;justify-content:space-between}
        .notice-left{display:flex;align-items:center;gap:9px}
        .notice-dot{width:7px;height:7px;background:var(--lime);border-radius:50%;box-shadow:0 0 0 4px rgba(201,244,91,.12)}
        .notice a{color:var(--lime);font-weight:700}
        .site-header{background:rgba(247,246,242,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}
        .header-inner{height:78px;display:flex;align-items:center;gap:34px}
        .brand{display:flex;align-items:center;gap:11px;min-width:235px;font-weight:800;letter-spacing:-.4px}
        .brand-mark{width:35px;height:35px;border-radius:11px;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-size:15px;position:relative}
        .brand-mark:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--coral);right:-3px;top:-3px}
        .brand span{font-size:15px;line-height:1.25}
        .main-nav{display:flex;align-items:center;gap:5px;flex:1}
        .main-nav a{font-size:14px;color:#686274;padding:9px 13px;border-radius:10px;position:relative;transition:.2s}
        .main-nav a:hover,.main-nav a.active{color:var(--ink);background:#eeece7}
        .main-nav a.active:after{content:"";position:absolute;bottom:1px;left:14px;right:14px;height:2px;background:var(--coral);border-radius:3px}
        .header-action,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:11px;padding:12px 19px;font-weight:800;font-size:14px;transition:.2s}
        .header-action,.button-primary{background:var(--lime);color:#202313;box-shadow:0 8px 18px rgba(159,199,56,.18)}
        .header-action:hover,.button-primary:hover{background:#d8ff78;transform:translateY(-2px)}
        .button-secondary{border:1px solid rgba(255,255,255,.28);color:#fff;background:transparent}
        .button-secondary:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px)}
        .menu-toggle{display:none;background:none;border:0;font-size:25px;color:var(--ink)}
        .hero{background:var(--ink);color:#fff;overflow:hidden;position:relative}
        .hero:before{content:"";position:absolute;width:500px;height:500px;border:1px solid rgba(201,244,91,.18);border-radius:50%;right:-130px;top:-170px}
        .hero:after{content:"";position:absolute;width:360px;height:360px;border:1px solid rgba(244,124,98,.18);border-radius:50%;right:70px;bottom:-260px}
        .hero-inner{min-height:616px;display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:70px;position:relative;z-index:1;padding:68px 0}
        .eyebrow{color:var(--lime);font-size:13px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;margin:0 0 17px}
        h1,h2,h3,p{margin-top:0}
        h1{font-size:clamp(38px,5vw,62px);line-height:1.14;letter-spacing:-2px;margin-bottom:22px;max-width:680px}
        .hero-copy>p{font-size:17px;line-height:1.9;color:#c6c1cf;max-width:590px;margin-bottom:30px}
        .hero-buttons{display:flex;gap:12px;flex-wrap:wrap}
        .hero-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:33px}
        .hero-tags span,.tag{display:inline-flex;align-items:center;padding:5px 10px;border-radius:20px;font-size:12px;font-weight:700}
        .hero-tags span{border:1px solid var(--dark-line);color:#d5d0dc}
        .hero-tags span:first-child{color:var(--lime);border-color:rgba(201,244,91,.35)}
        .screen-stage{height:400px;position:relative;display:flex;align-items:center;justify-content:center}
        .stage-grid{position:absolute;width:340px;height:290px;background-image:linear-gradient(rgba(201,244,91,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(201,244,91,.08) 1px,transparent 1px);background-size:28px 28px;transform:perspective(500px) rotateX(48deg) rotateZ(-12deg);opacity:.6}
        .dashboard{position:relative;width:390px;background:#302a42;border:1px solid #625574;border-radius:20px;padding:18px;box-shadow:25px 30px 50px rgba(0,0,0,.35);transform:rotate(3deg)}
        .dash-top{display:flex;justify-content:space-between;align-items:center;color:#fff;font-size:12px;margin-bottom:16px}
        .dash-title{font-weight:800;font-size:17px}.dash-menu{color:var(--lime)}
        .dash-feature{height:130px;border-radius:13px;background:linear-gradient(135deg,#6a496e,#eb8b65);padding:19px;position:relative;overflow:hidden}
        .dash-feature:after{content:"PG";position:absolute;right:16px;bottom:-16px;color:rgba(255,255,255,.15);font-size:92px;font-weight:900}
        .dash-feature small{color:#ffe5d8}.dash-feature strong{display:block;font-size:22px;margin-top:4px}
        .dash-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
        .dash-card{height:104px;background:#40374f;border-radius:12px;padding:11px;display:flex;flex-direction:column;justify-content:space-between}
        .dash-card i{width:28px;height:28px;border-radius:8px;background:var(--lime);display:block}
        .dash-card:nth-child(2) i{background:#f8b35c}.dash-card:nth-child(3) i{background:#96d8cf}
        .dash-card b{font-size:12px;color:#f4f1f6}.dash-card small{font-size:10px;color:#aaa1b5}
        .section{padding:96px 0}.section-dark{background:#211c30;color:#fff}
        .section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:35px}
        .section-kicker{color:var(--coral);font-size:12px;font-weight:800;letter-spacing:1.5px;margin-bottom:8px}
        h2{font-size:clamp(28px,3.5vw,42px);line-height:1.2;letter-spacing:-1px;margin-bottom:8px}
        .section-head p{color:var(--muted);margin-bottom:0;max-width:500px}
        .section-dark .section-head p{color:#aaa3b3}
        .text-link{font-weight:800;color:var(--violet);white-space:nowrap}.section-dark .text-link{color:var(--lime)}
        .feature-layout{display:grid;grid-template-columns:1.38fr .82fr;gap:18px}
        .game-main,.game-small{border-radius:var(--radius);overflow:hidden;position:relative;min-height:300px}
        .game-main{background:linear-gradient(120deg,#39304e,#b66d61);padding:28px;color:#fff}
        .game-main:after{content:"试玩入口";position:absolute;right:25px;bottom:-15px;font-size:88px;font-weight:900;color:rgba(255,255,255,.1)}
        .game-main h3{font-size:29px;margin:10px 0 8px;position:relative;z-index:1}.game-main p{color:#eee2e2;max-width:330px;position:relative;z-index:1}
        .game-main .button{position:absolute;left:28px;bottom:27px;z-index:2}
        .game-side{display:grid;gap:18px}
        .game-small{min-height:141px;background:#fff;border:1px solid var(--line);padding:21px;display:flex;flex-direction:column;justify-content:space-between;transition:.25s}
        .game-small:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#ccc4d3}
        .game-small:nth-child(2){background:#e4efb9}
        .game-small h3{font-size:20px;margin:0}.game-small p{font-size:13px;color:var(--muted);margin:0;max-width:270px}
        .tag{background:#eeeaf0;color:#665d71}.game-main .tag{background:rgba(255,255,255,.17);color:#fff}
        .dark-tag{background:rgba(201,244,91,.15);color:var(--lime)}
        .app-section{background:#dfeeb4}
        .app-layout{display:grid;grid-template-columns:1fr .8fr;align-items:center;gap:65px}
        .app-layout h2{max-width:520px}.app-layout>div>p{color:#585b45;max-width:560px}
        .app-actions{display:flex;gap:12px;align-items:center;margin:27px 0 25px;flex-wrap:wrap}
        .app-note{font-size:13px;color:#686b52}.qr{width:75px;height:75px;background:repeating-linear-gradient(45deg,#25251d 0 4px,#fff 4px 8px);border:7px solid #fff;border-radius:5px}
        .device-wrap{height:350px;display:flex;justify-content:center;align-items:center;position:relative}
        .device{width:190px;height:350px;border:8px solid #272333;border-radius:31px;background:#30283e;padding:14px 10px;box-shadow:20px 25px 35px rgba(54,57,27,.2);transform:rotate(8deg)}
        .device-notch{height:10px;width:60px;background:#1b1825;border-radius:8px;margin:-7px auto 15px}
        .device-screen{height:290px;border-radius:16px;background:#f3f0e9;padding:12px;color:var(--ink)}
        .device-screen strong{font-size:13px}.device-banner{height:74px;background:#ec916d;border-radius:9px;margin:12px 0}
        .device-lines{height:9px;background:#d8d2dc;border-radius:5px;margin:9px 0}.device-lines.short{width:60%}
        .info-section{background:#fff}
        .info-list{border-top:1px solid var(--line)}
        .info-item{display:grid;grid-template-columns:120px 120px 1fr 90px;gap:22px;align-items:center;padding:22px 8px;border-bottom:1px solid var(--line);transition:.2s}
        .info-item:hover{background:#faf9f6;padding-left:15px}.info-date{font-size:13px;color:var(--muted)}.info-item h3{font-size:17px;margin:0 0 3px}.info-item p{font-size:13px;color:var(--muted);margin:0}.info-arrow{text-align:right;color:var(--violet);font-size:20px}
        .empty-state{padding:38px;text-align:center;border:1px dashed #cdc6d2;color:var(--muted)}
        .guide{background:#f0edf4}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid #ddd6e4;border-radius:var(--radius);overflow:hidden;background:#fff}
        .step{padding:27px 24px;position:relative;border-right:1px solid var(--line)}.step:last-child{border:0}.step-number{color:var(--coral);font-size:13px;font-weight:900}.step h3{font-size:18px;margin:12px 0 5px}.step p{font-size:13px;color:var(--muted);margin:0}
        .faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.faq-list{border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line);padding:20px 0}summary{cursor:pointer;font-weight:800;list-style:none;padding-right:25px;position:relative}summary::-webkit-details-marker{display:none}summary:after{content:"+";position:absolute;right:3px;color:var(--coral);font-size:22px;top:-4px}details[open] summary:after{content:"−"}details p{color:var(--muted);font-size:14px;padding:12px 28px 0 0;margin:0}
        .cta{background:var(--ink);color:#fff;padding:62px 0}.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:30px}.cta h2{margin:0}.cta p{color:#bbb4c7;margin:7px 0 0}
        footer{background:#171421;color:#b8b1c0;padding:58px 0 24px}.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;padding-bottom:45px}.footer-brand{color:#fff;font-weight:800;font-size:17px}.footer-grid h3{color:#fff;font-size:14px;margin:4px 0 15px}.footer-grid a{display:block;font-size:13px;margin:8px 0;transition:.2s}.footer-grid a:hover{color:var(--lime)}.footer-desc{font-size:13px;max-width:260px;margin-top:13px}.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;display:flex;justify-content:space-between;gap:20px;font-size:12px}.footer-bottom a{margin-left:18px}
        :focus-visible{outline:3px solid var(--coral);outline-offset:3px}
        @media(max-width:1024px){.header-inner{gap:15px}.brand{min-width:205px}.main-nav a{padding:8px 8px;font-size:13px}.hero-inner{gap:30px}.app-layout{gap:30px}.faq-layout{gap:40px}}
        @media(max-width:768px){.container{width:min(100% - 34px,var(--container))}.notice{height:auto;padding:7px 0}.notice .container{font-size:12px}.notice a{display:none}.header-inner{height:68px}.brand{min-width:0;flex:1}.brand span{font-size:14px}.menu-toggle{display:block}.main-nav{display:none;position:absolute;left:0;right:0;top:68px;background:var(--paper);padding:12px 17px 18px;border-bottom:1px solid var(--line);box-shadow:0 15px 25px rgba(20,15,30,.1);flex-direction:column;align-items:stretch}.main-nav.open{display:flex}.main-nav a{padding:12px 13px}.header-action{padding:10px 13px;font-size:12px}.hero-inner{grid-template-columns:1fr;padding:60px 0 55px;min-height:auto}.hero-copy>p{font-size:15px}.screen-stage{height:330px}.dashboard{width:min(390px,94%)}.section{padding:65px 0}.section-head{display:block;margin-bottom:25px}.section-head p{margin-top:12px}.text-link{display:inline-block;margin-top:13px}.feature-layout{grid-template-columns:1fr}.game-main{min-height:290px}.app-layout,.faq-layout{grid-template-columns:1fr}.device-wrap{height:320px;order:2}.steps{grid-template-columns:1fr 1fr}.step:nth-child(2){border-right:0}.step:nth-child(-n+2){border-bottom:1px solid var(--line)}.info-item{grid-template-columns:85px 1fr 25px;gap:10px}.info-item .tag{display:none}.info-item h3{font-size:15px}.info-item p{font-size:12px}.cta-inner{display:block}.cta .button{margin-top:22px}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-grid>div:first-child{grid-column:1/-1}.footer-bottom{display:block}.footer-bottom nav{margin-top:9px}.footer-bottom a{margin:0 16px 0 0}}
        @media(max-width:520px){h1{font-size:35px;letter-spacing:-1px}.hero-buttons .button{width:100%}.hero-tags{gap:7px}.screen-stage{height:285px}.dashboard{transform:rotate(2deg) scale(.88)}.game-main h3{font-size:25px}.app-actions{align-items:flex-start}.app-actions .button{width:calc(100% - 90px)}.steps{grid-template-columns:1fr}.step{border-right:0!important;border-bottom:1px solid var(--line)!important}.step:last-child{border-bottom:0!important}.info-item{grid-template-columns:1fr 25px}.info-date{font-size:12px}.info-item h3{margin-top:4px}.info-item p{display:none}.footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}.footer-bottom a{display:inline-block;margin-top:6px}}

/* roulang page: article */
:root{
            --ink:#171523;
            --ink-soft:#28243a;
            --muted:#716c7d;
            --paper:#f7f6f2;
            --white:#fff;
            --lime:#c9f45b;
            --lime-dark:#9fc738;
            --coral:#f47c62;
            --violet:#514064;
            --line:#e7e3e9;
            --dark-line:rgba(255,255,255,.13);
            --radius:18px;
            --shadow:0 18px 45px rgba(28,20,45,.10);
            --container:1200px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;background:var(--paper);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
        a{color:inherit;text-decoration:none}
        a:focus-visible,button:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
        img{display:block;max-width:100%}
        button,input{font:inherit}
        button{cursor:pointer}
        .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
        .notice{height:36px;background:var(--ink);color:#c9c3d0;font-size:12px}
        .notice .container{height:100%;display:flex;align-items:center;justify-content:space-between}
        .notice a{color:var(--lime);font-weight:700}
        .notice-close{border:0;background:none;color:#aaa3b3;font-size:18px;line-height:1}
        .site-header{background:rgba(247,246,242,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}
        .header-inner{height:78px;display:flex;align-items:center;gap:30px}
        .brand{display:flex;align-items:center;gap:11px;min-width:235px;font-weight:800;letter-spacing:-.4px}
        .brand-mark{width:35px;height:35px;border-radius:11px;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-size:15px;position:relative}
        .brand-mark:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--coral);right:-3px;top:-3px}
        .brand span{font-size:15px;line-height:1.25}
        .main-nav{display:flex;align-items:center;gap:5px;flex:1}
        .main-nav a{font-size:14px;color:#686274;padding:9px 13px;border-radius:10px;position:relative;transition:.2s}
        .main-nav a:hover,.main-nav a.active{color:var(--ink);background:#eeece7}
        .main-nav a.active:after{content:"";position:absolute;bottom:1px;left:14px;right:14px;height:2px;background:var(--coral);border-radius:3px}
        .header-action,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:11px;padding:12px 19px;font-weight:800;font-size:14px;transition:.2s}
        .header-action,.button-primary{background:var(--lime);color:#202313;box-shadow:0 8px 18px rgba(159,199,56,.18)}
        .header-action:hover,.button-primary:hover{background:#d8ff78;transform:translateY(-2px)}
        .button-secondary{border:1px solid rgba(255,255,255,.28);color:#fff;background:transparent}
        .button-secondary:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px)}
        .menu-toggle{display:none;background:none;border:0;font-size:25px;color:var(--ink)}
        .article-hero{background:var(--ink);color:#fff;padding:76px 0 82px;position:relative;overflow:hidden}
        .article-hero:after{content:"PG";position:absolute;right:8%;bottom:-65px;font-size:220px;font-weight:900;line-height:1;color:rgba(201,244,91,.06)}
        .breadcrumbs{position:relative;z-index:1;color:#aaa3b3;font-size:13px;margin-bottom:27px}
        .breadcrumbs a{color:var(--lime)}
        .article-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--lime);font-size:13px;font-weight:800;letter-spacing:1.4px;margin-bottom:14px}
        .article-kicker:before{content:"";width:24px;height:2px;background:var(--coral)}
        .article-hero h1{position:relative;z-index:1;max-width:860px;margin:0 0 22px;font-size:clamp(32px,5vw,58px);line-height:1.2;letter-spacing:-1.5px}
        .article-meta{position:relative;z-index:1;color:#c6c1cf;font-size:14px;display:flex;gap:20px;flex-wrap:wrap}
        .reading-layout{display:grid;grid-template-columns:minmax(0,820px) 300px;gap:58px;align-items:start;padding:76px 0 96px}
        .article-body{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(26px,5vw,58px);box-shadow:var(--shadow);font-size:17px;line-height:1.95}
        .article-body h2{font-size:30px;line-height:1.35;margin:38px 0 16px;color:var(--ink)}
        .article-body h3{font-size:22px;line-height:1.45;margin:30px 0 12px}
        .article-body p{margin:0 0 22px}
        .article-body ul,.article-body ol{padding-left:1.5em;margin:0 0 25px}
        .article-body li{margin:8px 0}
        .article-body blockquote{margin:28px 0;padding:20px 24px;border-left:4px solid var(--lime-dark);background:#f1f5df;color:#4c5137;border-radius:0 12px 12px 0}
        .article-body img{border-radius:14px;margin:28px auto}
        .article-body table{width:100%;border-collapse:collapse;margin:25px 0;font-size:15px}
        .article-body th,.article-body td{border:1px solid var(--line);padding:11px 14px;text-align:left}
        .article-body th{background:#f1efe9}
        .empty-state{text-align:center;padding:58px 20px;color:var(--muted)}
        .empty-state strong{display:block;color:var(--ink);font-size:23px;margin-bottom:10px}
        .sidebar{position:sticky;top:106px;display:grid;gap:18px}
        .side-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
        .side-card h2{font-size:18px;margin:0 0 17px}
        .toc-list{margin:0;padding:0;list-style:none}
        .toc-list li{border-bottom:1px solid var(--line);padding:10px 0;font-size:14px;color:var(--muted)}
        .toc-list li:last-child{border:0}
        .side-app{background:var(--ink);color:#fff}
        .side-app p{color:#c6c1cf;font-size:14px;margin:0 0 17px}
        .side-label,.tag{display:inline-flex;align-items:center;border-radius:20px;padding:5px 10px;font-size:12px;font-weight:800}
        .side-label{background:rgba(201,244,91,.14);color:var(--lime)}
        .after-article{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;margin-top:25px;padding-top:24px;border-top:1px solid var(--line)}
        .text-link{font-weight:800;color:var(--violet)}
        .app-section{background:#dfeeb4;padding:78px 0}
        .app-grid{display:grid;grid-template-columns:1fr 360px;gap:55px;align-items:center}
        .section-kicker{color:var(--coral);font-size:12px;font-weight:800;letter-spacing:1.5px;margin-bottom:8px}
        .app-section h2{font-size:36px;line-height:1.3;margin:0 0 15px}
        .app-section p{color:#555c43;max-width:600px}
        .app-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
        .qr-panel{background:#fff;border-radius:var(--radius);padding:24px;display:flex;align-items:center;gap:18px;box-shadow:0 14px 30px rgba(51,65,26,.12)}
        .qr{width:108px;height:108px;border:8px solid #fff;outline:1px solid #d7ddc2;background:repeating-linear-gradient(45deg,#171523 0 5px,#fff 5px 10px),repeating-linear-gradient(-45deg,transparent 0 7px,#171523 7px 10px);background-blend-mode:multiply}
        .qr-panel strong{display:block;font-size:16px;margin-bottom:6px}
        .qr-panel small{color:var(--muted);line-height:1.6}
        .section{padding:86px 0}
        .section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:30px}
        .section-head h2{font-size:32px;margin:0;line-height:1.3}
        .section-head p{color:var(--muted);margin:0;max-width:510px}
        .faq-list{max-width:900px;border-top:1px solid var(--line)}
        .faq-item{border-bottom:1px solid var(--line)}
        .faq-item summary{list-style:none;cursor:pointer;padding:20px 4px;font-size:17px;font-weight:800;display:flex;justify-content:space-between;gap:20px}
        .faq-item summary::-webkit-details-marker{display:none}
        .faq-item summary:after{content:"＋";color:var(--coral);font-size:22px}
        .faq-item[open] summary:after{content:"−"}
        .faq-answer{padding:0 42px 22px 4px;color:var(--muted);font-size:15px}
        .cta{background:var(--violet);color:#fff;padding:60px 0}
        .cta-inner{display:flex;justify-content:space-between;align-items:center;gap:30px}
        .cta h2{font-size:32px;margin:0 0 8px}
        .cta p{color:#d0c9d8;margin:0}
        footer{background:var(--ink);color:#fff;padding:58px 0 22px}
        .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;padding-bottom:45px}
        .footer-brand{font-weight:800;font-size:18px;margin-bottom:10px}
        .footer-desc{color:#aaa3b3;max-width:260px;font-size:14px}
        footer h3{font-size:14px;color:var(--lime);margin:0 0 15px}
        footer a{display:block;color:#bbb4c4;font-size:14px;margin:8px 0;transition:.2s}
        footer a:hover{color:var(--lime)}
        .footer-bottom{border-top:1px solid var(--dark-line);padding-top:19px;display:flex;justify-content:space-between;gap:20px;color:#8f8899;font-size:12px}
        .footer-bottom nav{display:flex;gap:18px}
        .footer-bottom nav a{display:inline-block;margin:0}
        @media(max-width:1050px){
            .header-inner{gap:14px}.brand{min-width:205px}.main-nav a{padding:8px 7px;font-size:13px}
            .reading-layout{grid-template-columns:minmax(0,1fr) 260px;gap:28px}
        }
        @media(max-width:800px){
            .container{width:min(var(--container),calc(100% - 32px))}
            .main-nav{display:none}.header-action{margin-left:auto}.menu-toggle{display:block;order:3}
            .header-inner{height:70px}.brand span{font-size:14px}
            .reading-layout{display:block;padding:54px 0 68px}.sidebar{position:static;margin-top:25px;grid-template-columns:1fr 1fr}
            .app-grid{grid-template-columns:1fr;gap:30px}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}
            .cta-inner{align-items:flex-start;flex-direction:column}
        }
        @media(max-width:560px){
            .notice{height:auto;min-height:36px;padding:7px 0}.notice .container{align-items:flex-start}
            .notice-close{display:none}.header-action{padding:10px 12px;font-size:12px}.menu-toggle{font-size:23px}
            .article-hero{padding:48px 0 55px}.article-hero h1{font-size:34px}.article-meta{gap:10px;display:block}.article-meta span{display:block;margin:4px 0}
            .article-body{padding:24px;font-size:16px}.article-body h2{font-size:25px}
            .sidebar{grid-template-columns:1fr}.app-section{padding:58px 0}.app-section h2,.cta h2{font-size:28px}
            .qr-panel{align-items:flex-start}.qr{width:88px;height:88px}
            .section{padding:60px 0}.section-head{display:block}.section-head p{margin-top:12px}
            .footer-grid{grid-template-columns:1fr 1fr;gap:25px}.footer-grid>div:first-child{grid-column:1/-1}
            .footer-bottom{display:block}.footer-bottom nav{margin-top:12px}
        }

/* roulang page: category1 */
:root{
        --ink:#171523;
        --ink-soft:#28243a;
        --muted:#716c7d;
        --paper:#f7f6f2;
        --white:#fff;
        --lime:#c9f45b;
        --lime-dark:#9fc738;
        --coral:#f47c62;
        --violet:#514064;
        --line:#e7e3e9;
        --dark-line:rgba(255,255,255,.13);
        --radius:18px;
        --shadow:0 18px 45px rgba(28,20,45,.10);
        --container:1200px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--paper);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
    a{color:inherit;text-decoration:none}
    a:focus-visible,button:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
    img{display:block;max-width:100%}
    button,input{font:inherit}
    button{cursor:pointer}
    .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
    .notice{height:36px;background:var(--ink);color:#d4cfda;font-size:12px}
    .notice .container{height:100%;display:flex;align-items:center;justify-content:space-between}
    .notice strong{color:var(--lime);margin-right:8px}
    .notice a{color:var(--lime);font-weight:700}
    .site-header{background:rgba(247,246,242,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}
    .header-inner{height:78px;display:flex;align-items:center;gap:28px}
    .brand{display:flex;align-items:center;gap:11px;min-width:235px;font-weight:800;letter-spacing:-.4px}
    .brand-mark{width:35px;height:35px;border-radius:11px;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-size:15px;position:relative}
    .brand-mark:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--coral);right:-3px;top:-3px}
    .brand span{font-size:15px;line-height:1.25}
    .main-nav{display:flex;align-items:center;gap:3px;flex:1}
    .main-nav a{font-size:14px;color:#686274;padding:9px 12px;border-radius:10px;position:relative;transition:.2s;white-space:nowrap}
    .main-nav a:hover,.main-nav a.active{color:var(--ink);background:#eeece7}
    .main-nav a.active:after{content:"";position:absolute;bottom:1px;left:13px;right:13px;height:2px;background:var(--coral);border-radius:3px}
    .header-action,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:11px;padding:12px 19px;font-weight:800;font-size:14px;transition:.2s}
    .header-action,.button-primary{background:var(--lime);color:#202313;box-shadow:0 8px 18px rgba(159,199,56,.18)}
    .header-action:hover,.button-primary:hover{background:#d8ff78;transform:translateY(-2px)}
    .button-secondary{border:1px solid rgba(255,255,255,.28);color:#fff;background:transparent}
    .button-secondary:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px)}
    .menu-toggle{display:none;background:none;border:0;font-size:25px;color:var(--ink)}
    .page-hero{background:var(--ink);color:#fff;padding:78px 0 86px;position:relative;overflow:hidden}
    .page-hero:before{content:"ENTRY";position:absolute;right:-24px;bottom:-55px;font-size:180px;font-weight:900;letter-spacing:-8px;color:rgba(201,244,91,.06)}
    .page-hero:after{content:"";position:absolute;width:430px;height:430px;border:1px solid rgba(201,244,91,.18);border-radius:50%;right:9%;top:-260px}
    .hero-content{position:relative;z-index:1;max-width:780px}
    .breadcrumb{display:flex;gap:9px;align-items:center;color:#aaa4b2;font-size:13px;margin-bottom:23px}
    .breadcrumb a:hover{color:var(--lime)}
    .breadcrumb b{color:var(--coral);font-weight:500}
    .eyebrow{color:var(--lime);font-size:13px;font-weight:800;letter-spacing:1.8px;margin:0 0 14px}
    h1,h2,h3,p{margin-top:0}
    h1{font-size:clamp(36px,5vw,60px);line-height:1.2;letter-spacing:-2px;margin-bottom:20px;font-weight:800}
    .hero-content>p{max-width:700px;color:#c8c3ce;font-size:17px;line-height:1.9;margin-bottom:28px}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
    .hero-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
    .hero-meta span,.tag{display:inline-flex;align-items:center;padding:5px 11px;border-radius:20px;font-size:12px;font-weight:700}
    .hero-meta span{border:1px solid var(--dark-line);color:#d5d0dc}
    .hero-meta span:first-child{color:var(--lime);border-color:rgba(201,244,91,.35)}
    .section{padding:86px 0}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:32px}
    .section-kicker{color:var(--coral);font-size:12px;font-weight:800;letter-spacing:1.5px;margin-bottom:7px}
    h2{font-size:clamp(28px,3vw,39px);line-height:1.25;letter-spacing:-1px;margin-bottom:8px;font-weight:800}
    .section-head p{color:var(--muted);margin-bottom:0;max-width:520px}
    .text-link{font-weight:800;color:var(--violet);white-space:nowrap}
    .text-link:hover{color:var(--coral)}
    .filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:28px}
    .filter-bar span{font-size:13px;color:var(--muted);margin-right:5px}
    .filter-bar button{border:1px solid var(--line);background:var(--white);color:var(--muted);border-radius:22px;padding:7px 15px;font-size:13px;transition:.2s}
    .filter-bar button:hover,.filter-bar button.active{background:var(--ink);border-color:var(--ink);color:var(--lime)}
    .content-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:26px;align-items:start}
    .entry-list{display:grid;gap:14px}
    .entry-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:25px 27px;display:grid;grid-template-columns:78px 1fr auto;gap:20px;align-items:center;transition:.22s}
    .entry-card:hover{transform:translateY(-3px);border-color:#cbd98e;box-shadow:var(--shadow)}
    .entry-index{width:58px;height:58px;background:#eeece7;color:var(--violet);border-radius:15px;display:grid;place-items:center;font-weight:900;font-size:21px}
    .entry-card:nth-child(2) .entry-index{background:#fbe4de;color:#b6503d}
    .entry-card:nth-child(3) .entry-index{background:#e5f1c1;color:#597215}
    .entry-card h3{font-size:20px;margin-bottom:5px}
    .entry-card p{color:var(--muted);font-size:14px;margin-bottom:9px;line-height:1.7}
    .tag{background:#eeece7;color:#665d71;margin-right:6px}
    .tag.lime{background:#eaf4c9;color:#627d18}
    .entry-link{font-weight:800;color:var(--violet);font-size:14px;white-space:nowrap}
    .entry-link:hover{color:var(--coral)}
    .side-stack{display:grid;gap:16px}
    .side-card{background:var(--ink);color:#fff;border-radius:var(--radius);padding:25px}
    .side-card.light{background:#ebe9e3;color:var(--ink)}
    .side-card h3{font-size:20px;margin-bottom:10px}
    .side-card p{font-size:14px;color:#aaa3b3;line-height:1.75}
    .side-card.light p{color:var(--muted)}
    .side-nav{display:grid;gap:2px;margin-top:16px}
    .side-nav a{padding:9px 11px;border-radius:9px;font-size:14px;color:#cbc5d1;transition:.2s}
    .side-nav a:hover,.side-nav a.active{background:rgba(201,244,91,.12);color:var(--lime)}
    .mini-button{display:inline-flex;margin-top:7px;padding:10px 14px;border-radius:10px;background:var(--lime);color:#202313;font-size:13px;font-weight:800}
    .guide-section{background:#eeeae4}
    .guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .guide-step{background:var(--white);border-radius:var(--radius);padding:25px;border:1px solid var(--line);position:relative}
    .guide-step strong{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--lime);color:#253014;margin-bottom:22px}
    .guide-step h3{font-size:19px;margin-bottom:7px}
    .guide-step p{font-size:14px;color:var(--muted);margin-bottom:0}
    .app-cta{background:#dfeeb4;padding:64px 0;overflow:hidden}
    .app-layout{display:grid;grid-template-columns:1fr .8fr;gap:45px;align-items:center}
    .app-layout p{color:#58613b;max-width:590px}
    .app-pills{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}
    .app-pill{background:rgba(255,255,255,.65);border:1px solid rgba(83,103,28,.16);border-radius:12px;padding:12px 16px;font-size:13px;font-weight:800;color:#4b592b}
    .app-visual{min-height:180px;background:var(--ink);border-radius:22px;padding:28px;color:#fff;position:relative}
    .app-visual:after{content:"PG APP";position:absolute;right:22px;bottom:-16px;font-weight:900;font-size:70px;color:rgba(201,244,91,.13)}
    .app-visual small{color:var(--lime)}
    .app-visual h3{font-size:26px;margin:8px 0}
    .app-visual p{color:#c4bdcb;font-size:14px;max-width:310px}
    .faq-section{padding-bottom:96px}
    .faq-list{max-width:850px;margin:0 auto}
    .faq-item{border-bottom:1px solid var(--line)}
    .faq-question{width:100%;border:0;background:transparent;text-align:left;padding:21px 5px;font-weight:800;color:var(--ink);display:flex;justify-content:space-between;gap:20px}
    .faq-question span:last-child{color:var(--coral);font-size:22px;line-height:1}
    .faq-answer{color:var(--muted);font-size:14px;line-height:1.85;padding:0 38px 20px 5px}
    footer{background:var(--ink);color:#fff;padding:57px 0 22px}
    .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;padding-bottom:45px}
    .footer-brand{font-weight:800;font-size:18px;margin-bottom:9px}
    .footer-desc{color:#aaa3b3;font-size:14px;max-width:260px}
    footer h3{font-size:14px;color:var(--lime);margin-bottom:13px}
    footer a{display:block;color:#bdb6c5;font-size:13px;margin:7px 0;transition:.2s}
    footer a:hover{color:var(--lime)}
    .footer-bottom{border-top:1px solid var(--dark-line);padding-top:20px;display:flex;justify-content:space-between;gap:20px;color:#928b9c;font-size:12px}
    .footer-bottom nav{display:flex;gap:18px}
    .footer-bottom nav a{display:inline;margin:0}
    @media(max-width:1050px){
        .header-inner{gap:14px}.brand{min-width:205px}.main-nav a{padding:8px 8px;font-size:13px}
        .content-layout{grid-template-columns:1fr 270px}
    }
    @media(max-width:800px){
        .container{width:min(var(--container),calc(100% - 34px))}
        .menu-toggle{display:block;margin-left:auto}
        .main-nav{display:none;position:absolute;left:17px;right:17px;top:72px;background:var(--white);border:1px solid var(--line);border-radius:15px;padding:10px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}
        .main-nav.open{display:flex}.main-nav a{padding:12px 14px}
        .header-action{padding:10px 13px;font-size:12px}
        .brand{min-width:0}.brand span{font-size:13px}
        .page-hero{padding:58px 0 64px}
        .content-layout,.app-layout{grid-template-columns:1fr}
        .side-stack{grid-template-columns:repeat(2,1fr)}
        .guide-grid{grid-template-columns:1fr}
        .section{padding:65px 0}
        .app-visual{min-height:155px}
        .footer-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:520px){
        .notice{height:auto;min-height:38px;padding:6px 0}.notice .container{gap:10px}
        .notice a{display:none}
        .header-inner{height:70px}.header-action{display:none}
        h1{font-size:35px;letter-spacing:-1px}
        .hero-content>p{font-size:15px}
        .hero-actions .button{width:100%}
        .section-head{display:block}.section-head .text-link{display:inline-block;margin-top:13px}
        .entry-card{grid-template-columns:1fr;gap:12px;padding:21px}
        .entry-index{width:46px;height:46px;font-size:17px}
        .entry-link{display:inline-block;margin-top:5px}
        .side-stack{grid-template-columns:1fr}
        .app-cta{padding:50px 0}
        .footer-grid{grid-template-columns:1fr;gap:23px}
        .footer-bottom{display:block}.footer-bottom nav{margin-top:12px}
        .footer-bottom nav a{display:inline-block}
    }

/* roulang page: category2 */
:root{
            --ink:#171523;
            --ink-soft:#28243a;
            --muted:#716c7d;
            --paper:#f7f6f2;
            --white:#fff;
            --lime:#c9f45b;
            --lime-dark:#9fc738;
            --coral:#f47c62;
            --violet:#514064;
            --line:#e7e3e9;
            --dark-line:rgba(255,255,255,.13);
            --radius:18px;
            --shadow:0 18px 45px rgba(28,20,45,.10);
            --container:1200px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;background:var(--paper);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%}
        button,input{font:inherit}
        button{cursor:pointer}
        .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
        .notice{height:36px;background:var(--ink);color:#d8d2df;font-size:12px}
        .notice .container{height:100%;display:flex;align-items:center;justify-content:space-between}
        .notice strong{color:var(--lime);margin-right:8px}
        .notice a{color:var(--lime);font-weight:700}
        .site-header{background:rgba(247,246,242,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}
        .header-inner{height:78px;display:flex;align-items:center;gap:34px}
        .brand{display:flex;align-items:center;gap:11px;min-width:235px;font-weight:800;letter-spacing:-.4px}
        .brand-mark{width:35px;height:35px;border-radius:11px;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-size:15px;position:relative}
        .brand-mark:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--coral);right:-3px;top:-3px}
        .brand span{font-size:15px;line-height:1.25}
        .main-nav{display:flex;align-items:center;gap:5px;flex:1}
        .main-nav a{font-size:14px;color:#686274;padding:9px 13px;border-radius:10px;position:relative;transition:.2s}
        .main-nav a:hover,.main-nav a.active{color:var(--ink);background:#eeece7}
        .main-nav a.active:after{content:"";position:absolute;bottom:1px;left:14px;right:14px;height:2px;background:var(--coral);border-radius:3px}
        .header-action,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:11px;padding:12px 19px;font-weight:800;font-size:14px;transition:.2s}
        .header-action,.button-primary{background:var(--lime);color:#202313;box-shadow:0 8px 18px rgba(159,199,56,.18)}
        .header-action:hover,.button-primary:hover{background:#d8ff78;transform:translateY(-2px)}
        .button-secondary{border:1px solid rgba(255,255,255,.28);color:#fff;background:transparent}
        .button-secondary:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px)}
        .menu-toggle{display:none;background:none;border:0;font-size:25px;color:var(--ink)}
        .page-hero{background:var(--ink);color:#fff;position:relative;overflow:hidden;padding:82px 0 88px}
        .page-hero:before{content:"";position:absolute;width:520px;height:520px;border:1px solid rgba(201,244,91,.18);border-radius:50%;right:-150px;top:-270px}
        .page-hero:after{content:"";position:absolute;width:260px;height:260px;border:1px solid rgba(244,124,98,.2);border-radius:50%;left:-120px;bottom:-150px}
        .hero-layout{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center}
        .breadcrumb{font-size:13px;color:#aaa3b3;margin-bottom:22px}
        .breadcrumb a{color:var(--lime)}
        .eyebrow,.section-kicker{color:var(--coral);font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}
        .page-hero .eyebrow{color:var(--lime);margin-bottom:12px}
        h1,h2,h3,p{margin-top:0}
        h1{font-size:clamp(36px,5vw,58px);line-height:1.18;letter-spacing:-1.8px;margin-bottom:20px;font-weight:800}
        h2{font-size:clamp(28px,3vw,38px);line-height:1.25;letter-spacing:-1px;margin-bottom:12px}
        h3{font-size:21px;line-height:1.4}
        .hero-layout p{color:#c6c1cf;max-width:650px;font-size:17px}
        .hero-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
        .hero-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
        .hero-tags span,.tag{display:inline-flex;align-items:center;padding:5px 10px;border-radius:20px;font-size:12px;font-weight:700}
        .hero-tags span{border:1px solid var(--dark-line);color:#d5d0dc}
        .hero-tags span:first-child{color:var(--lime);border-color:rgba(201,244,91,.35)}
        .news-board{background:#30283d;border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:24px;box-shadow:0 20px 45px rgba(0,0,0,.18)}
        .board-top{display:flex;justify-content:space-between;align-items:center;color:#ddd6e4;font-size:13px;border-bottom:1px solid var(--dark-line);padding-bottom:15px}
        .board-light{width:9px;height:9px;background:var(--lime);border-radius:50%;display:inline-block;margin-right:7px}
        .board-line{display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;padding:17px 0;border-bottom:1px solid var(--dark-line)}
        .board-line:last-child{border:0}
        .board-no{color:var(--coral);font-size:13px;font-weight:800}
        .board-line strong{font-size:14px;color:#fff;display:block}
        .board-line small{color:#aaa1b5;font-size:12px}
        .board-arrow{color:var(--lime);font-size:20px}
        .section{padding:92px 0}
        .section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:34px}
        .section-head p{color:var(--muted);max-width:530px;margin-bottom:0}
        .text-link{font-weight:800;color:var(--violet);white-space:nowrap}
        .topic-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:18px}
        .topic-main,.topic-side{border-radius:var(--radius);padding:30px;min-height:260px}
        .topic-main{background:#e4efbb;position:relative;overflow:hidden}
        .topic-main:after{content:"资讯";position:absolute;right:24px;bottom:-25px;font-size:130px;font-weight:900;color:rgba(81,64,100,.09)}
        .topic-main p,.topic-side p{color:var(--muted);max-width:450px}
        .topic-main h3,.topic-side h3{position:relative;z-index:1}
        .topic-side{background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow)}
        .topic-side .tag{background:#f3edf0;color:var(--violet)}
        .news-section{background:#fff}
        .news-layout{display:grid;grid-template-columns:240px 1fr;gap:48px}
        .filter-box{border-right:1px solid var(--line);padding-right:28px}
        .filter-box h3{font-size:17px;margin-bottom:18px}
        .filter-box a{display:block;padding:11px 14px;border-radius:10px;color:var(--muted);font-size:14px;margin-bottom:5px}
        .filter-box a:hover,.filter-box a.active{background:var(--ink);color:var(--lime)}
        .news-list{border-top:1px solid var(--line)}
        .news-item{display:grid;grid-template-columns:110px 1fr 80px;gap:22px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line);transition:.2s}
        .news-item:hover{padding-left:8px;background:#fcfbf8}
        .news-date{font-size:13px;color:var(--muted)}
        .news-item h3{font-size:19px;margin-bottom:5px}
        .news-item p{color:var(--muted);font-size:14px;margin:0}
        .news-item .tag{background:#f0f5df;color:#657729;margin-bottom:7px}
        .news-arrow{color:var(--violet);font-size:22px;text-align:right}
        .app-section{background:#dfeeb4}
        .app-layout{display:grid;grid-template-columns:1fr 360px;gap:60px;align-items:center}
        .app-layout p{color:#596239;max-width:590px}
        .app-points{display:flex;gap:28px;flex-wrap:wrap;margin:25px 0}
        .app-point b{display:block;font-size:22px;color:var(--ink)}
        .app-point span{font-size:13px;color:#687245}
        .phone-stack{height:270px;position:relative}
        .phone{position:absolute;width:158px;height:268px;border:8px solid var(--ink);border-radius:26px;background:#514064;color:#fff;padding:19px 13px;box-shadow:var(--shadow)}
        .phone:first-child{right:125px;top:0;transform:rotate(-8deg)}
        .phone:last-child{right:5px;top:28px;transform:rotate(9deg);background:#30283d}
        .phone-bar{height:8px;width:42px;background:#777084;border-radius:8px;margin:0 auto 20px}
        .phone h4{font-size:15px;margin-bottom:15px}
        .phone-card{height:62px;border-radius:10px;background:linear-gradient(135deg,#caef67,#f47c62);margin-bottom:10px}
        .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:36px}
        .step{display:flex;gap:14px;align-items:flex-start}
        .step-num{width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-weight:800}
        .step strong{display:block;font-size:15px}
        .step span{display:block;color:#687245;font-size:13px}
        .faq-list{max-width:880px;margin:0 auto}
        .faq-item{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:12px;padding:0 22px}
        .faq-item summary{cursor:pointer;padding:19px 0;font-weight:800;list-style:none;display:flex;justify-content:space-between}
        .faq-item summary:after{content:"+";color:var(--coral);font-size:22px}
        .faq-item[open] summary:after{content:"−"}
        .faq-item p{color:var(--muted);font-size:15px;padding:0 0 20px;margin:0}
        .cta{background:var(--ink-soft);color:#fff;padding:58px 0}
        .cta-inner{display:flex;justify-content:space-between;align-items:center;gap:30px}
        .cta h2{margin-bottom:8px}
        .cta p{color:#bdb5c7;margin:0}
        footer{background:var(--ink);color:#fff;padding:62px 0 25px}
        .footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px;padding-bottom:48px}
        .footer-brand{font-size:18px;font-weight:800;margin-bottom:10px}
        .footer-desc{color:#aaa3b3;font-size:14px;max-width:280px}
        footer h3{font-size:14px;color:var(--lime);margin-bottom:15px}
        footer a{display:block;color:#bdb5c7;font-size:13px;margin:8px 0}
        footer a:hover{color:var(--lime)}
        .footer-bottom{border-top:1px solid var(--dark-line);padding-top:20px;display:flex;justify-content:space-between;gap:20px;color:#92899e;font-size:12px}
        .footer-bottom nav{display:flex;gap:18px}
        :focus-visible{outline:3px solid var(--coral);outline-offset:3px}
        @media(max-width:1024px){
            .header-inner{gap:16px}.brand{min-width:205px}.main-nav a{padding:8px 8px;font-size:13px}
            .hero-layout{gap:35px}.news-layout{grid-template-columns:190px 1fr;gap:28px}
        }
        @media(max-width:767px){
            .container{width:min(100% - 32px,var(--container))}
            .notice{height:auto;min-height:38px;padding:7px 0}
            .notice .container{gap:12px}.notice a{white-space:nowrap}
            .header-inner{height:68px}.brand{min-width:0;flex:1}.brand span{font-size:13px}.brand-mark{width:32px;height:32px}
            .main-nav{display:none}.menu-toggle{display:block}.header-action{padding:10px 12px;font-size:12px}
            .page-hero{padding:58px 0 64px}.hero-layout{display:block}.page-hero h1{font-size:38px}
            .news-board{margin-top:42px;padding:18px}.board-line{grid-template-columns:30px 1fr auto;padding:14px 0}
            .section{padding:62px 0}.section-head,.cta-inner{display:block}.section-head .text-link{display:inline-block;margin-top:15px}
            .topic-grid,.app-layout{grid-template-columns:1fr}.topic-main,.topic-side{min-height:220px}.phone-stack{margin:10px auto 0;max-width:330px}
            .news-layout{display:block}.filter-box{border:0;border-bottom:1px solid var(--line);padding:0 0 15px;margin-bottom:18px;display:flex;gap:6px;overflow:auto}
            .filter-box h3{display:none}.filter-box a{white-space:nowrap;margin:0}
            .news-item{grid-template-columns:76px 1fr 20px;gap:10px;padding:18px 0}.news-item h3{font-size:16px}.news-item p{font-size:13px}
            .steps{grid-template-columns:1fr;gap:18px}.cta .button{margin-top:25px;width:100%}
            .footer-grid{grid-template-columns:1fr 1fr;gap:30px}.footer-grid>div:first-child{grid-column:1/-1}
            .footer-bottom{display:block}.footer-bottom nav{margin-top:12px}
        }
        @media(max-width:520px){h2{font-size:29px}.hero-buttons .button{width:100%}.topic-main,.topic-side{padding:24px}.footer-grid{grid-template-columns:1fr}}

/* roulang page: category3 */
:root{
            --ink:#171523;
            --ink-soft:#28243a;
            --muted:#716c7d;
            --paper:#f7f6f2;
            --white:#fff;
            --lime:#c9f45b;
            --lime-dark:#9fc738;
            --coral:#f47c62;
            --violet:#514064;
            --line:#e7e3e9;
            --dark-line:rgba(255,255,255,.13);
            --radius:18px;
            --shadow:0 18px 45px rgba(28,20,45,.10);
            --container:1200px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;background:var(--paper);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%}
        button,input{font:inherit}
        button{cursor:pointer}
        .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
        .notice{height:36px;background:var(--ink);color:#d7d2dc;font-size:12px}
        .notice .container{height:100%;display:flex;align-items:center;justify-content:space-between}
        .notice a{color:var(--lime);font-weight:700}
        .notice-mark{display:inline-flex;align-items:center;gap:8px}
        .notice-mark i{width:7px;height:7px;background:var(--coral);border-radius:50%;display:inline-block}
        .site-header{background:rgba(247,246,242,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}
        .header-inner{height:78px;display:flex;align-items:center;gap:34px}
        .brand{display:flex;align-items:center;gap:11px;min-width:235px;font-weight:800;letter-spacing:-.4px}
        .brand-mark{width:35px;height:35px;border-radius:11px;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-size:15px;position:relative}
        .brand-mark:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--coral);right:-3px;top:-3px}
        .brand span{font-size:15px;line-height:1.25}
        .main-nav{display:flex;align-items:center;gap:5px;flex:1}
        .main-nav a{font-size:14px;color:#686274;padding:9px 13px;border-radius:10px;position:relative;transition:.2s}
        .main-nav a:hover,.main-nav a.active{color:var(--ink);background:#eeece7}
        .main-nav a.active:after{content:"";position:absolute;bottom:1px;left:14px;right:14px;height:2px;background:var(--coral);border-radius:3px}
        .header-action,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:11px;padding:12px 19px;font-weight:800;font-size:14px;transition:.2s}
        .header-action,.button-primary{background:var(--lime);color:#202313;box-shadow:0 8px 18px rgba(159,199,56,.18)}
        .header-action:hover,.button-primary:hover{background:#d8ff78;transform:translateY(-2px)}
        .button-secondary{border:1px solid rgba(255,255,255,.28);color:#fff;background:transparent}
        .button-secondary:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px)}
        .menu-toggle{display:none;background:none;border:0;font-size:25px;color:var(--ink)}
        .page-hero{background:var(--ink);color:#fff;padding:78px 0 82px;position:relative;overflow:hidden}
        .page-hero:before{content:"";position:absolute;width:470px;height:470px;border:1px solid rgba(201,244,91,.17);border-radius:50%;right:-140px;top:-230px}
        .page-hero:after{content:"";position:absolute;width:300px;height:300px;border:1px solid rgba(244,124,98,.2);border-radius:50%;left:-170px;bottom:-210px}
        .breadcrumb{font-size:13px;color:#aaa3b3;margin-bottom:22px;position:relative;z-index:1}
        .breadcrumb a{color:var(--lime)}
        .hero-content{position:relative;z-index:1;max-width:780px}
        .eyebrow,.section-kicker{color:var(--coral);font-size:12px;font-weight:800;letter-spacing:1.6px;margin:0 0 12px}
        .eyebrow{color:var(--lime)}
        h1,h2,h3,p{margin-top:0}
        h1{font-size:clamp(34px,5vw,58px);line-height:1.18;letter-spacing:-1.8px;margin-bottom:20px;font-weight:800}
        .page-hero p{font-size:17px;color:#c6c1cf;max-width:700px;margin-bottom:28px}
        .hero-meta{display:flex;gap:10px;flex-wrap:wrap}
        .tag{display:inline-flex;align-items:center;padding:5px 11px;border-radius:20px;font-size:12px;font-weight:700;background:#eeeaf0;color:#665d71}
        .hero-meta .tag{background:rgba(201,244,91,.14);color:var(--lime);border:1px solid rgba(201,244,91,.25)}
        .section{padding:92px 0}
        .section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:34px}
        .section-head h2{font-size:34px;line-height:1.25;margin-bottom:7px;letter-spacing:-.8px}
        .section-head p{color:var(--muted);margin-bottom:0;max-width:540px}
        .text-link{font-weight:800;color:var(--violet);white-space:nowrap}
        .download-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:stretch}
        .download-panel{background:#dfeeb4;border-radius:var(--radius);padding:42px;position:relative;overflow:hidden}
        .download-panel:after{content:"APP";position:absolute;right:-12px;bottom:-38px;color:rgba(23,21,35,.07);font-weight:900;font-size:150px;line-height:1}
        .download-panel h2{font-size:35px;line-height:1.25;max-width:430px;position:relative;z-index:1}
        .download-panel p{color:#4d513b;max-width:500px;position:relative;z-index:1}
        .platforms{display:flex;gap:10px;flex-wrap:wrap;margin:25px 0;position:relative;z-index:1}
        .platform{background:rgba(255,255,255,.72);border:1px solid rgba(23,21,35,.12);border-radius:10px;padding:9px 13px;font-weight:700;font-size:13px}
        .download-panel .button{position:relative;z-index:1}
        .download-visual{background:var(--ink-soft);border-radius:var(--radius);min-height:370px;display:flex;align-items:center;justify-content:center;gap:34px;overflow:hidden}
        .phone{width:185px;height:330px;background:#f5f2e8;border:8px solid #40374f;border-radius:29px;padding:13px;box-shadow:0 20px 35px rgba(0,0,0,.25);transform:rotate(5deg)}
        .phone-top{height:10px;width:55px;background:#40374f;border-radius:10px;margin:0 auto 18px}
        .phone h3{font-size:14px;margin-bottom:12px}
        .phone-feature{height:90px;border-radius:12px;background:linear-gradient(135deg,#6a496e,#eb8b65);padding:12px;color:#fff;font-size:11px}
        .phone-feature strong{display:block;font-size:17px;margin-top:5px}
        .phone-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
        .phone-list span{height:56px;background:#e6e1d8;border-radius:9px;padding:8px;font-size:10px;color:#5a5365}
        .qr-wrap{text-align:center;color:#d9d3df}
        .qr{width:116px;height:116px;background-color:#fff;background-image:linear-gradient(45deg,#171523 25%,transparent 25%,transparent 75%,#171523 75%),linear-gradient(45deg,#171523 25%,transparent 25%,transparent 75%,#171523 75%);background-size:18px 18px;background-position:0 0,9px 9px;border:8px solid #fff;border-radius:8px;margin:0 auto 13px}
        .qr-wrap small{font-size:12px;color:#aaa3b3}
        .steps-section{background:#fff}
        .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
        .step{padding:30px 28px 10px 0;border-right:1px solid var(--line);margin-right:28px}
        .step:last-child{border-right:0;margin-right:0}
        .step-num{display:grid;place-items:center;width:34px;height:34px;background:var(--ink);color:var(--lime);border-radius:10px;font-weight:800;margin-bottom:18px}
        .step h3{font-size:21px;margin-bottom:7px}
        .step p{color:var(--muted);font-size:14px;margin-bottom:0}
        .check-section{background:#211c30;color:#fff}
        .check-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
        .check-card{border:1px solid var(--dark-line);border-radius:var(--radius);padding:28px;background:#28233a}
        .check-card h3{font-size:21px;margin-bottom:15px}
        .check-card p{color:#aaa3b3;font-size:14px}
        .check-card ul{list-style:none;padding:0;margin:0}
        .check-card li{padding:11px 0;border-top:1px solid var(--dark-line);color:#ddd7e2;font-size:14px}
        .check-card li:before{content:"✓";color:var(--lime);font-weight:800;margin-right:10px}
        .faq-list{max-width:850px;margin:0 auto}
        .faq-item{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
        .faq-item summary{padding:19px 22px;font-weight:800;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px}
        .faq-item summary::-webkit-details-marker{display:none}
        .faq-item summary:after{content:"＋";color:var(--coral);font-size:20px;line-height:1}
        .faq-item[open] summary:after{content:"−"}
        .faq-answer{padding:0 22px 20px;color:var(--muted);font-size:14px}
        .cta{background:var(--violet);color:#fff;padding:55px 0}
        .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:28px}
        .cta h2{font-size:30px;margin-bottom:8px}
        .cta p{color:#c6c0cf;margin-bottom:0}
        footer{background:var(--ink);color:#fff;padding:58px 0 24px}
        .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:35px;padding-bottom:48px}
        .footer-brand{font-weight:800;font-size:18px;margin-bottom:12px}
        .footer-desc{color:#aaa3b3;font-size:14px;max-width:250px}
        footer h3{font-size:14px;color:var(--lime);margin-bottom:15px}
        footer a{display:block;color:#bbb5c3;font-size:13px;margin:8px 0;transition:.2s}
        footer a:hover{color:var(--lime)}
        .footer-bottom{border-top:1px solid var(--dark-line);padding-top:20px;display:flex;justify-content:space-between;gap:20px;color:#918a9d;font-size:12px}
        .footer-bottom nav{display:flex;gap:18px}
        .footer-bottom nav a{display:inline;margin:0}
        :focus-visible{outline:3px solid var(--coral);outline-offset:3px}
        @media(max-width:1024px){
            .header-inner{gap:16px}.brand{min-width:205px}.main-nav a{padding:8px 7px;font-size:13px}
            .download-layout{grid-template-columns:1fr}.download-visual{min-height:330px}
        }
        @media(max-width:768px){
            .container{width:min(var(--container),calc(100% - 32px))}
            .notice{height:auto;min-height:36px;padding:7px 0}
            .notice .container{gap:10px}.notice a{white-space:nowrap}
            .header-inner{height:68px}.brand{min-width:0;flex:1}.brand span{font-size:13px}
            .main-nav{display:none;position:absolute;top:68px;left:0;right:0;background:var(--paper);padding:12px 16px 18px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);flex-direction:column;align-items:stretch}
            .main-nav.open{display:flex}.main-nav a{padding:12px 15px}
            .menu-toggle{display:block}.header-action{padding:10px 12px;font-size:12px}
            .page-hero{padding:54px 0 60px}h1{font-size:38px}.page-hero p{font-size:15px}
            .section{padding:64px 0}.section-head{display:block}.section-head h2{font-size:28px}.section-head p{margin-top:10px}
            .download-panel{padding:30px 24px}.download-panel h2{font-size:29px}
            .download-visual{padding:34px 20px;gap:18px}.phone{width:155px;height:286px}.qr{width:96px;height:96px;background-size:15px 15px}
            .steps,.check-grid{grid-template-columns:1fr}.step{border-right:0;border-bottom:1px solid var(--line);margin:0;padding:25px 0}.step:last-child{border-bottom:0}
            .cta-inner{display:block}.cta h2{font-size:26px}.cta .button{margin-top:20px;width:100%}
            .footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-grid>div:first-child{grid-column:1/-1}
            .footer-bottom{display:block}.footer-bottom nav{margin-top:10px}
        }
        @media(max-width:520px){
            .brand-mark{width:31px;height:31px;font-size:13px}.header-action{display:none}
            .page-hero h1{font-size:32px}.hero-meta{gap:7px}
            .download-visual{flex-direction:column}.phone{transform:rotate(3deg)}
            .footer-grid{grid-template-columns:1fr}
        }

/* roulang page: category4 */
:root{
            --ink:#171523;
            --ink-soft:#28243a;
            --muted:#716c7d;
            --paper:#f7f6f2;
            --white:#fff;
            --lime:#c9f45b;
            --lime-dark:#9fc738;
            --coral:#f47c62;
            --violet:#514064;
            --line:#e7e3e9;
            --dark-line:rgba(255,255,255,.13);
            --radius:18px;
            --shadow:0 18px 45px rgba(28,20,45,.10);
            --container:1200px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;background:var(--paper);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%}
        button,input{font:inherit}
        button{cursor:pointer}
        .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
        .notice{height:36px;background:var(--ink);color:#d5d0dc;font-size:12px}
        .notice .container{height:100%;display:flex;align-items:center;justify-content:space-between}
        .notice strong{color:var(--lime);margin-right:8px}
        .notice a{color:var(--lime);font-weight:700}
        .site-header{background:rgba(247,246,242,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}
        .header-inner{height:78px;display:flex;align-items:center;gap:34px}
        .brand{display:flex;align-items:center;gap:11px;min-width:235px;font-weight:800;letter-spacing:-.4px}
        .brand-mark{width:35px;height:35px;border-radius:11px;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-size:15px;position:relative}
        .brand-mark:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--coral);right:-3px;top:-3px}
        .brand span{font-size:15px;line-height:1.25}
        .main-nav{display:flex;align-items:center;gap:5px;flex:1}
        .main-nav a{font-size:14px;color:#686274;padding:9px 13px;border-radius:10px;position:relative;transition:.2s}
        .main-nav a:hover,.main-nav a.active{color:var(--ink);background:#eeece7}
        .main-nav a.active:after{content:"";position:absolute;bottom:1px;left:14px;right:14px;height:2px;background:var(--coral);border-radius:3px}
        .header-action,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:11px;padding:12px 19px;font-weight:800;font-size:14px;transition:.2s}
        .header-action,.button-primary{background:var(--lime);color:#202313;box-shadow:0 8px 18px rgba(159,199,56,.18)}
        .header-action:hover,.button-primary:hover{background:#d8ff78;transform:translateY(-2px)}
        .button-secondary{border:1px solid rgba(255,255,255,.28);color:#fff;background:transparent}
        .button-secondary:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px)}
        .menu-toggle{display:none;background:none;border:0;font-size:25px;color:var(--ink)}
        .page-hero{background:var(--ink);color:#fff;padding:74px 0 82px;position:relative;overflow:hidden}
        .page-hero:before{content:"";position:absolute;width:430px;height:430px;border:1px solid rgba(201,244,91,.18);border-radius:50%;right:-120px;top:-210px}
        .page-hero:after{content:"分类 / 玩法";position:absolute;right:7%;bottom:-22px;font-size:88px;font-weight:900;color:rgba(255,255,255,.045)}
        .breadcrumb{font-size:13px;color:#9f98aa;margin-bottom:23px;position:relative;z-index:1}
        .breadcrumb a{color:var(--lime)}
        .page-hero h1{font-size:clamp(36px,5vw,58px);line-height:1.2;letter-spacing:-1.8px;margin:0 0 20px;max-width:720px;position:relative;z-index:1}
        .page-hero p{color:#c6c1cf;max-width:690px;font-size:17px;margin:0;position:relative;z-index:1}
        .eyebrow,.section-kicker{color:var(--coral);font-size:12px;font-weight:800;letter-spacing:1.5px;margin-bottom:9px}
        .page-hero .eyebrow{color:var(--lime)}
        .section{padding:88px 0}
        .section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:32px}
        .section-head h2{font-size:34px;line-height:1.25;margin:0;letter-spacing:-.8px}
        .section-head p{color:var(--muted);margin:0;max-width:560px}
        .filter-bar{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:30px}
        .filter-bar button{border:1px solid var(--line);background:var(--white);border-radius:30px;color:var(--muted);padding:9px 17px;font-size:14px;transition:.2s}
        .filter-bar button:hover,.filter-bar button.active{background:var(--ink);color:var(--lime);border-color:var(--ink)}
        .guide-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr);gap:22px;align-items:start}
        .guide-list{display:grid;gap:14px}
        .guide-card{display:grid;grid-template-columns:104px 1fr auto;gap:20px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:19px;transition:.22s}
        .guide-card:hover{transform:translateY(-3px);border-color:#c7bdcf;box-shadow:var(--shadow)}
        .guide-icon{height:88px;border-radius:14px;background:#ece8ee;display:grid;place-items:center;font-size:30px;color:var(--violet);font-weight:900}
        .guide-card:nth-child(2) .guide-icon{background:#f9e3d5;color:#ba604a}
        .guide-card:nth-child(3) .guide-icon{background:#e4efc1;color:#607b20}
        .guide-card h3{font-size:20px;margin:7px 0 4px}
        .guide-card p{color:var(--muted);font-size:14px;margin:0}
        .tag{display:inline-flex;align-items:center;padding:4px 10px;border-radius:20px;background:#eeecef;color:#665d71;font-size:12px;font-weight:700}
        .guide-card .text-link{display:block;margin-top:9px;color:var(--violet);font-size:13px;font-weight:800}
        .side-panel{background:var(--ink-soft);border-radius:var(--radius);color:#fff;padding:28px;position:sticky;top:105px}
        .side-panel h3{font-size:22px;margin:0 0 10px}
        .side-panel p{font-size:14px;color:#bdb6c8;margin:0 0 21px}
        .side-nav{display:grid;gap:8px;margin-bottom:23px}
        .side-nav a{padding:11px 13px;border:1px solid var(--dark-line);border-radius:10px;color:#ddd8e3;font-size:14px}
        .side-nav a:hover,.side-nav a.current{border-color:var(--lime);color:var(--lime)}
        .side-note{font-size:12px;color:#9d96a8;border-top:1px solid var(--dark-line);padding-top:17px}
        .dark-section{background:#211c30;color:#fff}
        .dark-section .section-head p{color:#aaa3b3}
        .玩法-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
        .玩法-card{padding:27px;background:#30283f;border:1px solid var(--dark-line);border-radius:var(--radius);min-height:220px}
        .玩法-number{width:34px;height:34px;border-radius:10px;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-weight:900;margin-bottom:24px}
        .玩法-card h3{font-size:20px;margin:0 0 8px}
        .玩法-card p{color:#bdb6c8;font-size:14px;margin:0}
        .app-section{background:#dfeeb4;padding:70px 0}
        .app-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
        .app-wrap h2{font-size:36px;line-height:1.3;margin:0 0 13px}
        .app-wrap p{color:#505642;max-width:570px}
        .app-actions{display:flex;gap:11px;flex-wrap:wrap;margin:23px 0}
        .app-steps{display:flex;gap:18px;flex-wrap:wrap}
        .app-step{font-size:13px;color:#505642;font-weight:700}
        .app-step b{display:inline-grid;place-items:center;width:23px;height:23px;background:var(--ink);color:var(--lime);border-radius:50%;margin-right:6px}
        .device-panel{min-height:255px;border-radius:25px;background:var(--ink);padding:28px;position:relative;overflow:hidden;color:#fff}
        .device-panel:after{content:"PG";position:absolute;right:-10px;bottom:-43px;font-size:150px;font-weight:900;color:rgba(201,244,91,.1)}
        .device-top{display:flex;justify-content:space-between;color:#c7c0d1;font-size:13px}
        .device-screen{margin:25px 0 0 28px;background:#40374f;border-radius:15px;padding:18px;max-width:280px;position:relative;z-index:1}
        .device-screen strong{display:block;font-size:21px;color:var(--lime);margin-bottom:12px}
        .screen-lines{display:grid;gap:8px}
        .screen-lines i{display:block;height:10px;border-radius:8px;background:#6b6078}
        .screen-lines i:nth-child(2){width:72%;background:var(--coral)}
        .screen-lines i:nth-child(3){width:84%;background:#96d8cf}
        .faq-section{padding:88px 0}
        .faq-list{max-width:850px;margin:0 auto;border-top:1px solid var(--line)}
        .faq-item{border-bottom:1px solid var(--line)}
        .faq-question{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;background:none;border:0;padding:22px 0;color:var(--ink);font-weight:800;font-size:17px}
        .faq-question span{font-size:23px;color:var(--coral);transition:.2s}
        .faq-answer{display:none;color:var(--muted);font-size:15px;padding:0 42px 21px 0}
        .faq-item.open .faq-answer{display:block}
        .faq-item.open .faq-question span{transform:rotate(45deg)}
        .cta{background:var(--violet);color:#fff;padding:58px 0}
        .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}
        .cta h2{font-size:31px;margin:0 0 8px}
        .cta p{color:#d0c9d6;margin:0}
        footer{background:var(--ink);color:#fff;padding:55px 0 20px}
        .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px;padding-bottom:42px}
        .footer-brand{font-weight:800;font-size:18px;margin-bottom:10px}
        .footer-desc{color:#aaa3b3;font-size:14px;max-width:260px}
        footer h3{font-size:14px;margin:0 0 13px;color:var(--lime)}
        footer a{display:block;color:#b7b0c1;font-size:13px;margin:7px 0;transition:.2s}
        footer a:hover{color:var(--lime)}
        .footer-bottom{border-top:1px solid var(--dark-line);padding-top:18px;display:flex;justify-content:space-between;gap:15px;color:#8f879c;font-size:12px}
        .footer-bottom nav{display:flex;gap:18px}
        :focus-visible{outline:3px solid var(--coral);outline-offset:3px}
        @media(max-width:1024px){
            .header-inner{gap:15px}.brand{min-width:205px}.main-nav a{padding:8px 8px;font-size:13px}
            .guide-layout{grid-template-columns:1fr}.side-panel{position:static}.玩法-grid{grid-template-columns:repeat(2,1fr)}
        }
        @media(max-width:767px){
            .container{width:min(100% - 32px,var(--container))}
            .notice{height:auto;min-height:38px;padding:7px 0}.notice .container{gap:10px}
            .header-inner{height:68px}.brand{min-width:0;flex:1}.brand span{font-size:13px}.menu-toggle{display:block}
            .main-nav{display:none;position:absolute;left:16px;right:16px;top:72px;background:var(--white);border:1px solid var(--line);border-radius:15px;padding:10px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}
            .main-nav.open{display:flex}.main-nav a{padding:12px 14px}.header-action{padding:10px 12px;font-size:12px}
            .page-hero{padding:55px 0 62px}.page-hero h1{font-size:37px}.page-hero p{font-size:15px}
            .section,.faq-section{padding:60px 0}.section-head{display:block}.section-head h2{font-size:28px;margin-bottom:9px}
            .guide-card{grid-template-columns:72px 1fr;gap:14px;padding:15px}.guide-icon{height:72px;font-size:24px}.guide-card .button{grid-column:2;width:max-content;padding:9px 13px}
            .玩法-grid{grid-template-columns:1fr}.玩法-card{min-height:0}.app-wrap{grid-template-columns:1fr;gap:28px}.app-wrap h2{font-size:29px}.device-panel{min-height:220px}
            .cta-inner{display:block}.cta h2{font-size:27px;margin-bottom:18px}.cta .button{width:100%}
            .footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-grid>div:first-child{grid-column:1/-1}.footer-bottom{display:block}.footer-bottom nav{margin-top:10px}
        }
        @media(max-width:520px){
            .header-action{display:none}.page-hero h1{font-size:32px}.filter-bar{overflow:auto;flex-wrap:nowrap;padding-bottom:5px}
            .filter-bar button{white-space:nowrap}.guide-card h3{font-size:17px}.guide-card p{font-size:13px}.footer-grid{grid-template-columns:1fr}
        }

/* roulang page: category5 */
:root{
            --ink:#171523;
            --ink-soft:#28243a;
            --muted:#716c7d;
            --paper:#f7f6f2;
            --white:#fff;
            --lime:#c9f45b;
            --lime-dark:#9fc738;
            --coral:#f47c62;
            --violet:#514064;
            --line:#e7e3e9;
            --dark-line:rgba(255,255,255,.13);
            --radius:18px;
            --shadow:0 18px 45px rgba(28,20,45,.10);
            --container:1200px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;background:var(--paper);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%}
        button,input{font:inherit}
        button{cursor:pointer}
        .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
        .notice{height:36px;background:var(--ink);color:#d3ceda;font-size:12px}
        .notice .container{height:100%;display:flex;align-items:center;justify-content:space-between}
        .notice a{color:var(--lime);font-weight:700}
        .notice-left{display:flex;align-items:center;gap:9px}
        .notice-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);display:inline-block}
        .site-header{background:rgba(247,246,242,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}
        .header-inner{height:78px;display:flex;align-items:center;gap:34px}
        .brand{display:flex;align-items:center;gap:11px;min-width:235px;font-weight:800;letter-spacing:-.4px}
        .brand-mark{width:35px;height:35px;border-radius:11px;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-size:15px;position:relative}
        .brand-mark:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--coral);right:-3px;top:-3px}
        .brand span{font-size:15px;line-height:1.25}
        .main-nav{display:flex;align-items:center;gap:5px;flex:1}
        .main-nav a{font-size:14px;color:#686274;padding:9px 13px;border-radius:10px;position:relative;transition:.2s}
        .main-nav a:hover,.main-nav a.active{color:var(--ink);background:#eeece7}
        .main-nav a.active:after{content:"";position:absolute;bottom:1px;left:14px;right:14px;height:2px;background:var(--coral);border-radius:3px}
        .header-action,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:11px;padding:12px 19px;font-weight:800;font-size:14px;transition:.2s}
        .header-action,.button-primary{background:var(--lime);color:#202313;box-shadow:0 8px 18px rgba(159,199,56,.18)}
        .header-action:hover,.button-primary:hover{background:#d8ff78;transform:translateY(-2px)}
        .button-secondary{border:1px solid rgba(255,255,255,.28);color:#fff;background:transparent}
        .button-secondary:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px)}
        .menu-toggle{display:none;background:none;border:0;font-size:25px;color:var(--ink)}
        .page-hero{background:var(--ink);color:var(--white);position:relative;overflow:hidden}
        .page-hero:before{content:"";position:absolute;width:520px;height:520px;border:1px solid rgba(201,244,91,.16);border-radius:50%;right:-120px;top:-240px}
        .page-hero:after{content:"";position:absolute;width:230px;height:230px;border:1px solid rgba(244,124,98,.2);border-radius:50%;right:245px;bottom:-155px}
        .page-hero-inner{position:relative;z-index:1;padding:74px 0 78px;display:grid;grid-template-columns:1.08fr .92fr;gap:80px;align-items:center}
        .breadcrumb{display:flex;gap:9px;align-items:center;color:#a9a2b4;font-size:13px;margin-bottom:22px}
        .breadcrumb a:hover{color:var(--lime)}
        .breadcrumb span{color:#6f687c}
        .eyebrow{color:var(--lime);font-size:13px;font-weight:800;letter-spacing:1.8px;margin:0 0 14px}
        h1,h2,h3,p{margin-top:0}
        h1{font-size:clamp(34px,5vw,58px);line-height:1.18;letter-spacing:-1.8px;margin-bottom:20px;font-weight:800}
        .hero-summary{color:#c8c2d0;max-width:630px;font-size:17px;line-height:1.9;margin-bottom:29px}
        .hero-buttons{display:flex;gap:12px;flex-wrap:wrap}
        .hero-points{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
        .hero-points span{border:1px solid var(--dark-line);border-radius:22px;padding:5px 11px;color:#d9d4df;font-size:12px}
        .hero-points span:first-child{color:var(--lime);border-color:rgba(201,244,91,.35)}
        .guide-board{background:#30283e;border-radius:22px;padding:25px;box-shadow:0 22px 45px rgba(0,0,0,.2);transform:rotate(1.5deg)}
        .board-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--dark-line);padding-bottom:18px;margin-bottom:20px}
        .board-title{font-size:18px;font-weight:800}
        .board-status{font-size:11px;color:var(--lime);background:rgba(201,244,91,.1);padding:5px 9px;border-radius:20px}
        .board-step{display:grid;grid-template-columns:38px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--dark-line)}
        .board-step:last-child{border-bottom:0}
        .step-number{width:34px;height:34px;border-radius:10px;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-weight:900}
        .board-step:nth-child(4) .step-number{background:var(--coral)}
        .board-step strong{display:block;color:#fff;font-size:15px;margin-bottom:3px}
        .board-step small{display:block;color:#aaa3b3;font-size:12px}
        .section{padding:88px 0}
        .section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:34px}
        .section-kicker{color:var(--coral);font-size:12px;font-weight:800;letter-spacing:1.5px;margin-bottom:7px}
        h2{font-size:clamp(27px,3.4vw,38px);line-height:1.25;letter-spacing:-1px;margin-bottom:8px;font-weight:800}
        .section-head p{color:var(--muted);margin-bottom:0;max-width:530px}
        .text-link{font-weight:800;color:var(--violet);white-space:nowrap}
        .text-link:hover{color:var(--coral)}
        .route-layout{display:grid;grid-template-columns:1.3fr .7fr;gap:18px}
        .route-main{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow)}
        .route-main h3{font-size:25px;margin:13px 0 10px}
        .route-main p{color:var(--muted);max-width:650px}
        .tag{display:inline-flex;align-items:center;padding:5px 10px;border-radius:20px;background:#eeeaf0;color:#665d71;font-size:12px;font-weight:700}
        .route-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:27px}
        .route-list div{background:#f6f4ef;border-radius:13px;padding:16px}
        .route-list b{display:block;font-size:14px;margin-bottom:4px}
        .route-list span{font-size:12px;color:var(--muted)}
        .side-card{border-radius:var(--radius);padding:28px;color:#fff;background:var(--violet);position:relative;overflow:hidden}
        .side-card:after{content:"01";position:absolute;right:16px;bottom:-29px;font-size:105px;font-weight:900;color:rgba(255,255,255,.08)}
        .side-card h3{font-size:22px;margin:10px 0}
        .side-card p{color:#d5cedd;font-size:14px;position:relative;z-index:1}
        .side-card .button{position:relative;z-index:1;margin-top:17px}
        .timeline-section{background:#eeece7}
        .timeline{max-width:950px;margin:0 auto;border-left:2px solid #d8d2db;padding-left:31px}
        .timeline-item{position:relative;padding:0 0 30px}
        .timeline-item:last-child{padding-bottom:0}
        .timeline-item:before{content:"";width:13px;height:13px;border-radius:50%;background:var(--coral);border:3px solid #eeece7;position:absolute;left:-39px;top:6px}
        .timeline-item strong{font-size:18px;display:block;margin-bottom:5px}
        .timeline-item p{color:var(--muted);margin-bottom:0;max-width:720px}
        .app-panel{background:#dfeeb4;border-radius:24px;padding:42px 48px;display:grid;grid-template-columns:1fr .8fr;gap:35px;align-items:center}
        .app-panel h2{margin-bottom:13px}
        .app-panel p{color:#596047;max-width:560px}
        .app-actions{display:flex;gap:11px;flex-wrap:wrap;margin:21px 0 14px}
        .app-note{font-size:12px;color:#657047}
        .app-visual{display:flex;justify-content:center;align-items:center;gap:13px}
        .phone{width:142px;height:250px;border:8px solid var(--ink);border-radius:25px;background:#514064;padding:15px 10px;color:#fff;box-shadow:0 12px 25px rgba(35,39,16,.16)}
        .phone:first-child{transform:rotate(-6deg);margin-right:-20px;background:#292338}
        .phone:last-child{transform:rotate(6deg);margin-top:25px}
        .phone-notch{width:45px;height:7px;border-radius:5px;background:#655b72;margin:0 auto 20px}
        .phone h4{font-size:13px;color:var(--lime);margin-bottom:16px}
        .phone-line{height:10px;border-radius:8px;background:#695e77;margin:10px 0}
        .phone-line.short{width:65%}
        .phone-tile{height:58px;border-radius:9px;background:var(--coral);margin-top:18px}
        .phone:last-child .phone-tile{background:var(--lime)}
        .faq-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:70px;align-items:start}
        .faq-intro p{color:var(--muted)}
        .faq-list{border-top:1px solid var(--line)}
        .faq-item{border-bottom:1px solid var(--line)}
        .faq-question{width:100%;border:0;background:none;text-align:left;padding:21px 35px 21px 0;font-weight:800;color:var(--ink);position:relative}
        .faq-question:after{content:"+";position:absolute;right:4px;font-size:24px;font-weight:400;color:var(--coral);top:16px}
        .faq-item.open .faq-question:after{content:"−"}
        .faq-answer{display:none;color:var(--muted);font-size:14px;padding:0 30px 21px 0;line-height:1.85}
        .faq-item.open .faq-answer{display:block}
        .cta{background:var(--ink);color:#fff;padding:65px 0}
        .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
        .cta h2{margin-bottom:8px}
        .cta p{color:#bdb6c7;margin-bottom:0}
        footer{background:#211c30;color:#fff;padding:58px 0 22px}
        .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:35px;padding-bottom:45px}
        .footer-brand{font-size:20px;font-weight:800;margin-bottom:12px}
        .footer-desc{color:#aaa3b3;font-size:14px;max-width:270px}
        footer h3{font-size:14px;margin-bottom:14px;color:var(--lime)}
        footer a{display:block;color:#bdb6c7;font-size:13px;margin:8px 0;transition:.2s}
        footer a:hover{color:var(--lime)}
        .footer-bottom{border-top:1px solid var(--dark-line);padding-top:19px;display:flex;justify-content:space-between;gap:20px;color:#8f879d;font-size:12px}
        .footer-bottom nav{display:flex;gap:19px}
        .footer-bottom nav a{display:inline;margin:0;font-size:12px}
        :focus-visible{outline:3px solid var(--coral);outline-offset:3px}
        @media(max-width:1024px){
            .header-inner{gap:15px}.brand{min-width:205px}.main-nav a{padding:8px 8px;font-size:13px}
            .page-hero-inner{gap:40px}.app-panel{padding:35px}
        }
        @media(max-width:768px){
            .container{width:min(var(--container),calc(100% - 32px))}
            .notice{height:auto;min-height:36px;padding:7px 0}
            .notice .container{gap:10px}.notice-right{display:none}
            .header-inner{height:68px}.brand{min-width:0;flex:1}.brand span{font-size:13px}
            .main-nav{display:none}.header-action{padding:10px 13px;font-size:12px}.menu-toggle{display:block}
            .page-hero-inner{grid-template-columns:1fr;padding:51px 0 58px;gap:38px}
            .page-hero:before{right:-260px}.guide-board{transform:none}
            .section{padding:64px 0}.section-head{display:block;margin-bottom:25px}.section-head .text-link{display:inline-block;margin-top:14px}
            .route-layout,.faq-layout{grid-template-columns:1fr;gap:24px}.route-list{grid-template-columns:1fr}
            .timeline{padding-left:25px}.timeline-item:before{left:-33px}
            .app-panel{grid-template-columns:1fr;padding:31px 24px}.app-visual{margin-top:9px}
            .cta-inner{display:block}.cta .button{margin-top:21px}
            .footer-grid{grid-template-columns:1fr 1fr;gap:27px}.footer-grid>div:first-child{grid-column:1/-1}
            .footer-bottom{display:block}.footer-bottom nav{margin-top:12px}
        }
        @media(max-width:520px){
            h1{font-size:35px}.hero-summary{font-size:15px}.hero-buttons .button{width:100%}
            .guide-board{padding:19px}.route-main{padding:24px}.side-card{padding:24px}
            .app-actions .button{width:100%}.app-visual{transform:scale(.86);margin-left:-18px;margin-right:-18px}
            .footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}
            .footer-bottom nav{display:block}.footer-bottom nav a{margin:7px 0}
        }

/* roulang page: category4 */
:root{
            --ink:#171523;
            --ink-soft:#28243a;
            --muted:#716c7d;
            --paper:#f7f6f2;
            --white:#fff;
            --lime:#c9f45b;
            --lime-dark:#9fc738;
            --coral:#f47c62;
            --violet:#514064;
            --line:#e7e3e9;
            --dark-line:rgba(255,255,255,.13);
            --radius:18px;
            --shadow:0 18px 45px rgba(28,20,45,.10);
            --container:1200px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;background:var(--paper);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%}
        button,input{font:inherit}
        button{cursor:pointer}
        .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
        .notice{height:36px;background:var(--ink);color:#d8d3df;font-size:12px}
        .notice .container{height:100%;display:flex;align-items:center;justify-content:space-between}
        .notice strong{color:var(--lime);margin-right:8px}
        .notice a{color:var(--lime);font-weight:700}
        .site-header{background:rgba(247,246,242,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}
        .header-inner{height:78px;display:flex;align-items:center;gap:30px}
        .brand{display:flex;align-items:center;gap:11px;min-width:235px;font-weight:800;letter-spacing:-.4px}
        .brand-mark{width:35px;height:35px;border-radius:11px;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-size:15px;position:relative}
        .brand-mark:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--coral);right:-3px;top:-3px}
        .brand span{font-size:15px;line-height:1.25}
        .main-nav{display:flex;align-items:center;gap:5px;flex:1}
        .main-nav a{font-size:14px;color:#686274;padding:9px 12px;border-radius:10px;position:relative;transition:.2s;white-space:nowrap}
        .main-nav a:hover,.main-nav a.active{color:var(--ink);background:#eeece7}
        .main-nav a.active:after{content:"";position:absolute;bottom:1px;left:14px;right:14px;height:2px;background:var(--coral);border-radius:3px}
        .header-action,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:11px;padding:12px 19px;font-weight:800;font-size:14px;transition:.2s}
        .header-action,.button-primary{background:var(--lime);color:#202313;box-shadow:0 8px 18px rgba(159,199,56,.18)}
        .header-action:hover,.button-primary:hover{background:#d8ff78;transform:translateY(-2px)}
        .button-secondary{border:1px solid rgba(255,255,255,.28);color:#fff;background:transparent}
        .button-secondary:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px)}
        .button-outline{border:1px solid var(--line);color:var(--violet);background:var(--white)}
        .button-outline:hover{border-color:var(--violet);transform:translateY(-2px)}
        .menu-toggle{display:none;background:none;border:0;font-size:25px;color:var(--ink)}
        .hero{background:var(--ink);color:#fff;position:relative;overflow:hidden}
        .hero:before{content:"";position:absolute;width:520px;height:520px;border:1px solid rgba(201,244,91,.17);border-radius:50%;right:-170px;top:-245px}
        .hero:after{content:"";position:absolute;width:390px;height:390px;border:1px solid rgba(244,124,98,.18);border-radius:50%;left:-230px;bottom:-280px}
        .hero-inner{min-height:455px;display:grid;grid-template-columns:1fr .82fr;align-items:center;gap:72px;position:relative;z-index:1;padding:70px 0}
        .eyebrow,.section-kicker{color:var(--coral);font-size:12px;font-weight:800;letter-spacing:1.6px;margin:0 0 13px}
        .eyebrow{color:var(--lime)}
        h1,h2,h3,p{margin-top:0}
        h1{font-size:clamp(36px,5vw,58px);line-height:1.15;letter-spacing:-2px;margin-bottom:20px;font-weight:800}
        h2{font-size:clamp(28px,3vw,38px);line-height:1.25;letter-spacing:-1px;margin-bottom:12px}
        h3{font-size:21px;line-height:1.35}
        .hero-copy>p{font-size:17px;line-height:1.9;color:#c6c1cf;max-width:610px;margin-bottom:28px}
        .hero-buttons{display:flex;gap:12px;flex-wrap:wrap}
        .hero-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
        .hero-tags span,.tag{display:inline-flex;align-items:center;padding:5px 10px;border-radius:20px;font-size:12px;font-weight:700}
        .hero-tags span{border:1px solid var(--dark-line);color:#d5d0dc}
        .hero-tags span:first-child{color:var(--lime);border-color:rgba(201,244,91,.35)}
        .category-board{background:#302a40;border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:20px;box-shadow:0 24px 50px rgba(0,0,0,.2);transform:rotate(2deg)}
        .board-top{display:flex;justify-content:space-between;align-items:center;color:#eee;font-weight:800;margin-bottom:20px}
        .board-top small{color:var(--lime);font-size:11px}
        .board-feature{padding:22px;border-radius:15px;background:#514064;position:relative;overflow:hidden}
        .board-feature:after{content:"PG";position:absolute;right:14px;bottom:-25px;font-size:110px;font-weight:900;color:rgba(255,255,255,.08)}
        .board-feature small{color:#d4cddd}
        .board-feature strong{display:block;color:var(--lime);font-size:25px;margin-top:5px;position:relative;z-index:1}
        .board-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
        .board-item{background:#40374f;border-radius:13px;padding:15px;min-height:88px}
        .board-item b{display:block;color:#fff;font-size:14px}
        .board-item span{display:block;color:#aaa1b5;font-size:12px;margin-top:7px}
        .board-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--coral);margin-right:7px}
        .section{padding:88px 0}
        .section-dark{background:#211c30;color:#fff}
        .section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:34px}
        .section-head p{color:var(--muted);margin-bottom:0;max-width:520px}
        .section-dark .section-head p{color:#aaa3b3}
        .text-link{font-weight:800;color:var(--violet);white-space:nowrap}
        .section-dark .text-link{color:var(--lime)}
        .filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px;background:#fff;border:1px solid var(--line);border-radius:15px;margin-bottom:26px;box-shadow:0 8px 22px rgba(28,20,45,.04)}
        .filter-label{font-size:13px;font-weight:800;color:var(--muted);padding:0 8px}
        .filter{border:1px solid transparent;background:#f0eef0;color:#665d71;border-radius:9px;padding:8px 15px;font-size:13px;font-weight:700;transition:.2s}
        .filter:hover,.filter.active{background:var(--ink);color:var(--lime)}
        .guide-layout{display:grid;grid-template-columns:1.5fr .75fr;gap:22px;align-items:start}
        .guide-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
        .guide-row{display:grid;grid-template-columns:75px 1fr auto;gap:20px;align-items:center;padding:25px 27px;border-bottom:1px solid var(--line);transition:.2s}
        .guide-row:last-child{border-bottom:0}
        .guide-row:hover{background:#fbfaf7;padding-left:31px}
        .guide-index{width:42px;height:42px;border-radius:13px;background:#ece9ef;color:var(--violet);display:grid;place-items:center;font-weight:900;font-size:17px}
        .guide-row:nth-child(2) .guide-index{background:#e8f2c8;color:#627c22}
        .guide-row:nth-child(3) .guide-index{background:#fbe4dc;color:#a34d3c}
        .guide-row h3{margin:0 0 5px;font-size:19px}
        .guide-row p{color:var(--muted);font-size:14px;margin:0;line-height:1.65}
        .guide-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
        .tag{background:#eeeaf0;color:#665d71}
        .tag.green{background:#edf6d2;color:#5d7422}
        .row-arrow{color:var(--coral);font-size:22px}
        .side-stack{display:grid;gap:16px}
        .side-card{border-radius:var(--radius);padding:25px;background:#302a40;color:#fff}
        .side-card.light{background:#e6efc0;color:var(--ink)}
        .side-card h3{margin-bottom:9px}
        .side-card p{font-size:14px;color:#c6c1cf;margin-bottom:18px}
        .side-card.light p{color:#5d5b4a}
        .side-stat{display:flex;align-items:center;gap:12px;padding-top:15px;border-top:1px solid rgba(255,255,255,.14);font-size:13px}
        .side-stat b{font-size:27px;color:var(--lime)}
        .topics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
        .topic-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;min-height:190px;transition:.22s}
        .topic-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d6d0db}
        .topic-icon{width:42px;height:42px;border-radius:12px;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-weight:900;margin-bottom:19px}
        .topic-card:nth-child(2) .topic-icon{background:#f5d8cf;color:#a34d3c}
        .topic-card:nth-child(3) .topic-icon{background:#e0e9ba;color:#617621}
        .topic-card h3{margin-bottom:8px}
        .topic-card p{color:var(--muted);font-size:14px;margin-bottom:0}
        .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid #dcd7e1;border-bottom:1px solid #dcd7e1}
        .step{padding:28px 24px 28px 0;margin-right:24px;border-right:1px solid #dcd7e1}
        .step:last-child{border-right:0;margin-right:0}
        .step-num{color:var(--coral);font-size:13px;font-weight:900;letter-spacing:1px}
        .step h3{margin:9px 0 7px}
        .step p{color:var(--muted);font-size:14px;margin:0}
        .faq-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:70px;align-items:start}
        .faq-intro p{color:var(--muted)}
        .faq-list{border-top:1px solid var(--line)}
        .faq-item{border-bottom:1px solid var(--line)}
        .faq-question{width:100%;border:0;background:none;text-align:left;padding:20px 0;font-weight:800;color:var(--ink);display:flex;justify-content:space-between;gap:15px}
        .faq-question span:last-child{color:var(--coral);font-size:22px;line-height:1}
        .faq-answer{display:none;color:var(--muted);font-size:14px;padding:0 35px 20px 0}
        .faq-item.open .faq-answer{display:block}
        .faq-item.open .faq-question span:last-child{transform:rotate(45deg)}
        .cta{background:var(--coral);color:#fff;border-radius:22px;padding:44px 52px;display:flex;align-items:center;justify-content:space-between;gap:30px}
        .cta h2{margin-bottom:8px}
        .cta p{margin:0;color:#ffe8e2}
        footer{background:var(--ink-soft);color:#fff;padding:58px 0 20px}
        .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:35px;padding-bottom:45px}
        .footer-brand{font-size:19px;font-weight:800;margin-bottom:11px}
        .footer-desc{color:#aaa3b3;font-size:14px;max-width:250px}
        footer h3{font-size:14px;margin-bottom:14px;color:var(--lime)}
        footer a{display:block;color:#bdb7c5;font-size:13px;margin:8px 0;transition:.2s}
        footer a:hover{color:var(--lime)}
        .footer-bottom{border-top:1px solid var(--dark-line);padding-top:18px;display:flex;justify-content:space-between;gap:20px;color:#928b9f;font-size:12px}
        .footer-bottom nav{display:flex;gap:18px}
        .footer-bottom nav a{display:inline;margin:0}
        :focus-visible{outline:3px solid var(--coral);outline-offset:3px}
        @media(max-width:1100px){
            .header-inner{gap:15px}.brand{min-width:205px}.main-nav a{padding:8px 8px;font-size:13px}
            .hero-inner{gap:35px}.guide-layout{grid-template-columns:1.35fr .8fr}
        }
        @media(max-width:900px){
            .header-action{display:none}.menu-toggle{display:block;margin-left:auto}.main-nav{display:none}
            .header-inner.menu-open{height:auto;flex-wrap:wrap;padding:15px 0}
            .header-inner.menu-open .main-nav{display:flex;order:3;flex-basis:100%;flex-direction:column;align-items:stretch;padding:10px 0}
            .header-inner.menu-open .main-nav a{padding:11px 13px}
            .hero-inner{grid-template-columns:1fr;min-height:auto}.category-board{max-width:540px;width:100%;margin:0 auto;transform:none}
            .guide-layout,.faq-grid{grid-template-columns:1fr;gap:30px}.topics{grid-template-columns:repeat(2,1fr)}
        }
        @media(max-width:600px){
            .container{width:min(var(--container),calc(100% - 32px))}
            .notice{height:auto;min-height:36px;padding:7px 0}.notice .container{gap:10px}
            .brand{min-width:0}.brand span{font-size:13px}.header-inner{height:68px}
            .hero-inner{padding:58px 0}.hero-copy>p{font-size:15px}.hero-buttons .button{width:100%}
            .section{padding:62px 0}.section-head{display:block;margin-bottom:25px}.section-head p{margin-top:12px}
            .filter-bar{align-items:flex-start}.filter-label{width:100%}
            .guide-row{grid-template-columns:45px 1fr;gap:14px;padding:20px 17px}.guide-row:hover{padding-left:20px}
            .row-arrow{display:none}.guide-row h3{font-size:17px}
            .topics{grid-template-columns:1fr}.steps{display:block}.step{border-right:0;border-bottom:1px solid #dcd7e1;margin:0;padding:21px 0}.step:last-child{border-bottom:0}
            .cta{display:block;padding:31px 24px}.cta .button{width:100%;margin-top:22px}
            .footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-grid>div:first-child{grid-column:1/-1}
            .footer-bottom{display:block}.footer-bottom nav{margin-top:12px}
        }

/* roulang page: category5 */
:root{
            --ink:#171523;
            --ink-soft:#28243a;
            --muted:#716c7d;
            --paper:#f7f6f2;
            --white:#fff;
            --lime:#c9f45b;
            --lime-dark:#9fc738;
            --coral:#f47c62;
            --violet:#514064;
            --line:#e7e3e9;
            --dark-line:rgba(255,255,255,.13);
            --radius:18px;
            --shadow:0 18px 45px rgba(28,20,45,.10);
            --container:1200px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;background:var(--paper);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%}
        button,input{font:inherit}
        button{cursor:pointer}
        .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
        .notice{height:36px;background:var(--ink);color:#d7d2dc;font-size:13px}
        .notice .container{height:100%;display:flex;align-items:center;justify-content:space-between}
        .notice a{color:var(--lime);font-weight:700}
        .notice-close{border:0;background:none;color:#aba4b4;font-size:18px;line-height:1}
        .site-header{background:rgba(247,246,242,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}
        .header-inner{height:78px;display:flex;align-items:center;gap:28px}
        .brand{display:flex;align-items:center;gap:11px;min-width:235px;font-weight:800;letter-spacing:-.4px}
        .brand-mark{width:35px;height:35px;border-radius:11px;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-size:15px;position:relative}
        .brand-mark:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--coral);right:-3px;top:-3px}
        .brand span{font-size:15px;line-height:1.25}
        .main-nav{display:flex;align-items:center;gap:5px;flex:1}
        .main-nav a{font-size:14px;color:#686274;padding:9px 13px;border-radius:10px;position:relative;transition:.2s;white-space:nowrap}
        .main-nav a:hover,.main-nav a.active{color:var(--ink);background:#eeece7}
        .main-nav a.active:after{content:"";position:absolute;bottom:1px;left:14px;right:14px;height:2px;background:var(--coral);border-radius:3px}
        .header-action,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:11px;padding:12px 19px;font-weight:800;font-size:14px;transition:.2s}
        .header-action,.button-primary{background:var(--lime);color:#202313;box-shadow:0 8px 18px rgba(159,199,56,.18)}
        .header-action:hover,.button-primary:hover{background:#d8ff78;transform:translateY(-2px)}
        .button-secondary{border:1px solid rgba(255,255,255,.28);color:#fff;background:transparent}
        .button-secondary:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px)}
        .menu-toggle{display:none;background:none;border:0;font-size:25px;color:var(--ink)}
        .page-hero{background:var(--ink);color:#fff;padding:74px 0 78px;position:relative;overflow:hidden}
        .page-hero:before{content:"";position:absolute;width:430px;height:430px;border:1px solid rgba(201,244,91,.17);border-radius:50%;right:-100px;top:-190px}
        .page-hero:after{content:"05";position:absolute;right:10%;bottom:-42px;color:rgba(255,255,255,.05);font-size:180px;font-weight:900;line-height:1}
        .breadcrumb{color:#a9a2b2;font-size:13px;margin-bottom:28px;position:relative;z-index:1}
        .breadcrumb a{color:var(--lime)}
        .hero-content{max-width:760px;position:relative;z-index:1}
        .eyebrow,.section-kicker{color:var(--coral);font-size:12px;font-weight:800;letter-spacing:1.5px;margin-bottom:10px}
        .eyebrow{color:var(--lime);letter-spacing:1.8px}
        h1,h2,h3,p{margin-top:0}
        h1{font-size:clamp(34px,5vw,58px);line-height:1.16;letter-spacing:-1.5px;margin-bottom:20px;font-weight:800}
        h2{font-size:clamp(27px,3.2vw,38px);line-height:1.25;letter-spacing:-.7px;margin-bottom:14px}
        h3{font-size:21px;line-height:1.35;margin-bottom:10px}
        .hero-content>p{font-size:17px;color:#c7c1cf;max-width:700px;margin-bottom:28px}
        .hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
        .hero-meta span,.tag{display:inline-flex;align-items:center;padding:5px 11px;border-radius:20px;font-size:12px;font-weight:700}
        .hero-meta span{border:1px solid var(--dark-line);color:#d5d0dc}
        .hero-meta span:first-child{color:var(--lime);border-color:rgba(201,244,91,.35)}
        .section{padding:88px 0}
        .section-dark{background:#211c30;color:#fff}
        .section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:35px}
        .section-head p{color:var(--muted);margin-bottom:0;max-width:560px}
        .section-dark .section-head p{color:#aaa3b3}
        .text-link{font-weight:800;color:var(--violet);white-space:nowrap}
        .section-dark .text-link{color:var(--lime)}
        .guide-layout{display:grid;grid-template-columns:1.22fr .78fr;gap:22px;align-items:stretch}
        .steps-panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:12px 28px;box-shadow:var(--shadow)}
        .step-row{display:grid;grid-template-columns:58px 1fr auto;gap:20px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line)}
        .step-row:last-child{border-bottom:0}
        .step-number{width:42px;height:42px;border-radius:13px;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-size:15px;font-weight:800}
        .step-row p{color:var(--muted);font-size:14px;margin:0}
        .step-arrow{color:var(--coral);font-size:22px}
        .tip-card{background:#ded1e6;border-radius:var(--radius);padding:31px;position:relative;overflow:hidden}
        .tip-card:after{content:"PG";position:absolute;right:12px;bottom:-35px;font-size:150px;line-height:1;font-weight:900;color:rgba(81,64,100,.11)}
        .tip-card>*{position:relative;z-index:1}
        .tip-icon{width:52px;height:52px;border-radius:16px;background:var(--violet);color:var(--lime);display:grid;place-items:center;font-size:24px;margin-bottom:25px}
        .tip-card p{color:#5c5267;margin-bottom:24px}
        .tip-list{padding:0;margin:0;list-style:none}
        .tip-list li{border-top:1px solid rgba(81,64,100,.16);padding:10px 0;color:#4c4359;font-size:14px}
        .tip-list li:before{content:"✓";color:#718d23;font-weight:800;margin-right:8px}
        .notice-strip{background:#eeece7;padding:14px 18px;border-left:4px solid var(--coral);border-radius:0 12px 12px 0;color:#5e5868;font-size:14px;margin-top:25px}
        .path-section{background:#fff}
        .path-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
        .path-card{border:1px solid var(--line);border-radius:16px;padding:24px 21px;min-height:190px;transition:.2s;background:#fff}
        .path-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d4cbda}
        .path-card strong{display:block;font-size:32px;color:var(--coral);line-height:1;margin-bottom:22px}
        .path-card p{font-size:14px;color:var(--muted);margin-bottom:0}
        .app-section{background:#dfeeb4}
        .app-layout{display:grid;grid-template-columns:1fr .85fr;gap:45px;align-items:center}
        .app-copy p{color:#4e5837;max-width:580px}
        .app-actions{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}
        .app-steps{display:flex;gap:20px;flex-wrap:wrap;margin-top:25px}
        .app-step{font-size:13px;color:#4e5837}
        .app-step b{display:block;color:var(--ink);margin-bottom:2px}
        .device-area{min-height:275px;display:flex;justify-content:center;align-items:center;position:relative}
        .device{width:180px;height:300px;border:8px solid var(--ink);border-radius:29px;background:#40374f;padding:17px 12px;box-shadow:16px 17px 0 rgba(81,64,100,.13);transform:rotate(6deg)}
        .device-top{height:9px;width:58px;border-radius:8px;background:#75697d;margin:0 auto 22px}
        .device-title{font-size:13px;color:#fff;font-weight:800;margin-bottom:15px}
        .device-block{height:65px;border-radius:10px;background:linear-gradient(135deg,#9e6d78,#ed916c);margin-bottom:10px}
        .device-line{height:9px;background:#c9f45b;border-radius:4px;width:64%;margin:10px 0}
        .device-line.short{background:#867b91;width:82%}
        .qr-box{width:126px;height:126px;background:#fff;padding:10px;display:grid;grid-template-columns:repeat(7,1fr);gap:3px;transform:rotate(-7deg);box-shadow:0 10px 25px rgba(40,30,50,.14)}
        .qr-box i{background:var(--ink);display:block}
        .qr-box i:nth-child(3n){background:var(--coral)}
        .content-section{background:var(--paper)}
        .timeline{max-width:900px;border-top:1px solid var(--line)}
        .timeline-item{display:grid;grid-template-columns:125px 95px 1fr auto;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
        .timeline-date{font-weight:800;color:var(--ink-soft);font-size:14px}
        .timeline-item h3{font-size:18px;margin:0 0 4px}
        .timeline-item p{color:var(--muted);font-size:14px;margin:0}
        .tag{background:#eeeaf0;color:#665d71}
        .timeline-link{color:var(--violet);font-weight:800;font-size:14px}
        .faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
        .faq-intro p{color:var(--muted)}
        .faq-list{border-top:1px solid var(--line)}
        .faq-item{border-bottom:1px solid var(--line)}
        .faq-question{width:100%;background:none;border:0;text-align:left;padding:20px 3px;display:flex;justify-content:space-between;gap:20px;font-weight:800;color:var(--ink)}
        .faq-question span:last-child{color:var(--coral);font-size:22px;line-height:1;transition:.2s}
        .faq-answer{display:none;color:var(--muted);font-size:14px;padding:0 30px 20px 3px}
        .faq-item.open .faq-answer{display:block}
        .faq-item.open .faq-question span:last-child{transform:rotate(45deg)}
        .cta{background:var(--ink);color:#fff;padding:52px 0}
        .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
        .cta h2{margin-bottom:8px}
        .cta p{color:#bdb6c7;margin:0}
        footer{background:#171523;color:#fff;padding:63px 0 22px}
        .footer-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr 1fr;gap:35px;padding-bottom:48px}
        .footer-brand{font-weight:800;font-size:18px;margin-bottom:10px}
        .footer-desc{color:#a9a2b2;font-size:14px;max-width:260px}
        footer h3{font-size:14px;color:var(--lime);margin-bottom:15px}
        footer a{display:block;color:#aaa3b3;font-size:14px;margin:7px 0;transition:.2s}
        footer a:hover{color:var(--lime)}
        .footer-bottom{border-top:1px solid var(--dark-line);padding-top:19px;display:flex;justify-content:space-between;gap:20px;color:#8d8795;font-size:12px}
        .footer-bottom nav{display:flex;gap:18px}
        .footer-bottom nav a{display:inline;margin:0;font-size:12px}
        :focus-visible{outline:3px solid var(--coral);outline-offset:3px}
        @media(max-width:1024px){
            .header-inner{gap:15px}.brand{min-width:205px}.main-nav a{padding:8px 8px;font-size:13px}
            .guide-layout,.app-layout,.faq-wrap{grid-template-columns:1fr}.path-grid{grid-template-columns:repeat(2,1fr)}
            .device-area{min-height:240px}.timeline-item{grid-template-columns:100px 85px 1fr}
            .timeline-link{display:none}
        }
        @media(max-width:768px){
            .container{width:min(var(--container),calc(100% - 32px))}
            .notice{height:auto;min-height:36px}.notice .container{padding:7px 0}
            .header-inner{height:68px}.brand{min-width:0;flex:1}.brand span{font-size:13px}
            .main-nav{display:none;position:absolute;top:68px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:12px 16px;flex-direction:column;align-items:stretch;box-shadow:var(--shadow)}
            .main-nav.show{display:flex}.main-nav a{padding:12px 14px}
            .header-action{padding:10px 12px;font-size:12px}.menu-toggle{display:block}
            .page-hero{padding:54px 0 60px}h1{font-size:38px}
            .section{padding:62px 0}.section-head{display:block;margin-bottom:26px}.section-head .text-link{display:inline-block;margin-top:12px}
            .step-row{grid-template-columns:45px 1fr;gap:14px;padding:20px 0}.step-arrow{display:none}
            .app-actions .button{width:100%}.timeline-item{grid-template-columns:1fr;gap:5px;padding:19px 0}.timeline-item .tag{width:max-content}
            .path-grid{grid-template-columns:1fr}.cta-inner{display:block}.cta .button{margin-top:22px;width:100%}
            .footer-grid{grid-template-columns:1fr 1fr;gap:28px;padding-bottom:32px}.footer-grid>div:first-child{grid-column:1/-1}
            .footer-bottom{display:block}.footer-bottom nav{margin-top:12px}
        }
        @media(max-width:520px){
            .brand-mark{width:32px;height:32px}.brand span{max-width:150px}
            .page-hero h1{font-size:32px}.hero-content>p{font-size:15px}
            .steps-panel{padding:8px 20px}.tip-card{padding:25px}
            .app-layout{gap:18px}.device-area{transform:scale(.88);margin:-14px 0}
            .faq-wrap{gap:28px}.footer-grid{grid-template-columns:1fr}
        }

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}