/* roulang page: index */
:root {
      --bg: #141513;
      --panel: #1d1f1b;
      --layer: #252720;
      --line: #383b33;
      --text: #f4f1e8;
      --muted: #b7b8ad;
      --accent: #d98c5f;
      --accent-soft: #f2c49e;
      --green: #98b37b;
      --radius: 7px;
      --shadow: 0 15px 28px rgba(0,0,0,.18);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--text);
      background-color: var(--bg);
      background-image: radial-gradient(rgba(244,241,232,.035) .7px, transparent .7px);
      background-size: 7px 7px;
      font-family: "PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      font-size: 16px;
      line-height: 1.8;
    }
    a { color: inherit; text-decoration: none; }
    button, input, select { font: inherit; }
    button { cursor: pointer; }
    img { display: block; max-width: 100%; }
    ::selection { background: var(--accent); color: #171714; }
    .container { width: min(1280px, calc(100% - 64px)); margin: 0 auto; }
    .header {
      position: sticky; top: 0; z-index: 50; background: rgba(20,21,19,.98);
      border-bottom: 1px solid var(--line);
    }
    .brand-row { min-height: 72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
    .brand { display:flex; align-items:center; gap:11px; min-width:0; font-size:18px; font-weight:800; white-space:nowrap; }
    .brand-mark {
      width:34px; height:34px; border:1px solid var(--accent); border-radius:7px; display:grid; place-items:center;
      color:var(--accent-soft); font-family:monospace; font-size:12px; background:var(--layer); flex:0 0 auto;
    }
    .header-tools { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
    .searchbox { position:relative; width:250px; }
    .searchbox input {
      width:100%; height:40px; padding:0 35px 0 39px; color:var(--text); background:#1a1b18;
      border:1px solid var(--line); border-radius:6px; outline:none; font-size:14px;
    }
    .searchbox input:focus { border-color:var(--accent-soft); box-shadow:0 0 0 3px rgba(242,196,158,.12); }
    .search-icon { position:absolute; left:13px; top:10px; color:var(--muted); width:18px; height:18px; }
    .clear-search { position:absolute; right:7px; top:6px; border:0; color:var(--muted); background:transparent; width:28px; height:28px; border-radius:4px; }
    .clear-search:hover { color:var(--text); background:var(--layer); }
    .age-link { color:var(--muted); border:1px solid var(--line); min-height:40px; padding:7px 12px; border-radius:6px; font-size:13px; }
    .age-link:hover { border-color:var(--accent); color:var(--accent-soft); }
    .icon-nav { border-top:1px solid rgba(56,59,51,.65); }
    .icon-nav-inner { display:grid; grid-template-columns:repeat(3, 1fr); }
    .nav-item {
      min-height:65px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
      color:var(--muted); font-size:13px; border-bottom:2px solid transparent; transition:.2s ease;
    }
    .nav-item svg { width:20px; height:20px; stroke-width:1.7; }
    .nav-item:hover, .nav-item:focus-visible { color:var(--accent-soft); background:var(--panel); outline:none; }
    .nav-item.active { color:var(--accent); border-bottom-color:var(--accent); background:rgba(217,140,95,.06); }
    .hero { padding:46px 0 26px; overflow:hidden; }
    .hero-grid { display:grid; grid-template-columns:5fr 7fr; min-height:490px; align-items:center; gap:30px; }
    .hero-copy { position:relative; z-index:2; padding:34px 0 34px 4px; }
    .eyebrow, .section-kicker { display:inline-flex; align-items:center; gap:8px; color:var(--accent-soft); font-size:13px; font-weight:700; }
    .eyebrow::before, .section-kicker::before { content:""; width:22px; height:1px; background:var(--accent); }
    h1, h2, h3, p { margin-top:0; }
    h1 { margin:12px 0 18px; font-size:46px; line-height:1.22; font-weight:800; }
    h2 { font-size:29px; line-height:1.32; font-weight:800; margin:10px 0 13px; }
    h3 { font-size:18px; line-height:1.45; font-weight:700; margin-bottom:6px; }
    .hero-copy p { max-width:540px; color:var(--muted); margin-bottom:23px; }
    .button-row { display:flex; flex-wrap:wrap; gap:11px; }
    .btn {
      min-height:44px; border-radius:6px; padding:10px 17px; display:inline-flex; align-items:center; justify-content:center;
      gap:8px; font-weight:800; font-size:14px; border:1px solid transparent; transition:.2s ease;
    }
    .btn-primary { color:#1a1815; background:var(--accent); }
    .btn-primary:hover { transform:translateY(-1px); background:var(--accent-soft); }
    .btn-secondary { color:var(--text); background:rgba(37,39,32,.74); border-color:var(--line); }
    .btn-secondary:hover { border-color:rgba(242,196,158,.65); background:var(--layer); }
    .btn:focus-visible, .faq-button:focus-visible, .media-card:focus-visible { outline:3px solid rgba(242,196,158,.6); outline-offset:3px; }
    .hero-kpis { display:flex; flex-wrap:wrap; gap:22px; margin-top:32px; padding-top:16px; border-top:1px solid var(--line); }
    .kpi strong { display:block; color:var(--peach); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:19px; line-height:1.2; }
    .kpi span { color:var(--muted); font-size:12px; }
    .stage { position:relative; min-height:440px; transform:skewY(-2deg); }
    .stage-cover {
      position:absolute; inset:8px 0 8px 8%; border:1px solid #515448; border-radius:8px; overflow:hidden; box-shadow:var(--shadow);
      background:
        linear-gradient(90deg, rgba(14,15,13,.65), rgba(14,15,13,.04) 55%),
        repeating-linear-gradient(90deg, transparent 0 44px, rgba(244,241,232,.06) 44px 45px),
        linear-gradient(135deg, #596452 0%, #2b3329 38%, #75594a 38%, #3a302a 68%, #171914 68%);
    }
    .stage-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 58%, rgba(0,0,0,.65)); }
    .stage-caption { position:absolute; z-index:2; left:28px; bottom:25px; transform:skewY(2deg); }
    .stage-caption b { display:block; font-size:24px; }
    .stage-caption span { color:var(--muted); font-size:13px; }
    .stage-label { position:absolute; z-index:3; top:21px; right:21px; transform:skewY(2deg); }
    .tag, .duration, .status { display:inline-flex; align-items:center; border-radius:4px; font-size:12px; line-height:1; white-space:nowrap; }
    .tag { padding:6px 8px; color:var(--accent-soft); border:1px solid rgba(242,196,158,.28); background:rgba(23,24,20,.78); }
    .duration { padding:6px 7px; color:#161613; background:var(--accent-soft); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
    .status { padding:5px 7px; color:#d5e6c1; background:rgba(152,179,123,.16); }
    .section { padding:82px 0; border-top:1px solid rgba(56,59,51,.76); }
    .section-dark { background:rgba(29,31,27,.74); }
    .section-head { display:flex; align-items:end; justify-content:space-between; gap:25px; margin-bottom:27px; }
    .section-head p { max-width:600px; margin:0; color:var(--muted); font-size:15px; }
    .solution-layout { display:grid; grid-template-columns:210px 1fr; gap:32px; }
    .rail-intro { border-left:2px solid var(--accent); padding-left:18px; }
    .rail-intro .index { color:var(--accent); font:700 36px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
    .rail-intro p { color:var(--muted); font-size:14px; margin-top:14px; }
    .media-rail { display:flex; overflow-x:auto; gap:15px; padding:2px 2px 14px; scroll-snap-type:x mandatory; }
    .media-rail::-webkit-scrollbar { height:6px; }
    .media-rail::-webkit-scrollbar-thumb { background:#505348; border-radius:5px; }
    .media-card { flex:0 0 265px; scroll-snap-align:start; display:block; border:1px solid var(--line); border-radius:7px; overflow:hidden; background:var(--layer); box-shadow:0 8px 18px rgba(0,0,0,.12); transition:.2s ease; }
    .media-card:hover { transform:translateY(-2px); border-color:rgba(242,196,158,.55); }
    .cover { position:relative; aspect-ratio:16/9; overflow:hidden; background:#33382e; }
    .cover::before { content:""; position:absolute; inset:0; transition:transform .24s ease; }
    .media-card:hover .cover::before { transform:scale(1.05); }
    .cover-a::before { background:linear-gradient(135deg,#615744 0 22%,#313b31 22% 53%,#805b4b 53% 70%,#20231f 70%); }
    .cover-b::before { background:linear-gradient(125deg,#6f725c 0 30%,#28332b 30% 56%,#8a624e 56% 73%,#3b312b 73%); }
    .cover-c::before { background:linear-gradient(145deg,#884f45 0 25%,#403c2e 25% 52%,#536451 52% 78%,#252721 78%); }
    .cover-d::before { background:linear-gradient(135deg,#474536 0 28%,#8b6952 28% 47%,#303b31 47% 69%,#6b765d 69%); }
    .cover-e::before { background:linear-gradient(135deg,#615a48 0 31%,#2d312b 31% 49%,#955e4d 49% 69%,#4b5948 69%); }
    .cover::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 47px),linear-gradient(180deg,transparent 45%,rgba(0,0,0,.6)); }
    .cover-top, .cover-bottom { position:absolute; z-index:2; left:10px; right:10px; display:flex; justify-content:space-between; }
    .cover-top { top:10px; } .cover-bottom { bottom:9px; align-items:end; }
    .progress { position:absolute; z-index:3; bottom:0; left:0; height:3px; background:var(--accent); width:63%; }
    .card-copy { padding:13px 13px 15px; }
    .card-copy h3 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:52px; }
    .card-meta { color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; }
    .result-grid { display:grid; grid-template-columns:1.3fr .85fr .72fr; grid-template-rows:166px 166px; gap:14px; }
    .result-feature { grid-row:span 2; }
    .result-tile { min-height:0; position:relative; border:1px solid var(--line); overflow:hidden; border-radius:7px; background:var(--layer); }
    .result-tile .cover { height:100%; aspect-ratio:auto; }
    .result-tile .tile-copy { position:absolute; z-index:4; left:16px; right:16px; bottom:14px; }
    .result-tile h3 { margin:7px 0 0; }
    .metrics { display:flex; flex-direction:column; justify-content:space-between; padding:18px; background:#20231d; }
    .metric { padding-bottom:13px; border-bottom:1px solid var(--line); }
    .metric:last-child { padding-bottom:0; border-bottom:0; }
    .metric b { display:block; color:var(--peach); font:700 25px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; }
    .metric span { color:var(--muted); font-size:13px; }
    .portrait-wrap { display:grid; grid-template-columns:1fr 1.15fr; gap:34px; align-items:center; }
    .portrait-card { position:relative; min-height:435px; overflow:hidden; border:1px solid var(--line); border-radius:7px; background:linear-gradient(155deg,#374638 0%,#242a24 48%,#825d4b 48%,#433830 100%); }
    .portrait-card::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent 0 27px,rgba(244,241,232,.055) 27px 28px); }
    .portrait-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.72)); }
    .portrait-caption { position:absolute; z-index:2; bottom:23px; left:23px; right:23px; }
    .portrait-caption h3 { font-size:24px; }
    .check-list { list-style:none; padding:0; margin:21px 0 24px; }
    .check-list li { padding:12px 0 12px 31px; position:relative; border-bottom:1px solid var(--line); color:var(--muted); }
    .check-list li::before { content:"✓"; position:absolute; left:0; color:var(--green); font-weight:800; }
    .list-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
    .compact-card { padding:17px; border:1px solid var(--line); border-radius:7px; background:var(--layer); transition:.2s ease; }
    .compact-card:hover { transform:translateY(-2px); border-color:rgba(242,196,158,.52); }
    .compact-card .num { color:var(--accent); font:700 13px ui-monospace,SFMono-Regular,Menlo,monospace; }
    .compact-card p { color:var(--muted); font-size:14px; margin:8px 0 0; }
    .quotes { display:flex; overflow-x:auto; gap:14px; padding:3px 2px 17px; }
    .quote { flex:0 0 330px; border:1px solid var(--line); border-radius:7px; padding:20px; background:var(--layer); }
    .quote:hover { border-color:rgba(242,196,158,.48); }
    .quote-top { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:13px; }
    .stars { color:var(--accent-soft); letter-spacing:2px; }
    .quote p { margin:15px 0; color:var(--text); font-size:15px; }
    .quote small { color:var(--green); }
    .news-layout { display:grid; grid-template-columns:1.4fr .8fr; gap:34px; }
    .news-list { border-top:1px solid var(--line); }
    .news-item { display:grid; grid-template-columns:102px 1fr auto; align-items:center; gap:18px; padding:17px 0; border-bottom:1px solid var(--line); transition:.2s ease; }
    .news-item:hover { padding-left:7px; background:rgba(244,241,232,.02); }
    .news-item time { color:var(--accent-soft); font:12px ui-monospace,SFMono-Regular,Menlo,monospace; }
    .news-item h3 { margin:0; }
    .news-item p { color:var(--muted); font-size:13px; margin:2px 0 0; }
    .arrow { color:var(--accent); font-size:21px; }
    .update-box { border-left:2px solid var(--green); padding:21px; background:#20231d; }
    .update-box p { color:var(--muted); font-size:14px; }
    .timeline { margin-top:18px; border-top:1px solid var(--line); }
    .timeline div { display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14px; }
    .timeline span { color:var(--muted); }
    .faq-list { border-top:1px solid var(--line); }
    .faq-item { border-bottom:1px solid var(--line); }
    .faq-button { width:100%; color:var(--text); background:transparent; border:0; display:flex; align-items:center; justify-content:space-between; gap:20px; text-align:left; padding:18px 0; font-weight:700; }
    .faq-button:hover { color:var(--accent-soft); }
    .faq-icon { width:26px; height:26px; display:grid; place-items:center; border:1px solid var(--line); color:var(--accent); border-radius:4px; flex:0 0 auto; font-size:18px; }
    .faq-answer { display:none; color:var(--muted); padding:0 42px 20px 0; font-size:15px; }
    .faq-item.open .faq-answer { display:block; }
    .faq-item.open .faq-icon { color:#181714; border-color:var(--accent); background:var(--accent); }
    .cta { padding:72px 0; position:relative; overflow:hidden; border-top:1px solid var(--line); background:#1a1c18; }
    .cta::before { content:""; position:absolute; inset:0; opacity:.42; background:repeating-linear-gradient(90deg,transparent 0 39px,rgba(242,196,158,.13) 39px 40px),repeating-linear-gradient(0deg,transparent 0 10px,rgba(244,241,232,.03) 10px 11px); }
    .cta-inner { position:relative; display:flex; align-items:center; justify-content:space-between; gap:30px; }
    .cta p { color:var(--muted); max-width:680px; margin:8px 0 0; }
    .footer { padding:42px 0 22px; background:#10110f; border-top:1px solid var(--line); }
    .footer-grid { display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:35px; }
    .footer h3 { color:var(--accent-soft); font-size:14px; margin-bottom:10px; }
    .footer p, .footer a { color:var(--muted); font-size:13px; }
    .footer a { display:block; margin:6px 0; }
    .footer a:hover { color:var(--peach); }
    .copyright { margin-top:30px; padding-top:16px; border-top:1px solid var(--line); color:#7f8178; font-size:12px; display:flex; justify-content:space-between; gap:15px; }
    .mobile-search { display:none; }
    @media (max-width: 1024px) {
      .container { width:min(1280px, calc(100% - 48px)); }
      .hero-grid { grid-template-columns:1fr 1fr; }
      .solution-layout { grid-template-columns:165px 1fr; }
      .result-grid { grid-template-columns:1.2fr .8fr; }
      .metrics { grid-column:span 2; display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
      .metric { padding:0; border:0; }
      .list-grid { grid-template-columns:repeat(2,1fr); }
    }
    @media (max-width: 768px) {
      .container { width:calc(100% - 32px); }
      .brand-row { min-height:64px; gap:10px; }
      .brand { font-size:15px; }
      .brand-mark { width:30px; height:30px; }
      .searchbox { display:none; }
      .mobile-search { display:grid; place-items:center; width:40px; height:40px; color:var(--muted); border:1px solid var(--line); border-radius:6px; background:var(--panel); }
      .age-link { padding:7px 9px; font-size:12px; }
      .icon-nav { overflow:hidden; }
      .icon-nav-inner { display:flex; overflow-x:auto; padding:0 9px; }
      .nav-item { flex:0 0 96px; }
      .hero { padding:25px 0 21px; }
      .hero-grid { display:flex; flex-direction:column; align-items:stretch; gap:16px; min-height:0; }
      .hero-copy { padding:8px 0 0; }
      h1 { font-size:35px; }
      h2 { font-size:25px; }
      .stage { min-height:286px; transform:none; }
      .stage-cover { inset:0; }
      .stage-caption, .stage-label { transform:none; }
      .hero-kpis { gap:16px; }
      .section { padding:60px 0; }
      .section-head { display:block; margin-bottom:22px; }
      .section-head p { margin-top:10px; }
      .solution-layout, .portrait-wrap, .news-layout { grid-template-columns:1fr; gap:25px; }
      .rail-intro { display:flex; align-items:center; gap:17px; padding-left:14px; }
      .rail-intro p { margin:0; }
      .result-grid { grid-template-columns:1fr 1fr; grid-template-rows:190px 150px 120px; }
      .result-feature { grid-column:span 2; grid-row:auto; }
      .metrics { grid-column:span 2; grid-template-columns:repeat(2,1fr); }
      .portrait-card { min-height:335px; }
      .list-grid { grid-template-columns:1fr; }
      .news-item { grid-template-columns:74px 1fr auto; gap:11px; }
      .cta { padding:55px 0; }
      .cta-inner { display:block; }
      .cta-inner .button-row { margin-top:20px; }
      .footer-grid { grid-template-columns:1fr 1fr; gap:25px; }
      .footer-grid > div:first-child { grid-column:span 2; }
      .copyright { flex-direction:column; gap:4px; }
    }
    @media (max-width: 520px) {
      .age-link { display:none; }
      .button-row .btn { flex:1 1 100%; }
      .hero-kpis { justify-content:space-between; }
      .kpi strong { font-size:17px; }
      .media-card { flex-basis:244px; }
      .result-grid { grid-template-columns:1fr; grid-template-rows:215px 150px 150px auto; }
      .result-feature, .metrics { grid-column:auto; }
      .metrics { grid-template-columns:1fr 1fr; }
      .quote { flex-basis:285px; }
      .news-item { grid-template-columns:64px 1fr; }
      .news-item .arrow { display:none; }
      .footer-grid { grid-template-columns:1fr; }
      .footer-grid > div:first-child { grid-column:auto; }
    }

/* roulang page: category2 */
:root {
      --bg: #141513;
      --panel: #1d1f1b;
      --layer: #252720;
      --line: #383b33;
      --text: #f4f1e8;
      --muted: #b7b8ad;
      --accent: #d98c5f;
      --accent-soft: #f2c49e;
      --green: #98b37b;
      --radius: 7px;
      --shadow: 0 15px 28px rgba(0,0,0,.18);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--text);
      background-color: var(--bg);
      background-image: radial-gradient(rgba(244,241,232,.035) .7px, transparent .7px);
      background-size: 7px 7px;
      font-family: "PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      font-size: 16px;
      line-height: 1.8;
    }
    a { color: inherit; text-decoration: none; }
    button, input, select { font: inherit; }
    button { cursor: pointer; }
    img { display: block; max-width: 100%; }
    .container { width: min(1280px, calc(100% - 64px)); margin: 0 auto; }

    .header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(20,21,19,.98);
      border-bottom: 1px solid var(--line);
    }
    .brand-row {
      min-height: 72px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
    }
    .brand {
      display:flex;
      align-items:center;
      gap:11px;
      min-width:0;
      font-size:18px;
      font-weight:800;
      white-space:nowrap;
    }
    .brand-mark {
      width:34px;
      height:34px;
      border:1px solid var(--accent);
      border-radius:7px;
      display:grid;
      place-items:center;
      color:var(--accent-soft);
      font-family:monospace;
      font-size:12px;
      background:var(--layer);
      flex:0 0 auto;
    }
    .header-tools { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
    .searchbox { position:relative; width:250px; }
    .searchbox input {
      width:100%;
      height:40px;
      padding:0 35px 0 39px;
      color:var(--text);
      background:#1a1b18;
      border:1px solid var(--line);
      border-radius:6px;
      outline:none;
      font-size:14px;
    }
    .searchbox input:focus {
      border-color:var(--accent-soft);
      box-shadow:0 0 0 3px rgba(242,196,158,.12);
    }
    .search-icon { position:absolute; left:13px; top:10px; color:var(--muted); width:18px; height:18px; }
    .clear-search {
      position:absolute;
      right:7px;
      top:6px;
      border:0;
      color:var(--muted);
      background:transparent;
      width:28px;
      height:28px;
      border-radius:4px;
    }
    .clear-search:hover { color:var(--text); background:var(--layer); }
    .age-button {
      min-height:40px;
      padding:0 12px;
      color:var(--accent-soft);
      background:transparent;
      border:1px solid rgba(242,196,158,.34);
      border-radius:6px;
      font-size:13px;
      transition:.2s ease;
    }
    .age-button:hover { background:rgba(217,140,95,.1); border-color:var(--accent-soft); }
    .icon-nav { border-top:1px solid rgba(56,59,51,.65); }
    .icon-nav-inner { display:grid; grid-template-columns:repeat(3, 1fr); }
    .nav-item {
      min-height:65px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:2px;
      color:var(--muted);
      font-size:13px;
      border-bottom:2px solid transparent;
      transition:.2s ease;
    }
    .nav-item svg { width:20px; height:20px; stroke-width:1.7; }
    .nav-item:hover, .nav-item:focus-visible {
      color:var(--accent-soft);
      background:var(--panel);
      outline:none;
    }
    .nav-item.active {
      color:var(--accent);
      border-bottom-color:var(--accent);
      background:rgba(217,140,95,.06);
    }

    .topic-header {
      position:relative;
      overflow:hidden;
      min-height:270px;
      border-bottom:1px solid var(--line);
      background:#1c1e19;
    }
    .topic-header::before {
      content:"";
      position:absolute;
      inset:0;
      opacity:.9;
      background:
        linear-gradient(90deg, rgba(20,21,19,.96) 0%, rgba(20,21,19,.78) 42%, rgba(20,21,19,.27) 100%),
        repeating-linear-gradient(90deg, transparent 0 67px, rgba(244,241,232,.07) 67px 68px),
        linear-gradient(126deg, #20261e 0 24%, #55604a 24% 37%, #332d27 37% 58%, #745845 58% 74%, #20221e 74%);
    }
    .topic-header::after {
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:18px;
      height:1px;
      background:repeating-linear-gradient(90deg, var(--accent) 0 9px, transparent 9px 22px);
      opacity:.48;
    }
    .topic-header-inner {
      position:relative;
      z-index:1;
      min-height:270px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      padding:42px 0 39px;
    }
    .eyebrow, .section-kicker {
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--accent-soft);
      font-size:13px;
      font-weight:700;
    }
    .eyebrow::before, .section-kicker::before {
      content:"";
      width:22px;
      height:1px;
      background:var(--accent);
    }
    h1, h2, h3, p { margin-top:0; }
    h1 { max-width:760px; margin:10px 0 12px; font-size:42px; line-height:1.22; letter-spacing:0; }
    h2 { margin-bottom:11px; font-size:28px; line-height:1.32; letter-spacing:0; }
    h3 { font-size:18px; line-height:1.45; letter-spacing:0; }
    .topic-header p { max-width:710px; margin:0; color:var(--muted); }
    .header-status { display:flex; flex-wrap:wrap; gap:9px; margin-top:19px; }
    .tag, .duration, .status {
      display:inline-flex;
      align-items:center;
      border-radius:4px;
      font-size:12px;
      line-height:1;
      white-space:nowrap;
    }
    .tag {
      padding:6px 8px;
      color:var(--accent-soft);
      border:1px solid rgba(242,196,158,.28);
      background:rgba(23,24,20,.78);
    }
    .status {
      padding:6px 8px;
      color:#c6d4ac;
      border:1px solid rgba(152,179,123,.3);
      background:rgba(152,179,123,.1);
    }
    .duration {
      padding:5px 7px;
      color:#171714;
      background:var(--accent-soft);
      font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size:11px;
      font-weight:800;
    }

    .section { padding:78px 0; border-top:1px solid rgba(56,59,51,.76); }
    .section-dark { background:rgba(29,31,27,.74); }
    .section-head { display:flex; align-items:end; justify-content:space-between; gap:25px; margin-bottom:27px; }
    .section-head p { max-width:630px; margin:0; color:var(--muted); font-size:15px; }
    .subtopic-grid {
      display:grid;
      grid-template-columns:repeat(6, 1fr);
      gap:12px;
    }
    .subtopic {
      min-height:112px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:14px 8px;
      color:var(--muted);
      background:var(--layer);
      border:1px solid var(--line);
      border-radius:7px;
      text-align:center;
      font-size:14px;
      transition:.2s ease;
    }
    .subtopic svg { width:24px; height:24px; color:var(--accent-soft); stroke-width:1.55; }
    .subtopic:hover, .subtopic:focus-visible {
      color:var(--text);
      border-color:rgba(242,196,158,.58);
      transform:translateY(-2px);
      background:#2a2d25;
      outline:none;
    }
    .subtopic:active { transform:translateY(0); background:#22241f; }

    .browse-layout { display:grid; grid-template-columns:220px minmax(0, 1fr); gap:36px; align-items:start; }
    .side-index {
      position:sticky;
      top:158px;
      padding:6px 0;
      border-top:1px solid var(--line);
    }
    .side-index h2 { margin:14px 0 10px; font-size:18px; }
    .side-index a {
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:11px 0;
      color:var(--muted);
      border-bottom:1px solid rgba(56,59,51,.78);
      font-size:14px;
      transition:.2s ease;
    }
    .side-index a::after { content:"→"; color:var(--accent); opacity:.65; }
    .side-index a:hover, .side-index a:focus-visible { color:var(--accent-soft); outline:none; }
    .hot-label { margin:25px 0 10px; color:var(--muted); font-size:13px; }
    .hot-tags { display:flex; flex-wrap:wrap; gap:7px; }
    .hot-tags a {
      display:inline-flex;
      width:auto;
      padding:5px 7px;
      border:1px solid var(--line);
      border-radius:4px;
      color:var(--muted);
      font-size:12px;
    }
    .hot-tags a::after { display:none; }
    .hot-tags a:hover { color:var(--accent-soft); border-color:rgba(242,196,158,.5); }

    .stream-section { padding:0 0 54px; scroll-margin-top:155px; }
    .stream-section + .stream-section { padding-top:25px; border-top:1px solid var(--line); }
    .stream-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:17px; }
    .stream-heading h2 { margin:0; }
    .stream-heading p { margin:0; color:var(--muted); font-size:14px; }
    .feature-strip {
      display:grid;
      grid-template-columns:minmax(260px, 42%) 1fr;
      min-height:214px;
      margin-bottom:16px;
      overflow:hidden;
      background:var(--layer);
      border:1px solid var(--line);
      border-radius:7px;
      box-shadow:0 8px 18px rgba(0,0,0,.12);
      transition:.2s ease;
    }
    .feature-strip:hover { border-color:rgba(242,196,158,.5); transform:translateY(-2px); }
    .feature-cover {
      position:relative;
      min-height:210px;
      overflow:hidden;
      background:#2e3429;
    }
    .feature-cover::before, .small-cover::before {
      content:"";
      position:absolute;
      inset:0;
      transition:transform .24s ease;
    }
    .feature-strip:hover .feature-cover::before, .compact-card:hover .small-cover::before { transform:scale(1.05); }
    .cover-one::before { background:linear-gradient(135deg,#6d5c48 0 25%,#353f31 25% 55%,#8a604b 55% 73%,#20251e 73%); }
    .cover-two::before { background:linear-gradient(135deg,#303d32 0 33%,#87634c 33% 55%,#3c342d 55% 76%,#626a50 76%); }
    .cover-three::before { background:linear-gradient(135deg,#705c49 0 22%,#252c25 22% 48%,#59634d 48% 72%,#3c302a 72%); }
    .cover-four::before { background:linear-gradient(135deg,#2a3028 0 28%,#76604b 28% 50%,#3b4233 50% 70%,#8a614d 70%); }
    .cover-five::before { background:linear-gradient(135deg,#7e624d 0 22%,#323a2f 22% 48%,#252822 48% 70%,#5d684f 70%); }
    .cover-six::before { background:linear-gradient(135deg,#384334 0 24%,#805f49 24% 52%,#4a3a30 52% 72%,#273027 72%); }
    .feature-cover::after, .small-cover::after {
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, transparent 42%, rgba(0,0,0,.52));
    }
    .cover-label { position:absolute; z-index:2; top:12px; left:12px; }
    .cover-duration { position:absolute; z-index:2; right:12px; bottom:12px; }
    .feature-copy { display:flex; flex-direction:column; justify-content:center; padding:24px 26px; }
    .feature-copy h3 { margin:11px 0 8px; font-size:22px; }
    .feature-copy p { margin:0 0 17px; color:var(--muted); font-size:15px; line-height:1.7; }
    .meta { display:flex; flex-wrap:wrap; gap:12px; color:var(--muted); font-size:12px; }
    .meta span::before { content:"•"; margin-right:7px; color:var(--accent); }
    .compact-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
    .compact-card {
      display:grid;
      grid-template-columns:136px minmax(0,1fr);
      min-height:127px;
      overflow:hidden;
      background:var(--layer);
      border:1px solid var(--line);
      border-radius:7px;
      transition:.2s ease;
    }
    .compact-card:hover, .compact-card:focus-visible {
      transform:translateY(-2px);
      border-color:rgba(242,196,158,.55);
      outline:none;
    }
    .compact-card:active { transform:translateY(0); }
    .small-cover { position:relative; overflow:hidden; background:#2e3429; }
    .small-cover .duration { position:absolute; z-index:2; right:8px; bottom:8px; }
    .compact-copy { min-width:0; padding:13px 13px 12px; }
    .compact-copy h3 {
      display:-webkit-box;
      overflow:hidden;
      margin:6px 0 5px;
      font-size:15px;
      line-height:1.45;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:2;
    }
    .compact-copy p {
      display:-webkit-box;
      overflow:hidden;
      margin:0;
      color:var(--muted);
      font-size:12px;
      line-height:1.55;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:1;
    }

    .faq-wrap { margin:8px 0 55px; scroll-margin-top:145px; }
    .faq-wrap h2 { margin-bottom:9px; }
    .faq-intro { max-width:700px; color:var(--muted); font-size:15px; }
    .faq-list { margin-top:20px; border-top:1px solid var(--line); }
    .faq-item { border-bottom:1px solid var(--line); }
    .faq-button {
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      padding:17px 2px;
      color:var(--text);
      background:transparent;
      border:0;
      text-align:left;
      font-size:16px;
      font-weight:700;
    }
    .faq-button:hover { color:var(--accent-soft); }
    .faq-button span:last-child {
      color:var(--accent);
      font-size:23px;
      font-weight:400;
      line-height:1;
      transition:.2s ease;
    }
    .faq-answer {
      display:none;
      max-width:850px;
      padding:0 2px 19px;
      color:var(--muted);
      font-size:15px;
    }
    .faq-item.open .faq-answer { display:block; }
    .faq-item.open .faq-button span:last-child { transform:rotate(45deg); color:var(--accent-soft); }

    .cta {
      position:relative;
      overflow:hidden;
      padding:68px 0;
      background:#1b1d19;
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
    }
    .cta::before {
      content:"";
      position:absolute;
      inset:0;
      opacity:.34;
      background:
        repeating-linear-gradient(90deg, transparent 0 26px, rgba(217,140,95,.45) 26px 27px, transparent 27px 54px),
        linear-gradient(135deg, transparent 0 46%, rgba(152,179,123,.13) 46% 47%, transparent 47%);
      background-size:auto, 130px 130px;
    }
    .cta-inner { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:30px; }
    .cta-copy { max-width:730px; }
    .cta-copy h2 { margin:9px 0 10px; font-size:30px; }
    .cta-copy p { margin:0; color:var(--muted); }
    .button-row { display:flex; flex-wrap:wrap; gap:11px; }
    .btn {
      min-height:44px;
      padding:10px 17px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      border:1px solid transparent;
      border-radius:6px;
      font-size:14px;
      font-weight:800;
      transition:.2s ease;
    }
    .btn-primary { color:#1a1815; background:var(--accent); }
    .btn-primary:hover { transform:translateY(-1px); background:var(--accent-soft); }
    .btn-secondary { color:var(--text); background:rgba(37,39,32,.74); border-color:var(--line); }
    .btn-secondary:hover { border-color:rgba(242,196,158,.65); background:var(--layer); }
    .btn:focus-visible, .faq-button:focus-visible, .compact-card:focus-visible, .subtopic:focus-visible {
      outline:3px solid rgba(242,196,158,.6);
      outline-offset:3px;
    }

    .related-links { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-top:23px; }
    .related-link {
      display:flex;
      align-items:center;
      gap:12px;
      min-height:60px;
      padding:11px 13px;
      color:var(--muted);
      background:var(--layer);
      border:1px solid var(--line);
      border-radius:7px;
      font-size:14px;
      transition:.2s ease;
    }
    .related-link svg { width:19px; height:19px; flex:0 0 auto; color:var(--accent); }
    .related-link:hover, .related-link:focus-visible {
      color:var(--accent-soft);
      border-color:rgba(242,196,158,.55);
      transform:translateY(-1px);
      outline:none;
    }

    .footer { padding:48px 0 22px; background:#121310; }
    .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:42px; }
    .footer p { max-width:430px; margin-bottom:0; color:var(--muted); font-size:14px; line-height:1.7; }
    .footer h3 { margin:0 0 10px; font-size:15px; color:var(--text); }
    .footer-grid > div:not(:first-child) { display:flex; flex-direction:column; align-items:flex-start; }
    .footer-grid > div:not(:first-child) a { margin:3px 0; color:var(--muted); font-size:14px; transition:.2s ease; }
    .footer-grid > div:not(:first-child) a:hover, .footer-grid > div:not(:first-child) a:focus-visible { color:var(--accent-soft); outline:none; }
    .copyright {
      display:flex;
      justify-content:space-between;
      gap:20px;
      margin-top:35px;
      padding-top:17px;
      color:#85877e;
      border-top:1px solid var(--line);
      font-size:12px;
    }

    @media (max-width: 1024px) {
      .container { width:min(1280px, calc(100% - 48px)); }
      .browse-layout { grid-template-columns:180px minmax(0,1fr); gap:25px; }
      .subtopic-grid { grid-template-columns:repeat(3, 1fr); }
      .compact-card { grid-template-columns:116px minmax(0,1fr); }
      .feature-strip { grid-template-columns:38% 1fr; }
    }
    @media (max-width: 768px) {
      body { font-size:15px; }
      .container { width:calc(100% - 32px); }
      .brand-row { min-height:64px; gap:12px; }
      .brand { font-size:15px; }
      .brand-mark { width:31px; height:31px; }
      .searchbox { width:42px; }
      .searchbox input { width:42px; padding:0; color:transparent; cursor:pointer; }
      .searchbox input:focus { position:absolute; right:0; width:min(270px, calc(100vw - 108px)); padding:0 35px 0 39px; color:var(--text); background:#1a1b18; }
      .clear-search { display:none; }
      .age-button { padding:0 9px; font-size:12px; }
      .icon-nav-inner { width:max-content; min-width:100%; display:flex; overflow-x:auto; }
      .nav-item { width:118px; flex:0 0 118px; }
      .topic-header, .topic-header-inner { min-height:245px; }
      .topic-header-inner { padding:34px 0; }
      h1 { font-size:32px; }
      h2 { font-size:24px; }
      .section { padding:58px 0; }
      .section-head { display:block; }
      .section-head p { margin-top:10px; }
      .subtopic-grid { grid-template-columns:repeat(4, 1fr); gap:9px; }
      .subtopic { min-height:95px; font-size:13px; }
      .browse-layout { display:block; }
      .side-index {
        position:relative;
        top:auto;
        display:flex;
        overflow-x:auto;
        gap:0;
        margin:0 -16px 35px;
        padding:0 16px 10px;
        border-top:0;
        border-bottom:1px solid var(--line);
      }
      .side-index h2, .side-index .hot-label, .side-index .hot-tags { display:none; }
      .side-index a {
        flex:0 0 auto;
        margin-right:20px;
        padding:8px 0;
        border:0;
        white-space:nowrap;
      }
      .side-index a::after { display:none; }
      .stream-section { padding-bottom:42px; }
      .stream-heading { display:block; }
      .stream-heading p { margin-top:5px; }
      .feature-strip { grid-template-columns:1fr; }
      .feature-cover { min-height:190px; }
      .feature-copy { padding:18px; }
      .feature-copy h3 { font-size:19px; }
      .compact-grid { grid-template-columns:1fr; }
      .compact-card { grid-template-columns:130px minmax(0,1fr); }
      .cta { padding:52px 0; }
      .cta-inner { display:block; }
      .cta .button-row { margin-top:20px; }
      .related-links { grid-template-columns:1fr; }
      .footer-grid { grid-template-columns:1fr 1fr; gap:28px 22px; }
      .footer-grid > div:first-child { grid-column:1 / -1; }
      .copyright { display:block; }
      .copyright span { display:block; }
    }
    @media (max-width: 520px) {
      h1 { font-size:29px; }
      .header-status { gap:7px; }
      .subtopic-grid { grid-template-columns:repeat(4, 1fr); }
      .subtopic { min-height:87px; padding:10px 4px; font-size:12px; }
      .subtopic svg { width:20px; height:20px; }
      .compact-card { grid-template-columns:112px minmax(0,1fr); min-height:113px; }
      .compact-copy { padding:10px; }
      .compact-copy h3 { font-size:14px; }
      .cta-copy h2 { font-size:25px; }
      .footer-grid { grid-template-columns:1fr; }
      .footer-grid > div:first-child { grid-column:auto; }
    }

/* roulang page: category1 */
:root {
      --bg: #141513;
      --panel: #1d1f1b;
      --layer: #252720;
      --line: #383b33;
      --text: #f4f1e8;
      --muted: #b7b8ad;
      --accent: #d98c5f;
      --accent-soft: #f2c49e;
      --green: #98b37b;
      --radius: 7px;
      --shadow: 0 15px 28px rgba(0,0,0,.18);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--text);
      background-color: var(--bg);
      background-image: radial-gradient(rgba(244,241,232,.035) .7px, transparent .7px);
      background-size: 7px 7px;
      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
      font-size: 16px;
      line-height: 1.8;
    }

    a { color: inherit; text-decoration: none; }
    button, input, select { font: inherit; }
    button { cursor: pointer; }
    img { display: block; max-width: 100%; }
    ::selection { background: rgba(217,140,95,.45); color: var(--text); }

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

    .header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(20,21,19,.985);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(8px);
    }

    .brand-row {
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 11px;
      min-width: 0;
      color: var(--text);
      font-size: 18px;
      font-weight: 800;
      white-space: nowrap;
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      color: var(--accent-soft);
      background: var(--layer);
      border: 1px solid var(--accent);
      border-radius: 7px;
      font-family: monospace;
      font-size: 12px;
      letter-spacing: 0;
    }

    .header-tools {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
    }

    .searchbox {
      position: relative;
      width: 250px;
    }

    .searchbox input {
      width: 100%;
      height: 40px;
      padding: 0 35px 0 39px;
      color: var(--text);
      background: #1a1b18;
      border: 1px solid var(--line);
      border-radius: 6px;
      outline: none;
      font-size: 14px;
      transition: border-color .2s ease, box-shadow .2s ease;
    }

    .searchbox input::placeholder { color: #85877f; }

    .searchbox input:focus {
      border-color: var(--accent-soft);
      box-shadow: 0 0 0 3px rgba(242,196,158,.12);
    }

    .search-icon {
      position: absolute;
      left: 13px;
      top: 10px;
      width: 18px;
      height: 18px;
      color: var(--muted);
      pointer-events: none;
    }

    .clear-search {
      position: absolute;
      right: 7px;
      top: 6px;
      width: 28px;
      height: 28px;
      padding: 0;
      color: var(--muted);
      background: transparent;
      border: 0;
      border-radius: 4px;
      transition: color .2s ease, background .2s ease;
    }

    .clear-search:hover,
    .clear-search:focus-visible {
      color: var(--text);
      background: var(--layer);
      outline: none;
    }

    .age-button {
      min-height: 40px;
      padding: 0 12px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--accent-soft);
      background: rgba(217,140,95,.08);
      border: 1px solid rgba(217,140,95,.3);
      border-radius: 6px;
      font-size: 13px;
      font-weight: 700;
      white-space: nowrap;
      transition: .2s ease;
    }

    .age-button:hover {
      color: var(--text);
      border-color: var(--accent-soft);
      transform: translateY(-1px);
    }

    .age-button svg { width: 16px; height: 16px; }

    .icon-nav {
      border-top: 1px solid rgba(56,59,51,.65);
    }

    .icon-nav-inner {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }

    .nav-item {
      min-height: 65px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      color: var(--muted);
      border-bottom: 2px solid transparent;
      font-size: 13px;
      transition: .2s ease;
    }

    .nav-item svg {
      width: 20px;
      height: 20px;
      stroke-width: 1.7;
    }

    .nav-item:hover,
    .nav-item:focus-visible {
      color: var(--accent-soft);
      background: var(--panel);
      outline: none;
    }

    .nav-item.active {
      color: var(--accent);
      background: rgba(217,140,95,.06);
      border-bottom-color: var(--accent);
    }

    .page-hero {
      position: relative;
      min-height: 385px;
      padding: 62px 0 48px;
      overflow: hidden;
      border-bottom: 1px solid var(--line);
      background:
        linear-gradient(90deg, rgba(20,21,19,.92) 0%, rgba(20,21,19,.69) 48%, rgba(20,21,19,.4) 100%),
        linear-gradient(135deg, #445045 0%, #293128 34%, #705847 34%, #3a3028 65%, #1a1c18 65%);
    }

    .page-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .44;
      background:
        repeating-linear-gradient(90deg, transparent 0 57px, rgba(244,241,232,.07) 57px 58px),
        linear-gradient(180deg, transparent 76%, rgba(0,0,0,.46));
      pointer-events: none;
    }

    .page-hero::after {
      content: "";
      position: absolute;
      right: 5%;
      bottom: 0;
      width: min(48vw, 620px);
      height: 240px;
      border-top: 1px solid rgba(242,196,158,.24);
      border-left: 1px solid rgba(242,196,158,.16);
      background:
        repeating-linear-gradient(90deg, transparent 0 42px, rgba(242,196,158,.22) 42px 43px),
        linear-gradient(180deg, rgba(37,39,32,.13), rgba(20,21,19,.6));
      transform: skewX(-14deg);
      pointer-events: none;
    }

    .hero-content {
      position: relative;
      z-index: 1;
      max-width: 830px;
    }

    .eyebrow,
    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--accent-soft);
      font-size: 13px;
      font-weight: 700;
    }

    .eyebrow::before,
    .section-kicker::before {
      content: "";
      width: 22px;
      height: 1px;
      background: var(--accent);
    }

    h1, h2, h3, p { margin-top: 0; }
    h1 {
      max-width: 760px;
      margin: 12px 0 15px;
      color: var(--text);
      font-size: clamp(34px, 4vw, 47px);
      line-height: 1.22;
      letter-spacing: 0;
    }

    h2 {
      margin-bottom: 10px;
      color: var(--text);
      font-size: clamp(25px, 2.5vw, 31px);
      line-height: 1.32;
      letter-spacing: 0;
    }

    h3 {
      font-size: 18px;
      line-height: 1.45;
      letter-spacing: 0;
    }

    .hero-summary {
      max-width: 700px;
      margin-bottom: 20px;
      color: var(--muted);
    }

    .channel-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 21px;
      margin-top: 20px;
      color: var(--muted);
      font-size: 14px;
    }

    .channel-meta strong {
      color: var(--text);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 14px;
    }

    .status-dot {
      width: 8px;
      height: 8px;
      display: inline-block;
      margin-right: 6px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 3px rgba(152,179,123,.13);
    }

    .filter-bar-wrap {
      position: relative;
      z-index: 3;
      margin-top: -30px;
    }

    .filter-bar {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 14px;
      background: #20221d;
      border: 1px solid #46493e;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .filter-label {
      flex: 0 0 auto;
      padding-right: 4px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .filter-scroll {
      display: flex;
      flex: 1;
      gap: 8px;
      min-width: 0;
      overflow-x: auto;
      scrollbar-width: thin;
    }

    .filter-scroll::-webkit-scrollbar { height: 5px; }
    .filter-scroll::-webkit-scrollbar-thumb { background: #55594c; border-radius: 6px; }

    .filter-chip {
      min-height: 34px;
      padding: 5px 11px;
      flex: 0 0 auto;
      color: var(--muted);
      background: #292b25;
      border: 1px solid var(--line);
      border-radius: 4px;
      font-size: 13px;
      transition: .2s ease;
    }

    .filter-chip:hover,
    .filter-chip:focus-visible {
      color: var(--accent-soft);
      border-color: rgba(242,196,158,.55);
      outline: none;
    }

    .filter-chip.active {
      color: #1b1916;
      background: var(--accent);
      border-color: var(--accent);
      font-weight: 800;
    }

    .filter-select {
      height: 36px;
      flex: 0 0 auto;
      padding: 0 30px 0 10px;
      color: var(--text);
      background: #292b25;
      border: 1px solid var(--line);
      border-radius: 4px;
      outline: none;
      font-size: 13px;
    }

    .filter-select:focus {
      border-color: var(--accent-soft);
      box-shadow: 0 0 0 3px rgba(242,196,158,.1);
    }

    .section {
      padding: 82px 0;
      border-top: 1px solid rgba(56,59,51,.76);
    }

    .section-dark {
      background: rgba(29,31,27,.74);
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 25px;
      margin-bottom: 27px;
    }

    .section-head p {
      max-width: 580px;
      margin: 0;
      color: var(--muted);
      font-size: 15px;
    }

    .feature-card {
      display: grid;
      grid-template-columns: minmax(300px, 1.15fr) minmax(0, 1fr);
      min-height: 320px;
      overflow: hidden;
      background: var(--layer);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow);
      transition: .22s ease;
    }

    .feature-card:hover {
      border-color: rgba(242,196,158,.58);
      transform: translateY(-2px);
    }

    .feature-cover,
    .cover {
      position: relative;
      overflow: hidden;
      background: #30352c;
    }

    .feature-cover::before,
    .cover::before {
      content: "";
      position: absolute;
      inset: 0;
      transition: transform .24s ease;
    }

    .feature-card:hover .feature-cover::before,
    .media-card:hover .cover::before,
    .compact-card:hover .compact-cover::before {
      transform: scale(1.05);
    }

    .cover-a::before {
      background:
        linear-gradient(150deg, transparent 50%, rgba(0,0,0,.5) 50%),
        linear-gradient(135deg, #6b5e4b 0 22%, #3b493a 22% 52%, #92634e 52% 68%, #242721 68%);
    }

    .cover-b::before {
      background:
        repeating-linear-gradient(90deg, rgba(244,241,232,.08) 0 1px, transparent 1px 38px),
        linear-gradient(125deg, #303c31 0 32%, #7a604d 32% 56%, #4b4c38 56% 76%, #25251f 76%);
    }

    .cover-c::before {
      background:
        linear-gradient(45deg, transparent 47%, rgba(242,196,158,.23) 48% 52%, transparent 53%),
        linear-gradient(135deg, #4b5745 0 40%, #765744 40% 60%, #2e3029 60%);
    }

    .cover-d::before {
      background:
        repeating-linear-gradient(0deg, transparent 0 24px, rgba(244,241,232,.08) 24px 25px),
        linear-gradient(145deg, #675b47 0 25%, #313b32 25% 58%, #855e4d 58% 72%, #20221d 72%);
    }

    .cover-e::before {
      background:
        radial-gradient(circle at 70% 33%, rgba(242,196,158,.22) 0 10%, transparent 11%),
        linear-gradient(130deg, #2b332b 0 35%, #83624c 35% 58%, #4e523d 58% 76%, #292b25 76%);
    }

    .feature-cover::after,
    .cover::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.67));
      pointer-events: none;
    }

    .corner-tag,
    .duration,
    .subtitle-label {
      position: absolute;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      line-height: 1;
      border-radius: 4px;
      font-size: 12px;
      white-space: nowrap;
    }

    .corner-tag {
      top: 12px;
      left: 12px;
      padding: 6px 8px;
      color: var(--accent-soft);
      background: rgba(20,21,19,.79);
      border: 1px solid rgba(242,196,158,.26);
    }

    .duration {
      right: 10px;
      bottom: 10px;
      padding: 6px 7px;
      color: #1a1916;
      background: var(--accent-soft);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-weight: 800;
    }

    .subtitle-label {
      left: 10px;
      bottom: 10px;
      padding: 5px 7px;
      color: #e5ead9;
      background: rgba(37,39,32,.88);
      border: 1px solid rgba(152,179,123,.42);
    }

    .feature-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 35px;
    }

    .feature-copy h2 {
      margin-top: 10px;
      margin-bottom: 12px;
      font-size: 28px;
    }

    .feature-copy p {
      max-width: 520px;
      margin-bottom: 22px;
      color: var(--muted);
      font-size: 15px;
    }

    .info-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 18px;
      margin-bottom: 23px;
      color: var(--muted);
      font-size: 13px;
    }

    .info-row span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .info-row svg { width: 15px; height: 15px; color: var(--green); }

    .btn {
      min-height: 44px;
      padding: 10px 17px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 1px solid transparent;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 800;
      transition: .2s ease;
    }

    .btn svg { width: 17px; height: 17px; }
    .btn-primary { color: #1a1815; background: var(--accent); }
    .btn-primary:hover { background: var(--accent-soft); transform: translateY(-1px); }
    .btn-secondary { color: var(--text); background: rgba(37,39,32,.74); border-color: var(--line); }
    .btn-secondary:hover { background: var(--layer); border-color: rgba(242,196,158,.65); transform: translateY(-1px); }

    .btn:focus-visible,
    .media-card:focus-visible,
    .faq-button:focus-visible,
    .pagination-btn:focus-visible {
      outline: 3px solid rgba(242,196,158,.62);
      outline-offset: 3px;
    }

    .content-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 17px;
      margin-top: 23px;
    }

    .media-card {
      display: block;
      overflow: hidden;
      background: var(--layer);
      border: 1px solid var(--line);
      border-radius: 7px;
      box-shadow: 0 8px 18px rgba(0,0,0,.12);
      transition: .22s ease;
    }

    .media-card:hover {
      border-color: rgba(242,196,158,.55);
      transform: translateY(-2px);
    }

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

    .progress {
      position: absolute;
      z-index: 3;
      bottom: 0;
      left: 0;
      height: 3px;
      background: var(--accent);
    }

    .card-copy { padding: 13px 13px 15px; }

    .card-copy h3 {
      display: -webkit-box;
      margin-bottom: 7px;
      overflow: hidden;
      color: var(--text);
      font-size: 17px;
      line-height: 1.45;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .card-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      overflow: hidden;
      color: var(--muted);
      font-size: 12px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .card-meta b {
      color: var(--green);
      font-weight: 700;
    }

    .card-summary {
      display: -webkit-box;
      margin: 8px 0 0;
      overflow: hidden;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.7;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .notice-band {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
      margin: 37px 0;
      padding: 21px 0;
      border-top: 1px solid rgba(242,196,158,.25);
      border-bottom: 1px solid rgba(242,196,158,.25);
    }

    .notice-band h3 {
      margin: 0 0 3px;
      color: var(--accent-soft);
      font-size: 17px;
    }

    .notice-band p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .text-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex: 0 0 auto;
      color: var(--accent-soft);
      font-size: 14px;
      font-weight: 800;
      transition: color .2s ease;
    }

    .text-link:hover { color: var(--text); }
    .text-link svg { width: 16px; height: 16px; }

    .pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 43px;
    }

    .pagination-btn {
      min-width: 44px;
      min-height: 42px;
      padding: 8px 13px;
      color: var(--muted);
      background: var(--layer);
      border: 1px solid var(--line);
      border-radius: 5px;
      font-size: 14px;
      font-weight: 700;
      transition: .2s ease;
    }

    .pagination-btn:hover {
      color: var(--accent-soft);
      border-color: rgba(242,196,158,.55);
      transform: translateY(-1px);
    }

    .pagination-btn.active {
      color: #191714;
      background: var(--accent);
      border-color: var(--accent);
    }

    .pagination-btn.loading {
      color: var(--accent-soft);
      cursor: wait;
    }

    .pagination-btn:disabled {
      color: #71736b;
      background: #22231f;
      border-color: #30322d;
      cursor: default;
      transform: none;
    }

    .faq-layout {
      display: grid;
      grid-template-columns: minmax(260px, .75fr) minmax(0, 1.35fr);
      gap: 72px;
      align-items: start;
    }

    .faq-side p {
      color: var(--muted);
      font-size: 15px;
    }

    .faq-list {
      border-top: 1px solid var(--line);
    }

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

    .faq-button {
      width: 100%;
      min-height: 69px;
      padding: 18px 3px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      color: var(--text);
      background: transparent;
      border: 0;
      text-align: left;
      font-weight: 800;
      transition: color .2s ease;
    }

    .faq-button:hover { color: var(--accent-soft); }

    .faq-symbol {
      position: relative;
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
    }

    .faq-symbol::before,
    .faq-symbol::after {
      content: "";
      position: absolute;
      top: 8px;
      left: 1px;
      width: 16px;
      height: 1px;
      background: currentColor;
      transition: transform .2s ease;
    }

    .faq-symbol::after { transform: rotate(90deg); }
    .faq-item.open .faq-symbol::after { transform: rotate(0); }

    .faq-answer {
      display: none;
      max-width: 800px;
      padding: 0 36px 22px 3px;
      color: var(--muted);
      font-size: 15px;
    }

    .faq-item.open .faq-answer { display: block; }
    .faq-answer p { margin: 0; }

    .cta {
      position: relative;
      overflow: hidden;
      background: #1c1e1a;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .cta::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .5;
      background:
        repeating-linear-gradient(90deg, transparent 0 56px, rgba(242,196,158,.13) 56px 57px),
        linear-gradient(180deg, transparent 0 88%, rgba(0,0,0,.3) 88%);
      pointer-events: none;
    }

    .cta-inner {
      position: relative;
      z-index: 1;
      min-height: 280px;
      padding: 63px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 34px;
    }

    .cta-copy { max-width: 700px; }
    .cta-copy h2 { margin-bottom: 10px; }
    .cta-copy p { margin-bottom: 0; color: var(--muted); font-size: 15px; }
    .cta-actions { display: flex; gap: 10px; flex-wrap: wrap; flex: 0 0 auto; }

    .footer {
      padding: 48px 0 25px;
      background: #10110f;
      border-top: 1px solid var(--line);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.55fr 1fr 1fr;
      gap: 45px;
    }

    .footer .brand { margin-bottom: 5px; }
    .footer p { max-width: 410px; color: var(--muted); font-size: 14px; }
    .footer h3 { margin: 0 0 11px; color: var(--text); font-size: 15px; }

    .footer a:not(.brand) {
      display: block;
      width: fit-content;
      margin: 7px 0;
      color: var(--muted);
      font-size: 14px;
      transition: color .2s ease;
    }

    .footer a:not(.brand):hover,
    .footer a:not(.brand):focus-visible {
      color: var(--accent-soft);
      outline: none;
    }

    .copyright {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      margin-top: 38px;
      padding-top: 18px;
      color: #85877e;
      border-top: 1px solid var(--line);
      font-size: 12px;
    }

    @media (max-width: 1024px) {
      .content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .faq-layout { gap: 42px; }
      .searchbox { width: 205px; }
    }

    @media (max-width: 768px) {
      .container { width: min(100% - 32px, 1280px); }
      .brand-row { min-height: 65px; gap: 12px; }
      .brand { font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
      .brand-mark { width: 31px; height: 31px; }
      .searchbox { width: 42px; }
      .searchbox input { width: 42px; padding: 0; color: transparent; cursor: pointer; }
      .searchbox input:focus { width: min(54vw, 250px); padding: 0 35px 0 39px; color: var(--text); }
      .clear-search { display: none; }
      .age-button span { display: none; }
      .age-button { width: 40px; padding: 0; justify-content: center; }
      .icon-nav-inner { width: max-content; min-width: 100%; }
      .icon-nav { overflow-x: auto; }
      .nav-item { width: 125px; min-height: 64px; }
      .page-hero { min-height: 350px; padding: 46px 0 52px; }
      .page-hero::after { right: -33%; width: 90%; opacity: .52; }
      h1 { font-size: 34px; }
      .filter-bar-wrap { margin-top: -24px; }
      .filter-bar { padding: 11px; gap: 8px; }
      .filter-label { display: none; }
      .filter-select { display: none; }
      .section { padding: 63px 0; }
      .section-head { display: block; margin-bottom: 22px; }
      .section-head p { margin-top: 9px; }
      .feature-card { grid-template-columns: 1fr; }
      .feature-cover { min-height: 220px; }
      .feature-copy { padding: 25px 22px; }
      .feature-copy h2 { font-size: 24px; }
      .content-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
      .notice-band { align-items: flex-start; flex-direction: column; gap: 13px; }
      .pagination { flex-wrap: wrap; }
      .faq-layout { grid-template-columns: 1fr; gap: 20px; }
      .cta-inner { min-height: auto; padding: 54px 0; align-items: flex-start; flex-direction: column; }
      .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 22px; }
      .footer-grid > div:first-child { grid-column: 1 / -1; }
      .copyright { align-items: flex-start; flex-direction: column; gap: 5px; }
    }

    @media (max-width: 520px) {
      body { font-size: 15px; }
      .container { width: calc(100% - 32px); }
      .brand { max-width: 190px; }
      h1 { font-size: 31px; }
      .hero-summary { font-size: 15px; }
      .channel-meta { gap: 7px 14px; }
      .feature-cover { min-height: 194px; }
      .feature-copy { padding: 22px 18px; }
      .card-copy h3 { font-size: 16px; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-grid > div:first-child { grid-column: auto; }
      .cta-actions { width: 100%; }
      .cta-actions .btn { flex: 1; }
    }