/* roulang page: index */
:root {
      --paper: #fff8f4;
      --surface: #ffffff;
      --ink: #302624;
      --muted: #796d68;
      --line: #f0e4df;
      --peach: #ff765f;
      --coral: #ed594e;
      --berry: #874c78;
      --plum: #56334f;
      --mint: #3f7868;
      --sun: #e7a13d;
      --soft-peach: #fff0e9;
      --soft-berry: #f5eaf2;
      --shadow: 0 14px 36px rgba(77, 48, 43, .08);
      --radius: 22px;
      --container: 1200px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 92px; }
    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      font-size: 15px;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    a:focus-visible, button:focus-visible, summary:focus-visible {
      outline: 3px solid rgba(237, 89, 78, .38);
      outline-offset: 3px;
    }
    .container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
    .site-header {
      position: sticky;
      z-index: 20;
      top: 0;
      background: rgba(255, 250, 247, .96);
      border-bottom: 1px solid rgba(240, 228, 223, .9);
      transition: box-shadow .2s ease, background .2s ease;
    }
    .nav-wrap { min-height: 76px; display: flex; align-items: center; gap: 32px; }
    .brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; font-size: 19px; font-weight: 850; }
    .brand-mark {
      width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px;
      color: #fff; background: linear-gradient(135deg, #ff9872, #e95763 58%, #9a568a);
      box-shadow: 0 6px 14px rgba(220, 93, 87, .22); font-size: 16px;
    }
    .nav-links { display: flex; align-items: center; justify-content: center; gap: 26px; margin-left: auto; }
    .nav-links a { position: relative; padding: 26px 0; color: #6f625e; font-size: 14px; font-weight: 650; transition: color .2s ease; }
    .nav-links a:hover, .nav-links a.active { color: var(--coral); }
    .nav-links a.active::after { position: absolute; content: ""; height: 3px; width: 18px; bottom: 17px; left: 50%; transform: translateX(-50%); border-radius: 9px; background: var(--peach); }
    .nav-cta, .button {
      min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
      padding: 0 19px; border: 1px solid transparent; border-radius: 13px; font-size: 14px; font-weight: 750;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    }
    .nav-cta, .button-primary { color: #fff; background: linear-gradient(120deg, #ff8c6e, #e9585b); box-shadow: 0 8px 18px rgba(222, 91, 85, .2); }
    .nav-cta:hover, .button-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(222, 91, 85, .28); }
    .button-secondary { color: var(--plum); background: rgba(255,255,255,.8); border-color: #eadbdc; }
    .button-secondary:hover { background: var(--soft-berry); border-color: #d8c0d2; }
    .menu-toggle { display: none; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); cursor: pointer; }
    .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { display: block; width: 17px; height: 2px; background: currentColor; position: relative; }
    .menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; }
    .menu-toggle span::before { top: -6px; } .menu-toggle span::after { top: 6px; }
    main { overflow: hidden; }
    section { position: relative; padding: 82px 0; }
    .section-soft { background: #fffdfb; }
    .section-tint { background: #fff2ec; }
    .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
    .section-heading h2 { margin: 0; font-size: clamp(25px, 3vw, 34px); line-height: 1.25; letter-spacing: 0; }
    .section-heading p { max-width: 600px; margin: 10px 0 0; color: var(--muted); font-size: 14px; }
    .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--coral); font-weight: 800; font-size: 12px; text-transform: uppercase; }
    .eyebrow::before { content: ""; width: 20px; height: 2px; background: currentColor; border-radius: 3px; }
    .text-link { color: var(--berry); font-size: 14px; font-weight: 750; }
    .text-link:hover { color: var(--coral); }
    .hero {
      min-height: 590px; padding: 76px 0 70px; display: flex; align-items: center;
      background-image: linear-gradient(90deg, rgba(41, 25, 31, .76) 0%, rgba(65, 34, 42, .55) 47%, rgba(72, 36, 49, .18) 100%), url("/assets/images/9d5d342bd8095013.jpg");
      background-size: cover; background-position: center 43%; color: #fff;
    }
    .hero-content { max-width: 690px; }
    .hero-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid rgba(255,255,255,.34); border-radius: 99px; background: rgba(255,255,255,.12); font-size: 12px; color: #fff3ee; }
    .hero h1 { max-width: 660px; margin: 22px 0 12px; font-size: clamp(38px, 5.1vw, 62px); line-height: 1.12; font-weight: 900; }
    .hero h1 span { color: #ffb495; }
    .hero-subtitle { margin: 0; color: #ffebe2; font-size: 19px; font-weight: 650; }
    .hero-copy { max-width: 630px; margin: 16px 0 25px; color: rgba(255, 248, 245, .9); font-size: 15px; line-height: 1.9; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
    .hero .button-secondary { color: #fff; border-color: rgba(255,255,255,.48); background: rgba(255,255,255,.1); }
    .hero .button-secondary:hover { background: rgba(255,255,255,.2); }
    .hero-note { display: flex; align-items: center; gap: 18px; margin-top: 27px; color: rgba(255,255,255,.83); font-size: 12px; }
    .hero-note span + span { border-left: 1px solid rgba(255,255,255,.35); padding-left: 18px; }
    .quickbar { padding: 0; margin-top: -28px; position: relative; z-index: 2; }
    .quick-inner { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
    .quick-item { min-height: 82px; display: flex; align-items: center; gap: 14px; padding: 16px 23px; border-right: 1px solid var(--line); }
    .quick-item:last-child { border-right: 0; }
    .quick-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; background: var(--soft-peach); color: var(--coral); font-size: 18px; font-weight: 800; }
    .quick-item:nth-child(2) .quick-icon { background: var(--soft-berry); color: var(--berry); }
    .quick-item:nth-child(3) .quick-icon { background: #eaf4ef; color: var(--mint); }
    .quick-item:nth-child(4) .quick-icon { background: #fff4df; color: #b87a1e; }
    .quick-item strong { display: block; font-size: 14px; }
    .quick-item small { display: block; color: var(--muted); font-size: 12px; }
    .scene-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 16px; }
    .scene { min-height: 180px; position: relative; overflow: hidden; padding: 23px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
    .scene:first-child { background: linear-gradient(135deg, #fff0e9, #fff); }
    .scene h3 { margin: 20px 0 6px; font-size: 19px; }
    .scene p { margin: 0; max-width: 300px; color: var(--muted); font-size: 13px; }
    .scene-number { position: absolute; top: 17px; right: 20px; color: rgba(135,76,120,.16); font-size: 40px; font-weight: 900; }
    .scene-symbol { color: var(--coral); font-size: 21px; font-weight: 900; }
    .content-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 16px; }
    .poster-card { min-width: 0; }
    .poster-art { position: relative; aspect-ratio: 2 / 2.85; overflow: hidden; border-radius: 15px; background: #eaded7; box-shadow: 0 7px 17px rgba(58,35,34,.08); }
    .poster-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
    .poster-card:hover .poster-art img { transform: scale(1.045); }
    .poster-card:hover .poster-art { box-shadow: 0 12px 24px rgba(58,35,34,.15); }
    .poster-badge { position: absolute; top: 10px; left: 10px; padding: 4px 8px; border-radius: 8px; color: #fff; background: rgba(53,35,41,.78); font-size: 10px; font-weight: 800; }
    .poster-badge.new { background: var(--coral); }
    .poster-info { padding: 10px 2px 0; }
    .poster-title { display: block; overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
    .poster-meta { display: flex; justify-content: space-between; align-items: center; gap: 5px; margin-top: 5px; color: var(--muted); font-size: 11px; }
    .rating { color: #bb7a27; font-weight: 800; }
    .feature-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 30px; align-items: stretch; }
    .feature-lead { min-height: 370px; position: relative; display: flex; align-items: end; overflow: hidden; padding: 30px; border-radius: 22px; color: #fff; background: #543743; }
    .feature-lead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .feature-lead::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(34,21,27,.86), rgba(34,21,27,.05) 80%); }
    .feature-lead-content { position: relative; z-index: 1; }
    .feature-lead h3 { margin: 9px 0 7px; font-size: 27px; }
    .feature-lead p { max-width: 460px; margin: 0; color: rgba(255,255,255,.83); font-size: 13px; }
    .feature-side { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .feature-tile { min-height: 175px; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: #fff; }
    .feature-tile:nth-child(2) { background: #f8edf4; border-color: #efe0ea; }
    .feature-tile:nth-child(3) { background: #fff2e9; border-color: #f5e2d7; }
    .feature-tile:nth-child(4) { background: #eff6f1; border-color: #dfece3; }
    .tile-top { display: flex; justify-content: space-between; color: var(--berry); font-size: 12px; font-weight: 800; }
    .feature-tile h3 { margin: 18px 0 3px; font-size: 17px; }
    .feature-tile p { margin: 0; color: var(--muted); font-size: 12px; }
    .category-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
    .category-card { min-height: 205px; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; border-radius: 18px; border: 1px solid var(--line); background: #fff; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
    .category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #edc9c2; }
    .category-card:nth-child(2) { background: #f7eff6; }
    .category-card:nth-child(3) { background: #fff0e8; }
    .category-card:nth-child(4) { background: #eef6f1; }
    .category-card:nth-child(5) { background: #fff5e6; }
    .category-symbol { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.8); color: var(--berry); font-size: 18px; font-weight: 900; }
    .category-card h3 { margin: 13px 0 5px; font-size: 17px; }
    .category-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
    .category-arrow { align-self: end; color: var(--berry); font-weight: 850; }
    .rank-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
    .rank-list { margin: 0; padding: 0; list-style: none; }
    .rank-row { display: grid; grid-template-columns: 42px minmax(0,1fr) 76px 48px; align-items: center; gap: 13px; min-height: 67px; border-bottom: 1px solid var(--line); }
    .rank-no { color: #a3938d; font-size: 19px; font-weight: 850; font-variant-numeric: tabular-nums; }
    .rank-row:nth-child(-n+3) .rank-no { color: var(--coral); }
    .rank-name { overflow: hidden; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
    .rank-tag { justify-self: start; padding: 3px 8px; border-radius: 7px; color: var(--berry); background: var(--soft-berry); font-size: 10px; }
    .rank-hot { color: var(--muted); font-size: 11px; white-space: nowrap; }
    .rank-score { color: #b77a2b; font-size: 12px; font-weight: 850; text-align: right; }
    .preview-band { padding: 0; }
    .preview {
      min-height: 350px; display: grid; grid-template-columns: 1fr .85fr; align-items: center; gap: 50px;
      padding: 54px 7%; color: #fff; background: linear-gradient(120deg, rgba(57,36,47,.91), rgba(102,52,77,.8)), url("/assets/images/aac04afd0b957301.jpg") center / cover;
    }
    .preview h2 { margin: 10px 0 13px; font-size: 32px; line-height: 1.3; }
    .preview p { max-width: 500px; margin: 0; color: rgba(255,255,255,.82); }
    .preview-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .preview-stat { min-height: 100px; padding: 17px; border: 1px solid rgba(255,255,255,.24); border-radius: 16px; background: rgba(255,255,255,.1); }
    .preview-stat strong { display: block; font-size: 23px; }
    .preview-stat span { color: rgba(255,255,255,.75); font-size: 12px; }
    .quality-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; }
    .quality-item { min-height: 150px; padding: 24px; border-right: 1px solid var(--line); }
    .quality-item:last-child { border-right: 0; }
    .quality-mark { display: inline-flex; padding: 5px 9px; border-radius: 8px; color: var(--mint); background: #e9f4ee; font-size: 11px; font-weight: 850; }
    .quality-item:nth-child(2) .quality-mark { color: var(--coral); background: var(--soft-peach); }
    .quality-item:nth-child(3) .quality-mark { color: var(--berry); background: var(--soft-berry); }
    .quality-item:nth-child(4) .quality-mark { color: #a66c1d; background: #fff3df; }
    .quality-item h3 { margin: 15px 0 5px; font-size: 16px; }
    .quality-item p { margin: 0; color: var(--muted); font-size: 12px; }
    .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: steps; }
    .step { position: relative; padding: 5px 12px 0 0; counter-increment: steps; }
    .step::before { content: "0" counter(steps); display: block; margin-bottom: 15px; color: var(--coral); font-size: 22px; font-weight: 900; }
    .step:not(:last-child)::after { content: ""; position: absolute; top: 19px; left: 54px; right: 14px; border-top: 1px dashed #e7c9c0; }
    .step h3 { margin: 0 0 6px; font-size: 16px; }
    .step p { margin: 0; color: var(--muted); font-size: 12px; }
    .quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .quote { padding: 22px; border: 1px solid var(--line); border-radius: 17px; background: #fff; }
    .quote p { margin: 0 0 17px; font-size: 14px; line-height: 1.8; }
    .quote footer { color: var(--muted); font-size: 12px; }
    .quote-mark { color: var(--peach); font-size: 22px; font-weight: 900; }
    .signals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
    .signal { display: flex; align-items: center; gap: 12px; padding: 17px; border-radius: 15px; background: #fff; border: 1px solid var(--line); }
    .signal b { color: var(--coral); font-size: 22px; }
    .signal span { color: var(--muted); font-size: 12px; }
    .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .news-card { overflow: hidden; border-radius: 17px; background: #fff; border: 1px solid var(--line); transition: transform .2s ease, box-shadow .2s ease; }
    .news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
    .news-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
    .news-body { padding: 15px 17px 16px; }
    .news-body time { color: var(--coral); font-size: 11px; font-weight: 750; }
    .news-body h3 { margin: 7px 0 0; font-size: 15px; line-height: 1.55; }
    .faq-list { max-width: 900px; margin: auto; border-top: 1px solid var(--line); }
    .faq-list details { border-bottom: 1px solid var(--line); }
    .faq-list summary { position: relative; padding: 19px 42px 19px 3px; cursor: pointer; list-style: none; font-weight: 750; }
    .faq-list summary::-webkit-details-marker { display: none; }
    .faq-list summary::after { content: "+"; position: absolute; right: 8px; top: 15px; color: var(--coral); font-size: 22px; }
    .faq-list details[open] summary::after { content: "−"; }
    .faq-list details p { max-width: 800px; margin: -4px 40px 19px 3px; color: var(--muted); font-size: 14px; }
    .closing { padding: 54px 0; background: linear-gradient(110deg, #fff0e8, #f5eaf2); }
    .closing-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
    .closing h2 { margin: 0 0 6px; font-size: 26px; }
    .closing p { margin: 0; color: var(--muted); }
    .site-footer { padding: 54px 0 20px; color: #e9dfe2; background: #34272f; }
    .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 38px; padding-bottom: 38px; }
    .footer-brand { color: #fff; }
    .footer-about { max-width: 290px; margin: 14px 0 0; color: #c4b7bb; font-size: 13px; }
    .footer-col h3 { margin: 0 0 13px; color: #fff; font-size: 14px; }
    .footer-col a { display: block; width: fit-content; margin: 8px 0; color: #c4b7bb; font-size: 13px; transition: color .2s ease; }
    .footer-col a:hover { color: #ffac91; }
    .copyright { display: flex; justify-content: space-between; gap: 12px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.13); color: #a99ba0; font-size: 11px; }
    @media (max-width: 1024px) {
      .nav-wrap { gap: 20px; }
      .nav-links { gap: 17px; }
      .content-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .category-grid { grid-template-columns: repeat(3, 1fr); }
      .quick-item { padding-inline: 14px; }
      .feature-layout { gap: 20px; }
    }
    @media (max-width: 768px) {
      .container { width: min(100% - 36px, var(--container)); }
      .nav-wrap { min-height: 66px; justify-content: space-between; }
      .menu-toggle { display: grid; order: 3; }
      .nav-cta { margin-left: auto; min-height: 40px; padding-inline: 14px; }
      .nav-links { display: none; position: absolute; top: 65px; left: 0; right: 0; padding: 10px 18px 18px; margin: 0; align-items: stretch; gap: 0; flex-direction: column; background: #fffaf7; border-bottom: 1px solid var(--line); box-shadow: 0 14px 24px rgba(50,35,32,.08); }
      .nav-links.open { display: flex; }
      .nav-links a { padding: 12px 8px; }
      .nav-links a.active::after { left: 0; bottom: 9px; width: 3px; height: 18px; transform: none; }
      section { padding: 62px 0; }
      .hero { min-height: 525px; padding: 62px 0; background-position: 58% center; }
      .hero-content { max-width: 600px; }
      .quick-inner { grid-template-columns: 1fr 1fr; }
      .quick-item:nth-child(2) { border-right: 0; }
      .quick-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .scene-grid { grid-template-columns: 1fr 1fr; }
      .scene:first-child { grid-column: 1 / -1; }
      .content-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .feature-layout { grid-template-columns: 1fr; }
      .feature-lead { min-height: 330px; }
      .category-grid { grid-template-columns: repeat(2, 1fr); }
      .rank-layout { gap: 18px; }
      .rank-row { grid-template-columns: 30px minmax(0,1fr) 58px 38px; gap: 8px; }
      .rank-hot { font-size: 10px; }
      .preview { grid-template-columns: 1fr; gap: 26px; padding: 40px 7%; }
      .quality-grid { grid-template-columns: 1fr 1fr; }
      .quality-item:nth-child(2) { border-right: 0; }
      .quality-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .steps { grid-template-columns: 1fr 1fr; row-gap: 25px; }
      .step:nth-child(2)::after { display: none; }
      .quotes { grid-template-columns: 1fr 1fr; }
      .signals { grid-template-columns: 1fr 1fr; }
      .news-grid { grid-template-columns: 1fr 1fr; }
      .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
      .footer-grid > :first-child { grid-column: 1 / -1; }
    }
    @media (max-width: 520px) {
      .container { width: calc(100% - 32px); }
      .brand { font-size: 17px; }
      .brand-mark { width: 35px; height: 35px; }
      .nav-cta { font-size: 12px; padding-inline: 11px; }
      .hero { min-height: 500px; }
      .hero h1 { font-size: 39px; }
      .hero-subtitle { font-size: 16px; }
      .hero-copy { font-size: 14px; }
      .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
      .hero-actions .button { padding-inline: 10px; font-size: 12px; }
      .hero-note { gap: 10px; font-size: 10px; }
      .hero-note span + span { padding-left: 10px; }
      .quick-item { min-height: 74px; gap: 10px; padding: 12px; }
      .quick-icon { width: 36px; height: 36px; }
      .quick-item strong { font-size: 12px; }
      .quick-item small { font-size: 10px; }
      .section-heading { align-items: start; flex-direction: column; gap: 9px; margin-bottom: 23px; }
      .section-heading h2 { font-size: 26px; }
      .scene-grid { gap: 10px; }
      .scene { min-height: 165px; padding: 17px; }
      .content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px 13px; }
      .poster-info { padding-top: 8px; }
      .poster-title { font-size: 13px; }
      .feature-side { gap: 10px; }
      .feature-tile { min-height: 160px; padding: 14px; }
      .category-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
      .category-card { min-height: 210px; padding: 15px; }
      .category-card h3 { font-size: 15px; }
      .category-card p { font-size: 11px; }
      .rank-layout { grid-template-columns: 1fr; }
      .rank-row { min-height: 59px; }
      .preview { padding: 33px 22px; }
      .preview h2 { font-size: 26px; }
      .preview-stats { gap: 9px; }
      .preview-stat { min-height: 88px; padding: 13px; }
      .preview-stat strong { font-size: 20px; }
      .quality-item { min-height: 146px; padding: 17px; }
      .steps { gap: 22px 16px; }
      .step:not(:last-child)::after { right: 0; left: 47px; }
      .step:nth-child(2)::after { display: none; }
      .quotes { grid-template-columns: 1fr; }
      .signals { gap: 9px; }
      .signal { padding: 12px; gap: 8px; }
      .signal b { font-size: 19px; }
      .signal span { font-size: 10px; }
      .news-grid { gap: 11px; }
      .news-body { padding: 11px; }
      .news-body h3 { font-size: 12px; }
      .closing-inner { align-items: flex-start; flex-direction: column; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 25px 16px; }
      .footer-grid > :first-child { grid-column: 1 / -1; }
      .copyright { flex-direction: column; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
    }

/* roulang page: category1 */
:root{
 --paper:#fff8f4;--surface:#fff;--ink:#302624;--muted:#796d68;--line:#f0e4df;
 --peach:#ff765f;--coral:#ed594e;--berry:#874c78;--plum:#56334f;
 --mint:#3f7868;--sun:#e7a13d;--soft-peach:#fff0e9;--soft-berry:#f5eaf2;
 --shadow:0 14px 36px rgba(77,48,43,.08);--radius:22px;--container:1200px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.75 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none} img{display:block;max-width:100%} button{font:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid rgba(237,89,78,.38);outline-offset:3px}
.container{width:min(var(--container),calc(100% - 48px));margin:auto}
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,250,247,.96);border-bottom:1px solid rgba(240,228,223,.9)}
.nav-wrap{min-height:76px;display:flex;align-items:center;gap:32px}
.brand{display:inline-flex;align-items:center;gap:11px;flex:0 0 auto;font-size:19px;font-weight:850}
.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;color:#fff;background:linear-gradient(135deg,#ff9872,#e95763 58%,#9a568a);box-shadow:0 6px 14px rgba(220,93,87,.22);font-size:16px}
.nav-links{display:flex;align-items:center;justify-content:center;gap:26px;margin-left:auto}
.nav-links a{position:relative;padding:26px 0;color:#6f625e;font-size:14px;font-weight:650;transition:.2s}
.nav-links a:hover,.nav-links a.active{color:var(--coral)}
.nav-links a.active:after{content:"";position:absolute;height:3px;width:18px;bottom:17px;left:50%;transform:translateX(-50%);border-radius:9px;background:var(--peach)}
.nav-cta,.button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 19px;border:1px solid transparent;border-radius:13px;font-size:14px;font-weight:750;transition:.2s}
.nav-cta,.button-primary{color:#fff;background:linear-gradient(120deg,#ff8c6e,#e9585b);box-shadow:0 8px 18px rgba(222,91,85,.2)}
.nav-cta:hover,.button-primary:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(222,91,85,.28)}
.button-secondary{color:var(--plum);background:#fff;border-color:#eadbdc}
.button-secondary:hover{background:var(--soft-berry);border-color:#d8c0d2}
.menu-toggle{display:none;width:42px;height:42px;place-items:center;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);cursor:pointer}
.menu-toggle span,.menu-toggle span:before,.menu-toggle span:after{display:block;width:17px;height:2px;background:currentColor;position:relative}
.menu-toggle span:before,.menu-toggle span:after{content:"";position:absolute;left:0}.menu-toggle span:before{top:-6px}.menu-toggle span:after{top:6px}
main{overflow:hidden} section{padding:78px 0;position:relative}.section-soft{background:#fffdfb}.section-tint{background:#fff2ec}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:30px}
.section-heading h2{margin:0;font-size:clamp(25px,3vw,34px);line-height:1.25}.section-heading p{max-width:600px;margin:10px 0 0;color:var(--muted);font-size:14px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--coral);font-weight:800;font-size:12px}.eyebrow:before{content:"";width:20px;height:2px;background:currentColor;border-radius:3px}
.text-link{color:var(--berry);font-size:14px;font-weight:750}.text-link:hover{color:var(--coral)}
.category-head{padding:58px 0 52px;background:linear-gradient(100deg,#fff0e8,#fff9f5 58%,#f6eaf1)}
.category-head-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:55px}
.category-head h1{margin:15px 0 12px;font-size:clamp(36px,5vw,58px);line-height:1.13;letter-spacing:-1px}
.category-head h1 span{color:var(--coral)}.category-head p{max-width:650px;color:var(--muted);font-size:16px;margin:0}
.category-visual{min-height:245px;border-radius:28px;overflow:hidden;position:relative;background:linear-gradient(90deg,rgba(67,35,43,.7),rgba(67,35,43,.15)),url("/assets/images/aac04afd0b957301.jpg") center/cover;box-shadow:var(--shadow)}
.visual-note{position:absolute;left:25px;bottom:24px;color:#fff}.visual-note strong{display:block;font-size:24px}.visual-note small{color:#ffe7dd}
.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 24px rgba(77,48,43,.05)}
.filter-label{font-weight:800;margin-right:6px}.filter-chip{padding:8px 14px;border-radius:99px;background:#fff7f2;color:var(--muted);border:1px solid #f2ded5;font-size:13px}.filter-chip.active{background:var(--plum);color:#fff;border-color:var(--plum)}
.filter-sort{margin-left:auto;color:var(--muted);font-size:13px}
.content-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.content-card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 8px 25px rgba(77,48,43,.045);transition:transform .2s,box-shadow .2s,border-color .2s}
.content-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#e6c8c0}
.poster{height:245px;position:relative;overflow:hidden;background:#f5e8e1}.poster img{width:100%;height:100%;object-fit:cover;transition:transform .35s}.content-card:hover .poster img{transform:scale(1.04)}
.poster:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(39,22,25,.45))}
.badge{position:absolute;z-index:1;top:13px;left:13px;padding:4px 9px;border-radius:9px;background:#fff;color:var(--coral);font-size:11px;font-weight:800}.badge.purple{color:var(--berry);background:#f8edf6}.badge.green{color:var(--mint);background:#eaf5ef}
.card-body{padding:15px 16px 17px}.card-body h3{margin:0 0 7px;font-size:17px;line-height:1.35}.meta{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:12px}.score{color:#bf7a22;font-weight:800}
.pagination{text-align:center;margin-top:30px}.pagination .button{min-width:150px}
.feature-row{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:20px}.feature-card{min-height:210px;padding:24px;border-radius:22px;overflow:hidden;position:relative;color:#fff;background-size:cover;background-position:center;display:flex;align-items:end}.feature-card:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,rgba(42,22,27,.85))}.feature-card>div{position:relative;z-index:1}.feature-card h3{margin:5px 0;font-size:22px}.feature-card p{margin:0;color:#ffe9e1;font-size:13px}.feature-card:nth-child(1){background-image:url("/assets/images/ce3c17579faf28b0.jpg")}.feature-card:nth-child(2){background-image:url("/assets/images/49a0eeeb7b28ceff.jpg")}.feature-card:nth-child(3){background-image:url("/assets/images/408958581628cdfe.jpg")}
.rank-layout{display:grid;grid-template-columns:1fr .8fr;gap:42px}.rank-list{margin:0;padding:0;list-style:none;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden}.rank-item{display:grid;grid-template-columns:42px 1fr 78px 58px;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line)}.rank-item:last-child{border-bottom:0}.rank-no{font-size:20px;font-weight:900;color:#c7a3a0}.rank-item:nth-child(-n+3) .rank-no{color:var(--coral)}.rank-title{font-weight:750}.rank-type{display:block;color:var(--berry);font-size:11px}.heat{color:var(--coral);font-size:12px;font-weight:750}.rank-score{font-weight:850;color:#ae7223}
.update-panel{padding:30px;border-radius:24px;background:linear-gradient(135deg,var(--plum),#8f557e);color:#fff;box-shadow:var(--shadow)}.update-panel h3{margin:0 0 10px;font-size:25px}.update-panel p{color:#f8e7ef;margin:0 0 20px}.data-line{display:flex;justify-content:space-between;padding:13px 0;border-top:1px solid rgba(255,255,255,.2);font-size:13px}.data-line strong{color:#ffc2a5}
.news-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.news-item{display:flex;gap:16px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:17px;transition:.2s}.news-item:hover{transform:translateY(-3px);border-color:#e5c5bd}.news-thumb{width:125px;height:78px;border-radius:12px;object-fit:cover}.news-item h3{margin:2px 0 8px;font-size:15px;line-height:1.45}.news-item time{font-size:12px;color:var(--muted)}
.faq-list{max-width:860px;margin:auto}.faq-list details{background:#fff;border:1px solid var(--line);border-radius:15px;margin-bottom:12px;padding:17px 20px}.faq-list summary{cursor:pointer;font-weight:750;list-style:none}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:"＋";float:right;color:var(--coral);font-size:20px}.faq-list details[open] summary:after{content:"－"}.faq-list p{color:var(--muted);margin:12px 25px 0 0}
.cta-band{padding:42px 0;background:linear-gradient(110deg,#fff0e8,#f5e8f2)}.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}.cta-inner h2{margin:0 0 6px;font-size:28px}.cta-inner p{margin:0;color:var(--muted)}
.site-footer{padding:58px 0 24px;background:#33252b;color:#f8e9e4}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:35px}.footer-brand{color:#fff}.footer-about{max-width:260px;color:#cbb7b1;font-size:13px}.footer-col{display:flex;flex-direction:column;gap:8px}.footer-col h3{margin:0 0 8px;color:#fff;font-size:14px}.footer-col a{color:#cbb7b1;font-size:13px}.footer-col a:hover{color:#ffae91}.copyright{display:flex;justify-content:space-between;gap:20px;padding-top:25px;margin-top:38px;border-top:1px solid rgba(255,255,255,.12);color:#aa9692;font-size:12px}
@media(max-width:1024px){.nav-links{gap:15px}.nav-cta{display:none}.category-head-grid,.rank-layout{grid-template-columns:1fr}.category-visual{min-height:210px}.content-grid{grid-template-columns:repeat(3,1fr)}.feature-row{grid-template-columns:1fr 1fr}.feature-card:first-child{grid-column:span 2}.footer-grid{grid-template-columns:1.4fr repeat(3,1fr)}}
@media(max-width:720px){.container{width:min(100% - 32px,var(--container))}.nav-wrap{min-height:68px}.menu-toggle{display:grid;margin-left:auto}.nav-links{display:none;position:absolute;top:68px;left:16px;right:16px;padding:12px 18px;flex-direction:column;align-items:stretch;gap:0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.nav-links.open{display:flex}.nav-links a{padding:11px 0}.nav-links a.active:after{display:none}.category-head{padding:45px 0}.category-head h1{font-size:38px}.content-grid{grid-template-columns:repeat(2,1fr);gap:14px}.poster{height:205px}.section-heading{display:block}.filter-sort{width:100%;margin-left:0}.feature-row{grid-template-columns:1fr}.feature-card:first-child{grid-column:auto}.news-grid{grid-template-columns:1fr}.rank-item{grid-template-columns:34px 1fr 55px 44px;padding:13px 14px}.cta-inner{display:block}.cta-inner .button{margin-top:18px}.footer-grid{grid-template-columns:1fr 1fr;gap:26px}.copyright{display:block}.copyright span{display:block;margin-top:5px}}
@media(max-width:430px){.brand{font-size:17px}.content-grid{gap:10px}.poster{height:180px}.card-body{padding:12px}.card-body h3{font-size:15px}.meta{display:block}.meta span{display:block;margin-top:3px}.category-visual{min-height:180px}.footer-grid{grid-template-columns:1fr}.section-heading h2{font-size:26px}}