/* roulang page: index */
:root {
      --ink: #161515;
      --paper: #faf6f1;
      --soft: #f3ede6;
      --line: #e7ddd4;
      --muted: #6b615b;
      --accent: #7b2136;
      --accent-dark: #5d1627;
      --copper: #8b5b35;
      --charcoal: #1f1a19;
      --radius: 10px;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      color: var(--ink);
      background:
        linear-gradient(180deg, rgba(250, 246, 241, 0.98), rgba(248, 243, 237, 1));
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
      line-height: 1.75;
      letter-spacing: 0;
    }

    * {
      box-sizing: border-box;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

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

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    ::selection {
      background: rgba(123, 33, 54, 0.16);
    }

    .site-container {
      width: min(1280px, calc(100% - 2rem));
      margin: 0 auto;
    }

    .section-band {
      position: relative;
    }

    .section-band::before {
      content: "";
      position: absolute;
      inset: 0;
      border-top: 1px solid rgba(231, 221, 212, 0.9);
      pointer-events: none;
    }

    .section-title {
      letter-spacing: 0;
    }

    .nav-scroll {
      scrollbar-width: none;
      -ms-overflow-style: none;
      mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    }

    .nav-scroll::-webkit-scrollbar {
      display: none;
    }

    .fine-line {
      background: linear-gradient(90deg, rgba(231, 221, 212, 0), rgba(231, 221, 212, 1), rgba(231, 221, 212, 0));
      height: 1px;
    }

    .panel {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.72);
      box-shadow: 0 1px 0 rgba(16, 10, 6, 0.03);
    }

    .panel-dark {
      border: 1px solid rgba(255, 255, 255, 0.10);
      border-radius: var(--radius);
      background: rgba(24, 21, 20, 0.94);
      color: #f7f1ea;
      box-shadow: 0 18px 36px rgba(18, 12, 8, 0.12);
    }

    .label-chip {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: .35rem .72rem;
      font-size: .82rem;
      line-height: 1.2;
      color: var(--muted);
      background: rgba(255, 255, 255, .66);
      transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
      white-space: nowrap;
    }

    .label-chip:hover,
    .label-chip.active {
      color: var(--accent);
      border-color: rgba(123, 33, 54, .28);
      background: rgba(123, 33, 54, .06);
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      min-height: 46px;
      border-radius: 999px;
      padding: .75rem 1.15rem;
      font-weight: 700;
      line-height: 1;
      border: 1px solid transparent;
      transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
      cursor: pointer;
    }

    .btn:hover {
      transform: translateY(-2px);
    }

    .btn:active {
      transform: translateY(0);
    }

    .btn:focus-visible,
    .faq-button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    a:focus-visible {
      outline: 3px solid rgba(123, 33, 54, .22);
      outline-offset: 3px;
    }

    .btn-primary {
      color: #fff;
      background: var(--accent);
      box-shadow: 0 10px 24px rgba(123, 33, 54, .18);
    }

    .btn-primary:hover {
      background: var(--accent-dark);
      box-shadow: 0 14px 28px rgba(123, 33, 54, .24);
    }

    .btn-secondary {
      color: var(--ink);
      border-color: var(--line);
      background: rgba(255, 255, 255, .78);
    }

    .btn-secondary:hover {
      border-color: rgba(123, 33, 54, .30);
      color: var(--accent);
      background: #fff;
    }

    .btn-dark {
      color: #f9f3ed;
      background: #24201f;
      border-color: rgba(255, 255, 255, .12);
    }

    .btn-dark:hover {
      background: #322b29;
      border-color: rgba(255, 255, 255, .22);
    }

    .hover-card {
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .hover-card:hover {
      transform: translateY(-2px);
      border-color: rgba(123, 33, 54, .30);
      box-shadow: var(--shadow, 0 14px 35px rgba(19, 14, 10, .08));
      background: rgba(255, 255, 255, .86);
    }

    .hero-stripe {
      background:
        linear-gradient(90deg, rgba(123, 33, 54, .08), rgba(139, 91, 53, .06) 38%, rgba(255, 255, 255, .35)),
        var(--paper);
      border-bottom: 1px solid var(--line);
    }

    .bento-grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr 1fr;
      gap: .75rem;
    }

    .step-axis {
      position: relative;
    }

    .step-axis::before {
      content: "";
      position: absolute;
      left: 22px;
      top: 28px;
      bottom: 28px;
      width: 1px;
      background: var(--line);
    }

    .faq-answer {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height .22s ease, opacity .22s ease, padding .22s ease;
    }

    .faq-item.open .faq-answer {
      max-height: 180px;
      opacity: 1;
      padding-top: .75rem;
    }

    .faq-icon {
      transition: transform .2s ease;
    }

    .faq-item.open .faq-icon {
      transform: rotate(45deg);
    }

    .field {
      width: 100%;
      min-height: 46px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255,255,255,.86);
      padding: .75rem .9rem;
      color: var(--ink);
      transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .field:focus {
      border-color: rgba(123, 33, 54, .55);
      box-shadow: 0 0 0 4px rgba(123, 33, 54, .10);
      background: #fff;
      outline: none;
    }

    .ticker-row {
      display: grid;
      grid-template-columns: 112px 1fr auto;
      gap: 1rem;
      align-items: center;
    }

    .compare-grid {
      display: grid;
      grid-template-columns: 1.1fr repeat(3, minmax(0, 1fr));
    }

    .compare-grid > div {
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .compare-grid > div:nth-child(4n) {
      border-right: 0;
    }

    .sticky-cta {
      display: none;
    }

    @media (max-width: 1024px) {
      .bento-grid {
        grid-template-columns: 1fr 1fr;
      }

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

      .compare-grid > div {
        border-right: 0;
      }

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

    @media (max-width: 768px) {
      .site-container {
        width: min(100% - 1rem, 1280px);
      }

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

      .step-axis::before {
        left: 18px;
      }

      .btn {
        width: 100%;
      }

      .sticky-cta {
        position: fixed;
        left: .75rem;
        right: .75rem;
        bottom: .75rem;
        z-index: 50;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: .5rem;
        align-items: center;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 999px;
        padding: .45rem .45rem .45rem .9rem;
        color: #fff;
        background: rgba(31, 26, 25, .94);
        box-shadow: 0 12px 34px rgba(18,12,8,.18);
        backdrop-filter: blur(10px);
      }

      body {
        padding-bottom: 78px;
      }
    }

    @media (max-width: 520px) {
      .label-chip {
        font-size: .78rem;
        padding: .32rem .62rem;
      }

      .hero-stripe h1 {
        font-size: 2.15rem;
        line-height: 1.12;
      }
    }

/* roulang page: category1 */
:root {
      --ink: #171412;
      --paper: #fbfaf7;
      --soft: #f4f0ea;
      --charcoal: #201c1a;
      --muted: #746b63;
      --line: #e6dfd7;
      --accent: #8f2038;
      --accent-dark: #6f1729;
      --copper: #a66b3f;
      --radius: 10px;
      --shadow: 0 14px 34px rgba(32, 28, 26, .08);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
      line-height: 1.65;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

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

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

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

    .site-container {
      width: min(100% - 32px, 1240px);
      margin-inline: auto;
    }

    .label-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .42rem;
      min-height: 34px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 255, 255, .55);
      padding: .42rem .76rem;
      color: var(--muted);
      white-space: nowrap;
      line-height: 1;
    }

    .label-chip:hover {
      border-color: rgba(143, 32, 56, .45);
      color: var(--accent);
      background: rgba(143, 32, 56, .06);
    }

    .label-chip.active {
      border-color: rgba(143, 32, 56, .28);
      background: rgba(143, 32, 56, .1);
      color: var(--accent);
      box-shadow: inset 0 -2px 0 var(--accent);
    }

    .nav-scroll {
      scrollbar-width: none;
      position: relative;
    }

    .nav-scroll::-webkit-scrollbar {
      display: none;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      border-radius: 999px;
      border: 1px solid transparent;
      padding: .72rem 1.12rem;
      font-weight: 800;
      line-height: 1;
      transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
    }

    .btn-primary {
      background: var(--accent);
      color: #fff;
      box-shadow: 0 10px 22px rgba(143, 32, 56, .18);
    }

    .btn-primary:hover {
      background: var(--accent-dark);
      transform: translateY(-2px);
    }

    .btn-secondary {
      border-color: var(--line);
      background: #fff;
      color: var(--ink);
    }

    .btn-secondary:hover {
      border-color: rgba(143, 32, 56, .38);
      color: var(--accent);
      transform: translateY(-2px);
    }

    .btn-dark {
      background: #fff;
      color: var(--charcoal);
    }

    .btn-dark:hover {
      background: rgba(255, 255, 255, .9);
      transform: translateY(-2px);
    }

    .btn:focus-visible,
    .label-chip:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    .faq-toggle:focus-visible {
      outline: 3px solid rgba(143, 32, 56, .24);
      outline-offset: 3px;
    }

    .section {
      padding: 72px 0;
    }

    .section-tight {
      padding: 46px 0;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      color: var(--accent);
      font-size: .86rem;
      font-weight: 900;
    }

    .eyebrow::before {
      content: "";
      width: 28px;
      height: 1px;
      background: var(--accent);
    }

    .card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .72);
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
    }

    .card:hover {
      transform: translateY(-2px);
      border-color: rgba(143, 32, 56, .35);
      box-shadow: var(--shadow);
      background: #fff;
    }

    .hero-cover {
      background:
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.04) 1px, transparent 1px),
        var(--charcoal);
      background-size: 28px 28px;
      border: 1px solid rgba(255, 255, 255, .12);
      color: #fff;
    }

    .cover-spine {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      letter-spacing: 0;
    }

    .topic-card.featured {
      background: #fff;
      border-color: rgba(143, 32, 56, .28);
    }

    .topic-card .meta {
      color: var(--muted);
      font-size: .86rem;
    }

    .side-panel {
      position: sticky;
      top: 126px;
    }

    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--accent);
      box-shadow: 0 0 0 5px rgba(143, 32, 56, .1);
    }

    .mini-table {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
    }

    .mini-table-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 16px;
      padding: 14px 16px;
      border-top: 1px solid var(--line);
      align-items: center;
    }

    .mini-table-row:first-child {
      border-top: 0;
      background: var(--soft);
      font-weight: 900;
    }

    .faq-item {
      border-bottom: 1px solid var(--line);
    }

    .faq-toggle {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 20px 0;
      text-align: left;
      font-weight: 900;
    }

    .faq-panel {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      color: var(--muted);
      transition: max-height .22s ease, opacity .2s ease, padding-bottom .22s ease;
    }

    .faq-item.open .faq-panel {
      max-height: 180px;
      opacity: 1;
      padding-bottom: 20px;
    }

    .faq-icon {
      flex: 0 0 auto;
      width: 28px;
      height: 28px;
      border-radius: 999px;
      border: 1px solid var(--line);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
      transition: transform .2s ease;
    }

    .faq-item.open .faq-icon {
      transform: rotate(45deg);
    }

    .form-field {
      display: grid;
      gap: 8px;
    }

    .form-field label {
      font-size: .9rem;
      font-weight: 800;
      color: var(--ink);
    }

    .form-control {
      min-height: 46px;
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 10px 12px;
      color: var(--ink);
      transition: border-color .2s ease, box-shadow .2s ease;
    }

    .form-control:focus {
      border-color: rgba(143, 32, 56, .62);
      box-shadow: 0 0 0 4px rgba(143, 32, 56, .1);
      outline: none;
    }

    textarea.form-control {
      min-height: 112px;
      resize: vertical;
    }

    @media (max-width: 1024px) {
      .section {
        padding: 58px 0;
      }

      .side-panel {
        position: static;
      }
    }

    @media (max-width: 768px) {
      .site-container {
        width: min(100% - 24px, 1240px);
      }

      .section {
        padding: 48px 0;
      }

      .nav-scroll {
        margin-inline: -12px;
        padding-inline: 12px;
        mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 34px), transparent 100%);
      }

      .btn {
        width: 100%;
      }

      .mini-table-row {
        grid-template-columns: 1fr;
        gap: 4px;
      }
    }

    @media (max-width: 520px) {
      .label-chip {
        min-height: 32px;
        padding: .38rem .62rem;
        font-size: .78rem;
      }

      .cover-spine {
        writing-mode: horizontal-tb;
      }
    }