/* roulang page: index */
:root {
            --night: #05070d;
            --night2: #0a0f1a;
            --night-deep: #04060c;
            --ink: #e8eefc;
            --ink-mid: #9db0d0;
            --ink-dim: #5f7398;
            --ice: #4fd1e8;
            --gold: #e8c384;
            --line: rgba(255, 255, 255, .1);
            --panel: rgba(255, 255, 255, .05);
            --panel-hover: rgba(255, 255, 255, .09);
            --glow: rgba(79, 209, 232, .25);
            --radius-xl: 24px;
            --radius-lg: 16px;
            --radius-md: 12px;
            --radius-sm: 8px;
            --ease: .28s cubic-bezier(.4, .2, .2, 1);
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            background: var(--night);
            color: var(--ink);
            font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Inter", -apple-system, sans-serif;
            font-size: 1rem;
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

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

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

        button {
            cursor: pointer;
            font: inherit;
        }

        h1, h2, h3, h4, p, ul, ol {
            margin: 0;
        }

        ul, ol {
            padding: 0;
            list-style: none;
        }

        a:focus-visible,
        button:focus-visible,
        summary:focus-visible {
            outline: 2px solid var(--ice);
            outline-offset: 4px;
            border-radius: .6rem;
        }

        .container {
            width: min(1220px, 100%);
            margin-inline: auto;
            padding-inline: clamp(1rem, 3vw, 1.5rem);
        }

        .section {
            padding-block: clamp(3.5rem, 8vw, 6.5rem);
        }

        .section-soft {
            background: var(--night2);
        }

        .section-deep {
            background: var(--night-deep);
            border-block: 1px solid rgba(255, 255, 255, .06);
        }

        .glass {
            background: var(--panel);
            border: 1px solid var(--line);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: var(--radius-lg);
        }

        .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: .55rem;
            color: var(--ice);
            font-size: .8rem;
            font-weight: 600;
            letter-spacing: .08em;
            text-transform: uppercase;
            margin-bottom: .8rem;
        }

        .section-kicker::before {
            content: "";
            width: 16px;
            height: 2px;
            border-radius: 99px;
            background: var(--ice);
            box-shadow: 0 0 12px var(--ice);
        }

        .section-title {
            font-size: clamp(1.6rem, 3vw, 2.25rem);
            font-weight: 600;
            letter-spacing: .02em;
            line-height: 1.3;
        }

        .section-lead {
            color: var(--ink-mid);
            font-size: 1rem;
            max-width: 640px;
        }

        img, figure {
            margin: 0;
        }

        .stars-muted {
            color: var(--gold);
            font-size: .85rem;
            letter-spacing: 1px;
        }

        .logo-copy {
            letter-spacing: .06em;
        }

        /* ========== header / nav ========== */
        .site-header {
            position: sticky;
            top: 0;
            z-index: 80;
            background: rgba(5, 7, 13, .82);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid var(--line);
        }

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

        .brand {
            display: inline-flex;
            align-items: center;
            gap: .65rem;
            letter-spacing: .02em;
        }

        .brand-mark {
            width: 38px;
            height: 38px;
            flex: none;
            border-radius: 999px;
            display: grid;
            place-items: center;
            background: radial-gradient(circle at 30% 30%, rgba(79, 209, 232, .3), rgba(79, 209, 232, .08));
            border: 1px solid rgba(79, 209, 232, .45);
            box-shadow: 0 0 22px rgba(79, 209, 232, .2);
            color: var(--ice);
            font-size: 1.2rem;
        }

        .brand-name {
            font-weight: 600;
            font-size: clamp(1.05rem, 2.3vw, 1.3rem);
            color: var(--ink);
        }

        .brand-name small {
            display: block;
            font-size: .55rem;
            font-weight: 400;
            letter-spacing: .35em;
            color: var(--ink-dim);
            margin-top: .1rem;
        }

        .brand-suffix {
            color: var(--ice);
        }

        .header-tools {
            display: flex;
            align-items: center;
            gap: .7rem;
        }

        .header-status {
            font-size: .76rem;
            color: var(--ink-mid);
            border: 1px solid var(--line);
            padding: .3rem .8rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, .03);
        }

        .header-status i {
            color: var(--ice);
            margin-right: .4rem;
        }

        .search-btn,
        .icon-btn {
            width: 36px;
            height: 36px;
            display: inline-grid;
            place-items: center;
            border-radius: 999px;
            border: 1px solid var(--line);
            color: var(--ink-mid);
            background: rgba(255, 255, 255, .04);
            transition: border-color var(--ease), color var(--ease), box-shadow var(--ease);
        }

        .search-btn:hover {
            color: var(--ice);
            border-color: rgba(79, 209, 232, .5);
            box-shadow: 0 0 18px rgba(79, 209, 232, .15);
        }

        .channel-nav {
            border-top: 1px solid rgba(255, 255, 255, .06);
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: .25rem;
            min-height: 48px;
        }

        .nav-link {
            position: relative;
            display: inline-flex;
            align-items: center;
            white-space: nowrap;
            font-size: .95rem;
            font-weight: 500;
            color: var(--ink-mid);
            padding: .5rem .9rem;
            border-radius: 999px;
            transition: color var(--ease), background var(--ease);
        }

        .nav-link i {
            font-size: .95rem;
            opacity: .8;
        }

        .nav-link::after {
            content: "";
            position: absolute;
            left: .9rem;
            right: auto;
            bottom: 9px;
            width: 0;
            height: 2px;
            border-radius: 99px;
            background: var(--ice);
            transition: width .3s ease;
        }

        .nav-link:hover {
            color: var(--ink);
            background: rgba(255, 255, 255, .04);
        }

        .nav-link:hover::after {
            width: calc(100% - 1.8rem);
        }

        .nav-link.active {
            color: var(--ice);
            background: rgba(79, 209, 232, .08);
        }

        .nav-link.active::after {
            width: calc(100% - 1.8rem);
        }

        @media (max-width: 768px) {
            .channel-nav .nav-links {
                overflow-x: auto;
                scrollbar-width: none;
                padding-inline: .35rem;
            }
            .channel-nav .nav-links::-webkit-scrollbar {
                display: none;
            }
            .header-status {
                display: none;
            }
            .brand-name small {
                display: none;
            }
        }

        /* ========== buttons / badges ========== */
        .btn-glow,
        .btn-ghost {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            font-weight: 600;
            font-size: .95rem;
            padding: .82rem 1.45rem;
            border-radius: 999px;
            transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease), background-color var(--ease);
        }

        .btn-glow {
            background: linear-gradient(135deg, #6fe4f7, #41b9d4);
            color: #04151a;
            border: none;
            box-shadow: 0 0 26px rgba(79, 209, 232, .25), inset 0 1px rgba(255, 255, 255, .45);
        }

        .btn-glow:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 40px rgba(79, 209, 232, .38);
        }

        .btn-ghost {
            border: 1px solid rgba(255, 255, 255, .22);
            background: rgba(255, 255, 255, .04);
            color: var(--ink);
            backdrop-filter: blur(8px);
        }

        .btn-ghost:hover {
            border-color: rgba(79, 209, 232, .6);
            color: var(--ice);
            background: rgba(79, 209, 232, .07);
            transform: translateY(-2px);
        }

        .btn-small {
            padding: .45rem 1rem;
            font-size: .85rem;
            font-weight: 600;
            border-radius: 999px;
            border: 1px solid var(--line);
            color: var(--ink-mid);
            background: rgba(255, 255, 255, .04);
            transition: color var(--ease), border-color var(--ease), background var(--ease);
        }

        .btn-small:hover {
            color: var(--ice);
            border-color: var(--ice);
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: .55rem;
            font-size: .78rem;
            letter-spacing: .14em;
            color: var(--ice);
            border: 1px solid rgba(79, 209, 232, .35);
            background: rgba(5, 9, 16, .55);
            padding: .5rem 1rem;
            border-radius: 999px;
            backdrop-filter: blur(10px);
            box-shadow: 0 0 18px rgba(79, 209, 232, .12);
        }

        .badge-gold {
            color: var(--gold);
            font-size: .8rem;
            font-weight: 600;
            border: 1px solid rgba(232, 195, 132, .35);
            background: rgba(232, 195, 132, .10);
            padding: .2rem .7rem;
            border-radius: 999px;
        }

        .badge-soft {
            color: var(--ice);
            background: rgba(79, 209, 232, .12);
            border: 1px solid rgba(79, 209, 232, .20);
            padding: .2rem .6rem;
            border-radius: 99px;
            font-size: .8rem;
            letter-spacing: .04em;
        }

        /* ========== hero ========== */
        .hero-section {
            position: relative;
            min-height: 78vh;
            display: flex;
            align-items: center;
            overflow: hidden;
        }

        .hero-bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center 62%;
            filter: saturate(.8);
            will-change: transform;
        }

        .hero-bg::after {
            content: "";
            position: absolute;
            inset: auto 0 0 0;
            height: 58%;
            background: linear-gradient(180deg, rgba(5, 7, 13, 0) 0%, var(--night) 100%);
        }

        .hero-bg::before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(5, 7, 13, .66);
        }

        .hero-main {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr);
            align-items: center;
            gap: clamp(2rem, 6vw, 4.5rem);
            min-height: 78vh;
        }

        .hero-title {
            font-size: clamp(2.1rem, 5.4vw, 4rem);
            font-weight: 700;
            line-height: 1.2;
            margin: 1.4rem 0 1.35rem;
            letter-spacing: .02em;
        }

        .hero-title .star-word {
            color: var(--ice);
            text-shadow: 0 0 34px rgba(79, 209, 232, .55);
        }

        .hero-lead {
            color: var(--ink-mid);
            font-size: clamp(.98rem, 1.6vw, 1.12rem);
            line-height: 1.85;
            max-width: 580px;
        }

        .hero-actions {
            margin-top: 2.2rem;
            display: flex;
            flex-wrap: wrap;
            gap: .9rem;
        }

        .hero-feature {
            position: relative;
            border-radius: var(--radius-xl);
            overflow: hidden;
            background: rgba(20, 27, 42, .68);
            border: 1px solid rgba(255, 255, 255, .15);
            box-shadow: 0 24px 70px rgba(0, 0, 0, .4);
            padding: 1rem;
            backdrop-filter: blur(10px);
        }

        .hero-feature-box {
            border-radius: var(--radius-xl);
            overflow: hidden;
            position: relative;
            min-height: 300px;
            background: url('/assets/images/coverpic/cover-2.webp') center/cover no-repeat;
            display: flex;
            align-items: flex-end;
            padding: 1rem;
        }

        .hero-feature-box::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(5, 7, 13, 0) 35%, rgba(5, 7, 13, .93) 100%);
        }

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

        @media (max-width: 900px) {
            .hero-main {
                grid-template-columns: 1fr;
                padding-top: 4rem;
                padding-bottom: 5rem;
            }
            .hero-feature {
                max-width: 420px;
            }
            .hero-section {
                min-height: auto;
            }
        }

        /* ===== 横滑 rail ===== */
        .section-title-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            gap: 1rem;
            margin-bottom: 2rem;
            flex-wrap: wrap;
        }

        .rail-wrap {
            position: relative;
        }

        .rail-track {
            display: flex;
            gap: 1.05rem;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            padding: 0.2rem 0.2rem 1rem 0.2rem;
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, .15) transparent;
        }

        .rail-track::-webkit-scrollbar {
            height: 4px;
        }

        .rail-track::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, .16);
            border-radius: 99px;
        }

        .rail-card {
            flex: 0 0 240px;
            scroll-snap-align: start;
            display: flex;
            flex-direction: column;
            border: 1px solid var(--line);
            background: var(--panel);
            border-radius: var(--radius-lg);
            overflow: hidden;
            transition: transform var(--ease), border-color var(--ease), background-color var(--ease), box-shadow var(--ease);
        }

        .rail-card .figure {
            aspect-ratio: 3 / 4;
            overflow: hidden;
            position: relative;
        }

        .rail-card .figure img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .5s ease;
        }

        .rail-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 50px rgba(0, 0, 0, .30);
            background: rgba(255, 255, 255, .07);
            border-color: rgba(255, 255, 255, .25);
        }

        .rail-card:hover img {
            transform: scale(1.06);
        }

        .rail-body {
            padding: .85rem .9rem 1rem;
            display: flex;
            gap: .3rem;
            flex-direction: column;
        }

        .rail-title {
            font-weight: 600;
            font-size: .95rem;
            line-height: 1.5;
        }

        .rail-desc {
            font-size: .8rem;
            color: var(--ink-dim);
        }

        /* ===== announcement ===== */
        .announce-banner {
            display: flex;
            align-items: center;
            gap: 1rem;
            background: rgba(232, 195, 132, .08);
            border: 1px solid rgba(232, 195, 132, .22);
            border-radius: var(--radius-xl);
            padding: 1rem 1.5rem;
            color: var(--ink);
            position: relative;
            overflow: hidden;
        }

        .announce-banner i {
            color: var(--gold);
            font-size: 1.3rem;
            position: relative;
            z-index: 2;
        }

        .announce-banner strong {
            color: var(--gold);
            font-weight: 600;
            margin-right: .4rem;
        }

        .announce-text {
            font-size: clamp(.9rem, 1.6vw, 1rem);
            line-height: 1.7;
            position: relative;
            z-index: 2;
            flex: 1;
        }

        .announce-arrow {
            margin-left: auto;
            color: var(--ink-mid);
            transition: color var(--ease);
        }

        .announce-arrow:hover {
            color: var(--gold);
        }

        /* ===== cover product cards ===== */
        .cover-grid {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 1.1rem;
        }

        .cover-card {
            position: relative;
            border: 1px solid var(--line);
            background: var(--panel);
            border-radius: var(--radius-lg);
            overflow: hidden;
            transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
            display: flex;
            flex-direction: column;
            backdrop-filter: blur(4px);
        }

        .cover-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 18px 46px rgba(0, 0, 0, .42);
            border-color: rgba(255, 255, 255, .26);
        }

        .cover-media {
            aspect-ratio: 3 / 4;
            overflow: hidden;
            position: relative;
        }

        .cover-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .5s ease;
        }

        .cover-card:hover .cover-media img {
            transform: scale(1.05);
        }

        .cover-media::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(5, 7, 13, 0) 60%, rgba(5, 7, 13, .86));
        }

        .card-tag {
            position: absolute;
            top: .7rem;
            left: .7rem;
            z-index: 3;
        }

        .card-rating {
            position: absolute;
            bottom: .7rem;
            right: .7rem;
            z-index: 3;
            display: inline-flex;
            align-items: center;
            gap: .3rem;
            font-size: .8rem;
            color: #fff;
            background: rgba(5, 7, 13, .6);
            padding: .2rem .5rem;
            border-radius: 6px;
            backdrop-filter: blur(6px);
        }

        .card-rating i {
            color: var(--gold);
        }

        .card-copy {
            padding: .95rem 1rem 1.1rem;
        }

        .card-title {
            font-size: .98rem;
            line-height: 1.5;
            font-weight: 600;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .card-meta {
            margin-top: .5rem;
            display: flex;
            align-items: center;
            gap: .4rem;
            font-size: .78rem;
            color: var(--ink-dim);
        }

        @media (max-width: 1024px) {
            .cover-grid {
                grid-template-columns: repeat(4, minmax(0, 1fr));
            }
        }

        @media (max-width: 768px) {
            .cover-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 480px) {
            .cover-grid {
                grid-template-columns: 1fr 1fr;
                gap: .7rem;
            }
            .card-copy {
                padding: .6rem .6rem .75rem;
            }
            .card-title {
                font-size: .82rem;
            }
        }

        /* ===== featured split blocks ===== */
        .mosaic {
            display: grid;
            grid-template-columns: 1fr 1.3fr;
            gap: 1.25rem;
            background: var(--panel);
            border: 1px solid var(--line);
            border-radius: var(--radius-xl);
            padding: 1.25rem;
            backdrop-filter: blur(12px);
            transition: border-color var(--ease), background var(--ease);
        }

        .mosaic:hover {
            border-color: rgba(255, 255, 255, .2);
        }

        .mosaic-visual {
            height: 100%;
            min-height: 410px;
            border-radius: var(--radius-lg);
            overflow: hidden;
            background-size: cover;
            background-position: center;
            position: relative;
            display: flex;
            align-items: flex-end;
            padding: 1.4rem;
        }

        .mosaic-visual::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 15%, rgba(5, 7, 13, .9));
        }

        .mosaic-visual-copy {
            position: relative;
            z-index: 3;
        }

        .mosaic-content {
            padding: .7rem .4rem .7rem .4rem;
            display: flex;
            flex-direction: column;
            gap: .35rem;
        }

        .mosaic-title {
            font-size: clamp(1.15rem, 2.2vw, 1.5rem);
            font-weight: 600;
            line-height: 1.4;
        }

        .mosaic > .mosaic-content:first-child:not(.mosaic-visual) {}

        .tick-list {
            display: flex;
            flex-direction: column;
            gap: .2rem;
            margin-top: .6rem;
        }

        .tick-item {
            display: flex;
            gap: 1rem;
            padding: .8rem .4rem;
            border-bottom: 1px solid rgba(255, 255, 255, .08);
            align-items: center;
            transition: background-color var(--ease), padding var(--ease);
            color: var(--ink-mid);
            border-radius: 10px;
        }

        .tick-item:last-of-type {
            border-bottom: none;
        }

        .tick-item:hover {
            background: rgba(255, 255, 255, .04);
            color: var(--ink);
            padding-inline: .6rem;
        }

        .tick-rank {
            font-family: "Inter", "Helvetica Neue", sans-serif;
            color: var(--gold);
            font-weight: 600;
            font-size: .9rem;
            min-width: 2.1rem;
            letter-spacing: .06em;
        }

        .tick-copy {
            flex: 1;
        }

        .tick-copy strong {
            display: block;
            font-weight: 600;
            font-size: .98rem;
            color: var(--ink);
            line-height: 1.45;
        }

        .tick-copy span {
            color: var(--ink-dim);
            font-size: .82rem;
        }

        @media (max-width: 1000px) {
            .mosaic {
                grid-template-columns: 1fr;
            }
            .mosaic-visual {
                min-height: 260px;
            }
        }

        /* ========== CMS latest ========== */
        .latest-grid {
            display: grid;
            grid-template-columns: 1.35fr .85fr;
            gap: clamp(1.5rem, 4vw, 3rem);
            align-items: start;
        }

        .latest-feature {
            display: flex;
            flex-direction: column;
            gap: .8rem;
            border: 1px solid var(--line);
            background: rgba(255, 255, 255, .04);
            padding: 1.4rem;
            border-radius: var(--radius-xl);
            transition: border-color var(--ease), transform var(--ease);
        }

        .latest-feature:hover {
            border-color: rgba(79, 209, 232, .35);
            transform: translateY(-3px);
        }

        .feature-date {
            font-size: .82rem;
            color: var(--ink-dim);
        }

        .latest-stack {
            display: flex;
            flex-direction: column;
            gap: .4rem;
            border: 1px solid var(--line);
            background: rgba(255, 255, 255, .025);
            border-radius: var(--radius-xl);
            padding: 1.25rem 1.1rem;
        }

        .stack-title {
            font-size: .82rem;
            letter-spacing: .1em;
            color: var(--ink-dim);
            padding: 0 .4rem .25rem;
        }

        .stack-item {
            display: flex;
            gap: .5rem;
            align-items: center;
            padding: .65rem .5rem;
            border-radius: var(--radius-md);
            color: var(--ink);
            transition: background var(--ease), padding-left var(--ease);
        }

        .stack-item:hover {
            background: rgba(79, 209, 232, .08);
            padding-left: .8rem;
        }

        .stack-item span {
            display: flex;
            flex-direction: column;
        }

        .stack-item small {
            color: var(--ink-dim);
            font-size: .76rem;
        }

        .stack-item i {
            margin-left: auto;
            color: var(--ice);
            opacity: 0;
            transition: opacity var(--ease);
        }

        .stack-item:hover i {
            opacity: 1;
        }

        .latest-feature h3 {
            font-size: clamp(1.35rem, 2.4vw, 1.72rem);
            font-weight: 600;
            line-height: 1.5;
        }

        .latest-feature p {
            color: var(--ink-mid);
            line-height: 1.8;
            font-size: .96rem;
        }

        .cms-empty {
            grid-column: 1 / -1;
            text-align: center;
            border: 1px dashed rgba(255, 255, 255, .18);
            background: rgba(255, 255, 255, .025);
            border-radius: var(--radius-lg);
            padding: 3.4rem 1.2rem;
            color: var(--ink-mid);
            font-size: .98rem;
        }

        .cms-empty i {
            display: block;
            font-size: 1.8rem;
            color: var(--ink-dim);
            margin-bottom: .8rem;
        }

        @media (max-width: 860px) {
            .latest-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ========== CTA ========== */
        .cta-band {
            position: relative;
            border-radius: var(--radius-xl);
            max-width: 1120px;
            margin-inline: auto;
            overflow: hidden;
            background: #091423;
            padding: clamp(2.3rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 5rem);
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 1px solid rgba(255, 255, 255, .12);
        }

        .cta-band::before,
        .cta-band::after {
            content: "";
            width: 440px;
            height: 220px;
            background: radial-gradient(closest-side, rgba(79, 209, 232, .35), transparent);
            position: absolute;
            filter: blur(20px);
            pointer-events: none;
            border-radius: 50%;
        }

        .cta-band::before {
            top: -90px;
            left: -90px;
        }

        .cta-band::after {
            bottom: -150px;
            right: -120px;
            background: radial-gradient(closest-side, rgba(232, 195, 132, .2), transparent);
        }

        .cta-inner {
            position: relative;
            z-index: 2;
            max-width: 600px;
        }

        .cta-inner h2 {
            font-size: clamp(1.6rem, 3vw, 2.2rem);
            font-weight: 600;
            line-height: 1.45;
        }

        .cta-inner p {
            color: var(--ink-mid);
            margin: 1.1rem 0 2rem;
        }

        /* ========== FAQ ========== */
        .faq-grid {
            display: flex;
            flex-direction: column;
            gap: .9rem;
        }

        .faq-columns {
            display: grid;
            grid-template-columns: .65fr 1.35fr;
            gap: clamp(1.4rem, 4vw, 3.4rem);
            align-items: start;
        }

        .faq-summary {
            position: sticky;
            top: 130px;
        }

        .faq-item {
            border: 1px solid var(--line);
            background: var(--panel);
            border-radius: var(--radius-lg);
            overflow: hidden;
            transition: border-color var(--ease), background var(--ease);
            backdrop-filter: blur(8px);
        }

        .faq-item:hover {
            border-color: rgba(79, 209, 232, .24);
        }

        .faq-item[open] {
            border-color: rgba(79, 209, 232, .36);
        }

        .faq-item summary {
            display: flex;
            align-items: center;
            gap: .8rem;
            padding: 1.15rem 1.3rem;
            list-style: none;
            cursor: pointer;
            font-weight: 600;
            color: var(--ink);
            transition: background-color var(--ease);
        }

        .faq-item summary::-webkit-details-marker {
            display: none;
        }

        .faq-icon {
            color: var(--ice);
            width: 20px;
            flex: none;
        }

        .faq-item .answer {
            padding: .1rem 1.8rem 1.35rem 3.5rem;
            color: var(--ink-mid);
            line-height: 1.95;
        }

        .faq-item details[open] summary .fa-chevron-down {
            transform: rotate(180deg);
        }

        .chev {
            transition: transform .25s ease;
            margin-left: auto;
            color: var(--ink-dim);
        }

        @media (max-width: 820px) {
            .faq-columns {
                grid-template-columns: 1fr;
            }
            .faq-summary {
                position: static;
                margin-bottom: .9rem;
            }
        }

        /* ========== footer ========== */
        .site-footer {
            background: var(--night-deep);
            border-top: 1px solid rgba(255, 255, 255, .08);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr;
            gap: 2.4rem;
            padding-block: 3.6rem 2.2rem;
        }

        .footer-brand .brand-name {
            font-size: 1.15rem;
        }

        .footer-desc {
            color: var(--ink-dim);
            font-size: .9rem;
            margin-top: .8rem;
            max-width: 360px;
            line-height: 1.9;
        }

        .footer-title {
            color: var(--ink-mid);
            font-size: .8rem;
            letter-spacing: .12em;
            text-transform: uppercase;
            margin-bottom: 1rem;
        }

        .footer-links a {
            display: inline-flex;
            margin-bottom: .6rem;
            color: var(--ink-dim);
            transition: color var(--ease), padding-left var(--ease);
        }

        .footer-links a:hover {
            color: var(--ice);
            padding-left: .3rem;
        }

        .footer-meta {
            border-top: 1px solid rgba(255, 255, 255, .07);
            padding: 1.3rem 0 1.7rem;
            color: var(--ink-dim);
            font-size: .88rem;
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        @media (max-width: 820px) {
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
        }

        /* ===== misc ===== */
        .soft-divider {
            border-top: 1px solid rgba(255, 255, 255, .07);
            height: 0;
            margin-block: 4rem;
        }

        .focus-line {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            color: var(--ice);
            font-weight: 500;
            font-size: .92rem;
            transition: gap var(--ease), filter var(--ease);
        }

        .focus-line:hover {
            gap: .8rem;
        }

        @media (max-width: 520px) {
            .hero-actions .btn-glow,
            .hero-actions .btn-ghost {
                width: 100%;
            }
            .brand-name {
                font-size: 1rem;
            }
            .nav-link {
                font-size: .88rem;
                padding-inline: .7rem;
            }
        }

/* roulang page: article */
:root {
            --bg-deep: #05070d;
            --bg-panel: #0a0f1a;
            --brand: #4fd1e8;
            --brand-soft: rgba(79, 209, 232, .12);
            --gold: #e8c384;
            --text-main: #e8eefc;
            --text-sub: #9db0d0;
            --text-dim: #5f7398;
            --card-bg: rgba(255, 255, 255, .05);
            --card-bg-hover: rgba(255, 255, 255, .08);
            --line: rgba(255, 255, 255, .1);
            --line-bright: rgba(255, 255, 255, .25);
            --glow: 0 0 18px rgba(79, 209, 232, .25);
            --radius-md: 16px;
            --radius-lg: 24px;
            --shadow-card: 0 8px 30px rgba(0, 0, 0, .45);
            --font-sans: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, -apple-system, sans-serif;
        }

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

        html {
            scroll-behavior: smooth;
            -webkit-font-smoothing: antialiased;
        }

        body {
            font-family: var(--font-sans);
            background: var(--bg-deep);
            color: var(--text-main);
            line-height: 1.75;
            overflow-x: hidden;
        }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            background:
                radial-gradient(circle at 18% 22%, rgba(79, 209, 232, .08), transparent 24rem),
                radial-gradient(circle at 88% 68%, rgba(232, 195, 132, .05), transparent 20rem);
            z-index: 0;
        }

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

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

        button {
            font-family: inherit;
            cursor: pointer;
            border: 0;
            background: none;
        }

        input,
        textarea {
            font-family: inherit;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding-left: 1.25rem;
            padding-right: 1.25rem;
            position: relative;
            z-index: 1;
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 60;
            background: rgba(5, 7, 13, .82);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid var(--line);
        }

        .brand-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: .85rem;
            padding-bottom: .85rem;
            gap: 1rem;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: .7rem;
        }

        .brand-mark {
            width: 2.4rem;
            height: 2.4rem;
            display: grid;
            place-items: center;
            border-radius: 50%;
            color: var(--brand);
            background: radial-gradient(circle, rgba(79, 209, 232, .2), rgba(79, 209, 232, .02));
            border: 1px solid rgba(79, 209, 232, .4);
            box-shadow: var(--glow);
            font-size: 1rem;
        }

        .brand-name {
            display: flex;
            flex-direction: column;
            font-size: 1.08rem;
            font-weight: 700;
            letter-spacing: .02em;
            line-height: 1.3;
        }

        .brand-name small {
            font-size: .58rem;
            font-weight: 500;
            letter-spacing: .26em;
            color: var(--text-dim);
            margin-top: .15rem;
        }

        .header-tools {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .header-status {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            font-size: .8rem;
            color: var(--text-sub);
            background: rgba(255, 255, 255, .04);
            border: 1px solid var(--line);
            border-radius: 999px;
            padding: .3rem .9rem;
        }

        .header-status i {
            color: var(--brand);
            font-size: .5rem;
            animation: pulse-dot 2s infinite ease-in-out;
        }

        @keyframes pulse-dot {
            0%,
            100% {
                opacity: 1;
                box-shadow: 0 0 0 0 rgba(79, 209, 232, .5);
            }
            50% {
                opacity: .6;
                box-shadow: 0 0 0 5px rgba(79, 209, 232, 0);
            }
        }

        .search-btn {
            width: 2.2rem;
            height: 2.2rem;
            display: grid;
            place-items: center;
            border-radius: 50%;
            color: var(--text-sub);
            border: 1px solid var(--line);
            transition: all .3s ease;
            font-size: .9rem;
        }

        .search-btn:hover {
            border-color: rgba(79, 209, 232, .6);
            color: var(--brand);
            box-shadow: var(--glow);
        }

        .channel-nav {
            border-top: 1px solid rgba(255, 255, 255, .06);
            background: rgba(5, 7, 13, .6);
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: .5rem;
            overflow-x: auto;
            padding: 0;
            scrollbar-width: none;
        }

        .nav-links::-webkit-scrollbar {
            display: none;
        }

        .nav-link {
            position: relative;
            padding: .7rem .9rem;
            font-size: .92rem;
            color: var(--text-sub);
            white-space: nowrap;
            transition: color .3s ease;
            border-bottom: 2px solid transparent;
            letter-spacing: .02em;
        }

        .nav-link i {
            margin-right: .3rem;
            color: var(--brand);
            opacity: .7;
            font-size: .8em;
        }

        .nav-link:hover {
            color: var(--text-main);
        }

        .nav-link.active {
            color: var(--brand);
            font-weight: 600;
            border-bottom-color: var(--brand);
        }

        .page-article {
            position: relative;
            z-index: 2;
            padding-top: 4rem;
        }

        .content-top {
            margin-bottom: 2.25rem;
        }

        .article-crumb {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: .4rem;
            font-size: .85rem;
            color: var(--text-dim);
            margin-bottom: 2.4rem;
        }

        .article-crumb a {
            color: var(--text-sub);
            transition: color .25s ease;
        }

        .article-crumb a:hover {
            color: var(--brand);
        }

        .article-crumb i {
            font-size: .7rem;
            color: var(--text-dim);
        }

        .article-crumb .crumb-current {
            color: var(--brand);
        }

        .article-crumb .crumb-tag {
            background: var(--brand-soft);
            border: 1px solid rgba(79, 209, 232, .3);
            padding: .14rem .6rem;
            border-radius: 4px;
            font-size: .78rem;
        }

        .article-title-wrap h1 {
            font-size: clamp(2rem, 5.4vw, 3.3rem);
            font-weight: 700;
            line-height: 1.24;
            letter-spacing: .01em;
            background: linear-gradient(180deg, #ffffff 0%, #cbd5f4 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 1.2rem;
        }

        .article-meta-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: .7rem 1.7rem;
            color: var(--text-dim);
            font-size: .86rem;
            margin-top: 1.4rem;
        }

        .article-meta-row span {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
        }

        .meta-tag-divider {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--text-dim);
        }

        .article-content-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 3rem;
        }

        .article-card {
            background: linear-gradient(180deg, rgba(79, 209, 232, .06), rgba(255, 255, 255, .02));
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            padding: clamp(1.4rem, 3vw, 3rem);
            overflow: hidden;
            position: relative;
        }

        .article-card::after {
            content: "";
            position: absolute;
            left: 8%;
            top: 0;
            width: 40%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(79, 209, 232, .6), transparent);
        }

        .cms-content-wrapper {
            max-width: 70ch;
            margin: 0 auto;
        }

        .cms-content {
            font-size: 1.075rem;
            line-height: 1.95;
            color: #c6d2ea;
        }

        .cms-content p {
            margin-bottom: 1.6em;
        }

        .cms-content h2 {
            font-size: 1.6rem;
            font-weight: 700;
            color: var(--text-main);
            margin: 2.6em 0 0.9em;
            line-height: 1.35;
            letter-spacing: .01em;
            padding-left: .7rem;
            border-left: 3px solid var(--brand);
        }

        .cms-content h3 {
            font-size: 1.22rem;
            font-weight: 600;
            color: #dfe7f8;
            margin: 2em 0 .7em;
            line-height: 1.45;
        }

        .cms-content blockquote {
            margin: 1.8em 0;
            border-left: 3px solid var(--gold);
            padding: 1rem 1.4rem;
            background: rgba(232, 195, 132, .06);
            border-radius: 4px;
            color: var(--text-main);
        }

        .cms-content blockquote p {
            margin-bottom: .5rem;
        }

        .cms-content ul,
        .cms-content ol {
            margin: 1.4em 0 1.8em 1.4em;
        }

        .cms-content ul {
            list-style: none;
        }

        .cms-content ul li,
        .cms-content ol li {
            margin-bottom: .55em;
        }

        .cms-content ul li {
            padding-left: 1.5rem;
            position: relative;
        }

        .cms-content ul li:before {
            content: "✦";
            position: absolute;
            left: 0;
            color: var(--brand);
            font-size: .8rem;
            top: .35em;
        }

        .cms-content ol {
            list-style: decimal;
            padding-left: 1.2rem;
        }

        .cms-content ol li::marker {
            color: var(--gold);
            font-weight: 600;
        }

        .cms-content img {
            border-radius: 16px;
            margin: 2.4rem 0 1rem;
            box-shadow: var(--shadow-card);
            width: 100%;
            object-fit: cover;
        }

        .cms-content a {
            color: var(--brand);
            transition: color .25s ease;
            text-decoration: underline;
            text-decoration-color: rgba(79, 209, 232, .5);
            text-underline-offset: 4px;
        }

        .cms-content a:hover {
            color: #fff;
        }

        .cms-content table {
            width: 100%;
            border-collapse: collapse;
            margin: 1.8rem 0;
            font-size: .92rem;
        }

        .cms-content th,
        .cms-content td {
            border: 1px solid var(--line);
            padding: .7rem .9rem;
            text-align: left;
        }

        .cms-content th {
            background: var(--card-bg);
            color: var(--text-main);
            font-weight: 600;
        }

        .cms-content td {
            color: var(--text-sub);
        }

        .cms-content figure {
            margin: 2.2rem 0;
        }

        .cms-content figcaption {
            text-align: center;
            font-size: .82rem;
            color: var(--text-dim);
            margin-top: .7rem;
            letter-spacing: .03em;
        }

        .cms-content code {
            background: rgba(255, 255, 255, .08);
            border: 1px solid var(--line);
            padding: .16rem .5rem;
            border-radius: 6px;
            font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
            font-size: .86em;
            color: var(--brand);
        }

        .cms-content pre {
            background: #0e1524;
            border: 1px solid var(--line);
            padding: 1.2rem 1.4rem;
            border-radius: 12px;
            overflow-x: auto;
            margin: 1.6rem 0;
        }

        .cms-content pre code {
            background: transparent;
            border: 0;
            padding: 0;
            color: #d6e4ff;
            font-size: .9rem;
        }

        .article-bottom-nav {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: center;
            gap: 1.4rem;
            padding: 1.8rem 0 0;
            border-top: 1px solid var(--line);
            margin-top: 3.5rem;
        }

        .btn-back-cat {
            display: inline-flex;
            align-items: center;
            gap: .6rem;
            padding: .7rem 1.3rem;
            border-radius: 999px;
            border: 1px solid var(--line);
            color: var(--text-sub);
            font-size: .9rem;
            transition: all .3s ease;
            background: rgba(255, 255, 255, .04);
        }

        .btn-back-cat:hover {
            border-color: rgba(79, 209, 232, .55);
            color: var(--brand);
            background: var(--brand-soft);
            box-shadow: var(--glow);
        }

        .btn-share {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
        }

        .share-ring {
            display: grid;
            place-items: center;
            width: 2.2rem;
            height: 2.2rem;
            border-radius: 50%;
            border: 1px solid var(--line);
            color: var(--text-sub);
            transition: all .3s ease;
            font-size: .85rem;
            background: rgba(255, 255, 255, .03);
        }

        .share-ring:hover {
            color: var(--gold);
            border-color: rgba(232, 195, 132, .5);
        }

        .not-found-box {
            min-height: 60vh;
            display: grid;
            place-items: center;
            padding: 6rem 0;
        }

        .nf-inner {
            background: linear-gradient(180deg, rgba(79, 209, 232, .05), transparent);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            padding: 4rem 2rem;
            text-align: center;
            max-width: 680px;
            width: 100%;
        }

        .nf-inner .nf-mark {
            color: var(--brand);
            font-size: 2rem;
            display: block;
            margin-bottom: 1.2rem;
        }

        .nf-inner h2 {
            font-size: 1.8rem;
            margin-bottom: .8rem;
        }

        .nf-inner p {
            color: var(--text-sub);
            margin-bottom: 1.8rem;
        }

        .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: .6rem;
            padding: .85rem 1.8rem;
            border-radius: 999px;
            background: var(--brand);
            color: #00161c;
            font-weight: 700;
            font-size: .95rem;
            box-shadow: var(--glow);
            transition: all .3s ease;
        }

        .btn-primary:hover {
            background: rgba(79, 209, 232, .78);
            color: #000;
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(79, 209, 232, .35);
        }

        .btn-primary:active,
        .share-ring:active,
        .btn-back-cat:active {
            transform: scale(.97);
        }

        .section-cover {
            margin-top: 7rem;
        }

        .section-heading-compact {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            flex-wrap: wrap;
            gap: 1rem;
            margin-bottom: 1.7rem;
        }

        .section-title {
            font-size: clamp(1.3rem, 3vw, 1.7rem);
            font-weight: 600;
        }

        .section-title .star-dot {
            color: var(--brand);
            margin-right: .3rem;
            font-size: .8em;
        }

        .text-link {
            font-size: .88rem;
            color: var(--text-sub);
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            transition: color .3s ease;
        }

        .text-link:hover {
            color: var(--brand);
        }

        .related-strip {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1.5rem;
            margin: 1rem 0 2rem;
        }

        .related-chip {
            background: var(--card-bg);
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            padding: 1.2rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            transition: all .3s ease;
            backdrop-filter: blur(10px);
        }

        .related-chip .rc-img {
            width: 4.4rem;
            height: 4.4rem;
            border-radius: 14px;
            object-fit: cover;
            flex-shrink: 0;
        }

        .related-chip .rc-info h3 {
            font-size: .95rem;
            font-weight: 600;
            line-height: 1.4;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .related-chip .rc-arrow {
            display: flex;
            align-items: center;
            gap: .4rem;
            font-size: .78rem;
            color: var(--brand);
            margin-top: .5rem;
            opacity: 0;
            transform: translateX(-4px);
            transition: all .3s ease;
        }

        .related-chip:hover {
            background: var(--card-bg-hover);
            border-color: rgba(255, 255, 255, .18);
            transform: translateY(-4px);
            box-shadow: var(--shadow-card);
        }

        .related-chip:hover .rc-arrow {
            opacity: 1;
            transform: translateX(0);
        }

        .back-div {
            margin-bottom: 2.6rem;
        }

        .site-footer {
            position: relative;
            z-index: 1;
            background: #04060c;
            margin-top: 8rem;
            border-top: 1px solid rgba(255, 255, 255, .08);
            padding: 4rem 0 2rem;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.4fr .8fr 1fr;
            gap: 3rem;
            padding-bottom: 3rem;
        }

        .footer-brand .brand-name {
            font-size: 1rem;
        }

        .footer-desc {
            color: var(--text-sub);
            font-size: .87rem;
            line-height: 1.9;
            margin-top: 1rem;
            max-width: 40ch;
        }

        .footer-title {
            font-size: 1rem;
            color: var(--text-main);
            margin-bottom: 1rem;
            letter-spacing: .06em;
        }

        .footer-links a {
            color: var(--text-sub);
            font-size: .9rem;
            padding: .18rem 0;
            transition: color .25s ease;
        }

        .footer-links a:hover {
            color: var(--brand);
        }

        .footer-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: .8rem;
            border-top: 1px solid rgba(255, 255, 255, .08);
            padding-top: 1.6rem;
            color: var(--text-dim);
            font-size: .8rem;
        }

        @media (max-width: 1024px) {
            .related-strip {
                grid-template-columns: 1fr;
            }

            .footer-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 768px) {
            .brand-row {
                flex-direction: row;
            }

            .header-status {
                display: none;
            }

            .nav-link {
                font-size: .88rem;
            }

            .article-title-wrap h1 {
                font-size: clamp(1.55rem, 6vw, 2.3rem);
            }

            .page-article {
                padding-top: 3rem;
            }

            .cms-content-wrapper {
                padding: 0 .4rem;
            }

            .article-meta-row {
                gap: .35rem 1rem;
                font-size: .8rem;
            }

            .meta-tag-divider {
                display: none;
            }

            .action-button-area {
                display: none;
            }
        }

        @media (max-width: 576px) {
            .container {
                padding-left: 1.1rem;
                padding-right: 1.1rem;
            }

            .brand-name {
                font-size: .96rem;
            }

            .brand-name small {
                display: none;
            }

            .article-card {
                padding: 1.3rem 1.1rem 2rem;
                border-radius: 20px;
                margin: 0 -4px;
            }

            .cms-content {
                font-size: 1rem;
                line-height: 1.85;
            }

            .cms-content h2 {
                font-size: 1.35rem;
            }

            .footer-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .footer-meta {
                flex-direction: column;
                align-items: flex-start;
            }
        }

