/* roulang page: index */
:root {
      --berry: #6c2948;
      --berry-deep: #411b32;
      --berry-soft: #f0dfe5;
      --coral: #d98666;
      --apricot: #f6d7b9;
      --oat: #f8f2eb;
      --paper: #fffdf9;
      --ink: #2d2428;
      --muted: #766c70;
      --line: #e5d9d4;
      --green: #668678;
      --shadow: 0 16px 42px rgba(65, 27, 50, .10);
      --shadow-soft: 0 8px 24px rgba(65, 27, 50, .07);
      --radius-lg: 26px;
      --radius-md: 17px;
      --radius-sm: 11px;
      --max: 1200px;
      --ease: all .25s ease;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--oat);
      color: var(--ink);
      font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 16px;
      line-height: 1.8;
      overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; transition: var(--ease); }
    img { display: block; max-width: 100%; height: auto; }
    button, input { font: inherit; }
    button { cursor: pointer; }
    :focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
    .container { width: min(calc(100% - 40px), var(--max)); margin: 0 auto; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--berry);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .eyebrow::before {
      content: "";
      width: 24px;
      height: 2px;
      background: var(--coral);
      border-radius: 2px;
    }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 { color: var(--berry-deep); letter-spacing: -.035em; }
    h1 { font-size: clamp(2.5rem, 5.4vw, 5rem); line-height: 1.12; margin-bottom: 24px; }
    h2 { font-size: clamp(2rem, 3.6vw, 3.15rem); line-height: 1.2; margin-bottom: 18px; }
    h3 { font-size: 1.22rem; line-height: 1.4; margin-bottom: 10px; }
    .muted { color: var(--muted); }
    .section { padding: 96px 0; }
    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 30px;
      margin-bottom: 36px;
    }
    .section-head p { max-width: 580px; margin-bottom: 0; color: var(--muted); }
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 48px;
      padding: 11px 20px;
      border: 1px solid transparent;
      border-radius: var(--radius-sm);
      font-weight: 750;
      line-height: 1.2;
      transition: var(--ease);
    }
    .button:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
    .button:active { transform: translateY(0); }
    .button.primary { background: var(--berry); color: #fff; }
    .button.primary:hover { background: var(--berry-deep); }
    .button.secondary { background: rgba(255,255,255,.58); color: var(--berry); border-color: var(--line); }
    .button.secondary:hover { background: var(--paper); border-color: var(--berry); }
    .button.small { min-height: 40px; padding: 8px 14px; font-size: 14px; }

    .site-header {
      position: relative;
      z-index: 10;
      background: rgba(248,242,235,.94);
      border-bottom: 1px solid var(--line);
    }
    .brand-row {
      min-height: 82px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: var(--berry-deep);
      font-weight: 900;
      font-size: 1.2rem;
      letter-spacing: -.04em;
    }
    .brand-mark {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      background: var(--berry);
      color: #fff;
      border-radius: 13px 13px 13px 4px;
      font-size: 17px;
      box-shadow: 5px 5px 0 var(--apricot);
    }
    .brand-name { max-width: 360px; }
    .header-tools { display: flex; align-items: center; gap: 12px; }
    .status-note { color: var(--muted); font-size: 13px; }
    .channel-bar {
      border-top: 1px solid rgba(229,217,212,.72);
      background: rgba(255,253,249,.6);
    }
    .channel-list {
      display: flex;
      gap: 10px;
      align-items: center;
      min-height: 58px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .channel-list::-webkit-scrollbar { display: none; }
    .channel-list a {
      flex: 0 0 auto;
      padding: 7px 15px;
      border: 1px solid transparent;
      border-radius: 999px;
      color: var(--muted);
      font-size: 14px;
      white-space: nowrap;
    }
    .channel-list a:hover, .channel-list a.active {
      color: var(--berry);
      background: var(--berry-soft);
      border-color: #e6cbd4;
    }

    .hero {
      padding: 76px 0 88px;
      position: relative;
      overflow: hidden;
    }
    .hero::after {
      content: "";
      position: absolute;
      width: 420px;
      height: 420px;
      right: -180px;
      top: 10px;
      border-radius: 50%;
      background: var(--apricot);
      opacity: .35;
      filter: blur(3px);
      z-index: -1;
    }
    .hero-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 68px; align-items: center; }
    .hero-copy { padding-left: 12px; }
    .hero-copy .lead { max-width: 625px; color: var(--muted); font-size: 1.08rem; margin-bottom: 30px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
    .hero-points { display: flex; flex-wrap: wrap; gap: 22px; color: var(--muted); font-size: 13px; }
    .hero-points strong { display: block; color: var(--berry); font-size: 1.2rem; line-height: 1.2; }
    .hero-art { position: relative; min-height: 520px; transform: rotate(2deg); }
    .cover-panel {
      position: absolute;
      inset: 0 7% 4% 4%;
      border-radius: 32px 10px 32px 10px;
      background:
        linear-gradient(145deg, rgba(65,27,50,.95), rgba(108,41,72,.88)),
        repeating-linear-gradient(135deg, transparent 0 15px, rgba(255,255,255,.04) 16px 17px);
      box-shadow: var(--shadow);
      overflow: hidden;
      padding: 34px;
      color: #fff;
    }
    .cover-panel::before, .cover-panel::after {
      content: "";
      position: absolute;
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 50%;
    }
    .cover-panel::before { width: 330px; height: 330px; right: -100px; top: -60px; }
    .cover-panel::after { width: 210px; height: 210px; right: 44px; top: 45px; }
    .cover-kicker { color: var(--apricot); font-size: 13px; letter-spacing: .15em; }
    .cover-title { position: relative; z-index: 1; margin-top: 105px; font-size: clamp(2rem, 4vw, 3.8rem); line-height: 1.15; font-weight: 900; letter-spacing: -.08em; }
    .cover-index { position: absolute; right: 30px; bottom: 28px; color: rgba(255,255,255,.72); font-size: 13px; }
    .floating-card {
      position: absolute;
      right: -7%;
      bottom: 38px;
      width: 230px;
      padding: 20px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: var(--shadow);
      transform: rotate(-5deg);
    }
    .floating-card .mini-label { color: var(--coral); font-size: 12px; font-weight: 800; }
    .floating-card strong { display: block; color: var(--berry-deep); font-size: 1.55rem; line-height: 1.35; margin: 7px 0; }

    .pain-section { background: var(--paper); }
    .pain-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 70px; }
    .issue-list { border-top: 1px solid var(--line); }
    .issue {
      display: grid;
      grid-template-columns: 54px 1fr auto;
      gap: 20px;
      align-items: start;
      padding: 22px 0;
      border-bottom: 1px solid var(--line);
    }
    .issue-num { color: var(--coral); font-size: 13px; font-weight: 900; }
    .issue h3 { margin-bottom: 5px; font-size: 1.1rem; }
    .issue p { color: var(--muted); margin-bottom: 0; font-size: 14px; }
    .tag {
      display: inline-flex;
      align-items: center;
      padding: 5px 10px;
      border-radius: 999px;
      background: var(--berry-soft);
      color: var(--berry);
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }
    .tag.orange { background: #fbe7d8; color: #9b543c; }
    .tag.green { background: #e5eee9; color: #4e6f60; }

    .path-wrap { display: grid; grid-template-columns: 1.25fr .75fr; gap: 28px; align-items: stretch; }
    .path-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .path-card {
      padding: 25px;
      min-height: 190px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      transition: var(--ease);
    }
    .path-card:hover { border-color: var(--coral); transform: translateY(-4px); box-shadow: var(--shadow-soft); }
    .path-card.featured { background: var(--berry); color: #fff; grid-row: span 2; }
    .path-card.featured h3, .path-card.featured .path-num { color: #fff; }
    .path-num { color: var(--coral); font-size: 14px; font-weight: 900; }
    .path-card p { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
    .path-card.featured p { color: rgba(255,255,255,.78); }
    .path-link { color: var(--berry); font-size: 13px; font-weight: 800; }
    .path-card.featured .path-link { color: var(--apricot); }
    .index-board {
      padding: 28px;
      border-radius: var(--radius-lg);
      background: #f4e8dd;
      border: 1px solid #ead7ca;
    }
    .index-board h3 { font-size: 1.4rem; }
    .index-board p { color: var(--muted); font-size: 14px; }
    .index-lines { margin: 25px 0 0; }
    .index-line { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px dashed #d8beb1; font-size: 14px; }
    .index-line span:last-child { color: var(--berry); font-weight: 800; }

    .result-section { background: var(--berry-deep); color: #fff; }
    .result-section h2, .result-section h3 { color: #fff; }
    .result-section .section-head p { color: rgba(255,255,255,.7); }
    .result-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
    .big-result { font-size: clamp(4rem, 10vw, 8rem); font-weight: 900; line-height: .95; color: var(--apricot); letter-spacing: -.08em; }
    .result-caption { max-width: 330px; margin-top: 20px; color: rgba(255,255,255,.75); }
    .result-bars { display: grid; gap: 25px; }
    .bar-row { display: grid; grid-template-columns: 145px 1fr 45px; align-items: center; gap: 16px; font-size: 14px; }
    .bar { height: 9px; background: rgba(255,255,255,.15); border-radius: 9px; overflow: hidden; }
    .bar i { display: block; height: 100%; background: var(--coral); border-radius: inherit; }
    .bar-row:nth-child(2) i { background: var(--apricot); }
    .bar-row:nth-child(3) i { background: #a9c0b4; }
    .bar-row strong { color: var(--apricot); }

    .news-section { background: var(--oat); }
    .news-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; }
    .news-feature {
      min-height: 310px;
      padding: 34px;
      display: flex;
      flex-direction: column;
      justify-content: end;
      border-radius: var(--radius-lg);
      background: linear-gradient(145deg, #f4c9ad, #e8a98d);
      color: var(--berry-deep);
      position: relative;
      overflow: hidden;
    }
    .news-feature::after { content: "99"; position: absolute; right: -12px; top: -52px; color: rgba(255,255,255,.3); font-size: 240px; font-weight: 900; line-height: 1; }
    .news-feature > * { position: relative; z-index: 1; }
    .news-feature p { max-width: 480px; margin-bottom: 0; }
    .news-list { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 10px 24px; }
    .news-item { display: grid; grid-template-columns: 62px 1fr; gap: 15px; padding: 19px 0; border-bottom: 1px solid var(--line); }
    .news-item:last-child { border-bottom: 0; }
    .news-date { color: var(--coral); font-size: 12px; font-weight: 900; }
    .news-item h3 { font-size: 1rem; margin-bottom: 4px; }
    .news-item p { color: var(--muted); font-size: 13px; margin-bottom: 0; }

    .matrix-section { background: var(--paper); }
    .matrix { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .matrix a {
      min-height: 142px;
      padding: 22px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: #fbf4ed;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
    }
    .matrix a:nth-child(2) { background: var(--berry-soft); }
    .matrix a:nth-child(3) { background: #fbe5d7; }
    .matrix a:nth-child(4) { background: #e7eee9; }
    .matrix a:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: var(--coral); }
    .matrix small { color: var(--muted); font-weight: 800; }
    .matrix strong { color: var(--berry-deep); font-size: 1.08rem; }

    .feedback-section { background: #f1e6dd; }
    .quote-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; }
    .quote-main, .quote-side { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px; }
    .quote-main blockquote { margin: 15px 0 26px; font-size: clamp(1.35rem, 2.8vw, 2rem); line-height: 1.55; color: var(--berry-deep); font-weight: 750; }
    .quote-main blockquote::before { content: "“"; color: var(--coral); font-size: 4rem; line-height: .5; vertical-align: -.4em; margin-right: 8px; }
    .quote-source { color: var(--muted); font-size: 13px; }
    .quote-side p { color: var(--muted); font-size: 14px; }
    .quote-side strong { display: block; margin-top: 22px; color: var(--berry); font-size: 2.5rem; line-height: 1; }

    .faq-section { background: var(--oat); }
    .accordion { margin: 0; background: transparent; }
    .accordion-item { border: 1px solid var(--line); border-radius: 14px !important; overflow: hidden; margin-bottom: 12px; background: var(--paper); }
    .accordion-title { color: var(--berry-deep); font-weight: 800; border: 0; padding: 21px 25px; }
    .accordion-title:hover, .accordion-title:focus { color: var(--berry); background: #fff8f1; }
    .accordion-content { border: 0; padding: 0 25px 22px; color: var(--muted); font-size: 14px; background: var(--paper); }

    .cta-section { padding: 78px 0; background: var(--coral); }
    .cta-box { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
    .cta-box h2 { margin-bottom: 8px; color: var(--berry-deep); }
    .cta-box p { margin-bottom: 0; color: #65413d; max-width: 620px; }
    .cta-box .button.primary { background: var(--berry-deep); }
    .cta-box .button.secondary { background: transparent; border-color: rgba(65,27,50,.35); color: var(--berry-deep); }

    footer { padding: 56px 0 24px; background: var(--berry-deep); color: rgba(255,255,255,.7); }
    .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; }
    footer .brand { color: #fff; margin-bottom: 18px; }
    footer .brand-mark { background: var(--coral); box-shadow: 5px 5px 0 rgba(246,215,185,.35); }
    footer p { font-size: 13px; max-width: 310px; }
    .footer-title { color: var(--apricot); font-size: 14px; font-weight: 800; margin-bottom: 13px; }
    .footer-links { display: grid; gap: 8px; font-size: 13px; }
    .footer-links a:hover { color: #fff; }
    .copyright { padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); display: flex; justify-content: space-between; gap: 20px; font-size: 12px; }
    .age-note { color: var(--apricot); }

    @media (max-width: 1024px) {
      .hero-grid, .pain-grid, .result-layout { gap: 38px; }
      .hero-art { min-height: 440px; }
      .matrix { grid-template-columns: repeat(2, 1fr); }
      .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
    }
    @media (max-width: 768px) {
      .container { width: min(calc(100% - 30px), var(--max)); }
      .section { padding: 68px 0; }
      .brand-row { min-height: 70px; }
      .status-note { display: none; }
      .hero { padding: 54px 0 65px; }
      .hero-grid, .pain-grid, .path-wrap, .result-layout, .news-grid, .quote-grid { grid-template-columns: 1fr; }
      .hero-copy { padding-left: 0; }
      .hero-art { min-height: 390px; margin-top: 10px; }
      .floating-card { right: 0; bottom: 22px; }
      .section-head { display: block; }
      .section-head p { margin-top: 12px; }
      .path-card.featured { grid-row: auto; }
      .bar-row { grid-template-columns: 110px 1fr 38px; gap: 10px; }
      .footer-grid { grid-template-columns: 1.5fr 1fr; }
      .cta-box { display: block; }
      .cta-box .cta-actions { margin-top: 25px; }
    }
    @media (max-width: 520px) {
      h1 { font-size: 2.45rem; }
      h2 { font-size: 2rem; }
      .header-tools .button { display: none; }
      .hero-actions .button { width: 100%; }
      .hero-points { gap: 15px; }
      .hero-art { min-height: 330px; }
      .cover-panel { padding: 24px; inset: 0 3% 4% 0; }
      .cover-title { margin-top: 75px; font-size: 2.25rem; }
      .floating-card { width: 195px; padding: 15px; }
      .issue { grid-template-columns: 34px 1fr; gap: 10px; }
      .issue .tag { grid-column: 2; justify-self: start; }
      .path-list, .matrix { grid-template-columns: 1fr; }
      .news-feature { min-height: 260px; padding: 25px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
      .copyright { display: block; }
      .copyright span { display: block; margin-top: 8px; }
    }

/* roulang page: category1 */
:root{
      --berry:#6c2948;--berry-deep:#411b32;--berry-soft:#f0dfe5;
      --coral:#d98666;--apricot:#f6d7b9;--oat:#f8f2eb;--paper:#fffdf9;
      --ink:#2d2428;--muted:#766c70;--line:#e5d9d4;--green:#668678;
      --shadow:0 16px 42px rgba(65,27,50,.10);--shadow-soft:0 8px 24px rgba(65,27,50,.07);
      --radius-lg:26px;--radius-md:17px;--radius-sm:11px;--max:1200px;--ease:all .25s ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--oat);color:var(--ink);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;font-size:16px;line-height:1.8;overflow-x:hidden}
    a{color:inherit;text-decoration:none;transition:var(--ease)}
    a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
    img{display:block;max-width:100%;height:auto}
    button,input{font:inherit}
    button{cursor:pointer}
    .container{width:min(calc(100% - 40px),var(--max));margin:0 auto}
    .site-header{background:rgba(248,242,235,.96);border-bottom:1px solid var(--line);position:relative;z-index:5}
    .brand-row{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{display:inline-flex;align-items:center;gap:12px;color:var(--berry-deep);font-weight:900;font-size:1.2rem;letter-spacing:-.04em}
    .brand-mark{width:40px;height:40px;display:grid;place-items:center;background:var(--berry);color:#fff;border-radius:13px 13px 13px 4px;font-size:17px;box-shadow:5px 5px 0 var(--apricot)}
    .brand-name{max-width:360px}
    .header-tools{display:flex;align-items:center;gap:12px}
    .status-note{color:var(--muted);font-size:13px}
    .channel-list{display:flex;gap:10px;align-items:center;min-height:58px;overflow-x:auto;scrollbar-width:none}
    .channel-list::-webkit-scrollbar{display:none}
    .channel-list a{flex:0 0 auto;padding:7px 15px;border:1px solid transparent;border-radius:999px;color:var(--muted);font-size:14px;white-space:nowrap}
    .channel-list a:hover,.channel-list a.active{color:var(--berry);background:var(--berry-soft);border-color:#e6cbd4}
    .button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:11px 20px;border:1px solid transparent;border-radius:var(--radius-sm);font-weight:750;line-height:1.2;transition:var(--ease)}
    .button:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
    .button:active{transform:translateY(0)}
    .button.primary{background:var(--berry);color:#fff}
    .button.primary:hover{background:var(--berry-deep)}
    .button.secondary{background:rgba(255,255,255,.58);color:var(--berry);border-color:var(--line)}
    .button.secondary:hover{background:var(--paper);border-color:var(--berry)}
    .button.small{min-height:40px;padding:8px 14px;font-size:14px}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--berry);font-size:12px;font-weight:800;letter-spacing:.12em}
    .eyebrow:before{content:"";width:24px;height:2px;background:var(--coral);border-radius:2px}
    h1,h2,h3{color:var(--berry-deep);line-height:1.25;letter-spacing:-.05em;margin:0 0 16px}
    h1{font-size:clamp(2.25rem,5vw,4.5rem);font-weight:900}
    h2{font-size:clamp(1.8rem,3vw,2.8rem)}
    h3{font-size:1.25rem}
    p{margin:0 0 18px}.muted{color:var(--muted)}
    .section{padding:92px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:34px}
    .section-head p{max-width:560px;color:var(--muted);margin-bottom:0}
    .index-hero{padding:72px 0 76px;background:linear-gradient(120deg,var(--oat),#f6e8df);border-bottom:1px solid var(--line)}
    .index-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center}
    .lead{font-size:1.08rem;color:var(--muted);max-width:650px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0}
    .hero-note{display:flex;gap:22px;flex-wrap:wrap;color:var(--muted);font-size:13px}
    .hero-note strong{display:block;color:var(--berry);font-size:1.35rem;line-height:1.3}
    .index-board{background:var(--berry-deep);color:#fff;padding:28px;border-radius:var(--radius-lg);box-shadow:var(--shadow);position:relative;overflow:hidden}
    .index-board:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-70px;top:-70px;background:var(--coral);opacity:.3}
    .board-top{display:flex;justify-content:space-between;gap:15px;color:#e8cbd4;font-size:13px;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:18px}
    .board-title{font-size:1.65rem;font-weight:900;line-height:1.35;margin:25px 0}
    .board-item{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 0;border-top:1px solid rgba(255,255,255,.14);position:relative;z-index:1}
    .board-item span{color:#e8cbd4;font-size:13px}.board-item b{font-size:15px}
    .filter-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:22px;box-shadow:var(--shadow-soft);display:flex;gap:15px;align-items:center;flex-wrap:wrap}
    .filter-label{font-weight:800;color:var(--berry-deep);margin-right:4px}
    .filter-chip{border:1px solid var(--line);background:#fff8f3;color:var(--muted);padding:8px 14px;border-radius:999px;transition:var(--ease)}
    .filter-chip:hover,.filter-chip.active{background:var(--berry-soft);color:var(--berry);border-color:#e6cbd4}
    .feature-layout{display:grid;grid-template-columns:1.4fr .8fr;gap:20px}
    .feature-card,.mini-card,.content-row{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);transition:var(--ease)}
    .feature-card{padding:32px;min-height:280px;position:relative;overflow:hidden}
    .feature-card:after{content:"精选";position:absolute;right:-23px;top:22px;background:var(--apricot);color:var(--berry-deep);padding:5px 30px;transform:rotate(35deg);font-weight:800;font-size:12px}
    .feature-card:hover,.mini-card:hover,.content-row:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);border-color:#d9a7b7}
    .feature-card p,.mini-card p,.content-row p{color:var(--muted);font-size:14px}
    .mini-stack{display:grid;gap:20px}.mini-card{padding:23px}
    .tag{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:var(--berry-soft);color:var(--berry);font-size:12px;font-weight:800;white-space:nowrap}
    .tag.orange{background:#fbe7d8;color:#9b543c}.tag.green{background:#e5eee9;color:#4e6f60}
    .content-list{display:grid;gap:14px}.content-row{padding:22px 25px;display:grid;grid-template-columns:90px 1fr auto;gap:20px;align-items:center}
    .row-number{font-size:2rem;font-weight:900;color:var(--coral);line-height:1}
    .content-row h3{margin:0 0 6px;font-size:1.15rem}.content-row p{margin:0}
    .row-meta{color:var(--muted);font-size:13px;text-align:right;white-space:nowrap}
    .faq-wrap{max-width:850px}.faq-item{border-top:1px solid var(--line);padding:18px 0}
    .faq-item:last-child{border-bottom:1px solid var(--line)}
    .faq-item summary{cursor:pointer;list-style:none;font-weight:800;color:var(--berry-deep);display:flex;justify-content:space-between;gap:20px}
    .faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"＋";color:var(--coral);font-size:20px}
    .faq-item[open] summary:after{content:"－"}.faq-answer{color:var(--muted);padding:12px 35px 2px 0}
    .cta{padding:65px 0;background:var(--berry-deep);color:#fff}.cta-grid{display:flex;align-items:center;justify-content:space-between;gap:35px}.cta h2{color:#fff}.cta p{color:#e8cbd4;max-width:620px}.cta .button.secondary{background:#fff;color:var(--berry-deep);border-color:#fff}
    footer{background:#321526;color:#ead9de;padding:58px 0 22px}.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:35px}.footer-grid .brand{color:#fff}.footer-grid p{font-size:13px;color:#cbb5bc;max-width:310px}.age-note{color:#f0b99d!important}.footer-title{color:#fff;font-weight:800;margin-bottom:13px}.footer-links{display:grid;gap:8px;font-size:13px;color:#cbb5bc}.footer-links a:hover{color:#fff}.copyright{border-top:1px solid rgba(255,255,255,.14);margin-top:42px;padding-top:18px;display:flex;justify-content:space-between;gap:20px;color:#a98d97;font-size:12px}
    @media(max-width:900px){.index-hero-grid,.feature-layout{grid-template-columns:1fr}.index-board{max-width:620px}.footer-grid{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:640px){.container{width:min(calc(100% - 28px),var(--max))}.brand-row{min-height:68px}.brand-name{font-size:1rem}.status-note{display:none}.section{padding:64px 0}.index-hero{padding:55px 0}.hero-actions .button{width:100%}.section-head,.cta-grid{display:block}.section-head .button,.cta .button{margin-top:20px}.content-row{grid-template-columns:45px 1fr;gap:14px}.row-meta{grid-column:2;text-align:left}.feature-card{padding:24px}.footer-grid{grid-template-columns:1fr;gap:25px}.copyright{display:block}.copyright span{display:block;margin-bottom:8px}h1{font-size:2.55rem}}

/* roulang page: category2 */
:root{
      --berry:#6c2948;--berry-deep:#411b32;--berry-soft:#f0dfe5;
      --coral:#d98666;--apricot:#f6d7b9;--oat:#f8f2eb;--paper:#fffdf9;
      --ink:#2d2428;--muted:#766c70;--line:#e5d9d4;--green:#668678;
      --shadow:0 16px 42px rgba(65,27,50,.10);--shadow-soft:0 8px 24px rgba(65,27,50,.07);
      --radius-lg:26px;--radius-md:17px;--radius-sm:11px;--max:1200px;--ease:all .25s ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--oat);color:var(--ink);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;font-size:16px;line-height:1.8;overflow-x:hidden}
    a{color:inherit;text-decoration:none;transition:var(--ease)}
    a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
    img{display:block;max-width:100%;height:auto}
    button,input{font:inherit}
    button{cursor:pointer}
    .container{width:min(calc(100% - 40px),var(--max));margin:0 auto}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--berry);font-size:12px;font-weight:800;letter-spacing:.12em}
    .eyebrow:before{content:"";width:24px;height:2px;background:var(--coral);border-radius:2px}
    .muted{color:var(--muted)}
    .section{padding:92px 0}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:34px}
    .section-head h2{margin:8px 0 0;font-size:clamp(1.8rem,3vw,2.65rem);line-height:1.25;letter-spacing:-.05em}
    .section-head p{max-width:570px;margin:0;color:var(--muted)}
    .button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:11px 20px;border:1px solid transparent;border-radius:var(--radius-sm);font-weight:750;line-height:1.2;transition:var(--ease)}
    .button:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
    .button:active{transform:translateY(0)}
    .button.primary{background:var(--berry);color:#fff}
    .button.primary:hover{background:var(--berry-deep)}
    .button.secondary{background:rgba(255,255,255,.58);color:var(--berry);border-color:var(--line)}
    .button.secondary:hover{background:var(--paper);border-color:var(--berry)}
    .button.small{min-height:40px;padding:8px 14px;font-size:14px}
    .site-header{position:relative;z-index:10;background:rgba(248,242,235,.96);border-bottom:1px solid var(--line)}
    .brand-row{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{display:inline-flex;align-items:center;gap:12px;color:var(--berry-deep);font-weight:900;font-size:1.2rem;letter-spacing:-.04em}
    .brand-mark{width:40px;height:40px;display:grid;place-items:center;background:var(--berry);color:#fff;border-radius:13px 13px 13px 4px;font-size:17px;box-shadow:5px 5px 0 var(--apricot)}
    .brand-name{max-width:360px}
    .header-tools{display:flex;align-items:center;gap:12px}
    .status-note{color:var(--muted);font-size:13px}
    .channel-list{display:flex;gap:10px;align-items:center;min-height:58px;overflow-x:auto;scrollbar-width:none}
    .channel-list::-webkit-scrollbar{display:none}
    .channel-list a{flex:0 0 auto;padding:7px 15px;border:1px solid transparent;border-radius:999px;color:var(--muted);font-size:14px;white-space:nowrap}
    .channel-list a:hover,.channel-list a.active{color:var(--berry);background:var(--berry-soft);border-color:#e6cbd4}
    .topic-hero{padding:78px 0 76px;background:var(--paper);border-bottom:1px solid var(--line)}
    .topic-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:center}
    .topic-hero h1{margin:14px 0 20px;max-width:720px;font-size:clamp(2.45rem,5vw,4.7rem);line-height:1.13;letter-spacing:-.08em;color:var(--berry-deep)}
    .topic-hero h1 em{font-style:normal;color:var(--coral)}
    .topic-hero .lead{max-width:650px;margin:0 0 28px;color:var(--muted);font-size:1.08rem}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px}
    .index-panel{position:relative;padding:30px;background:var(--berry-deep);color:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
    .index-panel:after{content:"";position:absolute;width:220px;height:220px;right:-80px;top:-100px;border:35px solid rgba(246,215,185,.18);border-radius:50%}
    .panel-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:18px}
    .panel-top span{font-size:12px;color:#e9cfd8;letter-spacing:.12em}
    .panel-top strong{font-size:1.5rem;color:var(--apricot)}
    .index-list{margin:20px 0 0;padding:0;list-style:none}
    .index-list li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12)}
    .index-list li:last-child{border-bottom:0}
    .index-list b{font-size:13px;color:var(--apricot)}
    .index-list span{color:#fff;font-weight:700}
    .filter-strip{padding:20px 0;background:#f4e8df;border-bottom:1px solid var(--line)}
    .filter-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
    .filter-label{color:var(--berry);font-weight:800}
    .filter-buttons{display:flex;flex-wrap:wrap;gap:8px}
    .filter-button{padding:8px 14px;background:var(--paper);border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:13px;transition:var(--ease)}
    .filter-button:hover,.filter-button.active{background:var(--berry);border-color:var(--berry);color:#fff}
    .timeline{position:relative;margin-top:16px}
    .timeline:before{content:"";position:absolute;left:142px;top:0;bottom:0;width:1px;background:var(--line)}
    .timeline-item{display:grid;grid-template-columns:142px 1fr;gap:42px;padding:0 0 32px;position:relative}
    .timeline-date{padding-top:23px;color:var(--berry);font-weight:800;font-size:14px}
    .timeline-dot{position:absolute;left:136px;top:28px;width:13px;height:13px;background:var(--coral);border:3px solid var(--oat);border-radius:50%;z-index:1}
    .update-card{display:grid;grid-template-columns:1fr 220px;gap:26px;padding:28px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);transition:var(--ease)}
    .update-card:hover{transform:translateY(-4px);border-color:#d4a1ad;box-shadow:var(--shadow)}
    .card-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px}
    .tag{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:var(--berry-soft);color:var(--berry);font-size:12px;font-weight:800;white-space:nowrap}
    .tag.orange{background:#fbe7d8;color:#9b543c}
    .tag.green{background:#e5eee9;color:#4e6f60}
    .update-card h3{margin:0 0 10px;font-size:1.35rem;line-height:1.4;color:var(--berry-deep)}
    .update-card p{margin:0;color:var(--muted);font-size:14px}
    .update-visual{min-height:150px;display:flex;align-items:end;padding:18px;border-radius:14px;background:linear-gradient(135deg,var(--berry-soft),var(--apricot));position:relative;overflow:hidden}
    .update-visual:before{content:"专题";position:absolute;right:14px;top:12px;color:rgba(108,41,72,.26);font-weight:900;font-size:2.8rem;letter-spacing:-.12em}
    .update-visual strong{font-size:2.4rem;line-height:1;color:var(--berry-deep)}
    .read-link{display:inline-flex;margin-top:19px;color:var(--berry);font-weight:800;font-size:14px}
    .read-link:hover{color:var(--coral);gap:5px}
    .matrix-section{background:var(--paper)}
    .matrix-grid{display:grid;grid-template-columns:1.3fr .7fr .9fr;gap:16px}
    .matrix-card{min-height:230px;padding:26px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--oat);position:relative;overflow:hidden;transition:var(--ease)}
    .matrix-card.large{grid-row:span 2;min-height:480px;background:var(--berry);color:#fff}
    .matrix-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
    .matrix-card h3{margin:44px 0 10px;font-size:1.35rem;line-height:1.4;color:var(--berry-deep)}
    .matrix-card.large h3{font-size:2rem;color:#fff}
    .matrix-card p{margin:0;color:var(--muted);font-size:14px}
    .matrix-card.large p{color:#ead9df}
    .matrix-number{position:absolute;right:22px;top:17px;color:var(--coral);font-size:2.4rem;font-weight:900;line-height:1}
    .matrix-card.large .matrix-number{color:var(--apricot)}
    .hot-section{padding-top:0;background:var(--paper)}
    .hot-layout{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
    .rank-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
    .rank-list li{display:grid;grid-template-columns:42px 1fr auto;gap:15px;align-items:center;padding:17px 0;border-bottom:1px solid var(--line)}
    .rank-no{color:var(--coral);font-weight:900;font-size:1.25rem}
    .rank-title{font-weight:750;color:var(--berry-deep)}
    .rank-title small{display:block;color:var(--muted);font-size:12px;font-weight:400}
    .rank-state{padding:4px 9px;border-radius:999px;background:#e5eee9;color:var(--green);font-size:12px}
    .quote-band{padding:28px 30px;background:#f4e8df;border-radius:var(--radius-lg);border-left:5px solid var(--coral)}
    .quote-band blockquote{margin:0;color:var(--berry-deep);font-size:1.35rem;line-height:1.65;font-weight:750}
    .quote-band cite{display:block;margin-top:17px;color:var(--muted);font-size:13px;font-style:normal}
    .faq-section{background:var(--oat)}
    .faq-wrap{max-width:860px;margin:0 auto}
    .accordion{background:transparent;margin:0;border:0}
    .accordion-item{margin-bottom:10px;border:1px solid var(--line)!important;border-radius:var(--radius-sm);overflow:hidden;background:var(--paper)}
    .accordion-title{padding:18px 22px;color:var(--berry-deep);font-weight:800;border:0!important;font-size:1rem}
    .accordion-title:hover{background:var(--berry-soft);color:var(--berry)}
    .accordion-content{padding:0 22px 20px;border:0;background:var(--paper);color:var(--muted);font-size:14px}
    .cta{padding:72px 0;background:var(--berry-deep);color:#fff}
    .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
    .cta h2{margin:0 0 8px;font-size:clamp(1.8rem,3vw,2.7rem);line-height:1.25}
    .cta p{margin:0;color:#ead9df;max-width:650px}
    .cta .button.secondary{background:transparent;border-color:#a87589;color:#fff}
    .cta .button.secondary:hover{background:var(--berry);border-color:var(--berry)}
    footer{padding:58px 0 24px;background:#2f1827;color:#ead9df}
    .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
    footer .brand{color:#fff}
    footer .brand-mark{box-shadow:5px 5px 0 var(--coral)}
    footer p{margin:17px 0 0;color:#cbb6bf;font-size:13px;max-width:310px}
    footer .age-note{color:var(--apricot)}
    .footer-title{margin-bottom:12px;color:#fff;font-weight:800}
    .footer-links{display:grid;gap:8px;font-size:13px}
    .footer-links a{color:#cbb6bf}
    .footer-links a:hover{color:var(--apricot);padding-left:3px}
    .copyright{display:flex;justify-content:space-between;gap:20px;margin-top:42px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);font-size:12px;color:#bca8b0}
    @media(max-width:900px){
      .topic-hero-grid,.hot-layout{grid-template-columns:1fr;gap:38px}
      .matrix-grid{grid-template-columns:1fr 1fr}
      .matrix-card.large{grid-row:auto;grid-column:span 2;min-height:300px}
      .footer-grid{grid-template-columns:1.4fr 1fr 1fr}
      .footer-grid>div:last-child{grid-column:span 1}
    }
    @media(max-width:640px){
      .container{width:min(calc(100% - 28px),var(--max))}
      .brand-row{min-height:68px}
      .brand-name{font-size:1rem;max-width:210px}
      .brand-mark{width:36px;height:36px}
      .header-tools .status-note{display:none}
      .topic-hero{padding:55px 0 58px}
      .topic-hero h1{font-size:clamp(2.25rem,12vw,3.4rem)}
      .filter-inner{display:block}
      .filter-label{display:block;margin-bottom:12px}
      .timeline:before{left:8px}
      .timeline-item{display:block;padding-left:31px}
      .timeline-date{padding:0 0 8px}
      .timeline-dot{left:2px;top:8px}
      .update-card{grid-template-columns:1fr;padding:21px}
      .update-visual{min-height:120px}
      .matrix-grid{grid-template-columns:1fr}
      .matrix-card.large{grid-column:auto;min-height:280px}
      .section{padding:65px 0}
      .section-head{display:block}
      .section-head p{margin-top:13px}
      .cta-inner{display:block}
      .cta-actions{display:flex;flex-wrap:wrap;margin-top:24px}
      .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
      .footer-grid>div:first-child{grid-column:span 2}
      .copyright{display:block;margin-top:30px}
      .copyright span{display:block;margin-top:6px}
    }
    @media(prefers-reduced-motion:reduce){
      *,*:before,*:after{scroll-behavior:auto!important;transition:none!important}
    }