/* roulang page: index */
:root {
      color-scheme: light;
      --ink: #16243a;
      --muted: #66758a;
      --soft: #8c9aaf;
      --blue: #1769d8;
      --blue-dark: #1056b5;
      --blue-pale: #eef5ff;
      --blue-soft: #e4efff;
      --white: #fff;
      --page: #f7fafe;
      --line: #dce7f5;
      --green: #138a72;
      --green-soft: #e7f6f1;
      --amber: #c88718;
      --amber-soft: #fff4dd;
      --coral: #c95b58;
      --shadow: 0 10px 28px rgba(29, 73, 130, .08);
      --shadow-hover: 0 14px 32px rgba(29, 73, 130, .13);
      --radius: 8px;
      --container: 1200px;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 88px; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--page);
      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
      font-size: 15px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }
    body.age-locked { overflow: hidden; }
    img, svg { display: block; max-width: 100%; }
    button, input { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    button { color: inherit; }
    a { color: inherit; text-decoration: none; }
    a:hover { color: var(--blue); }
    :focus-visible { outline: 3px solid rgba(23, 105, 216, .35); outline-offset: 3px; }
    [hidden] { display: none !important; }
    .container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
    .section { padding: 84px 0; }
    .section-white { background: var(--white); }
    .section-blue { background: var(--blue-pale); }
    .section-heading {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 30px;
    }
    .section-heading > div { max-width: 710px; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 10px;
      color: var(--blue);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: uppercase;
    }
    .eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 { color: var(--ink); line-height: 1.25; }
    h1 { margin-bottom: 18px; font-size: clamp(36px, 4vw, 54px); font-weight: 750; }
    h2 { margin-bottom: 10px; font-size: 32px; font-weight: 720; }
    h3 { margin-bottom: 8px; font-size: 18px; font-weight: 700; }
    .section-lead { margin: 0; color: var(--muted); font-size: 15px; max-width: 720px; }
    .section-link, .text-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      color: var(--blue);
      font-weight: 650;
      white-space: nowrap;
    }
    .section-link::after, .text-link::after { content: "→"; transition: transform .18s ease; }
    .section-link:hover::after, .text-link:hover::after { transform: translateX(3px); }
    .section-link:hover, .text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 48px;
      padding: 0 19px;
      border: 1px solid transparent;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
    }
    .button:hover { transform: translateY(-2px); }
    .button-primary { color: var(--white); background: var(--blue); box-shadow: 0 6px 16px rgba(23, 105, 216, .18); }
    .button-primary:hover { color: var(--white); background: var(--blue-dark); box-shadow: 0 9px 22px rgba(23, 105, 216, .24); }
    .button-secondary { color: var(--blue); background: var(--white); border-color: #b7cce9; }
    .button-secondary:hover { background: var(--blue-pale); border-color: var(--blue); }
    .icon-button {
      display: inline-grid;
      place-items: center;
      width: 44px;
      height: 44px;
      padding: 0;
      border: 1px solid transparent;
      border-radius: 6px;
      background: transparent;
      color: var(--ink);
      cursor: pointer;
      transition: color .18s ease, background .18s ease, border-color .18s ease;
    }
    .icon-button:hover { color: var(--blue); background: var(--blue-pale); border-color: var(--line); }
    .icon-button:active { background: var(--blue-soft); }
    .icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .status {
      display: inline-flex;
      align-items: center;
      min-height: 23px;
      padding: 2px 7px;
      border: 1px solid transparent;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.2;
      white-space: nowrap;
    }
    .status-hd { color: var(--blue); background: #eff6ff; border-color: #cfe0fa; }
    .status-blu { color: var(--green); background: var(--green-soft); border-color: #ccebe2; }
    .status-update { color: #9a650e; background: var(--amber-soft); border-color: #f1dfb8; }
    .rating { display: inline-flex; align-items: center; gap: 5px; color: var(--amber); font-size: 13px; font-weight: 700; }
    .rating::before { content: "★"; font-size: 13px; }
    .muted { color: var(--muted); }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      border-bottom: 1px solid rgba(220, 231, 245, .9);
      background: rgba(255, 255, 255, .97);
      transition: box-shadow .2s ease;
    }
    .site-header.is-scrolled { box-shadow: 0 5px 18px rgba(29, 73, 130, .08); }
    .nav-wrap {
      display: flex;
      align-items: center;
      gap: 28px;
      min-height: 76px;
      transition: min-height .2s ease;
    }
    .site-header.is-scrolled .nav-wrap { min-height: 68px; }
    .brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; flex: 0 0 auto; }
    .brand-mark {
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border-radius: 6px;
      color: var(--white);
      background: var(--blue);
      font-weight: 800;
      font-size: 17px;
      box-shadow: 0 5px 14px rgba(23, 105, 216, .2);
    }
    .brand-name { max-width: 255px; font-size: 14px; line-height: 1.35; font-weight: 750; }
    .primary-nav { display: flex; align-items: center; gap: 5px; margin-left: auto; }
    .primary-nav a {
      position: relative;
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding: 0 13px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 600;
      white-space: nowrap;
      transition: color .18s ease, background .18s ease;
    }
    .primary-nav a:hover { color: var(--blue); background: var(--blue-pale); }
    .primary-nav a[aria-current="page"] { color: var(--blue); }
    .primary-nav a[aria-current="page"]::after {
      position: absolute;
      right: 13px;
      bottom: 2px;
      left: 13px;
      height: 2px;
      background: var(--blue);
      content: "";
    }
    .nav-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
    .adult-nav-link { color: var(--muted); font-size: 12px; white-space: nowrap; }
    .adult-nav-link:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
    .nav-cta { min-height: 42px; padding-inline: 15px; }
    .menu-toggle { display: none; }
    .search-panel {
      position: absolute;
      top: calc(100% + 8px);
      right: max(24px, calc((100vw - var(--container)) / 2));
      z-index: 55;
      width: min(420px, calc(100vw - 32px));
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--white);
      box-shadow: var(--shadow-hover);
    }
    .search-form { display: flex; gap: 8px; }
    .search-input {
      width: 100%;
      min-width: 0;
      height: 44px;
      padding: 0 12px;
      border: 1px solid var(--line);
      border-radius: 5px;
      color: var(--ink);
      background: #fbfdff;
    }
    .search-input:focus { outline: 3px solid rgba(23, 105, 216, .16); border-color: var(--blue); }
    .search-message { margin: 9px 2px 0; color: var(--muted); font-size: 12px; }

    .hero {
      position: relative;
      overflow: hidden;
      min-height: 520px;
      background: #eaf3ff;
      isolation: isolate;
    }
    .hero::before {
      position: absolute;
      inset: 0;
      z-index: -2;
      background: linear-gradient(90deg, #eef5ff 0%, #eef5ff 43%, rgba(238, 245, 255, .55) 70%, rgba(238, 245, 255, .1) 100%);
      content: "";
    }
    .hero-art {
      position: absolute;
      inset: 0 0 0 auto;
      z-index: -3;
      width: min(67%, 900px);
      height: 100%;
      overflow: hidden;
    }
    .hero-art svg { width: 100%; height: 100%; }
    .hero-inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr);
      align-items: center;
      gap: 30px;
      min-height: 520px;
      padding-top: 44px;
      padding-bottom: 55px;
    }
    .hero-copy { position: relative; z-index: 2; max-width: 650px; }
    .hero-copy .eyebrow { margin-bottom: 14px; }
    .hero h1 { max-width: 640px; }
    .hero h1 span { color: var(--blue); }
    .hero-subtitle { max-width: 610px; margin-bottom: 10px; color: #3f536e; font-size: 17px; font-weight: 600; }
    .hero-description { max-width: 620px; margin-bottom: 23px; color: var(--muted); font-size: 14px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
    .hero-note { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--muted); font-size: 12px; }
    .hero-note::before { content: "18+"; display: inline-grid; place-items: center; width: 28px; height: 24px; border: 1px solid #e6c3c0; border-radius: 4px; color: var(--coral); font-size: 10px; font-weight: 800; }
    .hero-collage { position: relative; justify-self: end; width: min(100%, 390px); height: 356px; }
    .hero-poster {
      position: absolute;
      overflow: hidden;
      width: 178px;
      aspect-ratio: 2 / 3;
      border: 5px solid rgba(255,255,255,.94);
      border-radius: 7px;
      background: #dce9f7;
      box-shadow: 0 18px 40px rgba(28, 62, 102, .16);
    }
    .hero-poster svg { width: 100%; height: 100%; }
    .hero-poster.one { top: 35px; left: 2px; transform: rotate(-7deg); }
    .hero-poster.two { top: 6px; left: 138px; z-index: 2; transform: rotate(3deg); }
    .hero-poster.three { top: 91px; right: 0; transform: rotate(8deg); }
    .hero-collage::after {
      position: absolute;
      right: 9px;
      bottom: 8px;
      width: 90px;
      height: 90px;
      border: 1px solid rgba(23, 105, 216, .3);
      border-radius: 50%;
      content: "";
    }
    .hero-bottom-mark {
      position: absolute;
      right: 31px;
      bottom: 29px;
      z-index: 3;
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      color: var(--blue);
      background: #fff;
      box-shadow: var(--shadow);
      font-size: 20px;
    }

    .poster-art { --art-bg: #d9e8ee; --art-light: #fff5dc; --art-mid: #789da0; --art-dark: #365b67; width: 100%; height: 100%; }
    .poster-art[data-art="2"] { --art-bg: #e9dfd5; --art-light: #fff6e7; --art-mid: #bf8e71; --art-dark: #7d514a; }
    .poster-art[data-art="3"] { --art-bg: #dce5ef; --art-light: #f7f1df; --art-mid: #8099b6; --art-dark: #485b73; }
    .poster-art[data-art="4"] { --art-bg: #e9e3cf; --art-light: #fff5d8; --art-mid: #9b9a69; --art-dark: #596151; }
    .poster-art[data-art="5"] { --art-bg: #e7dfe7; --art-light: #fff0e7; --art-mid: #a9869b; --art-dark: #654e69; }
    .poster-art[data-art="6"] { --art-bg: #dce8e1; --art-light: #fff4db; --art-mid: #7da091; --art-dark: #426458; }
    .poster-art .art-bg { fill: var(--art-bg); }
    .poster-art .art-light { fill: var(--art-light); }
    .poster-art .art-mid { fill: var(--art-mid); }
    .poster-art .art-dark { fill: var(--art-dark); }
    .poster-art .art-line { fill: none; stroke: rgba(255,255,255,.7); stroke-width: 3; }
    .poster-art .art-window { fill: rgba(255,255,255,.55); stroke: rgba(255,255,255,.8); stroke-width: 5; }
    .poster-frame { position: absolute; inset: 12% 12% 12%; border: 1px solid rgba(255,255,255,.65); pointer-events: none; }

    .release-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
    .poster-card { min-width: 0; }
    .poster-visual {
      position: relative;
      overflow: hidden;
      aspect-ratio: 2 / 3;
      border: 1px solid rgba(22, 36, 58, .07);
      border-radius: 6px;
      background: #e7eef6;
      box-shadow: 0 5px 15px rgba(29, 73, 130, .08);
    }
    .poster-visual > svg { width: 100%; height: 100%; transition: transform .35s ease; }
    .poster-card:hover .poster-visual > svg { transform: scale(1.035); }
    .poster-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(17, 38, 66, .48);
      opacity: 0;
      transition: opacity .18s ease;
    }
    .poster-card:hover .poster-overlay, .poster-card:focus-within .poster-overlay { opacity: 1; }
    .poster-action {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 42px;
      padding: 0 13px;
      border: 1px solid rgba(255,255,255,.8);
      border-radius: 5px;
      color: var(--white);
      background: rgba(255,255,255,.12);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      backdrop-filter: blur(2px);
    }
    .poster-action::before { content: "▶"; font-size: 11px; }
    .poster-action:hover { background: var(--blue); border-color: var(--blue); }
    .poster-badge { position: absolute; top: 9px; left: 9px; z-index: 2; }
    .poster-info { padding: 12px 2px 0; }
    .poster-title {
      display: -webkit-box;
      overflow: hidden;
      min-height: 44px;
      margin: 0 0 8px;
      color: var(--ink);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.55;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .poster-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
    .poster-meta .rating { font-size: 12px; }
    .poster-meta .rating::before { font-size: 12px; }

    .triple-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .triple-item { display: grid; grid-template-columns: 42px 34px 1fr; align-items: start; gap: 13px; min-height: 142px; padding: 27px 22px; }
    .triple-item + .triple-item { border-left: 1px solid var(--line); }
    .triple-number { color: #91a2b7; font-size: 12px; font-weight: 700; }
    .line-icon { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #cbdcf1; border-radius: 6px; color: var(--blue); font-size: 17px; }
    .triple-item h3 { margin: 0 0 6px; font-size: 16px; }
    .triple-item p { margin: 0; color: var(--muted); font-size: 13px; }

    .playlist-demo { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 30px; align-items: stretch; }
    .filter-panel { padding: 21px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); box-shadow: var(--shadow); }
    .filter-panel h3 { margin-bottom: 18px; font-size: 16px; }
    .filter-group + .filter-group { margin-top: 20px; padding-top: 17px; border-top: 1px solid #edf1f7; }
    .filter-label { display: block; margin-bottom: 9px; color: var(--soft); font-size: 11px; font-weight: 700; }
    .filter-options { display: flex; flex-wrap: wrap; gap: 7px; }
    .filter-option { padding: 5px 9px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); background: #fbfdff; font-size: 12px; }
    .filter-option.is-selected { color: var(--blue); border-color: #b9d0f1; background: var(--blue-pale); }
    .preview-list { display: grid; gap: 13px; }
    .wide-preview {
      display: grid;
      grid-template-columns: 160px minmax(0, 1fr);
      gap: 18px;
      min-height: 138px;
      padding: 11px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: var(--white);
      transition: box-shadow .18s ease, transform .18s ease;
    }
    .wide-preview:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
    .wide-art { overflow: hidden; aspect-ratio: 16 / 9; border-radius: 4px; background: #e7eef6; }
    .wide-art svg { width: 100%; height: 100%; }
    .wide-copy { align-self: center; min-width: 0; }
    .wide-copy h3 { margin-bottom: 6px; font-size: 16px; }
    .wide-copy p { display: -webkit-box; overflow: hidden; margin: 0 0 9px; color: var(--muted); font-size: 13px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
    .small-tag { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 3px; color: #52657e; background: #f1f5fa; font-size: 11px; }

    .recommend-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
    .recommend-card {
      display: grid;
      grid-template-columns: 132px minmax(0, 1fr);
      gap: 15px;
      min-height: 168px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: var(--white);
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .recommend-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
    .recommend-art { position: relative; overflow: hidden; min-height: 140px; aspect-ratio: 4 / 5; border-radius: 4px; background: #e6edf4; }
    .recommend-art svg { width: 100%; height: 100%; }
    .recommend-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
    .recommend-copy h3 { margin-bottom: 8px; font-size: 16px; }
    .recommend-copy p { display: -webkit-box; overflow: hidden; margin: 9px 0; color: var(--muted); font-size: 12px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
    .recommend-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-top: auto; }
    .recommend-foot .text-link { min-height: 32px; font-size: 12px; }
    .recommend-foot .rating { font-size: 12px; }

    .feedback-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid #cbdcf1; border-bottom: 1px solid #cbdcf1; }
    .feedback-item { padding: 25px 25px 23px; }
    .feedback-item + .feedback-item { border-left: 1px solid #cbdcf1; }
    .feedback-label { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; color: var(--blue); font-size: 11px; font-weight: 700; }
    .feedback-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #78a7e8; }
    .feedback-item p { min-height: 52px; margin: 0 0 15px; color: #41536b; font-size: 14px; }
    .feedback-source { color: var(--soft); font-size: 11px; }
    .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
    .stat-box { display: flex; align-items: baseline; gap: 8px; min-height: 66px; padding: 13px 16px; border: 1px solid #d4e4f8; border-radius: 6px; background: #f5f9ff; }
    .stat-value { color: var(--blue); font-size: 21px; font-weight: 750; line-height: 1; }
    .stat-label { color: var(--muted); font-size: 12px; }

    .category-matrix { display: grid; grid-template-columns: 1.2fr 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
    .category-item {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 190px;
      padding: 22px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: var(--white);
      transition: background .18s ease;
    }
    .category-item:nth-child(1) { grid-row: span 2; min-height: 382px; background: #f7faff; }
    .category-item:hover { background: #f2f7ff; }
    .category-item h3 { margin-bottom: 9px; font-size: 19px; }
    .category-item p { max-width: 360px; margin: 0; color: var(--muted); font-size: 13px; }
    .category-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 19px; color: var(--soft); font-size: 12px; }
    .category-arrow { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #d4e1f1; border-radius: 50%; color: var(--blue); font-size: 18px; transition: color .18s ease, background .18s ease, transform .18s ease; }
    .category-item:hover .category-arrow { color: #fff; background: var(--blue); transform: translateX(2px); }

    .compare-table { overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--white); box-shadow: var(--shadow); }
    .compare-row { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr; align-items: center; min-height: 64px; }
    .compare-row + .compare-row { border-top: 1px solid #e8eef6; }
    .compare-row > div { padding: 13px 17px; color: var(--muted); font-size: 13px; }
    .compare-row > div:first-child { color: var(--ink); font-weight: 700; }
    .compare-row.header { min-height: 50px; background: #f3f7fc; }
    .compare-row.header > div { color: #607189; font-size: 12px; font-weight: 700; }
    .compare-mark { display: inline-flex; align-items: center; gap: 7px; }
    .compare-mark::before { content: "•"; color: var(--green); font-size: 19px; line-height: 0; }

    .ranking-list { border-top: 1px solid var(--line); }
    .ranking-row {
      display: grid;
      grid-template-columns: 48px 58px minmax(180px, 1.4fr) minmax(120px, 1fr) 72px 112px;
      align-items: center;
      gap: 17px;
      min-height: 76px;
      border-bottom: 1px solid var(--line);
    }
    .rank-number { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #d5e0ed; border-radius: 50%; color: #73839a; font-size: 12px; font-weight: 700; }
    .ranking-row:nth-child(1) .rank-number { border-color: #e6c77c; color: #a77819; background: #fff8e8; }
    .ranking-row:nth-child(2) .rank-number { border-color: #cbd8e6; color: #61758c; background: #f5f8fb; }
    .ranking-row:nth-child(3) .rank-number { border-color: #d7b89d; color: #956f52; background: #fbf4ee; }
    .rank-thumb { overflow: hidden; width: 48px; aspect-ratio: 2 / 3; border-radius: 3px; background: #e4ebf3; }
    .rank-thumb svg { width: 100%; height: 100%; }
    .rank-title { overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
    .rank-bar-wrap { display: flex; align-items: center; gap: 10px; }
    .rank-bar { overflow: hidden; flex: 1; height: 6px; border-radius: 8px; background: #e7edf5; }
    .rank-bar span { display: block; height: 100%; border-radius: inherit; background: #74a7e8; }
    .rank-heat { min-width: 31px; color: var(--soft); font-size: 11px; text-align: right; }
    .rank-score { color: var(--amber); font-size: 13px; font-weight: 700; }
    .rank-type { justify-self: start; }

    .news-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--line); }
    .news-item { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 16px; min-height: 146px; padding: 16px 0; border-bottom: 1px solid var(--line); }
    .news-thumb { overflow: hidden; aspect-ratio: 16 / 10; border-radius: 5px; background: #e5edf6; }
    .news-thumb svg { width: 100%; height: 100%; }
    .news-copy { min-width: 0; }
    .news-date { display: block; margin-bottom: 5px; color: var(--soft); font-size: 11px; }
    .news-copy h3 { display: -webkit-box; overflow: hidden; margin-bottom: 6px; font-size: 15px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .news-copy p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

    .timeline { position: relative; max-width: 900px; margin-inline: auto; padding: 2px 0 2px 28px; }
    .timeline::before { position: absolute; top: 5px; bottom: 5px; left: 8px; width: 1px; background: #cbdcf1; content: ""; }
    .timeline-item { position: relative; display: grid; grid-template-columns: 106px 1fr auto; align-items: center; gap: 18px; min-height: 66px; padding: 12px 0; }
    .timeline-item::before { position: absolute; top: 25px; left: -24px; width: 9px; height: 9px; border: 2px solid var(--blue); border-radius: 50%; background: var(--blue-pale); content: ""; }
    .timeline-date { color: #61748d; font-size: 12px; font-weight: 700; }
    .timeline-title { color: var(--ink); font-size: 14px; font-weight: 650; }
    .timeline-link { color: var(--blue); font-size: 12px; white-space: nowrap; }
    .timeline-link:hover { text-decoration: underline; text-underline-offset: 3px; }

    .faq-list { max-width: 900px; margin-inline: auto; border-top: 1px solid var(--line); }
    .faq-item { border-bottom: 1px solid var(--line); }
    .faq-question {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      width: 100%;
      min-height: 64px;
      padding: 14px 4px;
      border: 0;
      background: transparent;
      color: var(--ink);
      font-size: 15px;
      font-weight: 700;
      text-align: left;
      cursor: pointer;
    }
    .faq-symbol { flex: 0 0 auto; color: var(--blue); font-size: 24px; font-weight: 400; transition: transform .2s ease; }
    .faq-question[aria-expanded="true"] .faq-symbol { transform: rotate(45deg); }
    .faq-answer { overflow: hidden; max-height: 0; color: var(--muted); font-size: 14px; transition: max-height .2s ease; }
    .faq-answer-inner { max-width: 760px; padding: 0 36px 20px 4px; }

    .safeguard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    .safeguard-item { display: flex; align-items: flex-start; gap: 12px; min-height: 88px; padding: 17px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); }
    .safeguard-icon { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border: 1px solid #c9d9ed; border-radius: 50%; color: var(--blue); font-size: 14px; }
    .safeguard-item h3 { margin: 1px 0 4px; font-size: 13px; }
    .safeguard-item p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }

    .final-section { padding: 66px 0 76px; background: #eaf3ff; }
    .final-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
    .final-copy { max-width: 700px; }
    .final-copy h2 { margin-bottom: 8px; font-size: 29px; }
    .final-copy p { margin: 0; color: var(--muted); font-size: 14px; }
    .final-actions { display: flex; flex-wrap: wrap; gap: 10px; }

    .site-footer { border-top: 1px solid #d3e1f1; background: var(--white); }
    .footer-main { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 38px; padding-top: 48px; padding-bottom: 38px; }
    .footer-brand .brand { margin-bottom: 15px; }
    .footer-brand .brand-name { max-width: 280px; }
    .footer-brand p { max-width: 320px; margin: 0; color: var(--muted); font-size: 12px; }
    .footer-column h3 { margin-bottom: 13px; color: var(--ink); font-size: 13px; }
    .footer-links { display: grid; gap: 8px; }
    .footer-links a { width: fit-content; color: var(--muted); font-size: 12px; }
    .footer-links a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
    .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 17px 0; border-top: 1px solid #e9eff6; color: var(--soft); font-size: 11px; }
    .footer-bottom a { color: inherit; }
    .footer-bottom a:hover { color: var(--blue); }

    .sticky-cta {
      position: fixed;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 45;
      min-height: 64px;
      border-top: 1px solid #dce7f5;
      background: rgba(255,255,255,.98);
      box-shadow: 0 -7px 22px rgba(29, 73, 130, .08);
      transition: transform .22s ease;
    }
    .sticky-cta.is-hidden { transform: translateY(110%); }
    .sticky-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 64px; }
    .sticky-copy { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .sticky-age { color: var(--coral); font-size: 12px; font-weight: 800; white-space: nowrap; }
    .sticky-updates { color: var(--muted); font-size: 12px; }
    .sticky-updates strong { color: var(--blue); }
    .sticky-actions { display: flex; align-items: center; gap: 8px; }
    .sticky-actions .button { min-height: 40px; padding-inline: 15px; }
    .sticky-close { width: 40px; height: 40px; }

    .age-gate {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: grid;
      place-items: center;
      padding: 24px;
      background: rgba(16, 30, 49, .62);
    }
    .age-dialog {
      width: min(100%, 480px);
      padding: 34px;
      border: 1px solid #e0e9f5;
      border-radius: 8px;
      background: var(--white);
      box-shadow: 0 24px 80px rgba(13, 33, 57, .25);
    }
    .age-mark { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 18px; border: 1px solid #f0d1cf; border-radius: 50%; color: var(--coral); font-size: 16px; font-weight: 800; }
    .age-dialog h2 { margin-bottom: 10px; font-size: 24px; }
    .age-dialog p { margin-bottom: 18px; color: var(--muted); font-size: 14px; }
    .age-disclaimer { padding: 12px 14px; border-left: 3px solid #e2b0ad; color: #765552; background: #fff8f7; font-size: 12px; }
    .age-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
    .age-actions .button { flex: 1 1 180px; }
    .detail-dialog {
      width: min(100%, 480px);
      padding: 26px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--white);
      box-shadow: 0 24px 80px rgba(13, 33, 57, .22);
    }
    .dialog-backdrop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(16, 30, 49, .5); }
    .dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
    .detail-dialog h2 { margin: 4px 0 10px; font-size: 22px; }
    .detail-dialog p { color: var(--muted); font-size: 14px; }
    .dialog-note { padding: 12px; border-radius: 5px; color: #51637b; background: var(--blue-pale); font-size: 12px; }

    @media (max-width: 1199px) {
      .nav-wrap { gap: 16px; }
      .brand-name { max-width: 210px; font-size: 13px; }
      .primary-nav a { padding-inline: 9px; font-size: 13px; }
      .release-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .recommend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(240px, .72fr); }
    }
    @media (max-width: 900px) {
      .nav-wrap { min-height: 68px; }
      .primary-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 5px;
        width: min(360px, 88vw);
        padding: 92px 22px 24px;
        border-left: 1px solid var(--line);
        background: var(--white);
        box-shadow: -14px 0 34px rgba(29, 73, 130, .12);
        transform: translateX(105%);
        transition: transform .22s ease;
      }
      .primary-nav.is-open { transform: translateX(0); }
      .primary-nav a { min-height: 52px; padding-inline: 13px; border-radius: 5px; font-size: 15px; }
      .primary-nav a[aria-current="page"]::after { right: auto; bottom: 9px; left: 13px; width: 24px; }
      .nav-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(22, 36, 58, .28); }
      .menu-toggle { display: inline-grid; position: relative; z-index: 65; }
      .nav-actions { margin-left: auto; }
      .adult-nav-link, .nav-cta { display: none; }
      .hero-inner { grid-template-columns: 1fr .65fr; gap: 10px; }
      .hero-collage { transform: scale(.88); transform-origin: right center; }
      .release-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .playlist-demo { grid-template-columns: 210px minmax(0, 1fr); gap: 18px; }
      .wide-preview { grid-template-columns: 130px minmax(0, 1fr); }
      .ranking-row { grid-template-columns: 38px 48px minmax(145px, 1.3fr) minmax(100px, 1fr) 60px 90px; gap: 11px; }
      .footer-main { gap: 24px; }
    }
    @media (max-width: 767px) {
      .container { width: min(var(--container), calc(100% - 40px)); }
      .section { padding: 62px 0; }
      .section-heading { align-items: flex-start; flex-direction: column; gap: 9px; margin-bottom: 23px; }
      h2 { font-size: 27px; }
      .hero { min-height: auto; }
      .hero::before { background: linear-gradient(90deg, rgba(238,245,255,.98), rgba(238,245,255,.9) 58%, rgba(238,245,255,.72)); }
      .hero-art { width: 100%; opacity: .54; }
      .hero-inner { display: block; min-height: 0; padding-top: 66px; padding-bottom: 56px; }
      .hero-copy { max-width: 640px; }
      .hero h1 { font-size: 42px; }
      .hero-collage { position: absolute; right: -50px; bottom: -30px; width: 300px; height: 245px; opacity: .28; transform: scale(.8); transform-origin: right bottom; }
      .hero-note { position: relative; }
      .release-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
      .triple-strip { grid-template-columns: 1fr; }
      .triple-item { grid-template-columns: 35px 32px 1fr; min-height: auto; padding: 20px 8px; }
      .triple-item + .triple-item { border-top: 1px solid var(--line); border-left: 0; }
      .playlist-demo { grid-template-columns: 1fr; }
      .filter-panel { padding: 16px; }
      .filter-panel h3 { margin-bottom: 12px; }
      .filter-group + .filter-group { margin-top: 13px; padding-top: 12px; }
      .preview-list { gap: 10px; }
      .wide-preview { grid-template-columns: 122px minmax(0, 1fr); gap: 12px; }
      .recommend-grid { grid-template-columns: 1fr; gap: 12px; }
      .recommend-card { grid-template-columns: 116px minmax(0, 1fr); min-height: 148px; }
      .recommend-art { min-height: 124px; }
      .feedback-grid { grid-template-columns: 1fr; }
      .feedback-item { padding: 18px 8px; }
      .feedback-item + .feedback-item { border-top: 1px solid #cbdcf1; border-left: 0; }
      .feedback-item p { min-height: 0; }
      .stats-row { grid-template-columns: 1fr; gap: 8px; }
      .stat-box { min-height: 54px; }
      .category-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .category-item:nth-child(1) { grid-row: auto; min-height: 210px; }
      .category-item { min-height: 210px; padding: 17px; }
      .compare-table { overflow-x: auto; }
      .compare-row { min-width: 650px; }
      .ranking-row { grid-template-columns: 34px 42px minmax(0, 1fr) 58px; gap: 10px; min-height: 76px; }
      .rank-bar-wrap { grid-column: 3 / 4; grid-row: 2; align-self: start; margin-top: -16px; }
      .rank-score { grid-column: 4; grid-row: 1; justify-self: end; }
      .rank-type { display: none; }
      .rank-thumb { width: 40px; }
      .news-grid { grid-template-columns: 1fr; gap: 0; }
      .news-item { grid-template-columns: 116px minmax(0, 1fr); min-height: 132px; gap: 12px; }
      .timeline { padding-left: 25px; }
      .timeline-item { grid-template-columns: 82px minmax(0, 1fr); gap: 10px; }
      .timeline-link { grid-column: 2; margin-top: -9px; }
      .safeguard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .final-inner { align-items: flex-start; flex-direction: column; }
      .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 27px 20px; padding-top: 36px; }
      .footer-brand { grid-column: 1 / -1; }
      .sticky-inner { min-height: 70px; }
      .sticky-copy { align-items: flex-start; flex-direction: column; gap: 1px; }
      .sticky-age, .sticky-updates { font-size: 11px; }
      .sticky-actions .button { min-height: 40px; padding-inline: 11px; font-size: 12px; }
    }
    @media (max-width: 519px) {
      .container { width: calc(100% - 32px); }
      .nav-wrap { min-height: 64px; gap: 8px; }
      .brand { gap: 8px; }
      .brand-mark { width: 36px; height: 36px; font-size: 15px; }
      .brand-name { max-width: 185px; font-size: 12px; }
      .nav-actions { gap: 0; }
      .icon-button { width: 42px; height: 42px; }
      .hero-inner { padding-top: 53px; padding-bottom: 48px; }
      .hero h1 { font-size: 36px; }
      .hero-subtitle { font-size: 15px; }
      .hero-description { font-size: 13px; }
      .hero-actions { gap: 8px; }
      .hero-actions .button { flex: 1 1 auto; padding-inline: 12px; font-size: 13px; }
      .hero-collage { right: -95px; bottom: -45px; opacity: .2; }
      .section { padding: 52px 0; }
      h2 { font-size: 25px; }
      .section-lead { font-size: 14px; }
      .release-grid { gap: 16px 12px; }
      .poster-info { padding-top: 9px; }
      .poster-title { font-size: 13px; }
      .wide-preview { grid-template-columns: 102px minmax(0, 1fr); padding: 8px; }
      .wide-copy h3 { font-size: 14px; }
      .wide-copy p { font-size: 11px; }
      .recommend-card { grid-template-columns: 104px minmax(0, 1fr); gap: 11px; padding: 9px; }
      .recommend-copy h3 { font-size: 14px; }
      .recommend-copy p { font-size: 11px; }
      .category-matrix { grid-template-columns: 1fr; }
      .category-item, .category-item:nth-child(1) { min-height: 160px; }
      .news-item { grid-template-columns: 100px minmax(0, 1fr); gap: 10px; }
      .news-copy h3 { font-size: 13px; }
      .news-copy p { font-size: 11px; }
      .safeguard-grid { grid-template-columns: 1fr; }
      .final-actions { width: 100%; }
      .final-actions .button { flex: 1 1 100%; }
      .footer-main { grid-template-columns: 1fr 1fr; gap: 24px 14px; }
      .footer-brand { grid-column: 1 / -1; }
      .footer-bottom { flex-direction: column; gap: 4px; }
      .sticky-inner { align-items: center; gap: 8px; min-height: 76px; padding-block: 8px; }
      .sticky-copy { max-width: 48%; }
      .sticky-updates { line-height: 1.3; }
      .sticky-actions { gap: 4px; }
      .sticky-actions .button { min-height: 42px; padding-inline: 10px; }
      .sticky-close { width: 38px; height: 38px; }
      .age-dialog { padding: 25px 21px; }
      .age-dialog h2 { font-size: 21px; }
      .age-actions { flex-direction: column; }
      .age-actions .button { width: 100%; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
    }

/* roulang page: category1 */
:root{color-scheme:light;--ink:#16243a;--muted:#66758a;--soft:#8c9aaf;--blue:#1769d8;--blue-dark:#1056b5;--blue-pale:#eef5ff;--blue-soft:#e4efff;--white:#fff;--page:#f7fafe;--line:#dce7f5;--green:#138a72;--green-soft:#e7f6f1;--amber:#c88718;--amber-soft:#fff4dd;--coral:#c95b58;--shadow:0 10px 28px rgba(29,73,130,.08);--shadow-hover:0 14px 32px rgba(29,73,130,.13);--radius:8px;--container:1200px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:86px}body{margin:0;color:var(--ink);background:var(--page);font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}body.age-locked{overflow:hidden}img,svg{display:block;max-width:100%}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit}a{color:inherit;text-decoration:none}a:hover{color:var(--blue)}.container{width:min(var(--container),calc(100% - 48px));margin-inline:auto}.section{padding:84px 0}.section-white{background:var(--white)}.section-blue{background:var(--blue-pale)}
.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(220,231,245,.9);background:rgba(255,255,255,.97);transition:box-shadow .2s}.site-header.is-scrolled{box-shadow:0 5px 18px rgba(29,73,130,.08)}.nav-wrap{display:flex;align-items:center;gap:28px;min-height:76px;transition:min-height .2s}.site-header.is-scrolled .nav-wrap{min-height:68px}.brand{display:inline-flex;align-items:center;gap:11px;min-width:0;flex:0 0 auto}.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:6px;color:#fff;background:var(--blue);font-weight:800;font-size:17px;box-shadow:0 5px 14px rgba(23,105,216,.2)}.brand-name{max-width:255px;font-size:14px;line-height:1.35;font-weight:750}.primary-nav{display:flex;align-items:center;gap:5px;margin-left:auto}.primary-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 13px;color:var(--muted);font-size:14px;font-weight:600;white-space:nowrap;transition:color .18s,background .18s}.primary-nav a:hover{color:var(--blue);background:var(--blue-pale)}.primary-nav a[aria-current=page]{color:var(--blue)}.primary-nav a[aria-current=page]::after{position:absolute;right:13px;bottom:2px;left:13px;height:2px;background:var(--blue);content:""}.nav-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}.adult-nav-link{color:var(--muted);font-size:12px;white-space:nowrap}.adult-nav-link:hover{color:var(--blue);text-decoration:underline;text-underline-offset:4px}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 18px;border:1px solid transparent;border-radius:6px;font-size:14px;font-weight:700;cursor:pointer;transition:background .18s,border-color .18s,color .18s,box-shadow .18s,transform .18s}.button:hover{transform:translateY(-2px)}.button-primary{color:#fff;background:var(--blue);box-shadow:0 6px 16px rgba(23,105,216,.18)}.button-primary:hover{color:#fff;background:var(--blue-dark);box-shadow:0 9px 22px rgba(23,105,216,.24)}.button-secondary{color:var(--blue);background:#fff;border-color:#b7cce9}.button-secondary:hover{background:var(--blue-pale);border-color:var(--blue)}.icon-button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid transparent;border-radius:6px;background:transparent;cursor:pointer;transition:.18s}.icon-button:hover{color:var(--blue);background:var(--blue-pale);border-color:var(--line)}.icon-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.menu-toggle{display:none}.search-panel{display:none;position:absolute;top:calc(100% + 8px);right:max(24px,calc((100vw - var(--container))/2));z-index:55;width:min(420px,calc(100vw - 32px));padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}.search-panel.is-open{display:block}.search-form{display:flex;gap:8px}.search-form input{width:100%;min-width:0;height:44px;border:1px solid var(--line);border-radius:6px;padding:0 12px;outline:none}.search-form input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,105,216,.12)}
.breadcrumb-band{padding:42px 0 38px;background:var(--blue-pale);border-bottom:1px solid var(--line)}.breadcrumbs{display:flex;gap:9px;align-items:center;color:var(--muted);font-size:13px;margin-bottom:16px}.breadcrumbs a{color:var(--blue)}.page-title{max-width:780px;margin:0;font-size:clamp(32px,4vw,48px);line-height:1.18;letter-spacing:0}.page-title strong{color:var(--blue)}.page-intro{max-width:720px;margin:16px 0 0;color:var(--muted);font-size:15px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:30px}.section-heading>div{max-width:720px}.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;color:var(--blue);font-size:12px;font-weight:700}.eyebrow:before{content:"";width:18px;height:2px;background:currentColor}.section-title{margin:0;font-size:30px;line-height:1.3}.section-lead{margin:0;color:var(--muted);font-size:15px;max-width:720px}.section-link,.text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--blue);font-weight:650;white-space:nowrap}.section-link:after,.text-link:after{content:"→";transition:transform .18s}.section-link:hover:after,.text-link:hover:after{transform:translateX(3px)}.section-link:hover,.text-link:hover{text-decoration:underline;text-underline-offset:4px}
.filter-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:18px 20px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow);border-radius:8px}.filter-label{font-size:13px;color:var(--soft);font-weight:700}.filter-scroll{display:flex;gap:8px;flex-wrap:wrap}.filter-chip{min-height:38px;padding:0 14px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--muted);font-size:13px;cursor:pointer;transition:.18s}.filter-chip:hover,.filter-chip.active{border-color:var(--blue);background:var(--blue-pale);color:var(--blue)}.select-control{height:38px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);padding:0 30px 0 11px;margin-left:auto}.result-count{color:var(--muted);font-size:13px;white-space:nowrap}
.catalog-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:30px;align-items:start}.side-summary{padding:22px;border-left:3px solid var(--blue);background:#fff;box-shadow:var(--shadow)}.side-summary h3{margin:0 0 13px;font-size:18px}.side-summary p{margin:0;color:var(--muted);font-size:13px}.side-stats{display:grid;gap:13px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.side-stat{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:13px}.side-stat b{color:var(--blue)}.poster-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.poster-card{min-width:0;padding-bottom:12px;border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:var(--shadow);overflow:hidden;transition:transform .2s,box-shadow .2s}.poster-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}.poster{position:relative;aspect-ratio:2/3;overflow:hidden;background:#dbeafe}.poster:before,.poster:after{position:absolute;content:"";border-radius:50%;opacity:.58}.poster:before{width:72%;height:55%;right:-18%;top:8%;background:rgba(255,255,255,.72)}.poster:after{width:90%;height:42%;left:-24%;bottom:5%;background:rgba(23,105,216,.28)}.poster-one{background:linear-gradient(145deg,#dcecff 0 35%,#89b5ef 35% 62%,#f6d9c6 62%)}.poster-two{background:linear-gradient(145deg,#f3e6d2,#b7d5e8 52%,#6d91bd)}.poster-three{background:linear-gradient(145deg,#172d4f,#547da9 54%,#d8b5a1)}.poster-four{background:linear-gradient(145deg,#f0d0c0,#f5edf0 45%,#8bb4d8)}.poster-five{background:linear-gradient(145deg,#d6e6dd,#e8d1b0 50%,#6f98a1)}.poster-six{background:linear-gradient(145deg,#b7d8e7,#f0e0d0 54%,#5587ae)}.poster-seven{background:linear-gradient(145deg,#f0d5bd,#9bb9d4 54%,#436a91)}.poster-eight{background:linear-gradient(145deg,#e9e0d2,#b3c9b4 53%,#d58c80)}.poster-nine{background:linear-gradient(145deg,#cae1ed,#f3d6c1 54%,#7198bf)}.poster-ten{background:linear-gradient(145deg,#d6e2d0,#a3c5dc 50%,#b77e76)}.poster-eleven{background:linear-gradient(145deg,#e7d9cb,#e8edf0 48%,#7eabc0)}.poster-twelve{background:linear-gradient(145deg,#253b5b,#8ba8c5 51%,#d2a38b)}.poster-thirteen{background:linear-gradient(145deg,#e2d2c8,#b1d0c3 50%,#8f6b91)}.poster-fourteen{background:linear-gradient(145deg,#c4d9e9,#efe0bf 51%,#9c7180)}.poster-fifteen{background:linear-gradient(145deg,#354a67,#9cabc4 52%,#d4a48e)}.poster-sixteen{background:linear-gradient(145deg,#d9eadf,#f4d6c1 50%,#6b9e9f)}.poster-label{position:absolute;left:12px;bottom:12px;right:12px;color:#fff;font-weight:700;font-size:14px;text-shadow:0 1px 5px rgba(20,40,70,.5);letter-spacing:0}.poster-shade{position:absolute;inset:0;background:rgba(22,36,58,.05);transition:background .2s}.poster-card:hover .poster-shade{background:rgba(22,36,58,.3)}.poster-action{position:absolute;left:50%;top:50%;transform:translate(-50%,-35%);opacity:0;display:flex;align-items:center;gap:6px;color:#fff;font-size:13px;white-space:nowrap;transition:.2s}.poster-card:hover .poster-action{opacity:1;transform:translate(-50%,-50%)}.play-icon{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(255,255,255,.8);border-radius:50%;font-size:14px}.poster-info{padding:13px 13px 0}.poster-name{margin:0 0 8px;font-size:15px;font-weight:700;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.poster-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}.badge{display:inline-flex;align-items:center;min-height:24px;padding:0 7px;border:1px solid;border-radius:4px;font-size:11px;line-height:1.2;white-space:nowrap}.badge-hd{color:var(--blue);border-color:#9fc3f2;background:var(--blue-pale)}.badge-blue{color:var(--green);border-color:#9bd8c9;background:var(--green-soft)}.badge-update{color:var(--amber);border-color:#e6c77f;background:var(--amber-soft)}.score{color:var(--amber);font-size:13px;font-weight:700;white-space:nowrap}.more-row{text-align:center;margin-top:30px}.more-row .button{min-width:170px}
.calendar-wrap{display:grid;grid-template-columns:190px minmax(0,1fr);gap:30px;align-items:start}.date-rail{display:flex;gap:7px;overflow:auto;padding-bottom:8px}.date-cell{min-width:72px;padding:10px 7px;text-align:center;border:1px solid var(--line);background:#fff;border-radius:6px}.date-cell.active{color:#fff;background:var(--blue);border-color:var(--blue)}.date-cell strong{display:block;font-size:18px;line-height:1.2}.date-cell small{font-size:11px}.update-list{display:grid;gap:0;background:#fff;border-top:1px solid var(--line)}.update-row{display:grid;grid-template-columns:90px 110px minmax(0,1fr) 90px;gap:16px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);font-size:13px}.update-time{color:var(--blue);font-weight:700}.update-type{color:var(--muted)}.update-row a{font-weight:650}.update-status{justify-self:end;color:var(--green);font-size:12px}
.ranking-list{display:grid;gap:0;border-top:1px solid var(--line)}.rank-row{display:grid;grid-template-columns:48px 1fr 180px 62px 85px;align-items:center;gap:18px;padding:14px 4px;border-bottom:1px solid var(--line)}.rank-no{font-size:20px;color:var(--soft);font-weight:800}.rank-row:nth-child(1) .rank-no{color:var(--blue)}.rank-row:nth-child(2) .rank-no{color:#4c8bd6}.rank-row:nth-child(3) .rank-no{color:#73a6df}.rank-name{font-weight:700}.hot-line{height:6px;background:var(--blue-soft);border-radius:3px;overflow:hidden}.hot-line i{display:block;height:100%;background:var(--blue);border-radius:3px}.rank-score{color:var(--amber);font-weight:700}.rank-tag{justify-self:end;color:var(--muted);font-size:12px}
.tips-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px}.tip-panel{padding:25px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}.tip-panel h3{margin:0 0 10px;font-size:18px}.tip-panel p{margin:0;color:var(--muted);font-size:14px}.tip-list{display:grid;gap:10px;margin:16px 0 0;padding:0;list-style:none}.tip-list li{display:flex;gap:10px;color:var(--muted);font-size:13px}.tip-list li:before{content:"✓";color:var(--green);font-weight:800}
.faq-list{max-width:850px;margin:auto;border-top:1px solid var(--line)}.faq-item{border-bottom:1px solid var(--line)}.faq-question{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;min-height:62px;padding:0;border:0;background:none;text-align:left;font-weight:700;cursor:pointer}.faq-symbol{display:grid;place-items:center;width:24px;height:24px;color:var(--blue);font-size:21px;font-weight:400}.faq-answer{max-height:0;overflow:hidden;color:var(--muted);font-size:14px;transition:max-height .2s ease}.faq-answer p{margin:0;padding:0 40px 18px 0}.faq-item.open .faq-answer{max-height:150px}.faq-item.open .faq-symbol:before{content:"−"}.faq-item.open .faq-symbol{font-size:0}.adult-note{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:34px;padding:21px 24px;border:1px solid #e8caca;background:#fffafa}.adult-note strong{color:var(--coral)}.adult-note p{margin:4px 0 0;color:var(--muted);font-size:13px}
.site-footer{padding-top:54px;background:#fff;border-top:1px solid var(--line)}.footer-main{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px;padding-bottom:42px}.footer-brand p{max-width:330px;margin:16px 0 0;color:var(--muted);font-size:13px}.footer-column h3{margin:4px 0 14px;font-size:15px}.footer-links{display:grid;gap:8px}.footer-links a{color:var(--muted);font-size:13px}.footer-links a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:58px;border-top:1px solid var(--line);color:var(--soft);font-size:12px}.footer-bottom a{color:var(--muted)}
.age-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(22,36,58,.54)}.age-modal[hidden]{display:none}.age-dialog{width:min(480px,100%);padding:34px;background:#fff;border-radius:8px;box-shadow:0 20px 60px rgba(22,36,58,.24);text-align:center}.age-dialog .brand-mark{margin:0 auto 18px}.age-dialog h2{margin:0 0 10px;font-size:26px}.age-dialog p{margin:0;color:var(--muted);font-size:14px}.age-actions{display:flex;justify-content:center;gap:10px;margin-top:24px}.age-actions .button{min-width:130px}
@media(max-width:1100px){.primary-nav{gap:0}.primary-nav a{padding-inline:9px}.poster-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.catalog-layout{grid-template-columns:180px minmax(0,1fr)}}
@media(max-width:800px){.container{width:min(var(--container),calc(100% - 36px))}.section{padding:64px 0}.nav-wrap{min-height:68px}.brand-name{max-width:205px}.adult-nav-link,.nav-cta{display:none}.primary-nav{position:fixed;right:0;top:68px;bottom:0;width:min(330px,88vw);display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:22px;background:#fff;box-shadow:-12px 0 30px rgba(29,73,130,.12);transform:translateX(105%);transition:transform .22s ease}.primary-nav.is-open{transform:translateX(0)}.primary-nav a{min-height:50px;padding:0 14px}.primary-nav a[aria-current=page]::after{right:14px;left:auto;width:3px;height:22px;top:14px;bottom:auto}.menu-toggle{display:grid}.nav-actions{margin-left:auto}.catalog-layout{grid-template-columns:1fr}.side-summary{display:flex;align-items:center;gap:20px}.side-stats{display:flex;margin:0;padding:0;border:0;flex:1;justify-content:space-around}.poster-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.calendar-wrap{grid-template-columns:1fr}.footer-main{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.container{width:calc(100% - 32px)}.breadcrumb-band{padding:30px 0}.section-heading{display:block}.section-heading .section-link{margin-top:10px}.page-title{font-size:34px}.filter-bar{align-items:flex-start;overflow:hidden}.filter-scroll{flex-wrap:nowrap;overflow:auto;width:100%;padding-bottom:3px}.select-control{margin-left:0}.result-count{width:100%}.poster-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.poster-info{padding:11px 10px 0}.poster-name{font-size:14px}.side-summary{display:block}.side-stats{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}.update-row{grid-template-columns:70px 90px minmax(0,1fr);gap:8px}.update-status{grid-column:3;justify-self:start}.rank-row{grid-template-columns:35px 1fr 60px;gap:9px}.rank-row .hot-line{grid-column:2}.rank-tag{grid-column:3;grid-row:2;justify-self:start}.rank-score{grid-column:3;grid-row:1}.tips-layout{grid-template-columns:1fr}.adult-note{display:block}.adult-note .button{margin-top:15px;width:100%}.footer-main{grid-template-columns:1fr 1fr;gap:24px}.footer-brand{grid-column:1/-1}.footer-bottom{display:block;padding:15px 0}.footer-bottom a{display:block;margin-top:4px}.age-actions{flex-direction:column}.age-actions .button{width:100%}}
@media(max-width:380px){.brand-name{max-width:170px;font-size:13px}.poster-grid{gap:10px}.filter-chip{padding-inline:11px}.section-title{font-size:26px}}