/* roulang page: category1 */
:root{
        --bg:#05070d;
        --bg2:#0a0f1a;
        --panel:#0e1626;
        --brand:#4fd1e8;
        --brand-dim:#37b7cf;
        --gold:#e8c384;
        --text:#e8eefc;
        --muted:#9db0d0;
        --weak:#5f7398;
        --line:rgba(255,255,255,.1);
        --glass:rgba(255,255,255,.05);
        --radius-card:16px;
        --radius-cover:12px;
        --radius-chip:6px;
        --ease:cubic-bezier(.22,.61,.36,1);
        --shadow-glow:0 0 22px rgba(79,209,232,.18);
        --maxw:1200px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
        margin:0;
        background:var(--bg);
        color:var(--text);
        font-family:"Inter","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,-apple-system,sans-serif;
        line-height:1.75;
        letter-spacing:.01em;
        -webkit-font-smoothing:antialiased;
        background-image:
            radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.24) 0, transparent 100%),
            radial-gradient(1px 1px at 82% 8%, rgba(255,255,255,.2) 0, transparent 100%),
            radial-gradient(1px 1px at 44% 70%, rgba(255,255,255,.16) 0, transparent 100%),
            radial-gradient(1px 1px at 70% 42%, rgba(255,255,255,.12) 0, transparent 100%);
        background-attachment:fixed;
    }
    .container{width:min(1200px,92%);margin-inline:auto}
    img{max-width:100%;display:block}
    a{color:inherit;text-decoration:none}
    a,button,input,summary{transition:all .25s var(--ease)}
    button{font-family:inherit}
    .site-header{
        width:100%;
        z-index:50;
        position:sticky;
        top:0;
        background:rgba(5,7,13,.72);
        backdrop-filter:blur(18px);
        -webkit-backdrop-filter:blur(18px);
        border-bottom:1px solid rgba(255,255,255,.07);
    }
    .brand-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
    .brand{display:inline-flex;align-items:center;gap:12px}
    .brand-mark{
        width:38px;height:38px;border-radius:50%;
        display:grid;place-items:center;
        background:radial-gradient(circle at 35% 30%, rgba(79,209,232,.5), rgba(79,209,232,.06) 72%);
        border:1px solid rgba(79,209,232,.4);
        box-shadow:var(--shadow-glow);
        color:var(--brand);font-size:15px;
    }
    .brand-name{
        font-size:1.08rem;font-weight:700;letter-spacing:.02em;color:var(--text);
        display:flex;flex-direction:column;line-height:1.3;
    }
    .brand-name small{font-size:.58rem;font-weight:500;letter-spacing:.32em;color:var(--weak);margin-top:2px}
    .header-tools{display:flex;align-items:center;gap:18px}
    .header-status{font-size:.8rem;color:var(--muted);display:inline-flex;align-items:center;gap:8px}
    .header-status i{color:var(--brand);font-size:.5rem;animation:pulse 2s infinite}
    @keyframes pulse{0%,100%{opacity:1}50%{opacity:.32}}
    .search-btn{
        width:38px;height:38px;border-radius:50%;
        display:grid;place-items:center;
        border:1px solid var(--line);color:var(--muted);background:rgba(255,255,255,.04)
    }
    .search-btn:hover{border-color:rgba(79,209,232,.7);color:var(--brand);box-shadow:var(--shadow-glow)}
    .channel-nav{border-top:1px solid rgba(255,255,255,.05);background:rgba(5,7,13,.48)}
    .nav-links{display:flex;align-items:center;gap:34px;padding:10px 0;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
    .nav-links::-webkit-scrollbar{display:none}
    .nav-link{font-weight:500;color:var(--muted);font-size:.94rem;display:inline-flex;align-items:center;gap:7px;position:relative;padding:5px 0}
    .nav-link i{color:var(--gold);opacity:.9}
    .nav-link:after{
        content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;
        background:linear-gradient(90deg,var(--brand),transparent);
        transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)
    }
    .nav-link:hover,.nav-link.active{color:#fff}
    .nav-link:hover:after,.nav-link.active:after{transform:scaleX(1)}
    .nav-link.active::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--brand);box-shadow:0 0 8px var(--brand)}
    .main-frame{overflow:clip}
    .page-hero{
        position:relative;padding:84px 0 72px;
        background:linear-gradient(180deg, rgba(5,7,13,.32) 0%, var(--bg) 112%), url('/assets/images/backpic/back-1.png') center 30%/cover no-repeat;
        border-bottom:1px solid rgba(255,255,255,.05)
    }
    .hero-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:44px;align-items:end}
    .eyebrow{
        display:inline-flex;align-items:center;gap:10px;
        font-size:.76rem;letter-spacing:.16em;color:var(--brand);
        background:rgba(79,209,232,.1);border:1px solid rgba(79,209,232,.32);
        padding:6px 14px;border-radius:999px;margin-bottom:18px
    }
    .eyebrow i{font-size:.6rem}
    .page-hero h1{
        font-size:clamp(2.2rem,5vw,3.4rem);font-weight:700;line-height:1.2;margin:0;
        letter-spacing:.01em;color:#fff
    }
    .page-hero h1 .slash{color:var(--gold);font-weight:400;margin:0 .2em}
    .page-hero p.lead{color:var(--muted);font-size:1.06rem;max-width:650px;margin:18px 0 0}
    .hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
    .chip{
        display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:500;
        padding:7px 13px;border-radius:999px;color:#c6d5ef;
        background:rgba(255,255,255,.05);border:1px solid var(--line)
    }
    .chip i{color:var(--gold)}
    .hero-code{
        position:relative;border-radius:20px;padding:6px;
        background:linear-gradient(130deg,rgba(79,209,232,.3),rgba(255,255,255,.06) 50%,rgba(232,195,132,.24));
        backdrop-filter:blur(8px)
    }
    .hero-code-inner{
        background:rgba(6,9,17,.84);border-radius:16px;padding:22px 20px
    }
    .hero-code-top{display:flex;justify-content:space-between;align-items:center;color:var(--weak);font-size:.74rem;letter-spacing:.08em}
    .hero-code h3{font-size:1.02rem;font-weight:600;color:#fff;margin:14px 0 6px}
    .hero-code p{font-size:.88rem;color:var(--muted);line-height:1.7;margin:0}
    .mini-list{margin-top:16px;display:grid;gap:9px}
    .mini-row{display:flex;gap:10px;color:var(--muted);font-size:.82rem;align-items:center}
    .mini-row i{color:var(--brand);width:18px}
    .section-pad{padding:88px 0}
    .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:30px}
    .section-title{font-size:1.85rem;font-weight:600;line-height:1.3;margin:0;display:flex;flex-direction:column;gap:9px}
    .section-title:before{content:"";width:34px;height:3px;border-radius:99px;background:linear-gradient(90deg,var(--brand),rgba(79,209,232,.15))}
    .section-foot{color:var(--weak);font-size:.9rem;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
    .section-foot:hover{color:var(--brand)}
    .toolbar{
        display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
        background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;
        padding:9px 12px 9px 18px;margin-bottom:28px
    }
    .sort-tabs{display:flex;gap:4px;flex-wrap:wrap}
    .sort-pill{font-size:.82rem;color:var(--muted);padding:7px 14px;border-radius:999px;border:1px solid transparent}
    .sort-pill i{font-size:.65rem;margin-right:5px;color:var(--weak)}
    .sort-pill:hover{color:#fff}
    .sort-pill.active{background:rgba(255,255,255,.08);border-color:rgba(79,209,232,.4);color:var(--brand);box-shadow:var(--shadow-glow)}
    .sort-select{
        display:inline-flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted);
        background:rgba(5,7,13,.4);border:1px solid var(--line);padding:7px 15px;border-radius:999px
    }
    .sort-select i{color:var(--gold);font-size:.7rem}
    .count-line{font-size:.78rem;color:var(--weak);text-align:right;margin-bottom:18px}
    .headline-card{
        display:grid;grid-template-columns:44% 1fr;background:rgba(255,255,255,.03);border:1px solid var(--line);
        border-radius:22px;overflow:hidden;text-align:left;box-shadow:0 18px 50px rgba(0,0,0,.27)
    }
    .headline-card:hover{border-color:rgba(79,209,232,.35);transform:translateY(-3px);background:rgba(255,255,255,.05)}
    .hc-media{position:relative;min-height:300px;over-flow:hidden}
    .hc-media img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover}
    .hc-media .badge{
        position:absolute;left:16px;top:16px;background:rgba(5,7,13,.6);border:1px solid rgba(255,255,255,.2);
        color:#fff;font-size:.72rem;padding:5px 10px;border-radius:6px;backdrop-filter:blur(6px)
    }
    .hc-body{padding:30px;display:flex;flex-direction:column;justify-content:center}
    .hc-kicker{color:var(--gold);font-size:.78rem;letter-spacing:.16em;display:inline-flex;align-items:center;gap:8px;margin-bottom:12px}
    .hc-kicker i{color:var(--gold);font-size:.55rem}
    .hc-title{font-size:clamp(1.3rem,2vw,1.8rem);font-weight:650;line-height:1.4;color:#fff;margin:0}
    .hc-title em{font-style:normal;color:var(--brand)}
    .hc-body p{color:var(--muted);font-size:.95rem;margin:16px 0}
    .hc-line{display:flex;flex-wrap:wrap;gap:14px;color:var(--weak);font-size:.8rem;align-items:center;margin-top:4px}
    .badge-sm{padding:4px 9px;border-radius:4px;background:rgba(232,195,132,.12);border:1px solid rgba(232,195,132,.24);color:var(--gold);font-size:.72rem}
    .btn{
        display:inline-flex;align-items:center;justify-content:center;gap:10px;
        font-weight:600;font-size:.9rem;line-height:1;
        border-radius:999px;padding:14px 24px;cursor:pointer
    }
    .btn-primary{background:var(--brand);color:#031216;border:1px solid transparent;box-shadow:0 0 18px rgba(79,209,232,.16)}
    .btn-primary:hover{background:#70dff1;transform:translateY(-2px);box-shadow:0 8px 30px rgba(79,209,232,.28)}
    .btn-ghost{background:rgba(255,255,255,.03);color:#dbe7fb;border:1px solid rgba(255,255,255,.16)}
    .btn-ghost:hover{color:#fff;border-color:rgba(79,209,232,.6);background:rgba(255,255,255,.06)}
    .btn-sm{padding:9px 17px;font-size:.8rem}
    .stream-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:start}
    .stream-col{display:grid;gap:16px}
    .entry-card{
        position:relative;display:grid;grid-template-columns:152px 1fr;gap:18px;align-items:center;
        background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--radius-card);
        padding:13px;text-align:left
    }
    .entry-card:hover{border-color:rgba(79,209,232,.4);background:rgba(255,255,255,.055);transform:translateY(-3px)}
    .entry-thumb{border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--bg2)}
    .entry-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
    .entry-card:hover .entry-thumb img{transform:scale(1.07)}
    .entry-info{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
    .entry-info .meta{font-size:.72rem;color:var(--weak);display:flex;gap:8px}
    .entry-info .meta i{color:var(--gold);font-size:.6rem;vertical-align:middle}
    .entry-title{font-size:1.04rem;font-weight:600;color:#fff;line-height:1.45;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .entry-summary{color:var(--muted);font-size:.82rem;line-height:1.7;margin:2px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .entry-arrow{color:var(--weak);margin-left:auto}
    .entry-card:hover .entry-arrow{color:var(--brand);transform:translateX(4px)}
    .list-panel{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:20px;padding:8px}
    .row-item{
        display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:14px;
        border-bottom:1px solid rgba(255,255,255,.06);background:transparent
    }
    .row-item:last-child{border-bottom:0}
    .row-item:hover{background:rgba(79,209,232,.06)}
    .row-num{font-size:1.2rem;width:26px;text-align:center;color:var(--weak);font-weight:500}
    .row-item:nth-child(1) .row-num,.row-item:nth-child(2) .row-num,.row-item:nth-child(3) .row-num{color:var(--gold)}
    .row-text{flex:1}
    .row-cat{font-size:.68rem;letter-spacing:.08em;color:var(--weak);text-transform:uppercase}
    .row-name{font-size:.95rem;font-weight:600;color:#e6edfd;line-height:1.4}
    .row-item:hover .row-name{color:var(--brand)}
    .row-arrow{color:var(--weak)}
    .showcase-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px}
    .show-card{
        position:relative;border-radius:20px;padding:26px 24px;overflow:hidden;border:1px solid var(--line);
        background:rgba(255,255,255,.04);backdrop-filter:blur(12px)
    }
    .show-card:after{content:"";position:absolute;top:-70px;right:-70px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle, rgba(79,209,232,.2), transparent 70%)}
    .show-card:hover{background:rgba(255,255,255,.07);border-color:rgba(79,209,232,.45);transform:translateY(-4px);box-shadow:0 18px 34px rgba(0,0,0,.35)}
    .show-card .ic{
        width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
        color:var(--brand);border:1px solid rgba(79,209,232,.42);background:rgba(79,209,232,.1);margin-bottom:18px
    }
    .show-card h3{font-size:1.15rem;font-weight:600;color:#fff;margin:0 0 8px}
    .show-card p{color:var(--muted);font-size:.88rem;line-height:1.75;margin:0}
    .show-card .link-line{color:var(--brand);font-size:.82rem;margin-top:16px;display:inline-flex;align-items:center;gap:8px}
    .show-card:hover .link-line{letter-spacing:.02em}
    .band{
        border-radius:24px;overflow:hidden;position:relative;padding:58px 46px;
        background:linear-gradient(90deg, rgba(4,7,15,.15), rgba(5,8,15,.76)), url('/assets/images/backpic/back-3.webp') center/cover no-repeat;
        border:1px solid rgba(255,255,255,.09);display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap
    }
    .band .orb{position:absolute;width:250px;height:250px;border-radius:50%;right:-70px;top:-90px;background:radial-gradient(circle, rgba(79,209,232,.26), transparent 65%);pointer-events:none}
    .message-title{font-size:clamp(1.3rem,2.8vw,2rem);font-weight:600;color:#fff;line-height:1.35;margin:0}
    .message-title span{color:var(--brand)}
    .message-text{color:var(--muted);font-size:.96rem;max-width:560px;margin-top:12px}
    .single-row{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
    .principles .p-item{display:flex;gap:16px;padding:0 0 18px;margin-bottom:18px;border-bottom:1px solid rgba(255,255,255,.07)}
    .p-item .pi-num{font-size:1.1rem;font-weight:700;color:var(--gold);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(232,195,132,.34);background:rgba(232,195,132,.08)}
    .p-item h4{font-size:1.04rem;font-weight:600;margin:0 0 6px;color:#e7f0ff}
    .p-item p{font-size:.9rem;color:var(--muted);margin:0}
    .chart-zone{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:26px;padding:34px;position:relative;overflow:hidden}
    .chart-zone:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--brand),rgba(232,195,132,.5),transparent)}
    .zone-title{font-size:1.35rem;font-weight:600;margin:0 0 18px;color:#fff}
    .zone-title small{display:block;font-size:.8rem;color:var(--weak);font-weight:400;margin-top:6px}
    .measure-list{display:grid;gap:18px}
    .measure-row{display:flex;gap:20px;align-items:flex-start;padding-bottom:16px;border-bottom:1px dashed rgba(255,255,255,.09)}
    .measure-row:last-child{border-bottom:0;padding-bottom:0}
    .measure-rank{color:var(--gold);font-weight:700;font-size:1.2rem;line-height:1}
    .measure-detail{flex:1}
    .measure-title{display:flex;justify-content:space-between;gap:14px;font-size:.95rem;color:#dbe7fb;font-weight:500;margin-bottom:8px}
    .meter span{color:var(--weak);font-weight:400;font-size:.84rem}
    .meter{height:7px;background:rgba(255,255,255,.09);border-radius:9px;overflow:hidden}
    .meter i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--brand),rgba(79,209,232,.3))}
    .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
    .details-item{border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:16px;padding:4px 20px}
    .details-item summary{
        list-style:none;cursor:pointer;padding:17px 0;font-weight:600;color:#e4edfb;
        display:flex;align-items:center;gap:14px;font-size:1rem;font-family:inherit
    }
    .details-item summary::-webkit-details-marker{display:none}
    .details-item summary:hover{color:var(--brand)}
    .details-item summary .qa-ic{color:var(--brand);font-size:.86rem}
    .details-item summary::after{content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;font-size:.72rem;color:var(--weak);margin-left:auto;transition:transform .35s var(--ease)}
    .details-item[open] summary::after{transform:rotate(180deg)}
    .details-item .answer{padding:0 0 18px 40px;color:var(--muted);font-size:.9rem;line-height:1.8}
    .faq-hint{color:var(--weak);font-size:.8rem;display:flex;align-items:center;gap:8px;margin-top:22px}
    .cta-banner{
        border-radius:26px;position:relative;overflow:hidden;
        padding:70px 50px;display:flex;flex-direction:column;align-items:center;text-align:center;
        background:
            radial-gradient(circle at 20% 110%,rgba(79,209,232,.24),transparent 60%),
            radial-gradient(circle at 90% -20%,rgba(232,195,132,.1),transparent 46%),
            linear-gradient(145deg,rgba(17,31,52,.92),rgba(5,8,15,.98));
        border:1px solid rgba(79,209,232,.22)
    }
    .cta-banner h2{font-size:clamp(1.55rem,4vw,2.5rem);color:#fff;margin:0}
    .cta-banner p{color:var(--muted);margin:18px 0 30px;max-width:590px;font-size:.96rem}
    .site-footer{background:#04060c;border-top:1px solid rgba(255,255,255,.08);padding:62px 0 0}
    .footer-grid{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:48px;padding-bottom:40px}
    .footer-brand .brand-name{flex-direction:row;align-items:center;gap:4px}
    .footer-desc{color:var(--weak);font-size:.88rem;line-height:1.9;margin:18px 0 0}
    .footer-title{color:#cfd9f0;font-size:.86rem;font-weight:600;letter-spacing:.1em;margin:0 0 18px;text-transform:uppercase}
    .footer-links a{color:var(--weak);font-size:.9rem;padding:5px 0;display:inline-flex;align-items:center;gap:9px}
    .footer-links a:hover{color:var(--brand)}
    .footer-links a i{font-size:.6rem;color:var(--gold)}
    .footer-meta{border-top:1px solid rgba(255,255,255,.06);padding:18px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--weak);font-size:.78rem}
    @media(max-width:1024px){
        .hero-grid,.single-row,.stream-grid{grid-template-columns:1fr}
        .showcase-grid{grid-template-columns:1fr 1fr}
        .headline-card{grid-template-columns:1fr}
        .section-pad{padding:68px 0}
        .band{padding:42px 28px}
    }
    @media(max-width:768px){
        .header-status{display:none}
        .page-hero{padding:58px 0 52px}
        .section-head{flex-direction:column;align-items:flex-start}
        .showcase-grid,.faq-grid{grid-template-columns:1fr}
        .entry-card{grid-template-columns:118px 1fr}
        .footer-grid{grid-template-columns:1fr;gap:32px}
        .toolbar{border-radius:18px;padding:14px}
        .count-line{text-align:left}
        .cta-banner{padding:50px 24px}
    }
    @media(max-width:520px){
        .nav-links{gap:22px}
        .brand-name{font-size:1rem}
        .entry-card{grid-template-columns:1fr;padding:0}
        .entry-thumb{border-radius:12px 12px 0 0;aspect-ratio:16/8}
        .entry-info{padding:14px}
        .btn{padding:13px 20px}
        .section-title{font-size:1.5rem}
    }
    :focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}

/* roulang page: category2 */
:root {
            --bg-page: #05070d;
            --bg-soft: #0a0f1a;
            --bg-layer: #101827;
            --text-main: #e8eefc;
            --text-soft: #9db0d0;
            --text-muted: #5f7398;
            --primary: #4fd1e8;
            --accent: #e8c384;
            --card-bg: rgba(255, 255, 255, .05);
            --card-bg-hover: rgba(255, 255, 255, .09);
            --line: rgba(255, 255, 255, .1);
            --line-strong: rgba(255, 255, 255, .25);
            --radius-card: 16px;
            --radius-image: 12px;
            --glow-primary: 0 0 22px rgba(79, 209, 232, .32);
            --shadow-card: 0 20px 40px rgba(0, 0, 0, .35);
            --font-family: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            background: var(--bg-page);
            color: var(--text-main);
            font-family: var(--font-family);
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }

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

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

        ul,
        ol {
            list-style: none;
        }

        button,
        input,
        select {
            font: inherit;
        }

        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 24px;
        }

        .text-soft {
            color: var(--text-soft);
        }

        .text-muted {
            color: var(--text-muted);
        }

        .text-gold {
            color: var(--accent);
        }

        .text-ice {
            color: var(--primary);
        }

        a:focus-visible,
        button:focus-visible,
        summary:focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: 3px;
            box-shadow: var(--glow-primary);
            border-radius: 8px;
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 50;
            backdrop-filter: blur(16px);
            background: rgba(5, 7, 13, .82);
            border-bottom: 1px solid rgba(255, 255, 255, .08);
        }

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

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
        }

        .brand-mark {
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 13px;
            background: linear-gradient(145deg, rgba(79, 209, 232, .2), rgba(232, 195, 132, .1));
            border: 1px solid rgba(79, 209, 232, .22);
            color: var(--primary);
            font-size: 18px;
            box-shadow: var(--glow-primary);
        }

        .brand-name {
            display: block;
            line-height: 1.2;
            font-weight: 800;
            font-size: 1.12rem;
            letter-spacing: .02em;
        }

        .brand-name small {
            display: block;
            margin-top: 3px;
            font-size: .56rem;
            font-weight: 500;
            letter-spacing: .18em;
            color: var(--text-muted);
        }

        .header-status {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: .78rem;
            color: var(--text-soft);
            border: 1px solid var(--line);
            border-radius: 999px;
            padding: 5px 14px;
            background: rgba(255, 255, 255, .04);
        }

        .header-status i {
            color: var(--primary);
            font-size: 8px;
        }

        .search-btn {
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            border: 1px solid var(--line);
            background: rgba(255, 255, 255, .04);
            color: var(--text-soft);
            transition: .25s ease;
        }

        .search-btn:hover {
            color: var(--primary);
            border-color: rgba(79, 209, 232, .5);
            box-shadow: var(--glow-primary);
        }

        .channel-nav {
            background: rgba(9, 13, 23, .92);
            border-top: 1px solid rgba(255, 255, 255, .04);
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 2px;
            overflow-x: auto;
            padding: 4px 0;
        }

        .nav-link {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 10px 18px;
            border-radius: 999px;
            color: var(--text-soft);
            font-size: .94rem;
            font-weight: 500;
            white-space: nowrap;
            position: relative;
            transition: color .2s ease, background .2s ease;
        }

        .nav-link::after {
            content: "";
            position: absolute;
            left: 18px;
            right: 18px;
            bottom: 3px;
            height: 2px;
            border-radius: 99px;
            background: var(--primary);
            transform: scaleX(0);
            transform-origin: left center;
            transition: transform .25s ease;
        }

        .nav-link:hover {
            color: #fff;
        }

        .nav-link:hover::after {
            transform: scaleX(1);
        }

        .nav-link.active {
            color: #fff;
            background: rgba(79, 209, 232, .10);
        }

        .nav-link.active i {
            color: var(--primary);
        }

        .nav-link.active::after {
            transform: scaleX(1);
        }

        .page-intro {
            position: relative;
            padding: 118px 0 70px;
            background:
                linear-gradient(180deg, rgba(5, 7, 13, .40) 0%, rgba(5, 7, 13, .94) 100%),
                url('/assets/images/backpic/back-3.webp') center / cover no-repeat;
            border-bottom: 1px solid rgba(255, 255, 255, .06);
        }

        .page-intro:before {
            content: "";
            position: absolute;
            top: 60px;
            right: 18%;
            width: 160px;
            height: 160px;
            background: radial-gradient(circle, rgba(79, 209, 232, .18), transparent 68%);
            pointer-events: none;
        }

        .intro-cap {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 1px solid rgba(79, 209, 232, .26);
            background: rgba(79, 209, 232, .08);
            color: var(--primary);
            font-size: .8rem;
            border-radius: 999px;
            padding: 5px 15px;
            font-weight: 600;
            letter-spacing: .06em;
        }

        .intro-title {
            font-size: clamp(2.5rem, 6vw, 4.3rem);
            font-weight: 800;
            line-height: 1.15;
            letter-spacing: .02em;
            margin: 18px 0 14px;
        }

        .intro-divider {
            color: var(--accent);
            font-weight: 300;
            margin: 0 8px;
        }

        .intro-title .accent {
            background: linear-gradient(90deg, var(--primary), #99efff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 0 30px rgba(79, 209, 232, .25);
        }

        .intro-sub {
            max-width: 720px;
            color: var(--text-soft);
            font-size: 1.08rem;
            line-height: 1.9;
            margin-bottom: 30px;
        }

        .page-mark-title {
            font-size: clamp(1.6rem, 3vw, 2.3rem);
            font-weight: 700;
            line-height: 1.3;
        }

        .section-gap {
            padding: 100px 0;
        }

        .section-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            color: var(--primary);
            font-weight: 600;
            font-size: .8rem;
            letter-spacing: .1em;
            text-transform: uppercase;
            margin-bottom: 14px;
        }

        .section-eyebrow:before {
            content: "✦";
            font-size: 12px;
            color: var(--accent);
        }

        .section-title {
            font-size: clamp(1.8rem, 3.4vw, 2.45rem);
            font-weight: 700;
            line-height: 1.3;
            position: relative;
            padding-left: 22px;
        }

        .section-title:before {
            content: "";
            position: absolute;
            left: 0;
            top: 10px;
            width: 6px;
            height: 32px;
            border-radius: 999px;
            background: linear-gradient(180deg, var(--primary), rgba(79, 209, 232, .2));
        }

        .section-desc {
            max-width: 680px;
            color: var(--text-soft);
            line-height: 1.85;
            margin-top: 14px;
        }

        .glass-card {
            background: var(--card-bg);
            border: 1px solid var(--line);
            border-radius: var(--radius-card);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            transition: transform .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
        }

        .glass-card:hover {
            transform: translateY(-5px);
            background: var(--card-bg-hover);
            border-color: var(--line-strong);
            box-shadow: var(--shadow-card);
        }

        .feature-media {
            position: relative;
            border-radius: 16px;
            overflow: hidden;
        }

        .feature-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .6s ease;
        }

        .feature-card:hover .feature-media img {
            transform: scale(1.04);
        }

        .feature-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(5, 7, 13, .08) 30%, rgba(5, 7, 13, .95) 100%);
        }

        .dark-cover {
            transition: transform .5s ease;
        }

        .dark-cover:hover img {
            transform: scale(1.03);
        }

        .badge-soft {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border-radius: 999px;
            padding: 4px 12px;
            font-size: .76rem;
            font-weight: 600;
            background: rgba(232, 195, 132, .12);
            color: var(--accent);
            border: 1px solid rgba(232, 195, 132, .18);
        }

        .card-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border-radius: 999px;
            padding: 3px 10px;
            font-size: .72rem;
            color: var(--text-soft);
            background: rgba(255, 255, 255, .06);
            border: 1px solid rgba(255, 255, 255, .09);
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            border-radius: 999px;
            padding: 12px 24px;
            font-weight: 600;
            font-size: .94rem;
            border: 1px solid transparent;
            transition: all .25s ease;
            white-space: nowrap;
        }

        .btn-primary {
            background: linear-gradient(135deg, rgba(79, 209, 232, .92), rgba(95, 214, 240, .78));
            color: #03121a;
            border-color: rgba(151, 239, 255, .4);
            box-shadow: 0 0 22px rgba(79, 209, 232, .20);
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, var(--primary), #6be1f5);
            box-shadow: 0 0 32px rgba(79, 209, 232, .52);
            transform: translateY(-2px);
        }

        .btn-ghost {
            background: rgba(255, 255, 255, .04);
            color: var(--text-main);
            border-color: rgba(255, 255, 255, .18);
            backdrop-filter: blur(10px);
        }

        .btn-ghost:hover {
            background: rgba(255, 255, 255, .09);
            border-color: rgba(255, 255, 255, .4);
            transform: translateY(-2px);
        }

        .side-index {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .side-choice {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            padding: 16px;
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, .08);
            background: rgba(255, 255, 255, .03);
            transition: .25s ease;
        }

        .side-choice:hover {
            background: rgba(79, 209, 232, .06);
            border-color: rgba(79, 209, 232, .22);
        }

        .side-icon {
            width: 38px;
            height: 38px;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            background: linear-gradient(145deg, rgba(79, 209, 232, .22), rgba(232, 195, 132, .08));
            color: var(--primary);
            font-size: 15px;
        }

        .sort-panel {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
            padding: 16px 20px;
            border-radius: 18px;
        }

        .filter-pill {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            border-radius: 999px;
            padding: 7px 14px;
            font-size: .84rem;
            font-weight: 500;
            color: var(--text-soft);
            border: 1px solid rgba(255, 255, 255, .12);
            background: rgba(255, 255, 255, .03);
            cursor: pointer;
            transition: .2s ease;
        }

        .filter-pill:hover {
            color: #fff;
            border-color: rgba(79, 209, 232, .45);
        }

        .filter-pill.is-active {
            background: rgba(79, 209, 232, .12);
            border-color: rgba(79, 209, 232, .45);
            color: var(--primary);
        }

        .theme-grid-card {
            overflow: hidden;
        }

        .theme-media {
            aspect-ratio: 16 / 9;
            overflow: hidden;
            border-radius: 14px;
            position: relative;
        }

        .theme-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .6s ease;
        }

        .theme-grid-card:hover .theme-media img {
            transform: scale(1.06);
        }

        .theme-media:after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 60%, rgba(5, 7, 13, .65) 100%);
        }

        .theme-content {
            padding: 20px 20px 22px;
        }

        .theme-title {
            font-size: 1.25rem;
            font-weight: 700;
            line-height: 1.45;
        }

        .theme-summary {
            color: var(--text-soft);
            font-size: .92rem;
            line-height: 1.8;
        }

        .arrow-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--primary);
            font-weight: 600;
            font-size: .9rem;
            transition: gap .2s ease, color .2s ease;
        }

        .arrow-link:hover {
            gap: 12px;
            color: #d6f9ff;
        }

        .roadmap-note {
            padding: 24px 28px;
            border-radius: 18px;
            background: linear-gradient(90deg, rgba(79, 209, 232, .07), rgba(232, 195, 132, .04));
            border: 1px solid rgba(255, 255, 255, .08);
        }

        .faq-card {
            background: rgba(255, 255, 255, .045);
            border: 1px solid var(--line);
            border-radius: 16px;
            overflow: hidden;
        }

        .faq-item + .faq-item {
            border-top: 1px solid rgba(255, 255, 255, .06);
        }

        .faq-item summary {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 20px 24px;
            cursor: pointer;
            font-weight: 600;
            color: var(--text-main);
            transition: background .2s ease;
            list-style: none;
        }

        .faq-item summary::-webkit-details-marker {
            display: none;
        }

        .faq-item summary:hover {
            background: rgba(255, 255, 255, .05);
        }

        .faq-item summary .faq-icon {
            width: 34px;
            height: 34px;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            color: var(--primary);
            background: rgba(79, 209, 232, .12);
        }

        .faq-answer {
            padding: 0 24px 22px 74px;
            color: var(--text-soft);
            line-height: 1.85;
            font-size: .96rem;
        }

        .cta-panel {
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(circle at 20% 20%, rgba(79, 209, 232, .22), transparent 30%),
                radial-gradient(circle at 85% 40%, rgba(232, 195, 132, .11), transparent 24%),
                linear-gradient(180deg, #070b15, #05070d);
            border-top: 1px solid rgba(255, 255, 255, .08);
            border-bottom: 1px solid rgba(255, 255, 255, .08);
        }

        .site-footer {
            background: #04060c;
            border-top: 1px solid rgba(255, 255, 255, .08);
        }

        .footer-title {
            font-size: .82rem;
            font-weight: 600;
            color: rgba(255, 255, 255, .55);
            letter-spacing: .1em;
            margin-bottom: 16px;
        }

        .footer-links a {
            color: var(--text-soft);
            font-size: .9rem;
            transition: color .2s ease;
        }

        .footer-links a:hover {
            color: var(--primary);
        }

        .footer-meta {
            border-top: 1px solid rgba(255, 255, 255, .06);
        }

        @media (max-width: 768px) {
            .page-intro {
                padding: 84px 0 50px;
            }
            .section-gap {
                padding: 64px 0;
            }
            .brand-name small {
                font-size: .48rem;
            }
            .header-status {
                display: none;
            }
        }

        @media (max-width: 520px) {
            .container {
                padding: 0 18px;
            }
            .nav-link {
                padding: 9px 12px;
                font-size: .84rem;
            }
            .intro-sub {
                font-size: .96rem;
            }
            .faq-answer {
                padding: 0 18px 18px 20px;
            }
            .brand-row {
                min-height: 62px;
            }
        }