/* roulang page: index */
:root {
            --ink: #101112;
            --ink-2: #17191b;
            --panel: #202326;
            --panel-2: #292d30;
            --line: #3b4143;
            --paper: #f1f0e9;
            --muted: #a9ada7;
            --soft: #d2d4cc;
            --acid: #c7f36a;
            --acid-dark: #8cae37;
            --violet: #4d465a;
            --radius: 12px;
            --shadow: 0 18px 50px rgba(0,0,0,.18);
            --ease: 220ms ease;
        }
        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            background: var(--ink);
            color: var(--paper);
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
            line-height: 1.7;
            font-size: 15px;
        }
        a { color: inherit; text-decoration: none; transition: color var(--ease), background var(--ease), border-color var(--ease), transform var(--ease); }
        a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
            outline: 3px solid var(--acid);
            outline-offset: 3px;
        }
        img { max-width: 100%; display: block; }
        button, input, select, textarea { font: inherit; }
        .container { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }
        .site-header { position: sticky; top: 0; z-index: 20; background: rgba(16,17,18,.96); border-bottom: 1px solid var(--line); }
        .brand-row { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
        .logo { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: -.04em; font-size: 20px; white-space: nowrap; }
        .logo-mark { width: 12px; height: 30px; background: var(--acid); display: inline-block; transform: skew(-14deg); }
        .header-note { color: var(--muted); font-size: 13px; letter-spacing: .04em; }
        .header-actions { display: flex; align-items: center; gap: 12px; }
        .mini-link { color: var(--soft); border: 1px solid var(--line); border-radius: 7px; padding: 7px 13px; font-size: 13px; }
        .mini-link:hover { color: var(--acid); border-color: var(--acid-dark); }
        .channel-row { border-top: 1px solid rgba(59,65,67,.65); overflow-x: auto; scrollbar-width: none; }
        .channel-row::-webkit-scrollbar { display: none; }
        .channel-nav { display: flex; gap: 8px; min-width: max-content; }
        .channel-link { position: relative; display: block; padding: 12px 16px 13px; color: var(--muted); font-weight: 650; }
        .channel-link::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; background: transparent; }
        .channel-link:hover, .channel-link.active { color: var(--paper); }
        .channel-link.active::after { background: var(--acid); }
        .hero { padding: 88px 0 64px; position: relative; overflow: hidden; }
        .hero::before { content: "99"; position: absolute; right: -20px; top: 20px; font: 900 280px/1 Georgia, serif; color: rgba(77,70,90,.22); pointer-events: none; }
        .hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 72px; align-items: end; position: relative; z-index: 1; }
        .eyebrow, .section-index { color: var(--acid); text-transform: uppercase; letter-spacing: .16em; font: 700 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
        h1, h2, h3, p { margin-top: 0; }
        h1 { max-width: 780px; margin: 20px 0 24px; font-size: clamp(42px, 7vw, 84px); line-height: 1.04; letter-spacing: -.075em; font-weight: 850; }
        .hero-copy { max-width: 650px; color: var(--soft); font-size: 18px; }
        .hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
        .button { border: 1px solid transparent; border-radius: 7px; padding: 12px 20px; font-weight: 750; cursor: pointer; display: inline-flex; justify-content: center; align-items: center; gap: 8px; }
        .button.primary { background: var(--acid); color: var(--ink); }
        .button.primary:hover { background: #e2ff9a; transform: translateY(-2px); }
        .button.secondary { border-color: var(--line); color: var(--paper); background: transparent; }
        .button.secondary:hover { border-color: var(--acid); color: var(--acid); }
        .hero-board { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--acid); padding: 24px; box-shadow: var(--shadow); }
        .board-head { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; margin-bottom: 22px; }
        .board-title { font-size: 26px; line-height: 1.25; font-weight: 800; margin-bottom: 24px; }
        .signal-list { list-style: none; padding: 0; margin: 0; }
        .signal-list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
        .signal-name { color: var(--soft); }
        .signal-state { color: var(--acid); font-size: 12px; white-space: nowrap; }
        .board-foot { margin-top: 20px; color: var(--muted); font-size: 12px; }
        .section { padding: 76px 0; border-top: 1px solid var(--line); }
        .section-heading { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 32px; }
        h2 { font-size: clamp(30px, 4vw, 52px); letter-spacing: -.06em; line-height: 1.1; margin: 10px 0 0; }
        .section-intro { max-width: 480px; color: var(--muted); margin: 0; }
        .metrics { display: grid; grid-template-columns: 2fr 1.2fr 1.2fr 1.4fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
        .metric { background: var(--panel); padding: 28px; min-height: 148px; }
        .metric:first-child { background: var(--acid); color: var(--ink); }
        .metric-number { font: 800 42px/1 ui-monospace, monospace; letter-spacing: -.08em; margin-bottom: 14px; }
        .metric-label { font-weight: 750; }
        .metric-note { color: var(--muted); font-size: 12px; margin-top: 6px; }
        .metric:first-child .metric-note { color: #394222; }
        .matrix { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
        .matrix-main { min-height: 320px; background: var(--panel-2); padding: 32px; border: 1px solid var(--line); position: relative; }
        .matrix-main::after { content: "→"; position: absolute; right: 30px; bottom: 22px; color: var(--acid); font-size: 32px; }
        .matrix-side { display: grid; gap: 16px; }
        .matrix-card { background: var(--panel); border: 1px solid var(--line); padding: 25px; min-height: 152px; }
        .matrix-main:hover, .matrix-card:hover { border-color: var(--acid-dark); transform: translateY(-3px); }
        .card-no { color: var(--acid); font: 700 12px ui-monospace, monospace; }
        .matrix h3 { font-size: 25px; margin: 20px 0 9px; }
        .matrix p { color: var(--muted); margin-bottom: 20px; }
        .text-link { color: var(--acid); font-weight: 750; }
        .text-link:hover { color: #e2ff9a; }
        .comparison { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
        .compare-panel { padding: 34px; min-height: 280px; }
        .compare-panel:first-child { background: #1a1c1e; }
        .compare-panel:last-child { background: var(--violet); border-left: 1px solid var(--line); }
        .compare-tag { color: var(--muted); font-size: 12px; letter-spacing: .1em; }
        .compare-panel:last-child .compare-tag { color: var(--acid); }
        .compare-title { font-size: 27px; font-weight: 800; margin: 18px 0; }
        .compare-list { list-style: none; padding: 0; margin: 0; }
        .compare-list li { border-top: 1px solid var(--line); padding: 12px 0; color: var(--soft); }
        .compare-list li::before { content: "—"; color: var(--acid); margin-right: 10px; }
        .faq-wrap { max-width: 860px; }
        .accordion { background: transparent; margin: 0; }
        .accordion-title { background: var(--panel); color: var(--paper); border: 1px solid var(--line); margin-bottom: 8px; padding: 18px 22px; font-weight: 750; }
        .accordion-title:hover, .accordion-item.is-active .accordion-title { color: var(--acid); border-color: var(--acid-dark); }
        .accordion-content { background: var(--panel-2); color: var(--soft); border: 1px solid var(--line); border-top: 0; margin-top: -8px; margin-bottom: 8px; padding: 20px 22px; }
        .cta { background: var(--acid); color: var(--ink); padding: 48px; border-radius: var(--radius); }
        .cta-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
        .cta h2 { color: var(--ink); }
        .cta-copy { color: #3d4825; margin-top: 16px; }
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
        label { color: #37421f; font-weight: 750; font-size: 13px; display: block; margin-bottom: 6px; }
        input, select, textarea { width: 100%; border: 1px solid #8da74d; background: #e4f5ae; color: var(--ink); border-radius: 6px; padding: 11px 13px; }
        textarea { min-height: 94px; resize: vertical; }
        .field-full { grid-column: 1 / -1; }
        .form-help { font-size: 12px; color: #53632f; margin: 10px 0 0; }
        .cta .button.primary { background: var(--ink); color: var(--acid); margin-top: 16px; }
        .cta .button.primary:hover { background: #2b3020; }
        .site-footer { background: #0b0c0d; border-top: 1px solid var(--line); padding: 44px 0 24px; }
        .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding-bottom: 38px; }
        .footer-title { color: var(--muted); font-size: 12px; margin-bottom: 14px; }
        .footer-links { list-style: none; padding: 0; margin: 0; }
        .footer-links li { margin: 8px 0; color: var(--soft); }
        .footer-links a:hover { color: var(--acid); }
        .footer-note { color: var(--muted); max-width: 360px; font-size: 13px; margin-top: 18px; }
        .copyright { border-top: 1px solid var(--line); padding-top: 20px; color: #747a74; font-size: 12px; display: flex; justify-content: space-between; gap: 20px; }
        @media (max-width: 1024px) {
            .hero-grid { gap: 38px; }
            .metrics { grid-template-columns: 1fr 1fr; }
            .metric:first-child { grid-column: span 2; }
        }
        @media (max-width: 768px) {
            .container { width: min(100% - 32px, 620px); }
            .header-note { display: none; }
            .brand-row { min-height: 62px; }
            .hero { padding: 58px 0 48px; }
            .hero-grid, .matrix, .comparison, .cta-grid, .footer-grid { grid-template-columns: 1fr; }
            .hero::before { font-size: 180px; top: 35px; }
            .section { padding: 58px 0; }
            .section-heading { display: block; }
            .section-intro { margin-top: 18px; }
            .compare-panel:last-child { border-left: 0; border-top: 1px solid var(--line); }
            .cta { padding: 30px 24px; }
            .footer-grid { gap: 28px; }
        }
        @media (max-width: 520px) {
            h1 { font-size: 43px; }
            .logo { font-size: 16px; }
            .header-actions .mini-link:first-child { display: none; }
            .metrics { grid-template-columns: 1fr 1fr; }
            .metric:first-child { grid-column: span 2; }
            .metric { padding: 20px 16px; min-height: 128px; }
            .metric-number { font-size: 31px; }
            .form-grid { grid-template-columns: 1fr; }
            .field-full { grid-column: auto; }
            .copyright { display: block; }
            .copyright span { display: block; margin-top: 8px; }
        }

/* roulang page: category1 */
:root {
      --ink:#101112;
      --ink-2:#17191b;
      --panel:#202326;
      --panel-2:#292d30;
      --line:#3b4143;
      --paper:#f1f0e9;
      --muted:#a9ada7;
      --soft:#d2d4cc;
      --acid:#c7f36a;
      --acid-dark:#8cae37;
      --violet:#4d465a;
      --radius:12px;
      --shadow:0 18px 50px rgba(0,0,0,.18);
      --ease:220ms ease;
    }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body {
      margin:0;
      background:var(--ink);
      color:var(--paper);
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
      line-height:1.7;
      font-size:15px;
    }
    a { color:inherit; text-decoration:none; transition:color var(--ease),background var(--ease),border-color var(--ease),transform var(--ease); }
    a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
      outline:3px solid var(--acid); outline-offset:3px;
    }
    img { max-width:100%; display:block; }
    button,input,select,textarea { font:inherit; }
    button { cursor:pointer; }
    .container { width:min(1240px,calc(100% - 48px)); margin:0 auto; }
    .site-header {
      position:sticky; top:0; z-index:20; background:rgba(16,17,18,.96);
      border-bottom:1px solid var(--line); backdrop-filter:blur(10px);
    }
    .brand-row { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
    .logo { display:inline-flex; align-items:center; gap:12px; font-weight:800; letter-spacing:-.04em; font-size:20px; white-space:nowrap; }
    .logo-mark { width:12px; height:30px; background:var(--acid); display:inline-block; transform:skew(-14deg); }
    .header-note { color:var(--muted); font-size:13px; letter-spacing:.04em; }
    .header-actions { display:flex; align-items:center; gap:12px; }
    .mini-link { color:var(--soft); font-size:13px; padding:8px 10px; border-bottom:1px solid transparent; }
    .mini-link:hover { color:var(--acid); border-color:var(--acid); }
    .channel-row { border-top:1px solid rgba(59,65,67,.65); overflow-x:auto; scrollbar-width:none; }
    .channel-row::-webkit-scrollbar { display:none; }
    .channel-nav { display:flex; gap:8px; min-width:max-content; }
    .channel-link {
      display:block; padding:13px 19px 12px; color:var(--muted); font-weight:700;
      border-bottom:3px solid transparent; position:relative;
    }
    .channel-link:hover { color:var(--paper); background:rgba(199,243,106,.06); }
    .channel-link.active { color:var(--acid); border-color:var(--acid); }
    .page-intro { padding:78px 0 38px; border-bottom:1px solid var(--line); }
    .intro-grid { display:grid; grid-template-columns:8fr 4fr; gap:64px; align-items:end; }
    .eyebrow,.section-index {
      color:var(--acid); text-transform:uppercase; letter-spacing:.16em;
      font:700 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
    }
    h1,h2,h3,p { margin-top:0; }
    h1 {
      margin:16px 0 20px; font-size:clamp(42px,6vw,76px);
      line-height:1.08; letter-spacing:-.075em; font-weight:850; max-width:850px;
    }
    .intro-copy { max-width:700px; color:var(--soft); font-size:18px; }
    .intro-note { border-left:2px solid var(--acid); padding:4px 0 4px 20px; color:var(--muted); }
    .intro-note strong { display:block; color:var(--paper); font-size:28px; line-height:1.2; margin-bottom:7px; }
    .filter-bar {
      display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:24px 0;
      border-bottom:1px solid var(--line);
    }
    .filter-label { color:var(--muted); font-size:13px; margin-right:5px; }
    .filter-btn,.sort-select {
      color:var(--soft); background:var(--panel); border:1px solid var(--line);
      border-radius:7px; padding:9px 14px; transition:all var(--ease);
    }
    .filter-btn:hover,.filter-btn.selected,.sort-select:focus { border-color:var(--acid); color:var(--acid); }
    .sort-select { margin-left:auto; min-width:140px; }
    .content-section { padding:58px 0 82px; }
    .section-heading { display:flex; justify-content:space-between; align-items:end; gap:28px; margin-bottom:27px; }
    .section-heading h2 { font-size:clamp(27px,3vw,40px); line-height:1.15; letter-spacing:-.05em; margin:10px 0 0; }
    .section-intro { max-width:430px; color:var(--muted); margin:0; }
    .feature-layout { display:grid; grid-template-columns:7fr 5fr; gap:18px; }
    .feature-card,.stream-item,.data-strip,.related-box,.notice-box {
      background:var(--panel); border:1px solid var(--line);
    }
    .feature-card { padding:28px; min-height:370px; position:relative; overflow:hidden; border-top:3px solid var(--acid); }
    .feature-card::after {
      content:"01"; position:absolute; right:25px; bottom:-17px; color:rgba(77,70,90,.55);
      font:900 130px/1 Georgia,serif; pointer-events:none;
    }
    .cover-block {
      height:145px; background:linear-gradient(135deg,var(--violet),#25272a 56%,#353c31);
      border:1px solid #62606c; margin:-28px -28px 25px; position:relative;
      display:flex; align-items:flex-end; padding:18px;
    }
    .cover-block span { color:var(--acid); font:700 12px ui-monospace,monospace; letter-spacing:.12em; }
    .status { display:inline-flex; align-items:center; gap:7px; color:var(--acid); font-size:12px; font-weight:750; }
    .status::before { content:""; width:7px; height:7px; background:var(--acid); border-radius:50%; }
    .feature-card h3 { font-size:29px; line-height:1.2; letter-spacing:-.045em; margin:14px 0 12px; }
    .feature-card p { color:var(--muted); max-width:600px; }
    .tag-row { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
    .tag { display:inline-block; padding:4px 9px; border:1px solid var(--line); color:var(--soft); font-size:12px; border-radius:5px; }
    .tag.acid { color:var(--acid); border-color:var(--acid-dark); }
    .text-link { color:var(--acid); font-weight:750; }
    .text-link:hover { color:#e2ff9a; }
    .stream-list { display:flex; flex-direction:column; gap:10px; }
    .stream-item {
      min-height:112px; padding:17px 19px; display:grid; grid-template-columns:74px 1fr auto;
      gap:15px; align-items:center; transition:all var(--ease);
    }
    .stream-item:hover { transform:translateX(4px); border-left:3px solid var(--acid); background:var(--panel-2); }
    .thumb {
      height:74px; background:linear-gradient(145deg,#45414e,#282c2e);
      border:1px solid #55595a; display:flex; align-items:flex-end; padding:7px;
      color:var(--acid); font:700 10px ui-monospace,monospace;
    }
    .stream-item h3 { font-size:17px; line-height:1.3; margin:0 0 7px; }
    .stream-meta { color:var(--muted); font-size:12px; }
    .arrow { color:var(--acid); font-size:22px; }
    .data-strip {
      display:grid; grid-template-columns:2fr 1fr 1fr 1fr; margin-top:18px;
      background:var(--ink-2);
    }
    .data-cell { padding:21px 24px; border-right:1px solid var(--line); }
    .data-cell:last-child { border-right:0; }
    .data-number { color:var(--acid); font:800 29px/1.1 ui-monospace,SFMono-Regular,monospace; }
    .data-label { color:var(--soft); display:block; margin-top:6px; }
    .data-help { color:var(--muted); font-size:12px; }
    .split-section { padding:0 0 78px; }
    .split-grid { display:grid; grid-template-columns:5fr 7fr; gap:18px; }
    .notice-box { padding:27px; background:#24252a; }
    .notice-box h2 { font-size:29px; line-height:1.2; letter-spacing:-.04em; }
    .notice-box p { color:var(--muted); }
    .state-list { list-style:none; padding:0; margin:22px 0 0; }
    .state-list li { padding:12px 0; border-top:1px solid var(--line); color:var(--soft); }
    .state-list li::before { content:"—"; color:var(--acid); margin-right:10px; }
    .related-box { padding:28px; }
    .related-box h2 { font-size:25px; margin-bottom:19px; }
    .related-link {
      display:flex; justify-content:space-between; padding:15px 0; border-top:1px solid var(--line);
      color:var(--soft);
    }
    .related-link:hover { color:var(--acid); padding-left:5px; }
    .faq-section { padding:0 0 76px; }
    .faq-wrap { max-width:860px; }
    .accordion { background:transparent; }
    .accordion-item { background:transparent; border:0; margin-bottom:8px; }
    .accordion-title {
      background:var(--panel); color:var(--paper); border:1px solid var(--line);
      padding:18px 22px; font-weight:750; font-size:16px;
    }
    .accordion-title:hover,.accordion-item.is-active .accordion-title { color:var(--acid); border-color:var(--acid-dark); }
    .accordion-content { background:var(--panel-2); border:1px solid var(--line); border-top:0; color:var(--soft); padding:17px 22px; }
    .site-footer { background:#0b0c0d; border-top:1px solid var(--line); padding:44px 0 24px; }
    .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; padding-bottom:38px; }
    .footer-note { color:var(--muted); max-width:380px; margin:18px 0 0; font-size:13px; }
    .footer-title { color:var(--muted); font-size:12px; margin-bottom:14px; }
    .footer-links { list-style:none; padding:0; margin:0; }
    .footer-links li { margin-bottom:8px; }
    .footer-links a { color:var(--soft); font-size:13px; }
    .footer-links a:hover { color:var(--acid); }
    .copyright {
      display:flex; justify-content:space-between; gap:20px; padding-top:19px;
      border-top:1px solid var(--line); color:#747a75; font-size:12px;
    }
    @media (max-width:1024px) {
      .intro-grid,.feature-layout { grid-template-columns:1fr; gap:30px; }
      .intro-note { max-width:430px; }
      .feature-card { min-height:0; }
    }
    @media (max-width:768px) {
      .container { width:min(100% - 32px,620px); }
      .brand-row { min-height:64px; gap:12px; }
      .header-note { display:none; }
      .header-actions { gap:3px; }
      .mini-link { font-size:12px; padding:7px 5px; }
      .page-intro { padding:55px 0 30px; }
      h1 { font-size:clamp(38px,11vw,60px); }
      .intro-copy { font-size:16px; }
      .filter-bar { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
      .filter-bar::-webkit-scrollbar { display:none; }
      .filter-label { flex:0 0 auto; }
      .filter-btn,.sort-select { flex:0 0 auto; }
      .sort-select { margin-left:0; }
      .content-section { padding:42px 0 60px; }
      .section-heading { display:block; }
      .section-intro { margin-top:15px; }
      .data-strip { grid-template-columns:1fr 1fr; }
      .data-cell { border-bottom:1px solid var(--line); }
      .data-cell:nth-child(2) { border-right:0; }
      .split-grid { grid-template-columns:1fr; }
      .footer-grid { grid-template-columns:1fr 1fr; gap:28px; }
      .footer-grid>div:first-child { grid-column:1/-1; }
    }
    @media (max-width:520px) {
      .container { width:calc(100% - 28px); }
      .logo { font-size:17px; gap:9px; }
      .logo-mark { width:9px; height:25px; }
      .header-actions .mini-link:first-child { display:none; }
      .channel-link { padding:12px 15px 10px; }
      h1 { font-size:40px; }
      .feature-card { padding:22px; }
      .cover-block { margin:-22px -22px 21px; }
      .stream-item { grid-template-columns:58px 1fr auto; gap:11px; padding:13px; }
      .thumb { height:62px; }
      .stream-item h3 { font-size:15px; }
      .stream-meta { font-size:11px; }
      .data-cell { padding:17px 15px; }
      .data-number { font-size:23px; }
      .copyright { display:block; }
      .copyright span { display:block; margin-top:7px; }
    }