/* roulang page: index */
:root{
      --bg:#f6f3eb;
      --bg-soft:#fcfbf6;
      --surface:#fffdf8;
      --surface-2:#eef5f0;
      --surface-3:#f8f6ef;
      --text:#24322c;
      --muted:#66736c;
      --line:#d7e1da;
      --line-strong:#bfd0c6;
      --primary:#2aa58d;
      --primary-dark:#1f7665;
      --primary-soft:#dcf1eb;
      --accent:#ee8c6f;
      --accent-soft:#f9e0d6;
      --warning:#e4c765;
      --warning-soft:#f7edc8;
      --shadow:0 14px 30px rgba(39, 58, 49, .08);
      --shadow-soft:0 8px 20px rgba(39, 58, 49, .06);
      --radius:6px;
      --radius-sm:4px;
      --container:1280px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
      background:
        linear-gradient(180deg, rgba(255,255,255,.56), rgba(255,255,255,0)),
        linear-gradient(180deg, #fbf9f3 0%, #f6f3eb 100%);
      color:var(--text);
      line-height:1.7;
      overflow-x:hidden;
      text-rendering:optimizeLegibility;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(42,165,141,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(42,165,141,.05) 1px, transparent 1px);
      background-size:24px 24px;
      opacity:.45;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.08) 30%, rgba(0,0,0,0));
    }
    a{
      color:inherit;
      text-decoration:none;
      transition:color .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
    }
    img{max-width:100%;display:block}
    button,
    input,
    select,
    textarea{
      font:inherit;
      color:inherit;
    }
    button{
      cursor:pointer;
    }
    :focus-visible{
      outline:2px solid var(--primary);
      outline-offset:2px;
    }
    .grid-container{
      width:min(100%, var(--container));
      padding-left:1rem;
      padding-right:1rem;
    }
    .off-canvas-wrapper,
    .off-canvas-content{
      min-height:100vh;
      background:transparent;
    }
    .skip-link{
      position:absolute;
      left:-9999px;
      top:auto;
      width:1px;
      height:1px;
      overflow:hidden;
    }
    .skip-link:focus{
      left:1rem;
      top:1rem;
      width:auto;
      height:auto;
      z-index:2000;
      padding:.6rem .9rem;
      border-radius:var(--radius);
      background:var(--surface);
      box-shadow:var(--shadow);
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:1000;
      background:rgba(252,249,243,.92);
      border-bottom:1px solid rgba(215,225,218,.92);
      backdrop-filter:blur(10px);
      box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
    }
    .header-inner{
      min-height:74px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:.7rem;
      font-weight:800;
      letter-spacing:0;
      color:var(--text);
      white-space:nowrap;
    }
    .brand-mark{
      width:1.65rem;
      height:1.65rem;
      border-radius:4px;
      background:
        linear-gradient(135deg, rgba(42,165,141,.95), rgba(42,165,141,.72)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 2px, transparent 2px 4px);
      box-shadow:0 0 0 1px rgba(31,118,101,.18) inset;
      position:relative;
      flex:0 0 auto;
    }
    .brand-mark::after{
      content:"";
      position:absolute;
      left:4px;
      top:4px;
      width:6px;
      height:6px;
      background:rgba(255,255,255,.8);
      box-shadow:8px 0 0 rgba(255,255,255,.65), 0 8px 0 rgba(255,255,255,.5);
    }
    .desktop-nav{
      display:flex;
      align-items:center;
      gap:.35rem;
      flex-wrap:wrap;
    }
    .desktop-nav a{
      padding:.55rem .9rem;
      border-radius:var(--radius);
      color:var(--muted);
      border:1px solid transparent;
    }
    .desktop-nav a:hover,
    .desktop-nav a:focus-visible{
      color:var(--text);
      background:var(--surface);
      border-color:var(--line);
      transform:translateY(-1px);
    }
    .desktop-nav a.is-active,
    .desktop-nav a[aria-current="page"]{
      color:var(--primary-dark);
      background:var(--primary-soft);
      border-color:rgba(42,165,141,.22);
      box-shadow:0 0 0 1px rgba(42,165,141,.06) inset;
    }
    .header-actions{
      display:flex;
      align-items:center;
      gap:.65rem;
      flex:0 0 auto;
    }
    .button,
    .button.hollow{
      margin:0;
      border-radius:var(--radius);
      letter-spacing:0;
      transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
    }
    .button.primary-btn{
      background:var(--primary);
      color:#fff;
      border:1px solid var(--primary);
      box-shadow:0 8px 18px rgba(42,165,141,.18);
    }
    .button.primary-btn:hover,
    .button.primary-btn:focus-visible{
      background:var(--primary-dark);
      border-color:var(--primary-dark);
      color:#fff;
      transform:translateY(-1px);
      box-shadow:0 10px 24px rgba(42,165,141,.2);
    }
    .button.secondary-btn{
      background:var(--surface);
      color:var(--text);
      border:1px solid var(--line);
      box-shadow:var(--shadow-soft);
    }
    .button.secondary-btn:hover,
    .button.secondary-btn:focus-visible{
      background:#fff;
      border-color:var(--line-strong);
      transform:translateY(-1px);
      box-shadow:0 12px 24px rgba(39, 58, 49, .08);
    }
    .button.ghost-btn{
      background:transparent;
      color:var(--text);
      border:1px solid var(--line);
    }
    .button.ghost-btn:hover,
    .button.ghost-btn:focus-visible{
      background:var(--surface);
      border-color:var(--line-strong);
      transform:translateY(-1px);
    }
    .button .icon-inline,
    .chip .icon-inline,
    .metric .icon-inline,
    .safety-card .icon-inline,
    .timeline-badge .icon-inline{
      width:1rem;
      height:1rem;
      stroke-width:2.2;
      vertical-align:-2px;
    }
    .menu-toggle{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      border:1px solid var(--line);
      background:var(--surface);
      color:var(--text);
      border-radius:var(--radius);
      padding:.72rem .9rem;
      box-shadow:var(--shadow-soft);
    }
    .menu-toggle:hover,
    .menu-toggle:focus-visible{
      transform:translateY(-1px);
      border-color:var(--line-strong);
      background:#fff;
    }
    .mobile-drawer{
      background:var(--surface);
      border-right:1px solid var(--line);
      box-shadow:var(--shadow);
      padding:1.1rem 1rem 1.3rem;
    }
    .drawer-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:1rem;
      padding-bottom:1rem;
      border-bottom:1px solid var(--line);
    }
    .drawer-brand{
      display:flex;
      align-items:center;
      gap:.65rem;
      font-weight:800;
      line-height:1.35;
    }
    .drawer-close{
      width:2.1rem;
      height:2.1rem;
      border-radius:50%;
      border:1px solid var(--line);
      background:var(--surface-2);
      line-height:1;
      font-size:1.2rem;
      color:var(--muted);
    }
    .drawer-nav{
      display:grid;
      gap:.45rem;
    }
    .drawer-nav a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:.86rem .9rem;
      border-radius:var(--radius);
      background:#fff;
      border:1px solid var(--line);
      box-shadow:var(--shadow-soft);
    }
    .drawer-nav a:hover,
    .drawer-nav a:focus-visible{
      transform:translateY(-1px);
      border-color:var(--line-strong);
    }
    .drawer-nav a.is-active,
    .drawer-nav a[aria-current="page"]{
      background:var(--primary-soft);
      border-color:rgba(42,165,141,.22);
      color:var(--primary-dark);
    }
    .drawer-foot{
      margin-top:1rem;
      padding-top:1rem;
      border-top:1px solid var(--line);
      color:var(--muted);
      font-size:.95rem;
    }
    main{
      position:relative;
      z-index:1;
    }
    .section-band{
      padding:4.1rem 0;
      position:relative;
    }
    .section-band.alt{
      background:linear-gradient(180deg, rgba(238,245,240,.4), rgba(255,255,255,0));
      border-top:1px solid rgba(215,225,218,.7);
      border-bottom:1px solid rgba(215,225,218,.5);
    }
    .section-band.tight{
      padding:3.1rem 0;
    }
    .section-head{
      margin-bottom:1.4rem;
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.32rem .62rem;
      border-radius:var(--radius-sm);
      background:var(--warning-soft);
      color:#81670d;
      font-size:.82rem;
      font-weight:700;
      letter-spacing:0;
      border:1px solid rgba(228,199,101,.35);
      margin-bottom:.72rem;
    }
    .section-title{
      margin:0;
      color:var(--text);
      font-size:1.82rem;
      line-height:1.18;
      letter-spacing:0;
      font-weight:800;
    }
    .section-lead{
      margin:.72rem 0 0;
      color:var(--muted);
      max-width:64rem;
      font-size:1rem;
    }
    .hero{
      padding:4.8rem 0 3.4rem;
      position:relative;
      overflow:hidden;
      background:
        radial-gradient(circle at 82% 16%, rgba(42,165,141,.12), transparent 24%),
        radial-gradient(circle at 92% 74%, rgba(238,140,111,.10), transparent 20%),
        linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.4));
      border-bottom:1px solid rgba(215,225,218,.7);
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(135deg, rgba(42,165,141,.06) 25%, transparent 25%) 0 0/72px 72px,
        linear-gradient(315deg, rgba(238,140,111,.05) 25%, transparent 25%) 0 0/96px 96px;
      opacity:.55;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.66), rgba(0,0,0,.12) 78%, transparent);
    }
    .hero-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:1.6rem;
      align-items:stretch;
    }
    .hero-copy{
      padding:1rem 0 .8rem;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.38rem .68rem;
      border-radius:var(--radius-sm);
      background:var(--primary-soft);
      color:var(--primary-dark);
      font-size:.82rem;
      font-weight:700;
      letter-spacing:0;
      border:1px solid rgba(42,165,141,.18);
      margin-bottom:1rem;
    }
    .hero h1{
      margin:0;
      max-width:12.5ch;
      font-size:3rem;
      line-height:1.1;
      letter-spacing:0;
      font-weight:900;
    }
    .hero-lead{
      margin:1rem 0 0;
      max-width:44rem;
      font-size:1.06rem;
      color:var(--muted);
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.75rem;
      margin-top:1.3rem;
    }
    .hero-metrics{
      display:flex;
      flex-wrap:wrap;
      gap:.75rem;
      margin-top:1.4rem;
    }
    .metric{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.7rem .9rem;
      border-radius:var(--radius);
      background:var(--surface);
      border:1px solid var(--line);
      box-shadow:var(--shadow-soft);
      color:var(--text);
      font-weight:600;
      font-size:.95rem;
    }
    .entry-wall{
      position:relative;
      padding:1.2rem;
      border-radius:var(--radius);
      border:1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.86)),
        repeating-linear-gradient(90deg, rgba(42,165,141,.04) 0 2px, transparent 2px 8px);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .entry-wall::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 18% 20%, rgba(42,165,141,.14), transparent 20%),
        radial-gradient(circle at 84% 18%, rgba(238,140,111,.12), transparent 18%),
        radial-gradient(circle at 70% 82%, rgba(228,199,101,.12), transparent 20%);
      opacity:.7;
      pointer-events:none;
    }
    .entry-wall-inner{
      position:relative;
      display:grid;
      gap:1rem;
    }
    .entry-wall-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:.8rem;
    }
    .entry-wall-title{
      margin:0;
      font-size:1.35rem;
      line-height:1.2;
      font-weight:800;
    }
    .entry-wall-copy{
      margin:.45rem 0 0;
      color:var(--muted);
      max-width:34rem;
      font-size:.96rem;
    }
    .entry-wall-action{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      flex:0 0 auto;
    }
    .entry-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:.7rem;
    }
    .entry-tile{
      display:block;
      padding:.95rem .9rem;
      border-radius:var(--radius);
      background:var(--surface);
      border:1px solid var(--line);
      box-shadow:var(--shadow-soft);
      min-height:104px;
      position:relative;
    }
    .entry-tile:hover,
    .entry-tile:focus-visible{
      transform:translateY(-1px);
      border-color:var(--line-strong);
      box-shadow:0 12px 24px rgba(39, 58, 49, .08);
    }
    .entry-tile .num{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:2rem;
      padding:.12rem .35rem;
      border-radius:var(--radius-sm);
      background:var(--warning-soft);
      color:#86670d;
      font-size:.78rem;
      font-weight:800;
      margin-bottom:.65rem;
    }
    .entry-tile .label{
      display:block;
      font-weight:800;
      line-height:1.35;
      margin-bottom:.3rem;
    }
    .entry-tile .desc{
      display:block;
      color:var(--muted);
      font-size:.92rem;
      line-height:1.55;
    }
    .hero-note{
      color:var(--muted);
      font-size:.92rem;
    }
    #rail{
      margin-top:-1.2rem;
      padding-top:0;
    }
    .rail-shell{
      padding-top:1.2rem;
    }
    .rail-topline{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:1rem;
    }
    .rail-hint{
      color:var(--muted);
      font-size:.92rem;
      white-space:nowrap;
      display:inline-flex;
      align-items:center;
      gap:.4rem;
    }
    .rail-track{
      display:flex;
      gap:1rem;
      overflow-x:auto;
      padding:0 .2rem .4rem;
      scroll-snap-type:x mandatory;
      scroll-padding-left:1rem;
      cursor:grab;
      user-select:none;
      scrollbar-width:thin;
      scrollbar-color:var(--primary) transparent;
    }
    .rail-track.is-dragging{
      cursor:grabbing;
    }
    .rail-track::-webkit-scrollbar{
      height:10px;
    }
    .rail-track::-webkit-scrollbar-track{
      background:transparent;
    }
    .rail-track::-webkit-scrollbar-thumb{
      background:rgba(42,165,141,.28);
      border-radius:999px;
      border:2px solid transparent;
      background-clip:content-box;
    }
    .rail-card{
      scroll-snap-align:start;
      flex:0 0 292px;
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
      overflow:hidden;
      display:flex;
      flex-direction:column;
    }
    .rail-card:hover,
    .rail-card:focus-within{
      transform:translateY(-1px);
      border-color:var(--line-strong);
      box-shadow:var(--shadow);
    }
    .rail-cover{
      height:168px;
      position:relative;
      overflow:hidden;
      border-bottom:1px solid var(--line);
    }
    .rail-cover::before{
      content:"";
      position:absolute;
      inset:0;
      opacity:.95;
      background:
        linear-gradient(135deg, rgba(255,255,255,.3), transparent 42%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 3px, transparent 3px 9px),
        repeating-linear-gradient(180deg, rgba(255,255,255,.12) 0 2px, transparent 2px 8px);
      mix-blend-mode:screen;
    }
    .cover-a{background:linear-gradient(135deg, #eaf7f2 0%, #d9efe7 36%, #bfe2d6 100%)}
    .cover-b{background:linear-gradient(135deg, #f8f1dc 0%, #f1e0ae 36%, #d0e7d9 100%)}
    .cover-c{background:linear-gradient(135deg, #fde5dd 0%, #f8c9ba 42%, #d8ece3 100%)}
    .cover-d{background:linear-gradient(135deg, #eef4fb 0%, #dfe8f3 42%, #d7efe2 100%)}
    .cover-e{background:linear-gradient(135deg, #f5efe9 0%, #efe1d4 42%, #dfeede 100%)}
    .cover-f{background:linear-gradient(135deg, #e7f4ef 0%, #cfe6de 40%, #f6e6c8 100%)}
    .cover-badge{
      position:absolute;
      left:1rem;
      top:1rem;
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.34rem .55rem;
      border-radius:var(--radius-sm);
      background:rgba(255,255,255,.76);
      border:1px solid rgba(255,255,255,.7);
      font-size:.78rem;
      font-weight:800;
      color:var(--text);
      box-shadow:0 8px 18px rgba(39,58,49,.05);
      backdrop-filter:blur(6px);
    }
    .cover-title{
      position:absolute;
      left:1rem;
      right:1rem;
      bottom:1rem;
      margin:0;
      font-size:1.15rem;
      line-height:1.25;
      font-weight:900;
      max-width:13ch;
    }
    .rail-content{
      padding:1rem 1rem 1.1rem;
      display:grid;
      gap:.7rem;
    }
    .rail-tags{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.28rem .5rem;
      border-radius:var(--radius-sm);
      background:var(--surface-2);
      border:1px solid rgba(191,208,198,.65);
      color:#3d4c46;
      font-size:.8rem;
      font-weight:700;
    }
    .rail-card h3{
      margin:0;
      font-size:1.06rem;
      line-height:1.35;
      font-weight:800;
    }
    .rail-card p{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
      line-height:1.6;
    }
    .rail-meta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.8rem;
      color:var(--muted);
      font-size:.82rem;
    }
    .feature-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:1rem;
    }
    .feature-card{
      padding:1.15rem;
      border-radius:var(--radius);
      background:var(--surface);
      border:1px solid var(--line);
      box-shadow:var(--shadow-soft);
      display:grid;
      gap:.7rem;
      min-height:180px;
    }
    .feature-card .feature-icon{
      width:2.6rem;
      height:2.6rem;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:var(--radius);
      background:var(--primary-soft);
      color:var(--primary-dark);
      border:1px solid rgba(42,165,141,.15);
    }
    .feature-card:nth-child(2) .feature-icon{background:#f8efcf;color:#7d6408;border-color:rgba(228,199,101,.2)}
    .feature-card:nth-child(3) .feature-icon{background:var(--accent-soft);color:#c35c3d;border-color:rgba(238,140,111,.18)}
    .feature-card:nth-child(4) .feature-icon{background:#e8eefb;color:#5d76b3;border-color:rgba(93,118,179,.16)}
    .feature-card h3{
      margin:0;
      font-size:1.08rem;
      font-weight:800;
    }
    .feature-card p{
      margin:0;
      color:var(--muted);
      font-size:.94rem;
      line-height:1.65;
    }
    .feature-foot{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
    }
    .mini-badge{
      display:inline-flex;
      align-items:center;
      padding:.26rem .52rem;
      border-radius:var(--radius-sm);
      background:var(--surface-2);
      border:1px solid rgba(191,208,198,.7);
      color:#415048;
      font-size:.78rem;
      font-weight:700;
    }
    .split-grid{
      display:grid;
      grid-template-columns:1.25fr .75fr;
      gap:1rem;
    }
    .split-panel{
      padding:1.2rem;
      border-radius:var(--radius);
      background:var(--surface);
      border:1px solid var(--line);
      box-shadow:var(--shadow-soft);
      display:grid;
      gap:1rem;
    }
    .split-panel.large{
      min-height:100%;
      background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86)),
        linear-gradient(135deg, rgba(42,165,141,.08), rgba(238,140,111,.05));
    }
    .split-panel h3{
      margin:0;
      font-size:1.18rem;
      line-height:1.25;
      font-weight:850;
    }
    .split-panel p{
      margin:0;
      color:var(--muted);
    }
    .split-links{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
    }
    .split-links .chip{
      background:#fff;
    }
    .split-cta{
      display:flex;
      flex-wrap:wrap;
      gap:.6rem;
      margin-top:.25rem;
    }
    .split-side{
      display:grid;
      gap:1rem;
    }
    .split-mini{
      padding:1.05rem;
      border-radius:var(--radius);
      background:var(--surface);
      border:1px solid var(--line);
      box-shadow:var(--shadow-soft);
      display:grid;
      gap:.7rem;
    }
    .split-mini h3{
      margin:0;
      font-size:1.02rem;
      font-weight:800;
    }
    .split-mini p{
      margin:0;
      color:var(--muted);
      font-size:.94rem;
      line-height:1.6;
    }
    .catalog-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:1rem;
    }
    .catalog-card{
      padding:1.1rem;
      border-radius:var(--radius);
      background:var(--surface);
      border:1px solid var(--line);
      box-shadow:var(--shadow-soft);
      display:grid;
      gap:.85rem;
      min-height:210px;
      align-content:start;
    }
    .catalog-top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:.8rem;
    }
    .catalog-count{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:3.1rem;
      padding:.25rem .45rem;
      border-radius:var(--radius-sm);
      background:var(--warning-soft);
      color:#81670d;
      border:1px solid rgba(228,199,101,.32);
      font-size:.78rem;
      font-weight:800;
    }
    .catalog-card h3{
      margin:0;
      font-size:1.06rem;
      line-height:1.35;
      font-weight:850;
    }
    .catalog-card p{
      margin:0;
      color:var(--muted);
      font-size:.93rem;
      line-height:1.65;
    }
    .catalog-card .button{
      width:100%;
      justify-content:center;
    }
    .news-grid{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:1rem;
    }
    .news-list{
      margin:0;
      padding:0;
      list-style:none;
      display:grid;
      gap:.85rem;
    }
    .news-item{
      padding:1rem 1rem 1rem 1.05rem;
      border-radius:var(--radius);
      border:1px solid var(--line);
      background:var(--surface);
      box-shadow:var(--shadow-soft);
      display:grid;
      gap:.35rem;
    }
    .news-item:hover,
    .news-item:focus-within{
      transform:translateY(-1px);
      border-color:var(--line-strong);
      box-shadow:var(--shadow);
    }
    .news-item h3{
      margin:0;
      font-size:1rem;
      line-height:1.4;
      font-weight:850;
    }
    .news-item p{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
      line-height:1.6;
    }
    .news-tag{
      display:inline-flex;
      align-items:center;
      width:max-content;
      padding:.22rem .45rem;
      border-radius:var(--radius-sm);
      background:var(--primary-soft);
      border:1px solid rgba(42,165,141,.16);
      color:var(--primary-dark);
      font-size:.76rem;
      font-weight:800;
    }
    .news-side{
      padding:1.15rem;
      border-radius:var(--radius);
      border:1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.88)),
        linear-gradient(135deg, rgba(42,165,141,.06), rgba(228,199,101,.06));
      box-shadow:var(--shadow-soft);
      display:grid;
      gap:1rem;
    }
    .news-side h3{
      margin:0;
      font-size:1.1rem;
      font-weight:850;
    }
    .news-side p{
      margin:0;
      color:var(--muted);
      line-height:1.65;
    }
    .news-side ul{
      margin:0;
      padding:0;
      list-style:none;
      display:grid;
      gap:.65rem;
    }
    .news-side li{
      position:relative;
      padding-left:1.1rem;
      color:var(--text);
      line-height:1.6;
    }
    .news-side li::before{
      content:"";
      position:absolute;
      left:0;
      top:.58rem;
      width:.48rem;
      height:.48rem;
      border-radius:2px;
      background:var(--primary);
      box-shadow:0 0 0 2px rgba(42,165,141,.16);
    }
    .safety-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:1rem;
    }
    .safety-card{
      padding:1.15rem;
      border-radius:var(--radius);
      border:1px solid var(--line);
      background:var(--surface);
      box-shadow:var(--shadow-soft);
      display:grid;
      gap:.7rem;
      min-height:190px;
    }
    .safety-card .icon-box{
      width:2.8rem;
      height:2.8rem;
      border-radius:var(--radius);
      background:var(--surface-2);
      border:1px solid var(--line);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:var(--primary-dark);
    }
    .safety-card:nth-child(2) .icon-box{color:#8a6b06}
    .safety-card:nth-child(3) .icon-box{color:#c35c3d}
    .safety-card h3{
      margin:0;
      font-size:1.08rem;
      font-weight:850;
    }
    .safety-card p{
      margin:0;
      color:var(--muted);
      line-height:1.65;
    }
    .timeline{
      margin:0;
      padding:0;
      list-style:none;
      display:grid;
      gap:.9rem;
      position:relative;
    }
    .timeline::before{
      content:"";
      position:absolute;
      left:1.1rem;
      top:.35rem;
      bottom:.35rem;
      width:1px;
      background:linear-gradient(180deg, rgba(42,165,141,.35), rgba(42,165,141,.08));
    }
    .timeline-item{
      position:relative;
      display:grid;
      grid-template-columns:2.35rem 1fr;
      gap:.8rem;
      align-items:flex-start;
      padding:.95rem 1rem .95rem .15rem;
      border-radius:var(--radius);
      border:1px solid var(--line);
      background:var(--surface);
      box-shadow:var(--shadow-soft);
    }
    .timeline-badge{
      width:2.1rem;
      height:2.1rem;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:var(--radius-sm);
      background:var(--primary-soft);
      color:var(--primary-dark);
      font-weight:800;
      border:1px solid rgba(42,165,141,.16);
      position:relative;
      z-index:1;
      margin-left:.55rem;
    }
    .timeline-item h3{
      margin:0;
      font-size:1rem;
      font-weight:850;
    }
    .timeline-item p{
      margin:.25rem 0 0;
      color:var(--muted);
      line-height:1.62;
      font-size:.93rem;
    }
    .faq-wrap{
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
      padding:1rem;
    }
    .accordion{
      margin:0;
      background:transparent;
    }
    .accordion-item{
      border:1px solid var(--line);
      border-radius:var(--radius);
      overflow:hidden;
      margin-bottom:.75rem;
      background:#fff;
      box-shadow:var(--shadow-soft);
    }
    .accordion-title{
      color:var(--text);
      font-weight:800;
      font-size:1rem;
      padding:1rem 1rem 1rem 3rem;
      line-height:1.45;
      position:relative;
      background:#fff;
    }
    .accordion-title::before{
      content:"+";
      position:absolute;
      left:1rem;
      top:50%;
      transform:translateY(-50%);
      width:1.3rem;
      height:1.3rem;
      border-radius:4px;
      border:1px solid var(--line);
      color:var(--primary-dark);
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:800;
      background:var(--surface-2);
    }
    .is-active > .accordion-title::before{
      content:"−";
    }
    .accordion-title:hover,
    .accordion-title:focus-visible{
      background:rgba(42,165,141,.04);
      color:var(--text);
    }
    .accordion-content{
      padding:0 1rem 1rem 3rem;
      color:var(--muted);
      line-height:1.7;
      background:#fff;
    }
    .join-band{
      padding:4.1rem 0 4.4rem;
      background:
        linear-gradient(180deg, rgba(238,245,240,.54), rgba(255,255,255,.6)),
        linear-gradient(135deg, rgba(42,165,141,.05), rgba(238,140,111,.03));
      border-top:1px solid rgba(215,225,218,.7);
    }
    .join-panel{
      padding:1.2rem;
      border-radius:var(--radius);
      border:1px solid var(--line);
      background:var(--surface);
      box-shadow:var(--shadow);
    }
    .join-grid{
      display:grid;
      grid-template-columns:1fr .95fr;
      gap:1rem;
      align-items:start;
    }
    .join-copy h2{
      margin:0;
      font-size:1.78rem;
      line-height:1.18;
      font-weight:900;
    }
    .join-copy p{
      margin:.75rem 0 0;
      color:var(--muted);
      max-width:42rem;
    }
    .join-points{
      display:grid;
      gap:.65rem;
      margin-top:1rem;
      color:var(--text);
    }
    .join-point{
      display:flex;
      align-items:flex-start;
      gap:.6rem;
    }
    .join-point .bullet{
      width:1.2rem;
      height:1.2rem;
      border-radius:3px;
      background:var(--primary-soft);
      border:1px solid rgba(42,165,141,.18);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:var(--primary-dark);
      flex:0 0 auto;
      margin-top:.15rem;
    }
    .join-point span:last-child{
      line-height:1.65;
      color:var(--muted);
    }
    .join-form{
      padding:1.15rem;
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.9));
      border:1px solid var(--line);
      box-shadow:var(--shadow-soft);
      display:grid;
      gap:.9rem;
    }
    .field{
      display:grid;
      gap:.4rem;
    }
    .field label{
      font-weight:700;
      color:var(--text);
      font-size:.95rem;
    }
    .field input,
    .field select,
    .field textarea{
      width:100%;
      border:1px solid var(--line);
      background:#fff;
      border-radius:var(--radius);
      padding:.82rem .92rem;
      color:var(--text);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
      transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }
    .field input::placeholder,
    .field textarea::placeholder{
      color:#8a958f;
    }
    .field input:focus,
    .field select:focus,
    .field textarea:focus{
      border-color:rgba(42,165,141,.48);
      box-shadow:0 0 0 3px rgba(42,165,141,.12);
      outline:none;
    }
    .helper{
      color:var(--muted);
      font-size:.9rem;
      line-height:1.6;
    }
    .form-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.7rem;
      align-items:center;
    }
    .join-result{
      display:none;
      padding:.72rem .85rem;
      border-radius:var(--radius);
      background:var(--primary-soft);
      border:1px solid rgba(42,165,141,.18);
      color:var(--primary-dark);
      font-size:.92rem;
      font-weight:700;
    }
    .join-result.is-visible{
      display:block;
    }
    .site-footer{
      padding:2rem 0 2.2rem;
      border-top:1px solid rgba(215,225,218,.8);
      background:rgba(252,250,244,.82);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:1rem;
      align-items:start;
    }
    .footer-brand{
      display:grid;
      gap:.7rem;
    }
    .footer-brand .brand{
      font-size:1.05rem;
    }
    .footer-brand p{
      margin:0;
      color:var(--muted);
      max-width:38rem;
      line-height:1.65;
      font-size:.95rem;
    }
    .footer-nav{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      justify-content:flex-end;
    }
    .footer-nav a{
      padding:.48rem .7rem;
      border-radius:var(--radius-sm);
      border:1px solid var(--line);
      background:#fff;
      color:var(--text);
      font-size:.92rem;
    }
    .footer-nav a:hover,
    .footer-nav a:focus-visible{
      border-color:var(--line-strong);
      transform:translateY(-1px);
    }
    .footer-note{
      grid-column:1 / -1;
      display:flex;
      flex-wrap:wrap;
      gap:.6rem 1rem;
      align-items:center;
      justify-content:space-between;
      border-top:1px solid var(--line);
      padding-top:1rem;
      color:var(--muted);
      font-size:.9rem;
    }
    .footer-small{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem .8rem;
      align-items:center;
    }
    .footer-small span{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
    }
    .footer-chip{
      display:inline-flex;
      align-items:center;
      padding:.22rem .45rem;
      border-radius:var(--radius-sm);
      background:var(--surface-2);
      border:1px solid var(--line);
      color:#415048;
      font-size:.76rem;
      font-weight:700;
    }
    .grid-gap{
      gap:1rem;
    }
    .show-for-mobile{
      display:none;
    }
    @media screen and (max-width: 1024px){
      .hero-grid,
      .split-grid,
      .news-grid,
      .join-grid,
      .footer-grid{
        grid-template-columns:1fr;
      }
      .feature-grid,
      .catalog-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
      .safety-grid{
        grid-template-columns:1fr;
      }
      .hero h1{
        font-size:2.45rem;
        max-width:14ch;
      }
      .section-title,
      .join-copy h2{
        font-size:1.62rem;
      }
    }
    @media screen and (max-width: 768px){
      .desktop-nav,
      .header-actions .button.secondary-btn{
        display:none !important;
      }
      .show-for-mobile{
        display:inline-flex;
      }
      .hero{
        padding:3.6rem 0 2.6rem;
      }
      .hero h1{
        font-size:2.1rem;
        max-width:16ch;
      }
      .hero-lead{
        font-size:1rem;
      }
      .entry-grid{
        grid-template-columns:1fr;
      }
      .rail-card{
        flex-basis:260px;
      }
      .feature-grid,
      .catalog-grid{
        grid-template-columns:1fr;
      }
      .section-band{
        padding:3rem 0;
      }
      .section-title{
        font-size:1.48rem;
      }
      .accordion-title{
        padding-left:2.7rem;
      }
      .accordion-content{
        padding-left:2.7rem;
      }
      .footer-nav{
        justify-content:flex-start;
      }
    }
    @media screen and (max-width: 520px){
      .grid-container{
        padding-left:.8rem;
        padding-right:.8rem;
      }
      .header-inner{
        min-height:68px;
      }
      .brand{
        white-space:normal;
      }
      .hero h1{
        font-size:1.85rem;
        max-width:100%;
      }
      .hero-actions,
      .form-actions{
        flex-direction:column;
        align-items:stretch;
      }
      .hero-actions .button,
      .form-actions .button{
        width:100%;
        justify-content:center;
      }
      .rail-track{
        scroll-padding-left:.8rem;
      }
      .rail-card{
        flex-basis:84vw;
      }
      .rail-topline{
        align-items:flex-start;
        flex-direction:column;
      }
      .entry-wall{
        padding:1rem;
      }
      .entry-wall-head{
        flex-direction:column;
      }
      .join-panel{
        padding:1rem;
      }
      .site-footer{
        padding-bottom:1.4rem;
      }
      .footer-note{
        padding-top:.85rem;
      }
    }

/* roulang page: category1 */
:root {
      --bg: #fbf8f1;
      --bg-soft: #fffdf8;
      --paper: #ffffff;
      --mint: #2bbfa3;
      --mint-dark: #168b78;
      --coral: #f47f66;
      --yellow: #f7c95c;
      --lavender: #8e82bc;
      --ink: #1e2723;
      --muted: #68736f;
      --line: #ded8ca;
      --line-strong: #b9cfc7;
      --shadow: 0 14px 34px rgba(44, 72, 62, .10);
      --shadow-soft: 0 8px 22px rgba(44, 72, 62, .08);
      --radius: 6px;
      --container: 76rem;
      --header-h: 72px;
      --focus: 0 0 0 4px rgba(43, 191, 163, .22);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--ink);
      font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", Arial, sans-serif;
      line-height: 1.72;
      background:
        linear-gradient(90deg, rgba(43, 191, 163, .055) 1px, transparent 1px),
        linear-gradient(rgba(43, 191, 163, .045) 1px, transparent 1px),
        radial-gradient(circle at 12px 12px, rgba(244, 127, 102, .08) 1px, transparent 1.5px),
        var(--bg);
      background-size: 28px 28px, 28px 28px, 24px 24px, auto;
      overflow-x: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease;
    }

    img {
      display: block;
      max-width: 100%;
      height: auto;
    }

    button,
    input,
    select {
      font: inherit;
    }

    button,
    .button {
      cursor: pointer;
    }

    input:focus,
    select:focus,
    button:focus-visible,
    a:focus-visible {
      outline: none;
      box-shadow: var(--focus);
    }

    .grid-container {
      max-width: var(--container);
    }

    .icon-inline {
      width: 1.05em;
      height: 1.05em;
      stroke-width: 2.2;
      vertical-align: -0.18em;
      flex: 0 0 auto;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      min-height: var(--header-h);
      background: rgba(255, 253, 248, .92);
      border-bottom: 1px solid rgba(222, 216, 202, .86);
      backdrop-filter: blur(14px);
    }

    .header-inner {
      display: flex;
      min-height: var(--header-h);
      align-items: center;
      justify-content: space-between;
      gap: 1.2rem;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: .65rem;
      color: var(--ink);
      font-weight: 800;
      letter-spacing: 0;
      line-height: 1.25;
    }

    .brand:hover {
      color: var(--mint-dark);
    }

    .brand-mark {
      position: relative;
      width: 30px;
      height: 30px;
      flex: 0 0 30px;
      background:
        linear-gradient(90deg, var(--mint) 0 50%, transparent 50%),
        linear-gradient(var(--coral) 0 0);
      background-size: 12px 12px, 18px 18px;
      background-position: 4px 4px, 10px 10px;
      background-repeat: no-repeat;
      border: 2px solid var(--ink);
      box-shadow: 4px 4px 0 rgba(43, 191, 163, .22);
    }

    .brand-mark::after {
      content: "";
      position: absolute;
      right: 4px;
      top: 4px;
      width: 6px;
      height: 6px;
      background: var(--yellow);
      border: 1px solid var(--ink);
    }

    .desktop-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .35rem;
      margin-left: auto;
    }

    .desktop-nav a,
    .mobile-nav a {
      border: 1px solid transparent;
      color: #33413c;
      font-size: .95rem;
      font-weight: 700;
    }

    .desktop-nav a {
      padding: .55rem .8rem;
      border-radius: var(--radius);
    }

    .desktop-nav a:hover,
    .desktop-nav a.is-active {
      color: var(--mint-dark);
      background: rgba(43, 191, 163, .10);
      border-color: rgba(43, 191, 163, .22);
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: .75rem;
    }

    .button,
    .primary-btn,
    .secondary-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .45rem;
      min-height: 42px;
      padding: .72rem 1.05rem;
      margin: 0;
      border-radius: var(--radius);
      border: 2px solid var(--ink);
      font-weight: 800;
      line-height: 1.1;
      box-shadow: 4px 4px 0 rgba(30, 39, 35, .12);
      transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
    }

    .primary-btn {
      color: #ffffff;
      background: var(--mint-dark);
    }

    .secondary-btn {
      color: var(--ink);
      background: #fff8e5;
    }

    .button:hover,
    .primary-btn:hover,
    .secondary-btn:hover {
      transform: translateY(-2px);
      box-shadow: 6px 8px 0 rgba(30, 39, 35, .10);
    }

    .primary-btn:hover {
      color: #ffffff;
      background: #127465;
    }

    .secondary-btn:hover {
      color: var(--ink);
      background: #fff1c9;
      border-color: var(--mint-dark);
    }

    .menu-toggle {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      min-height: 40px;
      padding: .55rem .8rem;
      border: 2px solid var(--ink);
      border-radius: var(--radius);
      color: var(--ink);
      background: var(--paper);
      font-weight: 800;
      box-shadow: 3px 3px 0 rgba(30, 39, 35, .12);
    }

    .off-canvas {
      background: var(--bg-soft);
      border-left: 1px solid var(--line);
    }

    .mobile-drawer-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.1rem;
      border-bottom: 1px solid var(--line);
    }

    .drawer-close {
      width: 38px;
      height: 38px;
      border: 2px solid var(--ink);
      border-radius: var(--radius);
      background: #ffffff;
      color: var(--ink);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .mobile-nav {
      display: grid;
      gap: .55rem;
      padding: 1rem;
    }

    .mobile-nav a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .78rem .9rem;
      border-radius: var(--radius);
      background: #ffffff;
      border-color: var(--line);
      box-shadow: var(--shadow-soft);
    }

    .mobile-nav a.is-active {
      color: var(--mint-dark);
      border-color: var(--mint);
      background: rgba(43, 191, 163, .10);
    }

    main {
      overflow: hidden;
    }

    .section {
      padding: 4.2rem 0;
    }

    .section-tight {
      padding: 2.8rem 0;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      padding: .24rem .52rem;
      margin-bottom: .85rem;
      color: var(--mint-dark);
      background: rgba(43, 191, 163, .10);
      border: 1px solid rgba(43, 191, 163, .24);
      border-radius: var(--radius);
      font-size: .86rem;
      font-weight: 800;
    }

    .hero {
      position: relative;
      padding: 3.2rem 0 2.2rem;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, .76), rgba(255, 255, 255, .22)),
        repeating-linear-gradient(90deg, transparent 0 18px, rgba(247, 201, 92, .14) 18px 20px);
      z-index: -1;
    }

    .hero-grid {
      align-items: stretch;
    }

    .hero-copy {
      padding: 1rem 0;
    }

    .breadcrumb {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: .45rem;
      margin-bottom: 1rem;
      color: var(--muted);
      font-size: .92rem;
      font-weight: 700;
    }

    .breadcrumb a:hover {
      color: var(--mint-dark);
    }

    h1,
    h2,
    h3,
    p {
      margin-top: 0;
    }

    h1 {
      max-width: 820px;
      margin-bottom: 1rem;
      font-size: clamp(2.05rem, 4vw, 4.35rem);
      line-height: 1.08;
      font-weight: 900;
      letter-spacing: 0;
    }

    h2 {
      margin-bottom: .7rem;
      font-size: clamp(1.45rem, 2.5vw, 2.35rem);
      line-height: 1.18;
      font-weight: 900;
      letter-spacing: 0;
    }

    h3 {
      margin-bottom: .45rem;
      font-size: 1.08rem;
      line-height: 1.35;
      font-weight: 900;
      letter-spacing: 0;
    }

    .lead {
      max-width: 760px;
      margin-bottom: 1.35rem;
      color: #43504b;
      font-size: 1.08rem;
    }

    .hero-actions,
    .cta-actions,
    .filter-actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: .75rem;
    }

    .choice-panel {
      height: 100%;
      padding: 1rem;
      background: var(--paper);
      border: 2px solid var(--ink);
      border-radius: var(--radius);
      box-shadow: 8px 8px 0 rgba(43, 191, 163, .16);
    }

    .choice-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .8rem;
      margin-bottom: .9rem;
      padding-bottom: .75rem;
      border-bottom: 1px dashed var(--line-strong);
      font-weight: 900;
    }

    .choice-stack {
      display: grid;
      gap: .72rem;
    }

    .choice-card {
      position: relative;
      padding: .85rem .85rem .8rem 3rem;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fffdf8;
    }

    .choice-card.recommend {
      border: 2px solid var(--mint);
      background: #effbf7;
      box-shadow: var(--shadow-soft);
    }

    .step-no {
      position: absolute;
      left: .8rem;
      top: .85rem;
      width: 1.55rem;
      height: 1.55rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      background: var(--ink);
      border-radius: 3px;
      font-size: .82rem;
      font-weight: 900;
      box-shadow: 3px 3px 0 rgba(30, 39, 35, .10);
    }

    .choice-card p {
      margin: 0;
      color: var(--muted);
      font-size: .92rem;
      line-height: 1.55;
    }

    .badge,
    .chip,
    .meta-pill {
      display: inline-flex;
      align-items: center;
      gap: .3rem;
      border-radius: var(--radius);
      font-weight: 800;
      line-height: 1.2;
    }

    .badge {
      padding: .22rem .45rem;
      color: var(--ink);
      background: var(--yellow);
      border: 1px solid var(--ink);
      font-size: .78rem;
    }

    .filter-shell {
      margin-top: -1.2rem;
      padding: 1rem;
      background: var(--paper);
      border: 2px solid var(--ink);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .filter-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: .95rem;
    }

    .filter-title p {
      margin: 0;
      color: var(--muted);
      font-size: .95rem;
    }

    .filter-shell label {
      color: #33413c;
      font-weight: 800;
      font-size: .9rem;
    }

    .filter-shell input[type="search"],
    .filter-shell select {
      height: 46px;
      margin: .28rem 0 0;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius);
      background-color: #fffdf8;
      box-shadow: none;
      color: var(--ink);
    }

    .filter-shell input[type="search"]:focus,
    .filter-shell select:focus {
      border-color: var(--mint);
      box-shadow: var(--focus);
    }

    .radio-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: .5rem .9rem;
      margin-top: .35rem;
    }

    .radio-row label {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      margin: 0;
      padding: .48rem .62rem;
      background: #fffdf8;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      cursor: pointer;
    }

    .chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: .55rem;
      margin-top: .95rem;
    }

    .chip {
      padding: .45rem .62rem;
      color: #33413c;
      background: #ffffff;
      border: 1px solid var(--line);
      font-size: .88rem;
    }

    .chip:hover,
    .chip.is-selected {
      color: var(--mint-dark);
      border-color: var(--mint);
      background: rgba(43, 191, 163, .10);
      transform: translateY(-1px);
    }

    .content-band {
      background: rgba(255, 253, 248, .72);
      border-top: 1px solid rgba(222, 216, 202, .72);
      border-bottom: 1px solid rgba(222, 216, 202, .72);
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 1.5rem;
      margin-bottom: 1.35rem;
    }

    .section-head p {
      max-width: 620px;
      margin-bottom: 0;
      color: var(--muted);
    }

    .result-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 280px;
      gap: 1.1rem;
      align-items: start;
    }

    .result-list {
      display: grid;
      gap: .9rem;
    }

    .media-row {
      display: grid;
      grid-template-columns: 192px minmax(0, 1fr);
      gap: 1rem;
      padding: .8rem;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-soft);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .media-row:hover {
      transform: translateY(-2px);
      border-color: rgba(43, 191, 163, .55);
      box-shadow: var(--shadow);
    }

    .cover {
      position: relative;
      min-height: 126px;
      border-radius: var(--radius);
      overflow: hidden;
      border: 2px solid var(--ink);
      background:
        linear-gradient(135deg, rgba(43, 191, 163, .22), rgba(247, 201, 92, .22)),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .7) 0 10px, rgba(255, 255, 255, .25) 10px 20px);
    }

    .cover::before,
    .cover::after {
      content: "";
      position: absolute;
      background: var(--paper);
      border: 2px solid var(--ink);
      border-radius: 2px;
    }

    .cover::before {
      width: 54%;
      height: 34%;
      left: 18%;
      top: 22%;
      box-shadow: 8px 8px 0 rgba(43, 191, 163, .22);
    }

    .cover::after {
      width: 28px;
      height: 18px;
      right: 16px;
      bottom: 16px;
      background: var(--coral);
    }

    .cover .cover-label {
      position: absolute;
      left: .55rem;
      bottom: .55rem;
      z-index: 2;
      padding: .18rem .4rem;
      color: #ffffff;
      background: rgba(30, 39, 35, .9);
      border-radius: 3px;
      font-size: .76rem;
      font-weight: 900;
    }

    .row-content {
      min-width: 0;
    }

    .row-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: .8rem;
      margin-bottom: .45rem;
    }

    .row-content p {
      margin-bottom: .75rem;
      color: var(--muted);
      font-size: .94rem;
    }

    .meta-line {
      display: flex;
      flex-wrap: wrap;
      gap: .45rem;
    }

    .meta-pill {
      padding: .24rem .45rem;
      color: #52615c;
      background: #f8f4ea;
      border: 1px solid var(--line);
      font-size: .78rem;
    }

    .side-panel {
      position: sticky;
      top: calc(var(--header-h) + 1rem);
      display: grid;
      gap: .85rem;
    }

    .mini-card,
    .tip-card,
    .stat-card,
    .faq-card,
    .cta-panel {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-soft);
    }

    .mini-card {
      padding: .95rem;
    }

    .mini-card h3 {
      display: flex;
      align-items: center;
      gap: .45rem;
    }

    .quick-list {
      display: grid;
      gap: .55rem;
      margin: .75rem 0 0;
      padding: 0;
      list-style: none;
    }

    .quick-list a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .8rem;
      padding: .55rem .62rem;
      background: #fffdf8;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      color: #33413c;
      font-weight: 800;
      font-size: .9rem;
    }

    .quick-list a:hover {
      color: var(--mint-dark);
      border-color: var(--mint);
      transform: translateY(-1px);
    }

    .tip-card {
      position: relative;
      padding: .9rem .9rem .9rem 3rem;
    }

    .tip-card p {
      margin: 0;
      color: var(--muted);
      font-size: .9rem;
      line-height: 1.58;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: .85rem;
    }

    .stat-card {
      padding: 1rem;
      border-top: 4px solid var(--mint);
    }

    .stat-card:nth-child(2) {
      border-top-color: var(--coral);
    }

    .stat-card:nth-child(3) {
      border-top-color: var(--lavender);
    }

    .stat-num {
      margin-bottom: .15rem;
      font-size: 1.65rem;
      font-weight: 900;
      line-height: 1;
    }

    .stat-card p {
      margin: 0;
      color: var(--muted);
      font-size: .92rem;
    }

    .compact-grid {
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 1rem;
      align-items: stretch;
    }

    .feature-card {
      min-height: 100%;
      padding: 1.05rem;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-soft);
    }

    .feature-card.highlight {
      border: 2px solid var(--ink);
      background:
        linear-gradient(135deg, rgba(43, 191, 163, .10), rgba(247, 201, 92, .12)),
        #ffffff;
      box-shadow: 7px 7px 0 rgba(244, 127, 102, .12);
    }

    .feature-card p {
      color: var(--muted);
    }

    .entry-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .65rem;
    }

    .entry-grid a {
      padding: .75rem;
      min-height: 82px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fffdf8;
      font-weight: 900;
    }

    .entry-grid a:hover {
      border-color: var(--mint);
      background: rgba(43, 191, 163, .09);
      transform: translateY(-2px);
    }

    .load-more {
      display: flex;
      justify-content: center;
      margin-top: 1.35rem;
    }

    .faq-wrap {
      display: grid;
      gap: .75rem;
      max-width: 900px;
      margin: 1.2rem auto 0;
    }

    .faq-card {
      overflow: hidden;
    }

    .faq-card button {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1rem 1.05rem;
      border: 0;
      color: var(--ink);
      background: #ffffff;
      font-weight: 900;
      text-align: left;
    }

    .faq-card button:hover {
      color: var(--mint-dark);
      background: #f8fffb;
    }

    .faq-card .faq-answer {
      padding: 0 1.05rem 1rem;
      color: var(--muted);
    }

    .cta-panel {
      position: relative;
      padding: 1.45rem;
      overflow: hidden;
      border: 2px solid var(--ink);
      background:
        linear-gradient(135deg, rgba(43, 191, 163, .13), rgba(247, 201, 92, .18)),
        #fffdf8;
      box-shadow: 8px 8px 0 rgba(30, 39, 35, .10);
    }

    .cta-panel::after {
      content: "";
      position: absolute;
      right: 1.1rem;
      bottom: 1.1rem;
      width: 54px;
      height: 54px;
      background:
        linear-gradient(90deg, var(--mint) 0 50%, transparent 50%),
        linear-gradient(var(--coral) 0 0);
      background-size: 18px 18px, 32px 32px;
      background-position: 0 0, 18px 18px;
      background-repeat: no-repeat;
      opacity: .42;
    }

    .cta-panel p {
      max-width: 720px;
      color: #43504b;
    }

    .site-footer {
      padding: 2.4rem 0;
      color: #34423d;
      background: #f1eadb;
      border-top: 2px solid var(--ink);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.15fr .7fr 1.15fr;
      gap: 1.4rem;
      align-items: start;
    }

    .footer-brand p {
      max-width: 420px;
      margin: .8rem 0 0;
      color: var(--muted);
      font-size: .94rem;
    }

    .footer-nav {
      display: grid;
      gap: .55rem;
    }

    .footer-nav a {
      width: fit-content;
      color: #34423d;
      font-weight: 800;
      border-bottom: 2px solid transparent;
    }

    .footer-nav a:hover,
    .footer-nav a[aria-current="page"] {
      color: var(--mint-dark);
      border-bottom-color: var(--mint);
    }

    .footer-note {
      display: grid;
      gap: .55rem;
      justify-items: end;
    }

    .footer-small {
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: .5rem;
      color: var(--muted);
      font-size: .88rem;
    }

    .footer-chip {
      padding: .12rem .42rem;
      background: #ffffff;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius);
      color: #43504b;
      font-weight: 800;
    }

    @media screen and (max-width: 1024px) {
      .desktop-nav {
        gap: .15rem;
      }

      .desktop-nav a {
        padding: .5rem .55rem;
        font-size: .9rem;
      }

      .result-layout {
        grid-template-columns: 1fr;
      }

      .side-panel {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }

      .footer-note {
        grid-column: 1 / -1;
        justify-items: start;
      }

      .footer-small {
        justify-content: flex-start;
      }
    }

    @media screen and (max-width: 768px) {
      :root {
        --header-h: 64px;
      }

      .brand span:last-child {
        max-width: 14em;
        overflow-wrap: anywhere;
      }

      .hero {
        padding: 2.2rem 0 1.5rem;
      }

      .section {
        padding: 3rem 0;
      }

      .section-head,
      .filter-title {
        align-items: flex-start;
        flex-direction: column;
        gap: .55rem;
      }

      .media-row {
        grid-template-columns: 150px minmax(0, 1fr);
      }

      .cover {
        min-height: 116px;
      }

      .stats-grid,
      .compact-grid,
      .side-panel {
        grid-template-columns: 1fr;
      }

      .footer-grid {
        grid-template-columns: 1fr;
      }
    }

    @media screen and (max-width: 520px) {
      .header-inner {
        gap: .7rem;
      }

      .brand {
        font-size: .94rem;
      }

      .brand-mark {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
      }

      h1 {
        font-size: 2rem;
      }

      .lead {
        font-size: 1rem;
      }

      .hero-actions,
      .cta-actions,
      .filter-actions {
        align-items: stretch;
        flex-direction: column;
      }

      .button,
      .primary-btn,
      .secondary-btn {
        width: 100%;
      }

      .filter-shell {
        padding: .85rem;
      }

      .media-row {
        grid-template-columns: 1fr;
      }

      .cover {
        aspect-ratio: 16 / 9;
        min-height: auto;
      }

      .row-top {
        flex-direction: column;
        gap: .35rem;
      }

      .entry-grid {
        grid-template-columns: 1fr;
      }

      .cta-panel {
        padding: 1.1rem;
      }

      .cta-panel::after {
        display: none;
      }

      .footer-small {
        flex-direction: column;
        gap: .25rem;
      }
    }

