/* roulang page: index */
:root {
            --green: #123d32;
            --green-dark: #0c2b24;
            --green-mid: #1e5948;
            --lime: #d7f34a;
            --paper: #f5f5ef;
            --white: #fff;
            --ink: #151816;
            --muted: #69716b;
            --line: #d8ddd5;
            --coral: #e97d5a;
            --radius: 7px;
            --shadow: 0 12px 34px rgba(17, 34, 27, .15);
            --container: 1240px;
            --header-height: 76px;
            --bar-height: 74px;
            font-synthesis: none;
        }
        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; scroll-padding-top: 90px; }
        body {
            margin: 0;
            padding-bottom: var(--bar-height);
            background: var(--paper);
            color: var(--ink);
            font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
            font-size: 15px;
            line-height: 1.7;
            letter-spacing: 0;
        }
        body.menu-open { overflow: hidden; }
        a { color: inherit; text-decoration: none; }
        img { display: block; max-width: 100%; }
        button, input { font: inherit; }
        button { color: inherit; }
        button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible {
            outline: 3px solid var(--lime);
            outline-offset: 3px;
        }
        .container { width: min(var(--container), calc(100% - 64px)); margin-inline: auto; }
        .section { padding: 82px 0; }
        .section-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 34px; }
        .section-head h2 { max-width: 760px; margin: 0; font-size: 32px; line-height: 1.2; font-weight: 800; }
        .section-head p { max-width: 590px; margin: 12px 0 0; color: var(--muted); font-size: 15px; }
        .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 13px; color: var(--green-mid); font-size: 12px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
        .eyebrow::before { content: ""; width: 26px; height: 3px; background: var(--lime); }
        .text-link { display: inline-flex; align-items: center; gap: 9px; color: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; }
        .text-link::after { content: "→"; transition: transform .18s; }
        .text-link:hover::after { transform: translateX(4px); }
        .icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
        .header {
            position: absolute; z-index: 50; inset: 0 0 auto; height: var(--header-height);
            color: #fff; border-bottom: 1px solid rgba(255,255,255,.16); transition: background .2s, border-color .2s;
        }
        .header.scrolled { position: fixed; background: var(--green-dark); border-bottom: 2px solid var(--lime); }
        .nav-wrap { height: 100%; display: flex; align-items: center; gap: 32px; }
        .brand { display: inline-flex; align-items: center; gap: 11px; min-width: 250px; font-weight: 800; font-size: 15px; line-height: 1.25; }
        .brand-mark { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; background: var(--lime); color: var(--green-dark); font: 900 16px/1 monospace; border-radius: 4px; }
        .brand-name { max-width: 188px; }
        .nav-links { display: flex; align-items: center; justify-content: center; gap: clamp(15px, 2vw, 27px); margin-left: auto; }
        .nav-links a { position: relative; padding: 28px 0 24px; color: rgba(255,255,255,.82); font-size: 13px; font-weight: 700; white-space: nowrap; transition: color .18s; }
        .nav-links a::after { position: absolute; right: 0; bottom: 17px; left: 0; height: 2px; content: ""; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .18s; }
        .nav-links a:hover, .nav-links a.active { color: var(--lime); }
        .nav-links a.active::after, .nav-links a:hover::after { transform: scaleX(1); }
        .nav-actions { display: flex; align-items: center; gap: 10px; }
        .icon-button, .menu-button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 4px; background: transparent; color: #fff; cursor: pointer; transition: background .18s, color .18s, border .18s; }
        .icon-button:hover, .menu-button:hover { border-color: var(--lime); color: var(--lime); }
        .button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 19px; border: 1px solid transparent; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 800; transition: background .18s, color .18s, border-color .18s, transform .18s; }
        .button:hover { transform: translateY(-2px); }
        .button-primary { background: var(--lime); color: var(--green-dark); }
        .button-primary:hover { background: #fff; border-color: var(--lime); color: var(--green-dark); }
        .button-secondary { border-color: rgba(255,255,255,.5); background: rgba(4,17,13,.18); color: #fff; }
        .button-secondary:hover { border-color: var(--lime); color: var(--lime); }
        .menu-button { display: none; }
        .drawer-backdrop { display: none; }
        .search-panel { position: absolute; top: 86px; right: max(32px, calc((100vw - var(--container))/2)); width: min(370px, calc(100vw - 32px)); padding: 14px; border: 1px solid rgba(255,255,255,.16); background: var(--green-dark); box-shadow: var(--shadow); }
        .search-panel[hidden] { display: none; }
        .search-form { display: flex; gap: 8px; }
        .search-form input { min-width: 0; flex: 1; padding: 11px 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 4px; background: rgba(255,255,255,.08); color: #fff; }
        .search-form input::placeholder { color: rgba(255,255,255,.62); }
        .search-form button { padding: 0 14px; border: 0; border-radius: 4px; background: var(--lime); color: var(--green-dark); font-weight: 800; cursor: pointer; }
        .hero {
            position: relative; min-height: 680px; display: flex; align-items: end; overflow: hidden;
            color: #fff; background: var(--green-dark);
        }
        .hero::before {
            position: absolute; inset: 0; content: ""; opacity: .96;
            background:
                linear-gradient(90deg, rgba(8,30,24,.93) 0%, rgba(8,30,24,.72) 44%, rgba(8,30,24,.18) 100%),
                linear-gradient(0deg, rgba(8,30,24,.72), transparent 62%),
                radial-gradient(ellipse at 75% 40%, rgba(180,143,112,.44), transparent 29%),
                linear-gradient(125deg, #233b30 2%, #726051 43%, #263e32 70%, #101c17);
        }
        .hero::after { position: absolute; inset: 0; content: ""; opacity: .12; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/%23n)' opacity='.3'/%3E%3C/svg%3E"); }
        .hero-art { position: absolute; inset: 0; overflow: hidden; }
        .hero-art::before, .hero-art::after { position: absolute; content: ""; border: 1px solid rgba(215,243,74,.22); transform: rotate(-19deg); }
        .hero-art::before { width: 48vw; height: 75vh; right: 11%; top: 18%; border-radius: 48% 44% 28% 36%; background: linear-gradient(145deg, rgba(228,190,154,.17), rgba(23,50,38,.06) 60%); filter: blur(1px); }
        .hero-art::after { width: 29vw; height: 58vh; right: 2%; top: 31%; border-radius: 50% 38% 30% 45%; background: linear-gradient(160deg, rgba(215,243,74,.08), rgba(0,0,0,.16)); }
        .hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 36px; padding-top: 150px; padding-bottom: 92px; }
        .hero-copy { max-width: 730px; }
        .hero .eyebrow { color: var(--lime); }
        .hero h1 { max-width: 680px; margin: 0 0 20px; font-size: 52px; line-height: 1.16; font-weight: 900; }
        .hero h1 span { color: var(--lime); }
        .hero-intro { max-width: 680px; margin: 0 0 24px; color: rgba(255,255,255,.83); font-size: 16px; line-height: 1.9; }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 11px; }
        .hero-stats { width: 250px; padding: 17px 18px; border-top: 2px solid var(--lime); border-bottom: 1px solid rgba(255,255,255,.26); background: rgba(8,28,22,.52); }
        .hero-stats-label { color: var(--lime); font-size: 11px; font-weight: 800; letter-spacing: 0; }
        .hero-stats strong { display: block; margin: 4px 0 9px; font: 700 25px/1.2 monospace; }
        .hero-stats-meta { display: flex; justify-content: space-between; gap: 12px; color: rgba(255,255,255,.72); font-size: 12px; }
        .hero-stats-meta span + span { padding-left: 12px; border-left: 1px solid rgba(255,255,255,.26); }
        .hero-ribbon { position: absolute; right: 0; bottom: 0; left: 0; height: 35px; border-top: 1px solid rgba(255,255,255,.18); background: rgba(13,47,38,.6); }
        .hero-ribbon .container { display: flex; align-items: center; height: 100%; gap: 12px; color: rgba(255,255,255,.7); font-size: 11px; }
        .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(215,243,74,.13); }
        .value-strip { padding: 32px 0; background: #fff; border-bottom: 1px solid var(--line); }
        .value-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
        .value-item { display: grid; grid-template-columns: 54px 1fr 24px; align-items: start; gap: 16px; padding: 12px 25px; border-right: 1px solid var(--line); }
        .value-item:first-child { padding-left: 0; }
        .value-item:last-child { padding-right: 0; border-right: 0; }
        .value-number { color: var(--green-mid); font: 800 19px/1.4 monospace; }
        .value-item h3 { margin: 0 0 5px; font-size: 17px; line-height: 1.35; }
        .value-item p { margin: 0; color: var(--muted); font-size: 13px; }
        .value-icon { color: var(--green-mid); }
        .dark-section { background: var(--green-dark); color: #fff; }
        .dark-section .eyebrow { color: var(--lime); }
        .dark-section .section-head p { color: rgba(255,255,255,.66); }
        .recent-section { padding-top: 76px; padding-bottom: 84px; }
        .recent-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 25px 15px; }
        .recent-card { min-width: 0; }
        .poster { position: relative; display: block; overflow: hidden; aspect-ratio: 2 / 3; border-radius: var(--radius); background: #263c31; }
        .poster-scene { position: absolute; inset: 0; display: block; overflow: hidden; background-size: cover; }
        .poster-scene::before { position: absolute; inset: 15% 13% 0 42%; content: ""; border-radius: 48% 46% 12% 10%; background: linear-gradient(150deg, rgba(210,177,145,.7), rgba(34,48,38,.82) 72%); filter: blur(1px); }
        .poster-scene::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(5,15,11,.8), transparent 58%), linear-gradient(120deg, rgba(5,15,11,.2), transparent 56%); }
        .poster-light { position: absolute; z-index: 1; top: 12%; left: 8%; width: 43%; height: 27%; border-radius: 50%; background: rgba(235,199,159,.31); filter: blur(24px); }
        .poster-silhouette { position: absolute; z-index: 1; right: 21%; bottom: -11%; width: 47%; height: 68%; border-radius: 48% 48% 7% 7%; background: linear-gradient(145deg, rgba(214,190,167,.68), rgba(35,48,39,.94) 60%); }
        .poster-line { position: absolute; z-index: 2; top: 58%; left: 11%; width: 42%; height: 1px; background: rgba(255,255,255,.62); transform: rotate(-27deg); }
        .poster-badge { position: absolute; z-index: 3; top: 10px; left: 10px; padding: 3px 7px; border-radius: 2px; background: var(--lime); color: var(--green-dark); font-size: 10px; line-height: 1.5; font-weight: 900; }
        .poster-score { position: absolute; z-index: 3; right: 10px; bottom: 10px; color: #fff; font: 700 14px/1 monospace; }
        .poster-title { position: absolute; z-index: 3; right: 11px; bottom: 31px; left: 11px; color: rgba(255,255,255,.78); font-size: 12px; font-weight: 700; }
        .recent-card h3 { margin: 10px 0 3px; font-size: 15px; line-height: 1.45; }
        .recent-card p { margin: 0; color: rgba(255,255,255,.59); font-size: 11px; }
        .recent-card:hover .poster-scene { transform: translateY(-2px); }
        .recent-card:hover h3 { color: var(--lime); }
        .poster-scene { transition: transform .2s; }
        .tag { display: inline-flex; align-items: center; min-height: 21px; padding: 2px 7px; border: 1px solid rgba(255,255,255,.27); border-radius: 2px; color: rgba(255,255,255,.8); font-size: 10px; }
        .popular-section { background: var(--paper); }
        .popular-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
        .popular-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: border-color .18s, box-shadow .18s; }
        .popular-card:hover { border-color: #9eaa9d; box-shadow: 0 8px 22px rgba(20,40,31,.1); }
        .popular-art { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--green); }
        .popular-art .poster-scene { transition: transform .2s; }
        .popular-card:hover .popular-art .poster-scene { transform: translateY(-2px); }
        .popular-art .poster-scene::before { inset: 5% 16% 0 54%; }
        .popular-art .poster-silhouette { right: 25%; width: 31%; height: 83%; }
        .art-caption { position: absolute; z-index: 4; inset: auto 13px 12px; display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: 12px; font-weight: 700; }
        .save-button { width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 4px; background: rgba(10,24,18,.55); color: #fff; cursor: pointer; }
        .save-button[aria-pressed="true"] { color: var(--lime); border-color: var(--lime); }
        .popular-body { padding: 14px 15px 16px; }
        .popular-body h3 { margin: 0 0 7px; font-size: 17px; line-height: 1.4; }
        .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
        .tags .tag { border-color: #d8dfd5; color: #536058; }
        .popular-body p { margin: 0; color: var(--muted); font-size: 13px; }
        .category-section { padding-top: 76px; padding-bottom: 84px; background: #fff; }
        .category-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
        .category-card { min-height: 174px; display: flex; flex-direction: column; padding: 21px 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .18s; }
        .category-card:hover { background: #f4f7ed; }
        .category-card.feature { grid-row: span 2; background: var(--green); color: #fff; }
        .category-card.feature:hover { background: #194a3c; }
        .category-card h3 { margin: 0 0 9px; font-size: 18px; line-height: 1.35; }
        .category-card p { margin: 0; color: var(--muted); font-size: 13px; }
        .category-card.feature p { color: rgba(255,255,255,.7); }
        .category-meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 16px; color: var(--green-mid); font-size: 12px; font-weight: 800; }
        .category-card.feature .category-meta { color: var(--lime); }
        .category-arrow { font-size: 20px; line-height: 1; transition: transform .18s; }
        .category-card:hover .category-arrow { transform: translateX(4px); }
        .topic-section { padding: 75px 0 82px; background: #e9ede5; }
        .topic-track { display: grid; grid-auto-columns: calc((100% - 66px) / 4.45); grid-auto-flow: column; gap: 16px; overflow-x: auto; padding: 2px 2px 14px; scrollbar-color: #9cac9b transparent; scrollbar-width: thin; }
        .topic-card { position: relative; min-width: 0; min-height: 330px; display: flex; align-items: end; overflow: hidden; padding: 22px; border-radius: var(--radius); color: #fff; background: linear-gradient(145deg, #5b6e56, #172d24); }
        .topic-card::before { position: absolute; inset: 0; content: ""; background: radial-gradient(ellipse at 70% 22%, rgba(213,180,145,.48), transparent 35%), linear-gradient(0deg, rgba(7,20,15,.92), rgba(8,28,21,.12) 83%); }
        .topic-card::after { position: absolute; top: 8%; right: 16%; width: 42%; height: 87%; content: ""; border-radius: 46% 48% 5% 5%; background: linear-gradient(150deg, rgba(219,192,163,.59), rgba(26,44,34,.9) 67%); opacity: .62; }
        .topic-card:nth-child(even) { background: linear-gradient(145deg, #73675b, #1a3027); }
        .topic-card:nth-child(3n)::after { right: 34%; width: 36%; }
        .topic-copy { position: relative; z-index: 2; }
        .topic-code { display: block; margin-bottom: 10px; color: var(--lime); font: 700 10px/1 monospace; }
        .topic-card h3 { margin: 0 0 5px; font-size: 20px; }
        .topic-card p { margin: 0; color: rgba(255,255,255,.72); font-size: 12px; }
        .rail-hint { color: var(--muted); font-size: 12px; white-space: nowrap; }
        .rank-section { padding: 80px 0; }
        .rank-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 60px; }
        .rank-list { border-top: 1px solid rgba(255,255,255,.2); }
        .rank-row { position: relative; display: grid; grid-template-columns: 45px minmax(0, 1fr) 56px 45px; align-items: center; gap: 14px; min-height: 61px; padding: 8px 11px 8px 0; border-bottom: 1px solid rgba(255,255,255,.14); transition: background .18s; }
        .rank-row:hover, .rank-row:focus-within { background: rgba(255,255,255,.055); }
        .rank-number { color: rgba(255,255,255,.55); font: 800 17px/1 monospace; }
        .rank-row:nth-child(1) .rank-number { color: var(--lime); }
        .rank-row:nth-child(2) .rank-number { color: #e7e8dc; }
        .rank-row:nth-child(3) .rank-number { color: var(--coral); }
        .rank-title { min-width: 0; }
        .rank-title strong { display: block; font-size: 14px; }
        .rank-title small { display: block; max-height: 0; overflow: hidden; color: rgba(255,255,255,.6); font-size: 11px; transition: max-height .18s; }
        .rank-row:hover .rank-title small, .rank-row:focus-within .rank-title small { max-height: 40px; }
        .rank-label { color: rgba(255,255,255,.55); font-size: 11px; }
        .rank-score { color: var(--lime); font: 700 14px/1 monospace; text-align: right; }
        .rank-focus { position: relative; min-height: 465px; overflow: hidden; border-radius: var(--radius); background: linear-gradient(145deg, #7e6c58, #153329); }
        .rank-focus .poster-scene::before { inset: 4% 12% 0 48%; }
        .rank-focus .poster-silhouette { right: 25%; width: 40%; height: 82%; }
        .rank-focus-copy { position: absolute; z-index: 4; right: 23px; bottom: 24px; left: 23px; }
        .rank-focus-copy span { color: var(--lime); font-size: 11px; font-weight: 800; }
        .rank-focus-copy h3 { margin: 7px 0; font-size: 25px; }
        .rank-focus-copy p { margin: 0; color: rgba(255,255,255,.73); font-size: 13px; }
        .social-section { background: #fff; }
        .social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 58px; align-items: start; }
        .trend-panel { padding: 22px 24px 19px; border: 1px solid var(--line); border-radius: var(--radius); background: #fbfcf8; }
        .trend-head { display: flex; justify-content: space-between; align-items: start; gap: 18px; }
        .trend-head h3 { margin: 0; font-size: 17px; }
        .trend-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
        .trend-label { padding: 4px 7px; background: #edf2dc; color: var(--green); font-size: 10px; font-weight: 800; }
        .trend-chart { height: 176px; display: flex; align-items: end; justify-content: space-around; gap: 15px; margin-top: 21px; padding: 0 10px 21px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to bottom, transparent 0, transparent 42px, #e6eae2 43px); }
        .trend-col { height: 100%; display: flex; flex: 1; flex-direction: column; justify-content: end; align-items: center; gap: 8px; }
        .trend-bar { width: min(34px, 100%); height: var(--bar); background: var(--green-mid); position: relative; }
        .trend-bar::after { position: absolute; top: 0; right: 0; left: 0; height: 3px; content: ""; background: var(--lime); }
        .trend-col:nth-child(3n) .trend-bar { background: #779183; }
        .trend-col span { color: var(--muted); font: 11px/1 monospace; }
        .trend-legend { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--muted); font-size: 11px; }
        .trend-legend i { width: 9px; height: 9px; background: var(--green-mid); }
        .notes-list { border-top: 1px solid var(--line); }
        .note { display: grid; grid-template-columns: 33px 1fr; gap: 13px; padding: 16px 0; border-bottom: 1px solid var(--line); }
        .note-mark { color: var(--green-mid); font: 800 13px/1.5 monospace; }
        .note p { margin: 0; color: #414a43; font-size: 14px; }
        .note small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
        .compare-section { background: #e9ede5; }
        .compare-table { width: 100%; border-collapse: collapse; border-top: 1px solid #cbd3c8; }
        .compare-table th, .compare-table td { padding: 16px 18px; border-bottom: 1px solid #cbd3c8; text-align: left; vertical-align: top; }
        .compare-table thead th { color: var(--muted); font-size: 12px; font-weight: 700; }
        .compare-table tbody th { width: 21%; font-size: 14px; }
        .compare-table td { color: #505a52; font-size: 14px; }
        .compare-table td:last-child { color: var(--green-dark); background: rgba(255,255,255,.45); }
        .news-section { background: var(--paper); }
        .news-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--line); }
        .news-card { display: grid; grid-template-columns: 150px minmax(0, 1fr) 24px; align-items: center; gap: 15px; min-height: 128px; padding: 15px 0; border-bottom: 1px solid var(--line); }
        .news-thumb { position: relative; overflow: hidden; width: 150px; aspect-ratio: 16 / 10; border-radius: 4px; background: linear-gradient(145deg, #82705c, #18382c); }
        .news-thumb::before { position: absolute; inset: 7% 20% 0 51%; content: ""; border-radius: 45% 45% 0 0; background: linear-gradient(145deg, rgba(221,192,160,.7), rgba(31,50,39,.9)); }
        .news-thumb::after { position: absolute; inset: 50% 0 0; content: ""; background: linear-gradient(0deg, rgba(8,21,15,.7), transparent); }
        .news-thumb.news-retro { background: linear-gradient(145deg, #987c5e, #3d4937); }
        .news-thumb.news-focus { background: linear-gradient(145deg, #626e64, #1c3229); }
        .news-thumb.news-mobile { background: linear-gradient(145deg, #7d7770, #26382e); }
        .news-copy { min-width: 0; }
        .news-copy time { color: var(--muted); font: 11px/1.4 monospace; }
        .news-copy h3 { overflow: hidden; margin: 5px 0; font-size: 15px; line-height: 1.4; text-overflow: ellipsis; }
        .news-copy p { overflow: hidden; margin: 0; color: var(--muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
        .news-arrow { color: var(--green-mid); font-size: 20px; transition: transform .18s; }
        .news-card:hover .news-arrow { transform: translateX(4px); }
        .news-card:hover h3 { color: var(--green-mid); }
        .faq-section { padding-top: 73px; padding-bottom: 78px; background: #fff; }
        .faq-layout { display: grid; grid-template-columns: .65fr 1.35fr; gap: 70px; }
        .faq-intro p { max-width: 320px; margin: 14px 0 0; color: var(--muted); }
        .faq-list { border-top: 1px solid var(--line); }
        .faq-item { border-bottom: 1px solid var(--line); }
        .faq-item summary { display: grid; grid-template-columns: 45px 1fr 24px; align-items: center; gap: 10px; min-height: 66px; cursor: pointer; list-style: none; }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-number { color: var(--green-mid); font: 700 14px/1 monospace; }
        .faq-item summary strong { font-size: 15px; }
        .faq-toggle { color: var(--green-mid); font-size: 21px; text-align: center; }
        .faq-toggle::before { content: "+"; }
        .faq-item[open] .faq-toggle::before { content: "−"; }
        .faq-answer { padding: 0 38px 19px 55px; color: var(--muted); font-size: 13px; }
        .faq-item[open] { background: #f7f8f3; }
        .benefit-band { padding: 27px 0; background: var(--green); color: #fff; }
        .benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
        .benefit-item { display: flex; align-items: center; gap: 13px; padding: 8px 22px; border-right: 1px solid rgba(255,255,255,.22); }
        .benefit-item:first-child { padding-left: 0; }
        .benefit-item:last-child { padding-right: 0; border: 0; }
        .benefit-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border: 1px solid rgba(215,243,74,.55); color: var(--lime); font: 700 11px/1 monospace; }
        .benefit-item strong { display: block; font-size: 14px; }
        .benefit-item span { display: block; color: rgba(255,255,255,.65); font-size: 11px; }
        .footer { padding: 57px 0 20px; background: #0c2b24; color: #fff; }
        .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 35px; padding-bottom: 39px; }
        .footer-brand { max-width: 290px; }
        .footer-brand .brand { min-width: 0; }
        .footer-brand p { margin: 16px 0 0; color: rgba(255,255,255,.63); font-size: 13px; }
        .footer-col h3 { margin: 1px 0 14px; color: var(--lime); font-size: 13px; }
        .footer-col a { display: block; width: fit-content; margin: 8px 0; color: rgba(255,255,255,.72); font-size: 12px; transition: color .18s; }
        .footer-col a:hover { color: var(--lime); }
        .footer-bottom { display: flex; justify-content: space-between; gap: 18px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.49); font-size: 11px; }
        .fixed-bar { position: fixed; z-index: 40; right: 0; bottom: 0; left: 0; min-height: var(--bar-height); display: flex; align-items: center; border-top: 1px solid rgba(255,255,255,.12); background: rgba(12,43,36,.97); color: #fff; box-shadow: 0 -8px 28px rgba(0,0,0,.16); }
        .fixed-inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
        .fixed-status { display: flex; align-items: center; gap: 10px; min-width: 205px; color: rgba(255,255,255,.84); font-size: 12px; }
        .fixed-copy { flex: 1; color: rgba(255,255,255,.72); font-size: 13px; }
        .fixed-copy strong { color: #fff; }
        .fixed-close { width: 34px; height: 38px; border: 0; background: transparent; color: rgba(255,255,255,.64); font-size: 20px; cursor: pointer; }
        .fixed-close:hover { color: var(--lime); }
        .fixed-bar.is-hidden { display: none; }
        .search-result { display: none; margin-top: 9px; color: var(--lime); font-size: 12px; }
        .search-result.visible { display: block; }
        @media (max-width: 1200px) {
            .container { width: calc(100% - 48px); }
            .nav-wrap { gap: 18px; }
            .brand { min-width: 220px; }
            .brand-name { max-width: 160px; }
            .nav-links { gap: 15px; }
            .nav-links a { font-size: 12px; }
            .recent-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
            .topic-track { grid-auto-columns: calc((100% - 49px) / 3.6); }
        }
        @media (max-width: 992px) {
            :root { --header-height: 70px; }
            .nav-links { gap: 12px; }
            .nav-links a { font-size: 11px; }
            .nav-actions .button { display: none; }
            .brand { min-width: 195px; }
            .hero-inner { grid-template-columns: 1fr; }
            .hero-stats { width: 310px; }
            .popular-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .rank-layout { grid-template-columns: 1fr 280px; gap: 28px; }
            .rank-focus { min-height: 430px; }
            .news-card { grid-template-columns: 120px minmax(0, 1fr) 20px; gap: 12px; }
            .news-thumb { width: 120px; }
            .faq-layout { gap: 38px; }
            .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
            .footer-col:last-child { grid-column: 2 / 4; }
        }
        @media (max-width: 768px) {
            :root { --header-height: 66px; --bar-height: 66px; }
            .container { width: calc(100% - 40px); }
            .header { position: fixed; background: var(--green-dark); border-bottom: 2px solid var(--lime); }
            .nav-wrap { justify-content: space-between; gap: 12px; }
            .brand { min-width: 0; }
            .brand-name { max-width: 205px; font-size: 13px; }
            .nav-links { position: fixed; z-index: 53; top: 0; right: 0; bottom: 0; width: min(340px, 86vw); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; margin: 0; padding: 84px 25px 25px; background: var(--green-dark); box-shadow: -12px 0 32px rgba(0,0,0,.25); transform: translateX(105%); transition: transform .22s ease; }
            .nav-links.open { transform: translateX(0); }
            .nav-links a { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 15px; }
            .nav-links a::after { right: auto; bottom: 7px; width: 26px; }
            .nav-actions { margin-left: auto; }
            .menu-button { display: grid; }
            .drawer-backdrop { position: fixed; z-index: 52; inset: 0; display: block; border: 0; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
            .drawer-backdrop.open { opacity: 1; visibility: visible; }
            .drawer-cta { display: block; margin-top: 22px; }
            .search-panel { position: fixed; top: 75px; right: 20px; }
            .hero { min-height: 620px; }
            .hero-inner { min-height: 620px; align-content: end; padding-top: 125px; padding-bottom: 74px; }
            .hero h1 { font-size: 42px; }
            .hero-intro { font-size: 15px; }
            .hero-stats { width: min(100%, 350px); }
            .value-grid { grid-template-columns: 1fr; }
            .value-item, .value-item:first-child, .value-item:last-child { grid-template-columns: 50px 1fr 24px; padding: 17px 0; border-right: 0; border-bottom: 1px solid var(--line); }
            .value-item:last-child { border-bottom: 0; }
            .section { padding: 64px 0; }
            .section-head { align-items: start; flex-direction: column; gap: 14px; margin-bottom: 27px; }
            .section-head h2 { font-size: 28px; }
            .recent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 13px; }
            .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .category-card.feature { grid-row: auto; grid-column: 1 / -1; min-height: 160px; }
            .topic-track { grid-auto-columns: calc((100% - 24px) / 2.45); }
            .topic-card { min-height: 300px; }
            .rank-layout { grid-template-columns: 1fr; }
            .rank-focus { display: none; }
            .social-grid { grid-template-columns: 1fr; gap: 34px; }
            .news-grid { grid-template-columns: 1fr; }
            .faq-layout { grid-template-columns: 1fr; gap: 22px; }
            .faq-intro p { max-width: 520px; }
            .benefit-grid { grid-template-columns: 1fr; }
            .benefit-item, .benefit-item:first-child, .benefit-item:last-child { padding: 12px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
            .benefit-item:last-child { border-bottom: 0; }
            .fixed-status, .fixed-copy { display: none; }
            .fixed-inner { justify-content: space-between; }
            .fixed-inner .button { flex: 1; }
            .footer-grid { grid-template-columns: repeat(2, 1fr); }
            .footer-brand { grid-column: 1 / -1; }
            .footer-col:last-child { grid-column: auto; }
        }
        @media (max-width: 576px) {
            .container { width: calc(100% - 32px); }
            .brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
            .brand-name { max-width: 150px; font-size: 12px; }
            .nav-actions { gap: 7px; }
            .icon-button, .menu-button { width: 36px; height: 36px; }
            .hero { min-height: 620px; }
            .hero::before { background: linear-gradient(90deg, rgba(8,30,24,.84), rgba(8,30,24,.5)), linear-gradient(0deg, rgba(8,30,24,.86), transparent 72%), radial-gradient(ellipse at 73% 31%, rgba(180,143,112,.38), transparent 30%), linear-gradient(125deg, #233b30, #625446 48%, #182b22); }
            .hero-art::before { width: 78vw; height: 51vh; right: 1%; top: 15%; }
            .hero-art::after { width: 51vw; height: 44vh; right: -7%; top: 24%; }
            .hero-inner { min-height: 620px; padding-bottom: 67px; }
            .hero h1 { font-size: 36px; }
            .hero-intro { margin-bottom: 19px; font-size: 14px; line-height: 1.8; }
            .hero-actions { gap: 8px; }
            .hero-actions .button { min-height: 43px; padding: 0 13px; font-size: 12px; }
            .hero-stats { margin-top: 26px; padding: 12px 14px; }
            .hero-stats strong { font-size: 22px; }
            .hero-ribbon { height: 30px; }
            .section { padding: 55px 0; }
            .section-head h2 { font-size: 25px; }
            .section-head p { font-size: 13px; }
            .recent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
            .recent-card h3 { font-size: 14px; }
            .poster-badge { top: 7px; left: 7px; font-size: 9px; }
            .poster-score { right: 7px; bottom: 8px; }
            .poster-title { right: 8px; bottom: 27px; left: 8px; }
            .popular-grid { grid-template-columns: 1fr; gap: 15px; }
            .popular-card { display: grid; grid-template-columns: 42% 1fr; }
            .popular-art { height: 100%; min-height: 154px; aspect-ratio: auto; }
            .popular-body { padding: 12px; }
            .popular-body h3 { font-size: 15px; }
            .popular-body p { font-size: 12px; line-height: 1.55; }
            .tags { gap: 4px; margin-bottom: 6px; }
            .tags .tag { padding-inline: 5px; font-size: 9px; }
            .save-button { width: 29px; height: 29px; }
            .category-grid { grid-template-columns: 1fr; }
            .category-card, .category-card.feature { grid-column: auto; min-height: 145px; padding: 17px; }
            .topic-section { padding: 54px 0; }
            .topic-track { grid-auto-columns: 66%; gap: 12px; }
            .topic-card { min-height: 290px; padding: 17px; }
            .rail-hint { white-space: normal; }
            .rank-row { grid-template-columns: 34px minmax(0, 1fr) 38px 39px; gap: 8px; min-height: 57px; padding-right: 3px; }
            .rank-title strong { font-size: 13px; }
            .rank-label { font-size: 10px; }
            .rank-score { font-size: 12px; }
            .trend-panel { padding: 17px 14px; }
            .trend-chart { gap: 8px; padding-inline: 2px; }
            .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: block; width: 100%; }
            .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
            .compare-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #cbd3c8; }
            .compare-table tbody th { grid-column: 1 / -1; padding: 13px 12px 6px; border: 0; }
            .compare-table td { padding: 8px 12px 13px; border: 0; font-size: 12px; }
            .compare-table td:first-of-type { border-right: 1px solid #cbd3c8; }
            .compare-table td::before { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; font-weight: 800; }
            .compare-table td:first-of-type::before { content: "常规浏览方式"; }
            .compare-table td:last-of-type::before { content: "本站内容目录"; }
            .news-card { grid-template-columns: 100px minmax(0, 1fr) 18px; gap: 10px; min-height: 108px; }
            .news-thumb { width: 100px; }
            .news-copy h3 { font-size: 13px; }
            .news-copy p { font-size: 11px; }
            .faq-item summary { grid-template-columns: 34px 1fr 22px; min-height: 62px; }
            .faq-answer { padding-left: 44px; }
            .footer { padding-top: 42px; }
            .footer-grid { gap: 26px 18px; }
            .footer-brand { grid-column: 1 / -1; }
            .footer-col h3 { font-size: 12px; }
            .footer-col a { font-size: 11px; }
            .footer-bottom { flex-direction: column; gap: 5px; }
            .fixed-inner .button { min-height: 44px; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
        }