/* roulang page: index */
:root{
      --ink:#242321;
      --ink-soft:#5f5b54;
      --paper:#f7f5f0;
      --paper-deep:#ece9e1;
      --charcoal:#20201e;
      --charcoal-2:#2b2b28;
      --coral:#e8755d;
      --coral-deep:#c95a45;
      --mint:#a8d4c3;
      --line:#d9d5cb;
      --white:#fffdf8;
      --radius-sm:10px;
      --radius-md:16px;
      --radius-lg:24px;
      --shadow:0 14px 36px rgba(36,35,33,.09);
      --ease:220ms ease;
      --max:1220px;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;background:var(--paper);color:var(--ink);line-height:1.7;font-size:16px}
    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(--mint);outline-offset:3px}
    .container{width:min(var(--max),calc(100% - 48px));margin:auto}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--coral);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
    .eyebrow:before{content:"";width:24px;height:2px;background:var(--coral)}
    h1,h2,h3{line-height:1.15;letter-spacing:-.035em}
    h1{font-size:clamp(42px,6vw,78px);font-weight:900}
    h2{font-size:clamp(28px,4vw,48px);font-weight:850}
    h3{font-size:21px;font-weight:800}
    .section{padding:105px 0;border-top:1px solid var(--line)}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:42px}
    .section-head p{max-width:510px;color:var(--ink-soft)}
    .muted{color:var(--ink-soft)}
    .tag{display:inline-flex;align-items:center;padding:5px 10px;border-radius:99px;background:var(--paper-deep);color:var(--ink-soft);font-size:12px;font-weight:700}
    .tag.coral{background:#f5d2c9;color:#9e3f2e}
    .tag.mint{background:#d7ebe3;color:#356b5d}
    .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 21px;border:1px solid transparent;border-radius:8px;font-weight:800;transition:transform var(--ease),background var(--ease),color var(--ease),border-color var(--ease)}
    .btn-primary{background:var(--coral);color:#fff}
    .btn-primary:hover{background:var(--coral-deep);transform:translateY(-2px)}
    .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
    .btn-ghost:hover{background:#fff;color:var(--charcoal)}
    .btn-light{border-color:var(--line);background:var(--white)}
    .btn-light:hover{border-color:var(--coral);color:var(--coral)}
    .site-header{position:sticky;top:0;z-index:20;background:rgba(32,32,30,.97);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
    .nav-wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px}
    .logo{font-size:21px;font-weight:900;letter-spacing:-.04em;white-space:nowrap}
    .logo span{color:var(--coral)}
    .nav-links{display:flex;align-items:center;gap:28px;margin-left:auto}
    .nav-links a{position:relative;color:#c9c8c2;font-size:14px;font-weight:700;transition:color var(--ease)}
    .nav-links a:hover,.nav-links a.active{color:#fff}
    .nav-links a.active:after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;background:var(--coral)}
    .nav-actions{display:flex;align-items:center;gap:12px}
    .search-link{width:42px;height:42px;display:grid;place-items:center;border:1px solid #55544f;border-radius:50%;font-size:18px}
    .menu-btn{display:none;background:none;border:0;color:#fff;font-size:25px}
    .hero{background:var(--charcoal);color:#fff;padding:72px 0 84px;position:relative;overflow:hidden}
    .hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(32,32,30,.95) 0%,rgba(32,32,30,.76) 46%,rgba(32,32,30,.25)),url("/assets/images/f6478b46e64cf19b.jpg") center/cover;opacity:.55;pointer-events:none}
    .hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:center}
    .hero-copy{max-width:720px}
    .hero h1{margin:22px 0 24px;max-width:700px}
    .hero h1 em{font-style:normal;color:var(--coral)}
    .hero-copy>p{max-width:680px;color:#d7d4cc;font-size:18px;line-height:1.9}
    .hero-actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
    .hero-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
    .hero-meta span{padding:7px 11px;border:1px solid rgba(255,255,255,.2);border-radius:5px;color:#e7e4dc;font-size:12px}
    .hero-board{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .info-stream,.hot-list{background:rgba(255,253,248,.96);color:var(--ink);padding:24px;border-radius:var(--radius-md);box-shadow:var(--shadow)}
    .info-stream{grid-row:span 2;min-height:320px}
    .board-title{font-size:12px;color:var(--coral);font-weight:900;letter-spacing:.1em;margin-bottom:18px}
    .stream-item{padding:15px 0;border-top:1px solid var(--line)}
    .stream-item strong{display:block;font-size:15px;margin-bottom:4px}
    .stream-item small{color:var(--ink-soft)}
    .hot-list{background:var(--mint);min-height:145px}
    .hot-list ul{list-style:none}
    .hot-list li{padding:8px 0;border-bottom:1px solid rgba(36,35,33,.15);font-size:13px;font-weight:700}
    .hot-list li:last-child{border:0}
    .entry-box{background:var(--coral);padding:22px;border-radius:var(--radius-md);color:#fff}
    .entry-box strong{font-size:20px;display:block;margin-bottom:8px}
    .entry-box a{font-size:13px;text-decoration:underline;text-underline-offset:4px}
    .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--white);border:1px solid var(--line)}
    .trio-item{padding:32px;border-right:1px solid var(--line);position:relative}
    .trio-item:last-child{border:0}
    .trio-item:before{content:"";position:absolute;top:0;left:0;width:5px;height:100%;background:var(--coral)}
    .trio-num{font-size:13px;color:var(--coral);font-weight:900;margin-bottom:30px}
    .trio-item p{color:var(--ink-soft);font-size:14px;margin-top:10px}
    .timeline{position:relative;display:grid;gap:0;margin-left:18px}
    .timeline:before{content:"";position:absolute;left:7px;top:12px;bottom:12px;width:1px;background:var(--line)}
    .timeline-item{position:relative;padding:0 0 32px 42px;display:grid;grid-template-columns:150px 1fr auto;gap:24px;align-items:start}
    .timeline-item:before{content:"";position:absolute;left:0;top:7px;width:15px;height:15px;border:4px solid var(--paper);border-radius:50%;background:var(--coral);box-shadow:0 0 0 1px var(--coral)}
    .timeline-date{font-size:13px;color:var(--ink-soft);font-weight:700}
    .timeline-item p{color:var(--ink-soft);font-size:14px;margin-top:5px}
    .scene-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:stretch}
    .scene-image{min-height:410px;border-radius:var(--radius-lg);background:linear-gradient(135deg,rgba(32,32,30,.1),rgba(32,32,30,.6)),url("/assets/images/d0a4286be76f6dce.jpg") center/cover;display:flex;align-items:end;padding:28px;color:#fff}
    .scene-image p{max-width:340px;font-size:18px;font-weight:700}
    .scene-list{display:grid;gap:12px}
    .scene-card{background:var(--white);border:1px solid var(--line);padding:23px;border-radius:var(--radius-md);transition:transform var(--ease),box-shadow var(--ease)}
    .scene-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
    .scene-card h3{font-size:18px;margin-bottom:7px}
    .scene-card p{font-size:14px;color:var(--ink-soft)}
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
    .step{padding:24px 24px 24px 0;border-top:2px solid var(--ink);position:relative}
    .step:not(:last-child):after{content:"→";position:absolute;right:18px;top:17px;color:var(--coral);font-size:25px}
    .step-num{font-size:34px;font-weight:900;color:var(--coral);margin-bottom:16px}
    .step p{color:var(--ink-soft);font-size:14px;margin-top:8px;padding-right:15px}
    .detail-stage{display:grid;grid-template-columns:1.3fr .7fr;gap:22px}
    .detail-image{height:350px;border-radius:var(--radius-lg);background:url("/assets/images/28de9556c6c09347.jpg") center/cover;position:relative;overflow:hidden}
    .detail-image:after{content:"界面信息示意";position:absolute;left:22px;bottom:20px;background:var(--charcoal);color:#fff;padding:8px 13px;border-radius:5px;font-size:12px}
    .detail-notes{display:grid;gap:12px}
    .note{padding:20px;border-left:4px solid var(--mint);background:var(--white);border-bottom:1px solid var(--line)}
    .note p{font-size:14px;color:var(--ink-soft);margin-top:5px}
    .quote-wall{display:grid;grid-template-columns:1.3fr .7fr;gap:24px}
    .quote-main{background:var(--charcoal);color:#fff;padding:42px;border-radius:var(--radius-lg);font-size:clamp(22px,3vw,35px);font-weight:800;line-height:1.45}
    .quote-main span{display:block;color:var(--mint);font-size:13px;margin-top:28px;font-weight:700}
    .quote-list{display:grid;gap:12px}
    .quote-small{background:var(--white);border:1px solid var(--line);padding:20px;border-radius:var(--radius-sm);font-size:14px}
    .compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}
    .compare-col{padding:28px;border:1px solid var(--line);background:var(--white)}
    .compare-col.featured{border:2px solid var(--coral);background:#fffaf7}
    .compare-col h3{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
    .compare-list{list-style:none;display:grid;gap:14px}
    .compare-list li{display:flex;gap:12px;font-size:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
    .compare-list b{color:var(--coral)}
    .version-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .version-card{background:var(--white);border:1px solid var(--line);padding:25px;border-radius:var(--radius-md)}
    .version-card.current{background:var(--charcoal);color:#fff;border-color:var(--charcoal)}
    .version-card h3{margin:14px 0 8px}
    .version-card p{font-size:14px;color:var(--ink-soft)}
    .version-card.current p{color:#d0cec8}
    .news-layout{display:grid;grid-template-columns:1fr .8fr;gap:44px}
    .news-list{border-top:2px solid var(--ink)}
    .news-item{display:grid;grid-template-columns:100px 1fr auto;gap:20px;align-items:start;padding:24px 0;border-bottom:1px solid var(--line)}
    .news-item time{font-size:12px;color:var(--ink-soft)}
    .news-item h3{font-size:18px}
    .news-item p{font-size:14px;color:var(--ink-soft);margin-top:6px}
    .news-item a{color:var(--coral);font-weight:800;font-size:13px;white-space:nowrap}
    .news-aside{background:var(--paper-deep);padding:27px;border-radius:var(--radius-md)}
    .news-aside h3{margin-bottom:15px}
    .news-aside p{color:var(--ink-soft);font-size:14px;margin-bottom:22px}
    .faq-list{max-width:900px}
    .faq{border-top:1px solid var(--line)}
    .faq summary{list-style:none;cursor:pointer;padding:22px 0;font-weight:800;display:flex;justify-content:space-between;gap:20px}
    .faq summary::-webkit-details-marker{display:none}
    .faq summary:after{content:"+";color:var(--coral);font-size:24px;line-height:1}
    .faq[open] summary:after{content:"−"}
    .faq p{color:var(--ink-soft);font-size:14px;padding:0 45px 22px 0}
    .issue-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .issue{background:var(--white);border:1px solid var(--line);padding:24px;border-radius:var(--radius-sm)}
    .issue strong{display:flex;justify-content:space-between;margin-bottom:12px}
    .issue p{font-size:14px;color:var(--ink-soft)}
    .status{font-size:11px;color:#39725f;background:#d8eee4;padding:4px 8px;border-radius:4px}
    .assurance{background:var(--mint);padding:35px 40px;border-radius:var(--radius-lg);display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
    .assurance-item{border-left:1px solid rgba(36,35,33,.25);padding-left:18px}
    .assurance-item:first-child{border:0;padding-left:0}
    .assurance-item h3{font-size:17px;margin-bottom:6px}
    .assurance-item p{font-size:13px;color:#42655b}
    .fixed-cta{position:fixed;z-index:15;bottom:18px;left:50%;transform:translateX(-50%);width:min(820px,calc(100% - 32px));background:var(--charcoal);color:#fff;border:1px solid #464640;border-radius:12px;box-shadow:0 15px 35px rgba(0,0,0,.2);padding:12px 14px 12px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px}
    .fixed-cta strong{font-size:14px}
    .fixed-cta small{display:block;color:#aaa;font-size:11px}
    .close-cta{background:none;border:0;color:#aaa;font-size:20px}
    .site-footer{background:var(--charcoal);color:#fff;padding:70px 0 35px;margin-bottom:86px}
    .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:60px;padding-bottom:48px}
    .footer-brand p{color:#aaa;margin-top:16px;max-width:320px;font-size:14px}
    .footer-col h3{font-size:14px;margin-bottom:16px}
    .footer-col a{display:block;color:#aaa;font-size:13px;margin:9px 0;transition:color var(--ease)}
    .footer-col a:hover{color:var(--coral)}
    .copyright{border-top:1px solid #41413d;padding-top:22px;color:#898781;font-size:12px;display:flex;justify-content:space-between;gap:20px}
    @media(max-width:1024px){
      .hero-inner,.scene-grid,.detail-stage,.quote-wall,.news-layout{grid-template-columns:1fr}
      .hero-board{max-width:720px}
      .footer-grid{gap:30px}
    }
    @media(max-width:768px){
      .container{width:min(var(--max),calc(100% - 32px))}
      .nav-wrap{height:68px}
      .nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:var(--charcoal);padding:20px 16px;flex-direction:column;align-items:stretch;gap:0;border-top:1px solid #444}
      .nav-links.open{display:flex}
      .nav-links a{padding:14px 0;border-bottom:1px solid #3c3c38}
      .nav-links a.active:after{display:none}
      .nav-actions .btn{display:none}
      .menu-btn{display:block}
      .section{padding:72px 0}
      .section-head{display:block;margin-bottom:28px}
      .section-head p{margin-top:15px}
      .trio,.version-grid,.issue-grid,.assurance{grid-template-columns:1fr}
      .trio-item{border-right:0;border-bottom:1px solid var(--line)}
      .timeline-item{grid-template-columns:1fr;gap:5px}
      .steps{grid-template-columns:1fr 1fr;gap:14px}
      .step:not(:last-child):after{display:none}
      .news-item{grid-template-columns:1fr auto;gap:8px}
      .news-item time{grid-column:1/-1}
      .assurance{padding:25px}
      .assurance-item,.assurance-item:first-child{border-left:0;border-top:1px solid rgba(36,35,33,.2);padding:15px 0 0}
      .assurance-item:first-child{border-top:0;padding-top:0}
      .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
      .footer-brand{grid-column:1/-1}
      .copyright{display:block}
      .copyright span{display:block;margin-top:8px}
    }
    @media(max-width:520px){
      h1{font-size:40px}
      .hero{padding:52px 0 60px}
      .hero-copy>p{font-size:16px}
      .hero-board{grid-template-columns:1fr}
      .info-stream{grid-row:auto}
      .scene-image{min-height:280px}
      .steps{grid-template-columns:1fr}
      .compare{grid-template-columns:1fr}
      .detail-image{height:250px}
      .quote-main{padding:28px;font-size:24px}
      .footer-grid{grid-template-columns:1fr}
      .fixed-cta{padding:10px 12px 10px 15px}
      .fixed-cta .btn{min-height:42px;padding:0 13px;font-size:13px}
      .fixed-cta small{display:none}
    }

/* roulang page: category1 */
:root{
 --ink:#242321;--ink-soft:#5f5b54;--paper:#f7f5f0;--paper-deep:#ece9e1;
 --charcoal:#20201e;--charcoal-2:#2b2b28;--coral:#e8755d;--coral-deep:#c95a45;
 --mint:#a8d4c3;--line:#d9d5cb;--white:#fffdf8;--red:#b95c49;
 --radius-sm:10px;--radius-md:16px;--radius-lg:24px;
 --shadow:0 14px 36px rgba(36,35,33,.09);--ease:220ms ease;--max:1220px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;background:var(--paper);color:var(--ink);line-height:1.7;font-size:16px}
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(--mint);outline-offset:3px}
.container{width:min(var(--max),calc(100% - 48px));margin:auto}
.site-header{position:sticky;top:0;z-index:20;background:rgba(32,32,30,.97);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.nav-wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.logo{font-size:21px;font-weight:900;letter-spacing:-.04em;white-space:nowrap}
.logo span{color:var(--coral)}
.nav-links{display:flex;align-items:center;gap:28px;margin-left:auto}
.nav-links a{position:relative;color:#c9c8c2;font-size:14px;font-weight:700;transition:color var(--ease)}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-links a.active:after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;background:var(--coral)}
.nav-actions{display:flex;align-items:center;gap:12px}
.search-link{width:42px;height:42px;display:grid;place-items:center;border:1px solid #55544f;border-radius:50%;font-size:18px}
.menu-btn{display:none;background:none;border:0;color:#fff;font-size:25px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 21px;border:1px solid transparent;border-radius:8px;font-weight:800;transition:transform var(--ease),background var(--ease),color var(--ease),border-color var(--ease)}
.btn-primary{background:var(--coral);color:#fff}
.btn-primary:hover{background:var(--coral-deep);transform:translateY(-2px)}
.btn-light{border-color:var(--line);background:var(--white)}
.btn-light:hover{border-color:var(--coral);color:var(--coral)}
.btn-dark{background:var(--charcoal);color:#fff}
.btn-dark:hover{background:var(--coral);transform:translateY(-2px)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--coral);font-size:12px;font-weight:800;letter-spacing:.12em}
.eyebrow:before{content:"";width:24px;height:2px;background:var(--coral)}
h1,h2,h3{line-height:1.2;letter-spacing:-.035em}
h1{font-size:clamp(38px,5vw,68px);font-weight:900}
h2{font-size:clamp(28px,3.5vw,43px);font-weight:900}
h3{font-size:20px;font-weight:850}
.section{padding:88px 0;border-top:1px solid var(--line)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:38px}
.section-head p{max-width:560px;color:var(--ink-soft)}
.muted{color:var(--ink-soft)}
.tag{display:inline-flex;align-items:center;padding:5px 10px;border-radius:99px;background:var(--paper-deep);color:var(--ink-soft);font-size:12px;font-weight:700}
.tag.coral{background:#f5d2c9;color:#9e3f2e}
.tag.mint{background:#d7ebe3;color:#356b5d}
.intro{position:relative;overflow:hidden;background:var(--charcoal);color:#fff;padding:82px 0 92px}
.intro:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(32,32,30,.98),rgba(32,32,30,.7)),url("/assets/images/d0a4286be76f6dce.jpg") center/cover;opacity:.65}
.intro-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center}
.intro h1{margin:21px 0 22px;max-width:720px}
.intro-copy p{max-width:680px;color:#ddd9d0;font-size:18px}
.intro-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.intro-meta span{border:1px solid rgba(255,255,255,.22);padding:7px 11px;border-radius:5px;color:#e8e4dc;font-size:12px}
.version-board{background:rgba(255,253,248,.96);color:var(--ink);border-left:6px solid var(--coral);padding:30px;border-radius:var(--radius-md);box-shadow:var(--shadow)}
.board-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:20px}
.board-top strong{font-size:24px}
.board-row{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
.board-row:last-child{border-bottom:0}
.board-row span:last-child{font-weight:800}
.filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:18px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-md)}
.filter-bar button{border:1px solid var(--line);background:transparent;color:var(--ink-soft);padding:10px 16px;border-radius:7px;font-weight:750;transition:all var(--ease)}
.filter-bar button:hover,.filter-bar button.active{background:var(--charcoal);border-color:var(--charcoal);color:#fff}
.timeline{position:relative;max-width:980px;margin-top:20px}
.timeline:before{content:"";position:absolute;left:8px;top:10px;bottom:18px;width:1px;background:var(--line)}
.timeline-item{position:relative;display:grid;grid-template-columns:150px 1fr auto;gap:26px;padding:0 0 38px 42px}
.timeline-item:before{content:"";position:absolute;left:0;top:6px;width:17px;height:17px;border:4px solid var(--paper);border-radius:50%;background:var(--coral);box-shadow:0 0 0 1px var(--coral)}
.timeline-item time{font-size:13px;color:var(--ink-soft);font-weight:750}
.timeline-item h3{font-size:21px}
.timeline-item p{color:var(--ink-soft);font-size:14px;margin-top:7px}
.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.detail-card{background:var(--white);border:1px solid var(--line);padding:26px;border-radius:var(--radius-md);transition:transform var(--ease),box-shadow var(--ease)}
.detail-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.detail-card .card-head{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:23px}
.detail-card h3{font-size:23px}
.detail-card p{color:var(--ink-soft);font-size:14px;margin:15px 0 21px}
.detail-card ul{list-style:none;border-top:1px solid var(--line)}
.detail-card li{padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.detail-card li b{color:var(--coral);margin-right:7px}
.types-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:24px;align-items:stretch}
.type-note{background:var(--charcoal);color:#fff;padding:34px;border-radius:var(--radius-lg)}
.type-note h3{font-size:28px;margin:15px 0}
.type-note p{color:#d6d3cb}
.type-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.type-item{background:var(--white);border:1px solid var(--line);padding:22px;border-radius:var(--radius-sm)}
.type-item strong{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.type-dot{width:10px;height:10px;background:var(--coral);border-radius:50%;display:inline-block}
.type-item p{font-size:14px;color:var(--ink-soft)}
.faq-wrap{max-width:900px}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;justify-content:space-between;gap:20px;text-align:left;border:0;background:none;padding:22px 0;font-weight:850;color:var(--ink)}
.faq-q span:last-child{color:var(--coral);font-size:22px;line-height:1}
.faq-a{display:none;color:var(--ink-soft);font-size:14px;padding:0 38px 22px 0}
.faq-item.open .faq-a{display:block}
.notice{background:var(--paper-deep)}
.notice-box{display:flex;align-items:center;justify-content:space-between;gap:35px;background:var(--mint);padding:30px 34px;border-radius:var(--radius-md)}
.notice-box p{max-width:760px;font-size:15px}
.site-footer{background:var(--charcoal);color:#fff;padding:64px 0 25px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:50px}
.footer-brand p{color:#bdbbb4;max-width:360px;margin-top:16px;font-size:14px}
.footer-col{display:grid;align-content:start;gap:10px}
.footer-col h3{font-size:14px;color:var(--mint);margin-bottom:8px}
.footer-col a{color:#c6c4bd;font-size:14px;transition:color var(--ease)}
.footer-col a:hover{color:var(--coral)}
.copyright{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #41413d;margin-top:48px;padding-top:20px;color:#96948e;font-size:12px}
.fixed-bar{position:fixed;z-index:15;bottom:0;left:0;right:0;background:rgba(32,32,30,.97);color:#fff;border-top:1px solid rgba(255,255,255,.12);padding:13px 0}
.fixed-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.fixed-inner strong{font-size:15px}
.fixed-inner span{color:#bdbbb4;font-size:13px;margin-left:12px}
.fixed-close{background:none;border:0;color:#aaa;font-size:22px;margin-left:8px}
@media(max-width:1024px){
 .intro-inner{gap:35px}.nav-links{gap:18px}.detail-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
 .container{width:min(var(--max),calc(100% - 32px))}
 .nav-wrap{height:68px}.nav-links{display:none;position:absolute;top:68px;left:0;right:0;padding:20px 22px;background:var(--charcoal);flex-direction:column;align-items:flex-start;gap:18px;border-top:1px solid #444}
 .nav-links.show{display:flex}.nav-links a.active:after{display:none}.nav-actions .btn{display:none}.menu-btn{display:block}
 .intro{padding:62px 0}.intro-inner,.types-layout{grid-template-columns:1fr}.intro h1{font-size:43px}.version-board{margin-top:12px}
 .section{padding:68px 0}.section-head{display:block;margin-bottom:28px}.section-head p{margin-top:14px}
 .timeline-item{grid-template-columns:1fr;gap:5px;padding-left:36px}.detail-grid{grid-template-columns:1fr}.type-list{grid-template-columns:1fr}
 .notice-box{display:block;padding:25px}.notice-box .btn{margin-top:18px}.footer-grid{grid-template-columns:1fr 1fr;gap:32px}
 .copyright{display:block}.copyright span{display:block;margin-top:7px}.fixed-inner span{display:none}
}
@media(max-width:520px){
 h1{font-size:36px}.intro h1{font-size:38px}.hero-actions{display:grid}.hero-actions .btn{width:100%}
 .footer-grid{grid-template-columns:1fr}.search-link{width:38px;height:38px}
 .fixed-bar{padding:10px 0}.fixed-inner strong{font-size:13px}.fixed-inner .btn{min-height:42px;padding:0 13px;font-size:13px}
}

/* roulang page: category2 */
:root{
 --ink:#242321;
 --ink-soft:#5f5b54;
 --paper:#f7f5f0;
 --paper-deep:#ece9e1;
 --charcoal:#20201e;
 --charcoal-2:#2b2b28;
 --coral:#e8755d;
 --coral-deep:#c95a45;
 --mint:#a8d4c3;
 --line:#d9d5cb;
 --white:#fffdf8;
 --radius-sm:10px;
 --radius-md:16px;
 --radius-lg:24px;
 --shadow:0 14px 36px rgba(36,35,33,.09);
 --ease:220ms ease;
 --max:1220px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;background:var(--paper);color:var(--ink);line-height:1.7;font-size:16px}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input{font:inherit}
button{cursor:pointer}
h1,h2,h3{line-height:1.2;letter-spacing:-.035em}
h1{font-size:clamp(36px,5vw,68px)}
h2{font-size:clamp(28px,3.4vw,44px)}
h3{font-size:20px}
.container{width:min(var(--max),calc(100% - 48px));margin:auto}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--coral);font-size:12px;font-weight:800;letter-spacing:.12em}
.eyebrow:before{content:"";width:24px;height:2px;background:var(--coral)}
.muted{color:var(--ink-soft)}
.tag{display:inline-flex;align-items:center;padding:5px 10px;border-radius:99px;background:var(--paper-deep);color:var(--ink-soft);font-size:12px;font-weight:700}
.tag.coral{background:#f5d2c9;color:#9e3f2e}
.tag.mint{background:#d7ebe3;color:#356b5d}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 21px;border:1px solid transparent;border-radius:8px;font-weight:800;transition:transform var(--ease),background var(--ease),color var(--ease),border-color var(--ease)}
.btn:focus,.search-link:focus,.menu-btn:focus,.faq-question:focus{outline:3px solid rgba(232,117,93,.42);outline-offset:3px}
.btn-primary{background:var(--coral);color:#fff}
.btn-primary:hover{background:var(--coral-deep);transform:translateY(-2px)}
.btn-light{border-color:var(--line);background:var(--white)}
.btn-light:hover{border-color:var(--coral);color:var(--coral)}
.site-header{position:sticky;top:0;z-index:20;background:rgba(32,32,30,.97);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.nav-wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.logo{font-size:21px;font-weight:900;letter-spacing:-.04em;white-space:nowrap}
.logo span{color:var(--coral)}
.nav-links{display:flex;align-items:center;gap:28px;margin-left:auto}
.nav-links a{position:relative;color:#c9c8c2;font-size:14px;font-weight:700;transition:color var(--ease)}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-links a.active:after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;background:var(--coral)}
.nav-actions{display:flex;align-items:center;gap:12px}
.search-link{width:42px;height:42px;display:grid;place-items:center;border:1px solid #55544f;border-radius:50%;font-size:18px}
.menu-btn{display:none;background:none;border:0;color:#fff;font-size:25px}
.page-hero{position:relative;isolation:isolate;min-height:390px;display:flex;align-items:end;padding:82px 0 66px;background:var(--charcoal);color:#fff;overflow:hidden}
.page-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(32,32,30,.98) 10%,rgba(32,32,30,.78) 57%,rgba(32,32,30,.34)),url("/assets/images/d0a4286be76f6dce.jpg") center/cover;z-index:-1;opacity:.92}
.page-hero .container{width:min(var(--max),calc(100% - 48px))}
.hero-copy{max-width:760px}
.hero-copy h1{margin:20px 0 20px}
.hero-copy p{max-width:710px;color:#dedbd4;font-size:18px;line-height:1.9}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:27px}
.hero-meta span{padding:7px 12px;border:1px solid rgba(255,255,255,.22);border-radius:5px;color:#ece9e2;font-size:12px}
.section{padding:92px 0;border-top:1px solid var(--line)}
.section.alt{background:var(--paper-deep)}
.section.dark{background:var(--charcoal);color:#fff;border-color:#3a3935}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:38px}
.section-head h2{margin-top:14px}
.section-head p{max-width:520px;color:var(--ink-soft)}
.dark .section-head p{color:#c7c4bc}
.guide-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.guide-nav a{min-height:128px;padding:22px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-md);display:flex;flex-direction:column;justify-content:space-between;transition:transform var(--ease),border-color var(--ease),box-shadow var(--ease)}
.guide-nav a:hover{transform:translateY(-4px);border-color:var(--coral);box-shadow:var(--shadow)}
.guide-nav b{font-size:27px;color:var(--coral);font-weight:900}
.guide-nav span{font-weight:800}
.guide-nav small{color:var(--ink-soft);font-size:13px}
.article-list{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}
.article-card{background:var(--white);border:1px solid var(--line);padding:28px;border-radius:var(--radius-md);display:flex;flex-direction:column;justify-content:space-between;min-height:214px;transition:transform var(--ease),box-shadow var(--ease)}
.article-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.article-card.featured{grid-row:span 2;background:var(--charcoal);color:#fff;padding:34px}
.article-card p{color:var(--ink-soft);font-size:14px;margin:15px 0 24px}
.article-card.featured p{color:#cfccc4;font-size:16px;line-height:1.85}
.article-top{display:flex;justify-content:space-between;gap:12px;align-items:center}
.article-date{font-size:12px;color:var(--ink-soft)}
.featured .article-date{color:#bdbab2}
.text-link{font-weight:800;color:var(--coral);font-size:14px}
.featured .text-link{color:var(--mint)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid #5b5953;border-bottom:1px solid #5b5953}
.step{padding:28px 25px 30px;border-right:1px solid #5b5953;position:relative}
.step:last-child{border-right:0}
.step-number{font-size:42px;line-height:1;color:var(--coral);font-weight:900;margin-bottom:28px}
.step h3{font-size:18px;margin-bottom:10px}
.step p{color:#c9c6be;font-size:14px}
.device-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:stretch}
.device-note{padding:38px;background:var(--charcoal);color:#fff;border-radius:var(--radius-lg);position:relative;overflow:hidden}
.device-note:after{content:"";position:absolute;right:-60px;bottom:-90px;width:220px;height:220px;border:35px solid var(--mint);border-radius:50%;opacity:.7}
.device-note h3{font-size:28px;max-width:300px;margin:18px 0}
.device-note p{color:#d1cec6;max-width:340px}
.device-note .tag{margin-top:30px;background:rgba(168,212,195,.18);color:var(--mint)}
.device-table{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}
.device-row{display:grid;grid-template-columns:150px 1fr 130px;gap:18px;padding:20px 23px;border-bottom:1px solid var(--line);align-items:center}
.device-row:last-child{border-bottom:0}
.device-row strong{font-size:16px}
.device-row p{font-size:14px;color:var(--ink-soft)}
.status{font-size:12px;font-weight:800;color:#356b5d;background:#d7ebe3;padding:5px 9px;border-radius:99px;text-align:center}
.notice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.notice{padding:24px;background:var(--white);border-left:4px solid var(--coral);border-radius:var(--radius-sm)}
.notice:nth-child(2){border-color:var(--mint)}
.notice:nth-child(3){border-color:#b6a58b}
.notice h3{font-size:18px;margin-bottom:8px}
.notice p{font-size:14px;color:var(--ink-soft)}
.faq-list{max-width:880px;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-question{width:100%;border:0;background:transparent;text-align:left;padding:22px 42px 22px 0;font-weight:800;color:var(--ink);position:relative}
.faq-question:after{content:"+";position:absolute;right:8px;top:16px;color:var(--coral);font-size:26px;font-weight:400}
.faq-item.open .faq-question:after{content:"−"}
.faq-answer{display:none;padding:0 42px 22px 0;color:var(--ink-soft);font-size:14px;max-width:760px}
.faq-item.open .faq-answer{display:block}
.final-cta{background:var(--mint);padding:44px 0}
.cta-wrap{display:flex;align-items:center;justify-content:space-between;gap:30px}
.cta-wrap h2{font-size:clamp(26px,3vw,40px);max-width:650px}
.cta-wrap p{color:#356b5d;margin-top:8px}
.cta-actions{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0}
.site-footer{background:var(--charcoal);color:#fff;padding:62px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:50px;padding-bottom:50px}
.footer-brand p{max-width:390px;color:#bdbab2;margin-top:18px;font-size:14px}
.footer-col{display:flex;flex-direction:column;gap:11px}
.footer-col h3{font-size:14px;color:var(--mint);margin-bottom:7px}
.footer-col a{color:#c9c6be;font-size:14px;transition:color var(--ease)}
.footer-col a:hover{color:#fff}
.copyright{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #44433e;padding-top:22px;color:#94918a;font-size:12px}
@media (max-width:1024px){
 .nav-links{gap:18px}
 .hero-copy p{font-size:17px}
 .guide-nav{grid-template-columns:repeat(2,1fr)}
 .steps{grid-template-columns:repeat(2,1fr)}
 .step:nth-child(2){border-right:0}
 .step:nth-child(-n+2){border-bottom:1px solid #5b5953}
 .device-layout{grid-template-columns:1fr}
}
@media (max-width:768px){
 .container{width:min(var(--max),calc(100% - 34px))}
 .nav-wrap{height:68px}
 .nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:var(--charcoal);padding:18px 17px 25px;flex-direction:column;align-items:stretch;gap:0;border-top:1px solid #46453f}
 .nav-links.open{display:flex}
 .nav-links a{padding:14px 4px;border-bottom:1px solid #3b3a36}
 .nav-links a.active:after{display:none}
 .nav-actions .btn-primary{display:none}
 .menu-btn{display:block}
 .page-hero{min-height:430px;padding:65px 0 53px}
 .section{padding:68px 0}
 .section-head{display:block;margin-bottom:28px}
 .section-head p{margin-top:15px}
 .article-list{grid-template-columns:1fr}
 .article-card.featured{grid-row:auto}
 .device-row{grid-template-columns:110px 1fr;gap:12px}
 .device-row .status{grid-column:2;text-align:left;width:max-content}
 .notice-grid{grid-template-columns:1fr}
 .cta-wrap{display:block}
 .cta-actions{margin-top:24px}
 .footer-grid{grid-template-columns:1fr 1fr;gap:34px}
 .footer-brand{grid-column:1/-1}
 .copyright{display:block}
 .copyright span{display:block;margin-top:6px}
}
@media (max-width:520px){
 h1{font-size:38px}
 .hero-copy p{font-size:16px}
 .hero-meta span{font-size:11px}
 .guide-nav{grid-template-columns:1fr 1fr}
 .guide-nav a{min-height:112px;padding:17px}
 .guide-nav b{font-size:22px}
 .steps{display:block}
 .step{border-right:0;border-bottom:1px solid #5b5953!important}
 .step:last-child{border-bottom:0!important}
 .device-note{padding:28px}
 .footer-grid{grid-template-columns:1fr}
 .footer-brand{grid-column:auto}
 .search-link{width:38px;height:38px}
}
