/* roulang page: index */
:root{
            --ink:#181416;
            --coal:#241b1e;
            --coal-2:#302226;
            --wine:#8f3d55;
            --wine-deep:#672b40;
            --coral:#c87565;
            --cream:#f6efe9;
            --paper:#fffaf5;
            --muted:#a99a99;
            --line:rgba(255,250,245,.14);
            --line-dark:#eadbd5;
            --shadow:0 20px 55px rgba(39,20,27,.14);
            --radius:18px;
            --container:1200px;
        }
        *,*::before,*::after{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;font-size:16px;line-height:1.75}
        a{color:inherit;text-decoration:none}
        button,input,select,textarea{font:inherit}
        button{cursor:pointer}
        img{max-width:100%;display:block}
        :focus-visible{outline:3px solid #e3a18d;outline-offset:4px}
        .container{width:min(calc(100% - 48px),var(--container));margin:0 auto}
        .top-note{background:#170f12;color:#d7c5c1;font-size:13px;letter-spacing:.03em;text-align:center;padding:8px 20px}
        .site-header{background:var(--coal);color:var(--cream);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
        .nav-wrap{height:78px;display:flex;align-items:center;justify-content:space-between;gap:30px}
        .brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
        .brand-mark{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--coral);color:#24171b;font-size:17px;box-shadow:0 0 0 5px rgba(200,117,101,.12)}
        .brand-name{font-size:18px}
        .nav-list{display:flex;align-items:center;gap:8px;list-style:none;padding:0;margin:0}
        .nav-list a{display:block;padding:9px 15px;color:#cbbbbb;border-radius:10px;transition:.25s ease}
        .nav-list a:hover{color:#fff;background:rgba(255,255,255,.08)}
        .nav-list a.active{color:#fff;background:var(--wine)}
        .nav-list .nav-index{color:#e5b4a7;border:1px solid rgba(229,180,167,.35);margin-left:6px}
        .menu-toggle{display:none;background:transparent;color:var(--cream);border:1px solid var(--line);border-radius:10px;padding:8px 11px;font-size:21px}
        .hero{background:var(--coal);color:var(--cream);padding:76px 0 42px;position:relative;overflow:hidden}
        .hero::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-180px;top:-250px;background:rgba(143,61,85,.24);filter:blur(2px)}
        .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center}
        .eyebrow,.section-kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#e3a18d;font-weight:700}
        h1,h2,h3,p{margin-top:0}
        h1{font-size:clamp(42px,6vw,76px);line-height:1.12;letter-spacing:-.055em;margin:18px 0 24px;max-width:700px}
        .hero-copy{font-size:18px;color:#d5c7c5;max-width:650px;line-height:1.9}
        .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 24px}
        .btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 20px;border-radius:11px;border:1px solid transparent;font-weight:700;transition:.25s ease}
        .btn-primary{background:var(--coral);color:#211417}
        .btn-primary:hover{background:#df927f;transform:translateY(-2px);box-shadow:0 10px 25px rgba(200,117,101,.22)}
        .btn-ghost{border-color:rgba(255,250,245,.25);color:var(--cream)}
        .btn-ghost:hover{border-color:#e3a18d;background:rgba(255,255,255,.06)}
        .trust-line{display:flex;flex-wrap:wrap;gap:18px;color:#a99898;font-size:13px}
        .trust-line span::before{content:"●";color:var(--coral);margin-right:7px}
        .profile-panel{background:#35252b;border:1px solid rgba(255,255,255,.13);border-radius:24px;padding:25px;box-shadow:var(--shadow);transform:rotate(1deg)}
        .profile-top{display:flex;align-items:center;gap:15px;padding-bottom:22px;border-bottom:1px solid var(--line)}
        .profile-avatar{width:62px;height:62px;border-radius:20px;background:linear-gradient(135deg,#c87565,#672b40);display:grid;place-items:center;color:#fff4ed;font-size:25px;font-weight:800}
        .profile-top strong{display:block;font-size:18px}
        .profile-top small{color:#bdaeb0}
        .status{margin-left:auto;background:#493137;color:#e5b4a7;padding:5px 9px;border-radius:20px;font-size:12px}
        .profile-title{font-size:27px;line-height:1.35;margin:24px 0 18px}
        .tags{display:flex;flex-wrap:wrap;gap:8px}
        .tag{display:inline-flex;align-items:center;padding:4px 10px;border-radius:30px;background:#493137;color:#e3c1ba;font-size:12px}
        .profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:25px}
        .profile-stat{border-left:2px solid var(--coral);padding-left:11px}
        .profile-stat b{display:block;font-size:21px;color:#fff}
        .profile-stat span{display:block;color:#aa999b;font-size:12px}
        .topic-strip{padding:18px 0;background:#302226;border-top:1px solid var(--line)}
        .strip-inner{display:flex;gap:10px;overflow:auto;white-space:nowrap}
        .strip-inner .tag{background:transparent;border:1px solid var(--line);padding:7px 13px}
        section{padding:88px 0}
        .section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:34px}
        .section-head h2{font-size:clamp(28px,4vw,45px);line-height:1.25;letter-spacing:-.04em;margin:10px 0 0}
        .section-head p{max-width:570px;color:#76696a;margin:0}
        .metrics{background:#f0e4de;border-bottom:1px solid var(--line-dark)}
        .metrics-band{display:grid;grid-template-columns:1.25fr repeat(3,1fr);align-items:stretch}
        .metric-lead{padding:22px 30px 22px 0;border-right:1px solid #d8c7c1}
        .metric-lead strong{font-size:44px;line-height:1;color:var(--wine-deep);display:block}
        .metric-lead span,.metric small{font-size:13px;color:#77696a}
        .metric{padding:22px 28px;border-right:1px solid #d8c7c1}
        .metric:last-child{border:0}
        .metric b{display:block;font-size:28px;color:var(--ink);line-height:1.3}
        .metric small{display:block;margin-top:3px}
        .matrix{background:var(--paper)}
        .matrix-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr;grid-template-rows:auto auto;gap:18px}
        .feature-card,.small-card{border:1px solid var(--line-dark);border-radius:var(--radius);padding:28px;background:#fffaf5;transition:.25s ease;position:relative;overflow:hidden}
        .feature-card{grid-row:span 2;background:var(--coal);color:var(--cream);min-height:360px;display:flex;flex-direction:column;justify-content:space-between}
        .feature-card::after{content:"01";position:absolute;right:20px;top:6px;font-size:100px;line-height:1;font-weight:800;color:rgba(255,255,255,.05)}
        .small-card:hover,.feature-card:hover{transform:translateY(-4px);border-color:var(--coral);box-shadow:var(--shadow)}
        .small-card h3,.feature-card h3{font-size:22px;line-height:1.35;margin:16px 0 10px}
        .small-card p,.feature-card p{font-size:14px;color:#817476}
        .feature-card p{color:#c9b9b9;max-width:470px}
        .card-meta{display:flex;justify-content:space-between;align-items:center;color:#9b8588;font-size:12px}
        .feature-card .card-meta{color:#c6a9a6}
        .arrow{font-size:22px;color:var(--coral);transition:.25s}
        .small-card:hover .arrow,.feature-card:hover .arrow{transform:translateX(6px)}
        .comparison{background:#21191c;color:var(--cream)}
        .comparison .section-head p{color:#b9a8a8}
        .compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
        .compare-col{padding:30px;background:#2b2023}
        .compare-col.good{background:#3b2930}
        .compare-col h3{margin-bottom:20px;font-size:22px}
        .compare-col ul{list-style:none;padding:0;margin:0}
        .compare-col li{padding:14px 0;border-bottom:1px solid var(--line);color:#c9b9ba}
        .compare-col li:last-child{border:0}
        .compare-col li::before{content:"—";margin-right:12px;color:var(--coral)}
        .calendar{background:#f0e4de}
        .calendar-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:24px;align-items:stretch}
        .calendar-note{background:var(--wine-deep);color:var(--cream);border-radius:var(--radius);padding:30px;display:flex;flex-direction:column;justify-content:end}
        .calendar-note h3{font-size:30px;line-height:1.35;margin-bottom:12px}
        .calendar-note p{color:#e0cacc;font-size:14px}
        .date-list{background:var(--paper);border-radius:var(--radius);padding:8px 25px}
        .date-item{display:grid;grid-template-columns:90px 1fr auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line-dark)}
        .date-item:last-child{border:0}
        .date-item time{font-weight:800;color:var(--wine)}
        .date-item strong{font-size:16px}
        .date-item small{color:#887879}
        .news-layout{display:grid;grid-template-columns:1.4fr .8fr;gap:25px}
        .news-list{border-top:1px solid var(--line-dark)}
        .news-row{display:grid;grid-template-columns:80px 1fr auto;gap:20px;align-items:center;padding:21px 0;border-bottom:1px solid var(--line-dark)}
        .news-row time{font-size:12px;color:var(--wine)}
        .news-row strong{font-size:17px}
        .news-row span{color:var(--coral);font-size:20px}
        .recommend{background:#f0e4de;border-radius:var(--radius);padding:27px}
        .recommend h3{font-size:24px;line-height:1.35}
        .recommend p{font-size:14px;color:#746768}
        .recommend a{color:var(--wine-deep);font-weight:700}
        .faq{background:var(--paper)}
        .faq-list{max-width:900px;border-top:1px solid var(--line-dark)}
        .faq-item{border-bottom:1px solid var(--line-dark)}
        .faq-question{width:100%;background:none;border:0;padding:22px 0;text-align:left;display:flex;justify-content:space-between;gap:20px;color:var(--ink);font-weight:700;font-size:17px}
        .faq-question i{font-style:normal;color:var(--wine);font-size:24px;line-height:1;transition:.2s}
        .faq-answer{display:none;padding:0 45px 22px 0;color:#76696a;font-size:14px}
        .faq-item.open .faq-answer{display:block}
        .faq-item.open .faq-question i{transform:rotate(45deg)}
        .feedback{background:#302226;color:var(--cream)}
        .feedback-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:65px;align-items:start}
        .feedback h2{font-size:42px;line-height:1.25;margin:12px 0 18px}
        .feedback-copy p{color:#c1b0b1}
        .feedback-aside{margin-top:25px;display:flex;flex-wrap:wrap;gap:8px}
        .form-box{background:#fffaf5;color:var(--ink);border-radius:var(--radius);padding:30px}
        .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
        .field{display:flex;flex-direction:column;gap:7px}
        .field.full{grid-column:1/-1}
        label{font-size:13px;font-weight:700}
        input,select,textarea{width:100%;border:1px solid #dfd0ca;border-radius:10px;background:#fff;padding:11px 13px;color:var(--ink);transition:.2s}
        textarea{min-height:112px;resize:vertical}
        input:hover,select:hover,textarea:hover{border-color:#bd8a81}
        input:focus,select:focus,textarea:focus{border-color:var(--wine);box-shadow:0 0 0 3px rgba(143,61,85,.12);outline:0}
        .check{display:flex;align-items:flex-start;gap:8px;margin:16px 0;color:#76696a;font-size:12px}
        .check input{width:16px;margin-top:4px}
        .form-status{display:none;margin-top:14px;color:#5c7d60;font-size:13px}
        .site-footer{background:#170f12;color:#c8b7b8;padding:54px 0 22px}
        .footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:40px;padding-bottom:35px;border-bottom:1px solid var(--line)}
        .footer-brand p{color:#968689;font-size:13px;max-width:340px}
        .footer-title{color:#f6efe9;font-weight:700;margin-bottom:14px}
        .footer-links{display:grid;gap:7px;font-size:14px}
        .footer-links a:hover{color:#e3a18d}
        .copyright{display:flex;justify-content:space-between;gap:20px;padding-top:20px;color:#806f72;font-size:12px}
        @media(max-width:992px){
            .hero-grid{gap:35px}.matrix-grid{grid-template-columns:1fr 1fr}.feature-card{grid-row:auto;grid-column:span 2;min-height:300px}
            .metrics-band{grid-template-columns:1fr 1fr}.metric-lead{grid-column:span 2;border-right:0;border-bottom:1px solid #d8c7c1}.metric:nth-child(3){border-right:0}
            .feedback-grid{gap:35px}.calendar-grid{grid-template-columns:1fr 1.4fr}
        }
        @media(max-width:768px){
            .container{width:min(calc(100% - 32px),var(--container))}
            .nav-wrap{height:68px}.menu-toggle{display:block}.nav-list{display:none;position:absolute;left:16px;right:16px;top:76px;padding:10px;background:#2b2023;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}
            .nav-list.show{display:flex}.nav-list a{padding:12px 14px}.hero{padding:55px 0 30px}.hero-grid{grid-template-columns:1fr}.profile-panel{transform:none;max-width:600px}
            section{padding:64px 0}.section-head{display:block}.section-head p{margin-top:14px}.calendar-grid,.news-layout,.feedback-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.feedback h2{font-size:34px}
        }
        @media(max-width:520px){
            h1{font-size:42px}.hero-copy{font-size:16px}.hero-actions .btn{width:100%}.metrics-band{display:flex;overflow:auto}.metric-lead,.metric{min-width:180px;border-bottom:0;padding:20px}.metric-lead{padding-left:0}.matrix-grid{display:flex;flex-direction:column}.feature-card{min-height:280px}.compare-grid{display:block}.compare-col{border-bottom:1px solid var(--line)}.date-item{grid-template-columns:65px 1fr}.date-item .tag{display:none}.news-row{grid-template-columns:65px 1fr auto;gap:10px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.footer-grid{grid-template-columns:1fr}.copyright{display:block}.copyright span{display:block;margin-top:8px}
        }

/* roulang page: category1 */
:root{
 --ink:#181416;
 --coal:#241b1e;
 --coal-2:#302226;
 --wine:#8f3d55;
 --wine-deep:#672b40;
 --coral:#c87565;
 --cream:#f6efe9;
 --paper:#fffaf5;
 --muted:#a99a99;
 --line:rgba(255,250,245,.14);
 --line-dark:#eadbd5;
 --soft:#f2e5df;
 --shadow:0 20px 55px rgba(39,20,27,.14);
 --shadow-soft:0 10px 30px rgba(39,20,27,.08);
 --radius:18px;
 --container:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;font-size:16px;line-height:1.75}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.035;background-image:radial-gradient(#6c3b44 .7px,transparent .7px);background-size:7px 7px;z-index:-1}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{letter-spacing:-.035em}
.container{width:min(calc(100% - 48px),var(--container));margin:0 auto}
.site-header{background:var(--coal);color:var(--cream);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.nav-wrap{height:78px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.brand-mark{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--coral);color:#24171b;font-size:17px;box-shadow:0 0 0 5px rgba(200,117,101,.12)}
.brand-name{font-size:18px}
.nav-list{display:flex;align-items:center;gap:8px;list-style:none;padding:0;margin:0}
.nav-list a{display:block;padding:9px 15px;color:#cbbbbb;border-radius:10px;transition:.25s ease}
.nav-list a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-list a:focus-visible,.footer-links a:focus-visible,.brand:focus-visible{outline:3px solid #e7a294;outline-offset:3px}
.nav-list a.active{color:#fff;background:var(--wine)}
.menu-toggle{display:none;background:transparent;color:var(--cream);border:1px solid var(--line);border-radius:10px;padding:8px 11px;font-size:21px}
.hero{background:var(--coal);color:var(--cream);padding:68px 0 54px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;width:560px;height:560px;border-radius:50%;right:-210px;top:-270px;background:rgba(143,61,85,.25);filter:blur(2px)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.12fr .88fr;gap:70px;align-items:center}
.eyebrow,.section-kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#e3a18d;font-weight:700}
.hero h1{font-size:clamp(38px,5.3vw,68px);line-height:1.13;margin:16px 0 22px;max-width:690px}
.hero-copy{font-size:18px;color:#d5c7c5;max-width:650px;line-height:1.9}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 24px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 20px;border-radius:11px;border:1px solid transparent;font-weight:700;transition:.25s ease}
.btn-primary{background:var(--coral);color:#211417}
.btn-primary:hover{background:#df927f;transform:translateY(-2px);box-shadow:0 10px 25px rgba(200,117,101,.22)}
.btn-ghost{border-color:rgba(255,250,245,.25);color:var(--cream)}
.btn-ghost:hover{border-color:#e3a18d;background:rgba(255,255,255,.06)}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #d98273;outline-offset:3px}
.breadcrumb{display:flex;gap:10px;align-items:center;color:#bcaeac;font-size:13px;margin-bottom:22px}
.breadcrumb a{color:#e3a18d}
.profile-panel{position:relative;background:#332529;border:1px solid rgba(255,250,245,.16);border-radius:24px;padding:27px;box-shadow:0 24px 60px rgba(0,0,0,.2)}
.profile-panel:before{content:"主题摘要";position:absolute;right:22px;top:20px;color:#e4a393;font-size:12px;letter-spacing:.12em}
.profile-cover{height:130px;border-radius:15px;background:linear-gradient(135deg,#703248 0%,#9f5260 47%,#d07b69 100%);position:relative;overflow:hidden;margin-bottom:23px}
.profile-cover:after{content:"久";position:absolute;right:25px;bottom:-30px;font-size:170px;line-height:1;color:rgba(255,250,245,.16);font-weight:900}
.profile-avatar{position:absolute;left:22px;bottom:-24px;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:var(--cream);color:var(--wine-deep);border:5px solid #332529;font-size:29px;font-weight:900}
.profile-title{font-size:25px;line-height:1.35;margin:25px 0 8px}
.profile-panel p{color:#cbbabb;font-size:14px;margin-bottom:20px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-flex;align-items:center;padding:4px 10px;border-radius:30px;background:#493137;color:#e3c1ba;font-size:12px}
.tag.light{background:#f2dfd8;color:var(--wine-deep)}
.profile-meta{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:24px;padding-top:18px;gap:12px}
.profile-meta strong{display:block;color:#fff;font-size:19px}
.profile-meta span{color:#aa9799;font-size:12px}
.index-strip{background:#302226;color:var(--cream);border-top:1px solid var(--line);padding:16px 0}
.strip-inner{display:flex;align-items:center;gap:16px;overflow:auto;white-space:nowrap}
.strip-label{font-size:12px;color:#d99082;font-weight:700;letter-spacing:.12em}
.strip-inner .tag{background:transparent;border:1px solid var(--line);padding:7px 13px}
main{background:var(--paper)}
section{padding:82px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:34px}
.section-head h2{font-size:clamp(28px,4vw,45px);line-height:1.25;margin:10px 0 0}
.section-head p{max-width:570px;color:#76696a;margin:0}
.index-layout{display:grid;grid-template-columns:280px 1fr;gap:34px;align-items:start}
.filter-box{background:var(--coal);color:var(--cream);border-radius:var(--radius);padding:24px;position:sticky;top:105px}
.filter-box h3{font-size:20px;margin:0 0 18px}
.filter-box p{font-size:13px;color:#bba9aa;margin-bottom:21px}
.filter-list{list-style:none;margin:0;padding:0}
.filter-list li{border-bottom:1px solid var(--line)}
.filter-list a{display:flex;justify-content:space-between;gap:12px;padding:13px 0;color:#cdbdbd;transition:.2s}
.filter-list a:hover,.filter-list a.current{color:#fff;padding-left:5px}
.filter-list a.current{color:#e5a08e}
.filter-list em{font-style:normal;color:#9e8589;font-size:12px}
.topic-list{display:grid;gap:15px}
.topic-item{display:grid;grid-template-columns:74px 1fr auto;gap:21px;align-items:center;background:#fff;border:1px solid var(--line-dark);border-radius:15px;padding:22px 24px;transition:.25s ease}
.topic-item:hover{border-color:var(--coral);box-shadow:var(--shadow-soft);transform:translateX(4px)}
.topic-number{font-size:30px;font-weight:900;color:#d8b5ac;line-height:1}
.topic-item h3{font-size:20px;margin:0 0 5px}
.topic-item p{font-size:14px;color:#7e7070;margin:0;max-width:620px}
.topic-side{display:flex;align-items:center;gap:15px;color:var(--wine);font-weight:700}
.topic-side small{font-size:12px;color:#918080;font-weight:400;white-space:nowrap}
.arrow{font-size:22px;color:var(--coral);transition:.25s}
.topic-item:hover .arrow{transform:translateX(6px)}
.topic-badges{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.feature-band{padding:32px;border-radius:22px;background:#f1e1db;border:1px solid #ead1ca;display:grid;grid-template-columns:1fr 1.15fr;gap:32px;align-items:center}
.feature-band h2{font-size:32px;margin:10px 0 12px;color:var(--wine-deep)}
.feature-band p{color:#715e60;margin:0}
.feature-note{background:var(--coal);color:var(--cream);border-radius:16px;padding:24px 26px;position:relative}
.feature-note strong{display:block;font-size:21px;margin-bottom:8px}
.feature-note p{color:#cbbabb;font-size:14px}
.feature-note .note-line{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:15px;color:#e2a293;font-size:13px}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{padding:25px 23px;border-top:3px solid var(--coral);background:#fff;border-left:1px solid var(--line-dark);border-right:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.step b{font-size:13px;color:var(--wine);letter-spacing:.1em}
.step h3{font-size:20px;margin:12px 0 7px}
.step p{font-size:14px;color:#77696f;margin:0}
.compare-section{background:var(--coal);color:var(--cream)}
.compare-section .section-head p{color:#b9a8a8}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.compare-col{padding:30px;background:#2b2023}
.compare-col.good{background:#3b2930}
.compare-col h3{margin-bottom:20px;font-size:22px}
.compare-col ul{list-style:none;padding:0;margin:0}
.compare-col li{padding:14px 0;border-bottom:1px solid var(--line);color:#c9b9ba}
.compare-col li:last-child{border:0}
.compare-col li:before{content:"—";margin-right:12px;color:var(--coral)}
.faq{background:var(--paper)}
.faq-list{max-width:930px;border-top:1px solid var(--line-dark)}
.faq-list details{border-bottom:1px solid var(--line-dark)}
.faq-list summary{list-style:none;cursor:pointer;padding:21px 42px 21px 0;font-size:18px;font-weight:700;position:relative}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:"+";position:absolute;right:6px;top:17px;color:var(--coral);font-size:25px;font-weight:400}
.faq-list details[open] summary:after{content:"−"}
.faq-answer{padding:0 55px 22px 0;color:#76696a;font-size:15px;max-width:820px}
.cta-section{padding-top:20px;padding-bottom:90px}
.cta-box{display:grid;grid-template-columns:.82fr 1.18fr;gap:45px;background:#f0e1db;border:1px solid #e6cfc8;border-radius:24px;padding:36px}
.cta-box h2{font-size:32px;color:var(--wine-deep);margin:9px 0 13px}
.cta-box p{color:#725e60}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.form-field{display:flex;flex-direction:column;gap:7px}
.form-field.full{grid-column:1/-1}
.form-field label{font-size:13px;color:#614b4f;font-weight:700}
.form-field input,.form-field select,.form-field textarea{width:100%;border:1px solid #d9c2bc;background:#fffaf7;color:var(--ink);border-radius:10px;padding:11px 13px;min-height:45px}
.form-field textarea{min-height:105px;resize:vertical}
.form-field input::placeholder,.form-field textarea::placeholder{color:#a99898}
.form-check{display:flex;align-items:flex-start;gap:9px;color:#806f70;font-size:12px;margin:14px 0}
.form-check input{margin-top:5px;accent-color:var(--wine)}
.form-submit{display:flex;align-items:center;gap:15px;flex-wrap:wrap}
.form-submit .btn{border:0}
.form-status{font-size:13px;color:var(--wine-deep);display:none}
.form-status.show{display:inline-block}
.site-footer{background:var(--coal);color:var(--cream);padding:58px 0 22px;border-top:4px solid var(--wine-deep)}
.footer-grid{display:grid;grid-template-columns:1.6fr .7fr .8fr;gap:50px}
.footer-brand p{max-width:370px;color:#bba9aa;font-size:14px;margin:18px 0 0}
.footer-title{font-weight:800;color:#f1d8d1;margin-bottom:13px}
.footer-links{display:grid;gap:8px}
.footer-links a{color:#bdaeb0;font-size:14px;transition:.2s}
.footer-links a:hover{color:var(--coral);padding-left:4px}
.copyright{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:20px;margin-top:45px;color:#968487;font-size:12px}
.status-card{display:flex;gap:12px;align-items:flex-start;margin-top:20px;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.06);color:#cbbabb;font-size:13px}
.status-dot{width:9px;height:9px;border-radius:50%;background:#d88978;box-shadow:0 0 0 5px rgba(216,137,120,.12);margin-top:8px;flex:none}
@media(max-width:992px){
 .hero-grid{gap:35px}
 .index-layout{grid-template-columns:230px 1fr}
 .topic-item{grid-template-columns:58px 1fr}
 .topic-side{grid-column:2;justify-content:space-between}
 .feature-band,.cta-box{grid-template-columns:1fr}
 .footer-grid{gap:28px}
}
@media(max-width:768px){
 .container{width:min(calc(100% - 32px),var(--container))}
 .nav-wrap{height:70px}
 .menu-toggle{display:block}
 .nav-list{display:none;position:absolute;left:16px;right:16px;top:78px;background:var(--coal-2);padding:10px;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
 .nav-list.open{display:grid}
 .nav-list a{padding:13px 15px}
 .hero{padding:48px 0 40px}
 .hero-grid{grid-template-columns:1fr}
 .hero h1{font-size:43px}
 section{padding:62px 0}
 .section-head{display:block}
 .section-head p{margin-top:16px}
 .index-layout{grid-template-columns:1fr}
 .filter-box{position:static}
 .filter-list{display:flex;gap:8px;overflow:auto}
 .filter-list li{border:0;flex:none}
 .filter-list a{padding:9px 12px;border:1px solid var(--line);border-radius:9px}
 .timeline{grid-template-columns:1fr}
 .compare-grid{grid-template-columns:1fr}
 .footer-grid{grid-template-columns:1fr 1fr}
 .copyright{display:block}
 .copyright span{display:block;margin-bottom:6px}
}
@media(max-width:576px){
 .hero h1{font-size:36px}
 .profile-panel{padding:20px}
 .topic-item{padding:18px;gap:14px}
 .topic-number{font-size:24px}
 .topic-item h3{font-size:18px}
 .topic-side{font-size:14px}
 .feature-band,.cta-box{padding:23px}
 .form-grid{grid-template-columns:1fr}
 .form-field.full{grid-column:auto}
 .footer-grid{grid-template-columns:1fr}
 .strip-inner{margin-right:-16px}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{scroll-behavior:auto!important;transition:none!important}
}

/* roulang page: category2 */
:root{
  --ink:#181416;
  --coal:#241b1e;
  --coal-2:#302226;
  --wine:#8f3d55;
  --wine-deep:#672b40;
  --coral:#c87565;
  --cream:#f6efe9;
  --paper:#fffaf5;
  --muted:#a99a99;
  --soft:#76696a;
  --line:rgba(255,250,245,.14);
  --line-dark:#eadbd5;
  --rose:#f0e1dc;
  --shadow:0 20px 55px rgba(39,20,27,.14);
  --shadow-soft:0 10px 30px rgba(39,20,27,.08);
  --radius:18px;
  --radius-sm:11px;
  --container:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p{margin-top:0}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.035em}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}
ul{margin:0;padding:0}
.container{width:min(calc(100% - 48px),var(--container));margin:0 auto}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--coral);color:var(--ink);padding:8px 14px;border-radius:8px;z-index:99}
.skip-link:focus{left:12px}
.site-header{
  background:var(--coal);
  color:var(--cream);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:20;
}
.nav-wrap{height:78px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.brand-mark{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--coral);color:#24171b;font-size:17px;
  box-shadow:0 0 0 5px rgba(200,117,101,.12)
}
.brand-name{font-size:18px}
.nav-list{display:flex;align-items:center;gap:8px;list-style:none}
.nav-list a{
  display:block;padding:9px 15px;color:#cbbbbb;border-radius:10px;
  transition:.25s ease;
}
.nav-list a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-list a.active{color:#fff;background:var(--wine)}
.menu-toggle{
  display:none;background:transparent;color:var(--cream);
  border:1px solid var(--line);border-radius:10px;padding:8px 11px;font-size:21px;
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid rgba(200,117,101,.7);
  outline-offset:3px;
}
.hero{
  background:var(--coal);color:var(--cream);padding:70px 0 52px;
  position:relative;overflow:hidden;
}
.hero:before{
  content:"";position:absolute;inset:auto auto -220px -160px;width:480px;height:480px;
  border-radius:50%;background:rgba(143,61,85,.2);filter:blur(3px)
}
.hero:after{
  content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  right:-180px;top:-250px;background:rgba(143,61,85,.24);filter:blur(2px)
}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:62px;align-items:center}
.breadcrumb{display:flex;gap:9px;align-items:center;color:#b9a9a8;font-size:13px;margin-bottom:24px}
.breadcrumb a{color:#e2a092}
.eyebrow,.section-kicker{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:#e3a18d;font-weight:700
}
.hero h1{font-size:clamp(36px,5vw,66px);line-height:1.14;margin:15px 0 20px;max-width:720px}
.hero-copy{font-size:18px;color:#d5c7c5;max-width:650px;line-height:1.9}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 0}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:10px 20px;border-radius:11px;
  border:1px solid transparent;font-weight:700;transition:.25s ease
}
.btn-primary{background:var(--coral);color:#211417}
.btn-primary:hover{background:#df927f;transform:translateY(-2px);box-shadow:0 10px 25px rgba(200,117,101,.22)}
.btn-ghost{border-color:rgba(255,250,245,.25);color:var(--cream)}
.btn-ghost:hover{border-color:#e3a18d;background:rgba(255,255,255,.06)}
.hero-panel{
  background:rgba(48,34,38,.94);border:1px solid rgba(255,250,245,.16);
  border-radius:24px;padding:25px;box-shadow:var(--shadow);position:relative
}
.panel-top{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.status{font-size:12px;color:#f0b09e;display:inline-flex;align-items:center;gap:7px}
.status:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 5px rgba(200,117,101,.14)}
.panel-code{font-size:12px;color:#b9a9a8}
.panel-title{font-size:28px;line-height:1.3;margin:23px 0 10px}
.panel-text{font-size:14px;color:#cbbbbb;margin-bottom:22px}
.panel-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.tag{
  display:inline-flex;align-items:center;padding:4px 10px;border-radius:30px;
  background:#493137;color:#e3c1ba;font-size:12px
}
.panel-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.panel-stat{padding:13px 12px;background:rgba(255,255,255,.05);border-radius:12px}
.panel-stat strong{display:block;color:#fff1e9;font-size:22px;line-height:1.2}
.panel-stat span{display:block;color:#ab9999;font-size:12px;margin-top:3px}
.section{padding:88px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:34px}
.section-head h2{font-size:clamp(28px,4vw,45px);line-height:1.25;margin:10px 0 0}
.section-head p{max-width:570px;color:var(--soft);margin:0}
.filter-layout{display:grid;grid-template-columns:280px 1fr;gap:26px;align-items:start}
.filter-panel{
  background:var(--coal);color:var(--cream);border-radius:var(--radius);
  padding:25px;position:sticky;top:104px;box-shadow:var(--shadow)
}
.filter-panel h3{font-size:21px;margin:0 0 8px}
.filter-note{font-size:13px;color:#b9a8a8;margin-bottom:23px}
.filter-group{border-top:1px solid var(--line);padding:20px 0 3px}
.filter-group:first-of-type{border-top:0;padding-top:0}
.filter-label{display:block;color:#edc0b5;font-size:13px;font-weight:700;margin-bottom:11px}
.filter-options{display:flex;flex-wrap:wrap;gap:8px}
.filter-option{
  border:1px solid rgba(255,250,245,.18);background:transparent;
  color:#cfbebd;border-radius:999px;padding:7px 11px;font-size:13px;
  transition:.2s ease
}
.filter-option:hover,.filter-option.is-selected{background:var(--wine);border-color:var(--wine);color:#fff}
.filter-actions{display:flex;gap:9px;margin-top:21px}
.filter-actions .btn{flex:1;min-height:42px;padding:8px 12px;font-size:13px}
.filter-actions .btn-ghost{color:#ddccca}
.result-area{min-width:0}
.result-toolbar{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  border-bottom:1px solid var(--line-dark);padding:0 0 18px;margin-bottom:18px
}
.result-count{font-size:14px;color:var(--soft)}
.result-count strong{font-size:24px;color:var(--wine-deep);margin-right:5px}
.sort-select{
  border:1px solid var(--line-dark);background:#fff;border-radius:10px;
  color:var(--ink);padding:9px 12px;min-height:42px
}
.result-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.result-card{
  border:1px solid var(--line-dark);border-radius:var(--radius);padding:24px;
  background:#fffaf5;transition:.25s ease;min-height:210px;position:relative
}
.result-card:hover{transform:translateY(-4px);border-color:var(--coral);box-shadow:var(--shadow-soft)}
.result-card.large{grid-row:span 2;background:#f0e1dc;min-height:438px;display:flex;flex-direction:column;justify-content:space-between}
.result-number{font-size:12px;letter-spacing:.12em;color:var(--wine);font-weight:800}
.result-card h3{font-size:23px;line-height:1.35;margin:17px 0 9px}
.result-card p{font-size:14px;color:#756869;margin-bottom:20px}
.result-card.large p{max-width:480px}
.card-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto}
.card-meta{color:#9b8588;font-size:12px}
.card-link{color:var(--wine-deep);font-weight:800;white-space:nowrap}
.card-link span{display:inline-block;font-size:20px;transition:.2s}
.result-card:hover .card-link span{transform:translateX(5px)}
.selected-strip{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line-dark);border-radius:13px;
  padding:12px 14px;margin-bottom:18px;font-size:13px;color:var(--soft)
}
.selected-strip .tag{background:var(--rose);color:var(--wine-deep)}
.topic-band{background:var(--coal);color:var(--cream);padding:76px 0}
.topic-band .section-head p{color:#b9a8a8}
.topic-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.topic-col{background:#2b2023;padding:30px}
.topic-col.accent{background:#3b2930}
.topic-col h3{font-size:24px;margin:0 0 16px}
.topic-col p{color:#c9b9ba;font-size:14px}
.topic-list{list-style:none;margin-top:18px}
.topic-list li{padding:13px 0;border-bottom:1px solid var(--line);color:#d8c6c4;display:flex;justify-content:space-between;gap:14px}
.topic-list li:last-child{border-bottom:0}
.topic-list b{color:var(--coral);font-weight:700}
.path-section{background:#f4e9e4}
.path-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:42px;align-items:start}
.path-intro h2{font-size:clamp(29px,4vw,44px);line-height:1.25;margin:10px 0 17px}
.path-intro p{color:var(--soft);max-width:370px}
.path-steps{border-top:1px solid #d9c5be}
.path-step{display:grid;grid-template-columns:58px 1fr auto;gap:20px;align-items:start;padding:22px 0;border-bottom:1px solid #d9c5be}
.step-no{font-size:13px;color:var(--wine);font-weight:800;padding-top:3px}
.path-step h3{font-size:19px;margin:0 0 5px}
.path-step p{font-size:14px;color:var(--soft);margin:0}
.step-arrow{font-size:24px;color:var(--coral)}
.faq-section{background:var(--paper)}
.faq-list{max-width:900px;border-top:1px solid var(--line-dark)}
.faq-item{border-bottom:1px solid var(--line-dark)}
.faq-item summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:20px;padding:21px 0;font-size:17px;font-weight:800
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:"＋";color:var(--wine);font-size:25px;font-weight:400}
.faq-item[open] summary:after{content:"－"}
.faq-answer{max-width:760px;color:var(--soft);font-size:14px;padding:0 45px 22px 0}
.feedback-section{padding-top:25px}
.feedback-box{
  display:grid;grid-template-columns:.72fr 1.28fr;gap:34px;
  background:var(--coal);color:var(--cream);border-radius:24px;padding:38px;
  box-shadow:var(--shadow)
}
.feedback-copy h2{font-size:clamp(28px,4vw,40px);line-height:1.25;margin:10px 0 15px}
.feedback-copy p{color:#c9b9b9;font-size:14px;max-width:350px}
.notice-box{border-left:2px solid var(--coral);padding-left:16px;color:#c9b9b9;font-size:13px;margin-top:28px}
.feedback-form{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.form-field{display:flex;flex-direction:column;gap:7px}
.form-field.full{grid-column:1/-1}
.form-field label{font-size:13px;color:#e8c5bc;font-weight:700}
.form-field input,.form-field select,.form-field textarea{
  width:100%;border:1px solid rgba(255,250,245,.18);border-radius:10px;
  background:#302226;color:#fff7f0;padding:11px 13px;min-height:44px;
  transition:.2s ease
}
.form-field textarea{min-height:108px;resize:vertical}
.form-field input::placeholder,.form-field textarea::placeholder{color:#988788}
.form-field input:hover,.form-field select:hover,.form-field textarea:hover{border-color:#bd766b}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--coral);background:#39282d;outline:0}
.check-row{grid-column:1/-1;display:flex;gap:9px;align-items:flex-start;color:#bcaeae;font-size:12px}
.check-row input{width:17px;height:17px;margin-top:4px;accent-color:var(--coral)}
.form-submit{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.form-submit small{color:#a99898;font-size:12px}
.site-footer{background:var(--coal);color:var(--cream);padding:58px 0 25px;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:40px;padding-bottom:45px}
.footer-brand p{color:#b9a8a8;max-width:340px;font-size:14px;margin:20px 0 0}
.footer-title{font-size:13px;color:#e3a18d;font-weight:800;margin-bottom:15px}
.footer-links{display:flex;flex-direction:column;gap:9px;color:#cbbbbb;font-size:14px}
.footer-links a{width:max-content;transition:.2s}
.footer-links a:hover{color:#fff;border-bottom:1px solid var(--coral)}
.copyright{
  border-top:1px solid var(--line);padding-top:19px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  color:#9f8e8f;font-size:12px
}
.empty-state{
  display:none;border:1px dashed #d6bfba;border-radius:var(--radius);
  padding:40px;text-align:center;color:var(--soft);background:#fff
}
@media (max-width:1200px){
  .hero-grid{gap:38px}
  .filter-layout{grid-template-columns:250px 1fr}
}
@media (max-width:992px){
  .hero-grid{grid-template-columns:1fr}
  .hero-panel{max-width:620px}
  .filter-layout{grid-template-columns:1fr}
  .filter-panel{position:static}
  .filter-group{display:inline-block;vertical-align:top;width:32%;border-top:0;padding:8px 16px 8px 0}
  .filter-actions{max-width:280px}
  .result-grid{grid-template-columns:1fr 1fr}
  .result-card.large{grid-row:auto;min-height:300px;grid-column:1/-1}
  .path-layout{grid-template-columns:1fr;gap:25px}
  .path-intro p{max-width:650px}
}
@media (max-width:768px){
  .container{width:min(calc(100% - 32px),var(--container))}
  .nav-wrap{height:70px}
  .menu-toggle{display:block}
  .nav-list{
    display:none;position:absolute;left:16px;right:16px;top:77px;
    flex-direction:column;align-items:stretch;gap:4px;padding:10px;
    background:var(--coal-2);border:1px solid var(--line);border-radius:14px;
    box-shadow:var(--shadow)
  }
  .nav-list.is-open{display:flex}
  .nav-list a{padding:12px 14px}
  .brand-name{font-size:16px}
  .hero{padding:51px 0 38px}
  .hero h1{font-size:clamp(34px,10vw,52px)}
  .hero-copy{font-size:16px}
  .section{padding:62px 0}
  .section-head{display:block;margin-bottom:25px}
  .section-head p{margin-top:15px}
  .filter-group{display:block;width:100%;padding:17px 0;border-top:1px solid var(--line)}
  .result-toolbar{align-items:flex-start;flex-direction:column}
  .result-grid{grid-template-columns:1fr}
  .result-card.large{grid-column:auto;min-height:260px}
  .topic-grid,.feedback-box{grid-template-columns:1fr}
  .feedback-box{padding:27px 22px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:576px){
  .hero-actions,.form-submit{align-items:stretch;flex-direction:column}
  .hero-actions .btn,.form-submit .btn{width:100%}
  .panel-stats{grid-template-columns:1fr}
  .panel-stat{display:flex;justify-content:space-between;align-items:center}
  .panel-stat strong{font-size:20px}
  .panel-stat span{margin:0}
  .selected-strip{align-items:flex-start}
  .result-card{padding:20px;min-height:0}
  .topic-col{padding:23px}
  .path-step{grid-template-columns:40px 1fr}
  .step-arrow{grid-column:2}
  .feedback-form{grid-template-columns:1fr}
  .form-field.full,.check-row,.form-submit{grid-column:auto}
  .footer-grid{grid-template-columns:1fr}
  .footer-brand{grid-column:auto}
  .copyright{display:block}
  .copyright span{display:block;margin-bottom:7px}
}