/* roulang page: category2 */
:root {
      --mint: #31bfa3;
      --mint-dark: #18856f;
      --coral: #ef7f62;
      --amber: #f4c35d;
      --violet: #8b80c8;
      --ink: #1d2b2a;
      --text: #334443;
      --muted: #6d7f7c;
      --soft: #f8f3ea;
      --paper: #fffdf8;
      --mist: #edf8f3;
      --line: #dbe7df;
      --line-strong: #b9d7cc;
      --shadow: 0 12px 28px rgba(33, 74, 68, .10);
      --shadow-soft: 0 8px 18px rgba(33, 74, 68, .08);
      --radius: 6px;
      --container: 76rem;
      --header-h: 72px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--text);
      background:
        linear-gradient(90deg, rgba(49, 191, 163, .06) 1px, transparent 1px),
        linear-gradient(180deg, rgba(49, 191, 163, .06) 1px, transparent 1px),
        var(--soft);
      background-size: 24px 24px;
      font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", Arial, sans-serif;
      line-height: 1.72;
      letter-spacing: 0;
      overflow-x: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
    }

    img {
      max-width: 100%;
      display: block;
    }

    button,
    input,
    select {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    :focus-visible {
      outline: 3px solid rgba(49, 191, 163, .35);
      outline-offset: 3px;
    }

    .grid-container {
      max-width: var(--container);
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 80;
      background: rgba(255, 253, 248, .92);
      border-bottom: 1px solid rgba(185, 215, 204, .8);
      backdrop-filter: blur(14px);
    }

    .header-inner {
      min-height: var(--header-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: .65rem;
      min-width: 0;
      color: var(--ink);
      font-weight: 800;
      line-height: 1.2;
    }

    .brand:hover {
      color: var(--mint-dark);
    }

    .brand-mark {
      width: 30px;
      height: 30px;
      flex: 0 0 auto;
      display: inline-block;
      background:
        linear-gradient(90deg, var(--mint) 0 33%, transparent 33% 66%, var(--coral) 66%),
        linear-gradient(180deg, transparent 0 33%, var(--amber) 33% 66%, transparent 66%);
      border: 2px solid var(--ink);
      box-shadow: 4px 4px 0 rgba(49, 191, 163, .18);
      image-rendering: pixelated;
    }

    .desktop-nav {
      display: flex;
      align-items: center;
      gap: .35rem;
      padding: .35rem;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .68);
      box-shadow: 0 4px 0 rgba(49, 191, 163, .08);
    }

    .desktop-nav a {
      display: inline-flex;
      align-items: center;
      min-height: 38px;
      padding: .45rem .85rem;
      border: 1px solid transparent;
      color: var(--text);
      font-size: .95rem;
      font-weight: 700;
    }

    .desktop-nav a:hover,
    .desktop-nav a.is-active {
      color: var(--mint-dark);
      border-color: var(--line-strong);
      background: var(--mist);
      box-shadow: 3px 3px 0 rgba(244, 195, 93, .45);
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: .7rem;
    }

    .button,
    .primary-btn,
    .secondary-btn,
    .menu-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .45rem;
      min-height: 42px;
      margin: 0;
      padding: .75rem 1rem;
      border-radius: var(--radius);
      font-weight: 800;
      line-height: 1;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
    }

    .primary-btn {
      color: #fff;
      background: var(--mint-dark);
      border: 2px solid #126a59;
      box-shadow: 4px 4px 0 rgba(239, 127, 98, .30);
    }

    .primary-btn:hover {
      color: #fff;
      background: #126a59;
      transform: translateY(-2px);
      box-shadow: 5px 6px 0 rgba(239, 127, 98, .26);
    }

    .secondary-btn,
    .menu-toggle {
      color: var(--ink);
      background: #fffdf8;
      border: 2px solid var(--line-strong);
      box-shadow: 3px 3px 0 rgba(49, 191, 163, .14);
    }

    .secondary-btn:hover,
    .menu-toggle:hover {
      color: var(--mint-dark);
      border-color: var(--mint);
      background: var(--mist);
      transform: translateY(-1px);
    }

    .icon-inline {
      width: 1rem;
      height: 1rem;
      stroke-width: 2.3;
      flex: 0 0 auto;
    }

    .off-canvas {
      background: var(--paper);
      border-left: 1px solid var(--line);
      padding: 1.2rem;
    }

    .mobile-drawer-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--line);
    }

    .drawer-close {
      width: 40px;
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 2px solid var(--line-strong);
      background: #fff;
      color: var(--ink);
      border-radius: var(--radius);
    }

    .mobile-nav {
      display: grid;
      gap: .65rem;
      margin-top: 1rem;
    }

    .mobile-nav a {
      padding: .82rem .9rem;
      border: 1px solid var(--line);
      background: #fff;
      font-weight: 800;
      box-shadow: 3px 3px 0 rgba(49, 191, 163, .10);
    }

    .mobile-nav a.is-active,
    .mobile-nav a:hover {
      color: var(--mint-dark);
      background: var(--mist);
      border-color: var(--mint);
    }

    main {
      position: relative;
    }

    .section {
      padding: 4.6rem 0;
    }

    .section.compact {
      padding: 3.2rem 0;
    }

    .hero-topic {
      position: relative;
      min-height: 520px;
      padding: 4.2rem 0 3rem;
      overflow: hidden;
      background:
        radial-gradient(circle at 14% 24%, rgba(244, 195, 93, .22) 0 70px, transparent 72px),
        linear-gradient(135deg, rgba(237, 248, 243, .95), rgba(255, 253, 248, .95));
      border-bottom: 1px solid var(--line);
    }

    .hero-topic::before {
      content: "";
      position: absolute;
      inset: 1.2rem;
      pointer-events: none;
      border: 2px dashed rgba(49, 191, 163, .25);
      box-shadow: inset 0 0 0 6px rgba(255, 253, 248, .45);
    }

    .hero-layout {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(280px, .72fr);
      gap: 2rem;
      align-items: center;
    }

    .breadcrumb {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .45rem;
      margin: 0 0 1.2rem;
      color: var(--muted);
      font-size: .92rem;
      font-weight: 700;
    }

    .breadcrumb a {
      color: var(--mint-dark);
      border-bottom: 1px solid rgba(49, 191, 163, .35);
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      margin-bottom: 1rem;
      padding: .42rem .7rem;
      color: #6d432a;
      background: #fff3d8;
      border: 2px solid rgba(244, 195, 93, .8);
      font-size: .9rem;
      font-weight: 900;
      box-shadow: 3px 3px 0 rgba(244, 195, 93, .26);
    }

    h1,
    h2,
    h3,
    p {
      margin-top: 0;
    }

    h1 {
      max-width: 860px;
      margin-bottom: 1rem;
      color: var(--ink);
      font-size: clamp(2.1rem, 4vw, 4.35rem);
      line-height: 1.08;
      font-weight: 900;
      letter-spacing: 0;
    }

    .hero-copy {
      max-width: 760px;
      margin-bottom: 1.4rem;
      color: #405351;
      font-size: 1.08rem;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .85rem;
      margin: 1.4rem 0 1.6rem;
    }

    .hero-chips,
    .chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: .62rem;
      align-items: center;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: .48rem .66rem;
      color: var(--text);
      background: rgba(255, 255, 255, .82);
      border: 1px solid var(--line-strong);
      font-size: .9rem;
      font-weight: 800;
      box-shadow: 3px 3px 0 rgba(139, 128, 200, .13);
    }

    .chip:hover,
    .chip.is-on {
      color: var(--mint-dark);
      border-color: var(--mint);
      background: var(--mist);
    }

    .hero-panel {
      position: relative;
      padding: 1rem;
      background: rgba(255, 253, 248, .84);
      border: 2px solid var(--line-strong);
      box-shadow: var(--shadow);
    }

    .burst {
      position: absolute;
      top: -18px;
      right: 18px;
      z-index: 2;
      padding: .45rem .62rem;
      color: #fff;
      background: var(--coral);
      border: 2px solid #9d4e3b;
      font-weight: 900;
      transform: rotate(3deg);
      box-shadow: 4px 4px 0 rgba(29, 43, 42, .12);
    }

    .pixel-poster {
      min-height: 310px;
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(90deg, rgba(255,255,255,.50) 0 16px, transparent 16px 32px),
        linear-gradient(180deg, rgba(49, 191, 163, .20), rgba(244, 195, 93, .20)),
        #e7f8ef;
      border: 2px solid var(--ink);
      box-shadow: inset 0 0 0 8px rgba(255, 253, 248, .58);
    }

    .pixel-poster::before,
    .pixel-poster::after {
      content: "";
      position: absolute;
      image-rendering: pixelated;
    }

    .pixel-poster::before {
      width: 178px;
      height: 126px;
      left: 28px;
      top: 42px;
      background:
        linear-gradient(var(--mint) 0 0) 0 0 / 44px 44px no-repeat,
        linear-gradient(var(--amber) 0 0) 44px 44px / 44px 44px no-repeat,
        linear-gradient(var(--coral) 0 0) 88px 0 / 44px 44px no-repeat,
        linear-gradient(var(--violet) 0 0) 132px 44px / 44px 44px no-repeat,
        linear-gradient(#fff 0 0) 44px 88px / 132px 24px no-repeat;
      opacity: .95;
    }

    .pixel-poster::after {
      right: 22px;
      bottom: 28px;
      width: 220px;
      height: 120px;
      background:
        linear-gradient(#fffdf8 0 0) 0 0 / 220px 28px no-repeat,
        linear-gradient(var(--mint-dark) 0 0) 0 46px / 120px 18px no-repeat,
        linear-gradient(var(--coral) 0 0) 0 76px / 160px 18px no-repeat,
        linear-gradient(var(--amber) 0 0) 0 106px / 92px 14px no-repeat;
      border-left: 4px solid rgba(29, 43, 42, .28);
    }

    .poster-caption {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 18px;
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      padding: .76rem;
      background: rgba(255, 253, 248, .9);
      border: 1px solid var(--line-strong);
      color: var(--ink);
      font-weight: 900;
    }

    .stat-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: .7rem;
      margin-top: .85rem;
    }

    .stat {
      padding: .75rem;
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: 3px 3px 0 rgba(49, 191, 163, .10);
    }

    .stat strong {
      display: block;
      color: var(--ink);
      font-size: 1.2rem;
      line-height: 1.1;
    }

    .stat span {
      color: var(--muted);
      font-size: .84rem;
      font-weight: 700;
    }

    .section-head {
      max-width: 760px;
      margin-bottom: 1.8rem;
    }

    .section-kicker {
      display: inline-flex;
      align-items: center;
      margin-bottom: .7rem;
      color: var(--mint-dark);
      font-size: .92rem;
      font-weight: 900;
    }

    h2 {
      color: var(--ink);
      font-size: clamp(1.65rem, 2.5vw, 2.55rem);
      line-height: 1.18;
      font-weight: 900;
      letter-spacing: 0;
    }

    h3 {
      color: var(--ink);
      font-size: 1.18rem;
      line-height: 1.34;
      font-weight: 900;
      letter-spacing: 0;
    }

    .lead {
      color: var(--muted);
      font-size: 1.02rem;
    }

    .featured-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
      gap: 1.2rem;
      align-items: stretch;
    }

    .featured-card,
    .topic-card,
    .rule-card,
    .timeline-card,
    .cta-panel,
    .faq-item,
    .info-bar {
      background: rgba(255, 253, 248, .94);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-soft);
    }

    .featured-card {
      display: grid;
      grid-template-columns: minmax(230px, .82fr) minmax(0, 1fr);
      overflow: hidden;
      border-width: 2px;
      border-color: var(--line-strong);
    }

    .cover {
      min-height: 260px;
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(135deg, rgba(49, 191, 163, .22), rgba(255, 255, 255, .20)),
        repeating-linear-gradient(90deg, rgba(29, 43, 42, .10) 0 8px, transparent 8px 16px),
        #edf8f3;
    }

    .cover::before {
      content: "";
      position: absolute;
      inset: 22px;
      border: 2px solid rgba(29, 43, 42, .28);
      background:
        linear-gradient(var(--coral) 0 0) 24px 28px / 74px 18px no-repeat,
        linear-gradient(var(--mint-dark) 0 0) 24px 62px / 130px 18px no-repeat,
        linear-gradient(var(--amber) 0 0) 24px 96px / 100px 18px no-repeat,
        linear-gradient(#fffdf8 0 0) right 22px bottom 20px / 112px 48px no-repeat;
    }

    .cover .badge {
      position: absolute;
      left: 16px;
      top: 16px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: .35rem .55rem;
      color: #fff;
      background: var(--mint-dark);
      border: 1px solid #126a59;
      font-size: .78rem;
      font-weight: 900;
      line-height: 1;
      box-shadow: 3px 3px 0 rgba(244, 195, 93, .38);
    }

    .badge.alt {
      background: var(--coral);
      border-color: #a14e39;
    }

    .featured-body {
      padding: 1.45rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 1.1rem;
    }

    .meta-line {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem .8rem;
      color: var(--muted);
      font-size: .88rem;
      font-weight: 700;
    }

    .meta-line span {
      display: inline-flex;
      align-items: center;
      gap: .3rem;
    }

    .side-stack {
      display: grid;
      gap: 1rem;
    }

    .mini-feature {
      display: grid;
      grid-template-columns: 88px minmax(0, 1fr);
      gap: .9rem;
      align-items: center;
      padding: .9rem;
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: 3px 3px 0 rgba(49, 191, 163, .10);
    }

    .mini-cover {
      aspect-ratio: 1 / 1;
      background:
        linear-gradient(var(--amber) 0 0) 12px 16px / 42px 12px no-repeat,
        linear-gradient(var(--mint) 0 0) 12px 40px / 58px 12px no-repeat,
        linear-gradient(var(--coral) 0 0) 12px 64px / 34px 10px no-repeat,
        #f4fbf6;
      border: 2px solid var(--line-strong);
    }

    .mini-feature p {
      margin-bottom: 0;
      color: var(--muted);
      font-size: .9rem;
      line-height: 1.55;
    }

    .info-bars {
      display: grid;
      gap: .8rem;
    }

    .info-bar {
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr) auto;
      gap: .9rem;
      align-items: center;
      padding: .95rem;
    }

    .step-no {
      width: 42px;
      height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--ink);
      background: #fff3d8;
      border: 2px solid var(--amber);
      font-weight: 900;
      box-shadow: 3px 3px 0 rgba(244, 195, 93, .25);
    }

    .info-bar p {
      margin: .1rem 0 0;
      color: var(--muted);
      font-size: .92rem;
    }

    .topic-mosaic {
      display: grid;
      grid-template-columns: 1.25fr .85fr 1fr;
      gap: 1rem;
      align-items: stretch;
    }

    .topic-card {
      position: relative;
      min-height: 190px;
      padding: 1.1rem;
      overflow: hidden;
      border-top: 4px solid var(--mint);
    }

    .topic-card.wide {
      grid-row: span 2;
      min-height: 360px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,253,248,.94)),
        repeating-linear-gradient(0deg, rgba(49,191,163,.10) 0 10px, transparent 10px 20px);
    }

    .topic-card.coral {
      border-top-color: var(--coral);
    }

    .topic-card.amber {
      border-top-color: var(--amber);
    }

    .topic-card.violet {
      border-top-color: var(--violet);
    }

    .topic-card p {
      color: var(--muted);
      margin-bottom: 1rem;
    }

    .topic-list {
      display: grid;
      gap: .6rem;
      margin: 1rem 0 0;
      padding: 0;
      list-style: none;
    }

    .topic-list li {
      display: flex;
      align-items: flex-start;
      gap: .55rem;
      padding: .62rem .7rem;
      background: rgba(255, 255, 255, .72);
      border: 1px solid var(--line);
      color: var(--text);
      font-weight: 700;
    }

    .topic-list li::before {
      content: "";
      width: 10px;
      height: 10px;
      margin-top: .45rem;
      flex: 0 0 auto;
      background: var(--mint);
      box-shadow: 6px 0 0 var(--amber);
    }

    .rules-layout {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
      gap: 1.2rem;
      align-items: start;
    }

    .rule-card {
      padding: 1.1rem;
    }

    .rule-grid {
      display: grid;
      gap: .8rem;
    }

    .rule-row {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      gap: .75rem;
      padding: .9rem;
      background: #fff;
      border: 1px solid var(--line);
    }

    .rule-row strong {
      display: block;
      color: var(--ink);
      margin-bottom: .18rem;
    }

    .rule-row p {
      margin: 0;
      color: var(--muted);
      font-size: .92rem;
      line-height: 1.58;
    }

    .dot-no {
      width: 30px;
      height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: var(--mint-dark);
      font-size: .88rem;
      font-weight: 900;
      box-shadow: 3px 3px 0 rgba(239, 127, 98, .23);
    }

    .timeline-card {
      padding: 1rem;
    }

    .time-list {
      display: grid;
      gap: .7rem;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .time-list li {
      display: grid;
      grid-template-columns: 88px minmax(0, 1fr);
      gap: .8rem;
      padding: .72rem;
      background: #fff;
      border: 1px solid var(--line);
    }

    .time-list time {
      color: var(--mint-dark);
      font-weight: 900;
    }

    .time-list span {
      color: var(--muted);
      font-size: .92rem;
    }

    .faq-wrap {
      display: grid;
      gap: .75rem;
      max-width: 900px;
    }

    .faq-item {
      overflow: hidden;
    }

    .faq-title {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1rem 1.1rem;
      color: var(--ink);
      background: #fffdf8;
      border: 0;
      text-align: left;
      font-weight: 900;
    }

    .faq-title:hover {
      color: var(--mint-dark);
      background: var(--mist);
    }

    .faq-title i {
      transition: transform .18s ease;
    }

    .faq-item.is-active .faq-title i {
      transform: rotate(180deg);
    }

    .faq-content {
      display: none;
      padding: 0 1.1rem 1.05rem;
      color: var(--muted);
      border-top: 1px solid var(--line);
    }

    .faq-item.is-active .faq-content {
      display: block;
    }

    .faq-content p {
      margin: .9rem 0 0;
    }

    .cta-panel {
      position: relative;
      overflow: hidden;
      padding: 2rem;
      background:
        linear-gradient(90deg, rgba(49, 191, 163, .16), rgba(244, 195, 93, .18)),
        var(--paper);
      border: 2px solid var(--line-strong);
    }

    .cta-panel::after {
      content: "";
      position: absolute;
      right: 2rem;
      bottom: 1.5rem;
      width: 120px;
      height: 70px;
      background:
        linear-gradient(var(--mint) 0 0) 0 0 / 30px 30px no-repeat,
        linear-gradient(var(--coral) 0 0) 30px 30px / 30px 30px no-repeat,
        linear-gradient(var(--amber) 0 0) 60px 0 / 30px 30px no-repeat,
        linear-gradient(var(--violet) 0 0) 90px 30px / 30px 30px no-repeat;
      opacity: .35;
      image-rendering: pixelated;
    }

    .cta-content {
      position: relative;
      z-index: 1;
      max-width: 760px;
    }

    .cta-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .8rem;
      margin-top: 1.2rem;
    }

    .site-footer {
      padding: 2.4rem 0;
      background: #1f2b2a;
      color: rgba(255, 253, 248, .82);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: minmax(260px, 1.1fr) minmax(180px, .6fr) minmax(280px, 1fr);
      gap: 1.6rem;
      align-items: start;
    }

    .site-footer .brand {
      color: #fffdf8;
    }

    .site-footer .brand:hover {
      color: #b7f1df;
    }

    .footer-brand p {
      max-width: 420px;
      margin: .9rem 0 0;
      color: rgba(255, 253, 248, .64);
      font-size: .94rem;
    }

    .footer-nav {
      display: grid;
      gap: .55rem;
    }

    .footer-nav a {
      width: fit-content;
      color: rgba(255, 253, 248, .78);
      border-bottom: 1px solid transparent;
      font-weight: 800;
    }

    .footer-nav a:hover,
    .footer-nav a[aria-current="page"] {
      color: #b7f1df;
      border-color: #b7f1df;
    }

    .footer-note {
      display: grid;
      gap: .75rem;
    }

    .footer-small {
      display: flex;
      flex-wrap: wrap;
      gap: .55rem;
      align-items: center;
      color: rgba(255, 253, 248, .68);
      font-size: .9rem;
    }

    .footer-chip {
      padding: .2rem .45rem;
      color: #fffdf8;
      background: rgba(49, 191, 163, .18);
      border: 1px solid rgba(183, 241, 223, .28);
    }

    @media screen and (max-width: 1024px) {
      .hero-layout,
      .featured-grid,
      .rules-layout {
        grid-template-columns: 1fr;
      }

      .topic-mosaic {
        grid-template-columns: 1fr 1fr;
      }

      .topic-card.wide {
        grid-row: auto;
        min-height: 260px;
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }

      .footer-note {
        grid-column: 1 / -1;
      }
    }

    @media screen and (max-width: 768px) {
      :root {
        --header-h: 64px;
      }

      .brand span:last-child {
        max-width: 13.5rem;
        overflow-wrap: anywhere;
      }

      .hero-topic {
        min-height: auto;
        padding: 2.4rem 0 2.2rem;
      }

      .hero-topic::before {
        inset: .7rem;
      }

      .hero-layout {
        gap: 1.3rem;
      }

      .hero-actions,
      .cta-actions {
        flex-direction: column;
      }

      .primary-btn,
      .secondary-btn,
      .menu-toggle {
        width: 100%;
      }

      .header-actions .menu-toggle {
        width: auto;
      }

      .featured-card {
        grid-template-columns: 1fr;
      }

      .cover,
      .pixel-poster {
        min-height: 230px;
      }

      .info-bar {
        grid-template-columns: 46px minmax(0, 1fr);
      }

      .info-bar .secondary-btn {
        grid-column: 1 / -1;
      }

      .topic-mosaic {
        grid-template-columns: 1fr;
      }

      .stat-strip {
        grid-template-columns: 1fr;
      }

      .time-list li {
        grid-template-columns: 1fr;
      }

      .footer-grid {
        grid-template-columns: 1fr;
      }
    }

    @media screen and (max-width: 520px) {
      .grid-container {
        padding-left: 1rem;
        padding-right: 1rem;
      }

      h1 {
        font-size: 2rem;
      }

      h2 {
        font-size: 1.55rem;
      }

      .section {
        padding: 3.2rem 0;
      }

      .section.compact {
        padding: 2.4rem 0;
      }

      .poster-caption {
        position: static;
        margin: 1rem;
        flex-direction: column;
      }

      .pixel-poster::before {
        left: 16px;
        top: 34px;
        transform: scale(.82);
        transform-origin: left top;
      }

      .pixel-poster::after {
        right: 10px;
        bottom: 18px;
        transform: scale(.78);
        transform-origin: right bottom;
      }

      .mini-feature {
        grid-template-columns: 68px minmax(0, 1fr);
      }

      .cta-panel {
        padding: 1.3rem;
      }

      .cta-panel::after {
        display: none;
      }
    }