/* roulang page: index */
:root{
  --ink:#17221e;
  --ink-2:#26352e;
  --muted:#68766f;
  --paper:#f6f8f3;
  --paper-2:#edf2eb;
  --white:#fff;
  --lime:#c9f36a;
  --lime-dark:#99c93c;
  --orange:#e98d66;
  --line:#dbe4d9;
  --shadow:0 16px 45px rgba(20,43,31,.08);
  --shadow-sm:0 8px 24px rgba(20,43,31,.06);
  --radius:18px;
  --radius-lg:28px;
  --container:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper);line-height:1.7;font-size:16px}
a{color:inherit;text-decoration:none;transition:.25s ease}
a:hover{color:var(--lime-dark)}
img{display:block;max-width:100%}
button,input{font:inherit}
button{cursor:pointer;border:0}
.container{width:min(var(--container),calc(100% - 48px));margin:auto}
.section{padding:92px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:34px}
.section-kicker{display:inline-flex;align-items:center;gap:8px;color:#66851f;text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:800;margin-bottom:12px}
.section-kicker:before{content:"";width:24px;height:3px;border-radius:5px;background:var(--lime-dark)}
h1,h2,h3{line-height:1.2;letter-spacing:-.035em}
h1{font-size:clamp(42px,5vw,68px);font-weight:800}
h2{font-size:clamp(30px,3.5vw,44px);font-weight:800}
h3{font-size:21px}
.lead{color:var(--muted);font-size:18px;max-width:650px}
.small{font-size:13px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:12px;font-weight:750;border:1px solid transparent;gap:9px}
.btn-primary{background:var(--lime);color:var(--ink)}
.btn-primary:hover{background:#d8ff83;color:var(--ink);transform:translateY(-2px);box-shadow:0 8px 18px rgba(153,201,60,.2)}
.btn-secondary{background:transparent;border-color:#91a38f;color:var(--ink)}
.btn-secondary:hover{border-color:var(--ink);background:var(--white);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:var(--lime)}
.btn-dark:hover{background:var(--ink-2);color:var(--lime);transform:translateY(-2px)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.site-header{position:sticky;top:0;z-index:20;background:rgba(23,34,30,.96);color:#fff;border-bottom:1px solid rgba(255,255,255,.1)}
.navbar{height:78px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:flex;align-items:center;gap:12px;min-width:245px}
.brand-mark{width:38px;height:38px;display:grid;place-items:center;background:var(--lime);color:var(--ink);border-radius:11px;font-weight:900;font-size:20px}
.brand-text strong{display:block;font-size:16px;letter-spacing:-.02em}
.brand-text span{display:block;color:#aebdb3;font-size:11px;letter-spacing:.05em}
.nav-links{display:flex;align-items:center;gap:7px}
.nav-links a{padding:10px 13px;border-radius:9px;color:#cbd6ce;font-size:14px}
.nav-links a:hover,.nav-links a.active{background:rgba(201,243,106,.12);color:var(--lime)}
.nav-cta{white-space:nowrap}
.menu-toggle{display:none;background:transparent;color:#fff;font-size:26px;width:46px;height:46px}
.hero{background:var(--ink);color:#fff;padding:94px 0 100px;overflow:hidden;position:relative}
.hero:after{content:"";position:absolute;width:460px;height:460px;border:1px solid rgba(201,243,106,.18);border-radius:50%;right:-130px;top:-200px}
.hero-grid{display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:70px;position:relative;z-index:1}
.hero .section-kicker{color:var(--lime)}
.hero h1{max-width:720px;margin-bottom:24px}
.hero .lead{color:#b9c8bd;margin-bottom:31px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-note{display:flex;gap:25px;margin-top:34px;color:#95a79a;font-size:13px}
.hero-note b{display:block;color:#fff;font-size:17px}
.hero-visual{position:relative;min-height:370px}
.screen-card{position:absolute;background:#25352e;border:1px solid #405047;border-radius:22px;box-shadow:0 24px 55px rgba(0,0,0,.25)}
.screen-main{width:78%;right:0;top:18px;padding:23px}
.screen-top{display:flex;justify-content:space-between;color:#c9d5ca;font-size:12px;margin-bottom:24px}
.signal{display:flex;gap:5px;align-items:end;height:34px}
.signal i{display:block;width:7px;background:var(--lime);border-radius:4px}
.signal i:nth-child(1){height:10px}.signal i:nth-child(2){height:17px}.signal i:nth-child(3){height:25px}.signal i:nth-child(4){height:32px}
.data-line{height:9px;border-radius:8px;background:#3b4c42;margin:16px 0}
.data-line span{display:block;height:100%;width:68%;background:var(--lime);border-radius:8px}
.mini-list{display:grid;gap:12px;margin-top:25px}
.mini-list div{display:flex;justify-content:space-between;padding:13px;background:#1d2a25;border-radius:10px;color:#dce7dc;font-size:13px}
.mini-list b{color:var(--lime)}
.screen-float{width:42%;left:0;bottom:0;padding:18px;background:#f5f8ed;color:var(--ink)}
.screen-float .tag{margin-bottom:15px}
.tag{display:inline-flex;border-radius:30px;background:var(--lime);padding:4px 10px;color:var(--ink);font-size:11px;font-weight:800}
.tag.soft{background:#e8f0df;color:#66851f}
.quick{padding:24px 0;background:#fff;border-bottom:1px solid var(--line)}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.quick-item{display:flex;gap:15px;padding:10px 24px;border-right:1px solid var(--line)}
.quick-item:first-child{padding-left:0}.quick-item:last-child{border:0}
.quick-icon{width:40px;height:40px;flex:0 0 40px;border-radius:12px;background:var(--paper-2);display:grid;place-items:center;color:#6c8b20;font-weight:900}
.quick-item h3{font-size:16px;margin-bottom:2px}.quick-item p{font-size:12px;color:var(--muted)}
.flow{background:var(--paper-2)}
.flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.flow-item{position:relative;padding:25px;background:#fff;border-radius:var(--radius);border:1px solid var(--line)}
.flow-number{color:var(--lime-dark);font-size:14px;font-weight:900;letter-spacing:.12em;margin-bottom:36px}
.flow-item h3{margin-bottom:9px}.flow-item p{color:var(--muted);font-size:14px}
.news-layout{display:grid;grid-template-columns:1.45fr .55fr;gap:48px}
.news-list{border-top:1px solid var(--line)}
.news-row{display:grid;grid-template-columns:135px 1fr auto;gap:23px;align-items:start;padding:23px 0;border-bottom:1px solid var(--line)}
.news-date{font-size:13px;color:var(--muted);padding-top:3px}
.news-date b{display:block;color:var(--orange);font-size:12px;margin-bottom:3px}
.news-row h3{font-size:19px;margin:4px 0 6px}.news-row p{font-size:14px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.arrow{font-size:22px;color:#8ca17e;padding-top:7px}
.empty-state{padding:28px;border:1px dashed #a9b9a3;border-radius:14px;color:var(--muted);margin-top:18px}
.side-note{background:var(--ink);color:#fff;border-radius:var(--radius-lg);padding:30px;height:max-content}
.side-note h3{color:var(--lime);margin:13px 0}.side-note p{color:#b9c8bd;font-size:14px}.side-note ul{list-style:none;margin-top:20px}.side-note li{padding:11px 0;border-bottom:1px solid #3a4a41;color:#d9e3da;font-size:14px}
.data-section{background:#fff}
.data-strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.data-cell{padding:27px;border-right:1px solid var(--line)}.data-cell:last-child{border:0}
.data-cell small{color:var(--muted);display:block;margin-bottom:12px}.data-cell strong{font-size:25px}.meter{height:6px;background:#e5ebdf;border-radius:8px;margin-top:17px}.meter span{display:block;width:72%;height:100%;background:var(--lime-dark);border-radius:8px}
.sports{display:grid;grid-template-columns:1.1fr 1.9fr;gap:50px;align-items:start}
.sport-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.sport{padding:23px;border:1px solid var(--line);border-radius:15px;background:#fff;min-height:130px}.sport:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.sport span{font-size:28px}.sport h3{margin:8px 0 4px}.sport p{font-size:13px;color:var(--muted)}
.app-section{background:var(--ink);color:#fff}
.app-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}
.device{margin:auto;width:230px;height:420px;border:8px solid #405047;border-radius:35px;padding:20px 14px;background:#1f2e28;box-shadow:0 20px 40px rgba(0,0,0,.25)}
.device-top{height:25px;width:70px;margin:0 auto 25px;background:#405047;border-radius:20px}
.device-block{background:var(--lime);height:85px;border-radius:13px;margin-bottom:15px}.device-line{height:12px;background:#476057;border-radius:8px;margin:15px 0}.device-line.short{width:65%}
.app-copy .section-kicker{color:var(--lime)}.app-copy .lead{color:#b9c8bd;margin:15px 0 26px}
.platforms{display:flex;gap:12px;flex-wrap:wrap}.platform{border:1px solid #526258;padding:13px 18px;border-radius:12px;color:#e4ece3;min-width:150px}.platform b{display:block;color:var(--lime)}.platform small{color:#aab9ad}
.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.guide-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:31px}.guide-card.ios{background:#eef4e9}
.step-list{list-style:none;margin-top:20px}.step-list li{display:flex;gap:15px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}.step-list b{color:var(--lime-dark);min-width:24px}
.account{background:#e9f0e5}.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.account-panel{background:#fff;padding:31px;border-radius:var(--radius-lg);border:1px solid var(--line)}.account-panel h3{margin-bottom:18px}
.path-row{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--line);font-size:14px}.path-row span{color:var(--muted)}
.form-note{padding:15px;border-radius:10px;background:#f5f7f1;color:var(--muted);font-size:13px;margin-top:18px}
.security-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.security-card{padding:25px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}.security-card .shield{font-size:25px;color:#779a28;margin-bottom:20px}.security-card p{font-size:14px;color:var(--muted);margin-top:8px}
.notice-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 22px;background:#fff7e9;border-left:4px solid var(--orange);border-radius:12px}.notice-bar p{font-size:14px}.notice-bar time{white-space:nowrap;color:var(--muted);font-size:13px}
.faq{background:#fff}.faq-list{max-width:900px;margin:auto;border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line);padding:20px 0}summary{cursor:pointer;list-style:none;font-weight:750;padding-right:28px;position:relative}summary::-webkit-details-marker{display:none}summary:after{content:"+";position:absolute;right:4px;font-size:24px;font-weight:400;color:var(--lime-dark)}details[open] summary:after{content:"−"}details p{color:var(--muted);font-size:14px;padding:13px 35px 0 0}
.reminder{padding:30px;background:#f0f5e8;border:1px solid #d2dfc9;border-radius:var(--radius-lg);display:flex;justify-content:space-between;align-items:center;gap:25px}.reminder p{color:var(--muted);max-width:800px;font-size:14px}
.site-footer{background:var(--ink);color:#fff;padding:58px 0 24px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:35px;padding-bottom:45px;border-bottom:1px solid #3a4a41}.site-footer h3{font-size:15px;margin-bottom:15px;color:var(--lime)}.site-footer p,.site-footer a{color:#aebcb1;font-size:13px}.site-footer a{display:block;margin:8px 0}.site-footer a:hover{color:var(--lime)}.footer-brand{font-size:18px;font-weight:800;margin-bottom:13px;color:#fff}.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:22px;color:#8fa096;font-size:12px}.age-note{padding:12px 14px;background:#283a31;border-radius:10px;color:#c7d4c8!important}
@media(max-width:1024px){.nav-links a{padding:9px 7px;font-size:13px}.hero-grid{gap:35px}.section{padding:72px 0}.news-layout{gap:25px}}
@media(max-width:768px){.container{width:min(100% - 32px,var(--container))}.navbar{height:70px}.menu-toggle{display:block}.nav-links{display:none;position:absolute;top:70px;left:0;right:0;background:var(--ink);padding:18px 16px 25px;flex-direction:column;align-items:stretch;border-top:1px solid #3a4a41}.nav-links.open{display:flex}.nav-links a{padding:14px 16px}.nav-cta{display:none}.hero{padding:65px 0 75px}.hero-grid,.app-grid,.sports,.news-layout{grid-template-columns:1fr}.hero-visual{min-height:330px;margin-top:15px}.quick-grid{grid-template-columns:1fr 1fr}.quick-item{padding:14px 8px;border-bottom:1px solid var(--line)}.quick-item:nth-child(2){border-right:0}.flow-grid,.security-grid{grid-template-columns:1fr 1fr}.data-strip{display:flex;overflow-x:auto}.data-cell{min-width:210px}.guide-grid,.account-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.section-head{display:block}.section-head .lead{margin-top:14px}.reminder{display:block}.reminder .btn{margin-top:18px}}
@media(max-width:480px){body{font-size:15px}.section{padding:58px 0}.brand{min-width:0}.brand-text strong{font-size:14px}.brand-text span{font-size:10px}.brand-mark{width:34px;height:34px}.hero h1{font-size:39px}.hero .lead{font-size:16px}.hero-note{gap:15px}.hero-actions .btn{width:100%}.hero-visual{min-height:285px}.screen-main{width:88%;padding:16px}.screen-float{width:48%;padding:12px}.quick-grid,.flow-grid,.security-grid,.sport-grid{grid-template-columns:1fr}.quick-item{border-right:0!important}.news-row{grid-template-columns:1fr auto;gap:4px 15px}.news-date{grid-column:1/-1}.news-row p{font-size:13px}.side-note{padding:24px}.platform{flex:1;min-width:135px}.footer-grid{grid-template-columns:1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:8px}}

/* roulang page: article */
:root{
      --ink:#17221e;
      --ink-2:#26352e;
      --muted:#68766f;
      --paper:#f6f8f3;
      --paper-2:#edf2eb;
      --white:#fff;
      --lime:#c9f36a;
      --lime-dark:#99c93c;
      --orange:#e98d66;
      --line:#dbe4d9;
      --shadow:0 16px 45px rgba(20,43,31,.08);
      --shadow-sm:0 8px 24px rgba(20,43,31,.06);
      --radius:18px;
      --radius-lg:28px;
      --container:1200px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      color:var(--ink);
      background:var(--paper);
      line-height:1.75;
      font-size:16px;
    }
    h1,h2,h3,h4,p{margin-top:0}
    h1,h2,h3,h4{line-height:1.3;font-weight:800;letter-spacing:-.035em}
    a{color:inherit;text-decoration:none;transition:all .25s ease}
    a:hover{color:var(--lime-dark)}
    img{display:block;max-width:100%;height:auto}
    button,input{font:inherit}
    button{cursor:pointer;border:0}
    :focus-visible{outline:3px solid rgba(153,201,60,.7);outline-offset:3px}
    .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
    .section{padding:88px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:34px}
    .section-kicker{
      display:inline-flex;align-items:center;gap:8px;color:#66851f;
      text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:800;margin-bottom:12px
    }
    .section-kicker:before{content:"";width:24px;height:3px;border-radius:5px;background:var(--lime-dark)}
    .lead{color:var(--muted);font-size:18px;max-width:720px}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;min-height:48px;
      padding:0 22px;border-radius:12px;font-weight:750;border:1px solid transparent;gap:9px
    }
    .btn-primary{background:var(--lime);color:var(--ink)}
    .btn-primary:hover{background:#d8ff83;color:var(--ink);transform:translateY(-2px);box-shadow:0 8px 18px rgba(153,201,60,.2)}
    .btn-secondary{background:transparent;border-color:#91a38f;color:var(--ink)}
    .btn-secondary:hover{border-color:var(--ink);background:var(--white);transform:translateY(-2px)}
    .btn-dark{background:var(--ink);color:var(--lime)}
    .btn-dark:hover{background:var(--ink-2);color:var(--lime);transform:translateY(-2px)}
    .site-header{position:sticky;top:0;z-index:20;background:rgba(23,34,30,.96);color:#fff;border-bottom:1px solid rgba(255,255,255,.1)}
    .navbar{height:78px;display:flex;align-items:center;justify-content:space-between;gap:30px}
    .brand{display:flex;align-items:center;gap:12px;min-width:245px}
    .brand-mark{width:38px;height:38px;display:grid;place-items:center;background:var(--lime);color:var(--ink);border-radius:11px;font-weight:900;font-size:20px}
    .brand-text strong{display:block;font-size:16px;letter-spacing:-.02em}
    .brand-text span{display:block;color:#aebdb3;font-size:11px;letter-spacing:.05em}
    .nav-links{display:flex;align-items:center;gap:7px}
    .nav-links a{padding:10px 13px;border-radius:9px;color:#cbd6ce;font-size:14px}
    .nav-links a:hover,.nav-links a.active{background:rgba(201,243,106,.12);color:var(--lime)}
    .nav-cta{white-space:nowrap}
    .menu-toggle{display:none;background:transparent;color:#fff;font-size:26px;width:46px;height:46px}
    .article-hero{
      background:var(--ink);color:#fff;padding:72px 0 76px;position:relative;overflow:hidden
    }
    .article-hero:after{
      content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(201,243,106,.18);
      border-radius:50%;right:-145px;top:-220px
    }
    .breadcrumb{display:flex;flex-wrap:wrap;gap:9px;align-items:center;color:#9caf9f;font-size:13px;margin-bottom:27px;position:relative;z-index:1}
    .breadcrumb a:hover{color:var(--lime)}
    .breadcrumb .current{color:#dce7dc;max-width:540px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .article-heading{max-width:900px;position:relative;z-index:1}
    .article-heading h1{font-size:clamp(34px,5vw,56px);margin:0 0 24px;max-width:880px}
    .article-heading .intro{color:#b9c8bd;font-size:18px;max-width:780px;margin-bottom:28px}
    .meta-line{display:flex;align-items:center;flex-wrap:wrap;gap:12px;color:#aab9ad;font-size:13px}
    .tag{display:inline-flex;align-items:center;border-radius:30px;background:var(--lime);padding:4px 11px;color:var(--ink);font-size:11px;font-weight:800}
    .tag.soft{background:#e8f0df;color:#66851f}
    .article-layout{display:grid;grid-template-columns:minmax(0,790px) 280px;gap:54px;align-items:start}
    .article-main{min-width:0}
    .article-content{
      background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
      padding:clamp(26px,5vw,58px);box-shadow:var(--shadow-sm)
    }
    .article-content h2{font-size:30px;margin:34px 0 16px;padding-top:12px}
    .article-content h3{font-size:22px;margin:28px 0 12px}
    .article-content p{color:#3c4a42;margin-bottom:20px}
    .article-content ul,.article-content ol{padding-left:24px;color:#3c4a42;margin:18px 0 24px}
    .article-content li{margin:8px 0;padding-left:5px}
    .article-content blockquote{
      margin:28px 0;padding:20px 24px;border-left:4px solid var(--lime-dark);
      background:#f0f5ea;color:var(--ink-2);border-radius:0 12px 12px 0
    }
    .article-content img{border-radius:14px;margin:26px auto}
    .article-content table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14px}
    .article-content th,.article-content td{padding:12px 14px;border:1px solid var(--line);text-align:left}
    .article-content th{background:var(--paper-2);font-weight:800}
    .empty-state{text-align:center;padding:42px 15px}
    .empty-state .empty-icon{width:54px;height:54px;display:grid;place-items:center;margin:0 auto 17px;border-radius:16px;background:var(--paper-2);font-size:24px}
    .empty-state h2{font-size:26px;margin-bottom:10px}
    .empty-state p{color:var(--muted);margin-bottom:23px}
    .article-aside{position:sticky;top:105px}
    .aside-card{
      background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:23px;
      margin-bottom:18px;box-shadow:var(--shadow-sm)
    }
    .aside-card h3{font-size:18px;margin-bottom:17px}
    .aside-card p{font-size:14px;color:var(--muted);margin-bottom:0}
    .toc{list-style:none;padding:0;margin:0}
    .toc li{border-bottom:1px solid var(--line)}
    .toc a{display:block;padding:11px 0;font-size:14px;color:var(--muted)}
    .toc a:hover{color:var(--ink);padding-left:4px}
    .notice-panel{
      display:flex;gap:16px;align-items:flex-start;background:#eef4e9;border:1px solid var(--line);
      border-left:4px solid var(--lime-dark);border-radius:14px;padding:21px 23px;margin-top:25px
    }
    .notice-icon{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:10px;background:var(--lime);font-weight:900}
    .notice-panel h3{font-size:18px;margin-bottom:5px}
    .notice-panel p{margin:0;color:#536359;font-size:14px}
    .reading-info{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:25px 0}
    .reading-cell{background:var(--paper-2);border-radius:14px;padding:17px 18px}
    .reading-cell small{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}
    .reading-cell strong{font-size:15px}
    .continuation{background:var(--ink);color:#fff;border-radius:var(--radius-lg);padding:32px;margin-top:26px}
    .continuation h2{font-size:25px;margin-bottom:9px}
    .continuation p{color:#b9c8bd;margin-bottom:20px}
    .article-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:25px;padding-top:23px;border-top:1px solid var(--line)}
    .article-foot a{font-weight:750}
    .site-footer{background:var(--ink);color:#fff;padding:58px 0 24px}
    .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:35px;padding-bottom:42px}
    .footer-brand{font-size:18px;font-weight:800;margin-bottom:13px}
    .footer-grid p{color:#aebdb3;font-size:13px;margin:0;max-width:310px}
    .footer-grid h3{font-size:14px;margin-bottom:14px;color:var(--lime)}
    .footer-grid a{display:block;color:#b9c8bd;font-size:13px;margin:8px 0}
    .footer-grid a:hover{color:var(--lime)}
    .age-note{border-left:2px solid var(--orange);padding-left:14px}
    .footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;justify-content:space-between;gap:18px;color:#829288;font-size:12px}
    @media (max-width:1024px){
      .nav-links a{padding-left:8px;padding-right:8px;font-size:13px}
      .nav-cta{display:none}
      .article-layout{grid-template-columns:minmax(0,1fr) 240px;gap:28px}
      .footer-grid{grid-template-columns:1.3fr 1fr 1fr}
      .footer-grid>div:last-child{grid-column:1/-1}
    }
    @media (max-width:768px){
      .container{width:min(var(--container),calc(100% - 34px))}
      .navbar{height:70px}
      .brand{min-width:0}
      .brand-text strong{font-size:14px}
      .brand-text span{font-size:10px}
      .nav-links{
        display:none;position:absolute;left:0;right:0;top:70px;padding:17px;
        background:var(--ink);border-top:1px solid rgba(255,255,255,.1);
        flex-direction:column;align-items:stretch;box-shadow:0 18px 30px rgba(0,0,0,.2)
      }
      .nav-links.open{display:flex}
      .nav-links a{padding:14px 15px;min-height:48px}
      .menu-toggle{display:block}
      .article-hero{padding:52px 0 58px}
      .article-heading h1{font-size:36px}
      .article-layout{display:block}
      .article-aside{position:static;margin-top:24px}
      .article-content{padding:28px 23px}
      .reading-info{grid-template-columns:1fr}
      .section{padding:65px 0}
      .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
      .footer-grid>div:first-child,.footer-grid>div:last-child{grid-column:1/-1}
      .footer-bottom{display:block}
      .footer-bottom span{display:block;margin-bottom:7px}
    }
    @media (max-width:480px){
      body{font-size:15px}
      .container{width:calc(100% - 28px)}
      .brand-mark{width:34px;height:34px;font-size:18px}
      .article-heading h1{font-size:30px}
      .article-heading .intro{font-size:16px}
      .article-content{padding:23px 18px;border-radius:16px}
      .article-content h2{font-size:25px}
      .article-content h3{font-size:20px}
      .article-foot{display:block}
      .article-foot a{display:block;margin:10px 0}
      .footer-grid{grid-template-columns:1fr}
      .footer-grid>div{grid-column:auto!important}
    }

/* roulang page: category1 */
:root{
      --ink:#17221e;
      --ink-2:#26352e;
      --muted:#68766f;
      --paper:#f6f8f3;
      --paper-2:#edf2eb;
      --white:#fff;
      --lime:#c9f36a;
      --lime-dark:#99c93c;
      --orange:#e98d66;
      --line:#dbe4d9;
      --shadow:0 16px 45px rgba(20,43,31,.08);
      --shadow-sm:0 8px 24px rgba(20,43,31,.06);
      --radius:18px;
      --radius-lg:28px;
      --container:1200px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper);line-height:1.7;font-size:16px}
    a{color:inherit;text-decoration:none;transition:.25s ease}
    a:hover{color:var(--lime-dark)}
    img{display:block;max-width:100%}
    button,input{font:inherit}
    button{cursor:pointer;border:0}
    h1,h2,h3,p{margin-top:0}
    h1,h2,h3{line-height:1.25;letter-spacing:-.03em}
    h1{font-size:clamp(38px,5vw,58px);font-weight:800}
    h2{font-size:clamp(28px,3.5vw,38px);font-weight:800}
    h3{font-size:20px;font-weight:750}
    .container{width:min(var(--container),calc(100% - 48px));margin:auto}
    .section{padding:86px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:34px}
    .section-kicker{display:inline-flex;align-items:center;gap:8px;color:#66851f;letter-spacing:.12em;font-size:12px;font-weight:800;margin-bottom:12px}
    .section-kicker:before{content:"";width:24px;height:3px;border-radius:5px;background:var(--lime-dark)}
    .lead{color:var(--muted);font-size:18px;max-width:680px}
    .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:12px;font-weight:750;border:1px solid transparent;gap:9px}
    .btn-primary{background:var(--lime);color:var(--ink)}
    .btn-primary:hover{background:#d8ff83;color:var(--ink);transform:translateY(-2px);box-shadow:0 8px 18px rgba(153,201,60,.2)}
    .btn-secondary{background:transparent;border-color:#91a38f;color:var(--ink)}
    .btn-secondary:hover{border-color:var(--ink);background:var(--white);transform:translateY(-2px)}
    .btn-dark{background:var(--ink);color:var(--lime)}
    .btn-dark:hover{background:var(--ink-2);color:var(--lime);transform:translateY(-2px)}
    :focus-visible{outline:3px solid var(--orange);outline-offset:3px}
    .site-header{position:sticky;top:0;z-index:20;background:rgba(23,34,30,.97);color:#fff;border-bottom:1px solid rgba(255,255,255,.1)}
    .navbar{height:78px;display:flex;align-items:center;justify-content:space-between;gap:30px}
    .brand{display:flex;align-items:center;gap:12px;min-width:245px}
    .brand-mark{width:38px;height:38px;display:grid;place-items:center;background:var(--lime);color:var(--ink);border-radius:11px;font-weight:900;font-size:20px}
    .brand-text strong{display:block;font-size:16px;letter-spacing:-.02em}
    .brand-text span{display:block;color:#aebdb3;font-size:11px;letter-spacing:.05em}
    .nav-links{display:flex;align-items:center;gap:7px}
    .nav-links a{padding:10px 13px;border-radius:9px;color:#cbd6ce;font-size:14px}
    .nav-links a:hover,.nav-links a.active{background:rgba(201,243,106,.12);color:var(--lime)}
    .nav-cta{white-space:nowrap}
    .menu-toggle{display:none;background:transparent;color:#fff;font-size:26px;width:46px;height:46px}
    .page-intro{background:var(--ink);color:#fff;padding:72px 0 78px;position:relative;overflow:hidden}
    .page-intro:after{content:"";position:absolute;width:430px;height:430px;border:1px solid rgba(201,243,106,.17);border-radius:50%;right:-120px;top:-220px}
    .intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:end;position:relative;z-index:1}
    .page-intro .section-kicker{color:var(--lime)}
    .page-intro h1{max-width:760px;margin-bottom:20px}
    .page-intro .lead{color:#b9c8bd}
    .breadcrumb{display:flex;gap:9px;align-items:center;color:#9caf9f;font-size:13px;margin-bottom:25px}
    .breadcrumb a{color:#d5e0d5}
    .intro-panel{border:1px solid #405047;background:#25352e;border-radius:var(--radius-lg);padding:26px}
    .intro-panel strong{display:block;color:var(--lime);font-size:34px;margin:10px 0 5px}
    .intro-panel p{color:#b9c8bd;font-size:14px;margin-bottom:0}
    .topic-bar{display:flex;gap:10px;flex-wrap:wrap}
    .topic-chip{padding:9px 14px;border-radius:30px;background:#e8f0df;color:#66851f;font-size:13px;font-weight:700;border:1px solid #d7e6c8}
    .topic-chip:hover{background:var(--lime);color:var(--ink)}
    .news-layout{display:grid;grid-template-columns:1.35fr .65fr;gap:45px}
    .news-list{border-top:1px solid var(--line)}
    .news-item{display:grid;grid-template-columns:115px 1fr 30px;gap:22px;padding:24px 0;border-bottom:1px solid var(--line);align-items:start}
    .news-date{font-size:13px;color:var(--muted);padding-top:4px}
    .news-date b{display:block;color:var(--ink);font-size:21px;line-height:1.1;margin-bottom:5px}
    .news-item h3{font-size:20px;margin-bottom:7px}
    .news-item p{font-size:14px;color:var(--muted);margin-bottom:10px}
    .tag{display:inline-flex;border-radius:30px;background:var(--lime);padding:4px 10px;color:var(--ink);font-size:11px;font-weight:800}
    .tag.soft{background:#e8f0df;color:#66851f}
    .arrow{font-size:22px;color:#8ca17e;padding-top:4px}
    .featured{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-sm)}
    .featured h3{font-size:25px;margin:16px 0 13px}
    .featured p{color:var(--muted);font-size:14px}
    .featured-meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px;border-top:1px solid var(--line);padding-top:17px;margin-top:22px}
    .data-section{background:#fff}
    .data-strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
    .data-cell{padding:27px;border-right:1px solid var(--line)}
    .data-cell:last-child{border:0}
    .data-cell small{color:var(--muted);display:block;margin-bottom:12px}
    .data-cell strong{font-size:25px;display:block;margin-bottom:5px}
    .data-cell span{font-size:13px;color:var(--muted)}
    .sports-grid{display:grid;grid-template-columns:1.3fr .7fr .7fr;gap:16px}
    .sport-card{min-height:180px;padding:25px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);transition:.25s ease}
    .sport-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:#b7cf9e}
    .sport-card.large{grid-row:span 2;background:var(--ink);color:#fff}
    .sport-card.large p{color:#b9c8bd}
    .sport-icon{font-size:28px;margin-bottom:23px}
    .sport-card p{color:var(--muted);font-size:14px;margin-bottom:0}
    .reading-section{background:var(--paper-2)}
    .reading-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:55px;align-items:center}
    .reading-panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px}
    .reading-row{display:flex;gap:16px;padding:17px 0;border-bottom:1px solid var(--line)}
    .reading-row:last-child{border-bottom:0}
    .reading-number{width:32px;height:32px;border-radius:10px;background:var(--lime);display:grid;place-items:center;font-weight:800;flex:none}
    .reading-row h3{font-size:17px;margin-bottom:3px}
    .reading-row p{font-size:13px;color:var(--muted);margin-bottom:0}
    .support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .support-card{padding:25px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
    .support-card h3{font-size:18px;margin:15px 0 7px}
    .support-card p{color:var(--muted);font-size:14px;margin-bottom:0}
    .support-mark{width:42px;height:42px;border-radius:12px;background:#e8f0df;color:#66851f;display:grid;place-items:center;font-weight:800}
    .faq-section{background:#fff}
    .faq-wrap{max-width:880px}
    .faq-item{border-bottom:1px solid var(--line)}
    .faq-item summary{list-style:none;cursor:pointer;padding:21px 4px;font-weight:750;display:flex;justify-content:space-between;gap:20px}
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary:after{content:"+";font-size:24px;color:var(--lime-dark);line-height:1}
    .faq-item[open] summary:after{content:"−"}
    .faq-item p{color:var(--muted);font-size:14px;padding:0 45px 20px 4px;margin:0}
    .notice{background:#edf4e7;border:1px solid #d2e2c5;border-left:5px solid var(--lime-dark);border-radius:var(--radius);padding:25px 28px}
    .notice h2{font-size:24px;margin-bottom:9px}
    .notice p{color:#536359;margin-bottom:0;font-size:14px}
    .cta-section{padding:45px 0 85px}
    .cta-box{background:var(--ink);color:#fff;border-radius:var(--radius-lg);padding:35px 40px;display:flex;justify-content:space-between;align-items:center;gap:25px}
    .cta-box h2{font-size:28px;margin-bottom:7px}
    .cta-box p{color:#b9c8bd;margin-bottom:0}
    .site-footer{background:var(--ink);color:#fff;padding:65px 0 25px}
    .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:35px;padding-bottom:45px}
    .footer-brand{font-size:17px;font-weight:800;margin-bottom:14px}
    .footer-grid p{color:#aebdb3;font-size:13px;max-width:290px}
    .footer-grid h3{font-size:15px;color:var(--lime);margin-bottom:15px}
    .footer-grid a{display:block;color:#cbd6ce;font-size:13px;margin:8px 0}
    .footer-grid a:hover{color:var(--lime)}
    .age-note{border-left:2px solid var(--orange);padding-left:14px}
    .footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;justify-content:space-between;gap:20px;color:#8fa096;font-size:12px}
    @media(max-width:1024px){
      .nav-links a{padding:9px 8px;font-size:13px}
      .brand{min-width:220px}
      .intro-grid,.news-layout,.reading-grid{gap:35px}
      .sports-grid{grid-template-columns:1fr 1fr}
      .sport-card.large{grid-row:span 1;grid-column:span 2}
      .footer-grid{grid-template-columns:1.3fr 1fr 1fr}
      .footer-grid>div:last-child{grid-column:span 3}
    }
    @media(max-width:768px){
      .container{width:min(var(--container),calc(100% - 32px))}
      .navbar{height:70px}
      .menu-toggle{display:block}
      .nav-cta{display:none}
      .nav-links{display:none;position:absolute;top:70px;left:0;right:0;background:var(--ink);padding:16px;flex-direction:column;align-items:stretch;border-top:1px solid rgba(255,255,255,.1)}
      .nav-links.open{display:flex}
      .nav-links a{padding:13px 15px}
      .intro-grid,.news-layout,.reading-grid{grid-template-columns:1fr}
      .page-intro{padding:55px 0 60px}
      .section{padding:64px 0}
      .section-head{display:block;margin-bottom:25px}
      .section-head .lead{margin-top:12px;font-size:16px}
      .news-item{grid-template-columns:78px 1fr 20px;gap:12px}
      .news-item h3{font-size:17px}
      .data-strip{grid-template-columns:1fr 1fr}
      .data-cell:nth-child(2){border-right:0}
      .data-cell:nth-child(-n+2){border-bottom:1px solid var(--line)}
      .sports-grid,.support-grid{grid-template-columns:1fr}
      .sport-card.large{grid-column:auto}
      .cta-box{display:block;padding:28px}
      .cta-box .btn{margin-top:22px}
      .footer-grid{grid-template-columns:1fr 1fr}
      .footer-grid>div:last-child{grid-column:span 2}
      .footer-bottom{display:block}
      .footer-bottom span{display:block;margin-top:8px}
    }
    @media(max-width:480px){
      h1{font-size:36px}
      .brand{min-width:0}
      .brand-text strong{font-size:14px}
      .brand-text span{font-size:10px}
      .brand-mark{width:34px;height:34px;font-size:18px}
      .news-item{grid-template-columns:1fr 20px}
      .news-date{grid-column:1/-1;display:flex;gap:8px;align-items:center}
      .news-date b{font-size:16px;margin:0}
      .data-cell{padding:20px 16px}
      .data-cell strong{font-size:21px}
      .footer-grid{grid-template-columns:1fr}
      .footer-grid>div:last-child{grid-column:auto}
    }

/* roulang page: category2 */
:root{
      --ink:#17221e;
      --ink-2:#26352e;
      --muted:#68766f;
      --paper:#f6f8f3;
      --paper-2:#edf2eb;
      --white:#fff;
      --lime:#c9f36a;
      --lime-dark:#99c93c;
      --orange:#e98d66;
      --line:#dbe4d9;
      --shadow:0 16px 45px rgba(20,43,31,.08);
      --shadow-sm:0 8px 24px rgba(20,43,31,.06);
      --radius:18px;
      --radius-lg:28px;
      --container:1200px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper);line-height:1.7;font-size:16px}
    h1,h2,h3,h4,p{margin-top:0}
    h1,h2,h3,h4{font-weight:800;letter-spacing:-.035em}
    a{color:inherit;text-decoration:none;transition:.25s ease}
    a:hover{color:var(--lime-dark)}
    img{display:block;max-width:100%}
    button,input{font:inherit}
    button{cursor:pointer;border:0}
    .container{width:min(var(--container),calc(100% - 48px));margin:auto}
    .section{padding:86px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:34px}
    .section-kicker{display:inline-flex;align-items:center;gap:8px;color:#66851f;text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:800;margin-bottom:12px}
    .section-kicker:before{content:"";width:24px;height:3px;border-radius:5px;background:var(--lime-dark)}
    .lead{color:var(--muted);font-size:18px;max-width:700px}
    .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:12px;font-weight:750;border:1px solid transparent;gap:9px}
    .btn-primary{background:var(--lime);color:var(--ink)}
    .btn-primary:hover{background:#d8ff83;color:var(--ink);transform:translateY(-2px);box-shadow:0 8px 18px rgba(153,201,60,.2)}
    .btn-secondary{background:transparent;border-color:#91a38f;color:var(--ink)}
    .btn-secondary:hover{border-color:var(--ink);background:var(--white);transform:translateY(-2px)}
    .btn-dark{background:var(--ink);color:var(--lime)}
    .btn-dark:hover{background:var(--ink-2);color:var(--lime);transform:translateY(-2px)}
    :focus-visible{outline:3px solid var(--orange);outline-offset:3px}
    .site-header{position:sticky;top:0;z-index:20;background:rgba(23,34,30,.96);color:#fff;border-bottom:1px solid rgba(255,255,255,.1)}
    .navbar{height:78px;display:flex;align-items:center;justify-content:space-between;gap:30px}
    .brand{display:flex;align-items:center;gap:12px;min-width:245px}
    .brand-mark{width:38px;height:38px;display:grid;place-items:center;background:var(--lime);color:var(--ink);border-radius:11px;font-weight:900;font-size:20px}
    .brand-text strong{display:block;font-size:16px;letter-spacing:-.02em}
    .brand-text span{display:block;color:#aebdb3;font-size:11px;letter-spacing:.05em}
    .nav-links{display:flex;align-items:center;gap:7px}
    .nav-links a{padding:10px 13px;border-radius:9px;color:#cbd6ce;font-size:14px}
    .nav-links a:hover,.nav-links a.active{background:rgba(201,243,106,.12);color:var(--lime)}
    .nav-cta{white-space:nowrap}
    .menu-toggle{display:none;background:transparent;color:#fff;font-size:26px;width:46px;height:46px}
    .page-intro{background:var(--ink);color:#fff;padding:76px 0 82px;position:relative;overflow:hidden}
    .page-intro:after{content:"";position:absolute;width:390px;height:390px;border:1px solid rgba(201,243,106,.2);border-radius:50%;right:-120px;top:-190px}
    .intro-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:end;position:relative;z-index:1}
    .page-intro .section-kicker{color:var(--lime)}
    .page-intro h1{font-size:clamp(38px,5vw,58px);line-height:1.15;margin:8px 0 20px;max-width:730px}
    .page-intro .lead{color:#b9c8bd}
    .breadcrumb{display:flex;gap:9px;flex-wrap:wrap;color:#9dad9f;font-size:13px;margin-bottom:25px}
    .breadcrumb a:hover{color:var(--lime)}
    .intro-panel{background:#25352e;border:1px solid #405047;border-radius:var(--radius-lg);padding:27px}
    .intro-panel strong{display:block;font-size:30px;color:var(--lime);margin-bottom:4px}
    .intro-panel span{color:#c3d0c5;font-size:14px}
    .topic-bar{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
    .tag{display:inline-flex;border-radius:30px;background:var(--lime);padding:5px 12px;color:var(--ink);font-size:12px;font-weight:800}
    .tag.soft{background:#e8f0df;color:#66851f}
    .summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
    .summary-item{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:23px;min-height:150px}
    .summary-item .num{color:var(--lime-dark);font-size:14px;font-weight:900;margin-bottom:20px}
    .summary-item h3{font-size:18px;margin-bottom:7px}
    .summary-item p{font-size:14px;color:var(--muted);margin-bottom:0}
    .install-section{background:var(--white)}
    .install-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:54px;align-items:start}
    .device-panel{background:var(--ink);border-radius:var(--radius-lg);padding:28px;color:#fff;min-height:360px;position:relative;overflow:hidden}
    .device-panel:before{content:"";position:absolute;width:210px;height:210px;border:1px solid rgba(201,243,106,.25);border-radius:50%;right:-65px;bottom:-70px}
    .device-icon{width:74px;height:74px;border:2px solid var(--lime);border-radius:22px;display:grid;place-items:center;font-size:34px;color:var(--lime);margin-bottom:45px}
    .device-panel h3{font-size:25px;max-width:260px}
    .device-panel p{color:#b9c8bd;font-size:14px;max-width:280px}
    .platform-list{display:grid;gap:14px}
    .platform-row{display:grid;grid-template-columns:92px 1fr auto;gap:20px;align-items:center;border-bottom:1px solid var(--line);padding:21px 0}
    .platform-row:first-child{padding-top:0}
    .platform-row:last-child{border-bottom:0}
    .platform-label{font-weight:850;color:var(--ink-2)}
    .platform-row h3{font-size:19px;margin-bottom:4px}
    .platform-row p{margin:0;color:var(--muted);font-size:14px}
    .version{font-size:12px;color:#66851f;background:#e8f0df;border-radius:20px;padding:5px 10px;white-space:nowrap}
    .feature-section{background:var(--paper-2)}
    .feature-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px}
    .feature-main,.feature-side{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:31px}
    .feature-main{min-height:285px;display:flex;flex-direction:column;justify-content:space-between}
    .feature-main h3{font-size:28px;max-width:470px}
    .feature-main p,.feature-side p{color:var(--muted);font-size:15px}
    .feature-side{display:grid;gap:16px}
    .feature-line{display:flex;gap:15px;padding-bottom:16px;border-bottom:1px solid var(--line)}
    .feature-line:last-child{border-bottom:0;padding-bottom:0}
    .feature-line b{display:block;margin-bottom:3px}
    .feature-line span{color:var(--muted);font-size:13px}
    .dot{width:11px;height:11px;border-radius:50%;background:var(--lime-dark);margin-top:8px;flex:0 0 auto}
    .compat-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
    .compat-card,.check-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px}
    .compat-card h3,.check-card h3{font-size:22px;margin-bottom:18px}
    .compat-list{display:grid;gap:0}
    .compat-list li{list-style:none;display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}
    .compat-list li:last-child{border-bottom:0}
    .compat-list span:last-child{color:#66851f;font-weight:800}
    .check-card{background:var(--ink);color:#fff}
    .check-card p{color:#b9c8bd;font-size:14px}
    .check-list{padding:0;margin:20px 0 0;list-style:none}
    .check-list li{padding:10px 0;border-bottom:1px solid #405047;color:#d6e1d7;font-size:14px}
    .check-list li:before{content:"✓";color:var(--lime);font-weight:900;margin-right:10px}
    .trouble-section{background:#fff}
    .trouble-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
    .trouble-card{padding:25px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
    .trouble-card h3{font-size:18px;margin:15px 0 8px}
    .trouble-card p{font-size:14px;color:var(--muted);margin:0}
    .trouble-code{width:38px;height:38px;border-radius:12px;background:var(--lime);display:grid;place-items:center;font-weight:900}
    .security-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:45px;align-items:start}
    .security-copy h2{font-size:34px}
    .security-copy p{color:var(--muted)}
    .security-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .security-item{padding:22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
    .security-item h3{font-size:17px;margin-bottom:6px}
    .security-item p{font-size:13px;color:var(--muted);margin:0}
    .faq-section{background:var(--paper-2)}
    .faq-wrap{max-width:900px;margin:auto}
    .faq-item{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden}
    .faq-question{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;background:#fff;color:var(--ink);padding:19px 22px;font-weight:800}
    .faq-question:hover{background:#fbfdf8}
    .faq-question span:last-child{font-size:22px;color:var(--lime-dark);transition:.25s}
    .faq-answer{display:none;padding:0 22px 20px;color:var(--muted);font-size:14px}
    .faq-item.open .faq-answer{display:block}
    .faq-item.open .faq-question span:last-child{transform:rotate(45deg)}
    .return-section{padding:67px 0}
    .return-box{background:var(--ink);border-radius:var(--radius-lg);color:#fff;padding:38px 45px;display:flex;align-items:center;justify-content:space-between;gap:25px}
    .return-box h2{font-size:27px;margin-bottom:8px}
    .return-box p{color:#b9c8bd;margin:0}
    .site-footer{background:var(--ink);color:#fff;padding:62px 0 25px}
    .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:35px;padding-bottom:43px}
    .footer-brand{font-weight:850;font-size:17px;margin-bottom:13px}
    .footer-grid p{color:#aebdb3;font-size:13px;margin:0;max-width:270px}
    .footer-grid h3{font-size:15px;margin-bottom:15px}
    .footer-grid a{display:block;color:#b9c8bd;font-size:13px;margin:8px 0}
    .footer-grid a:hover{color:var(--lime)}
    .age-note{border-left:3px solid var(--orange);padding-left:14px}
    .footer-bottom{border-top:1px solid #405047;padding-top:20px;display:flex;justify-content:space-between;gap:20px;color:#87998d;font-size:12px}
    @media(max-width:1024px){
      .nav-links{gap:1px}.nav-links a{padding:9px 8px;font-size:13px}.brand{min-width:210px}
      .intro-grid,.install-layout,.security-layout{gap:30px}
      .summary-grid{grid-template-columns:repeat(2,1fr)}
      .footer-grid{grid-template-columns:1.3fr 1fr 1fr}
      .footer-grid>div:last-child{grid-column:span 3}
    }
    @media(max-width:768px){
      .container{width:min(var(--container),calc(100% - 32px))}
      .navbar{height:70px}.menu-toggle{display:block}.nav-cta{display:none}
      .nav-links{display:none;position:absolute;top:70px;left:0;right:0;padding:18px 20px 25px;background:var(--ink);border-top:1px solid #405047;flex-direction:column;align-items:stretch}
      .nav-links.show{display:flex}.nav-links a{padding:14px 12px}
      .intro-grid,.install-layout,.feature-layout,.compat-grid,.security-layout{grid-template-columns:1fr}
      .page-intro{padding:58px 0 64px}.page-intro h1{font-size:40px}
      .section{padding:64px 0}.section-head{display:block;margin-bottom:25px}.section-head .lead{font-size:16px;margin-top:12px}
      .platform-row{grid-template-columns:72px 1fr}.platform-row .btn{grid-column:2;justify-self:start}
      .trouble-grid{grid-template-columns:1fr 1fr}
      .return-box{display:block;padding:30px}.return-box .btn{margin-top:23px}
      .footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:last-child{grid-column:span 2}
      .footer-bottom{display:block}.footer-bottom span{display:block;margin-top:8px}
    }
    @media(max-width:520px){
      .brand-text strong{font-size:13px}.brand-text span{font-size:10px}
      .brand{min-width:0}.brand-mark{width:34px;height:34px;font-size:17px}
      .page-intro h1{font-size:33px}.lead{font-size:16px}
      .summary-grid,.trouble-grid,.security-list{grid-template-columns:1fr}
      .summary-item{min-height:0}.device-panel{min-height:300px}
      .platform-row{grid-template-columns:1fr;gap:8px}.platform-row .btn{grid-column:auto}
      .feature-main,.feature-side,.compat-card,.check-card{padding:24px}
      .footer-grid{grid-template-columns:1fr}.footer-grid>div:last-child{grid-column:auto}
      .btn{width:100%}.topic-bar .tag{font-size:11px}
    }

/* roulang page: category3 */
:root{
      --ink:#17221e;
      --ink-2:#26352e;
      --muted:#68766f;
      --paper:#f6f8f3;
      --paper-2:#edf2eb;
      --white:#fff;
      --lime:#c9f36a;
      --lime-dark:#99c93c;
      --orange:#e98d66;
      --line:#dbe4d9;
      --shadow:0 16px 45px rgba(20,43,31,.08);
      --shadow-sm:0 8px 24px rgba(20,43,31,.06);
      --radius:18px;
      --radius-lg:28px;
      --container:1200px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper);line-height:1.7;font-size:16px}
    a{color:inherit;text-decoration:none;transition:.25s ease}
    a:hover{color:var(--lime-dark)}
    img{display:block;max-width:100%}
    button,input{font:inherit}
    button{cursor:pointer;border:0}
    h1,h2,h3,p{margin-top:0}
    h1,h2,h3{line-height:1.25;letter-spacing:-.035em}
    .container{width:min(var(--container),calc(100% - 48px));margin:auto}
    .section{padding:88px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:34px}
    .section-kicker{display:inline-flex;align-items:center;gap:8px;color:#66851f;letter-spacing:.12em;font-size:12px;font-weight:800;margin-bottom:12px}
    .section-kicker:before{content:"";width:24px;height:3px;border-radius:5px;background:var(--lime-dark)}
    .lead{color:var(--muted);font-size:18px;max-width:680px}
    .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:12px;font-weight:750;border:1px solid transparent;gap:9px}
    .btn-primary{background:var(--lime);color:var(--ink)}
    .btn-primary:hover{background:#d8ff83;color:var(--ink);transform:translateY(-2px);box-shadow:0 8px 18px rgba(153,201,60,.2)}
    .btn-secondary{background:transparent;border-color:#91a38f;color:var(--ink)}
    .btn-secondary:hover{border-color:var(--ink);background:var(--white);transform:translateY(-2px)}
    .btn-dark{background:var(--ink);color:var(--lime)}
    .btn-dark:hover{background:var(--ink-2);color:var(--lime);transform:translateY(-2px)}
    :focus-visible{outline:3px solid var(--orange);outline-offset:3px}
    .site-header{position:sticky;top:0;z-index:20;background:rgba(23,34,30,.97);color:#fff;border-bottom:1px solid rgba(255,255,255,.1)}
    .navbar{height:78px;display:flex;align-items:center;justify-content:space-between;gap:30px}
    .brand{display:flex;align-items:center;gap:12px;min-width:245px}
    .brand-mark{width:38px;height:38px;display:grid;place-items:center;background:var(--lime);color:var(--ink);border-radius:11px;font-weight:900;font-size:20px}
    .brand-text strong{display:block;font-size:16px;letter-spacing:-.02em}
    .brand-text span{display:block;color:#aebdb3;font-size:11px;letter-spacing:.05em}
    .nav-links{display:flex;align-items:center;gap:7px}
    .nav-links a{padding:10px 13px;border-radius:9px;color:#cbd6ce;font-size:14px}
    .nav-links a:hover,.nav-links a.active{background:rgba(201,243,106,.12);color:var(--lime)}
    .nav-cta{white-space:nowrap}
    .menu-toggle{display:none;background:transparent;color:#fff;font-size:26px;width:46px;height:46px}
    .page-hero{background:var(--ink);color:#fff;padding:70px 0 76px;position:relative;overflow:hidden}
    .page-hero:after{content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(201,243,106,.18);border-radius:50%;right:-130px;top:-190px}
    .hero-inner{position:relative;z-index:1;max-width:850px}
    .page-hero .section-kicker{color:var(--lime)}
    .page-hero h1{font-size:clamp(40px,5vw,62px);margin:0 0 20px}
    .page-hero .lead{color:#b9c8bd;margin-bottom:28px}
    .breadcrumb{display:flex;flex-wrap:wrap;gap:10px;color:#9eaea2;font-size:13px;margin-bottom:28px}
    .breadcrumb a{color:var(--lime)}
    .summary-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:stretch}
    .summary-copy,.summary-panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px}
    .summary-copy h2{font-size:30px;margin-bottom:15px}
    .summary-copy p{color:var(--muted);margin-bottom:0}
    .topic-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .topic-item{padding:16px;background:var(--paper-2);border-radius:14px;border-left:3px solid var(--lime-dark)}
    .topic-item strong{display:block;font-size:15px}
    .topic-item span{display:block;color:var(--muted);font-size:13px;margin-top:3px}
    .help-layout{display:grid;grid-template-columns:280px 1fr;gap:42px}
    .index-box{position:sticky;top:104px;align-self:start;background:var(--ink);color:#fff;border-radius:var(--radius-lg);padding:25px}
    .index-box h3{font-size:18px;color:var(--lime);margin-bottom:17px}
    .index-box a{display:block;padding:11px 0;color:#c5d2c8;border-bottom:1px solid rgba(255,255,255,.12);font-size:14px}
    .index-box a:hover{color:var(--lime);padding-left:5px}
    .help-list{border-top:1px solid var(--line)}
    .help-row{display:grid;grid-template-columns:80px 1fr 95px;gap:22px;align-items:start;padding:25px 0;border-bottom:1px solid var(--line)}
    .help-no{font-size:28px;font-weight:800;color:var(--lime-dark);line-height:1}
    .help-row h3{font-size:20px;margin-bottom:7px}
    .help-row p{font-size:14px;color:var(--muted);margin-bottom:10px}
    .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--muted);font-size:12px}
    .tag{display:inline-flex;border-radius:30px;background:var(--lime);padding:4px 10px;color:var(--ink);font-size:11px;font-weight:800}
    .tag.soft{background:#e8f0df;color:#66851f}
    .read-link{color:#66851f;font-size:13px;font-weight:700;padding-top:4px}
    .read-link:after{content:" →";transition:.2s}
    .read-link:hover:after{padding-left:4px}
    .feature-section{background:var(--paper-2)}
    .feature-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:20px}
    .feature-main{background:var(--ink);color:#fff;border-radius:var(--radius-lg);padding:38px;min-height:270px;display:flex;flex-direction:column;justify-content:space-between}
    .feature-main h2{font-size:30px;max-width:600px}
    .feature-main p{color:#b9c8bd;max-width:600px}
    .feature-side{display:grid;gap:14px}
    .feature-item{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px}
    .feature-item h3{font-size:18px;margin-bottom:7px}
    .feature-item p{color:var(--muted);font-size:13px;margin-bottom:0}
    .steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
    .step-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
    .step-number{width:34px;height:34px;border-radius:50%;background:var(--lime);display:grid;place-items:center;font-weight:800;margin-bottom:20px}
    .step-card h3{font-size:17px;margin-bottom:8px}
    .step-card p{font-size:14px;color:var(--muted);margin-bottom:0}
    .security-section{background:#fff}
    .security-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
    .security-card{padding:25px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
    .security-icon{font-size:25px;color:#66851f;margin-bottom:14px}
    .security-card h3{font-size:18px;margin-bottom:8px}
    .security-card p{font-size:14px;color:var(--muted);margin-bottom:0}
    .notice{display:flex;gap:18px;align-items:flex-start;background:#f8eee7;border:1px solid #efd4c5;border-radius:var(--radius);padding:24px}
    .notice-mark{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-weight:800}
    .notice h3{font-size:18px;margin-bottom:6px}
    .notice p{color:#765b4e;margin-bottom:0;font-size:14px}
    .faq-list{max-width:880px;margin:0 auto;border-top:1px solid var(--line)}
    .faq-item{border-bottom:1px solid var(--line)}
    .faq-question{width:100%;background:transparent;text-align:left;padding:22px 4px;display:flex;justify-content:space-between;align-items:center;color:var(--ink);font-weight:750;font-size:17px}
    .faq-question span{font-size:25px;color:var(--lime-dark);transition:.25s}
    .faq-answer{display:none;color:var(--muted);font-size:15px;padding:0 42px 22px 4px}
    .faq-item.open .faq-answer{display:block}
    .faq-item.open .faq-question span{transform:rotate(45deg)}
    .return-section{padding:58px 0}
    .return-box{background:var(--ink);border-radius:var(--radius-lg);padding:38px 42px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:24px}
    .return-box h2{font-size:28px;margin-bottom:8px}
    .return-box p{color:#b9c8bd;margin-bottom:0}
    .site-footer{background:var(--ink);color:#d8e3da;padding:58px 0 22px}
    .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:35px;padding-bottom:42px}
    .footer-brand{color:#fff;font-size:18px;font-weight:800;margin-bottom:13px}
    .site-footer p{color:#9eaea2;font-size:13px;line-height:1.8}
    .site-footer h3{font-size:14px;color:var(--lime);margin-bottom:15px}
    .site-footer a{display:block;color:#b9c8bd;font-size:13px;margin:9px 0}
    .site-footer a:hover{color:var(--lime)}
    .age-note{border-left:2px solid var(--orange);padding-left:13px}
    .footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:18px;display:flex;justify-content:space-between;gap:20px;color:#83948a;font-size:12px}
    @media(max-width:1024px){
      .nav-links a{padding:9px 8px;font-size:13px}
      .brand{min-width:220px}
      .help-layout{grid-template-columns:220px 1fr;gap:28px}
      .security-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:768px){
      .container{width:min(var(--container),calc(100% - 34px))}
      .navbar{height:70px}
      .nav-links{display:none;position:absolute;top:70px;left:0;right:0;background:var(--ink);padding:18px;flex-direction:column;align-items:stretch;border-top:1px solid rgba(255,255,255,.1)}
      .nav-links.show{display:flex}
      .nav-links a{padding:14px 16px}
      .nav-cta{display:none}
      .menu-toggle{display:block}
      .section{padding:64px 0}
      .page-hero{padding:54px 0 62px}
      .page-hero h1{font-size:40px}
      .summary-grid,.feature-grid,.help-layout{grid-template-columns:1fr}
      .index-box{position:static}
      .index-box a{display:inline-block;width:49%;border-bottom:0;padding-right:8px}
      .help-row{grid-template-columns:52px 1fr}
      .help-row .read-link{grid-column:2}
      .steps-grid{grid-template-columns:repeat(2,1fr)}
      .return-box{align-items:flex-start;flex-direction:column;padding:30px}
      .footer-grid{grid-template-columns:1fr 1fr}
      .footer-bottom{flex-direction:column}
    }
    @media(max-width:480px){
      .brand-text strong{font-size:14px}
      .brand-text span{font-size:10px}
      .brand{min-width:0}
      .page-hero h1{font-size:34px}
      .lead{font-size:16px}
      .section-head{display:block}
      .summary-copy,.summary-panel,.feature-main{padding:25px}
      .topic-list,.steps-grid,.security-grid{grid-template-columns:1fr}
      .help-row{gap:13px}
      .help-row h3{font-size:18px}
      .help-no{font-size:23px}
      .footer-grid{grid-template-columns:1fr}
      .notice{padding:19px}
    }