/* roulang page: index */
:root{
      --plum:#32152d;
      --wine:#6e244c;
      --berry:#a63760;
      --coral:#ff805f;
      --apricot:#ffc28f;
      --cream:#fffaf5;
      --blush:#f6edf0;
      --ink:#271c25;
      --muted:#756873;
      --line:#eadde1;
      --shadow:0 18px 50px rgba(71,32,58,.12);
      --radius-xl:30px;
      --radius-lg:22px;
      --radius-md:16px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--cream);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;line-height:1.75}
    a{text-decoration:none;color:inherit}
    button,input,select{font:inherit}
    button{cursor:pointer}
    img{max-width:100%;display:block}
    .container{width:min(1180px,calc(100% - 40px));margin:auto}
    .site-header{position:sticky;top:0;z-index:30;background:rgba(255,250,245,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
    .nav-wrap{height:78px;display:flex;align-items:center;gap:28px}
    .logo{display:flex;align-items:center;gap:11px;min-width:max-content}
    .logo-mark{width:38px;height:38px;border-radius:13px;background:linear-gradient(135deg,var(--coral),var(--wine));position:relative;box-shadow:0 8px 18px rgba(166,55,96,.25)}
    .logo-mark:after{content:"18+";position:absolute;color:#fff;font-size:10px;font-weight:800;left:7px;top:8px}
    .logo-main{font-weight:900;letter-spacing:-.04em;font-size:18px}
    .logo-sub{font-size:10px;color:var(--muted);display:block;letter-spacing:.12em}
    .nav-links{display:flex;gap:7px;align-items:center;margin-right:auto}
    .nav-link{padding:10px 14px;border-radius:12px;color:#655560;font-size:14px;transition:.2s}
    .nav-link:hover,.nav-link.active{color:var(--wine);background:#f6e8ed}
    .nav-actions{display:flex;gap:10px}
    .btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:1px solid transparent;border-radius:13px;padding:11px 17px;font-weight:800;font-size:14px;transition:.2s}
    .btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(92,35,69,.16)}
    .btn:active{transform:translateY(0)}
    .btn:focus-visible,.nav-link:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--apricot);outline-offset:3px}
    .btn-outline{border-color:#d8bbc7;color:var(--wine);background:#fffaf7}
    .btn-primary{color:#fff;background:linear-gradient(135deg,var(--coral),var(--berry))}
    .menu-toggle{display:none;border:0;background:transparent;color:var(--plum);font-size:24px}
    .hero{padding:76px 0 30px;background:linear-gradient(125deg,#31152d 0%,#632347 57%,#8d3452 100%);color:#fff;overflow:hidden}
    .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:#ffd6ba;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:7px 12px;font-size:12px;font-weight:800}
    .eyebrow i{width:7px;height:7px;border-radius:50%;background:#ffb287;box-shadow:0 0 0 5px rgba(255,178,135,.12)}
    h1{font-size:clamp(38px,5vw,68px);line-height:1.1;letter-spacing:-.065em;margin:22px 0 20px;max-width:700px}
    .hero-copy{color:#f8dfe5;max-width:650px;font-size:17px;line-height:1.9}
    .hero-actions{display:flex;gap:12px;margin-top:29px;flex-wrap:wrap}
    .hero .btn-outline{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.35)}
    .index-board{background:#fffaf7;color:var(--ink);border-radius:var(--radius-xl);padding:23px;box-shadow:0 24px 55px rgba(27,8,25,.25);transform:rotate(1deg)}
    .board-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:17px;border-bottom:1px solid var(--line)}
    .board-title{font-weight:900;font-size:17px}.board-status{font-size:11px;color:#cb604e;background:#fff0e8;border-radius:99px;padding:6px 9px}
    .board-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}
    .metric{background:var(--blush);border-radius:17px;padding:16px}
    .metric strong{display:block;font-size:28px;line-height:1.2;color:var(--wine);letter-spacing:-.05em}
    .metric span{font-size:12px;color:var(--muted)}
    .board-foot{margin-top:15px;padding:14px;border-radius:15px;background:linear-gradient(110deg,#fff0e7,#f8e5ed);font-size:13px;color:#765c69}
    .agebar{margin-top:46px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 18px;border:1px solid rgba(255,255,255,.18);border-radius:17px;background:rgba(35,10,30,.2);font-size:13px;color:#f7dfe3}
    .agebar strong{color:#ffc39c;margin-right:8px}
    .section{padding:92px 0}
    .section.alt{background:var(--blush)}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px}
    .section-kicker{font-size:12px;font-weight:900;color:var(--berry);letter-spacing:.12em;text-transform:uppercase}
    h2{font-size:clamp(28px,4vw,43px);line-height:1.2;letter-spacing:-.05em;margin:8px 0 0}
    .section-desc{max-width:520px;color:var(--muted);font-size:15px}
    .matrix{display:grid;grid-template-columns:1.35fr .9fr .9fr;grid-template-rows:auto auto;gap:18px}
    .category-card{min-height:220px;border-radius:var(--radius-lg);padding:25px;position:relative;overflow:hidden;border:1px solid var(--line);background:#fff;transition:.25s;box-shadow:0 8px 22px rgba(71,32,58,.05)}
    .category-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
    .category-card.large{grid-row:span 2;min-height:458px;background:linear-gradient(145deg,#fff3ed,#f3dce7)}
    .category-card.dark{background:linear-gradient(145deg,#4a1d3b,#812b52);color:#fff;border-color:transparent}
    .number{display:inline-flex;border-radius:10px;background:rgba(255,128,95,.16);color:var(--berry);padding:5px 9px;font-size:12px;font-weight:900}
    .dark .number{color:#ffd2b6;background:rgba(255,255,255,.13)}
    .category-card h3{font-size:24px;line-height:1.3;margin:22px 0 10px;letter-spacing:-.04em}
    .category-card p{font-size:14px;color:var(--muted);max-width:300px}
    .dark p{color:#f2dce3}
    .card-link{position:absolute;bottom:24px;right:24px;color:var(--wine);font-size:13px;font-weight:900}
    .dark .card-link{color:#ffd0b0}
    .card-orb{position:absolute;width:190px;height:190px;border-radius:50%;right:-65px;bottom:-80px;background:linear-gradient(135deg,rgba(255,128,95,.3),rgba(166,55,96,.1))}
    .mini-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}
    .tag{font-size:11px;padding:5px 9px;border-radius:99px;background:#f8edf0;color:#744d60}
    .dark .tag{background:rgba(255,255,255,.13);color:#ffe9dd}
    .compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}
    .compare-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:27px}
    .compare-panel.featured{background:var(--plum);color:#fff}
    .compare-title{display:flex;justify-content:space-between;align-items:center;font-size:19px;font-weight:900;margin-bottom:22px}
    .compare-row{display:flex;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--line);font-size:14px}
    .featured .compare-row{border-color:rgba(255,255,255,.14)}
    .compare-row span{color:var(--muted)}.featured .compare-row span{color:#eacbd6}
    .pill{font-size:11px;font-weight:800;color:var(--berry);background:#fff0e9;border-radius:99px;padding:5px 9px;white-space:nowrap}
    .featured .pill{color:#ffd0ae;background:rgba(255,255,255,.12)}
    .filter-strip{display:flex;gap:8px;flex-wrap:wrap;margin:25px 0}
    .filter{border:1px solid var(--line);background:#fff;border-radius:99px;padding:9px 15px;color:var(--muted);font-size:13px;transition:.2s}
    .filter:hover,.filter.active{background:var(--wine);color:#fff;border-color:var(--wine)}
    .faq-wrap{display:grid;grid-template-columns:.78fr 1.22fr;gap:45px;align-items:start}
    .faq-note{background:linear-gradient(145deg,#51203e,#762950);border-radius:var(--radius-xl);color:#fff;padding:30px;min-height:230px}
    .faq-note p{color:#f4dce5;font-size:14px}
    .faq-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:8px 24px}
    details{border-bottom:1px solid var(--line);padding:20px 0}
    details:last-child{border:0}summary{cursor:pointer;list-style:none;font-weight:800;padding-right:22px;position:relative}
    summary::-webkit-details-marker{display:none}summary:after{content:"＋";position:absolute;right:0;color:var(--berry)}
    details[open] summary:after{content:"−"}details p{color:var(--muted);font-size:14px;margin:12px 0 0}
    .cta-section{padding:88px 0;background:linear-gradient(120deg,#fff0e8,#f5e4eb)}
    .cta-box{display:grid;grid-template-columns:1fr .85fr;gap:35px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:35px;box-shadow:var(--shadow)}
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:22px}
    .field{width:100%;border:1px solid var(--line);border-radius:12px;background:#fffaf7;padding:12px 14px;color:var(--ink);font-size:14px}
    .field:focus{border-color:var(--berry);outline:0;box-shadow:0 0 0 4px rgba(166,55,96,.1)}
    .form-full{grid-column:1/-1}
    .consent{display:flex;gap:9px;align-items:flex-start;color:var(--muted);font-size:12px;margin:15px 0}
    .consent input{accent-color:var(--berry);margin-top:5px}
    .form-message{font-size:13px;color:var(--berry);margin-top:10px;min-height:20px}
    .cta-panel{background:var(--plum);border-radius:22px;padding:28px;color:#fff;position:relative;overflow:hidden}
    .cta-panel:before{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:rgba(255,128,95,.16);right:-70px;top:-70px}
    .cta-panel h3{position:relative;font-size:25px;line-height:1.35;margin:0 0 15px}
    .cta-panel p{position:relative;color:#e9cfd8;font-size:14px}
    .check-list{position:relative;list-style:none;padding:0;margin:22px 0 0}.check-list li{padding:8px 0;color:#f5e2e4;font-size:13px}.check-list li:before{content:"✓";color:#ffae86;font-weight:900;margin-right:9px}
    footer{background:#241522;color:#fff;padding:48px 0 25px}
    .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:30px;padding-bottom:35px}
    footer h3{font-size:16px;margin:0 0 14px}footer p,footer a{color:#cdb8c5;font-size:13px}footer a{display:block;margin:8px 0;transition:.2s}footer a:hover{color:#ffb18c}
    .footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:18px;color:#aa94a3;font-size:12px;display:flex;justify-content:space-between;gap:20px}
    .modal{position:fixed;inset:0;background:rgba(32,10,27,.72);z-index:60;display:flex;align-items:center;justify-content:center;padding:20px}
    .modal.hidden{display:none}.modal-box{max-width:460px;background:#fffaf7;border-radius:25px;padding:32px;box-shadow:0 25px 80px rgba(0,0,0,.3);text-align:center}
    .modal-badge{display:inline-flex;background:#ffe8dc;color:#a34a48;border-radius:99px;padding:7px 12px;font-weight:900;font-size:13px}
    .modal-box h2{font-size:28px;margin:18px 0 10px}.modal-box p{font-size:14px;color:var(--muted)}
    @media(max-width:1024px){.hero-grid{grid-template-columns:1fr}.index-board{max-width:620px}.matrix{grid-template-columns:1fr 1fr}.category-card.large{grid-row:auto;min-height:300px}.footer-grid{grid-template-columns:1fr 1fr}}
    @media(max-width:768px){.container{width:min(100% - 32px,620px)}.nav-wrap{height:68px}.menu-toggle{display:block;margin-left:auto}.nav-links,.nav-actions{display:none}.nav-links.open{display:flex;position:absolute;top:68px;left:0;right:0;padding:15px 16px;background:#fffaf5;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch}.nav-links.open .nav-link{text-align:center}.nav-actions.open{display:flex;position:absolute;top:240px;left:16px;right:16px;padding:12px;background:#fffaf5;border-bottom:1px solid var(--line)}.hero{padding:55px 0 25px}.section{padding:64px 0}.section-head{display:block}.section-desc{margin-top:15px}.compare,.faq-wrap,.cta-box{grid-template-columns:1fr}.agebar{align-items:flex-start;flex-direction:column}.form-grid{grid-template-columns:1fr}.form-full{grid-column:auto}}
    @media(max-width:520px){h1{font-size:39px}.hero-copy{font-size:15px}.hero-actions,.hero-actions .btn{width:100%}.matrix{grid-template-columns:1fr}.category-card.large{min-height:300px}.board-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr;gap:22px}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:8px}}

/* roulang page: category2 */
:root{
      --plum:#32152d;--wine:#6e244c;--berry:#a63760;--coral:#ff805f;
      --apricot:#ffc28f;--cream:#fffaf5;--blush:#f6edf0;--ink:#271c25;
      --muted:#756873;--line:#eadde1;--shadow:0 18px 50px rgba(71,32,58,.12);
      --radius-xl:30px;--radius-lg:22px;--radius-md:16px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--cream);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;line-height:1.75}
    a{text-decoration:none;color:inherit}
    button,input,select{font:inherit}
    button{cursor:pointer}
    img{display:block;max-width:100%}
    .container{width:min(1180px,calc(100% - 40px));margin:auto}
    .site-header{position:sticky;top:0;z-index:30;background:rgba(255,250,245,.95);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
    .nav-wrap{height:78px;display:flex;align-items:center;gap:28px}
    .logo{display:flex;align-items:center;gap:11px;min-width:max-content}
    .logo-mark{width:38px;height:38px;border-radius:13px;background:linear-gradient(135deg,var(--coral),var(--wine));position:relative;box-shadow:0 8px 18px rgba(166,55,96,.25)}
    .logo-mark:after{content:"18+";position:absolute;color:#fff;font-size:10px;font-weight:800;left:7px;top:8px}
    .logo-main{font-weight:900;letter-spacing:-.04em;font-size:18px}
    .logo-sub{font-size:10px;color:var(--muted);display:block;letter-spacing:.12em}
    .nav-links{display:flex;gap:7px;align-items:center;margin-right:auto}
    .nav-link{padding:10px 14px;border-radius:12px;color:#655560;font-size:14px;transition:.2s}
    .nav-link:hover,.nav-link.active{color:var(--wine);background:#f6e8ed}
    .nav-actions{display:flex;gap:10px}
    .btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:1px solid transparent;border-radius:13px;padding:11px 17px;font-weight:800;font-size:14px;transition:.2s}
    .btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(92,35,69,.16)}
    .btn:active{transform:translateY(0)}
    .btn:focus-visible,.nav-link:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--apricot);outline-offset:3px}
    .btn-outline{border-color:#d8bbc7;color:var(--wine);background:#fffaf7}
    .btn-primary{color:#fff;background:linear-gradient(135deg,var(--coral),var(--berry))}
    .menu-toggle{display:none;border:0;background:transparent;color:var(--plum);font-size:24px}
    .hero{padding:78px 0 42px;background:linear-gradient(125deg,#31152d,#632347 58%,#8d3452);color:#fff;overflow:hidden}
    .hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:55px;align-items:center}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:#ffd6ba;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:7px 12px;font-size:12px;font-weight:800}
    .eyebrow i{width:7px;height:7px;border-radius:50%;background:#ffb287;box-shadow:0 0 0 5px rgba(255,178,135,.12)}
    h1,h2,h3,p{margin-top:0}
    h1{font-size:clamp(38px,5vw,67px);line-height:1.12;letter-spacing:-.06em;margin:20px 0}
    .hero-copy{color:#f8dfe5;max-width:650px;font-size:17px;line-height:1.9}
    .hero-actions{display:flex;gap:12px;margin-top:29px;flex-wrap:wrap}
    .hero .btn-outline{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.35)}
    .board{padding:24px;border-radius:var(--radius-xl);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);box-shadow:0 25px 60px rgba(27,8,25,.18)}
    .board-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.15);padding-bottom:17px}
    .board-title{font-weight:900;font-size:17px}
    .board-code{color:#ffd0ae;font-size:12px}
    .board-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}
    .metric{padding:17px;border-radius:17px;background:rgba(255,255,255,.1)}
    .metric strong{display:block;font-size:28px;line-height:1.1;color:#fff}
    .metric span{display:block;color:#f3cbd5;font-size:12px;margin-top:7px}
    .age-strip{margin-top:34px;padding:15px 18px;border-radius:16px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);display:flex;justify-content:space-between;gap:18px;align-items:center;color:#f7dfe5;font-size:13px}
    .age-badge{color:var(--plum);background:var(--apricot);border-radius:10px;padding:6px 9px;font-weight:900;white-space:nowrap}
    .section{padding:92px 0}
    .section.alt{background:var(--blush)}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px}
    .section-kicker{font-size:12px;font-weight:900;color:var(--berry);letter-spacing:.12em}
    h2{font-size:clamp(28px,3.5vw,43px);line-height:1.2;letter-spacing:-.05em;margin:8px 0}
    .section-desc{max-width:520px;color:var(--muted);font-size:15px}
    .filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
    .filter{border:1px solid var(--line);background:#fff;border-radius:99px;padding:9px 15px;color:var(--muted);font-size:13px;transition:.2s}
    .filter:hover,.filter.active{background:var(--wine);color:#fff;border-color:var(--wine)}
    .topic-layout{display:grid;grid-template-columns:1.35fr .65fr;gap:20px}
    .topic-card{min-height:260px;padding:28px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;position:relative;overflow:hidden;transition:.25s}
    .topic-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
    .topic-card.featured{min-height:430px;background:linear-gradient(145deg,#fff0e5,#f2d7e4)}
    .topic-card.dark{background:linear-gradient(145deg,#4b1c3b,#812b52);color:#fff;border-color:transparent}
    .topic-card h3{font-size:25px;line-height:1.3;letter-spacing:-.04em;margin:20px 0 10px;max-width:350px}
    .topic-card p{color:var(--muted);font-size:14px;max-width:360px}
    .dark p{color:#f1d8e0}
    .topic-card .arrow{position:absolute;right:25px;bottom:23px;font-weight:900;color:var(--berry)}
    .dark .arrow{color:#ffd0ae}
    .topic-glow{position:absolute;width:230px;height:230px;border-radius:50%;right:-70px;bottom:-100px;background:linear-gradient(135deg,rgba(255,128,95,.35),rgba(166,55,96,.06))}
    .index-label{font-size:11px;color:var(--berry);font-weight:900;letter-spacing:.12em}
    .dark .index-label{color:#ffc39f}
    .tag-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:19px}
    .tag{font-size:11px;padding:5px 10px;border-radius:99px;background:#f8edf0;color:#744d60}
    .dark .tag{background:rgba(255,255,255,.13);color:#ffe9dd}
    .topic-side{display:grid;gap:20px}
    .topic-side .topic-card{min-height:205px}
    .compare-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:28px}
    .compare-panel.featured{background:var(--plum);color:#fff;border-color:transparent}
    .compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
    .compare-title{display:flex;justify-content:space-between;align-items:center;font-size:19px;font-weight:900;margin-bottom:18px}
    .compare-row{display:flex;justify-content:space-between;gap:15px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}
    .featured .compare-row{border-color:rgba(255,255,255,.14)}
    .compare-row span{color:var(--muted)}
    .featured .compare-row span{color:#eacbd6}
    .pill{font-size:11px;font-weight:800;color:var(--berry);background:#fff0e9;border-radius:99px;padding:5px 9px;white-space:nowrap}
    .featured .pill{color:#ffd0ae;background:rgba(255,255,255,.12)}
    .faq-wrap{display:grid;grid-template-columns:.78fr 1.22fr;gap:45px;align-items:start}
    .faq-note{background:linear-gradient(145deg,#51203e,#762950);border-radius:var(--radius-xl);color:#fff;padding:30px;min-height:250px}
    .faq-note p{color:#f4dce5;font-size:14px}
    .faq-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:8px 24px}
    details{border-bottom:1px solid var(--line);padding:19px 0}
    details:last-child{border-bottom:0}
    summary{cursor:pointer;font-weight:800;list-style:none;display:flex;justify-content:space-between;gap:15px}
    summary::-webkit-details-marker{display:none}
    summary:after{content:"＋";color:var(--berry);font-size:20px;line-height:1}
    details[open] summary:after{content:"－"}
    details p{color:var(--muted);font-size:14px;margin:12px 28px 0 0}
    .cta-section{padding:88px 0;background:linear-gradient(120deg,#fff0e8,#f5e4eb)}
    .cta-box{display:grid;grid-template-columns:1fr .85fr;gap:35px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:35px;box-shadow:var(--shadow)}
    .cta-box p{color:var(--muted);font-size:15px}
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:22px}
    .form-full{grid-column:1/-1}
    label{font-size:13px;font-weight:800;color:var(--ink)}
    input,select{width:100%;margin-top:7px;border:1px solid var(--line);border-radius:12px;background:#fffaf7;padding:11px 13px;color:var(--ink)}
    .consent{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--muted);font-weight:400}
    .consent input{width:auto;margin-top:5px;accent-color:var(--berry)}
    .form-message{font-size:13px;color:var(--berry);margin-top:10px;min-height:20px}
    .cta-panel{background:var(--plum);border-radius:22px;padding:28px;color:#fff;position:relative;overflow:hidden;min-height:240px}
    .cta-panel:before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-70px;bottom:-110px;background:rgba(255,128,95,.17)}
    .cta-panel h3{font-size:25px;position:relative}
    .cta-panel p{color:#f0d8e0;position:relative}
    .mini-board{position:relative;margin-top:25px;display:flex;gap:9px;flex-wrap:wrap}
    .mini-board span{padding:8px 11px;border-radius:10px;background:rgba(255,255,255,.1);color:#ffd0ae;font-size:12px}
    footer{background:#241321;color:#f4dce5;padding:54px 0 22px}
    .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
    footer .logo-main{color:#fff}
    footer .logo-sub{color:#c9aebb}
    footer p{color:#c9aebb;font-size:13px}
    footer h3{font-size:14px;color:#fff;margin-bottom:12px}
    footer a:not(.logo){display:block;color:#c9aebb;font-size:13px;margin:8px 0;transition:.2s}
    footer a:not(.logo):hover{color:var(--apricot);transform:translateX(2px)}
    .footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:38px;padding-top:18px;display:flex;justify-content:space-between;gap:15px;color:#a98b9c;font-size:12px}
    @media(max-width:1024px){.hero-grid{gap:30px}.topic-layout{grid-template-columns:1fr}.topic-side{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1.3fr 1fr 1fr}}
    @media(max-width:768px){.container{width:min(100% - 32px,600px)}.nav-wrap{height:70px}.menu-toggle{display:block;margin-left:auto}.nav-links,.nav-actions{display:none}.nav-links.open{display:flex;position:absolute;left:16px;right:16px;top:76px;background:#fffaf5;border:1px solid var(--line);border-radius:18px;padding:12px;flex-direction:column;align-items:stretch;box-shadow:var(--shadow)}.nav-links.open .nav-link{text-align:center}.hero{padding:55px 0 30px}.hero-grid,.faq-wrap,.cta-box{grid-template-columns:1fr}.hero h1{font-size:43px}.section{padding:64px 0}.section-head{display:block}.section-desc{margin-top:12px}.compare-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:6px}}
    @media(max-width:520px){.logo-main{font-size:15px}.logo-sub{font-size:9px}.hero h1{font-size:36px}.hero-copy{font-size:15px}.hero-actions .btn{width:100%}.age-strip{align-items:flex-start;flex-direction:column}.topic-side{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-full{grid-column:auto}.footer-grid{grid-template-columns:1fr}.footer-bottom{font-size:11px}}

/* roulang page: category1 */
:root{
 --plum:#32152d;
 --wine:#6e244c;
 --berry:#a63760;
 --coral:#ff805f;
 --apricot:#ffc28f;
 --cream:#fffaf5;
 --blush:#f6edf0;
 --ink:#271c25;
 --muted:#756873;
 --line:#eadde1;
 --shadow:0 18px 50px rgba(71,32,58,.12);
 --radius-xl:30px;
 --radius-lg:22px;
 --radius-md:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;line-height:1.75}
a{text-decoration:none;color:inherit}
button,input,select{font:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}
.container{width:min(1180px,calc(100% - 40px));margin:auto}
.site-header{position:sticky;top:0;z-index:30;background:rgba(255,250,245,.95);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.nav-wrap{height:78px;display:flex;align-items:center;gap:28px}
.logo{display:flex;align-items:center;gap:11px;min-width:max-content}
.logo-mark{width:38px;height:38px;border-radius:13px;background:linear-gradient(135deg,var(--coral),var(--wine));position:relative;box-shadow:0 8px 18px rgba(166,55,96,.25)}
.logo-mark:after{content:"18+";position:absolute;color:#fff;font-size:10px;font-weight:800;left:7px;top:8px}
.logo-main{font-weight:900;letter-spacing:-.04em;font-size:18px}
.logo-sub{font-size:10px;color:var(--muted);display:block;letter-spacing:.12em}
.nav-links{display:flex;gap:7px;align-items:center;margin-right:auto}
.nav-link{padding:10px 14px;border-radius:12px;color:#655560;font-size:14px;transition:.2s}
.nav-link:hover,.nav-link.active{color:var(--wine);background:#f6e8ed}
.nav-actions{display:flex;gap:10px}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:1px solid transparent;border-radius:13px;padding:11px 17px;font-weight:800;font-size:14px;transition:.2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(92,35,69,.16)}
.btn:active{transform:translateY(0)}
.btn:focus-visible,.nav-link:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--apricot);outline-offset:3px}
.btn-outline{border-color:#d8bbc7;color:var(--wine);background:#fffaf7}
.btn-primary{color:#fff;background:linear-gradient(135deg,var(--coral),var(--berry))}
.menu-toggle{display:none;border:0;background:transparent;color:var(--plum);font-size:24px}
.page-hero{padding:78px 0 68px;background:linear-gradient(125deg,#31152d 0%,#632347 57%,#8d3452 100%);color:#fff;overflow:hidden;position:relative}
.page-hero:after{content:"";position:absolute;width:430px;height:430px;border-radius:50%;right:-150px;top:-180px;background:rgba(255,128,95,.13)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:55px;align-items:center;position:relative;z-index:1}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:#ffd6ba;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:7px 12px;font-size:12px;font-weight:800}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:#ffb287;box-shadow:0 0 0 5px rgba(255,178,135,.12)}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(36px,5vw,64px);line-height:1.12;letter-spacing:-.06em;margin:20px 0 18px;font-weight:900}
.hero-copy{color:#f8dfe5;max-width:620px;font-size:16px;line-height:1.9}
.hero-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.hero .btn-outline{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.35)}
.index-board{border:1px solid rgba(255,255,255,.2);background:rgba(39,15,35,.36);border-radius:var(--radius-xl);padding:26px;box-shadow:0 22px 60px rgba(31,10,27,.2)}
.board-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:18px}
.board-title{font-weight:900;font-size:18px}
.board-code{font-size:11px;color:#ffd0b0;letter-spacing:.12em}
.board-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}
.stat{border-radius:18px;padding:18px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12)}
.stat strong{display:block;font-size:29px;line-height:1.1;color:#fff3e9}
.stat span{font-size:12px;color:#eacbd6}
.stat em{font-style:normal;display:block;color:#ffc28f;font-size:11px;margin-top:7px}
.section{padding:84px 0}
.section.alt{background:var(--blush)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px}
.section-kicker{font-size:12px;font-weight:900;color:var(--berry);letter-spacing:.12em}
.section h2{font-size:clamp(27px,4vw,42px);line-height:1.25;letter-spacing:-.05em;margin:8px 0 0}
.section-desc{max-width:520px;color:var(--muted);font-size:15px}
.age-note{margin-top:-1px;background:#fff4eb;border-bottom:1px solid #f1d7c8;color:#704d4d}
.age-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0;font-size:13px}
.age-badge{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:11px;background:var(--coral);color:#fff;font-weight:900;font-size:11px;margin-right:10px}
.filter-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;box-shadow:0 8px 26px rgba(71,32,58,.05)}
.filter-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filter-label{font-size:13px;font-weight:900;color:var(--plum);margin-right:4px}
.filter{border:1px solid var(--line);background:#fffaf8;border-radius:99px;color:var(--muted);padding:8px 14px;font-size:13px;transition:.2s}
.filter:hover,.filter.active{background:var(--wine);color:#fff;border-color:var(--wine)}
.filter:focus-visible{outline:3px solid var(--apricot);outline-offset:2px}
.status-line{display:flex;justify-content:space-between;gap:15px;margin:24px 0 15px;color:var(--muted);font-size:13px}
.content-grid{display:grid;grid-template-columns:1.35fr .85fr .85fr;gap:18px}
.content-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 8px 22px rgba(71,32,58,.05);transition:.25s}
.content-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.content-card.featured{grid-row:span 2}
.cover{height:170px;position:relative;overflow:hidden;background:linear-gradient(135deg,#54203f,#bc526d)}
.featured .cover{height:362px}
.cover:before,.cover:after{content:"";position:absolute;border-radius:50%;filter:blur(1px)}
.cover:before{width:220px;height:220px;right:-45px;top:-80px;background:rgba(255,194,143,.35)}
.cover:after{width:150px;height:150px;left:-30px;bottom:-75px;background:rgba(255,128,95,.38)}
.cover.alt-one{background:linear-gradient(135deg,#381a37,#913d62)}
.cover.alt-two{background:linear-gradient(135deg,#5c253d,#d47c6f)}
.cover.alt-three{background:linear-gradient(135deg,#302044,#9d4260)}
.cover.alt-four{background:linear-gradient(135deg,#6c2a4c,#c45b6d)}
.cover-label{position:absolute;left:17px;top:15px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:99px;padding:5px 9px;font-size:11px;font-weight:800;z-index:1}
.cover-index{position:absolute;right:18px;bottom:14px;color:rgba(255,255,255,.72);font-size:28px;font-weight:900;z-index:1}
.card-body{padding:20px}
.card-body h3{font-size:19px;line-height:1.35;margin-bottom:8px;letter-spacing:-.03em}
.card-body p{font-size:13px;color:var(--muted);margin-bottom:15px}
.meta{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:11px;border-top:1px solid var(--line);padding-top:13px}
.meta b{color:var(--wine);font-weight:900}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:17px}
.card-foot a{font-size:13px;color:var(--wine);font-weight:900}
.badge{font-size:11px;font-weight:900;color:var(--berry);background:#fff0e9;border-radius:99px;padding:5px 9px}
.progress{height:5px;background:#f3e5e8;border-radius:99px;margin-top:17px;overflow:hidden}
.progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--coral),var(--berry))}
.compare-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:22px}
.compare-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:28px;box-shadow:0 8px 22px rgba(71,32,58,.05)}
.compare-panel.featured{background:var(--plum);color:#fff}
.compare-title{display:flex;justify-content:space-between;align-items:center;font-size:19px;font-weight:900;margin-bottom:18px}
.compare-row{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}
.featured .compare-row{border-color:rgba(255,255,255,.14)}
.compare-row span{color:var(--muted)}
.featured .compare-row span{color:#eacbd6}
.pill{font-size:11px;font-weight:800;color:var(--berry);background:#fff0e9;border-radius:99px;padding:5px 9px;white-space:nowrap}
.featured .pill{color:#ffd0ae;background:rgba(255,255,255,.12)}
.faq-wrap{display:grid;grid-template-columns:.78fr 1.22fr;gap:45px;align-items:start}
.faq-note{background:linear-gradient(145deg,#51203e,#762950);border-radius:var(--radius-xl);color:#fff;padding:30px;min-height:230px}
.faq-note p{color:#f4dce5;font-size:14px}
.faq-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:8px 24px}
details{border-bottom:1px solid var(--line);padding:18px 0}
details:last-child{border-bottom:0}
summary{cursor:pointer;list-style:none;font-weight:900;display:flex;justify-content:space-between;gap:15px}
summary::-webkit-details-marker{display:none}
summary:after{content:"＋";color:var(--berry);font-size:20px;line-height:1}
details[open] summary:after{content:"－"}
.answer{color:var(--muted);font-size:14px;padding:12px 25px 0 0}
.cta-section{padding:84px 0;background:linear-gradient(120deg,#fff0e8,#f5e4eb)}
.cta-box{display:grid;grid-template-columns:1fr .85fr;gap:35px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:35px;box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:22px}
.form-full{grid-column:1/-1}
.field label{display:block;font-size:12px;font-weight:900;color:var(--plum);margin-bottom:6px}
.field input,.field select{width:100%;border:1px solid var(--line);border-radius:12px;background:#fffaf8;padding:11px 12px;color:var(--ink)}
.consent{display:flex;gap:8px;align-items:flex-start;color:var(--muted);font-size:12px;margin-top:15px}
.consent input{accent-color:var(--berry);margin-top:5px}
.form-message{font-size:13px;color:var(--berry);margin-top:10px;min-height:20px}
.cta-panel{background:var(--plum);border-radius:22px;padding:28px;color:#fff;position:relative;overflow:hidden;min-height:245px}
.cta-panel:before{content:"";position:absolute;width:200px;height:200px;border-radius:50%;right:-70px;bottom:-90px;background:rgba(255,128,95,.16)}
.cta-panel h3{font-size:26px;line-height:1.3;position:relative}
.cta-panel p{color:#eacbd6;font-size:14px;position:relative}
.signal-list{position:relative;display:grid;gap:10px;margin-top:20px}
.signal-list div{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:8px;font-size:13px}
.signal-list b{color:var(--apricot)}
footer{background:var(--plum);color:#fff;padding:58px 0 22px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
footer p{color:#dfc4d0;font-size:13px}
footer h3{font-size:13px;margin:4px 0 14px;color:#ffd0b0}
footer a:not(.logo){display:block;color:#dfc4d0;font-size:13px;margin:8px 0;transition:.2s}
footer a:not(.logo):hover{color:#fff;transform:translateX(2px)}
footer .logo-main{color:#fff}
footer .logo-sub{color:#cdaeba}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.14);margin-top:38px;padding-top:18px;color:#cdaeba;font-size:12px}
@media(max-width:1024px){.hero-grid,.compare-layout,.cta-box{grid-template-columns:1fr}.content-grid{grid-template-columns:1fr 1fr}.content-card.featured{grid-row:auto}.featured .cover{height:230px}}
@media(max-width:768px){.container{width:min(100% - 32px,600px)}.nav-wrap{height:70px}.menu-toggle{display:block;margin-left:auto}.nav-links,.nav-actions{display:none}.nav-links.open{display:flex;position:absolute;left:16px;right:16px;top:76px;flex-direction:column;align-items:stretch;background:#fffaf5;padding:12px;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.nav-actions.open{display:flex;position:absolute;left:28px;right:28px;top:260px;background:#fffaf5;padding:10px;border-radius:14px}.nav-actions.open .btn{flex:1}.age-inner{align-items:flex-start;flex-direction:column}.page-hero{padding:58px 0}.section{padding:62px 0}.section-head{display:block}.section-desc{margin-top:12px}.faq-wrap{grid-template-columns:1fr;gap:20px}.footer-grid{grid-template-columns:1fr 1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:7px}}
@media(max-width:520px){h1{font-size:37px}.hero-actions,.hero-actions .btn{width:100%}.board-grid,.content-grid,.form-grid{grid-template-columns:1fr}.form-full{grid-column:auto}.filter-row{align-items:flex-start}.filter-label{width:100%}.status-line{display:block}.status-line span{display:block;margin-top:5px}.footer-grid{grid-template-columns:1fr}.cta-box{padding:22px}.index-board{padding:20px}}