/* roulang page: index */
:root {
            --bg: #171218;
            --bg-deep: #110d12;
            --panel: #211a22;
            --panel-raised: #29202a;
            --panel-soft: #302532;
            --accent: #ff765f;
            --accent-dark: #df5846;
            --accent-warm: #ff9b5b;
            --mint: #72c7ad;
            --text: #f7f0eb;
            --muted: #b9adb7;
            --dim: #877b86;
            --border: #463746;
            --border-warm: #76504a;
            --radius-sm: 8px;
            --radius: 12px;
            --radius-lg: 16px;
            --shadow: 0 18px 48px rgba(7, 4, 8, .32);
            --container: 1200px;
        }

        *, *::before, *::after {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 140px;
        }

        body {
            margin: 0;
            min-width: 320px;
            background:
                linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
                var(--bg);
            background-size: 34px 34px;
            color: var(--text);
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
            font-size: 16px;
            line-height: 1.7;
            padding-bottom: 104px;
            overflow-x: hidden;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        button, input {
            font: inherit;
        }

        button, a, input, summary {
            -webkit-tap-highlight-color: transparent;
        }

        button {
            border: 0;
            cursor: pointer;
        }

        img, svg {
            display: block;
            max-width: 100%;
        }

        ::selection {
            color: #1a1113;
            background: var(--accent-warm);
        }

        .site-container {
            width: min(calc(100% - 40px), var(--container));
            margin-inline: auto;
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 50;
            background: rgba(23, 18, 24, .94);
            border-bottom: 1px solid var(--border);
            backdrop-filter: blur(16px);
        }

        .brand-mark {
            display: grid;
            width: 42px;
            height: 42px;
            place-items: center;
            flex: 0 0 auto;
            border: 1px solid #8c5148;
            border-radius: 11px;
            background: linear-gradient(145deg, var(--accent), var(--accent-warm));
            color: #221317;
            font-size: 14px;
            font-weight: 900;
            box-shadow: inset 0 1px rgba(255,255,255,.35);
        }

        .brand-name {
            max-width: 280px;
            color: var(--text);
            font-size: 16px;
            font-weight: 800;
            line-height: 1.25;
            letter-spacing: -.02em;
        }

        .search-shell {
            position: relative;
            min-width: 260px;
            max-width: 410px;
            flex: 1;
        }

        .search-shell svg {
            position: absolute;
            top: 50%;
            left: 14px;
            width: 18px;
            color: var(--dim);
            transform: translateY(-50%);
            pointer-events: none;
        }

        .search-input {
            width: 100%;
            height: 44px;
            padding: 0 44px;
            border: 1px solid var(--border);
            border-radius: 10px;
            outline: 0;
            background: #1c161d;
            color: var(--text);
            transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
        }

        .search-input::placeholder {
            color: #8d818b;
        }

        .search-input:hover {
            border-color: #665064;
        }

        .search-input:focus {
            border-color: var(--accent);
            background: #211921;
            box-shadow: 0 0 0 3px rgba(255,118,95,.16);
        }

        .search-hint {
            position: absolute;
            top: 50%;
            right: 10px;
            padding: 2px 7px;
            border: 1px solid #4d3e4c;
            border-radius: 6px;
            color: #8f838d;
            font-size: 11px;
            line-height: 1.5;
            transform: translateY(-50%);
        }

        .button {
            display: inline-flex;
            min-height: 44px;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 17px;
            border: 1px solid transparent;
            border-radius: 9px;
            font-weight: 750;
            line-height: 1.2;
            transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
        }

        .button:hover {
            transform: translateY(-1px);
        }

        .button:active {
            transform: translateY(0);
        }

        .button:focus-visible,
        .channel-link:focus-visible,
        .text-link:focus-visible,
        summary:focus-visible,
        input:focus-visible {
            outline: 3px solid rgba(255,155,91,.38);
            outline-offset: 3px;
        }

        .button-primary {
            background: var(--accent);
            color: #241316;
            box-shadow: 0 8px 24px rgba(255,118,95,.2);
        }

        .button-primary:hover {
            background: #ff8a73;
            box-shadow: 0 10px 30px rgba(255,118,95,.28);
        }

        .button-secondary {
            border-color: var(--border);
            background: #251d26;
            color: var(--text);
        }

        .button-secondary:hover {
            border-color: var(--border-warm);
            background: #302431;
        }

        .button-ghost {
            border-color: #654b61;
            background: transparent;
            color: #ddd1d9;
        }

        .button-ghost:hover {
            border-color: var(--accent);
            color: #fff;
        }

        .channel-scroll {
            scrollbar-width: thin;
            scrollbar-color: #6a4d61 transparent;
        }

        .channel-scroll::-webkit-scrollbar {
            height: 4px;
        }

        .channel-scroll::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: #6a4d61;
        }

        .channel-link {
            position: relative;
            display: inline-flex;
            min-height: 41px;
            flex: 0 0 auto;
            align-items: center;
            gap: 7px;
            padding: 8px 15px;
            border-radius: 8px;
            color: var(--muted);
            font-size: 14px;
            font-weight: 700;
            transition: color .2s ease, background .2s ease;
        }

        .channel-link:hover {
            background: #2b222c;
            color: #fff;
        }

        .channel-link.active {
            background: var(--accent);
            color: #251416;
        }

        .channel-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: currentColor;
            opacity: .75;
        }

        .hero-grid {
            position: relative;
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: 18px;
            background:
                radial-gradient(circle at 86% 14%, rgba(255,118,95,.13), transparent 27%),
                linear-gradient(145deg, #241b25, #191419 64%);
            box-shadow: var(--shadow);
        }

        .hero-grid::before {
            position: absolute;
            inset: 0;
            content: "";
            pointer-events: none;
            background: repeating-linear-gradient(90deg, transparent 0 79px, rgba(255,255,255,.023) 80px);
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #ffad91;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .08em;
        }

        .eyebrow::before {
            width: 22px;
            height: 2px;
            content: "";
            background: var(--accent);
        }

        .status-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 7px 10px;
            border: 1px solid #4e3d4c;
            border-radius: 999px;
            background: rgba(22,16,23,.72);
            color: #c9bcc5;
            font-size: 12px;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--mint);
            box-shadow: 0 0 0 4px rgba(114,199,173,.1);
        }

        .icon-cell {
            position: relative;
            min-height: 132px;
            overflow: hidden;
            border: 1px solid #493b49;
            border-radius: 12px;
            background: #211a22;
            transition: transform .2s ease, border-color .2s ease, background .2s ease;
        }

        .icon-cell:hover {
            z-index: 2;
            border-color: #8a584f;
            background: #2a202a;
            transform: translateY(-3px);
        }

        .abstract-thumb {
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(circle at 72% 24%, rgba(255,155,91,.62), transparent 22%),
                radial-gradient(circle at 30% 65%, rgba(105,72,105,.82), transparent 32%),
                linear-gradient(135deg, #38263a, #181319);
        }

        .abstract-thumb::after {
            position: absolute;
            inset: 0;
            content: "";
            background: linear-gradient(135deg, transparent 42%, rgba(255,255,255,.06) 42% 44%, transparent 44%);
        }

        .play-icon {
            display: grid;
            width: 42px;
            height: 42px;
            place-items: center;
            border: 1px solid rgba(255,255,255,.3);
            border-radius: 50%;
            background: rgba(17,13,18,.76);
            color: #fff;
            backdrop-filter: blur(6px);
            transition: background .2s ease, transform .2s ease;
        }

        .group:hover .play-icon {
            background: var(--accent);
            color: #251416;
            transform: scale(1.06);
        }

        .section-heading {
            max-width: 700px;
        }

        .section-kicker {
            margin-bottom: 9px;
            color: var(--accent-warm);
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .1em;
        }

        .section-title {
            margin: 0;
            font-size: clamp(26px, 4vw, 40px);
            font-weight: 850;
            line-height: 1.2;
            letter-spacing: -.035em;
        }

        .section-copy {
            margin-top: 13px;
            color: var(--muted);
            line-height: 1.85;
        }

        .index-band {
            position: relative;
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            background: rgba(31,24,32,.78);
        }

        .index-band::before {
            position: absolute;
            top: 77px;
            right: 8%;
            left: 8%;
            height: 1px;
            content: "";
            background: linear-gradient(90deg, transparent, #76504a 12%, #76504a 88%, transparent);
        }

        .feature-item {
            position: relative;
            z-index: 2;
        }

        .feature-number {
            display: grid;
            width: 42px;
            height: 42px;
            place-items: center;
            border: 1px solid #745047;
            border-radius: 10px;
            background: #2c2026;
            color: var(--accent-warm);
            font-size: 13px;
            font-weight: 900;
            box-shadow: 0 0 0 8px var(--panel);
        }

        .tag {
            display: inline-flex;
            align-items: center;
            padding: 4px 9px;
            border: 1px solid #4d3e4c;
            border-radius: 999px;
            background: #271f28;
            color: #c5b9c2;
            font-size: 12px;
            line-height: 1.3;
        }

        .tag-accent {
            border-color: #865249;
            background: rgba(255,118,95,.12);
            color: #ffab95;
        }

        .tag-mint {
            border-color: #416f63;
            background: rgba(114,199,173,.1);
            color: #92d9c4;
        }

        .panel {
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            background: var(--panel);
            box-shadow: inset 0 1px rgba(255,255,255,.018);
        }

        .filter-button {
            display: inline-flex;
            min-height: 36px;
            align-items: center;
            padding: 7px 11px;
            border: 1px solid #4b3b49;
            border-radius: 8px;
            background: #251d26;
            color: #bdb0ba;
            font-size: 13px;
            transition: border-color .2s ease, background .2s ease, color .2s ease;
        }

        .filter-button:hover {
            border-color: #75524c;
            color: #fff;
        }

        .filter-button.active {
            border-color: var(--accent);
            background: var(--accent);
            color: #251416;
            font-weight: 800;
        }

        .filter-button:disabled {
            cursor: not-allowed;
            opacity: .4;
        }

        .video-row {
            border: 1px solid #433543;
            border-radius: 12px;
            background: #1e181f;
            transition: transform .2s ease, border-color .2s ease, background .2s ease;
        }

        .video-row:hover {
            border-color: #7a504a;
            background: #251d26;
            transform: translateX(3px);
        }

        .progress-track {
            height: 7px;
            overflow: hidden;
            border-radius: 99px;
            background: #3b303b;
        }

        .progress-fill {
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--accent), var(--accent-warm));
        }

        .stat-box {
            border-left: 3px solid var(--accent);
            background: #251d26;
        }

        .quote-bubble {
            position: relative;
            border: 1px solid #4b3c4b;
            border-radius: 14px 14px 14px 4px;
            background: #251e27;
            color: #d9cfd5;
        }

        .quote-bubble:nth-child(2) {
            border-radius: 14px 14px 4px 14px;
            background: #2d222d;
        }

        .news-link {
            display: grid;
            grid-template-columns: 96px minmax(0, 1fr) auto;
            align-items: center;
            gap: 18px;
            padding: 18px 0;
            border-bottom: 1px solid #403340;
            transition: color .2s ease, padding-left .2s ease;
        }

        .news-link:hover {
            padding-left: 5px;
            color: #ffad97;
        }

        .news-link:last-child {
            border-bottom: 0;
        }

        .rank-item {
            display: grid;
            grid-template-columns: 34px minmax(0,1fr) auto;
            align-items: center;
            gap: 11px;
            padding: 13px 0;
            border-bottom: 1px solid #403340;
        }

        .rank-item:last-child {
            border-bottom: 0;
        }

        .rank-number {
            color: var(--accent-warm);
            font-size: 13px;
            font-weight: 900;
        }

        details {
            border-bottom: 1px solid #453746;
        }

        details:last-child {
            border-bottom: 0;
        }

        summary {
            display: flex;
            min-height: 62px;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            cursor: pointer;
            color: #eee5e9;
            font-weight: 750;
            list-style: none;
        }

        summary::-webkit-details-marker {
            display: none;
        }

        summary::after {
            display: grid;
            width: 28px;
            height: 28px;
            place-items: center;
            flex: 0 0 auto;
            border: 1px solid #594559;
            border-radius: 7px;
            color: var(--accent-warm);
            content: "+";
        }

        details[open] summary::after {
            content: "−";
        }

        .cta-panel {
            border: 1px solid #784d46;
            background:
                linear-gradient(120deg, rgba(255,118,95,.13), transparent 35%),
                #291e29;
            box-shadow: var(--shadow);
        }

        .form-label {
            display: block;
            margin-bottom: 7px;
            color: #d9cfd6;
            font-size: 13px;
            font-weight: 750;
        }

        .form-input {
            width: 100%;
            min-height: 46px;
            padding: 10px 13px;
            border: 1px solid #574656;
            border-radius: 9px;
            outline: 0;
            background: #191419;
            color: var(--text);
            transition: border-color .2s ease, box-shadow .2s ease;
        }

        .form-input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(255,118,95,.15);
        }

        .form-message {
            min-height: 22px;
            margin-top: 7px;
            color: #a99da6;
            font-size: 12px;
        }

        .site-footer {
            border-top: 1px solid var(--border);
            background: var(--bg-deep);
        }

        .footer-link {
            color: #afa3ac;
            transition: color .2s ease;
        }

        .footer-link:hover {
            color: var(--accent-warm);
        }

        .fixed-cta {
            position: fixed;
            right: 18px;
            bottom: 16px;
            left: 18px;
            z-index: 60;
            margin: auto;
            max-width: 1040px;
            border: 1px solid #704d68;
            border-radius: 14px;
            background: rgba(43,31,43,.96);
            box-shadow: 0 18px 55px rgba(0,0,0,.48);
            backdrop-filter: blur(16px);
        }

        .fixed-cta.hidden-bar {
            display: none;
        }

        .close-button {
            display: grid;
            width: 34px;
            height: 34px;
            place-items: center;
            flex: 0 0 auto;
            border: 1px solid #5b4658;
            border-radius: 8px;
            background: #211921;
            color: #bcaeb8;
            transition: border-color .2s ease, color .2s ease;
        }

        .close-button:hover {
            border-color: var(--accent);
            color: #fff;
        }

        @media (max-width: 1024px) {
            .site-container {
                width: min(calc(100% - 32px), var(--container));
            }

            .desktop-search {
                max-width: 330px;
            }

            .index-band::before {
                display: none;
            }
        }

        @media (max-width: 768px) {
            html {
                scroll-padding-top: 122px;
            }

            body {
                padding-bottom: 132px;
            }

            .site-container {
                width: min(calc(100% - 28px), var(--container));
            }

            .brand-name {
                max-width: 185px;
                font-size: 14px;
            }

            .brand-mark {
                width: 38px;
                height: 38px;
            }

            .desktop-search {
                display: none;
            }

            .header-cta {
                min-height: 38px;
                padding: 8px 11px;
                font-size: 13px;
            }

            .hero-grid {
                border-radius: 14px;
            }

            .news-link {
                grid-template-columns: 1fr auto;
                gap: 8px 14px;
            }

            .news-link time {
                grid-column: 1 / -1;
            }

            .fixed-cta {
                right: 10px;
                bottom: 9px;
                left: 10px;
            }
        }

        @media (max-width: 520px) {
            body {
                font-size: 15px;
                padding-bottom: 154px;
            }

            .site-container {
                width: min(calc(100% - 22px), var(--container));
            }

            .brand-name {
                max-width: 145px;
                font-size: 13px;
            }

            .header-cta span {
                display: none;
            }

            .header-cta::after {
                content: "浏览";
            }

            .hero-actions .button {
                width: 100%;
            }

            .section-title {
                font-size: 27px;
            }

            .video-row:hover {
                transform: none;
            }

            .fixed-cta {
                border-radius: 11px;
            }
        }

        @media (max-width: 374px) {
            .brand-name {
                max-width: 116px;
                font-size: 12px;
            }

            .channel-link {
                padding-inline: 11px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            *, *::before, *::after {
                transition-duration: .01ms !important;
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
            }
        }

/* roulang page: category1 */
:root{
 --bg:#171218;--bg-deep:#110d12;--panel:#211a22;--panel-raised:#29202a;
 --panel-soft:#302532;--accent:#ff765f;--accent-dark:#df5846;--accent-warm:#ff9b5b;
 --mint:#72c7ad;--text:#f7f0eb;--muted:#b9adb7;--dim:#877b86;
 --border:#463746;--border-warm:#76504a;--radius-sm:8px;--radius:12px;
 --radius-lg:16px;--shadow:0 18px 48px rgba(7,4,8,.32);--container:1200px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:140px}
body{
 margin:0;min-width:320px;overflow-x:hidden;padding-bottom:104px;color:var(--text);
 background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),var(--bg);
 background-size:34px 34px;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:16px;line-height:1.7
}
a{color:inherit;text-decoration:none}button,input{font:inherit}button{border:0;cursor:pointer}img,svg{display:block;max-width:100%}
.site-container{width:min(calc(100% - 40px),var(--container));margin-inline:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(23,18,24,.94);border-bottom:1px solid var(--border);backdrop-filter:blur(16px)}
.brand-mark{display:grid;width:42px;height:42px;place-items:center;flex:0 0 auto;border:1px solid #8c5148;border-radius:11px;background:linear-gradient(145deg,var(--accent),var(--accent-warm));color:#221317;font-size:14px;font-weight:900;box-shadow:inset 0 1px rgba(255,255,255,.35)}
.brand-name{max-width:280px;color:var(--text);font-size:16px;font-weight:800;line-height:1.25;letter-spacing:-.02em}
.search-shell{position:relative;min-width:260px;max-width:410px;flex:1}
.search-shell svg{position:absolute;top:50%;left:14px;width:18px;color:var(--dim);transform:translateY(-50%);pointer-events:none}
.search-input{width:100%;height:44px;padding:0 44px;border:1px solid var(--border);border-radius:10px;outline:0;background:#1c161d;color:var(--text);transition:.2s}
.search-input::placeholder{color:#8d818b}.search-input:hover{border-color:#665064}.search-input:focus{border-color:var(--accent);background:#211921;box-shadow:0 0 0 3px rgba(255,118,95,.16)}
.search-hint{position:absolute;top:50%;right:10px;padding:2px 7px;border:1px solid #4d3e4c;border-radius:6px;color:#8f838d;font-size:11px;line-height:1.5;transform:translateY(-50%)}
.button{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:8px;padding:10px 17px;border:1px solid transparent;border-radius:9px;font-weight:750;line-height:1.2;transition:.2s}
.button:hover{transform:translateY(-1px)}.button:active{transform:translateY(0)}
.button:focus-visible,.channel-link:focus-visible,.text-link:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid rgba(255,155,91,.38);outline-offset:3px}
.button-primary{background:var(--accent);color:#241316;box-shadow:0 8px 24px rgba(255,118,95,.2)}
.button-primary:hover{background:#ff8a73;box-shadow:0 10px 30px rgba(255,118,95,.28)}
.button-secondary{border-color:var(--border);background:#251d26;color:var(--text)}.button-secondary:hover{border-color:var(--border-warm);background:#302431}
.channel-scroll{scrollbar-width:none}.channel-scroll::-webkit-scrollbar{display:none}
.channel-link{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;padding:7px 13px;border:1px solid transparent;border-radius:8px;color:var(--muted);font-size:14px;white-space:nowrap;transition:.2s}
.channel-link:hover{border-color:var(--border);background:#2b222c;color:var(--text)}.channel-link.active{background:var(--accent);color:#261417;font-weight:800}
.channel-dot{width:6px;height:6px;border-radius:50%;background:#806b7b}.channel-link.active .channel-dot{background:#51251f}
.page-wrap{padding:48px 0 72px}.eyebrow{display:flex;align-items:center;gap:10px;color:var(--accent-warm);font-size:13px;font-weight:800;letter-spacing:.08em}
.eyebrow:before{width:28px;height:1px;background:var(--accent);content:""}
.page-title{max-width:780px;margin:12px 0 14px;font-size:clamp(32px,5vw,58px);line-height:1.16;letter-spacing:-.045em;font-weight:900}
.lead{max-width:720px;color:var(--muted);font-size:17px}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0;color:var(--dim);font-size:13px}.breadcrumb a:hover{color:var(--accent-warm)}
.summary-panel{margin-top:32px;padding:24px;border:1px solid var(--border-warm);border-radius:var(--radius-lg);background:linear-gradient(135deg,#2a2029,#201820);box-shadow:var(--shadow)}
.summary-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:18px}.summary-item{padding:15px;border-left:2px solid var(--accent)}.summary-item strong{display:block;margin-bottom:4px;font-size:17px}.summary-item span{color:var(--muted);font-size:14px}
.section{padding-top:58px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:20px}.section-heading h2{margin:0;font-size:25px;line-height:1.3}.section-heading p{margin:5px 0 0;color:var(--muted);font-size:14px}
.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px;border:1px solid var(--border);border-radius:var(--radius);background:rgba(33,26,34,.9)}
.filter-label{color:var(--dim);font-size:13px}.filter-chip{padding:7px 12px;border:1px solid var(--border);border-radius:8px;background:#251d27;color:var(--muted);font-size:13px;transition:.2s}.filter-chip:hover{border-color:var(--accent);color:var(--text)}.filter-chip.selected{border-color:var(--accent);background:rgba(255,118,95,.14);color:#ffad98}
.content-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:22px;margin-top:22px}
.feature-card,.compact-item,.side-panel,.faq-item{border:1px solid var(--border);background:var(--panel);border-radius:var(--radius-lg);box-shadow:0 10px 25px rgba(6,3,8,.14)}
.feature-card{overflow:hidden}.visual{position:relative;aspect-ratio:16/8;background:linear-gradient(120deg,#56302e,#302235 50%,#3e514c);overflow:hidden}.visual:after{position:absolute;inset:0;background:linear-gradient(transparent 42%,rgba(13,8,14,.75));content:""}.visual-mark{position:absolute;top:20px;left:22px;z-index:1;color:rgba(255,255,255,.72);font-size:12px;letter-spacing:.16em}.play{position:absolute;z-index:2;top:50%;left:50%;display:grid;width:54px;height:54px;place-items:center;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:rgba(20,13,20,.65);color:#fff;transform:translate(-50%,-50%);transition:.2s}.feature-card:hover .play{background:var(--accent);color:#241316;transform:translate(-50%,-50%) scale(1.05)}
.card-body{padding:22px}.tag{display:inline-flex;padding:4px 8px;border-radius:6px;background:#3a2b38;color:#e4b5a9;font-size:12px}.tag.mint{background:rgba(114,199,173,.12);color:var(--mint)}.card-title{margin:12px 0 7px;font-size:22px;line-height:1.35}.card-text{margin:0;color:var(--muted);font-size:14px}.meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;color:var(--dim);font-size:13px}.meta span{display:inline-flex;align-items:center;gap:5px}
.compact-list{display:grid;gap:12px}.compact-item{display:flex;gap:14px;padding:13px;transition:.2s}.compact-item:hover{border-color:var(--border-warm);background:var(--panel-raised);transform:translateX(2px)}.thumb-small{position:relative;width:118px;min-width:118px;height:78px;overflow:hidden;border-radius:9px;background:linear-gradient(135deg,#46302d,#34283e)}.thumb-small:after{position:absolute;inset:0;content:"";background:linear-gradient(135deg,transparent,rgba(255,118,95,.22))}.compact-info{min-width:0}.compact-info h3{margin:3px 0 4px;font-size:16px;line-height:1.35}.compact-info p{margin:0;color:var(--dim);font-size:12px}.side-panel{padding:21px}.side-panel h3{margin:0 0 14px;font-size:18px}.side-panel ul{margin:0;padding:0;list-style:none}.side-panel li{display:flex;justify-content:space-between;gap:15px;padding:11px 0;border-bottom:1px solid #392d39;color:var(--muted);font-size:14px}.side-panel li:last-child{border-bottom:0}.side-panel b{color:var(--text);font-weight:650}
.faq-list{display:grid;gap:10px;max-width:820px}.faq-item{padding:0 18px}.faq-item summary{padding:17px 0;cursor:pointer;font-weight:750;list-style:none}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{float:right;color:var(--accent);content:"＋";font-size:20px}.faq-item[open] summary:after{content:"−"}.faq-answer{padding:0 0 17px;color:var(--muted);font-size:14px}
.notice{display:flex;gap:12px;align-items:flex-start;margin-top:22px;padding:16px;border:1px solid rgba(114,199,173,.28);border-radius:var(--radius);background:rgba(114,199,173,.07);color:#c7ded5;font-size:13px}.notice svg{width:19px;min-width:19px;color:var(--mint);margin-top:3px}
.pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:28px}.page-number{display:grid;width:38px;height:38px;place-items:center;border:1px solid var(--border);border-radius:8px;color:var(--muted);font-size:14px}.page-number.active,.page-number:hover{border-color:var(--accent);background:var(--accent);color:#241316}
.bottom-cta{position:fixed;right:0;bottom:0;left:0;z-index:40;border-top:1px solid #68433f;background:rgba(35,24,34,.97);box-shadow:0 -12px 34px rgba(5,2,7,.3);backdrop-filter:blur(14px)}.bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:76px}.bottom-cta strong{display:block;font-size:16px}.bottom-cta small{color:var(--muted);font-size:12px}
.site-footer{border-top:1px solid var(--border);padding:35px 0 24px;color:var(--dim);font-size:13px}.footer-grid{display:flex;justify-content:space-between;gap:25px}.footer-brand{color:var(--text);font-weight:800}.footer-links{display:flex;flex-wrap:wrap;gap:16px}.footer-links a:hover{color:var(--accent-warm)}
@media(max-width:900px){.content-layout{grid-template-columns:1fr}.summary-grid{grid-template-columns:1fr 1fr}.side-panel{order:-1}}
@media(max-width:640px){body{padding-bottom:136px}.site-container{width:min(calc(100% - 28px),var(--container))}.desktop-search{display:none}.brand-name{font-size:14px}.page-wrap{padding-top:32px}.page-title{font-size:35px}.lead{font-size:15px}.summary-grid{grid-template-columns:1fr}.summary-panel{padding:17px}.section{padding-top:42px}.section-heading{display:block}.visual{aspect-ratio:1.35}.card-body{padding:17px}.compact-item{padding:10px}.thumb-small{width:96px;min-width:96px;height:68px}.compact-info h3{font-size:14px}.bottom-inner{display:block;padding:11px 0 13px}.bottom-cta .button{width:100%;margin-top:8px}.footer-grid{display:block}.footer-links{margin-top:14px;gap:10px 15px}}
@media(max-width:375px){.brand-mark{width:36px;height:36px}.brand-name{max-width:145px;font-size:13px}.button{padding-inline:12px}.header-cta span{display:none}.header-cta{min-width:44px}}

/* roulang page: category2 */
:root {
      --bg: #171218;
      --bg-deep: #110d12;
      --panel: #211a22;
      --panel-raised: #29202a;
      --panel-soft: #302532;
      --accent: #ff765f;
      --accent-dark: #df5846;
      --accent-warm: #ff9b5b;
      --mint: #72c7ad;
      --text: #f7f0eb;
      --muted: #b9adb7;
      --dim: #877b86;
      --border: #463746;
      --border-warm: #76504a;
      --radius-sm: 8px;
      --radius: 12px;
      --radius-lg: 16px;
      --shadow: 0 18px 48px rgba(7, 4, 8, .32);
      --container: 1200px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 140px; }
    body {
      margin: 0;
      min-width: 320px;
      background:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
        var(--bg);
      background-size: 34px 34px;
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 16px;
      line-height: 1.7;
      padding-bottom: 104px;
      overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; }
    button, input { font: inherit; }
    button, a, input, summary { -webkit-tap-highlight-color: transparent; }
    button { border: 0; cursor: pointer; }
    img, svg { display: block; max-width: 100%; }

    .site-container {
      width: min(calc(100% - 40px), var(--container));
      margin-inline: auto;
    }
    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(23, 18, 24, .94);
      border-bottom: 1px solid var(--border);
      backdrop-filter: blur(16px);
    }
    .brand-mark {
      display: grid;
      width: 42px;
      height: 42px;
      place-items: center;
      flex: 0 0 auto;
      border: 1px solid #8c5148;
      border-radius: 11px;
      background: linear-gradient(145deg, var(--accent), var(--accent-warm));
      color: #221317;
      font-size: 14px;
      font-weight: 900;
      box-shadow: inset 0 1px rgba(255,255,255,.35);
    }
    .brand-name {
      max-width: 280px;
      color: var(--text);
      font-size: 16px;
      font-weight: 800;
      line-height: 1.25;
      letter-spacing: -.02em;
    }
    .search-shell {
      position: relative;
      min-width: 260px;
      max-width: 410px;
      flex: 1;
    }
    .search-shell svg {
      position: absolute;
      top: 50%;
      left: 14px;
      width: 18px;
      color: var(--dim);
      transform: translateY(-50%);
      pointer-events: none;
    }
    .search-input {
      width: 100%;
      height: 44px;
      padding: 0 44px;
      border: 1px solid var(--border);
      border-radius: 10px;
      outline: 0;
      background: #1c161d;
      color: var(--text);
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .search-input::placeholder { color: #8d818b; }
    .search-input:hover { border-color: #665064; }
    .search-input:focus {
      border-color: var(--accent);
      background: #211921;
      box-shadow: 0 0 0 3px rgba(255,118,95,.16);
    }
    .search-hint {
      position: absolute;
      top: 50%;
      right: 10px;
      padding: 2px 7px;
      border: 1px solid #4d3e4c;
      border-radius: 6px;
      color: #8f838d;
      font-size: 11px;
      line-height: 1.5;
      transform: translateY(-50%);
    }
    .button {
      display: inline-flex;
      min-height: 44px;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 17px;
      border: 1px solid transparent;
      border-radius: 9px;
      font-weight: 750;
      line-height: 1.2;
      transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
    }
    .button:hover { transform: translateY(-1px); }
    .button:active { transform: translateY(0); }
    .button:focus-visible,
    .channel-link:focus-visible,
    .text-link:focus-visible,
    summary:focus-visible,
    input:focus-visible {
      outline: 3px solid rgba(255,155,91,.38);
      outline-offset: 3px;
    }
    .button-primary {
      background: var(--accent);
      color: #241316;
      box-shadow: 0 8px 24px rgba(255,118,95,.2);
    }
    .button-primary:hover {
      background: #ff8a73;
      box-shadow: 0 10px 30px rgba(255,118,95,.28);
    }
    .button-secondary {
      border-color: var(--border);
      background: #251d26;
      color: var(--text);
    }
    .button-secondary:hover {
      border-color: var(--border-warm);
      background: #302431;
    }
    .button-ghost {
      border-color: #654b61;
      background: transparent;
      color: #ddd1d9;
    }
    .button-ghost:hover { border-color: var(--accent); color: #fff; }
    .channel-scroll { scrollbar-width: none; }
    .channel-scroll::-webkit-scrollbar { display: none; }
    .channel-link {
      display: inline-flex;
      min-height: 38px;
      flex: 0 0 auto;
      align-items: center;
      gap: 8px;
      padding: 7px 13px;
      border: 1px solid transparent;
      border-radius: 8px;
      color: var(--muted);
      font-size: 14px;
      transition: color .2s ease, background .2s ease, border-color .2s ease;
    }
    .channel-link:hover {
      border-color: var(--border);
      background: #251d26;
      color: var(--text);
    }
    .channel-link.active {
      border-color: rgba(255,118,95,.35);
      background: rgba(255,118,95,.14);
      color: #ffad9a;
    }
    .channel-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
    }

    .page-intro {
      position: relative;
      overflow: hidden;
      padding: 58px 0 34px;
      border-bottom: 1px solid rgba(70,55,70,.75);
    }
    .page-intro::after {
      position: absolute;
      right: 8%;
      bottom: 18px;
      width: 190px;
      height: 1px;
      background: var(--accent);
      opacity: .5;
      content: "";
      box-shadow: 0 10px 0 rgba(255,118,95,.16), 0 20px 0 rgba(255,118,95,.08);
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--accent-warm);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
    }
    .eyebrow::before {
      width: 26px;
      height: 1px;
      background: var(--accent);
      content: "";
    }
    .page-title {
      max-width: 820px;
      margin: 13px 0 12px;
      font-size: clamp(32px, 5vw, 58px);
      font-weight: 900;
      line-height: 1.12;
      letter-spacing: -.04em;
    }
    .page-lead {
      max-width: 720px;
      margin: 0;
      color: var(--muted);
      font-size: 17px;
    }
    .crumbs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 24px;
      color: var(--dim);
      font-size: 13px;
    }
    .crumbs a:hover { color: var(--accent-warm); }
    .crumb-current { color: #d3c5ce; }

    .tool-panel {
      margin-top: 28px;
      padding: 18px;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: rgba(33,26,34,.86);
      box-shadow: var(--shadow);
    }
    .tool-label {
      display: block;
      margin-bottom: 8px;
      color: var(--dim);
      font-size: 12px;
      font-weight: 750;
    }
    .select-look, .filter-search {
      width: 100%;
      min-height: 42px;
           padding: 0 13px;
      border: 1px solid var(--border);
      border-radius: 9px;
      outline: none;
      background: #191419;
      color: var(--text);
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .select-look:hover, .filter-search:hover { border-color: #675064; }
    .select-look:focus, .filter-search:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(255,118,95,.14);
    }
    .filter-chip {
      display: inline-flex;
      min-height: 36px;
      align-items: center;
      justify-content: center;
      padding: 6px 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: #1b161c;
      color: var(--muted);
      font-size: 13px;
      white-space: nowrap;
      transition: color .2s ease, border-color .2s ease, background .2s ease;
    }
    .filter-chip:hover {
      border-color: var(--border-warm);
      color: var(--text);
    }
    .filter-chip.active {
      border-color: rgba(255,118,95,.5);
      background: rgba(255,118,95,.14);
      color: #ffb2a3;
    }
    .section {
      padding: 66px 0;
      border-bottom: 1px solid rgba(70,55,70,.62);
    }
    .section-heading {
      margin: 0;
      font-size: clamp(25px, 3vw, 36px);
      font-weight: 850;
      line-height: 1.25;
      letter-spacing: -.025em;
    }
    .section-copy {
      max-width: 680px;
      margin: 10px 0 0;
      color: var(--muted);
    }
    .summary-panel {
      display: grid;
      grid-template-columns: 1.45fr .8fr;
      gap: 1px;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--border);
      box-shadow: var(--shadow);
    }
    .summary-main, .summary-aside { background: var(--panel); }
    .summary-main { padding: 28px; }
    .summary-aside {
      display: grid;
      grid-template-columns: 1fr;
    }
    .summary-stat {
      padding: 21px 24px;
      border-bottom: 1px solid var(--border);
    }
    .summary-stat:last-child { border-bottom: 0; }
    .stat-number {
      display: block;
      color: var(--accent-warm);
      font-size: 24px;
      font-weight: 900;
      line-height: 1.2;
    }
    .stat-label {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font-size: 13px;
    }
    .notice-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 22px;
    }
    .notice {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 10px;
      border: 1px solid #50404e;
      border-radius: 7px;
      color: #cbbfc7;
      font-size: 12px;
    }
    .notice-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--mint);
    }
    .content-layout {
      display: grid;
      grid-template-columns: 250px minmax(0, 1fr);
      gap: 24px;
      align-items: start;
      margin-top: 28px;
    }
    .filter-sidebar {
      position: sticky;
      top: 138px;
      padding: 19px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--panel);
    }
    .filter-group {
      padding: 16px 0;
      border-bottom: 1px solid var(--border);
    }
    .filter-group:first-child { padding-top: 0; }
    .filter-group:last-child {
      padding-bottom: 0;
      border-bottom: 0;
    }
    .filter-title {
      margin: 0 0 10px;
      color: #e5dbe1;
      font-size: 13px;
      font-weight: 800;
    }
    .check-row {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 5px 0;
      color: var(--muted);
      font-size: 13px;
    }
    .check-box {
      display: grid;
      width: 17px;
      height: 17px;
      place-items: center;
      border: 1px solid #655261;
      border-radius: 4px;
      color: #251317;
      flex: 0 0 auto;
    }
    .check-row.active { color: var(--text); }
    .check-row.active .check-box {
      border-color: var(--accent);
      background: var(--accent);
    }
    .clear-link {
      display: inline-block;
      margin-top: 14px;
      color: var(--accent-warm);
      font-size: 13px;
      font-weight: 700;
    }
    .clear-link:hover { color: #ffc090; }
    .list-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      margin-bottom: 14px;
    }
    .result-count {
      color: var(--muted);
      font-size: 13px;
    }
    .result-count strong { color: var(--text); }
    .video-list {
      display: grid;
      gap: 12px;
    }
    .video-item {
      display: grid;
      grid-template-columns: 210px minmax(0, 1fr) auto;
      gap: 18px;
      align-items: center;
      padding: 13px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--panel);
      transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }
    .video-item:hover {
      z-index: 1;
      border-color: var(--border-warm);
      background: var(--panel-raised);
      box-shadow: 0 12px 30px rgba(7,4,8,.22);
      transform: translateY(-2px);
    }
    .video-item.featured {
      grid-template-columns: minmax(280px, 38%) minmax(0, 1fr);
      padding: 0;
      overflow: hidden;
      border-color: #684a60;
      background: #271e28;
    }
    .video-item.featured .video-thumb {
      height: 100%;
      min-height: 265px;
      border-radius: 0;
    }
    .video-item.featured .video-info { padding: 28px 22px 28px 4px; }
    .video-item.featured .video-action { display: none; }
    .video-thumb {
      position: relative;
      overflow: hidden;
      aspect-ratio: 16 / 9;
      border: 1px solid #4c3b4a;
      border-radius: 9px;
      background:
        radial-gradient(circle at 70% 30%, rgba(255,155,91,.28), transparent 24%),
        linear-gradient(135deg, #573345, #2d2437 48%, #3e2633);
    }
    .video-thumb.variant-two {
      background:
        radial-gradient(circle at 25% 72%, rgba(114,199,173,.19), transparent 25%),
        linear-gradient(145deg, #31263f, #4b293a 56%, #2b252e);
    }
    .video-thumb.variant-three {
      background:
        linear-gradient(35deg, transparent 46%, rgba(255,255,255,.06) 47% 49%, transparent 50%),
        linear-gradient(145deg, #5d3540, #352535 55%, #242028);
    }
    .video-thumb::after {
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,.025) 39px);
      content: "";
    }
    .play-icon {
      position: absolute;
      z-index: 2;
      top: 50%;
      left: 50%;
      display: grid;
      width: 44px;
      height: 44px;
      place-items: center;
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 50%;
      background: rgba(17,13,18,.76);
      color: var(--accent);
      transform: translate(-50%, -50%);
      transition: transform .2s ease, background .2s ease;
    }
    .video-item:hover .play-icon {
      background: rgba(255,118,95,.92);
      color: #251316;
      transform: translate(-50%, -50%) scale(1.06);
    }
    .duration {
      position: absolute;
      z-index: 2;
      right: 7px;
      bottom: 7px;
      padding: 2px 7px;
      border-radius: 5px;
      background: rgba(13,10,14,.86);
      color: #eee5e9;
      font-size: 11px;
    }
    .safe-label {
      position: absolute;
      z-index: 2;
      top: 7px;
      left: 7px;
      padding: 3px 7px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 5px;
      background: rgba(33,26,34,.84);
      color: #ddd0d8;
      font-size: 10px;
    }
    .tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-bottom: 8px;
    }
    .tag {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 2px 8px;
      border: 1px solid #554252;
      border-radius: 6px;
      background: #2b222c;
      color: #c8bbc4;
      font-size: 11px;
    }
    .tag.orange {
      border-color: rgba(255,118,95,.38);
      background: rgba(255,118,95,.1);
      color: #ffab99;
    }
    .tag.mint {
      border-color: rgba(114,199,173,.32);
      background: rgba(114,199,173,.08);
      color: #9ed9c7;
    }
    .video-title {
      margin: 0;
      font-size: 17px;
      font-weight: 820;
      line-height: 1.38;
    }
    .featured .video-title { font-size: clamp(22px, 3vw, 30px); }
    .video-desc {
      margin: 7px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.65;
    }
    .video-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 7px 14px;
      margin-top: 10px;
      color: var(--dim);
      font-size: 12px;
    }
    .video-action {
      display: flex;
      min-width: 94px;
      justify-content: flex-end;
    }
    .compact-button {
      display: inline-flex;
      min-height: 38px;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      border: 1px solid #654b61;
      border-radius: 8px;
      color: #e8dde4;
      font-size: 13px;
      font-weight: 750;
      transition: border-color .2s ease, color .2s ease, background .2s ease;
    }
    .compact-button:hover {
      border-color: var(--accent);
      background: rgba(255,118,95,.08);
      color: #ffb1a0;
    }
    .load-zone {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      margin-top: 22px;
    }
    .page-chip {
      display: grid;
      width: 38px;
      height: 38px;
      place-items: center;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--panel);
      color: var(--muted);
      font-size: 13px;
    }
    .page-chip:hover {
      border-color: var(--border-warm);
      color: var(--text);
    }
    .page-chip.active {
      border-color: var(--accent);
      background: var(--accent);
      color: #251316;
      font-weight: 850;
    }
    .process-grid {
      display: grid;
      grid-template-columns: .85fr 1.4fr;
      gap: 26px;
      align-items: start;
    }
    .update-track {
      position: relative;
      padding-left: 28px;
    }
    .update-track::before {
      position: absolute;
      top: 10px;
      bottom: 10px;
      left: 7px;
      width: 1px;
      background: linear-gradient(var(--accent), var(--border));
      content: "";
    }
    .update-step {
      position: relative;
      padding: 0 0 25px;
    }
    .update-step:last-child { padding-bottom: 0; }
    .update-step::before {
      position: absolute;
      top: 7px;
      left: -26px;
      width: 11px;
      height: 11px;
      border: 2px solid var(--panel);
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 1px var(--accent);
      content: "";
    }
    .update-step h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 800;
    }
    .update-step p {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 13px;
    }
    .guide-panel {
      padding: 25px;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--panel);
    }
    .guide-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 18px;
    }
    .guide-item {
      padding: 15px;
      border: 1px solid #493a48;
      border-radius: 10px;
      background: #1c171d;
    }
    .guide-item strong {
      display: block;
      color: #eadfe5;
      font-size: 14px;
    }
    .guide-item span {
      display: block;
      margin-top: 4px;
      color: var(--dim);
      font-size: 12px;
    }
    .feedback-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      overflow: hidden;
      margin-top: 25px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--border);
    }
    .feedback-cell {
      min-height: 120px;
      padding: 20px;
      background: var(--panel);
    }
    .feedback-cell strong {
      display: block;
      margin-bottom: 7px;
      color: var(--accent-warm);
      font-size: 14px;
    }
    .feedback-cell p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
    }
    .faq-list {
      max-width: 900px;
      margin-top: 25px;
      border-top: 1px solid var(--border);
    }
    .faq-item { border-bottom: 1px solid var(--border); }
    .faq-item summary {
      position: relative;
      padding: 19px 48px 19px 2px;
      list-style: none;
      cursor: pointer;
      color: #ece2e8;
      font-weight: 780;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      position: absolute;
      top: 50%;
      right: 5px;
      display: grid;
      width: 28px;
      height: 28px;
      place-items: center;
      border: 1px solid var(--border);
      border-radius: 7px;
      color: var(--accent);
      content: "+";
      transform: translateY(-50%);
    }
    .faq-item[open] summary::after { content: "−"; }
    .faq-answer {
      max-width: 780px;
      padding: 0 44px 19px 2px;
      color: var(--muted);
      font-size: 14px;
    }
    .report-panel {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: 28px;
      align-items: center;
      padding: 30px;
      border: 1px solid #684a60;
      border-radius: var(--radius-lg);
      background:
        radial-gradient(circle at 85% 0, rgba(255,118,95,.1), transparent 30%),
        var(--panel-raised);
    }
    .report-form {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 9px;
    }
    .form-help {
      grid-column: 1 / -1;
      margin: 2px 0 0;
      color: var(--dim);
      font-size: 11px;
    }
    .form-status {
      display: none;
      grid-column: 1 / -1;
      margin: 0;
      font-size: 12px;
    }
    .form-status.error { color: #ff9f91; }
    .form-status.success { color: var(--mint); }
    .related-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
      margin-top: 24px;
    }
    .related-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      min-height: 110px;
      padding: 21px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--panel);
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }
    .related-card:hover {
      border-color: var(--border-warm);
      background: var(--panel-raised);
      transform: translateY(-2px);
    }
    .related-card.active {
      border-color: rgba(255,118,95,.45);
      background: rgba(255,118,95,.08);
    }
    .related-card strong { display: block; font-size: 17px; }
    .related-card span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
    }
    .related-arrow {
      color: var(--accent);
      font-size: 22px;
      transition: transform .2s ease;
    }
    .related-card:hover .related-arrow { transform: translateX(4px); }

    .site-footer {
      padding: 38px 0 135px;
      background: var(--bg-deep);
      border-top: 1px solid var(--border);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr;
      gap: 36px;
    }
    .footer-brand {
      margin: 0;
      font-size: 17px;
      font-weight: 850;
    }
    .footer-copy {
      max-width: 470px;
      margin: 9px 0 0;
      color: var(--dim);
      font-size: 13px;
    }
    .footer-title {
      margin: 0 0 11px;
      color: #d9cdd5;
      font-size: 13px;
      font-weight: 800;
    }
    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 15px;
    }
    .footer-links a {
      color: var(--dim);
      font-size: 12px;
    }
    .footer-links a:hover { color: var(--accent-warm); }
    .footer-bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 12px;
      margin-top: 28px;
      padding-top: 18px;
      border-top: 1px solid #332833;
      color: #746a73;
      font-size: 11px;
    }
    .fixed-cta {
      position: fixed;
      z-index: 60;
      right: 20px;
      bottom: 18px;
      left: 20px;
      max-width: 1040px;
      margin-inline: auto;
      padding: 12px 14px 12px 19px;
      border: 1px solid #69465e;
      border-radius: 13px;
      background: rgba(42,31,43,.97);
      box-shadow: 0 18px 55px rgba(6,3,7,.5);
      backdrop-filter: blur(15px);
    }
    .fixed-close {
      display: grid;
      width: 30px;
      height: 30px;
      place-items: center;
      border: 1px solid #594355;
      border-radius: 7px;
      background: transparent;
      color: var(--dim);
    }
    .fixed-close:hover {
      border-color: var(--accent);
      color: var(--text);
    }
    .mobile-filter-row {
      display: none;
      margin-top: 18px;
      gap: 8px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .mobile-filter-row::-webkit-scrollbar { display: none; }

    @media (max-width: 1024px) {
      .brand-name { max-width: 210px; font-size: 14px; }
      .desktop-search { min-width: 210px; }
      .content-layout { grid-template-columns: 210px minmax(0, 1fr); }
      .video-item { grid-template-columns: 180px minmax(0, 1fr); }
      .video-action {
        grid-column: 2;
        justify-content: flex-start;
      }
      .process-grid { grid-template-columns: 1fr 1.2fr; }
    }
    @media (max-width: 768px) {
      body { padding-bottom: 128px; }
      .site-container { width: min(calc(100% - 28px), var(--container)); }
      .desktop-search { display: none; }
      .header-cta { padding-inline: 12px; }
      .page-intro { padding: 42px 0 28px; }
      .tool-panel { display: none; }
      .mobile-filter-row { display: flex; }
      .summary-panel, .process-grid, .report-panel { grid-template-columns: 1fr; }
      .summary-aside { grid-template-columns: repeat(3, 1fr); }
      .summary-stat {
        padding: 16px;
        border-right: 1px solid var(--border);
        border-bottom: 0;
      }
      .summary-stat:last-child { border-right: 0; }
      .content-layout { grid-template-columns: 1fr; }
      .filter-sidebar { display: none; }
      .video-item, .video-item.featured {
        grid-template-columns: 165px minmax(0, 1fr);
      }
      .video-item.featured { padding: 13px; }
      .video-item.featured .video-thumb {
        min-height: 0;
        border-radius: 9px;
      }
      .video-item.featured .video-info { padding: 0; }
      .featured .video-title { font-size: 19px; }
      .guide-list, .related-grid { grid-template-columns: 1fr; }
      .feedback-strip { grid-template-columns: 1fr; }
      .feedback-cell { min-height: 0; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .footer-grid > :first-child { grid-column: 1 / -1; }
      .fixed-cta { bottom: 10px; }
    }
    @media (max-width: 520px) {
      body { padding-bottom: 154px; }
      .site-container { width: min(calc(100% - 22px), var(--container)); }
      .brand-mark { width: 38px; height: 38px; }
      .brand-name {
        max-width: 136px;
        font-size: 12px;
      }
      .header-cta span { display: none; }
      .header-cta { width: 42px; min-height: 40px; padding: 8px; }
      .page-title { font-size: 32px; }
      .page-lead { font-size: 15px; }
      .section { padding: 48px 0; }
      .summary-main { padding: 21px; }
      .summary-aside { grid-template-columns: 1fr; }
      .summary-stat {
        border-right: 0;
        border-bottom: 1px solid var(--border);
      }
      .video-item, .video-item.featured {
        grid-template-columns: 116px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
      }
      .video-title, .featured .video-title { font-size: 15px; }
      .video-desc {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 12px;
      }
      .video-meta { display: none; }
      .video-action { grid-column: 1 / -1; }
      .video-action .compact-button { width: 100%; justify-content: center; }
      .play-icon { width: 36px; height: 36px; }
      .list-toolbar { align-items: flex-start; flex-direction: column; }
      .guide-list { grid-template-columns: 1fr; }
      .report-form { grid-template-columns: 1fr; }
      .form-help { grid-column: 1; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-grid > :first-child { grid-column: auto; }
      .fixed-cta {
        right: 8px;
        bottom: 8px;
        left: 8px;
        padding: 10px;
      }
      .fixed-cta .fixed-copy { font-size: 12px; }
      .fixed-cta .button { min-height: 40px; padding: 8px 11px; font-size: 12px; }
    }
    @media (max-width: 375px) {
      .brand-name { max-width: 112px; }
      .video-item, .video-item.featured { grid-template-columns: 100px minmax(0, 1fr); }
      .tag-row .tag:nth-child(n+3) { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
      }
    }