/* roulang page: index */
:root {
            --ink: #111715;
            --ink-soft: #18211e;
            --panel: #202c27;
            --panel-light: #26352f;
            --paper: #f0f3ee;
            --paper-deep: #dce5dd;
            --lime: #c8f36a;
            --lime-dark: #9cc83e;
            --orange: #f28b5d;
            --coral: #ed6f62;
            --text: #eef4ed;
            --muted: #a9b9ae;
            --dark-text: #1d2923;
            --dark-muted: #66756c;
            --line: rgba(199, 231, 204, .16);
            --line-dark: #cbd8ce;
            --radius: 16px;
            --radius-sm: 11px;
            --shadow: 0 18px 50px rgba(4, 13, 9, .18);
            --container: 1240px;
        }
        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--dark-text);
            background: var(--paper);
            font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
            line-height: 1.7;
            -webkit-font-smoothing: antialiased;
        }
        a { color: inherit; text-decoration: none; }
        img { display: block; max-width: 100%; }
        button, input { font: inherit; }
        button { cursor: pointer; }
        :focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
        .container { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; }
        .notice {
            background: var(--lime);
            color: var(--ink);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .02em;
        }
        .notice-inner {
            min-height: 34px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }
        .notice-label { display: flex; align-items: center; gap: 9px; }
        .notice-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
        .notice a { text-decoration: underline; text-underline-offset: 3px; }
        .site-header {
            background: var(--ink);
            color: var(--text);
            border-bottom: 1px solid var(--line);
            position: sticky;
            top: 0;
            z-index: 20;
        }
        .nav-wrap { min-height: 78px; display: flex; align-items: center; gap: 34px; }
        .brand { display: flex; align-items: center; gap: 12px; min-width: 244px; }
        .brand-mark {
            width: 42px; height: 42px; border-radius: 12px;
            display: grid; place-items: center;
            color: var(--ink); background: var(--lime);
            font-size: 20px; font-weight: 950; letter-spacing: -2px;
        }
        .brand-copy { display: grid; gap: 1px; line-height: 1.2; }
        .brand-title { font-size: 16px; font-weight: 900; letter-spacing: .01em; }
        .brand-subtitle { color: var(--muted); font-size: 11px; }
        .main-nav { display: flex; align-items: center; gap: 5px; flex: 1; }
        .main-nav a {
            color: #c2d0c5; padding: 10px 13px; border-radius: 9px;
            font-size: 14px; white-space: nowrap; transition: .2s ease;
        }
        .main-nav a:hover, .main-nav a.active { color: var(--lime); background: rgba(200,243,106,.08); }
        .nav-actions { display: flex; align-items: center; gap: 10px; }
        .menu-toggle { display: none; background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; }
        .btn {
            min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
            padding: 0 18px; border: 1px solid transparent; border-radius: 9px;
            font-size: 14px; font-weight: 800; transition: transform .2s ease, background .2s ease, border .2s ease;
        }
        .btn:hover { transform: translateY(-2px); }
        .btn-primary { background: var(--lime); color: var(--ink); }
        .btn-primary:hover { background: #d9ff8d; }
        .btn-outline { border-color: rgba(200,243,106,.45); color: var(--lime); background: transparent; }
        .btn-outline:hover { border-color: var(--lime); background: rgba(200,243,106,.08); }
        .hero {
            color: var(--text); background: var(--ink);
            padding: 76px 0 92px; overflow: hidden; position: relative;
        }
        .hero:before {
            content: ""; position: absolute; inset: 0; opacity: .22; pointer-events: none;
            background-image: linear-gradient(rgba(200,243,106,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(200,243,106,.1) 1px, transparent 1px);
            background-size: 44px 44px; mask-image: linear-gradient(90deg, #000, transparent 80%);
        }
        .hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
        .eyebrow, .section-kicker {
            color: var(--lime); text-transform: uppercase; font-size: 12px; font-weight: 900;
            letter-spacing: .16em; margin-bottom: 16px;
        }
        .hero h1 { max-width: 720px; margin: 0 0 23px; font-size: clamp(34px, 4.5vw, 62px); line-height: 1.12; letter-spacing: -.055em; }
        .hero-lead { max-width: 650px; color: #b8c8bc; font-size: 17px; margin: 0 0 30px; }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
        .hero-note { margin-top: 25px; color: #819187; font-size: 13px; }
        .screen-stage { min-height: 392px; position: relative; display: grid; place-items: center; }
        .screen-glow { position: absolute; width: 310px; height: 310px; background: rgba(200,243,106,.11); filter: blur(55px); border-radius: 50%; }
        .game-screen {
            position: relative; width: min(100%, 470px); border: 1px solid rgba(200,243,106,.32);
            border-radius: 20px; padding: 15px; background: #27372f; box-shadow: var(--shadow);
            transform: rotate(2deg);
        }
        .screen-bar { display: flex; justify-content: space-between; color: #96a99a; font-size: 11px; padding: 2px 4px 12px; }
        .screen-art {
            height: 270px; border-radius: 12px; overflow: hidden; position: relative;
            display: flex; align-items: flex-end; padding: 22px;
            background: radial-gradient(circle at 70% 25%, #edb86c 0 8%, transparent 9%), linear-gradient(135deg, #395d48, #14211c 56%, #8c443b);
        }
        .screen-art:before, .screen-art:after { content: ""; position: absolute; border: 2px solid rgba(200,243,106,.48); border-radius: 50%; }
        .screen-art:before { width: 180px; height: 180px; right: 45px; top: 36px; }
        .screen-art:after { width: 100px; height: 100px; left: 48px; top: 90px; border-color: rgba(242,139,93,.65); }
        .art-copy { position: relative; z-index: 1; }
        .art-copy small { color: var(--lime); font-weight: 800; }
        .art-copy strong { display: block; color: white; font-size: 31px; line-height: 1.1; margin-top: 5px; }
        .screen-controls { display: flex; gap: 9px; padding-top: 13px; }
        .control { height: 36px; flex: 1; border: 1px solid var(--line); border-radius: 8px; background: #1a2721; color: #c8d6ca; font-size: 12px; text-align: center; padding-top: 7px; }
        .control.highlight { background: var(--lime); color: var(--ink); font-weight: 900; }
        .breadcrumb { color: var(--dark-muted); font-size: 13px; padding: 24px 0 0; }
        .breadcrumb span { margin: 0 8px; color: #a9b5aa; }
        .section { padding: 92px 0; }
        .section-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
        .section-head h2 { margin: 0; font-size: clamp(27px, 3vw, 40px); line-height: 1.2; letter-spacing: -.04em; }
        .section-head p { color: var(--dark-muted); margin: 0; max-width: 520px; }
        .experience { background: var(--paper); }
        .experience-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: start; }
        .experience-intro h2 { margin: 0 0 18px; font-size: 36px; line-height: 1.25; letter-spacing: -.04em; }
        .experience-intro p { color: var(--dark-muted); margin: 0 0 25px; }
        .mini-points { border-top: 1px solid var(--line-dark); }
        .mini-point { display: flex; gap: 13px; padding: 17px 0; border-bottom: 1px solid var(--line-dark); }
        .mini-point b { color: var(--lime-dark); font-size: 13px; }
        .mini-point strong { display: block; font-size: 15px; }
        .mini-point span { display: block; color: var(--dark-muted); font-size: 13px; }
        .steps { background: var(--ink-soft); color: var(--text); border-radius: var(--radius); padding: 30px; }
        .steps-top { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 28px; }
        .steps-top h3 { margin: 0; font-size: 20px; }
        .steps-top span { color: var(--muted); font-size: 12px; }
        .step-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
        .step { min-height: 165px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
        .step-num { color: var(--lime); font: 700 23px/1 monospace; }
        .step h4 { margin: 26px 0 7px; font-size: 16px; }
        .step p { margin: 0; color: var(--muted); font-size: 13px; }
        .games { background: var(--paper-deep); }
        .game-layout { display: grid; grid-template-columns: 1.45fr .8fr; gap: 18px; }
        .featured-game, .game-list { border-radius: var(--radius); overflow: hidden; }
        .featured-game { min-height: 360px; padding: 30px; display: flex; align-items: end; color: white; position: relative; background: linear-gradient(135deg, #314f3d 10%, #16251f 55%, #aa5a45); }
        .featured-game:before { content: "PG"; position: absolute; right: 36px; top: 22px; color: rgba(200,243,106,.18); font-size: 180px; font-weight: 950; line-height: 1; }
        .game-info { position: relative; max-width: 400px; }
        .tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 5px; background: var(--lime); color: var(--ink); font-size: 11px; font-weight: 900; }
        .tag.orange { background: var(--orange); }
        .game-info h3 { margin: 13px 0 7px; font-size: 28px; }
        .game-info p { color: #d0ddd2; font-size: 14px; margin: 0 0 20px; }
        .game-list { background: var(--ink-soft); color: var(--text); padding: 10px 22px; }
        .game-row { display: flex; align-items: center; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line); }
        .game-row:last-child { border-bottom: 0; }
        .game-index { color: var(--lime); font: 700 16px monospace; }
        .game-row strong { display: block; font-size: 15px; }
        .game-row small { color: var(--muted); font-size: 12px; }
        .row-arrow { margin-left: auto; color: var(--lime); font-size: 20px; }
        .download { background: #d6e3d8; }
        .download-box { display: grid; grid-template-columns: .8fr 1.2fr; gap: 55px; align-items: center; background: var(--ink); border-radius: 20px; padding: 42px 50px; color: var(--text); overflow: hidden; }
        .device { width: 195px; height: 290px; margin: 0 auto; border: 8px solid #34443b; border-radius: 28px; background: #20332a; padding: 12px; box-shadow: 20px 25px 0 rgba(17,23,21,.15); transform: rotate(-6deg); }
        .device-screen { height: 100%; border-radius: 15px; padding: 16px 10px; background: linear-gradient(160deg, #567c57, #182a21 60%, #b15b4d); }
        .device-screen:before { content: "PG"; display: block; color: rgba(200,243,106,.8); font-size: 54px; font-weight: 950; margin-top: 65px; }
        .download-copy h2 { margin: 0 0 13px; font-size: 34px; line-height: 1.25; }
        .download-copy p { color: var(--muted); margin: 0 0 21px; }
        .download-meta { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 25px; }
        .meta-chip { border: 1px solid var(--line); color: #c7d4c9; border-radius: 7px; padding: 7px 11px; font-size: 12px; }
        .download-foot { margin-top: 14px; color: #87978b; font-size: 12px; }
        .news { background: var(--paper); }
        .news-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 48px; }
        .news-feature { background: var(--ink-soft); color: var(--text); border-radius: var(--radius); padding: 28px; min-height: 270px; display: flex; flex-direction: column; justify-content: end; }
        .news-feature h3 { margin: 17px 0 8px; font-size: 24px; line-height: 1.35; }
        .news-feature p { color: var(--muted); font-size: 14px; margin: 0; }
        .news-list { border-top: 1px solid var(--line-dark); }
        .news-item { display: grid; grid-template-columns: 92px 1fr auto; gap: 15px; align-items: center; min-height: 86px; border-bottom: 1px solid var(--line-dark); }
        .news-date { color: var(--dark-muted); font: 12px monospace; }
        .news-item h3 { margin: 0 0 3px; font-size: 15px; }
        .news-item p { color: var(--dark-muted); margin: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .news-link { color: #5c8b26; font-size: 13px; font-weight: 800; white-space: nowrap; }
        .empty-state { padding: 28px 0; color: var(--dark-muted); font-size: 14px; }
        .faq { background: var(--paper-deep); }
        .faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; }
        .faq-intro h2 { font-size: 36px; line-height: 1.2; margin: 0 0 15px; }
        .faq-intro p { margin: 0; color: var(--dark-muted); }
        .faq-list { border-top: 1px solid var(--line-dark); }
        .faq-item { border-bottom: 1px solid var(--line-dark); }
        .faq-question { width: 100%; display: flex; justify-content: space-between; gap: 20px; padding: 21px 0; border: 0; background: transparent; text-align: left; color: var(--dark-text); font-weight: 800; }
        .faq-question i { font-style: normal; color: var(--lime-dark); font-size: 20px; transition: transform .2s; }
        .faq-answer { display: none; padding: 0 35px 20px 0; color: var(--dark-muted); font-size: 14px; }
        .faq-item.open .faq-answer { display: block; }
        .faq-item.open .faq-question i { transform: rotate(45deg); }
        .cta { padding: 72px 0; background: var(--lime); color: var(--ink); }
        .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
        .cta h2 { margin: 0 0 7px; font-size: 34px; letter-spacing: -.04em; }
        .cta p { margin: 0; color: #4c652f; }
        .cta .btn-primary { background: var(--ink); color: var(--lime); }
        .site-footer { background: var(--ink); color: var(--text); padding: 52px 0 25px; }
        .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 50px; padding-bottom: 42px; }
        .footer-brand p { max-width: 330px; color: var(--muted); font-size: 13px; }
        .footer-title { color: var(--lime); font-size: 13px; font-weight: 900; margin: 0 0 13px; }
        .footer-links { display: grid; gap: 8px; color: var(--muted); font-size: 13px; }
        .footer-links a:hover { color: var(--lime); }
        .footer-bottom { border-top: 1px solid var(--line); padding-top: 18px; display: flex; justify-content: space-between; gap: 20px; color: #7d8d81; font-size: 12px; }
        @media (max-width: 1024px) {
            .nav-wrap { gap: 18px; } .brand { min-width: auto; } .brand-subtitle { display: none; }
            .hero-grid, .experience-grid, .news-layout, .faq-layout { gap: 35px; }
            .download-box { padding: 35px; gap: 30px; }
        }
        @media (max-width: 768px) {
            .container { width: min(100% - 32px, var(--container)); }
            .notice-inner { min-height: 32px; } .notice-inner a { display: none; }
            .nav-wrap { min-height: 68px; justify-content: space-between; }
            .menu-toggle { display: block; }
            .main-nav { display: none; position: absolute; top: 68px; left: 0; right: 0; padding: 12px 16px 18px; background: var(--ink); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; }
            .main-nav.show { display: flex; } .main-nav a { padding: 13px; }
            .nav-actions .btn-outline { display: none; }
            .hero { padding: 52px 0 58px; } .hero-grid { grid-template-columns: 1fr; gap: 32px; }
            .hero h1 { font-size: clamp(32px, 9vw, 48px); } .hero-lead { font-size: 15px; }
            .screen-stage { min-height: 315px; } .screen-art { height: 220px; }
            .section { padding: 62px 0; } .section-head { display: block; } .section-head p { margin-top: 13px; }
            .experience-grid, .game-layout, .download-box, .news-layout, .faq-layout { grid-template-columns: 1fr; }
            .experience-intro h2, .faq-intro h2 { font-size: 29px; }
            .step-list { grid-template-columns: 1fr; } .step { min-height: auto; }
            .featured-game { min-height: 280px; } .download-box { padding: 30px 22px; }
            .device { transform: rotate(-3deg); } .download-copy h2 { font-size: 29px; }
            .news-item { grid-template-columns: 75px 1fr; padding: 14px 0; }
            .news-link { grid-column: 2; } .news-item p { white-space: normal; }
            .cta-inner { display: block; } .cta .btn { margin-top: 22px; }
            .footer-top { grid-template-columns: 1fr 1fr; gap: 30px; }
            .footer-brand { grid-column: 1 / -1; } .footer-bottom { display: block; } .footer-bottom span { display: block; margin-top: 8px; }
        }
        @media (max-width: 520px) {
            .brand-title { font-size: 14px; } .brand-mark { width: 37px; height: 37px; font-size: 18px; }
            .hero-actions .btn { width: 100%; } .screen-stage { transform: scale(.92); margin: -12px 0; }
            .steps { padding: 22px 18px; } .section-head h2 { font-size: 28px; }
            .footer-top { grid-template-columns: 1fr; } .footer-brand { grid-column: auto; }
        }

/* roulang page: article */
:root {
            --ink:#111715;
            --ink-soft:#18211e;
            --panel:#202c27;
            --panel-light:#26352f;
            --paper:#f0f3ee;
            --paper-deep:#dce5dd;
            --lime:#c8f36a;
            --lime-dark:#9cc83e;
            --orange:#f28b5d;
            --coral:#ed6f62;
            --text:#eef4ed;
            --muted:#a9b9ae;
            --dark-text:#1d2923;
            --dark-muted:#66756c;
            --line:rgba(199,231,204,.16);
            --line-dark:#cbd8ce;
            --radius:16px;
            --radius-sm:11px;
            --shadow:0 18px 50px rgba(4,13,9,.18);
            --container:1240px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--dark-text);
            background:var(--paper);
            font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;
            line-height:1.7;
            -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}
        .site-header{
            position:sticky;top:0;z-index:20;
            color:var(--text);background:var(--ink);
            border-bottom:1px solid var(--line);
        }
        .nav-wrap{min-height:78px;display:flex;align-items:center;gap:34px}
        .brand{display:flex;align-items:center;gap:12px;min-width:244px}
        .brand-mark{
            width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
            color:var(--ink);background:var(--lime);font-size:20px;font-weight:950;letter-spacing:-2px;
        }
        .brand-copy{display:grid;gap:1px;line-height:1.2}
        .brand-title{font-size:16px;font-weight:900;letter-spacing:.01em}
        .brand-subtitle{color:var(--muted);font-size:11px}
        .main-nav{display:flex;align-items:center;gap:5px;flex:1}
        .main-nav a{
            color:#c2d0c5;padding:10px 13px;border-radius:9px;font-size:14px;
            white-space:nowrap;transition:.2s ease;
        }
        .main-nav a:hover,.main-nav a.active{color:var(--lime);background:rgba(200,243,106,.08)}
        .nav-actions{display:flex;align-items:center;gap:10px}
        .menu-toggle{
            display:none;background:transparent;color:var(--text);
            border:1px solid var(--line);border-radius:9px;padding:9px 11px;
        }
        .btn{
            min-height:44px;display:inline-flex;align-items:center;justify-content:center;
            padding:0 18px;border:1px solid transparent;border-radius:9px;font-size:14px;
            font-weight:800;transition:transform .2s ease,background .2s ease,border .2s ease;
        }
        .btn:hover{transform:translateY(-2px)}
        .btn:focus-visible,.main-nav a:focus-visible,.brand:focus-visible{
            outline:3px solid rgba(200,243,106,.5);outline-offset:3px
        }
        .btn-primary{background:var(--lime);color:var(--ink)}
        .btn-primary:hover{background:#d9ff8d}
        .btn-outline{border-color:rgba(200,243,106,.45);color:var(--lime);background:transparent}
        .btn-outline:hover{border-color:var(--lime);background:rgba(200,243,106,.08)}
        .article-hero{
            position:relative;overflow:hidden;padding:72px 0 78px;
            color:var(--text);background:var(--ink-soft);
        }
        .article-hero:before{
            content:"";position:absolute;inset:0;opacity:.2;pointer-events:none;
            background-image:linear-gradient(rgba(200,243,106,.1) 1px,transparent 1px),
            linear-gradient(90deg,rgba(200,243,106,.1) 1px,transparent 1px);
            background-size:44px 44px;
            mask-image:linear-gradient(90deg,#000,transparent 85%);
        }
        .breadcrumbs{position:relative;margin-bottom:30px;color:#93a69a;font-size:13px}
        .breadcrumbs a{color:var(--lime)}
        .breadcrumbs span{padding:0 8px;color:#64766a}
        .article-heading{position:relative;max-width:880px}
        .eyebrow{
            color:var(--lime);font-size:12px;font-weight:900;letter-spacing:.14em;
            margin-bottom:15px
        }
        .article-heading h1{
            margin:0 0 22px;font-size:clamp(32px,5vw,60px);
            line-height:1.18;letter-spacing:-.055em
        }
        .article-intro{max-width:790px;margin:0;color:#b8c8bc;font-size:17px}
        .article-meta{
            display:flex;flex-wrap:wrap;gap:16px;margin-top:28px;
            color:#91a298;font-size:13px
        }
        .article-meta strong{color:var(--lime);font-weight:800}
        .article-layout{
            display:grid;grid-template-columns:minmax(0,800px) 280px;
            gap:54px;align-items:start;padding:76px 0 92px
        }
        .article-content{
            min-width:0;padding:42px 48px;background:#fff;
            border:1px solid var(--line-dark);border-radius:var(--radius);
            box-shadow:0 12px 30px rgba(22,42,31,.06);
        }
        .article-content h2{
            margin:38px 0 16px;color:var(--dark-text);font-size:28px;
            line-height:1.3;letter-spacing:-.03em
        }
        .article-content h3{margin:28px 0 12px;font-size:21px;line-height:1.4}
        .article-content h2:first-child{margin-top:0}
        .article-content p{margin:0 0 21px;color:#435148;font-size:16px;line-height:1.95}
        .article-content ul,.article-content ol{margin:0 0 24px;padding-left:25px;color:#435148}
        .article-content li{margin:8px 0;padding-left:4px}
        .article-content a{color:#557d21;text-decoration:underline;text-underline-offset:3px}
        .article-content blockquote{
            margin:28px 0;padding:20px 22px;border-left:4px solid var(--lime-dark);
            background:#f0f5e9;color:#405039;border-radius:0 var(--radius-sm) var(--radius-sm) 0
        }
        .article-content img{width:100%;border-radius:12px;margin:28px 0 8px}
        .article-content figure{margin:26px 0}
        .article-content figcaption{color:var(--dark-muted);font-size:13px;text-align:center}
        .article-content table{width:100%;margin:24px 0;border-collapse:collapse;overflow:hidden}
        .article-content th,.article-content td{padding:12px 14px;border:1px solid var(--line-dark);text-align:left}
        .article-content th{background:#e9f0e9;color:var(--dark-text)}
        .article-aside{position:sticky;top:110px;display:grid;gap:16px}
        .aside-card{
            padding:24px;background:var(--ink-soft);color:var(--text);
            border-radius:var(--radius);box-shadow:var(--shadow)
        }
        .aside-card h2{margin:0 0 15px;font-size:18px}
        .aside-card p{margin:0 0 18px;color:var(--muted);font-size:13px}
        .aside-list{display:grid;gap:0}
        .aside-list a{
            padding:12px 0;border-bottom:1px solid var(--line);
            color:#d1ddd3;font-size:14px;transition:.2s
        }
        .aside-list a:last-child{border-bottom:0}
        .aside-list a:hover{color:var(--lime);padding-left:4px}
        .article-empty{text-align:center;padding:55px 20px}
        .article-empty h2{margin:0 0 10px;font-size:28px}
        .article-empty p{color:var(--dark-muted);margin:0 0 24px}
        .related-section{padding:0 0 92px}
        .section-head{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:25px}
        .section-head h2{margin:0;font-size:30px;line-height:1.25;letter-spacing:-.04em}
        .section-head p{margin:0;color:var(--dark-muted);font-size:14px}
        .related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
        .related-card{
            display:flex;justify-content:space-between;gap:18px;padding:22px;
            background:#fff;border:1px solid var(--line-dark);border-radius:var(--radius-sm);
            transition:.2s ease
        }
        .related-card:hover{transform:translateY(-3px);border-color:var(--lime-dark);box-shadow:var(--shadow)}
        .related-card h3{margin:9px 0 5px;font-size:17px;line-height:1.45}
        .related-card time{color:var(--dark-muted);font-size:12px}
        .related-arrow{color:var(--lime-dark);font-size:23px}
        .tag{
            display:inline-flex;align-items:center;min-height:24px;padding:0 9px;
            border-radius:5px;background:var(--lime);color:var(--ink);
            font-size:11px;font-weight:900
        }
        .tag.orange{background:var(--orange)}
        .cta-section{padding:0 0 92px}
        .cta-panel{
            display:flex;align-items:center;justify-content:space-between;gap:25px;
            padding:34px 40px;color:var(--text);background:var(--panel);
            border-radius:var(--radius);border:1px solid var(--line)
        }
        .cta-panel h2{margin:0 0 7px;font-size:27px}
        .cta-panel p{margin:0;color:var(--muted)}
        .site-footer{color:var(--text);background:var(--ink);padding-top:55px}
        .footer-top{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:50px;padding-bottom:45px}
        .footer-brand p{max-width:360px;color:var(--muted);font-size:13px;margin:18px 0 0}
        .footer-title{margin:5px 0 16px;font-size:14px;color:var(--lime)}
        .footer-links{display:grid;gap:8px}
        .footer-links a{color:#b7c6ba;font-size:13px;transition:.2s}
        .footer-links a:hover{color:var(--lime)}
        .footer-bottom{
            display:flex;justify-content:space-between;gap:20px;padding:19px 0;
            color:#7e9084;border-top:1px solid var(--line);font-size:12px
        }
        @media (max-width:1100px){
            .nav-wrap{gap:16px}.brand{min-width:220px}.main-nav a{padding:9px 8px;font-size:13px}
            .article-layout{grid-template-columns:minmax(0,1fr) 240px;gap:28px}
        }
        @media (max-width:820px){
            .container{width:min(var(--container),calc(100% - 32px))}
            .nav-wrap{min-height:70px}.main-nav,.nav-actions .btn-outline{display:none}
            .nav-actions{margin-left:auto}.menu-toggle{display:block}
            .main-nav.is-open{
                position:absolute;left:16px;right:16px;top:70px;display:grid;
                padding:10px;background:var(--ink-soft);border:1px solid var(--line);
                border-radius:12px;box-shadow:var(--shadow)
            }
            .main-nav.is-open a{padding:13px 14px}
            .article-hero{padding:52px 0 60px}
            .article-layout{display:block;padding:52px 0 70px}
            .article-aside{position:static;display:grid;grid-template-columns:1fr 1fr;margin-top:24px}
            .related-section,.cta-section{padding-bottom:70px}
        }
        @media (max-width:576px){
            .brand{min-width:0;gap:9px}.brand-mark{width:38px;height:38px;font-size:18px}
            .brand-title{font-size:14px}.brand-subtitle{font-size:10px}
            .article-heading h1{font-size:34px}.article-intro{font-size:15px}
            .article-content{padding:27px 21px}.article-content p{font-size:15px}
            .article-content h2{font-size:24px}.article-content h3{font-size:19px}
            .article-aside,.related-grid{grid-template-columns:1fr}
            .cta-panel{display:block;padding:28px 24px}.cta-panel .btn{margin-top:20px;width:100%}
            .footer-top{grid-template-columns:1fr;gap:28px;padding-bottom:32px}
            .footer-bottom{display:grid;gap:5px}
        }

/* roulang page: category1 */
:root{
            --ink:#111715;--ink-soft:#18211e;--panel:#202c27;--panel-light:#26352f;
            --paper:#f0f3ee;--paper-deep:#dce5dd;--lime:#c8f36a;--lime-dark:#9cc83e;
            --orange:#f28b5d;--coral:#ed6f62;--text:#eef4ed;--muted:#a9b9ae;
            --dark-text:#1d2923;--dark-muted:#66756c;--line:rgba(199,231,204,.16);
            --line-dark:#cbd8ce;--radius:16px;--radius-sm:11px;
            --shadow:0 18px 50px rgba(4,13,9,.18);--container:1240px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;background:var(--paper);color:var(--dark-text);font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;line-height:1.7;-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{background:var(--lime);color:var(--ink);font-size:12px;font-weight:800;padding:7px 0}
        .notice-inner{display:flex;justify-content:space-between;gap:20px}
        .notice a{text-decoration:underline;text-underline-offset:3px}
        .site-header{background:var(--ink);color:var(--text);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
        .nav-wrap{min-height:78px;display:flex;align-items:center;gap:34px}
        .brand{display:flex;align-items:center;gap:12px;min-width:244px}
        .brand-mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--ink);background:var(--lime);font-size:20px;font-weight:950;letter-spacing:-2px}
        .brand-copy{display:grid;gap:1px;line-height:1.2}
        .brand-title{font-size:16px;font-weight:900;letter-spacing:.01em}
        .brand-subtitle{color:var(--muted);font-size:11px}
        .main-nav{display:flex;align-items:center;gap:5px;flex:1}
        .main-nav a{color:#c2d0c5;padding:10px 13px;border-radius:9px;font-size:14px;white-space:nowrap;transition:.2s ease}
        .main-nav a:hover,.main-nav a.active{color:var(--lime);background:rgba(200,243,106,.08)}
        .nav-actions{display:flex;align-items:center;gap:10px}
        .menu-toggle{display:none;background:transparent;color:var(--text);border:1px solid var(--line);border-radius:9px;padding:9px 11px}
        .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border:1px solid transparent;border-radius:9px;font-size:14px;font-weight:800;transition:transform .2s ease,background .2s ease,border .2s ease}
        .btn:hover{transform:translateY(-2px)}
        .btn-primary{background:var(--lime);color:var(--ink)}
        .btn-primary:hover{background:#d9ff8d}
        .btn-outline{border-color:rgba(200,243,106,.45);color:var(--lime);background:transparent}
        .btn-outline:hover{border-color:var(--lime);background:rgba(200,243,106,.08)}
        .hero{color:var(--text);background:var(--ink);padding:68px 0 76px;position:relative;overflow:hidden}
        .hero:before{content:"";position:absolute;inset:0;opacity:.22;background-image:linear-gradient(rgba(200,243,106,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(200,243,106,.1) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(90deg,#000,transparent 82%)}
        .hero-grid{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:center}
        .eyebrow,.section-kicker{color:var(--lime);text-transform:uppercase;font-size:12px;font-weight:900;letter-spacing:.14em;margin-bottom:15px}
        .hero h1{max-width:720px;margin:0 0 21px;font-size:clamp(35px,4.4vw,60px);line-height:1.14;letter-spacing:-.055em}
        .hero-lead{max-width:650px;color:#b8c8bc;font-size:17px;margin:0 0 29px}
        .hero-actions{display:flex;flex-wrap:wrap;gap:12px}
        .crumbs{position:relative;color:#83958a;font-size:13px;margin-bottom:28px}
        .crumbs a{color:var(--lime)}
        .hero-visual{min-height:310px;position:relative;display:grid;place-items:center}
        .simulator-window{width:min(100%,480px);background:#17221e;border:1px solid rgba(200,243,106,.36);border-radius:18px;padding:13px;box-shadow:var(--shadow);transform:rotate(2deg)}
        .window-bar{height:28px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--line);margin-bottom:13px}
        .window-dot{width:8px;height:8px;border-radius:50%;background:var(--orange)}
        .window-dot:nth-child(2){background:var(--lime)}
        .window-dot:nth-child(3){background:#83958a}
        .screen-art{height:220px;border-radius:11px;display:flex;align-items:end;padding:22px;background:linear-gradient(145deg,#425e42,#26392e 48%,#a95f49);position:relative;overflow:hidden}
        .screen-art:after{content:"PG";position:absolute;right:24px;top:8px;color:rgba(200,243,106,.2);font-size:150px;font-weight:950;line-height:1}
        .screen-label{position:relative;z-index:1;color:#fff}
        .screen-label strong{display:block;font-size:25px;line-height:1.25}
        .screen-label span{font-size:12px;color:#d3ded4}
        .hero-points{display:flex;gap:10px;flex-wrap:wrap;margin-top:17px}
        .hero-points span{border:1px solid var(--line);border-radius:99px;padding:5px 10px;color:var(--muted);font-size:12px}
        .section{padding:88px 0}
        .section-alt{background:var(--paper-deep)}
        .section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:32px}
        .section-head h2{margin:0;font-size:clamp(27px,3vw,40px);line-height:1.2;letter-spacing:-.04em}
        .section-head p{color:var(--dark-muted);margin:0;max-width:520px}
        .intro-grid{display:grid;grid-template-columns:.76fr 1.24fr;gap:58px;align-items:start}
        .intro-copy{font-size:16px;color:#4c5c52}
        .intro-copy p{margin:0 0 18px}
        .mini-note{border-left:4px solid var(--lime-dark);padding:14px 18px;background:#fff;color:var(--dark-muted);font-size:14px}
        .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
        .step-card{background:#fff;border:1px solid var(--line-dark);border-radius:var(--radius);padding:25px 22px;min-height:190px;transition:.2s ease}
        .step-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--lime-dark)}
        .step-number{width:34px;height:34px;border-radius:9px;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-weight:900;margin-bottom:19px}
        .step-card h3{font-size:18px;margin:0 0 8px}
        .step-card p{font-size:14px;color:var(--dark-muted);margin:0}
        .panel-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}
        .info-panel{background:var(--ink-soft);color:var(--text);border-radius:var(--radius);padding:31px}
        .info-panel h3{margin:0 0 12px;font-size:24px}
        .info-panel p{color:var(--muted);margin:0 0 22px}
        .interface-list{display:grid;gap:0}
        .interface-row{display:flex;gap:15px;padding:17px 0;border-bottom:1px solid var(--line)}
        .interface-row:last-child{border-bottom:0}
        .interface-icon{color:var(--lime);font-weight:900;font-size:19px}
        .interface-row strong{display:block;font-size:15px}
        .interface-row span{display:block;color:var(--muted);font-size:13px}
        .device-card{background:#fff;border-radius:var(--radius);padding:31px;border:1px solid var(--line-dark)}
        .device-card h3{margin:0 0 13px;font-size:23px}
        .device-card p{color:var(--dark-muted);font-size:14px}
        .device-tags{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}
        .tag{display:inline-flex;align-items:center;min-height:25px;padding:0 10px;border-radius:5px;background:var(--lime);color:var(--ink);font-size:11px;font-weight:900}
        .tag.orange{background:var(--orange)}
        .device-line{display:flex;justify-content:space-between;padding:13px 0;border-top:1px solid var(--line-dark);font-size:14px}
        .device-line span{color:var(--dark-muted)}
        .faq-list{max-width:900px;margin:0 auto;border-top:1px solid var(--line-dark)}
        .faq-item{border-bottom:1px solid var(--line-dark)}
        .faq-question{width:100%;border:0;background:transparent;text-align:left;padding:20px 4px;display:flex;justify-content:space-between;align-items:center;color:var(--dark-text);font-weight:850;font-size:16px}
        .faq-question span:last-child{font-size:24px;color:var(--lime-dark);font-weight:400;transition:.2s}
        .faq-answer{display:none;color:var(--dark-muted);padding:0 42px 20px 4px;font-size:14px}
        .faq-item.open .faq-answer{display:block}
        .faq-item.open .faq-question span:last-child{transform:rotate(45deg)}
        .cta{background:var(--panel);color:var(--text);padding:48px;border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;gap:25px}
        .cta h2{margin:0 0 8px;font-size:30px}
        .cta p{color:var(--muted);margin:0}
        .cta-actions{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0}
        .site-footer{background:var(--ink);color:var(--text);padding-top:56px}
        .footer-top{display:grid;grid-template-columns:1.6fr .8fr 1fr;gap:55px;padding-bottom:42px}
        .footer-brand .brand{margin-bottom:18px}
        .footer-brand p{max-width:360px;color:var(--muted);font-size:13px;margin:0}
        .footer-title{font-size:14px;margin:5px 0 15px;color:var(--lime)}
        .footer-links{display:grid;gap:9px;color:var(--muted);font-size:13px}
        .footer-links a:hover{color:var(--lime)}
        .footer-bottom{border-top:1px solid var(--line);padding:19px 0;display:flex;justify-content:space-between;gap:20px;color:#819187;font-size:12px}
        :focus-visible{outline:3px solid var(--orange);outline-offset:3px}
        @media(max-width:1100px){.nav-wrap{gap:15px}.brand{min-width:220px}.main-nav a{padding:9px 8px;font-size:13px}.nav-actions .btn-outline{display:none}}
        @media(max-width:900px){.hero-grid,.intro-grid,.panel-grid{grid-template-columns:1fr;gap:38px}.hero{padding:55px 0 65px}.hero-visual{min-height:auto}.footer-top{grid-template-columns:1.3fr 1fr 1fr;gap:28px}}
        @media(max-width:768px){.container{width:min(var(--container),calc(100% - 32px))}.notice-inner span{display:none}.nav-wrap{min-height:68px;flex-wrap:wrap}.brand{min-width:0;flex:1}.brand-title{font-size:14px}.brand-subtitle{font-size:10px}.main-nav{order:4;display:none;flex-basis:100%;overflow-x:auto;padding:4px 0 12px}.main-nav.show{display:flex}.nav-actions{gap:7px}.nav-actions .btn{padding:0 12px;font-size:12px}.menu-toggle{display:block}.hero h1{font-size:clamp(33px,9vw,48px)}.hero-lead{font-size:15px}.section{padding:64px 0}.section-head{display:block;margin-bottom:25px}.section-head p{margin-top:13px}.steps{grid-template-columns:1fr}.step-card{min-height:auto}.cta{display:block;padding:31px 24px}.cta h2{font-size:25px}.cta-actions{margin-top:23px}.footer-top{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:6px}}
        @media(max-width:520px){.brand-mark{width:37px;height:37px;font-size:17px}.brand-title{max-width:145px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav-actions .btn-primary{display:none}.hero-actions .btn{width:100%}.screen-art{height:185px}.simulator-window{transform:none}.screen-label strong{font-size:21px}.info-panel,.device-card{padding:23px}.footer-top{grid-template-columns:1fr;gap:25px}.footer-brand{grid-column:auto}}

/* roulang page: category3 */
:root{
            --ink:#111715;--ink-soft:#18211e;--panel:#202c27;--panel-light:#26352f;
            --paper:#f0f3ee;--paper-deep:#dce5dd;--lime:#c8f36a;--lime-dark:#9cc83e;
            --orange:#f28b5d;--coral:#ed6f62;--text:#eef4ed;--muted:#a9b9ae;
            --dark-text:#1d2923;--dark-muted:#66756c;--line:rgba(199,231,204,.16);
            --line-dark:#cbd8ce;--radius:16px;--radius-sm:11px;
            --shadow:0 18px 50px rgba(4,13,9,.18);--container:1240px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;background:var(--paper);color:var(--dark-text);font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;line-height:1.7;-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{background:var(--lime);color:var(--ink);font-size:13px;font-weight:800}
        .notice-inner{min-height:34px;display:flex;align-items:center;justify-content:space-between}
        .notice a{text-decoration:underline;text-underline-offset:3px}
        .site-header{background:var(--ink);color:var(--text);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
        .nav-wrap{min-height:78px;display:flex;align-items:center;gap:34px}
        .brand{display:flex;align-items:center;gap:12px;min-width:244px}
        .brand-mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--ink);background:var(--lime);font-size:20px;font-weight:950;letter-spacing:-2px}
        .brand-copy{display:grid;gap:1px;line-height:1.2}
        .brand-title{font-size:16px;font-weight:900;letter-spacing:.01em}
        .brand-subtitle{color:var(--muted);font-size:11px}
        .main-nav{display:flex;align-items:center;gap:5px;flex:1}
        .main-nav a{color:#c2d0c5;padding:10px 13px;border-radius:9px;font-size:14px;white-space:nowrap;transition:.2s ease}
        .main-nav a:hover,.main-nav a.active{color:var(--lime);background:rgba(200,243,106,.08)}
        .nav-actions{display:flex;align-items:center;gap:10px}
        .menu-toggle{display:none;background:transparent;color:var(--text);border:1px solid var(--line);border-radius:9px;padding:9px 11px}
        .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border:1px solid transparent;border-radius:9px;font-size:14px;font-weight:800;transition:transform .2s ease,background .2s ease,border .2s ease}
        .btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--lime);color:var(--ink)}
        .btn-primary:hover{background:#d9ff8d}.btn-outline{border-color:rgba(200,243,106,.45);color:var(--lime);background:transparent}
        .btn-outline:hover{border-color:var(--lime);background:rgba(200,243,106,.08)}
        .hero{color:var(--text);background:var(--ink);padding:70px 0 76px;position:relative;overflow:hidden}
        .hero:before{content:"";position:absolute;inset:0;opacity:.22;pointer-events:none;background-image:linear-gradient(rgba(200,243,106,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(200,243,106,.1) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(90deg,#000,transparent 85%)}
        .hero-grid{position:relative;display:grid;grid-template-columns:1fr .8fr;gap:70px;align-items:center}
        .eyebrow,.section-kicker{color:var(--lime);font-size:12px;font-weight:900;letter-spacing:.14em;margin-bottom:15px}
        .hero h1{max-width:700px;margin:0 0 21px;font-size:clamp(35px,5vw,60px);line-height:1.13;letter-spacing:-.055em}
        .hero-lead{max-width:670px;color:#b8c8bc;font-size:17px;margin:0 0 28px}
        .hero-actions{display:flex;flex-wrap:wrap;gap:12px}.hero-note{margin-top:21px;color:#819187;font-size:13px}
        .signal-board{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:25px;box-shadow:var(--shadow);transform:rotate(2deg)}
        .signal-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line);color:var(--muted);font-size:12px}
        .signal-dot{width:9px;height:9px;border-radius:50%;background:var(--lime);display:inline-block;margin-right:7px}
        .signal-screen{margin:22px 0;background:#101714;border-radius:13px;padding:23px;min-height:205px}
        .signal-screen h2{font-size:22px;line-height:1.3;margin:0 0 18px;color:var(--text)}
        .signal-lines{display:grid;gap:12px}.signal-line{height:9px;border-radius:20px;background:#33443b}.signal-line.short{width:58%}.signal-line.green{background:var(--lime);width:72%}
        .signal-bottom{display:flex;gap:9px;flex-wrap:wrap}.meta-chip{border:1px solid var(--line);border-radius:7px;color:var(--muted);font-size:12px;padding:5px 9px}
        .section{padding:86px 0}.section.alt{background:var(--paper-deep)}
        .section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:32px}
        .section-head h2{margin:0;font-size:clamp(27px,3vw,40px);line-height:1.2;letter-spacing:-.04em}
        .section-head p{color:var(--dark-muted);margin:0;max-width:570px}
        .breadcrumb{padding:18px 0 0;color:var(--dark-muted);font-size:13px}.breadcrumb a{color:#52645a}.breadcrumb span{margin:0 8px;color:#9aa89e}
        .download-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:22px;align-items:stretch}
        .device-card{background:var(--ink);border-radius:var(--radius);padding:28px;color:var(--text);min-height:310px;position:relative;overflow:hidden}
        .device-card:after{content:"APP";position:absolute;right:-5px;bottom:-35px;font-size:130px;font-weight:950;color:rgba(200,243,106,.1)}
        .device-label{color:var(--lime);font-size:12px;font-weight:900;letter-spacing:.1em}.device-card h3{font-size:26px;margin:18px 0 9px;position:relative;z-index:1}.device-card p{color:var(--muted);max-width:280px;position:relative;z-index:1}
        .device-ui{position:absolute;right:28px;top:35px;width:116px;height:205px;border:5px solid #6c7d72;border-radius:18px;background:#26352f;transform:rotate(7deg);padding:18px 10px;z-index:1}
        .device-ui:before{content:"";display:block;width:36px;height:5px;border-radius:10px;background:#8d9e91;margin:-9px auto 18px}.ui-block{height:43px;background:var(--lime);border-radius:7px;margin-bottom:10px}.ui-line{height:7px;background:#809187;border-radius:8px;margin:8px 0}
        .download-panel{background:#fff;border:1px solid var(--line-dark);border-radius:var(--radius);padding:30px;display:flex;flex-direction:column;justify-content:center}
        .download-panel h3{margin:0 0 10px;font-size:27px}.download-panel p{color:var(--dark-muted);margin:0 0 20px}.download-details{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.download-panel .btn{align-self:flex-start}
        .info-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:22px}.feature-panel{background:var(--ink-soft);color:var(--text);border-radius:var(--radius);padding:30px}.feature-panel h3{font-size:25px;margin:0 0 12px}.feature-panel p{color:var(--muted);margin:0 0 24px}
        .feature-list{display:grid;gap:0}.feature-list div{display:flex;gap:15px;padding:16px 0;border-top:1px solid var(--line)}.feature-list b{color:var(--lime);font-size:18px}.feature-list strong{display:block}.feature-list small{color:var(--muted)}
        .news-panel{background:#fff;border:1px solid var(--line-dark);border-radius:var(--radius);padding:26px}.news-panel h3{margin:0 0 17px;font-size:21px}.news-item{display:flex;gap:15px;padding:16px 0;border-bottom:1px solid var(--line-dark)}.news-item:last-child{border-bottom:0}.news-date{color:var(--dark-muted);font:12px monospace;min-width:76px;padding-top:3px}.news-item strong{font-size:15px;line-height:1.45}.news-item small{display:block;color:var(--dark-muted);margin-top:4px}
        .quick-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}.quick-link{padding:18px;background:var(--paper);border:1px solid var(--line-dark);border-radius:12px;transition:.2s}.quick-link:hover{border-color:var(--lime-dark);transform:translateY(-3px)}.quick-link strong{display:block;margin-bottom:4px}.quick-link span{font-size:13px;color:var(--dark-muted)}
        .faq{max-width:900px;margin:0 auto}.faq details{background:#fff;border:1px solid var(--line-dark);border-radius:12px;margin-bottom:11px;overflow:hidden}.faq summary{list-style:none;padding:19px 22px;font-weight:800;cursor:pointer;position:relative;padding-right:50px}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";position:absolute;right:21px;color:#718077;font-size:22px;top:14px}.faq details[open] summary{color:#466326;background:#f7faef;border-left:4px solid var(--lime-dark)}.faq details[open] summary:after{content:"−"}.faq-answer{padding:0 23px 20px;color:var(--dark-muted);font-size:14px}
        .cta{background:var(--lime);padding:54px 0}.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}.cta h2{margin:0 0 7px;font-size:32px;letter-spacing:-.04em}.cta p{margin:0;color:#455238}.cta .btn{background:var(--ink);color:var(--lime)}
        .site-footer{background:var(--ink);color:var(--text);padding-top:55px}.footer-top{display:grid;grid-template-columns:1.5fr .7fr 1fr;gap:50px;padding-bottom:42px}.footer-brand .brand{margin-bottom:17px}.footer-brand p{color:var(--muted);max-width:360px;margin:0;font-size:14px}.footer-title{font-size:14px;margin:4px 0 15px;color:var(--lime)}.footer-links{display:grid;gap:8px;color:var(--muted);font-size:14px}.footer-links a:hover{color:var(--lime)}.footer-bottom{border-top:1px solid var(--line);padding:20px 0;display:flex;justify-content:space-between;gap:20px;color:#819187;font-size:12px}
        :focus-visible{outline:3px solid var(--lime);outline-offset:3px}
        @media(max-width:992px){.nav-wrap{gap:15px}.brand{min-width:220px}.main-nav a{padding:9px 8px;font-size:13px}.nav-actions .btn-outline{display:none}.hero-grid,.download-layout,.info-grid{grid-template-columns:1fr}.signal-board{max-width:600px;transform:none}.footer-top{grid-template-columns:1fr 1fr}}
        @media(max-width:768px){.container{width:min(var(--container),calc(100% - 32px))}.notice{display:none}.nav-wrap{min-height:68px;position:relative}.main-nav{display:none;position:absolute;left:0;right:0;top:68px;background:var(--ink);padding:12px 16px;flex-direction:column;align-items:stretch;border-top:1px solid var(--line);box-shadow:var(--shadow)}.main-nav.open{display:flex}.main-nav a{padding:13px 12px}.menu-toggle{display:block}.nav-actions{margin-left:auto}.brand{min-width:0}.brand-title{font-size:14px}.brand-subtitle{font-size:10px}.hero{padding:52px 0 58px}.hero h1{font-size:39px}.section{padding:62px 0}.section-head{display:block}.section-head p{margin-top:13px}.quick-nav{grid-template-columns:1fr}.device-ui{right:22px}.footer-top{grid-template-columns:1fr;gap:28px}.footer-bottom{display:grid;gap:8px}.cta-inner{display:block}.cta .btn{margin-top:22px}}
        @media(max-width:520px){.hero h1{font-size:34px}.hero-lead{font-size:15px}.hero-actions .btn,.download-panel .btn{width:100%}.signal-board{padding:17px}.signal-screen{padding:18px;min-height:180px}.device-card{min-height:280px;padding:23px}.device-ui{width:96px;height:175px;right:17px}.download-panel{padding:23px}.section-head h2{font-size:29px}.footer-brand .brand{min-width:0}}

/* roulang page: category2 */
:root{
            --ink:#111715;
            --ink-soft:#18211e;
            --panel:#202c27;
            --panel-light:#26352f;
            --paper:#f0f3ee;
            --paper-deep:#dce5dd;
            --lime:#c8f36a;
            --lime-dark:#9cc83e;
            --orange:#f28b5d;
            --coral:#ed6f62;
            --text:#eef4ed;
            --muted:#a9b9ae;
            --dark-text:#1d2923;
            --dark-muted:#66756c;
            --line:rgba(199,231,204,.16);
            --line-dark:#cbd8ce;
            --radius:16px;
            --radius-sm:11px;
            --shadow:0 18px 50px rgba(4,13,9,.18);
            --container:1240px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;background:var(--paper);color:var(--dark-text);font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;line-height:1.7;-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}
        .site-header{position:sticky;top:0;z-index:20;background:var(--ink);color:var(--text);border-bottom:1px solid var(--line)}
        .nav-wrap{min-height:78px;display:flex;align-items:center;gap:28px}
        .brand{display:flex;align-items:center;gap:12px;min-width:244px}
        .brand-mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--ink);background:var(--lime);font-size:20px;font-weight:950;letter-spacing:-2px}
        .brand-copy{display:grid;gap:1px;line-height:1.2}
        .brand-title{font-size:16px;font-weight:900}
        .brand-subtitle{font-size:11px;color:var(--muted)}
        .main-nav{display:flex;align-items:center;gap:5px;flex:1}
        .main-nav a{color:#c2d0c5;padding:10px 13px;border-radius:9px;font-size:14px;white-space:nowrap;transition:.2s ease}
        .main-nav a:hover,.main-nav a.active{color:var(--lime);background:rgba(200,243,106,.08)}
        .nav-actions{display:flex;align-items:center;gap:10px}
        .menu-toggle{display:none;background:transparent;color:var(--text);border:1px solid var(--line);border-radius:9px;padding:9px 11px}
        .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border:1px solid transparent;border-radius:9px;font-size:14px;font-weight:800;transition:transform .2s ease,background .2s ease,border .2s ease}
        .btn:hover{transform:translateY(-2px)}
        .btn-primary{background:var(--lime);color:var(--ink)}
        .btn-primary:hover{background:#d9ff8d}
        .btn-outline{border-color:rgba(200,243,106,.45);color:var(--lime);background:transparent}
        .btn-outline:hover{border-color:var(--lime);background:rgba(200,243,106,.08)}
        .notice{background:#1a2520;color:#aec0b2;font-size:12px}
        .notice .container{min-height:34px;display:flex;align-items:center;gap:10px}
        .notice strong{color:var(--lime);font-size:11px;letter-spacing:.08em}
        .hero{position:relative;overflow:hidden;background:var(--ink);color:var(--text);padding:78px 0 86px}
        .hero:before{content:"";position:absolute;inset:0;opacity:.2;background-image:linear-gradient(rgba(200,243,106,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(200,243,106,.1) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(90deg,#000,transparent 85%)}
        .hero-grid{position:relative;display:grid;grid-template-columns:1fr .92fr;gap:70px;align-items:center}
        .eyebrow,.section-kicker{color:var(--lime);font-size:12px;font-weight:900;letter-spacing:.14em;margin-bottom:15px}
        h1{font-size:clamp(36px,5vw,64px);line-height:1.12;letter-spacing:-.055em;margin:0 0 22px;max-width:680px}
        .hero-lead{max-width:650px;color:#b8c8bc;font-size:17px;margin:0 0 28px}
        .hero-actions{display:flex;flex-wrap:wrap;gap:12px}
        .hero-note{margin-top:22px;color:#819187;font-size:13px}
        .hero-art{min-height:350px;position:relative;display:grid;place-items:center}
        .arc{width:310px;height:310px;border-radius:50%;border:1px solid rgba(200,243,106,.4);position:absolute}
        .arc:before,.arc:after{content:"";position:absolute;border:1px solid rgba(242,139,93,.4);border-radius:50%}
        .arc:before{inset:28px}.arc:after{inset:68px}
        .game-console{position:relative;width:min(430px,100%);padding:18px;background:#26352f;border:1px solid rgba(200,243,106,.34);border-radius:18px;box-shadow:var(--shadow);transform:rotate(-3deg)}
        .console-top{display:flex;justify-content:space-between;align-items:center;color:#b8c8bc;font-size:11px;margin-bottom:13px}
        .status-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);display:inline-block;margin-right:5px}
        .screen{height:220px;border-radius:11px;overflow:hidden;position:relative;background:radial-gradient(circle at 70% 25%,#c87751 0 7%,transparent 8%),linear-gradient(135deg,#19352b,#536d48 45%,#bb654d 46%,#25332a 76%)}
        .screen:before{content:"PG";position:absolute;right:24px;top:14px;font-weight:950;font-size:120px;line-height:1;color:rgba(238,244,237,.17)}
        .screen-label{position:absolute;left:18px;bottom:16px;color:#fff;font-weight:800;font-size:18px}
        .console-bar{display:flex;justify-content:space-between;color:#b8c8bc;font-size:12px;margin-top:13px}
        .section{padding:88px 0}
        .section.alt{background:var(--paper-deep)}
        .section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:32px}
        .section-head h2{margin:0;font-size:clamp(28px,3vw,42px);line-height:1.2;letter-spacing:-.04em}
        .section-head p{max-width:520px;color:var(--dark-muted);margin:0}
        .crumbs{padding:22px 0 0;color:var(--dark-muted);font-size:13px}
        .crumbs a{color:#4f6859}
        .feature-layout{display:grid;grid-template-columns:1.3fr .7fr;gap:18px}
        .feature-card{min-height:390px;border-radius:var(--radius);padding:34px;position:relative;overflow:hidden;background:linear-gradient(145deg,#355b45,#192921 58%,#a75b47);color:#fff;display:flex;align-items:end;box-shadow:var(--shadow)}
        .feature-card:before{content:"PG";position:absolute;right:25px;top:15px;font-size:190px;font-weight:950;line-height:1;color:rgba(200,243,106,.13)}
        .feature-content{position:relative;max-width:460px}
        .feature-content h3{font-size:32px;line-height:1.2;margin:16px 0 10px}
        .feature-content p{color:#d7e2d7;margin:0 0 20px}
        .side-games{display:grid;gap:18px}
        .mini-game{min-height:186px;padding:24px;border-radius:var(--radius);background:var(--ink-soft);color:var(--text);position:relative;overflow:hidden;border:1px solid var(--line);transition:.2s}
        .mini-game:hover{transform:translateY(-4px);border-color:rgba(200,243,106,.48)}
        .mini-game:after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-32px;top:-35px;background:rgba(242,139,93,.18)}
        .mini-game h3{font-size:20px;margin:15px 0 5px;position:relative;z-index:1}
        .mini-game p{color:var(--muted);font-size:13px;margin:0;position:relative;z-index:1}
        .tag{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border-radius:5px;background:var(--lime);color:var(--ink);font-size:11px;font-weight:900}
        .tag.orange{background:var(--orange)}
        .tag.dark{background:#33453c;color:#d7e8d6}
        .filter-bar{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:25px}
        .filter{padding:9px 15px;border-radius:30px;border:1px solid var(--line-dark);background:rgba(255,255,255,.35);color:var(--dark-muted);font-size:13px;transition:.2s}
        .filter:hover,.filter.active{background:var(--ink-soft);border-color:var(--ink-soft);color:var(--lime)}
        .game-wall{display:grid;grid-template-columns:1.15fr .85fr .85fr;gap:16px}
        .wall-card{min-height:230px;border-radius:var(--radius);padding:24px;display:flex;align-items:end;position:relative;overflow:hidden;color:#fff;background:#2e493a;border:1px solid rgba(29,41,35,.15);transition:.22s}
        .wall-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
        .wall-card:nth-child(2){background:#4d3c35}.wall-card:nth-child(3){background:#344d55}.wall-card:nth-child(4){background:#5a4434}.wall-card:nth-child(5){background:#3c4b38}
        .wall-card:before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(6,12,9,.8))}
        .wall-info{position:relative;z-index:1}
        .wall-info h3{font-size:20px;margin:10px 0 4px}
        .wall-info p{font-size:12px;color:#d4dfd5;margin:0}
        .download-panel{background:var(--ink-soft);color:var(--text);border-radius:var(--radius);padding:38px;display:grid;grid-template-columns:.75fr 1.25fr;gap:45px;align-items:center;box-shadow:var(--shadow)}
        .device{height:270px;width:175px;border:7px solid #43564a;border-radius:27px;margin:auto;position:relative;background:linear-gradient(155deg,#536f4c,#26362d 50%,#b86a4c);box-shadow:0 14px 0 rgba(0,0,0,.16)}
        .device:before{content:"PG";position:absolute;right:15px;top:34px;color:rgba(238,244,237,.25);font-weight:950;font-size:72px}
        .device:after{content:"模拟器界面";position:absolute;bottom:22px;left:18px;color:#fff;font-size:12px;font-weight:800}
        .download-panel h2{font-size:32px;margin:0 0 12px;line-height:1.25}
        .download-panel p{color:var(--muted);margin:0 0 20px}
        .download-points{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 25px}
        .meta-chip{border:1px solid var(--line);border-radius:7px;padding:6px 10px;color:#c8d6ca;font-size:12px}
        .info-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:22px}
        .news-card,.guide-card{background:#fff;border:1px solid var(--line-dark);border-radius:var(--radius);padding:28px}
        .news-card h3,.guide-card h3{font-size:23px;margin:0 0 18px}
        .news-item{display:flex;gap:18px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line-dark)}
        .news-item:last-child{border-bottom:0}
        .news-date{min-width:70px;color:var(--dark-muted);font-size:12px}
        .news-item strong{display:block;font-size:15px;margin-bottom:4px}
        .news-item p{margin:0;color:var(--dark-muted);font-size:13px}
        .guide-card{background:#e5ece5}
        .guide-card ul{padding:0;margin:0;list-style:none}
        .guide-card li{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line-dark);font-size:14px}
        .guide-card li:last-child{border-bottom:0}
        .guide-card li span{color:var(--lime-dark);font-weight:900}
        .faq-list{max-width:900px;margin:0 auto}
        .faq-item{border-top:1px solid var(--line-dark)}
        .faq-item:last-child{border-bottom:1px solid var(--line-dark)}
        .faq-question{width:100%;display:flex;justify-content:space-between;align-items:center;padding:20px 4px;background:transparent;border:0;text-align:left;color:var(--dark-text);font-weight:800;font-size:16px}
        .faq-question span{color:var(--lime-dark);font-size:24px;transition:.2s}
        .faq-answer{display:none;padding:0 42px 20px 4px;color:var(--dark-muted);font-size:14px}
        .faq-item.open .faq-answer{display:block}
        .faq-item.open .faq-question span{transform:rotate(45deg)}
        .cta{background:var(--lime);padding:55px 0}
        .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
        .cta h2{margin:0;font-size:clamp(27px,3vw,40px);line-height:1.2}
        .cta p{margin:8px 0 0;color:#47583f}
        .cta .btn-primary{background:var(--ink);color:var(--lime)}
        .site-footer{background:var(--ink);color:var(--text)}
        .footer-top{padding:58px 0 42px;display:grid;grid-template-columns:1.6fr .7fr 1fr;gap:60px}
        .footer-brand p{color:var(--muted);max-width:360px;font-size:13px;margin:18px 0 0}
        .footer-title{font-size:14px;margin:0 0 15px}
        .footer-links{display:grid;gap:8px;color:var(--muted);font-size:13px}
        .footer-links a:hover{color:var(--lime)}
        .footer-bottom{border-top:1px solid var(--line);padding:19px 0;display:flex;justify-content:space-between;gap:20px;color:#819187;font-size:12px}
        :focus-visible{outline:3px solid var(--orange);outline-offset:3px}
        @media(max-width:1100px){
            .nav-wrap{gap:15px}.brand{min-width:215px}.main-nav a{padding:9px 8px;font-size:13px}
            .hero-grid{gap:35px}.game-wall{grid-template-columns:1fr 1fr}
        }
        @media(max-width:820px){
            .container{width:min(var(--container),calc(100% - 32px))}
            .nav-wrap{min-height:70px}.main-nav{display:none;position:absolute;left:16px;right:16px;top:68px;padding:10px;background:var(--ink-soft);border:1px solid var(--line);border-radius:12px;flex-direction:column;align-items:stretch}
            .main-nav.show{display:flex}.main-nav a{padding:12px}.nav-actions .btn{display:none}.menu-toggle{display:block}
            .hero{padding:58px 0 64px}.hero-grid,.feature-layout,.download-panel,.info-layout{grid-template-columns:1fr}
            .hero-art{min-height:300px}.section{padding:65px 0}.section-head{display:block}.section-head p{margin-top:12px}
            .download-panel{padding:30px;gap:25px}.device{transform:scale(.88)}
            .footer-top{grid-template-columns:1fr 1fr;gap:35px}.footer-brand{grid-column:1/-1}
            .cta-inner{display:block}.cta .btn{margin-top:22px}
        }
        @media(max-width:520px){
            .container{width:calc(100% - 28px)}.brand{min-width:0}.brand-title{font-size:14px}.brand-subtitle{font-size:10px}
            .notice{display:none}.hero h1{font-size:38px}.hero-lead{font-size:15px}.hero-art{min-height:260px}
            .game-console{transform:none}.screen{height:175px}.arc{width:245px;height:245px}
            .feature-card{min-height:340px;padding:24px}.feature-content h3{font-size:26px}
            .game-wall{grid-template-columns:1fr}.wall-card{min-height:190px}
            .news-card,.guide-card,.download-panel{padding:22px}.news-item{display:block}.news-date{display:block;margin-bottom:5px}
            .footer-top{grid-template-columns:1fr;gap:28px}.footer-brand{grid-column:auto}.footer-bottom{display:grid;gap:6px}
            .hero-actions .btn,.download-panel .btn{width:100%}
        }

/* roulang page: category2 */
:root {
            --ink:#111715; --ink-soft:#18211e; --panel:#202c27; --panel-light:#26352f;
            --paper:#f0f3ee; --paper-deep:#dce5dd; --lime:#c8f36a; --lime-dark:#9cc83e;
            --orange:#f28b5d; --coral:#ed6f62; --text:#eef4ed; --muted:#a9b9ae;
            --dark-text:#1d2923; --dark-muted:#66756c; --line:rgba(199,231,204,.16);
            --line-dark:#cbd8ce; --radius:16px; --radius-sm:11px;
            --shadow:0 18px 50px rgba(4,13,9,.18); --container:1240px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;color:var(--dark-text);background:var(--paper);font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;line-height:1.7;-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}
        .site-header{background:var(--ink);color:var(--text);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
        .nav-wrap{min-height:78px;display:flex;align-items:center;gap:30px}
        .brand{display:flex;align-items:center;gap:12px;min-width:244px}
        .brand-mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--ink);background:var(--lime);font-size:20px;font-weight:950;letter-spacing:-2px}
        .brand-copy{display:grid;gap:1px;line-height:1.2}
        .brand-title{font-size:16px;font-weight:900;letter-spacing:.01em}
        .brand-subtitle{color:var(--muted);font-size:11px}
        .main-nav{display:flex;align-items:center;gap:5px;flex:1}
        .main-nav a{color:#c2d0c5;padding:10px 13px;border-radius:9px;font-size:14px;white-space:nowrap;transition:.2s ease}
        .main-nav a:hover,.main-nav a.active{color:var(--lime);background:rgba(200,243,106,.08)}
        .nav-actions{display:flex;align-items:center;gap:10px}
        .menu-toggle{display:none;background:transparent;color:var(--text);border:1px solid var(--line);border-radius:9px;padding:9px 11px}
        .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border:1px solid transparent;border-radius:9px;font-size:14px;font-weight:800;transition:transform .2s ease,background .2s ease,border .2s ease}
        .btn:hover{transform:translateY(-2px)}
        .btn:focus-visible,.main-nav a:focus-visible,.faq-question:focus-visible{outline:3px solid rgba(200,243,106,.55);outline-offset:3px}
        .btn-primary{background:var(--lime);color:var(--ink)}
        .btn-primary:hover{background:#d9ff8d}
        .btn-outline{border-color:rgba(200,243,106,.45);color:var(--lime);background:transparent}
        .btn-outline:hover{border-color:var(--lime);background:rgba(200,243,106,.08)}
        .hero{color:var(--text);background:var(--ink);padding:76px 0 82px;position:relative;overflow:hidden}
        .hero:before{content:"";position:absolute;inset:0;opacity:.2;pointer-events:none;background-image:linear-gradient(rgba(200,243,106,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(200,243,106,.1) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(90deg,#000,transparent 88%)}
        .hero-inner{position:relative;max-width:950px}
        .eyebrow,.section-kicker{color:var(--lime);text-transform:uppercase;font-size:12px;font-weight:900;letter-spacing:.14em;margin-bottom:15px}
        .hero h1{max-width:860px;margin:0 0 20px;font-size:clamp(36px,5vw,66px);line-height:1.12;letter-spacing:-.055em}
        .hero-lead{max-width:760px;color:#b8c8bc;font-size:17px;margin:0 0 28px}
        .hero-actions{display:flex;flex-wrap:wrap;gap:12px}
        .breadcrumb{padding:18px 0 0;color:var(--dark-muted);font-size:13px}
        .breadcrumb a{color:#4d6657}.breadcrumb span{padding:0 8px;color:#9aa89d}
        .section{padding:84px 0}
        .section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:32px}
        .section-head h2{margin:0;font-size:clamp(27px,3vw,40px);line-height:1.2;letter-spacing:-.04em}
        .section-head p{color:var(--dark-muted);margin:0;max-width:540px}
        .visual-board{display:grid;grid-template-columns:1.45fr .8fr .8fr;grid-template-rows:190px 190px;gap:14px}
        .game-tile{border-radius:var(--radius);padding:22px;position:relative;overflow:hidden;color:#fff;background:#294236;border:1px solid rgba(37,71,54,.3);transition:.25s ease}
        .game-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
        .game-tile.large{grid-row:span 2;background:linear-gradient(145deg,#4a7353,#17251e 70%)}
        .game-tile.orange{background:linear-gradient(145deg,#874f3c,#28231d)}
        .game-tile.lime{background:linear-gradient(145deg,#667f35,#202d22)}
        .game-tile:after{content:"PG";position:absolute;right:15px;top:10px;color:rgba(255,255,255,.12);font-size:76px;font-weight:950;line-height:1}
        .game-tile.large:after{font-size:180px;right:25px;top:45px}
        .tile-content{position:absolute;left:22px;right:18px;bottom:20px;z-index:1}
        .tile-content h3{margin:9px 0 4px;font-size:21px}
        .tile-content p{margin:0;color:rgba(255,255,255,.72);font-size:13px}
        .tag{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border-radius:5px;background:var(--lime);color:var(--ink);font-size:11px;font-weight:900}
        .tag.orange{background:var(--orange)}
        .filter-bar{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:24px}
        .filter{border:1px solid var(--line-dark);background:#fff;color:var(--dark-muted);border-radius:999px;padding:8px 15px;font-size:13px;transition:.2s}
        .filter:hover,.filter.active{background:var(--ink);border-color:var(--ink);color:var(--lime)}
        .experience-panel{display:grid;grid-template-columns:.9fr 1.1fr;gap:42px;background:var(--ink-soft);border-radius:var(--radius);padding:34px;color:var(--text)}
        .experience-panel h2{margin:0 0 13px;font-size:31px;line-height:1.25}
        .experience-panel p{color:var(--muted);margin:0}
        .info-list{display:grid;gap:0;margin-top:25px}
        .info-item{display:flex;gap:15px;padding:17px 0;border-bottom:1px solid var(--line)}
        .info-item:last-child{border-bottom:0}
        .info-num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--lime);color:var(--ink);font-weight:900;font-size:13px;flex:none}
        .info-item strong{display:block;font-size:15px}.info-item span{display:block;color:var(--muted);font-size:13px}
        .device-screen{min-height:300px;border:8px solid #0b100e;border-radius:20px;background:linear-gradient(135deg,#354d3d,#18251f 58%,#814d3c);position:relative;overflow:hidden;box-shadow:0 12px 0 rgba(0,0,0,.2)}
        .device-screen:before{content:"PG SIMULATOR";position:absolute;top:18px;left:20px;color:var(--lime);font-size:12px;font-weight:900;letter-spacing:.12em}
        .screen-orbit{position:absolute;width:240px;height:240px;border:1px solid rgba(200,243,106,.42);border-radius:50%;right:13%;top:22%;transform:rotate(25deg)}
        .screen-orbit:after{content:"";position:absolute;width:72px;height:72px;border-radius:16px;background:var(--lime);left:67px;top:79px;box-shadow:30px -46px 0 rgba(242,139,93,.75),-47px 42px 0 rgba(239,244,237,.22)}
        .screen-label{position:absolute;bottom:20px;left:20px;color:#fff;font-size:14px}
        .category-band{background:var(--paper-deep)}
        .category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
        .category-card{background:#fff;border:1px solid var(--line-dark);border-radius:var(--radius);padding:25px;min-height:180px;transition:.2s}
        .category-card:hover{border-color:var(--lime-dark);transform:translateY(-3px);box-shadow:0 12px 26px rgba(23,42,31,.08)}
        .category-card h3{margin:16px 0 8px;font-size:19px}.category-card p{color:var(--dark-muted);font-size:14px;margin:0}
        .category-icon{width:38px;height:38px;border-radius:10px;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-weight:900}
        .notice-strip{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
        .notice-card{border-radius:var(--radius);padding:27px;background:#fff;border:1px solid var(--line-dark)}
        .notice-card.dark{background:var(--panel);color:var(--text);border-color:transparent}
        .notice-card h3{margin:0 0 9px;font-size:21px}.notice-card p{margin:0 0 18px;color:var(--dark-muted);font-size:14px}.notice-card.dark p{color:var(--muted)}
        .faq-list{max-width:900px;border-top:1px solid var(--line-dark)}
        .faq-item{border-bottom:1px solid var(--line-dark)}
        .faq-question{width:100%;border:0;background:transparent;text-align:left;padding:20px 4px;display:flex;justify-content:space-between;gap:18px;color:var(--dark-text);font-weight:800}
        .faq-question span:last-child{color:var(--lime-dark);font-size:22px;line-height:1}
        .faq-answer{display:none;padding:0 38px 20px 4px;color:var(--dark-muted);font-size:14px}
        .faq-item.open .faq-answer{display:block}.faq-item.open .faq-question{color:#587c39}
        .cta{background:var(--lime);padding:54px 0}.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:28px}.cta h2{margin:0 0 7px;font-size:32px;letter-spacing:-.04em}.cta p{margin:0;color:#43542e}
        .cta .btn-primary{background:var(--ink);color:var(--lime)}.cta .btn-primary:hover{background:#273b2e}
        .site-footer{background:var(--ink);color:var(--text);padding:54px 0 20px}
        .footer-top{display:grid;grid-template-columns:1.5fr .7fr .9fr;gap:50px;padding-bottom:42px}
        .footer-brand p{color:var(--muted);max-width:360px;font-size:13px;margin:18px 0 0}
        .footer-title{font-size:14px;margin:4px 0 15px;color:var(--lime)}
        .footer-links{display:grid;gap:8px;color:var(--muted);font-size:13px}.footer-links a:hover{color:var(--lime)}
        .footer-bottom{border-top:1px solid var(--line);padding-top:19px;display:flex;justify-content:space-between;gap:20px;color:#819187;font-size:12px}
        @media(max-width:1050px){.main-nav a{padding:9px 8px;font-size:13px}.brand{min-width:215px}.nav-actions .btn-outline{display:none}}
        @media(max-width:800px){.container{width:min(var(--container),calc(100% - 34px))}.nav-wrap{min-height:70px;flex-wrap:wrap;gap:12px}.menu-toggle{display:block;margin-left:auto}.main-nav{order:3;display:none;overflow-x:auto;flex-basis:100%;padding-bottom:12px}.main-nav.show{display:flex}.nav-actions{margin-left:auto}.nav-actions .btn-primary{display:none}.hero{padding:54px 0 64px}.hero h1{font-size:clamp(35px,9vw,52px)}.visual-board{grid-template-columns:1fr 1fr;grid-template-rows:190px 160px}.game-tile.large{grid-row:span 1;grid-column:span 2}.experience-panel{grid-template-columns:1fr;padding:25px}.category-grid{grid-template-columns:1fr 1fr}.notice-strip{grid-template-columns:1fr}.footer-top{grid-template-columns:1fr 1fr;gap:30px}}
        @media(max-width:520px){.container{width:calc(100% - 28px)}.brand{min-width:0}.brand-title{font-size:14px}.brand-subtitle{font-size:10px}.brand-mark{width:38px;height:38px}.hero-actions .btn{width:100%}.section{padding:62px 0}.section-head{display:block}.section-head p{margin-top:12px}.visual-board{display:flex;flex-direction:column}.game-tile,.game-tile.large{min-height:170px}.category-grid{grid-template-columns:1fr}.device-screen{min-height:245px}.cta-inner{display:block}.cta .btn{width:100%;margin-top:22px}.footer-top{grid-template-columns:1fr}.footer-bottom{display:grid;gap:8px}}

/* roulang page: category3 */
:root{
            --ink:#111715;
            --ink-soft:#18211e;
            --panel:#202c27;
            --panel-light:#26352f;
            --paper:#f0f3ee;
            --paper-deep:#dce5dd;
            --lime:#c8f36a;
            --lime-dark:#9cc83e;
            --orange:#f28b5d;
            --coral:#ed6f62;
            --text:#eef4ed;
            --muted:#a9b9ae;
            --dark-text:#1d2923;
            --dark-muted:#66756c;
            --line:rgba(199,231,204,.16);
            --line-dark:#cbd8ce;
            --radius:16px;
            --radius-sm:11px;
            --shadow:0 18px 50px rgba(4,13,9,.18);
            --container:1240px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;background:var(--paper);color:var(--dark-text);font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;line-height:1.7;-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{background:#0d1210;color:#aebeaf;font-size:12px;border-bottom:1px solid var(--line)}
        .notice-inner{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:20px}
        .notice strong{color:var(--lime);font-weight:800;margin-right:8px}
        .notice a{text-decoration:underline;text-underline-offset:3px}
        .site-header{background:var(--ink);color:var(--text);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
        .nav-wrap{min-height:78px;display:flex;align-items:center;gap:34px}
        .brand{display:flex;align-items:center;gap:12px;min-width:244px}
        .brand-mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--ink);background:var(--lime);font-size:20px;font-weight:950;letter-spacing:-2px}
        .brand-copy{display:grid;gap:1px;line-height:1.2}
        .brand-title{font-size:16px;font-weight:900;letter-spacing:.01em}
        .brand-subtitle{color:var(--muted);font-size:11px}
        .main-nav{display:flex;align-items:center;gap:5px;flex:1}
        .main-nav a{color:#c2d0c5;padding:10px 13px;border-radius:9px;font-size:14px;white-space:nowrap;transition:.2s ease}
        .main-nav a:hover,.main-nav a.active{color:var(--lime);background:rgba(200,243,106,.08)}
        .nav-actions{display:flex;align-items:center;gap:10px}
        .menu-toggle{display:none;background:transparent;color:var(--text);border:1px solid var(--line);border-radius:9px;padding:9px 11px}
        .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border:1px solid transparent;border-radius:9px;font-size:14px;font-weight:800;transition:transform .2s ease,background .2s ease,border .2s ease}
        .btn:hover{transform:translateY(-2px)}
        .btn:focus-visible,.main-nav a:focus-visible,summary:focus-visible{outline:3px solid rgba(200,243,106,.65);outline-offset:3px}
        .btn-primary{background:var(--lime);color:var(--ink)}
        .btn-primary:hover{background:#d9ff8d}
        .btn-outline{border-color:rgba(200,243,106,.45);color:var(--lime);background:transparent}
        .btn-outline:hover{border-color:var(--lime);background:rgba(200,243,106,.08)}
        .hero{color:var(--text);background:var(--ink);padding:68px 0 74px;position:relative;overflow:hidden}
        .hero:before{content:"";position:absolute;inset:0;opacity:.2;pointer-events:none;background-image:linear-gradient(rgba(200,243,106,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(200,243,106,.1) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(90deg,#000,transparent 88%)}
        .breadcrumb{position:relative;color:#93a399;font-size:13px;margin-bottom:28px}
        .breadcrumb a{color:#c6d4c8}
        .breadcrumb span{margin:0 9px;color:#617067}
        .hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
        .eyebrow,.section-kicker{color:var(--lime);text-transform:uppercase;font-size:12px;font-weight:900;letter-spacing:.16em;margin-bottom:15px}
        .hero h1{max-width:700px;margin:0 0 20px;font-size:clamp(34px,4.5vw,58px);line-height:1.14;letter-spacing:-.055em}
        .hero-lead{max-width:650px;color:#b8c8bc;font-size:17px;margin:0 0 28px}
        .hero-actions{display:flex;flex-wrap:wrap;gap:12px}
        .hero-note{margin-top:22px;color:#829187;font-size:13px}
        .news-visual{min-height:330px;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow);transform:rotate(1deg)}
        .visual-bar{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 15px;color:#91a499;font-size:12px}
        .visual-dots{display:flex;gap:5px}
        .visual-dots i{width:7px;height:7px;border-radius:50%;background:var(--orange)}
        .visual-dots i:nth-child(2){background:var(--lime)}
        .visual-dots i:nth-child(3){background:#81958a}
        .visual-main{height:190px;border-radius:14px;background:linear-gradient(135deg,#395442,#18231e 58%,#a95c45);padding:23px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;position:relative;overflow:hidden}
        .visual-main:after{content:"PG";position:absolute;right:18px;bottom:-28px;color:rgba(200,243,106,.18);font-size:150px;font-weight:950;line-height:1}
        .visual-main strong{position:relative;z-index:1;font-size:25px;letter-spacing:-.04em}
        .visual-main small{position:relative;z-index:1;color:#d4e2d5}
        .visual-lines{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}
        .visual-line{height:49px;border:1px solid var(--line);border-radius:10px;padding:8px 11px;background:#19241f}
        .visual-line b{display:block;color:var(--lime);font-size:12px}
        .visual-line span{font-size:11px;color:#9daf9f}
        .section{padding:88px 0}
        .section.alt{background:#e6ede6}
        .section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:32px}
        .section-head h2{margin:0;font-size:clamp(27px,3vw,40px);line-height:1.2;letter-spacing:-.04em}
        .section-head p{color:var(--dark-muted);margin:0;max-width:540px}
        .download-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:stretch}
        .device-card{background:var(--ink-soft);border-radius:var(--radius);padding:28px;color:var(--text);min-height:320px;position:relative;overflow:hidden}
        .device-card:before{content:"APP";position:absolute;right:18px;top:8px;color:rgba(200,243,106,.1);font-size:112px;font-weight:950}
        .device-label{position:relative;color:var(--lime);font-size:12px;font-weight:900;letter-spacing:.12em}
        .device-screen{position:relative;width:210px;height:205px;margin:24px auto 0;border:7px solid #35453d;border-radius:26px;background:#0f1714;padding:14px;box-shadow:0 15px 30px rgba(0,0,0,.25)}
        .device-screen:before{content:"";display:block;width:44px;height:5px;border-radius:4px;background:#42554a;margin:0 auto 13px}
        .screen-cover{height:75px;border-radius:9px;background:linear-gradient(135deg,#a95843,#354e3b);display:grid;place-items:center;color:var(--lime);font-size:25px;font-weight:950}
        .screen-menu{display:grid;gap:7px;margin-top:12px}
        .screen-menu i{height:7px;border-radius:8px;background:#34463c}
        .screen-menu i:first-child{background:var(--lime);width:70%}
        .download-panel{background:#fff;border:1px solid var(--line-dark);border-radius:var(--radius);padding:34px}
        .download-panel h3{margin:0 0 12px;font-size:27px}
        .download-panel p{color:var(--dark-muted);margin:0 0 22px}
        .meta-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:25px}
        .meta-chip{border:1px solid var(--line-dark);background:#f5f8f4;border-radius:8px;padding:6px 10px;color:#52635a;font-size:12px}
        .meta-chip b{color:var(--dark-text);margin-right:4px}
        .download-actions{display:flex;flex-wrap:wrap;gap:11px}
        .download-tip{font-size:12px;color:var(--dark-muted);margin-top:16px}
        .content-layout{display:grid;grid-template-columns:1fr .74fr;gap:28px}
        .news-feature{background:var(--ink);color:var(--text);border-radius:var(--radius);padding:30px;min-height:290px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
        .news-feature:after{content:"资讯";position:absolute;right:22px;top:25px;font-size:74px;font-weight:950;color:rgba(200,243,106,.12)}
        .news-feature h3{position:relative;z-index:1;max-width:470px;font-size:27px;line-height:1.35;margin:18px 0 10px}
        .news-feature p{position:relative;z-index:1;max-width:470px;color:#aebeb2;font-size:14px}
        .news-list{background:#fff;border:1px solid var(--line-dark);border-radius:var(--radius);padding:8px 22px}
        .news-item{display:flex;gap:16px;align-items:flex-start;padding:19px 0;border-bottom:1px solid #e1e8e1}
        .news-item:last-child{border-bottom:0}
        .news-date{min-width:74px;color:var(--dark-muted);font-size:12px;padding-top:3px}
        .news-item h4{font-size:15px;line-height:1.45;margin:0 0 4px}
        .news-item p{color:var(--dark-muted);font-size:12px;margin:0}
        .news-item:hover h4{color:#668d20}
        .faq-wrap{max-width:900px;margin:0 auto}
        .faq-item{background:#fff;border:1px solid var(--line-dark);border-radius:12px;margin-bottom:12px;overflow:hidden}
        .faq-item summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:850;display:flex;justify-content:space-between;gap:20px}
        .faq-item summary::-webkit-details-marker{display:none}
        .faq-item summary:after{content:"＋";color:var(--lime-dark);font-size:21px;line-height:1}
        .faq-item[open] summary{background:#f3f8ee;color:#4f741c;border-left:4px solid var(--lime-dark)}
        .faq-item[open] summary:after{content:"−"}
        .faq-answer{padding:0 22px 20px;color:var(--dark-muted);font-size:14px}
        .cta{background:var(--panel);color:var(--text);padding:64px 0}
        .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
        .cta h2{margin:0 0 9px;font-size:32px;line-height:1.25}
        .cta p{color:#a9b9ae;margin:0;max-width:620px}
        .cta-actions{display:flex;gap:10px;flex-wrap:wrap}
        .site-footer{background:var(--ink);color:var(--text)}
        .footer-top{display:grid;grid-template-columns:1.6fr .7fr .9fr;gap:60px;padding:52px 0 42px}
        .footer-brand .brand{margin-bottom:17px}
        .footer-brand p{color:var(--muted);font-size:13px;max-width:370px;margin:0}
        .footer-title{font-size:14px;margin:4px 0 16px;color:#f2f7f0}
        .footer-links{display:grid;gap:9px;color:var(--muted);font-size:13px}
        .footer-links a:hover{color:var(--lime)}
        .footer-bottom{border-top:1px solid var(--line);min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#809187;font-size:12px}
        @media(max-width:1100px){
            .nav-wrap{gap:18px}.brand{min-width:220px}.main-nav a{padding:9px 8px;font-size:13px}
            .nav-actions .btn-outline{display:none}.hero-grid{gap:36px}
        }
        @media(max-width:820px){
            .container{width:min(var(--container),calc(100% - 34px))}
            .notice-inner{justify-content:center}.notice-inner span:last-child{display:none}
            .nav-wrap{min-height:70px;flex-wrap:wrap;gap:12px}.brand{min-width:0;flex:1}
            .brand-title{font-size:14px}.brand-subtitle{font-size:10px}
            .menu-toggle{display:block}.nav-actions{order:3}
            .main-nav{display:none;order:4;flex-basis:100%;overflow-x:auto;padding:4px 0 12px}
            .site-header.menu-open .main-nav{display:flex}
            .hero{padding:48px 0 58px}.hero-grid,.download-layout,.content-layout{grid-template-columns:1fr}
            .news-visual{max-width:620px;margin:auto;width:100%}
            .section{padding:62px 0}.section-head{display:block}.section-head p{margin-top:12px}
            .footer-top{grid-template-columns:1fr 1fr;gap:32px}.footer-brand{grid-column:1/-1}
            .cta-inner{display:block}.cta-actions{margin-top:24px}
        }
        @media(max-width:520px){
            .container{width:calc(100% - 28px)}
            .brand-mark{width:38px;height:38px;font-size:18px}.brand-title{font-size:13px}
            .hero h1{font-size:35px}.hero-lead{font-size:15px}
            .hero-actions,.download-actions{display:grid;grid-template-columns:1fr}.hero-actions .btn,.download-actions .btn{width:100%}
            .news-visual{padding:12px}.visual-main{height:175px}
            .download-panel,.device-card{padding:23px}.download-panel h3{font-size:23px}
            .news-item{display:block}.news-date{margin-bottom:5px}.footer-top{grid-template-columns:1fr;gap:26px}
            .footer-bottom{display:block;padding:18px 0;line-height:1.8}
        }

/* 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}