/* roulang page: index */
:root{
      --ink:#171619;
      --paper:#f7f4f0;
      --white:#fffdfb;
      --coral:#e85d5d;
      --coral-dark:#c7474d;
      --lime:#b8d84e;
      --pink:#f6d2d0;
      --orange:#ef9b68;
      --muted:#756f70;
      --line:#dfd8d2;
      --shadow:0 16px 38px rgba(41,28,26,.09);
      --soft-shadow:0 7px 18px rgba(41,28,26,.07);
      --radius:20px;
      --pill:999px;
      --ease:220ms ease;
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;background:var(--paper);color:var(--ink);
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
      font-size:16px;line-height:1.75;overflow-x:hidden;
    }
    img{display:block;max-width:100%}
    a{color:inherit;text-decoration:none;transition:color var(--ease),background var(--ease),border-color var(--ease),transform var(--ease)}
    button,input,select{font:inherit}
    button{cursor:pointer}
    :focus-visible{outline:3px solid var(--lime);outline-offset:3px}
    .container{width:min(1180px,calc(100% - 40px));margin:0 auto}
    .site-header{position:sticky;top:0;z-index:20;background:rgba(247,244,240,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
    .topbar{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}
    .brand{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:800;line-height:1.2;max-width:350px}
    .brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:var(--coral);color:#fff;font-size:15px;box-shadow:4px 4px 0 var(--pink)}
    .top-actions{display:flex;align-items:center;gap:12px}
    .age-note{font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:var(--pill);padding:7px 12px;background:var(--white)}
    .menu-toggle{display:none;border:1px solid var(--line);background:var(--white);border-radius:10px;width:44px;height:44px;font-size:20px}
    .button{
      display:inline-flex;align-items:center;justify-content:center;gap:8px;
      min-height:46px;padding:0 20px;border-radius:var(--pill);font-weight:750;border:1px solid transparent;
      transition:transform var(--ease),box-shadow var(--ease),background var(--ease),border-color var(--ease)
    }
    .button:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(232,93,93,.2)}
    .button.primary{background:var(--coral);color:#fff}
    .button.primary:hover{background:var(--coral-dark)}
    .button.dark{background:var(--ink);color:#fff}
    .button.light{background:var(--white);border-color:var(--line)}
    .button.lime{background:var(--lime);color:var(--ink)}
    .tabbar{display:flex;gap:10px;overflow-x:auto;padding:0 0 14px;scrollbar-width:none}
    .tabbar::-webkit-scrollbar{display:none}
    .tab{flex:none;border:1px solid var(--line);border-radius:var(--pill);padding:8px 16px;background:var(--white);font-size:14px;font-weight:700}
    .tab:hover{border-color:var(--coral);background:var(--pink)}
    .tab.active{background:var(--coral);border-color:var(--coral);color:#fff}
    .hero{
      position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:64px 0 54px;
      background-image:linear-gradient(115deg,rgba(232,93,93,.18),transparent 42%),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 31px);
    }
    .hero::after{content:"";position:absolute;right:-10%;top:-55%;width:54%;height:180%;background:linear-gradient(130deg,transparent 20%,rgba(246,210,208,.2),rgba(239,155,104,.24),transparent 70%);transform:rotate(12deg)}
    .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center}
    .eyebrow,.section-kicker{font-size:13px;letter-spacing:0;font-weight:800;text-transform:uppercase;color:var(--lime);margin-bottom:16px}
    .hero h1{font-size:clamp(40px,4.5vw,52px);line-height:1.14;margin:0 0 18px;font-weight:800;max-width:650px}
    .hero-copy{font-size:17px;color:#e8e2dd;max-width:600px;margin:0 0 26px}
    .hero-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
    .hero-meta{display:flex;flex-wrap:wrap;gap:9px;color:#c8c0ba;font-size:13px}
    .meta-chip{border:1px solid rgba(255,255,255,.18);border-radius:var(--pill);padding:6px 11px}
    .preview-wall{min-height:330px;position:relative}
    .preview-card{position:absolute;border-radius:18px;border:1px solid rgba(255,255,255,.16);overflow:hidden;box-shadow:0 22px 40px rgba(0,0,0,.25)}
    .preview-card.large{width:70%;height:260px;right:8%;top:20px;background:linear-gradient(140deg,#8e3e49,#ed9b78 54%,#f5d2cb)}
    .preview-card.small{width:47%;height:180px;left:2%;bottom:10px;background:linear-gradient(145deg,#4c5350,#b7d74d 60%,#e8e5bb)}
    .preview-card::before{content:"非露骨预览";position:absolute;left:20px;bottom:20px;border:1px solid rgba(255,255,255,.5);padding:5px 10px;border-radius:var(--pill);font-size:12px}
    .preview-card::after{content:"01";position:absolute;right:20px;top:16px;font-size:46px;font-weight:800;color:rgba(255,255,255,.7)}
    .data-badge{position:absolute;z-index:2;background:var(--lime);color:var(--ink);border-radius:14px;padding:10px 13px;font-size:13px;font-weight:800;box-shadow:var(--soft-shadow)}
    .badge-one{right:0;top:0}.badge-two{left:0;top:105px;background:var(--pink)}
    .section{padding:88px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:34px}
    .section-kicker{color:var(--coral);margin:0 0 8px}
    h2{font-size:clamp(28px,3vw,36px);line-height:1.25;margin:0;font-weight:800}
    .section-intro{max-width:610px;color:var(--muted);margin:0}
    .solution{background:var(--white)}
    .solution-grid{display:grid;grid-template-columns:.65fr 1.35fr;gap:60px}
    .number-title{font-size:88px;line-height:.9;color:var(--pink);font-weight:850;margin-bottom:22px}
    .note-line{border-left:3px solid var(--coral);padding-left:18px;color:var(--muted)}
    .steps{display:grid;gap:12px}
    .step{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:16px;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:var(--paper);transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease)}
    .step:hover{transform:translateX(4px);border-color:var(--coral);box-shadow:var(--soft-shadow)}
    .step-num{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--pink);font-weight:800;color:var(--coral-dark)}
    .step strong{display:block;font-size:17px}.step small{color:var(--muted)}
    .step-arrow{font-size:22px;color:var(--coral)}
    .feature-band{background:linear-gradient(120deg,#f6d2d0 0%,#fff4ee 50%,#dceca2 100%)}
    .feature-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:20px;align-items:stretch}
    .feature-card{background:var(--white);border:1px solid rgba(23,22,25,.08);border-radius:var(--radius);padding:22px;box-shadow:var(--soft-shadow);position:relative;overflow:hidden}
    .feature-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--coral),var(--orange))}
    .visual{aspect-ratio:16/10;border-radius:16px;margin-bottom:18px;background:linear-gradient(135deg,#e85d5d,#f2b28e 53%,#b8d84e);position:relative;overflow:hidden}
    .visual.square{aspect-ratio:1/1;background:linear-gradient(145deg,#171619,#7d6f70 48%,#f6d2d0)}
    .visual.tall{aspect-ratio:4/5;background:linear-gradient(160deg,#b8d84e,#f6d2d0 54%,#e85d5d)}
    .visual span{position:absolute;left:15px;bottom:14px;background:rgba(255,255,255,.8);color:var(--ink);border-radius:var(--pill);padding:5px 10px;font-size:12px;font-weight:800}
    .feature-card h3{font-size:21px;line-height:1.35;margin:0 0 8px}.feature-card p{color:var(--muted);font-size:14px;margin:0 0 14px}
    .mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
    .card-meta{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:13px;border-top:1px solid var(--line);padding-top:12px}
    .dashboard{background:var(--ink);color:#fff}
    .dashboard .section-intro{color:#c9c1bd}
    .metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
    .metric{border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:22px;background:rgba(255,255,255,.035)}
    .metric b{font-size:35px;color:var(--lime);display:block;line-height:1;margin-bottom:9px}.metric span{font-size:14px;color:#c9c1bd}
    .ranking{margin-top:20px;border-top:1px solid rgba(255,255,255,.15)}
    .rank-row{display:grid;grid-template-columns:55px 1fr 120px 100px;gap:15px;align-items:center;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:14px}
    .rank-row em{font-style:normal;color:var(--pink)}.trend{color:var(--lime)}
    .news-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:30px}
    .news-list{border-top:2px solid var(--ink)}
    .news-item{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
    .news-item a{font-weight:750}.news-item a:hover{color:var(--coral)}.news-item time{color:var(--muted);font-size:13px;white-space:nowrap}
    .side-note{padding:24px;border-radius:var(--radius);background:var(--pink);border:1px solid #ecc1bf}.side-note h3{margin-top:0}.side-note p{color:#655758;font-size:14px}
    .guide{background:#eee9e3}
    .guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .guide-item{background:var(--white);padding:24px;border-radius:16px;border:1px solid var(--line)}
    .guide-item b{display:block;color:var(--coral);font-size:13px;margin-bottom:10px}.guide-item h3{font-size:19px;margin:0 0 8px}.guide-item p{font-size:14px;color:var(--muted);margin:0}
    .feedback{display:grid;grid-template-columns:1fr 1fr;gap:18px}
    .quote{padding:24px;border:1px solid var(--line);background:var(--white);border-radius:18px;position:relative}
    .quote-mark{font-size:38px;color:var(--coral);line-height:1}.quote p{margin:8px 0 18px}.quote footer{color:var(--muted);font-size:13px}
    .faq-wrap{max-width:850px;margin:auto}.accordion{background:transparent;margin:0}.accordion-item{border-bottom:1px solid var(--line)}.accordion-title{font-weight:750;font-size:16px;padding:20px 36px 20px 0;background:transparent;border:0}.accordion-title:hover{color:var(--coral);background:transparent}.accordion-content{background:transparent;border:0;padding:0 30px 20px 0;color:var(--muted);font-size:15px}
    .cta{background:var(--ink);color:#fff;padding:64px 0;position:relative;overflow:hidden}.cta::before{content:"";position:absolute;left:0;top:0;width:38%;height:6px;background:linear-gradient(90deg,var(--coral),var(--orange),var(--lime))}
    .cta-grid{display:flex;justify-content:space-between;align-items:center;gap:35px}.cta h2{max-width:640px}.cta p{color:#c9c1bd;margin:12px 0 0;max-width:620px}.cta-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;min-width:250px}
    .site-footer{background:#111012;color:#fff;padding:52px 0 24px}.footer-grid{display:grid;grid-template-columns:1.4fr .7fr .9fr;gap:55px}.site-footer h3{font-size:17px;margin:0 0 14px}.footer-brand{font-size:20px;font-weight:800}.site-footer p,.site-footer a{color:#aaa3a0;font-size:14px}.site-footer a{display:block;margin:7px 0}.site-footer a:hover{color:var(--lime)}.copyright{border-top:1px solid #302d2e;margin-top:35px;padding-top:18px;color:#777;font-size:12px}
    .age-layer{position:fixed;inset:0;z-index:100;background:rgba(23,22,25,.88);display:grid;place-items:center;padding:20px}.age-box{max-width:470px;background:var(--white);padding:34px;border-radius:22px;box-shadow:0 24px 80px rgba(0,0,0,.35);text-align:center}.age-box h2{font-size:28px}.age-box p{color:var(--muted);font-size:14px}.age-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.is-hidden{display:none!important}
    .back-top{position:fixed;right:20px;bottom:20px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--white);color:var(--ink);box-shadow:var(--soft-shadow);font-size:20px;z-index:10}
    @media(max-width:1023px){.hero-grid{gap:30px}.solution-grid{gap:30px}.footer-grid{gap:25px}}
    @media(max-width:767px){
      .container{width:min(100% - 28px,560px)}.topbar{min-height:68px}.brand{font-size:15px;max-width:235px}.brand-mark{width:30px;height:30px}.age-note{display:none}.menu-toggle{display:block}.top-actions .button{display:none}
      .tabbar{padding-bottom:11px}.tab{padding:8px 13px}.hero{padding:46px 0 40px}.hero-grid,.solution-grid,.feature-layout,.news-layout{grid-template-columns:1fr}.hero h1{font-size:40px}.hero-copy{font-size:16px}.preview-wall{min-height:270px}.preview-card.large{height:210px}.preview-card.small{height:145px}.section{padding:60px 0}.section-head{display:block;margin-bottom:25px}.section-intro{margin-top:12px}.number-title{font-size:70px}.metrics{grid-template-columns:1fr 1fr}.metric{padding:17px}.metric b{font-size:28px}.rank-row{grid-template-columns:35px 1fr 75px;font-size:13px}.rank-row span:nth-child(4){display:none}.guide-grid,.feedback{grid-template-columns:1fr}.cta-grid{display:block}.cta-actions{justify-content:flex-start;margin-top:24px}.footer-grid{grid-template-columns:1fr;gap:25px}.footer-grid>div:nth-child(2),.footer-grid>div:nth-child(3){display:inline-block;vertical-align:top;width:48%}.news-item{display:block}.news-item time{display:block;margin-top:5px}.age-box{padding:27px 21px}}
    @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* roulang page: category1 */
:root{
      --ink:#171619;
      --paper:#f7f4f0;
      --white:#fffdfb;
      --coral:#e85d5d;
      --coral-dark:#c7474d;
      --lime:#b8d84e;
      --pink:#f6d2d0;
      --orange:#ef9b68;
      --muted:#756f70;
      --line:#dfd8d2;
      --shadow:0 16px 38px rgba(41,28,26,.09);
      --soft-shadow:0 7px 18px rgba(41,28,26,.07);
      --radius:20px;
      --pill:999px;
      --ease:220ms ease;
    }
    html{scroll-behavior:smooth}
    *,*::before,*::after{box-sizing:border-box}
    body{
      margin:0;
      background:var(--paper);
      color:var(--ink);
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
      font-size:16px;
      line-height:1.75;
      overflow-x:hidden;
    }
    img{display:block;max-width:100%}
    a{color:inherit;text-decoration:none;transition:color var(--ease),background var(--ease),border-color var(--ease),transform var(--ease)}
    button,input,select{font:inherit}
    button{cursor:pointer}
    :focus-visible{outline:3px solid var(--lime);outline-offset:3px}
    .container{width:min(1180px,calc(100% - 40px));margin:0 auto}
    .site-header{
      position:sticky;top:0;z-index:20;background:rgba(247,244,240,.96);
      border-bottom:1px solid var(--line);backdrop-filter:blur(12px)
    }
    .topbar{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}
    .brand{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:800;line-height:1.2;max-width:360px}
    .brand-mark{
      width:34px;height:34px;display:grid;place-items:center;border-radius:11px;
      background:var(--coral);color:#fff;font-size:15px;box-shadow:4px 4px 0 var(--pink);flex:none
    }
    .top-actions{display:flex;align-items:center;gap:12px}
    .age-label{font-size:13px;color:var(--muted);white-space:nowrap}
    .menu-toggle{
      display:none;border:1px solid var(--line);background:var(--white);border-radius:10px;
      width:44px;height:44px;font-size:20px
    }
    .button{
      display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;
      padding:0 20px;border-radius:var(--pill);font-weight:750;border:1px solid transparent;
      transition:transform var(--ease),box-shadow var(--ease),background var(--ease),border-color var(--ease)
    }
    .button:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(232,93,93,.2)}
    .button.primary{background:var(--coral);color:#fff}
    .button.primary:hover{background:var(--coral-dark)}
    .button.dark{background:var(--ink);color:#fff}
    .button.dark:hover{background:#302d30}
    .button.light{background:var(--white);border-color:var(--line)}
    .button.light:hover{background:var(--pink);border-color:var(--coral)}
    .button.lime{background:var(--lime);color:var(--ink)}
    .tabbar{
      display:flex;gap:9px;overflow-x:auto;padding:0 0 14px;
      scrollbar-width:none
    }
    .tabbar::-webkit-scrollbar{display:none}
    .tab{
      min-height:42px;display:inline-flex;align-items:center;justify-content:center;
      padding:0 17px;border:1px solid var(--line);background:var(--white);
      border-radius:var(--pill);font-size:14px;white-space:nowrap
    }
    .tab:hover{background:var(--pink);border-color:var(--coral)}
    .tab.active{background:var(--coral);border-color:var(--coral);color:#fff}
    .category-hero{
      padding:68px 0 42px;
      background:
        linear-gradient(110deg,rgba(246,210,208,.68),transparent 43%),
        repeating-linear-gradient(0deg,rgba(23,22,25,.035) 0 1px,transparent 1px 31px)
    }
    .category-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:54px;align-items:center}
    .eyebrow,.section-kicker{
      color:var(--coral);font-size:13px;font-weight:800;letter-spacing:0;margin:0 0 12px
    }
    .category-hero h1{font-size:clamp(36px,4.2vw,52px);line-height:1.18;margin:0 0 18px;font-weight:800}
    .hero-copy{max-width:640px;color:var(--muted);font-size:17px;margin:0 0 25px}
    .hero-note{display:flex;flex-wrap:wrap;gap:9px}
    .meta-chip,.tag{
      display:inline-flex;align-items:center;min-height:31px;padding:4px 11px;
      border-radius:var(--pill);font-size:13px
    }
    .meta-chip{border:1px solid var(--line);background:rgba(255,255,255,.65)}
    .tag{background:var(--pink);color:#7f3d41}
    .hero-index{
      min-height:260px;border-radius:var(--radius);position:relative;overflow:hidden;
      background:linear-gradient(145deg,var(--coral),var(--orange) 58%,var(--pink));
      box-shadow:var(--shadow);display:flex;align-items:flex-end;padding:28px
    }
    .hero-index::before{
      content:"";position:absolute;inset:18px;border:1px solid rgba(255,255,255,.48);
      border-radius:15px
    }
    .hero-index strong{position:relative;z-index:1;font-size:116px;line-height:.8;color:rgba(255,255,255,.78)}
    .hero-index span{position:absolute;right:25px;top:24px;color:#fff;font-size:13px;font-weight:800}
    .breadcrumb{padding:18px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
    .breadcrumb a:hover{color:var(--coral)}
    .filter-wrap{padding:28px 0 14px;position:sticky;top:126px;z-index:10;background:rgba(247,244,240,.94);backdrop-filter:blur(10px)}
    .filterbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
    .filterbar select,.searchbox input{
      min-height:44px;border:1px solid var(--line);background:var(--white);color:var(--ink);
      border-radius:10px;padding:0 13px
    }
    .searchbox{display:flex;align-items:center;gap:8px;flex:1;min-width:220px;position:relative}
    .searchbox span{position:absolute;left:14px;color:var(--muted)}
    .searchbox input{width:100%;padding-left:38px}
    .filter-count{background:var(--lime);border-radius:var(--pill);padding:7px 13px;font-size:13px;font-weight:800;white-space:nowrap}
    .clear-button{
      min-width:44px;height:44px;border:1px solid var(--line);background:var(--white);
      border-radius:10px;color:var(--muted)
    }
    .clear-button:hover{border-color:var(--coral);color:var(--coral);background:var(--pink)}
    .content-section{padding:52px 0 92px}
    .content-layout{display:grid;grid-template-columns:220px 1fr;gap:34px;align-items:start}
    .side-index{
      border-right:1px solid var(--line);padding-right:24px;position:sticky;top:202px
    }
    .side-index h2{font-size:18px;margin:0 0 17px}
    .side-index ol{padding:0;margin:0 0 26px;list-style:none;counter-reset:item}
    .side-index li{counter-increment:item;border-top:1px solid var(--line);padding:10px 0;font-size:14px}
    .side-index li::before{content:"0" counter(item);display:inline-block;width:35px;color:var(--coral);font-weight:800}
    .side-index li a:hover{color:var(--coral)}
    .side-tip{background:var(--ink);color:#fff;padding:17px;border-radius:14px;font-size:13px}
    .side-tip b{display:block;color:var(--lime);margin-bottom:6px}
    .featured-card{
      display:grid;grid-template-columns:1fr 1.15fr;gap:0;background:var(--white);
      border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--soft-shadow);
      margin-bottom:24px;transition:transform var(--ease),box-shadow var(--ease)
    }
    .featured-card:hover,.content-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
    .cover{position:relative;overflow:hidden;background:#ddd;min-height:260px}
    .cover img{width:100%;height:100%;object-fit:cover;opacity:.83}
    .cover::after{content:"非露骨预览";position:absolute;left:17px;bottom:16px;color:#fff;border:1px solid rgba(255,255,255,.65);border-radius:var(--pill);padding:4px 10px;font-size:12px;background:rgba(23,22,25,.28)}
    .cover-number{position:absolute;right:17px;top:12px;font-size:54px;font-weight:850;color:rgba(255,255,255,.78)}
    .featured-body{padding:27px}
    .featured-body h2{font-size:27px;line-height:1.35;margin:14px 0 10px}
    .featured-body p,.content-card p{color:var(--muted);font-size:14px;margin:0 0 18px}
    .card-meta{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:13px;border-top:1px solid var(--line);padding-top:13px}
    .card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
    .content-card{
      background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
      overflow:hidden;box-shadow:var(--soft-shadow);transition:transform var(--ease),box-shadow var(--ease)
    }
    .content-card .cover{min-height:190px;aspect-ratio:16/10}
    .content-card:nth-child(2) .cover{aspect-ratio:4/5}
    .content-card:nth-child(3) .cover{aspect-ratio:1/1}
    .card-body{padding:19px}
    .card-body h3{font-size:20px;line-height:1.4;margin:12px 0 8px}
    .card-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}
    .icon-button{
      width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);
      background:var(--white);border-radius:11px;font-size:19px
    }
    .icon-button:hover{color:var(--coral);border-color:var(--coral);background:var(--pink)}
    .editor-note{
      grid-column:1/-1;padding:19px 22px;border-left:5px solid var(--coral);
      background:linear-gradient(90deg,var(--pink),var(--white));border-radius:14px;margin:2px 0
    }
    .editor-note b{font-size:13px;color:var(--coral-dark);display:block;margin-bottom:3px}
    .editor-note p{margin:0;color:var(--muted);font-size:14px}
    .pagination{margin:38px 0 0;display:flex;justify-content:center;gap:8px}
    .pagination li{margin:0}
    .pagination a,.pagination button{
      min-width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);
      background:var(--white);border-radius:10px;color:var(--ink)
    }
    .pagination .current{background:var(--coral);color:#fff;border-radius:10px;padding:0 15px}
    .pagination .disabled{opacity:.42}
    .related-section{padding:74px 0;background:#fffaf7;border-top:1px solid var(--line)}
    .related-flex{display:flex;justify-content:space-between;gap:30px;align-items:end}
    .related-flex h2{font-size:30px;margin:0 0 8px}
    .related-flex p{color:var(--muted);margin:0;max-width:610px}
    .chip-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
    .chip-list a{border:1px solid var(--line);background:var(--white);padding:9px 15px;border-radius:var(--pill);font-size:14px}
    .chip-list a:hover{background:var(--coral);color:#fff;border-color:var(--coral)}
    .faq-section{padding:78px 0}
    .faq-inner{max-width:820px;margin:0 auto}
    .faq-inner h2{font-size:30px;margin:0 0 25px}
    .accordion{background:transparent;margin:0}
    .accordion-item{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden;background:var(--white)}
    .accordion-title{border:0!important;color:var(--ink);font-size:16px;font-weight:750;padding:18px 48px 18px 20px}
    .accordion-title:hover{background:var(--pink)}
    .accordion-content{border:0!important;background:#fffaf7;color:var(--muted);font-size:15px;padding:0 20px 18px}
    .cta{padding:65px 0;background:var(--ink);color:#fff;position:relative;overflow:hidden}
    .cta::before{content{position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--coral),var(--orange),var(--lime))}
    .cta-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:35px;align-items:center}
    .cta h2{font-size:32px;line-height:1.3;margin:0 0 10px}
    .cta p{color:#d7cfca;max-width:680px;margin:0}
    .cta-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
    .site-footer{background:var(--ink);color:#fff;padding:42px 0 26px;border-top:1px solid rgba(255,255,255,.12)}
    .footer-grid{display:grid;grid-template-columns:1.5fr .8fr .8fr;gap:50px;padding-bottom:28px}
    .footer-brand{font-size:19px;font-weight:800;margin-bottom:12px}
    .footer-copy{color:#bdb5b0;font-size:14px;max-width:420px;margin:0}
    .footer-title{font-size:14px;color:var(--lime);font-weight:800;margin:0 0 12px}
    .footer-links{display:grid;gap:8px;color:#d5cdca;font-size:14px}
    .footer-links a:hover{color:var(--pink)}
    .footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:18px;color:#98908c;font-size:13px;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}
    .back-top{
      position:fixed;right:22px;bottom:22px;width:46px;height:46px;border:0;border-radius:50%;
      background:var(--coral);color:#fff;font-size:22px;box-shadow:var(--shadow);z-index:15;
      opacity:0;pointer-events:none;transition:opacity var(--ease),transform var(--ease)
    }
    .back-top.visible{opacity:1;pointer-events:auto}
    .back-top:hover{transform:translateY(-3px);background:var(--coral-dark)}
    .age-overlay{
      position:fixed;inset:0;z-index:100;background:rgba(23,22,25,.82);
      display:grid;place-items:center;padding:20px
    }
    .age-dialog{
      width:min(480px,100%);background:var(--white);border-radius:var(--radius);
      padding:32px;box-shadow:0 25px 70px rgba(0,0,0,.3);text-align:center
    }
    .age-dialog .brand-mark{margin:0 auto 18px}
    .age-dialog h2{font-size:27px;line-height:1.35;margin:0 0 12px}
    .age-dialog p{color:var(--muted);font-size:14px;margin:0 0 23px}
    .age-actions{display:flex;gap:10px;justify-content:center}
    .age-actions .button{flex:1}
    .is-hidden{display:none!important}
    @media (max-width:1023px){
      .category-hero-grid{grid-template-columns:1fr .75fr;gap:30px}
      .content-layout{grid-template-columns:185px 1fr;gap:25px}
      .filter-wrap{top:126px}
      .footer-grid{gap:25px}
    }
    @media (max-width:767px){
      .container{width:min(100% - 28px,620px)}
      .topbar{min-height:68px}
      .brand{font-size:15px;max-width:245px}
      .brand-mark{width:30px;height:30px;border-radius:9px;font-size:13px}
      .top-actions .button{display:none}
      .age-label{font-size:12px}
      .menu-toggle{display:block}
      .category-hero{padding:48px 0 34px}
      .category-hero-grid{grid-template-columns:1fr;gap:28px}
      .category-hero h1{font-size:38px}
      .hero-copy{font-size:16px}
      .hero-index{min-height:170px}
      .hero-index strong{font-size:82px}
      .filter-wrap{top:108px;padding:18px 0 10px}
      .filterbar{display:grid;grid-template-columns:1fr 1fr}
      .searchbox{grid-column:1/-1;min-width:0}
      .filterbar select{width:100%}
      .filter-count{justify-self:start}
      .content-section{padding:38px 0 60px}
      .content-layout{display:block}
      .side-index{position:static;border-right:0;border-bottom:1px solid var(--line);padding:0 0 22px;margin-bottom:24px}
      .side-index ol{display:flex;gap:8px;overflow-x:auto;margin-bottom:18px;padding-bottom:3px}
      .side-index li{border:1px solid var(--line);border-radius:var(--pill);padding:6px 12px;white-space:nowrap}
      .side-index li::before{width:auto;margin-right:5px}
      .side-tip{padding:14px}
      .featured-card{display:block}
      .featured-card .cover{min-height:220px}
      .featured-body{padding:22px}
      .featured-body h2{font-size:23px}
      .card-grid{grid-template-columns:1fr;gap:16px}
      .content-card .cover,.content-card:nth-child(2) .cover,.content-card:nth-child(3) .cover{aspect-ratio:16/10;min-height:0}
      .related-section,.faq-section{padding:56px 0}
      .related-flex{display:block}
      .related-flex h2,.faq-inner h2{font-size:26px}
      .cta{padding:50px 0}
      .cta-grid{grid-template-columns:1fr;gap:24px}
      .cta h2{font-size:27px}
      .cta-actions{justify-content:flex-start}
      .footer-grid{grid-template-columns:1fr;gap:28px;padding-bottom:25px}
      .age-dialog{padding:27px 21px}
      .age-actions{flex-direction:column}
    }
    @media (prefers-reduced-motion:reduce){
      *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
    }
