/* roulang page: index */
:root{
      --ink:#17111c;--night:#211526;--panel:#2d1d31;--panel2:#38233b;
      --cream:#fff7ed;--muted:#c5b4c8;--line:#604362;--coral:#f28b72;
      --peach:#ffc28e;--berry:#c95775;--shadow:#100a13;--radius:12px;
      --max:1220px;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{font-family:"Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;background:var(--ink);color:var(--cream);line-height:1.75;overflow-x:hidden}
    a{text-decoration:none;color:inherit}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    img{max-width:100%;display:block}
    .container{width:min(calc(100% - 40px),var(--max));margin:auto}
    .pixel-bg{background-image:radial-gradient(rgba(255,194,142,.12) 1px,transparent 1px);background-size:14px 14px}
    .grid-bg{background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:28px 28px}
    .site-header{position:sticky;top:0;z-index:20;background:rgba(23,17,28,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
    .nav-wrap{height:78px;display:flex;align-items:center;gap:26px}
    .logo{font-weight:900;letter-spacing:-.04em;font-size:20px;white-space:nowrap;color:var(--peach)}
    .logo i{display:inline-block;width:8px;height:8px;background:var(--coral);margin-right:8px;box-shadow:10px 0 var(--berry)}
    .tabs{display:flex;gap:5px;align-items:center;flex:1}
    .tab{padding:9px 16px;border:1px solid transparent;border-radius:8px;color:var(--muted);font-size:14px;transition:.2s}
    .tab:hover,.tab:focus{color:var(--cream);border-color:var(--line);background:var(--panel)}
    .tab.active{color:var(--ink);background:var(--peach);border-color:var(--peach);box-shadow:4px 4px 0 var(--berry)}
    .menu-btn{display:none;background:var(--panel);color:var(--cream);border:1px solid var(--line);padding:8px 12px;border-radius:7px}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 19px;border-radius:8px;border:1px solid transparent;font-weight:800;font-size:14px;transition:.2s}
    .btn-primary{background:var(--coral);color:var(--ink);box-shadow:4px 4px 0 var(--berry)}
    .btn-primary:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--berry);background:var(--peach)}
    .btn-primary:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--berry)}
    .btn-ghost{background:transparent;border-color:var(--line);color:var(--cream)}
    .btn-ghost:hover{background:var(--panel);border-color:var(--peach);color:var(--peach)}
    :focus-visible{outline:3px solid var(--peach);outline-offset:3px}
    section{padding:92px 0}
    .eyebrow{color:var(--coral);font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
    h1,h2,h3{line-height:1.2;letter-spacing:-.04em}
    h1{font-size:clamp(38px,6vw,70px);max-width:720px}
    h2{font-size:clamp(28px,4vw,42px)}
    h3{font-size:20px}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:34px}
    .section-head p{max-width:580px;color:var(--muted);font-size:15px}
    .hero{padding:78px 0 70px;position:relative;overflow:hidden}
    .hero:after{content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(242,139,114,.22);right:-130px;top:40px;transform:rotate(14deg);pointer-events:none}
    .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:62px;align-items:center}
    .hero-copy p{color:var(--muted);font-size:17px;max-width:630px;margin:24px 0 30px}
    .hero-actions{display:flex;gap:13px;flex-wrap:wrap}
    .hero-note{display:flex;gap:18px;margin-top:28px;color:var(--muted);font-size:12px}
    .hero-note b{color:var(--peach);font-size:17px;display:block}
    .stage{position:relative;background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:18px;box-shadow:10px 10px 0 rgba(201,87,117,.36)}
    .stage-top{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:14px;color:var(--muted);font-size:12px}
    .stage-screen{min-height:300px;margin-top:16px;padding:24px;background:var(--night);border:1px solid #79506e;position:relative;overflow:hidden}
    .stage-screen:before{content:"";position:absolute;inset:0;opacity:.4;background:repeating-linear-gradient(0deg,transparent 0 6px,rgba(255,194,142,.06) 7px)}
    .index-title{position:relative;font-size:27px;font-weight:900;margin-bottom:22px}
    .index-title span{color:var(--coral)}
    .stage-list{position:relative;display:grid;gap:10px}
    .stage-row{display:flex;align-items:center;gap:12px;background:var(--panel);border-left:4px solid var(--coral);padding:11px 13px;font-size:13px}
    .stage-row small{margin-left:auto;color:var(--muted)}
    .status{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:12px}
    .status:before{content:"";width:7px;height:7px;background:var(--peach);display:inline-block;border-radius:50%}
    .metrics{padding:30px 0;background:var(--night);border-block:1px solid var(--line)}
    .metric-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:12px}
    .metric{padding:20px 22px;border:1px solid var(--line);background:var(--panel);border-radius:9px}
    .metric strong{font-size:30px;color:var(--peach);display:block;line-height:1.1}
    .metric span{font-size:13px;color:var(--muted)}
    .matrix{display:grid;grid-template-columns:1.35fr .8fr .8fr;grid-template-rows:auto auto;gap:14px}
    .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:25px;transition:.2s}
    .card:hover{border-color:var(--coral);transform:translateY(-3px);box-shadow:5px 5px 0 rgba(201,87,117,.3)}
    .matrix .main-card{grid-row:span 2;background:linear-gradient(135deg,var(--panel2),var(--panel));padding:32px}
    .num{font-family:monospace;color:var(--coral);font-weight:bold;font-size:13px;display:block;margin-bottom:20px}
    .card p{color:var(--muted);font-size:14px;margin-top:10px}
    .link-arrow{display:inline-block;color:var(--peach);font-size:13px;margin-top:22px;font-weight:800}
    .compare{display:grid;grid-template-columns:1fr 70px 1fr;align-items:stretch;gap:15px}
    .compare-box{padding:28px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
    .compare-box.highlight{border-color:var(--coral);background:#3a2234}
    .compare-box ul{margin-top:17px;display:grid;gap:11px;color:var(--muted);font-size:14px}
    .compare-box li{list-style:none}.compare-box li:before{content:"▸";color:var(--coral);margin-right:9px}
    .vs{align-self:center;text-align:center;color:var(--peach);font-weight:900;font-family:monospace}
    .resource-layout{display:grid;grid-template-columns:1.3fr .7fr;gap:16px}
    .resource-list{display:grid;gap:10px}
    .resource-item{display:flex;align-items:center;gap:16px;padding:17px 20px;background:var(--panel);border:1px solid var(--line);border-radius:8px}
    .resource-item:hover{border-color:var(--peach)}
    .resource-item .count{color:var(--coral);font-family:monospace;font-weight:bold}
    .resource-item p{font-size:14px;color:var(--muted)}
    .resource-item time{margin-left:auto;color:#a58fa8;font-size:12px;white-space:nowrap}
    .feature-panel{background:var(--peach);color:var(--ink);padding:28px;border-radius:10px;position:relative}
    .feature-panel p{font-size:14px;margin-top:13px}
    .feature-panel .btn{margin-top:22px;background:var(--ink);color:var(--cream);box-shadow:4px 4px 0 var(--berry)}
    .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    details{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:19px 21px}
    details[open]{border-color:var(--coral)}
    summary{cursor:pointer;font-weight:800;padding-right:20px}
    details p{color:var(--muted);font-size:14px;margin-top:13px}
    .contact{background:var(--berry);padding:54px;border-radius:14px;border:2px solid #f08b91;box-shadow:8px 8px 0 var(--shadow)}
    .contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
    .contact p{color:#ffe8dc;margin-top:14px;font-size:14px}
    form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    label{font-size:13px;font-weight:800}
    .field{display:grid;gap:6px}.field.full{grid-column:1/-1}
    input,select,textarea{width:100%;background:#351c34;color:var(--cream);border:1px solid #ed9a98;border-radius:7px;padding:11px 13px;font-size:14px}
    textarea{min-height:100px;resize:vertical}
    input::placeholder,textarea::placeholder{color:#bda1b4}
    .form-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:12px;color:#ffe2d3}
    .footer{padding:48px 0 28px;background:#120d16;border-top:1px solid var(--line)}
    .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;padding-bottom:35px}
    .footer p,.footer a{color:var(--muted);font-size:13px}.footer a:hover{color:var(--peach)}
    .footer-links{display:grid;gap:8px}.footer h3{font-size:14px;color:var(--cream);margin-bottom:11px}
    .copyright{border-top:1px solid #322238;padding-top:20px;color:#8d778f;font-size:12px;display:flex;justify-content:space-between;gap:20px}
    @media(max-width:900px){.hero-grid,.contact-grid,.resource-layout{grid-template-columns:1fr}.hero{padding-top:55px}.metric-grid{grid-template-columns:1fr 1fr}.matrix{grid-template-columns:1fr 1fr}.matrix .main-card{grid-row:auto;grid-column:span 2}.footer-grid{grid-template-columns:1fr 1fr}}
    @media(max-width:640px){
      .container{width:min(calc(100% - 28px),var(--max))}section{padding:60px 0}.nav-wrap{height:68px;gap:10px}.logo{font-size:16px;flex:1}.logo i{margin-right:4px}.tabs{display:none;position:absolute;top:68px;left:0;right:0;padding:13px;background:var(--ink);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch}.tabs.open{display:flex}.tab{text-align:center}.nav-wrap>.btn{padding:9px 11px;font-size:12px}.menu-btn{display:block}.hero-grid{gap:38px}.hero-copy p{font-size:15px}.hero-note{gap:12px}.stage-screen{min-height:260px;padding:18px}.metric-grid{grid-template-columns:1fr 1fr;gap:8px}.metric{padding:16px}.metric strong{font-size:24px}.matrix{display:flex;flex-direction:column}.matrix .main-card{padding:24px}.compare{grid-template-columns:1fr;gap:10px}.vs{padding:3px}.faq-grid{grid-template-columns:1fr}.contact{padding:29px 20px}form{grid-template-columns:1fr}.field.full,.form-foot{grid-column:auto}.form-foot{display:grid}.footer-grid{grid-template-columns:1fr;gap:25px}.copyright{display:grid;gap:6px}.resource-item{align-items:flex-start;padding:15px}.resource-item time{font-size:11px}.section-head{display:block}.section-head p{margin-top:13px}}

/* roulang page: category1 */
:root{
      --ink:#17111c;--night:#211526;--panel:#2d1d31;--panel2:#38233b;
      --cream:#fff7ed;--muted:#c5b4c8;--line:#604362;--coral:#f28b72;
      --peach:#ffc28e;--berry:#c95775;--shadow:#100a13;--radius:12px;
      --max:1220px;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{font-family:"Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;background:var(--ink);color:var(--cream);line-height:1.75;overflow-x:hidden}
    a{text-decoration:none;color:inherit}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    img{max-width:100%;display:block}
    .container{width:min(calc(100% - 40px),var(--max));margin:auto}
    .grid-bg{background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:28px 28px}
    .site-header{position:sticky;top:0;z-index:20;background:rgba(23,17,28,.95);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
    .nav-wrap{height:78px;display:flex;align-items:center;gap:26px}
    .logo{font-weight:900;letter-spacing:-.04em;font-size:20px;white-space:nowrap;color:var(--peach)}
    .logo i{display:inline-block;width:8px;height:8px;background:var(--coral);margin-right:8px;box-shadow:10px 0 var(--berry)}
    .tabs{display:flex;gap:5px;align-items:center;flex:1}
    .tab{color:var(--muted);font-size:14px;padding:9px 15px;border:1px solid transparent;border-radius:7px;transition:.2s}
    .tab:hover,.tab:focus{color:var(--peach);border-color:var(--line);background:var(--panel)}
    .tab.active{color:var(--ink);background:var(--coral);border-color:var(--coral);font-weight:800;box-shadow:3px 3px 0 var(--berry)}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 19px;border-radius:8px;border:1px solid transparent;font-weight:800;font-size:14px;transition:.2s}
    .btn-primary{background:var(--coral);color:var(--ink);box-shadow:4px 4px 0 var(--berry)}
    .btn-primary:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--berry);background:var(--peach)}
    .btn-primary:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--berry)}
    .btn-ghost{background:transparent;border-color:var(--line);color:var(--cream)}
    .btn-ghost:hover{background:var(--panel);border-color:var(--peach);color:var(--peach)}
    .btn:focus,.tab:focus,input:focus,select:focus,textarea:focus,.menu-btn:focus{outline:3px solid rgba(255,194,142,.55);outline-offset:3px}
    .menu-btn{display:none;background:var(--panel);color:var(--cream);border:1px solid var(--line);padding:8px 12px;border-radius:7px}
    section{padding:86px 0}
    .eyebrow{color:var(--coral);font-size:12px;font-weight:900;letter-spacing:.16em}
    h1,h2,h3{line-height:1.2;letter-spacing:-.035em}
    h1{font-size:clamp(36px,5vw,62px)}
    h2{font-size:clamp(27px,3vw,38px)}
    h3{font-size:20px}
    .muted{color:var(--muted)}
    .page-hero{padding:58px 0 48px;position:relative}
    .page-hero:after{content:"";position:absolute;right:-100px;top:30px;width:300px;height:300px;border:1px solid rgba(242,139,114,.22);transform:rotate(16deg);pointer-events:none}
    .hero-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:58px;align-items:end}
    .breadcrumb{display:flex;gap:9px;color:#a58fa8;font-size:13px;margin-bottom:25px}
    .breadcrumb span{color:var(--coral)}
    .hero-copy p{max-width:700px;color:var(--muted);font-size:16px;margin:22px 0 27px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:13px}
    .summary{background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:22px;box-shadow:9px 9px 0 rgba(201,87,117,.3)}
    .summary-head{display:flex;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
    .summary-number{font-size:45px;font-weight:900;color:var(--peach);line-height:1;margin:19px 0 8px;font-family:monospace}
    .summary-list{display:grid;gap:10px;margin-top:18px}
    .summary-list div{display:flex;justify-content:space-between;background:var(--night);padding:9px 11px;font-size:13px}
    .summary-list b{color:var(--coral)}
    .data-bar{background:var(--peach);color:var(--ink);padding:17px 20px;border-radius:9px;display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
    .data-bar div{border-right:1px solid rgba(23,17,28,.25);padding-right:12px}
    .data-bar div:last-child{border:0}
    .data-bar strong{display:block;font-size:21px;line-height:1.2}
    .data-bar span{font-size:12px;font-weight:700}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:30px}
    .section-head p{max-width:590px;color:var(--muted);font-size:15px}
    .filter-panel{background:var(--panel);border:1px solid var(--line);padding:20px;border-radius:var(--radius);margin-bottom:25px}
    .filter-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:15px}
    .chips{display:flex;flex-wrap:wrap;gap:8px}
    .chip{border:1px solid var(--line);background:var(--night);color:var(--muted);padding:7px 13px;border-radius:99px;font-size:13px;transition:.2s}
    .chip:hover{border-color:var(--peach);color:var(--peach)}
    .chip.selected{background:var(--coral);color:var(--ink);border-color:var(--coral);font-weight:800}
    .filter-controls{display:flex;gap:10px;align-items:center}
    select{background:#351c34;color:var(--cream);border:1px solid #ed9a98;border-radius:7px;padding:9px 12px;font-size:13px}
    .clear{color:var(--peach);font-size:13px;background:none;border:0}
    .content-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:25px}
    .feature-card{background:linear-gradient(135deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:27px;min-height:245px;position:relative;overflow:hidden}
    .feature-card:after{content:"01";position:absolute;right:20px;bottom:-15px;color:rgba(255,194,142,.1);font:900 120px monospace}
    .badge{display:inline-flex;align-items:center;gap:7px;color:var(--ink);background:var(--peach);font-size:12px;font-weight:900;padding:5px 9px;border-radius:5px}
    .badge:before{content:"";width:6px;height:6px;background:var(--berry)}
    .feature-card h3{font-size:27px;margin:22px 0 10px;max-width:430px}
    .feature-card p{color:var(--muted);font-size:14px;max-width:530px}
    .resource-list{display:grid;gap:10px}
    .resource-item{display:flex;align-items:center;gap:14px;padding:16px 17px;background:var(--panel);border:1px solid var(--line);border-radius:8px;transition:.2s}
    .resource-item:hover{border-color:var(--peach);transform:translateX(3px)}
    .count{color:var(--coral);font:bold 15px monospace}
    .resource-item strong{font-size:14px}
    .resource-item p{font-size:12px;color:var(--muted)}
    .resource-item time{margin-left:auto;color:#a58fa8;font-size:11px;white-space:nowrap}
    .recent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
    .mini-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px;min-height:155px}
    .mini-card:hover{border-color:var(--coral)}
    .mini-card small{color:var(--coral);font-family:monospace}
    .mini-card h3{font-size:18px;margin:13px 0 7px}
    .mini-card p{font-size:13px;color:var(--muted)}
    .faq-wrap{display:grid;grid-template-columns:.7fr 1.3fr;gap:45px}
    .faq-list{display:grid;gap:10px}
    details{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:17px 19px}
    summary{cursor:pointer;font-weight:800;color:var(--cream)}
    details p{color:var(--muted);font-size:14px;padding-top:12px}
    .cta-band{background:var(--peach);color:var(--ink);border-radius:12px;padding:30px 35px;display:flex;justify-content:space-between;align-items:center;gap:25px}
    .cta-band p{font-size:14px;margin-top:8px;max-width:680px}
    .cta-band .btn{background:var(--ink);color:var(--cream);box-shadow:4px 4px 0 var(--berry)}
    .footer{padding:48px 0 28px;background:#120d16;border-top:1px solid var(--line)}
    .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;padding-bottom:35px}
    .footer p,.footer a{color:var(--muted);font-size:13px}
    .footer a:hover{color:var(--peach)}
    .footer-links{display:grid;gap:8px}
    .footer h3{font-size:14px;color:var(--cream);margin-bottom:11px}
    .copyright{border-top:1px solid #322238;padding-top:20px;color:#8d778f;font-size:12px;display:flex;justify-content:space-between;gap:20px}
    .contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
    form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    label{display:block;color:var(--cream);font-size:13px;margin-bottom:6px}
    input,textarea{width:100%;background:#351c34;color:var(--cream);border:1px solid #ed9a98;border-radius:7px;padding:11px 13px;font-size:14px}
    textarea{min-height:100px;resize:vertical}
    .field-wide{grid-column:1/-1}
    .form-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:12px;color:#ffe2d3}
    @media(max-width:900px){
      .hero-layout,.content-layout,.faq-wrap,.contact-grid{grid-template-columns:1fr}
      .recent-grid{grid-template-columns:1fr 1fr}
      .hero-layout{gap:35px}
    }
    @media(max-width:700px){
      .container{width:min(calc(100% - 28px),var(--max))}
      .nav-wrap{height:68px;gap:10px}
      .logo{font-size:16px;flex:1}
      .logo i{margin-right:4px}
      .tabs{display:none;position:absolute;top:68px;left:14px;right:14px;padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:9px;flex-direction:column;align-items:stretch}
      .tabs.open{display:flex}
      .tab{width:100%}
      .menu-btn{display:block}
      .nav-wrap>.btn{padding:9px 11px;font-size:12px}
      section{padding:58px 0}
      .page-hero{padding:42px 0 35px}
      .data-bar{grid-template-columns:1fr 1fr}
      .data-bar div:nth-child(2){border:0}
      .filter-top{align-items:flex-start;flex-direction:column}
      .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:5px}
      .chip{white-space:nowrap}
      .filter-controls{width:100%;justify-content:space-between}
      .recent-grid{grid-template-columns:1fr}
      .cta-band{display:block;padding:25px}
      .cta-band .btn{margin-top:20px}
      .footer-grid{grid-template-columns:1fr 1fr}
      .copyright{display:block}
      .copyright span{display:block;margin-top:7px}
      form{grid-template-columns:1fr}
      .field-wide,.form-foot{grid-column:auto}
    }
    @media(max-width:430px){
      h1{font-size:35px}
      .nav-wrap>.btn{display:none}
      .summary-number{font-size:38px}
      .footer-grid{grid-template-columns:1fr}
    }