/* roulang page: index */
:root {
            --ink: #211d25;
            --ink-soft: #3a333d;
            --night: #171419;
            --night-2: #211a23;
            --paper: #f4f0eb;
            --paper-2: #ebe4de;
            --white: #fffdfa;
            --muted: #8c838e;
            --line: rgba(55, 43, 57, .14);
            --line-dark: rgba(255,255,255,.12);
            --berry: #8e3e68;
            --berry-dark: #642748;
            --coral: #dc795b;
            --amber: #e1a44e;
            --mint: #79a99c;
            --radius: 16px;
            --shadow: 0 18px 45px rgba(27, 20, 28, .12);
            --container: 1220px;
        }
        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--paper);
            font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.7;
            -webkit-font-smoothing: antialiased;
        }
        a { color: inherit; text-decoration: none; }
        img { display: block; max-width: 100%; }
        button, input { font: inherit; }
        button { cursor: pointer; }
        .container { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; }
        .site-header {
            position: sticky; top: 0; z-index: 20;
            background: rgba(23,20,25,.96);
            border-bottom: 1px solid var(--line-dark);
        }
        .nav-wrap { min-height: 76px; display: flex; align-items: center; gap: 38px; }
        .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--white); font-weight: 800; white-space: nowrap; }
        .brand-mark {
            width: 38px; height: 38px; display: grid; place-items: center;
            color: var(--white); background: var(--berry); border-radius: 11px;
            font-size: 19px; box-shadow: 5px 5px 0 rgba(220,121,91,.35);
        }
        .brand-text { font-size: 18px; letter-spacing: 0; }
        .main-nav { display: flex; align-items: center; gap: 8px; flex: 1; }
        .main-nav a {
            position: relative; color: #c9c0ca; padding: 10px 13px; border-radius: 9px;
            transition: .22s ease;
        }
        .main-nav a:hover, .main-nav a:focus, .main-nav a.active { color: var(--white); background: rgba(255,255,255,.09); }
        .main-nav a.active::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px; background: var(--coral); }
        .nav-hot { margin-left: 4px; color: var(--amber); font-size: 11px; vertical-align: top; }
        .nav-action, .btn-primary {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: 10px;
            color: #fff; background: var(--coral); font-weight: 700; transition: .22s ease;
        }
        .nav-action:hover, .btn-primary:hover { background: #eb8b6b; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(220,121,91,.25); }
        .menu-btn { display: none; border: 1px solid var(--line-dark); background: transparent; color: var(--white); padding: 8px 10px; border-radius: 8px; }
        .notice { background: var(--berry-dark); color: #f8e9ee; font-size: 14px; }
        .notice-inner { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
        .notice strong { color: #ffd08c; margin-right: 8px; }
        .notice a { text-decoration: underline; text-underline-offset: 3px; }
        .hero {
            overflow: hidden; color: var(--white); background: var(--night);
            padding: 72px 0 78px; position: relative;
        }
        .hero::before {
            content: ""; position: absolute; inset: 0;
            opacity: .22; background-image: linear-gradient(45deg, transparent 48%, #b96f91 49%, transparent 51%), linear-gradient(-45deg, transparent 48%, #b96f91 49%, transparent 51%);
            background-size: 86px 86px;
        }
        .hero-grid { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: 70px; align-items: center; }
        .eyebrow { color: #f3bd79; font-size: 13px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
        h1, h2, h3, p { margin-top: 0; }
        h1 { margin: 14px 0 20px; max-width: 680px; font-size: clamp(36px, 4.3vw, 62px); line-height: 1.16; letter-spacing: 0; }
        .hero-copy { max-width: 600px; color: #c9beca; font-size: 18px; }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
        .btn-secondary {
            display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
            padding: 0 20px; border: 1px solid rgba(255,255,255,.28); border-radius: 10px;
            color: var(--white); transition: .22s ease;
        }
        .btn-secondary:hover, .btn-secondary:focus { border-color: #f1ae7a; color: #ffd5bb; background: rgba(255,255,255,.07); }
        .hero-art { min-height: 380px; position: relative; }
        .art-panel {
            position: absolute; right: 0; top: 10px; width: 83%; height: 330px;
            border: 1px solid rgba(255,255,255,.16); border-radius: 24px;
            background: #322431; transform: rotate(3deg); box-shadow: 22px 24px 0 rgba(142,62,104,.3);
        }
        .art-panel::before { content: ""; position: absolute; inset: 24px; border: 1px solid rgba(225,164,78,.45); border-radius: 18px; }
        .art-panel::after {
            content: "精选内容"; position: absolute; left: 42px; top: 42px; color: #f6d5a5;
            font-size: 12px; letter-spacing: 4px;
        }
        .art-tile { position: absolute; width: 94px; height: 120px; border-radius: 13px; border: 1px solid rgba(255,255,255,.28); background: var(--berry); }
        .art-tile::before { content: "问"; display: grid; place-items: center; height: 100%; color: rgba(255,255,255,.8); font-size: 42px; font-weight: 900; }
        .tile-one { left: 52px; bottom: 40px; transform: rotate(-13deg); background: #71415d; }
        .tile-two { left: 155px; bottom: 61px; transform: rotate(2deg); background: #b45e59; }
        .tile-three { left: 258px; bottom: 38px; transform: rotate(14deg); background: #b78545; }
        .art-label { position: absolute; right: 38px; bottom: 35px; color: #bfb0bd; font-size: 13px; }
        .section { padding: 92px 0; }
        .section-light { background: var(--paper); }
        .section-white { background: var(--white); }
        .section-dark { color: var(--white); background: var(--night-2); }
        .section-head { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin-bottom: 34px; }
        .section-head h2 { margin: 5px 0 0; font-size: 34px; line-height: 1.25; }
        .section-head p { margin: 0; color: var(--muted); max-width: 520px; }
        .section-dark .section-head p { color: #afa2b0; }
        .text-link { color: var(--berry); font-weight: 700; white-space: nowrap; }
        .text-link:hover { color: var(--coral); }
        .feature-grid { display: grid; grid-template-columns: 1.35fr .8fr .8fr; gap: 18px; align-items: stretch; }
        .game-card { min-height: 270px; position: relative; overflow: hidden; border-radius: var(--radius); padding: 25px; color: #fff; background: #322a35; box-shadow: var(--shadow); transition: .25s ease; }
        .game-card:hover { transform: translateY(-5px); box-shadow: 0 22px 38px rgba(39,25,39,.18); }
        .game-card.large { min-height: 390px; display: flex; align-items: end; }
        .game-card:nth-child(1) { background: #56334e; }
        .game-card:nth-child(2) { background: #4f5950; }
        .game-card:nth-child(3) { background: #68463c; }
        .game-visual { position: absolute; inset: 0; opacity: .58; background: repeating-linear-gradient(135deg, transparent 0 24px, rgba(255,255,255,.12) 25px 26px); }
        .game-card.large .game-visual { background: radial-gradient(circle at 72% 30%, rgba(238,184,126,.8) 0 4%, transparent 5%), repeating-linear-gradient(45deg, transparent 0 32px, rgba(255,255,255,.1) 33px 34px); }
        .game-content { position: relative; z-index: 1; }
        .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; color: #fff4df; background: rgba(225,164,78,.84); border-radius: 6px; font-size: 12px; font-weight: 700; }
        .badge.mint { background: var(--mint); color: #152c29; }
        .game-card h3 { margin: 14px 0 6px; font-size: 25px; }
        .game-card p { margin-bottom: 0; color: rgba(255,255,255,.76); font-size: 14px; }
        .game-meta { display: flex; gap: 10px; margin-top: 17px; color: rgba(255,255,255,.7); font-size: 13px; }
        .offers-layout { display: grid; grid-template-columns: 1.3fr .7fr; gap: 20px; }
        .offer-main, .offer-small { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
        .offer-main { min-height: 270px; display: flex; align-items: center; padding: 38px; position: relative; overflow: hidden; }
        .offer-main::after { content: "活动"; position: absolute; right: 28px; top: 28px; font-size: 80px; font-weight: 900; color: rgba(142,62,104,.08); }
        .offer-main h3 { max-width: 480px; margin: 11px 0 12px; font-size: 29px; }
        .offer-main p { max-width: 500px; color: var(--muted); }
        .offer-side { display: grid; gap: 20px; }
        .offer-small { padding: 24px; }
        .offer-small h3 { margin: 12px 0 5px; font-size: 18px; }
        .offer-small p { margin: 0; color: var(--muted); font-size: 14px; }
        .status { color: var(--coral); font-size: 13px; font-weight: 800; }
        .channel-row { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
        .channel { padding: 26px 18px; color: #d2c7d1; border-right: 1px solid var(--line-dark); transition: .22s; }
        .channel:last-child { border-right: 0; }
        .channel:hover { background: rgba(255,255,255,.06); color: #fff; }
        .channel-icon { color: var(--amber); font-size: 23px; font-weight: 900; }
        .channel h3 { margin: 7px 0 4px; font-size: 17px; color: #fff; }
        .channel p { margin: 0; font-size: 13px; color: #9e929f; }
        .app-area { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: center; }
        .app-device { min-height: 340px; position: relative; border-radius: 25px; background: #2d2630; border: 1px solid rgba(255,255,255,.15); overflow: hidden; }
        .device-screen { position: absolute; inset: 25px 20%; border-radius: 17px; background: #efe7e0; padding: 18px; color: var(--ink); box-shadow: 0 10px 0 rgba(0,0,0,.18); }
        .screen-top { color: var(--berry); font-size: 12px; font-weight: 800; }
        .screen-title { margin: 38px 0 20px; font-size: 25px; line-height: 1.2; font-weight: 900; }
        .screen-bar { height: 10px; margin: 10px 0; border-radius: 4px; background: #d3c6bf; }
        .screen-bar.short { width: 60%; background: var(--coral); }
        .app-copy h2 { margin: 8px 0 14px; font-size: 35px; }
        .app-copy p { color: #b9acba; max-width: 520px; }
        .app-info { display: flex; flex-wrap: wrap; gap: 24px; margin: 25px 0; color: #d8cdd7; font-size: 14px; }
        .app-info strong { display: block; color: #fff; font-size: 17px; }
        .news-layout { display: grid; grid-template-columns: 1fr .8fr; gap: 40px; }
        .lead-news { padding: 32px; background: var(--paper-2); border-radius: var(--radius); }
        .lead-news h3 { margin: 15px 0 10px; font-size: 27px; line-height: 1.35; }
        .lead-news p { color: var(--muted); }
        .news-list { border-top: 1px solid var(--line); }
        .news-item { display: block; padding: 19px 0; border-bottom: 1px solid var(--line); transition: .2s; }
        .news-item:hover { padding-left: 8px; color: var(--berry); }
        .news-meta { display: flex; gap: 12px; color: var(--muted); font-size: 12px; }
        .news-item h3 { margin: 5px 0 3px; font-size: 17px; }
        .news-item p { margin: 0; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .empty-state { padding: 25px 0; color: var(--muted); }
        .faq-wrap { display: grid; grid-template-columns: .7fr 1.3fr; gap: 70px; align-items: start; }
        .faq-intro h2 { margin: 5px 0 12px; font-size: 34px; }
        .faq-intro p { color: var(--muted); }
        .faq-list { border-top: 1px solid var(--line); }
        details { border-bottom: 1px solid var(--line); }
        summary { list-style: none; cursor: pointer; padding: 19px 0; font-size: 17px; font-weight: 700; display: flex; justify-content: space-between; gap: 20px; }
        summary::-webkit-details-marker { display: none; }
        summary::after { content: "+"; color: var(--coral); font-size: 24px; line-height: 1; }
        details[open] summary::after { content: "−"; }
        details p { color: var(--muted); margin: 0 35px 20px 0; }
        .cta { padding: 55px 0; background: var(--berry); color: #fff; }
        .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
        .cta h2 { margin: 0 0 7px; font-size: 31px; }
        .cta p { margin: 0; color: #f2dce6; }
        .cta .btn-secondary { border-color: rgba(255,255,255,.5); }
        .site-footer { padding: 54px 0 24px; background: var(--night); color: #cfc3ce; }
        .footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 35px; padding-bottom: 42px; }
        .footer-brand p { max-width: 300px; color: #8f8390; font-size: 14px; }
        .footer-title { margin-bottom: 12px; color: #fff; font-weight: 800; }
        .footer-links { display: grid; gap: 7px; font-size: 14px; color: #9d919e; }
        .footer-links a:hover { color: #f1ad81; }
        .footer-bottom { border-top: 1px solid var(--line-dark); padding-top: 20px; display: flex; justify-content: space-between; gap: 20px; color: #776d79; font-size: 13px; }
        :focus-visible { outline: 3px solid rgba(225,164,78,.8); outline-offset: 3px; }
        @media (max-width: 992px) {
            .nav-wrap { gap: 18px; }
            .main-nav { gap: 0; }
            .main-nav a { padding: 9px 8px; font-size: 14px; }
            .nav-action { padding: 0 14px; font-size: 14px; }
            .hero-grid, .app-area { gap: 35px; }
            .feature-grid { grid-template-columns: 1fr 1fr; }
            .game-card.large { grid-row: span 2; }
            .game-card:not(.large) { min-height: 185px; }
            .channel-row { grid-template-columns: repeat(3, 1fr); }
            .channel:nth-child(3) { border-right: 0; }
            .channel:nth-child(-n+3) { border-bottom: 1px solid var(--line-dark); }
        }
        @media (max-width: 768px) {
            .container { width: min(100% - 36px, var(--container)); }
            .menu-btn { display: block; margin-left: auto; }
            .main-nav { display: none; position: absolute; left: 18px; right: 18px; top: 68px; padding: 10px; flex-direction: column; align-items: stretch; background: var(--night-2); border: 1px solid var(--line-dark); border-radius: 12px; }
            .main-nav.open { display: flex; }
            .main-nav a.active::after { display: none; }
            .nav-action { display: none; }
            .hero { padding: 55px 0 50px; }
            .hero-grid, .offers-layout, .news-layout, .faq-wrap, .app-area { grid-template-columns: 1fr; }
            .hero-art { min-height: 300px; }
            .art-panel { width: 92%; height: 280px; }
            .section { padding: 65px 0; }
            .section-head { display: block; }
            .section-head h2 { font-size: 29px; margin-bottom: 8px; }
            .section-head .text-link { display: inline-block; margin-top: 15px; }
            .feature-grid { grid-template-columns: 1fr 1fr; }
            .game-card.large { grid-column: span 2; grid-row: auto; min-height: 300px; }
            .channel-row { grid-template-columns: 1fr 1fr; }
            .channel:nth-child(3) { border-right: 1px solid var(--line-dark); }
            .channel:nth-child(2n) { border-right: 0; }
            .channel:nth-child(3), .channel:nth-child(4) { border-bottom: 1px solid var(--line-dark); }
            .app-area { gap: 35px; }
            .app-device { min-height: 300px; }
            .cta-inner { display: block; }
            .cta .hero-actions { margin-top: 22px; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 520px) {
            .container { width: calc(100% - 32px); }
            .brand-text { font-size: 16px; }
            .notice-inner { padding: 8px 0; align-items: flex-start; }
            .notice-inner a { white-space: nowrap; }
            h1 { font-size: 36px; }
            .hero-copy { font-size: 16px; }
            .feature-grid { display: block; }
            .game-card, .game-card.large, .game-card:not(.large) { min-height: 240px; margin-bottom: 14px; }
            .offer-main { padding: 27px; min-height: 250px; }
            .offer-main h3 { font-size: 24px; }
            .channel-row { grid-template-columns: 1fr; }
            .channel, .channel:nth-child(3) { border-right: 0; border-bottom: 1px solid var(--line-dark); }
            .channel:last-child { border-bottom: 0; }
            .footer-grid { grid-template-columns: 1fr; gap: 25px; }
            .footer-bottom { display: block; }
            .footer-bottom span { display: block; margin-top: 8px; }
            .device-screen { inset-left: 19%; inset-right: 19%; }
        }

/* roulang page: article */
:root {
            --ink:#211d25;
            --ink-soft:#3a333d;
            --night:#171419;
            --night-2:#211a23;
            --paper:#f4f0eb;
            --paper-2:#ebe4de;
            --white:#fffdfa;
            --muted:#8c838e;
            --line:rgba(55,43,57,.14);
            --line-dark:rgba(255,255,255,.12);
            --berry:#8e3e68;
            --berry-dark:#642748;
            --coral:#dc795b;
            --amber:#e1a44e;
            --mint:#79a99c;
            --radius:16px;
            --shadow:0 18px 45px rgba(27,20,28,.12);
            --container:1220px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--ink);
            background:var(--paper);
            font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;
            font-size:16px;
            line-height:1.7;
            -webkit-font-smoothing:antialiased;
        }
        a{color:inherit;text-decoration:none}
        a:focus-visible,button:focus-visible{outline:3px solid rgba(225,164,78,.7);outline-offset:3px}
        img{display:block;max-width:100%;height:auto}
        button,input{font:inherit}
        button{cursor:pointer}
        .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
        .site-header{
            position:sticky;
            top:0;
            z-index:20;
            background:rgba(23,20,25,.97);
            border-bottom:1px solid var(--line-dark);
        }
        .nav-wrap{min-height:76px;display:flex;align-items:center;gap:38px}
        .brand{display:inline-flex;align-items:center;gap:12px;color:var(--white);font-weight:800;white-space:nowrap}
        .brand-mark{
            width:38px;height:38px;display:grid;place-items:center;color:var(--white);
            background:var(--berry);border-radius:11px;font-size:19px;
            box-shadow:5px 5px 0 rgba(220,121,91,.35)
        }
        .brand-text{font-size:18px}
        .main-nav{display:flex;align-items:center;gap:8px;flex:1}
        .main-nav a{
            position:relative;color:#c9c0ca;padding:10px 13px;border-radius:9px;transition:.22s ease
        }
        .main-nav a:hover,.main-nav a:focus,.main-nav a.active{
            color:var(--white);background:rgba(255,255,255,.09)
        }
        .main-nav a.active::after{
            content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;background:var(--coral)
        }
        .nav-hot{margin-left:4px;color:var(--amber);font-size:11px;vertical-align:top}
        .nav-action,.btn-primary{
            display:inline-flex;align-items:center;justify-content:center;gap:8px;
            min-height:44px;padding:0 20px;border:1px solid transparent;border-radius:10px;
            color:#fff;background:var(--coral);font-weight:700;transition:.22s ease
        }
        .nav-action:hover,.btn-primary:hover{
            color:#fff;background:#eb8b6b;transform:translateY(-2px);
            box-shadow:0 8px 20px rgba(220,121,91,.25)
        }
        .menu-btn{
            display:none;border:1px solid var(--line-dark);background:transparent;
            color:var(--white);padding:8px 10px;border-radius:8px
        }
        .article-hero{
            color:var(--white);
            background:var(--night);
            padding:70px 0 74px;
            position:relative;
            overflow:hidden;
        }
        .article-hero:before{
            content:"";position:absolute;inset:0;opacity:.2;
            background-image:linear-gradient(135deg,transparent 48%,#b96f91 49%,transparent 51%),
            linear-gradient(45deg,transparent 48%,#b96f91 49%,transparent 51%);
            background-size:92px 92px;
        }
        .article-hero:after{
            content:"";position:absolute;width:420px;height:420px;right:-140px;top:-170px;
            border:1px solid rgba(225,164,78,.36);border-radius:50%;
            box-shadow:0 0 0 28px rgba(225,164,78,.05),0 0 0 56px rgba(225,164,78,.04)
        }
        .article-hero-inner{position:relative;max-width:930px}
        .breadcrumb{
            display:flex;flex-wrap:wrap;gap:9px;align-items:center;
            margin:0 0 25px;color:#b7aab8;font-size:14px
        }
        .breadcrumb a:hover{color:#ffd5bb}
        .breadcrumb-sep{color:var(--coral)}
        .eyebrow{
            display:inline-flex;align-items:center;gap:8px;color:#f3bd79;
            font-size:13px;font-weight:800;letter-spacing:.05em
        }
        .eyebrow:before{content:"";width:24px;height:2px;background:var(--coral)}
        .article-hero h1{
            max-width:900px;margin:13px 0 18px;color:var(--white);
            font-size:clamp(32px,5vw,58px);line-height:1.2;letter-spacing:-.03em
        }
        .article-summary{
            max-width:760px;margin:0;color:#c9beca;font-size:18px
        }
        .article-meta{
            display:flex;flex-wrap:wrap;gap:14px 24px;margin-top:28px;
            color:#afa2b0;font-size:14px
        }
        .meta-item{display:inline-flex;align-items:center;gap:7px}
        .meta-dot{width:6px;height:6px;border-radius:50%;background:var(--amber)}
        .reading-layout{
            display:grid;grid-template-columns:minmax(0,820px) 260px;
            gap:62px;align-items:start;padding:76px 0 92px
        }
        .article-paper{
            background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
            padding:clamp(26px,5vw,60px);box-shadow:0 12px 34px rgba(42,28,41,.06)
        }
        .article-content{font-size:17px;line-height:2;color:var(--ink-soft)}
        .article-content>*:first-child{margin-top:0}
        .article-content h2{
            margin:42px 0 15px;color:var(--ink);font-size:30px;line-height:1.35;
            padding-left:16px;border-left:4px solid var(--berry)
        }
        .article-content h3{margin:30px 0 10px;color:var(--ink);font-size:22px;line-height:1.45}
        .article-content p{margin:0 0 22px}
        .article-content ul,.article-content ol{margin:0 0 25px;padding-left:1.5em}
        .article-content li{padding-left:5px;margin:6px 0}
        .article-content blockquote{
            margin:30px 0;padding:20px 24px;color:var(--berry-dark);
            background:#f8eee9;border-left:4px solid var(--coral);border-radius:0 12px 12px 0
        }
        .article-content img{width:100%;margin:30px 0;border-radius:12px}
        .article-content table{width:100%;margin:25px 0;border-collapse:collapse;font-size:15px}
        .article-content th,.article-content td{padding:12px 14px;border:1px solid var(--line);text-align:left}
        .article-content th{background:var(--paper-2);color:var(--ink);font-weight:800}
        .article-content hr{margin:36px 0;border:0;border-top:1px solid var(--line)}
        .article-content a{color:var(--berry);text-decoration:underline;text-underline-offset:3px}
        .article-content a:hover{color:var(--coral)}
        .article-aside{position:sticky;top:105px}
        .aside-card{
            background:var(--night-2);color:var(--white);padding:24px;border-radius:var(--radius);
            box-shadow:var(--shadow)
        }
        .aside-title{margin:0 0 16px;font-size:18px}
        .aside-line{height:1px;background:var(--line-dark);margin:17px 0}
        .aside-card p{margin:0;color:#bdb0be;font-size:14px}
        .aside-link{
            display:flex;align-items:center;justify-content:space-between;
            padding:10px 0;color:#ddd2dd;font-size:14px;border-bottom:1px solid var(--line-dark)
        }
        .aside-link:last-child{border-bottom:0}
        .aside-link:hover{color:#f4bd91}
        .article-footer{
            display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
            margin-top:42px;padding-top:25px;border-top:1px solid var(--line)
        }
        .back-link,.small-link{color:var(--berry);font-weight:700}
        .back-link:hover,.small-link:hover{color:var(--coral)}
        .related-section{padding:78px 0;background:var(--paper-2)}
        .section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:30px}
        .section-kicker{color:var(--berry);font-size:13px;font-weight:800}
        .section-head h2{margin:5px 0 0;font-size:34px;line-height:1.25}
        .section-head p{margin:0;color:var(--muted);max-width:520px}
        .related-grid{display:grid;grid-template-columns:1.25fr .9fr .9fr;gap:18px}
        .related-card{
            min-height:210px;display:flex;flex-direction:column;justify-content:space-between;
            padding:25px;background:var(--white);border:1px solid var(--line);
            border-radius:var(--radius);transition:.24s ease
        }
        .related-card:first-child{background:var(--berry);color:#fff}
        .related-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
        .related-card:not(:first-child):hover{border-color:var(--coral)}
        .related-label{font-size:13px;color:var(--coral);font-weight:800}
        .related-card:first-child .related-label{color:#ffd09b}
        .related-card h3{margin:14px 0 8px;font-size:21px;line-height:1.4}
        .related-card p{margin:0;color:var(--muted);font-size:14px}
        .related-card:first-child p{color:#ead6df}
        .related-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:22px;font-size:13px}
        .related-arrow{font-size:22px;color:var(--coral)}
        .related-card:first-child .related-arrow{color:#ffd09b}
        .empty-state{
            padding:50px 25px;text-align:center;background:var(--white);
            border:1px dashed var(--line);border-radius:var(--radius);color:var(--muted)
        }
        .empty-state strong{display:block;margin-bottom:8px;color:var(--ink);font-size:20px}
        .site-footer{padding:58px 0 25px;color:#bdb1bf;background:var(--night)}
        .footer-grid{
            display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;
            padding-bottom:42px;border-bottom:1px solid var(--line-dark)
        }
        .footer-brand p{max-width:300px;margin:18px 0 0;color:#978b99;font-size:14px}
        .footer-title{margin-bottom:15px;color:var(--white);font-weight:800}
        .footer-links{display:grid;gap:9px;font-size:14px}
        .footer-links a{color:#aaa0ad;transition:.2s ease}
        .footer-links a:hover{color:#f0ae88;padding-left:3px}
        .footer-bottom{
            display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;
            padding-top:22px;color:#817583;font-size:12px
        }
        .notice-strip{padding:11px 0;color:#665763;background:#eee5df;font-size:14px}
        .notice-inner{display:flex;align-items:center;gap:10px}
        .notice-mark{color:var(--coral);font-weight:800}
        @media (max-width:1100px){
            .nav-wrap{gap:18px}.main-nav{gap:2px}.main-nav a{padding:9px 8px;font-size:14px}
            .nav-action{padding:0 14px;font-size:14px}
            .reading-layout{grid-template-columns:minmax(0,1fr) 230px;gap:30px}
        }
        @media (max-width:800px){
            .container{width:min(var(--container),calc(100% - 36px))}
            .nav-wrap{min-height:68px}.menu-btn{display:block}
            .nav-action{display:none}
            .main-nav{
                display:none;position:absolute;left:18px;right:18px;top:72px;
                flex-direction:column;align-items:stretch;padding:10px;
                background:var(--night-2);border:1px solid var(--line-dark);border-radius:12px;
                box-shadow:var(--shadow)
            }
            .main-nav.open{display:flex}
            .main-nav a{padding:12px 14px}
            .main-nav a.active::after{left:14px;right:auto;width:24px;bottom:5px}
            .article-hero{padding:52px 0 58px}
            .reading-layout{display:block;padding:48px 0 65px}
            .article-aside{display:none}
            .related-grid{grid-template-columns:1fr 1fr}
            .related-card:first-child{grid-column:1/-1}
            .footer-grid{grid-template-columns:1.4fr 1fr 1fr}
            .footer-brand{grid-column:1/-1}
        }
        @media (max-width:520px){
            .container{width:calc(100% - 32px)}
            .brand-text{font-size:16px}.brand-mark{width:35px;height:35px}
            .article-hero h1{font-size:32px}
            .article-summary{font-size:16px}
            .article-meta{gap:8px 15px}
            .article-paper{padding:24px 20px}
            .article-content{font-size:16px;line-height:1.9}
            .article-content h2{font-size:25px;margin-top:32px}
            .article-content h3{font-size:20px}
            .related-grid{grid-template-columns:1fr}
            .related-card:first-child{grid-column:auto}
            .section-head{display:block}.section-head h2{font-size:28px;margin-bottom:8px}
            .section-head p{font-size:14px}
            .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
            .footer-brand{grid-column:1/-1}
            .footer-bottom{display:block}.footer-bottom span{display:block;margin-top:6px}
        }

/* roulang page: category1 */
:root{
            --ink:#211d25;--ink-soft:#3a333d;--night:#171419;--night-2:#211a23;
            --paper:#f4f0eb;--paper-2:#ebe4de;--white:#fffdfa;--muted:#8c838e;
            --line:rgba(55,43,57,.14);--line-dark:rgba(255,255,255,.12);
            --berry:#8e3e68;--berry-dark:#642748;--coral:#dc795b;--amber:#e1a44e;
            --mint:#79a99c;--radius:16px;--shadow:0 18px 45px rgba(27,20,28,.12);
            --container:1220px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;color:var(--ink);background:var(--paper);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%}
        button,input{font:inherit}
        button{cursor:pointer}
        .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
        .site-header{position:sticky;top:0;z-index:20;background:rgba(23,20,25,.97);border-bottom:1px solid var(--line-dark)}
        .nav-wrap{min-height:76px;display:flex;align-items:center;gap:38px}
        .brand{display:inline-flex;align-items:center;gap:12px;color:var(--white);font-weight:800;white-space:nowrap}
        .brand-mark{width:38px;height:38px;display:grid;place-items:center;color:#fff;background:var(--berry);border-radius:11px;font-size:19px;box-shadow:5px 5px 0 rgba(220,121,91,.35)}
        .brand-text{font-size:18px}
        .main-nav{display:flex;align-items:center;gap:8px;flex:1}
        .main-nav a{position:relative;color:#c9c0ca;padding:10px 13px;border-radius:9px;transition:.22s ease}
        .main-nav a:hover,.main-nav a:focus,.main-nav a.active{color:#fff;background:rgba(255,255,255,.09)}
        .main-nav a.active::after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;background:var(--coral)}
        .nav-hot{margin-left:4px;color:var(--amber);font-size:11px;vertical-align:top}
        .nav-action,.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:1px solid transparent;border-radius:10px;color:#fff;background:var(--coral);font-weight:700;transition:.22s ease}
        .nav-action:hover,.btn-primary:hover{background:#eb8b6b;transform:translateY(-2px);box-shadow:0 8px 20px rgba(220,121,91,.25)}
        .menu-btn{display:none;border:1px solid var(--line-dark);background:transparent;color:#fff;padding:8px 10px;border-radius:8px}
        .hero{position:relative;overflow:hidden;padding:72px 0 78px;color:#fff;background:var(--night)}
        .hero:before{content:"";position:absolute;inset:0;opacity:.22;background-image:linear-gradient(45deg,transparent 48%,#b96f91 49%,transparent 51%),linear-gradient(-45deg,transparent 48%,#b96f91 49%,transparent 51%);background-size:86px 86px}
        .hero-grid{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:70px;align-items:center}
        .eyebrow{color:#f3bd79;font-size:13px;font-weight:800;letter-spacing:.08em}
        h1,h2,h3{letter-spacing:-.02em}
        h1{font-size:clamp(38px,5vw,66px);line-height:1.14;margin:14px 0 20px}
        .hero-copy{max-width:610px;color:#c9beca;font-size:18px}
        .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
        .btn-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border:1px solid rgba(255,255,255,.28);border-radius:10px;color:#fff;transition:.22s ease}
        .btn-secondary:hover,.btn-secondary:focus{border-color:#f1ae7a;color:#ffd5bb;background:rgba(255,255,255,.07)}
        .hero-art{min-height:350px;position:relative}
        .orbit{position:absolute;width:310px;height:310px;border:1px solid rgba(236,157,147,.55);border-radius:50%;right:80px;top:20px;transform:rotate(-24deg)}
        .orbit:after{content:"";position:absolute;width:120px;height:120px;border:1px solid rgba(225,164,78,.7);border-radius:28px;right:-32px;top:62px;transform:rotate(35deg)}
        .tile{position:absolute;display:flex;flex-direction:column;justify-content:space-between;padding:20px;border-radius:14px;color:#fff;box-shadow:0 18px 36px rgba(0,0,0,.28)}
        .tile-one{width:220px;height:260px;left:35px;top:40px;background:#703d60;transform:rotate(-8deg)}
        .tile-two{width:190px;height:225px;right:20px;bottom:5px;background:#53635a;transform:rotate(7deg)}
        .tile-three{width:150px;height:150px;right:170px;top:15px;background:#9d5b45;transform:rotate(12deg)}
        .tile-icon{font-size:48px;line-height:1;color:#f2c17e}
        .tile small{color:rgba(255,255,255,.7)}
        .section{padding:92px 0}.section-light{background:var(--paper)}.section-white{background:var(--white)}.section-dark{background:var(--night-2);color:#fff}
        .section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:34px}
        .section-head h2{margin:5px 0 0;font-size:34px;line-height:1.25}.section-head p{margin:0;color:var(--muted);max-width:540px}
        .section-dark .section-head p{color:#afa2b0}.text-link{color:var(--berry);font-weight:700;white-space:nowrap}.text-link:hover{color:var(--coral)}
        .filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px;padding:12px;border:1px solid var(--line);background:rgba(255,255,255,.55);border-radius:12px}
        .filter{border:1px solid transparent;background:transparent;color:var(--ink-soft);padding:8px 15px;border-radius:8px;transition:.2s}
        .filter:hover,.filter:focus,.filter.active{background:var(--berry);color:#fff}
        .game-layout{display:grid;grid-template-columns:1.12fr .88fr;gap:20px}
        .game-feature{min-height:440px;position:relative;overflow:hidden;padding:32px;border-radius:var(--radius);color:#fff;background:#56334e;box-shadow:var(--shadow)}
        .game-feature:after{content:"";position:absolute;width:340px;height:340px;right:-70px;top:-45px;border:1px solid rgba(255,255,255,.25);border-radius:50%;box-shadow:0 0 0 28px rgba(255,255,255,.05),0 0 0 58px rgba(255,255,255,.04)}
        .game-feature-content{position:absolute;z-index:1;left:32px;right:32px;bottom:28px}
        .game-feature h3{font-size:32px;margin:15px 0 8px}.game-feature p{max-width:430px;color:rgba(255,255,255,.75)}
        .game-side{display:grid;grid-template-columns:1fr 1fr;gap:20px}
        .game-card{min-height:210px;position:relative;overflow:hidden;padding:23px;border-radius:var(--radius);color:#fff;background:#4f5950;box-shadow:var(--shadow);transition:.25s ease}
        .game-card:hover{transform:translateY(-5px);box-shadow:0 22px 38px rgba(39,25,39,.18)}
        .game-card:nth-child(2){background:#68463c}.game-card:nth-child(3){background:#3f5060}.game-card:nth-child(4){background:#76516c}
        .game-card:before{content:"✦";position:absolute;right:20px;top:13px;font-size:54px;color:rgba(255,255,255,.15)}
        .game-card h3{font-size:22px;margin:16px 0 5px}.game-card p{margin:0;color:rgba(255,255,255,.7);font-size:14px}
        .game-meta{display:flex;gap:10px;margin-top:16px;color:rgba(255,255,255,.68);font-size:13px}
        .badge{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;color:#fff4df;background:rgba(225,164,78,.88);border-radius:6px;font-size:12px;font-weight:700}.badge.mint{background:var(--mint);color:#152c29}
        .offer-layout{display:grid;grid-template-columns:1.4fr .8fr;gap:20px}
        .offer-banner{min-height:250px;padding:32px;display:flex;flex-direction:column;justify-content:end;border-radius:var(--radius);background:#f0dfcf;border:1px solid rgba(220,121,91,.2);position:relative;overflow:hidden}
        .offer-banner:after{content:"最新";position:absolute;right:28px;top:25px;color:var(--coral);font-size:72px;font-weight:900;opacity:.13}
        .offer-banner h3{font-size:28px;margin:12px 0 7px}.offer-banner p{max-width:560px;color:var(--ink-soft);margin:0}
        .offer-list{display:flex;flex-direction:column;gap:12px}.offer-item{padding:20px;border:1px solid var(--line);border-radius:12px;background:#fff;transition:.22s}.offer-item:hover{border-color:var(--coral);transform:translateX(3px)}
        .offer-item strong{display:block;margin:8px 0 3px}.offer-item small{color:var(--muted)}
        .channel-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
        .channel{padding:20px 16px;border:1px solid var(--line);border-radius:12px;background:var(--paper);transition:.22s}.channel:hover{background:#fff;box-shadow:var(--shadow);transform:translateY(-3px)}
        .channel-icon{color:var(--berry);font-size:25px}.channel h3{font-size:17px;margin:10px 0 4px}.channel p{font-size:13px;color:var(--muted);margin:0}
        .app-panel{display:grid;grid-template-columns:1fr .9fr;gap:50px;align-items:center}.app-copy h2{font-size:36px;margin:8px 0 14px}.app-copy p{color:#afa2b0;max-width:570px}
        .app-points{display:flex;gap:18px;flex-wrap:wrap;margin:24px 0}.app-point{color:#eee3e8;font-size:14px}.app-point b{display:block;color:#f3bd79;font-size:22px;line-height:1.2}.app-visual{min-height:360px;position:relative;border-radius:22px;background:#2b222c;overflow:hidden;border:1px solid var(--line-dark)}.app-visual:before{content:"";position:absolute;inset:28px;border:1px solid rgba(255,255,255,.14);border-radius:18px;transform:rotate(-5deg)}.app-device{position:absolute;z-index:1;left:50%;top:28px;transform:translateX(-50%);width:190px;height:330px;border:8px solid #433542;border-radius:28px;background:#f0dfcf;box-shadow:0 24px 42px rgba(0,0,0,.3);padding:20px 15px}.device-top{height:76px;border-radius:12px;background:var(--berry);margin-bottom:14px}.device-line{height:10px;width:72%;border-radius:4px;background:#d6c5bf;margin:12px 0}.device-line.short{width:48%}.device-block{height:70px;border-radius:12px;background:#d98768;margin-top:18px}.download-box{display:flex;align-items:center;gap:15px;margin-top:25px}.qr{width:76px;height:76px;padding:7px;background:#fff;border-radius:8px;display:grid;grid-template-columns:repeat(5,1fr);gap:3px}.qr i{background:var(--ink)}.qr i:nth-child(2n),.qr i:nth-child(7n){background:transparent}.version{font-size:13px;color:#b8aab7}.news-layout{display:grid;grid-template-columns:1fr .8fr;gap:22px}.news-lead{padding:30px;border-radius:var(--radius);background:var(--berry-dark);color:#fff;min-height:290px;display:flex;flex-direction:column;justify-content:end}.news-lead .badge{align-self:flex-start}.news-lead h3{font-size:28px;margin:14px 0 8px}.news-lead p{color:#ddcad5;margin:0}.news-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}.news-item{display:flex;justify-content:space-between;gap:18px;padding:19px 0;border-bottom:1px solid var(--line)}.news-item h3{font-size:17px;margin:4px 0}.news-item p{margin:0;color:var(--muted);font-size:14px}.news-date{color:var(--coral);font-size:13px;white-space:nowrap}.faq-panel{display:grid;grid-template-columns:.72fr 1.28fr;gap:60px;align-items:start}.faq-intro{padding:28px;border-left:4px solid var(--coral);background:#f0e8e1}.faq-intro h2{margin:0 0 12px;font-size:31px}.faq-intro p{margin:0;color:var(--muted)}.faq-list{border-top:1px solid var(--line)}.faq-item{border-bottom:1px solid var(--line)}.faq-question{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;padding:19px 0;border:0;background:transparent;color:var(--ink);font-weight:700}.faq-question span:last-child{color:var(--coral);font-size:23px}.faq-answer{display:none;padding:0 35px 18px 0;color:var(--muted);font-size:14px}.faq-item.open .faq-answer{display:block}.faq-item.open .faq-question span:last-child{transform:rotate(45deg)}.cta{padding:42px 0;background:var(--coral);color:#fff}.cta-wrap{display:flex;align-items:center;justify-content:space-between;gap:25px}.cta h2{font-size:30px;margin:0 0 5px}.cta p{margin:0;color:#ffe8df}.cta .btn-secondary{border-color:rgba(255,255,255,.55)}.site-footer{padding:58px 0 24px;background:var(--night);color:#fff}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px;padding-bottom:42px;border-bottom:1px solid var(--line-dark)}.footer-brand p{max-width:310px;color:#a99ca9;margin:18px 0 0;font-size:14px}.footer-title{font-weight:800;margin-bottom:14px;color:#f3bd79}.footer-links{display:flex;flex-direction:column;gap:8px;color:#bcb1bd;font-size:14px}.footer-links a{transition:.2s}.footer-links a:hover{color:#fff0dc}.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:20px;color:#867a87;font-size:12px}.page-intro{padding:66px 0 50px;background:var(--paper-2);border-bottom:1px solid var(--line)}.page-intro h1{font-size:clamp(38px,5vw,58px);margin:10px 0 14px;color:var(--ink)}.page-intro p{max-width:690px;color:var(--muted);margin:0;font-size:17px}.crumbs{color:var(--berry);font-size:13px;font-weight:700}.crumbs a:hover{color:var(--coral)}.topic-note{display:flex;align-items:center;gap:14px;margin-top:24px;color:var(--ink-soft);font-size:14px}.topic-note:before{content:"";width:34px;height:2px;background:var(--coral)}.empty-note{padding:25px;border:1px dashed rgba(142,62,104,.35);border-radius:12px;color:var(--muted);background:rgba(255,255,255,.38)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:992px){.nav-wrap{gap:18px}.main-nav{gap:2px}.main-nav a{padding:9px 8px;font-size:14px}.nav-action{padding:0 13px;font-size:14px}.hero-grid{gap:35px}.game-layout,.offer-layout,.news-layout{grid-template-columns:1fr}.channel-strip{grid-template-columns:repeat(3,1fr)}.app-panel{gap:30px}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}}@media(max-width:768px){.container{width:min(var(--container),calc(100% - 36px))}.nav-wrap{min-height:68px;flex-wrap:wrap}.main-nav{display:none;order:4;flex-basis:100%;padding:8px 0 16px;flex-direction:column;align-items:stretch}.main-nav.open{display:flex}.main-nav a{padding:11px 12px}.nav-action{margin-left:auto}.menu-btn{display:block}.hero{padding:55px 0 60px}.hero-grid{grid-template-columns:1fr}.hero-art{min-height:280px}.orbit{right:50%;transform:translateX(50%) rotate(-24deg);width:240px;height:240px}.tile-one{left:7%;top:28px;width:170px;height:205px}.tile-two{right:6%;bottom:0;width:150px;height:180px}.tile-three{right:32%;top:3px;width:110px;height:110px}.section{padding:65px 0}.section-head{display:block;margin-bottom:24px}.section-head h2{font-size:29px}.section-head .text-link{display:inline-block;margin-top:12px}.game-side{gap:12px}.game-feature{min-height:360px}.app-panel,.faq-panel{grid-template-columns:1fr}.faq-panel{gap:30px}.app-visual{min-height:330px}.cta-wrap{display:block}.cta .btn-secondary{margin-top:20px}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-brand{grid-column:1/-1}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:6px}}@media(max-width:520px){.container{width:calc(100% - 32px)}.brand-text{font-size:16px}.nav-action{display:none}h1{font-size:38px}.hero-copy{font-size:16px}.hero-actions a{width:100%}.game-side{grid-template-columns:1fr}.game-feature{min-height:330px;padding:24px}.game-feature-content{left:24px;right:24px}.game-feature h3{font-size:27px}.channel-strip{grid-template-columns:1fr 1fr}.offer-banner{padding:24px;min-height:220px}.offer-banner h3{font-size:24px}.news-item{display:block}.news-date{display:block;margin-top:7px}.download-box{align-items:flex-start}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}}

/* roulang page: category2 */
:root{
            --ink:#211d25;
            --ink-soft:#3a333d;
            --night:#171419;
            --night-2:#211a23;
            --paper:#f4f0eb;
            --paper-2:#ebe4de;
            --white:#fffdfa;
            --muted:#8c838e;
            --line:rgba(55,43,57,.14);
            --line-dark:rgba(255,255,255,.12);
            --berry:#8e3e68;
            --berry-dark:#642748;
            --coral:#dc795b;
            --amber:#e1a44e;
            --mint:#79a99c;
            --radius:16px;
            --shadow:0 18px 45px rgba(27,20,28,.12);
            --container:1220px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--ink);
            background:var(--paper);
            font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;
            font-size:16px;
            line-height:1.7;
            -webkit-font-smoothing:antialiased;
        }
        a{color:inherit;text-decoration:none}
        a:focus-visible,button:focus-visible{outline:3px solid rgba(225,164,78,.65);outline-offset:3px}
        img{display:block;max-width:100%}
        button,input{font:inherit}
        button{cursor:pointer}
        .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
        .site-header{
            position:sticky;top:0;z-index:20;
            background:rgba(23,20,25,.96);
            border-bottom:1px solid var(--line-dark);
            backdrop-filter:blur(12px)
        }
        .nav-wrap{min-height:76px;display:flex;align-items:center;gap:38px}
        .brand{display:inline-flex;align-items:center;gap:12px;color:var(--white);font-weight:800;white-space:nowrap}
        .brand-mark{
            width:38px;height:38px;display:grid;place-items:center;
            color:var(--white);background:var(--berry);border-radius:11px;
            font-size:19px;box-shadow:5px 5px 0 rgba(220,121,91,.35)
        }
        .brand-text{font-size:18px}
        .main-nav{display:flex;align-items:center;gap:8px;flex:1}
        .main-nav a{
            position:relative;color:#c9c0ca;padding:10px 13px;border-radius:9px;
            transition:.22s ease
        }
        .main-nav a:hover,.main-nav a:focus,.main-nav a.active{color:var(--white);background:rgba(255,255,255,.09)}
        .main-nav a.active::after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;background:var(--coral)}
        .nav-hot{margin-left:4px;color:var(--amber);font-size:11px;vertical-align:top}
        .nav-action,.btn-primary{
            display:inline-flex;align-items:center;justify-content:center;gap:8px;
            min-height:44px;padding:0 20px;border:1px solid transparent;border-radius:10px;
            color:#fff;background:var(--coral);font-weight:700;transition:.22s ease
        }
        .nav-action:hover,.btn-primary:hover{background:#eb8b6b;transform:translateY(-2px);box-shadow:0 8px 20px rgba(220,121,91,.25)}
        .menu-btn{display:none;border:1px solid var(--line-dark);background:transparent;color:var(--white);padding:8px 10px;border-radius:8px}
        .hero{
            position:relative;overflow:hidden;color:var(--white);
            background:var(--night);padding:72px 0 76px
        }
        .hero::before{
            content:"";position:absolute;inset:0;opacity:.22;
            background-image:linear-gradient(45deg,transparent 48%,#b96f91 49%,transparent 51%),linear-gradient(-45deg,transparent 48%,#b96f91 49%,transparent 51%);
            background-size:86px 86px
        }
        .hero-grid{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}
        .eyebrow{color:#f3bd79;font-size:13px;font-weight:800;letter-spacing:1px}
        h1{margin:14px 0 18px;font-size:clamp(38px,5vw,64px);line-height:1.16;letter-spacing:-1px}
        .hero-copy{max-width:600px;color:#c9beca;font-size:18px}
        .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
        .btn-secondary{
            display:inline-flex;align-items:center;justify-content:center;min-height:44px;
            padding:0 20px;border:1px solid rgba(255,255,255,.28);border-radius:10px;
            color:var(--white);transition:.22s ease
        }
        .btn-secondary:hover,.btn-secondary:focus{border-color:#f1ae7a;color:#ffd5bb;background:rgba(255,255,255,.07)}
        .hero-art{min-height:350px;position:relative}
        .art-panel{
            position:absolute;inset:18px 30px 0 30px;
            border:1px solid rgba(255,255,255,.18);border-radius:24px;
            background:linear-gradient(145deg,#493041,#2b222d);
            box-shadow:24px 28px 0 rgba(100,39,72,.35),var(--shadow);
            transform:rotate(3deg)
        }
        .art-panel::before,.art-panel::after{content:"";position:absolute;border-radius:50%}
        .art-panel::before{width:190px;height:190px;right:14%;top:12%;background:rgba(225,164,78,.72);filter:blur(1px)}
        .art-panel::after{width:125px;height:125px;left:14%;bottom:13%;background:rgba(121,169,156,.65)}
        .art-line{position:absolute;z-index:2;left:12%;right:12%;top:21%;height:2px;background:rgba(255,255,255,.44);box-shadow:0 120px rgba(255,255,255,.14),0 220px rgba(255,255,255,.14)}
        .art-card{
            position:absolute;z-index:3;right:12%;bottom:15%;width:210px;padding:18px;
            border-radius:13px;background:rgba(255,253,250,.94);color:var(--ink);
            box-shadow:0 15px 30px rgba(0,0,0,.25);transform:rotate(-6deg)
        }
        .art-card strong{display:block;font-size:21px}.art-card span{color:var(--berry);font-size:13px}
        .section{padding:88px 0}.section-light{background:var(--paper)}.section-white{background:var(--white)}
        .section-dark{color:var(--white);background:var(--night-2)}
        .section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:34px}
        .section-head h2{margin:5px 0 0;font-size:34px;line-height:1.25}
        .section-head p{margin:0;color:var(--muted);max-width:540px}
        .section-dark .section-head p{color:#afa2b0}
        .text-link{color:var(--berry);font-weight:700;white-space:nowrap}
        .text-link:hover{color:var(--coral)}
        .offer-layout{display:grid;grid-template-columns:1.18fr .82fr;gap:20px}
        .offer-feature{
            position:relative;min-height:360px;overflow:hidden;padding:34px;border-radius:var(--radius);
            color:#fff;background:#59364f;box-shadow:var(--shadow)
        }
        .offer-feature::before{
            content:"";position:absolute;width:280px;height:280px;right:-60px;top:-55px;
            border:28px solid rgba(225,164,78,.7);border-radius:50%;
            box-shadow:0 0 0 24px rgba(220,121,91,.2),0 0 0 52px rgba(255,255,255,.07)
        }
        .offer-feature::after{content:"";position:absolute;right:20%;bottom:24px;width:130px;height:9px;background:var(--amber);transform:rotate(-18deg);box-shadow:40px -26px var(--coral)}
        .offer-content{position:relative;z-index:1;max-width:430px}
        .badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;color:#fff4df;background:rgba(225,164,78,.88);border-radius:6px;font-size:12px;font-weight:700}
        .badge.mint{background:var(--mint);color:#152c29}
        .offer-feature h3{margin:20px 0 10px;font-size:31px;line-height:1.3}
        .offer-feature p{color:rgba(255,255,255,.78);max-width:390px}
        .offer-info{display:flex;gap:22px;margin-top:26px;color:#f5d5bf;font-size:14px}
        .offer-stack{display:grid;gap:20px}
        .offer-card{
            display:flex;align-items:center;justify-content:space-between;gap:20px;
            min-height:170px;padding:25px;border:1px solid var(--line);border-radius:var(--radius);
            background:var(--white);transition:.24s ease
        }
        .offer-card:hover{transform:translateX(5px);box-shadow:var(--shadow);border-color:rgba(142,62,104,.3)}
        .offer-card h3{margin:12px 0 4px;font-size:21px}
        .offer-card p{margin:0;color:var(--muted);font-size:14px}
        .offer-date{color:var(--berry);font-size:13px;font-weight:700;white-space:nowrap}
        .filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
        .filter-bar button{
            border:1px solid var(--line);border-radius:9px;padding:9px 16px;
            color:var(--ink-soft);background:transparent;transition:.2s
        }
        .filter-bar button:hover,.filter-bar button.active{color:#fff;background:var(--berry);border-color:var(--berry)}
        .timeline{position:relative;max-width:900px;margin:0 auto}
        .timeline::before{content:"";position:absolute;left:21px;top:8px;bottom:8px;width:1px;background:#d5c8cf}
        .timeline-item{position:relative;display:grid;grid-template-columns:44px 1fr;gap:20px;margin-bottom:20px}
        .timeline-dot{position:relative;z-index:1;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--berry);font-weight:800}
        .timeline-item:nth-child(2) .timeline-dot{background:var(--coral)}.timeline-item:nth-child(3) .timeline-dot{background:var(--mint);color:#18332e}
        .timeline-body{padding:22px 25px;border:1px solid var(--line);border-radius:14px;background:var(--white)}
        .timeline-top{display:flex;justify-content:space-between;gap:15px;align-items:center}
        .timeline-body h3{margin:8px 0 7px;font-size:22px}
        .timeline-body p{margin:0;color:var(--muted)}
        .status{font-size:12px;color:var(--berry);background:#f2e6ed;padding:4px 9px;border-radius:6px;white-space:nowrap}
        .content-band{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
        .content-tile{min-height:170px;padding:25px;border-radius:var(--radius);background:var(--paper-2);border-left:4px solid var(--berry);transition:.22s}
        .content-tile:nth-child(2){border-color:var(--coral);background:#f2e5dd}.content-tile:nth-child(3){border-color:var(--mint);background:#e5eeeb}
        .content-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
        .content-tile h3{margin:12px 0 5px;font-size:20px}.content-tile p{margin:0;color:var(--muted);font-size:14px}
        .app-strip{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:center}
        .app-copy h2{margin:6px 0 12px;font-size:34px}.app-copy p{color:#b9acb9;max-width:570px}
        .app-points{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0}
        .app-points span{padding:7px 11px;border:1px solid var(--line-dark);border-radius:8px;color:#e2d6df;font-size:13px}
        .device-stage{position:relative;min-height:260px;border-radius:20px;background:#302432;border:1px solid var(--line-dark);overflow:hidden}
        .device{position:absolute;left:50%;bottom:-55px;width:154px;height:270px;transform:translateX(-50%);border:7px solid #55434f;border-radius:26px;background:#f4ece6;box-shadow:0 20px 35px rgba(0,0,0,.3)}
        .device::before{content:"问鼎";display:grid;place-items:center;height:34px;color:#fff;background:var(--berry);font-weight:800}
        .device::after{content:"热门游戏　最新优惠";position:absolute;left:15px;right:15px;top:75px;padding:16px 5px;color:var(--berry);background:#e9d7df;border-radius:9px;font-size:12px;text-align:center}
        .qr{position:absolute;right:30px;top:45px;width:72px;height:72px;border:8px solid #fff;background:repeating-linear-gradient(45deg,#241d25 0 5px,#fff 5px 10px)}
        .qr-label{position:absolute;right:20px;top:125px;color:#b8a8b6;font-size:12px}
        .news-wrap{display:grid;grid-template-columns:1fr .65fr;gap:22px}
        .news-main,.news-list{border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
        .news-main{padding:30px}.news-main h3{font-size:25px;margin:15px 0 8px}.news-main p{color:var(--muted)}
        .news-list{padding:12px 24px}
        .news-item{display:block;padding:17px 0;border-bottom:1px solid var(--line)}
        .news-item:last-child{border-bottom:0}.news-item strong{display:block;margin:5px 0}.news-item small{color:var(--muted)}
        .news-tag{color:var(--berry);font-size:12px;font-weight:700}
        .faq-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:50px;align-items:start}
        .faq-intro h2{font-size:34px;margin:8px 0 12px}.faq-intro p{color:var(--muted)}
        .accordion-item{border:0;border-bottom:1px solid var(--line);background:transparent}
        .accordion-button{padding:20px 0;background:transparent!important;color:var(--ink)!important;box-shadow:none!important;font-weight:700}
        .accordion-body{padding:0 0 20px;color:var(--muted)}
        .cta{padding:62px 0;background:var(--berry-dark);color:#fff}
        .cta-wrap{display:flex;align-items:center;justify-content:space-between;gap:30px}.cta h2{margin:0 0 8px;font-size:32px}.cta p{margin:0;color:#dbcbd5}
        .site-footer{padding:58px 0 24px;color:#c9c0ca;background:var(--night)}
        .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px}
        .footer-brand p{max-width:310px;color:#948895;margin-top:18px;font-size:14px}
        .footer-title{margin-bottom:14px;color:#fff;font-weight:700}.footer-links{display:grid;gap:8px;font-size:14px;color:#a99ca9}.footer-links a:hover{color:#f2b28b}
        .footer-bottom{display:flex;justify-content:space-between;gap:15px;margin-top:45px;padding-top:20px;border-top:1px solid var(--line-dark);color:#827583;font-size:13px}
        @media(max-width:992px){
            .nav-wrap{gap:18px}.main-nav{gap:2px}.main-nav a{padding:9px 8px;font-size:14px}.nav-action{display:none}
            .hero-grid{grid-template-columns:1fr;gap:30px}.hero-art{min-height:300px}
            .offer-layout,.news-wrap{grid-template-columns:1fr}.content-band{grid-template-columns:repeat(3,1fr)}
            .app-strip{grid-template-columns:1fr 260px}.faq-layout{gap:28px}
        }
        @media(max-width:768px){
            .container{width:min(var(--container),calc(100% - 36px))}
            .main-nav{display:none;position:absolute;left:18px;right:18px;top:70px;padding:10px;background:var(--night-2);border:1px solid var(--line-dark);border-radius:12px;box-shadow:var(--shadow)}
            .main-nav.open{display:grid}.main-nav a{padding:12px}.main-nav a.active::after{left:12px;right:auto;width:28px;bottom:5px}
            .menu-btn{display:block;margin-left:auto}.hero{padding:56px 0 60px}h1{font-size:42px}.hero-copy{font-size:16px}
            .section{padding:64px 0}.section-head{display:block}.section-head h2{font-size:29px;margin-bottom:10px}.section-head .text-link{display:inline-block;margin-top:16px}
            .content-band{grid-template-columns:1fr}.app-strip,.faq-layout{grid-template-columns:1fr}.device-stage{min-height:300px}
            .cta-wrap{display:block}.cta .btn-primary{margin-top:22px}.footer-grid{grid-template-columns:1fr 1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:6px}
        }
        @media(max-width:520px){
            .container{width:calc(100% - 32px)}.brand-text{font-size:16px}.brand-mark{width:35px;height:35px}
            h1{font-size:35px}.hero-art{min-height:245px}.art-panel{inset:15px 8px 0}.art-card{right:7%;bottom:10%;width:170px;padding:13px}.art-card strong{font-size:17px}
            .offer-feature{min-height:390px;padding:25px}.offer-feature h3{font-size:26px}.offer-card{display:block}.offer-date{display:block;margin-top:13px}
            .timeline-item{grid-template-columns:36px 1fr;gap:12px}.timeline-dot{width:36px;height:36px;font-size:13px}.timeline::before{left:17px}.timeline-body{padding:18px}.timeline-top{display:block}
            .app-copy h2,.faq-intro h2,.cta h2{font-size:28px}.qr{right:20px}.qr-label{right:10px}
            .footer-grid{grid-template-columns:1fr}.footer-bottom{margin-top:30px}
        }

/* roulang page: category4 */
:root{
            --ink:#211d25;
            --ink-soft:#3a333d;
            --night:#171419;
            --night-2:#211a23;
            --paper:#f4f0eb;
            --paper-2:#ebe4de;
            --white:#fffdfa;
            --muted:#8c838e;
            --line:rgba(55,43,57,.14);
            --line-dark:rgba(255,255,255,.12);
            --berry:#8e3e68;
            --berry-dark:#642748;
            --coral:#dc795b;
            --amber:#e1a44e;
            --mint:#79a99c;
            --radius:16px;
            --shadow:0 18px 45px rgba(27,20,28,.12);
            --container:1220px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;color:var(--ink);background:var(--paper);
            font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;
            font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased
        }
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%}
        button,input{font:inherit}
        button{cursor:pointer}
        .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
        .site-header{
            position:sticky;top:0;z-index:20;background:rgba(23,20,25,.96);
            border-bottom:1px solid var(--line-dark)
        }
        .nav-wrap{min-height:76px;display:flex;align-items:center;gap:38px}
        .brand{display:inline-flex;align-items:center;gap:12px;color:var(--white);font-weight:800;white-space:nowrap}
        .brand-mark{
            width:38px;height:38px;display:grid;place-items:center;color:var(--white);
            background:var(--berry);border-radius:11px;font-size:19px;
            box-shadow:5px 5px 0 rgba(220,121,91,.35)
        }
        .brand-text{font-size:18px}
        .main-nav{display:flex;align-items:center;gap:8px;flex:1}
        .main-nav a{
            position:relative;color:#c9c0ca;padding:10px 13px;border-radius:9px;transition:.22s ease
        }
        .main-nav a:hover,.main-nav a:focus,.main-nav a.active{
            color:var(--white);background:rgba(255,255,255,.09)
        }
        .main-nav a.active:after{
            content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;background:var(--coral)
        }
        .nav-hot{margin-left:4px;color:var(--amber);font-size:11px;vertical-align:top}
        .nav-action,.btn-primary{
            display:inline-flex;align-items:center;justify-content:center;gap:8px;
            min-height:44px;padding:0 20px;border:1px solid transparent;border-radius:10px;
            color:#fff;background:var(--coral);font-weight:700;transition:.22s ease
        }
        .nav-action:hover,.btn-primary:hover{
            background:#eb8b6b;transform:translateY(-2px);
            box-shadow:0 8px 20px rgba(220,121,91,.25)
        }
        .btn-primary:focus,.nav-action:focus,.btn-secondary:focus,.menu-btn:focus,
        .download-btn:focus,.text-link:focus,.footer-links a:focus{
            outline:3px solid rgba(225,164,78,.45);outline-offset:3px
        }
        .menu-btn{
            display:none;border:1px solid var(--line-dark);background:transparent;
            color:var(--white);padding:8px 10px;border-radius:8px
        }
        .page-hero{
            color:var(--white);background:var(--night);position:relative;overflow:hidden;
            padding:64px 0 72px
        }
        .page-hero:before{
            content:"";position:absolute;inset:0;opacity:.2;
            background-image:linear-gradient(135deg,transparent 48%,#b96f91 49%,transparent 51%),
            linear-gradient(45deg,transparent 48%,#e1a44e 49%,transparent 51%);
            background-size:94px 94px
        }
        .page-hero-grid{
            position:relative;display:grid;grid-template-columns:1.05fr .95fr;
            gap:70px;align-items:center
        }
        .eyebrow{color:#f3bd79;font-size:13px;font-weight:800;letter-spacing:.04em}
        h1,h2,h3,p{margin-top:0}
        .page-hero h1{margin:12px 0 18px;font-size:clamp(36px,5vw,64px);line-height:1.15;letter-spacing:-.04em}
        .hero-copy{max-width:630px;color:#c9beca;font-size:18px}
        .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
        .btn-secondary{
            display:inline-flex;align-items:center;justify-content:center;min-height:44px;
            padding:0 20px;border:1px solid rgba(255,255,255,.28);border-radius:10px;
            color:var(--white);transition:.22s ease
        }
        .btn-secondary:hover{border-color:#f1ae7a;color:#ffd5bb;background:rgba(255,255,255,.07)}
        .hero-device{
            min-height:340px;position:relative;display:flex;align-items:center;
            justify-content:center
        }
        .device-shadow{
            position:absolute;width:330px;height:210px;border-radius:50%;
            background:rgba(220,121,91,.18);filter:blur(28px);transform:rotate(-15deg)
        }
        .device-frame{
            position:relative;width:205px;height:360px;padding:10px;border:8px solid #302530;
            border-radius:29px;background:#0e0c10;box-shadow:24px 28px 0 rgba(0,0,0,.2),0 22px 45px rgba(0,0,0,.35);
            transform:rotate(7deg)
        }
        .device-screen{
            height:100%;overflow:hidden;border-radius:17px;
            background:linear-gradient(160deg,#8e3e68 0 35%,#2d202d 35% 100%);
            padding:22px 15px;color:#fff
        }
        .screen-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;opacity:.8}
        .screen-title{margin-top:44px;font-size:22px;font-weight:800;line-height:1.25}
        .screen-line{height:8px;margin-top:16px;border-radius:5px;background:rgba(255,255,255,.25)}
        .screen-line.short{width:64%;margin-top:8px}
        .screen-card{
            height:78px;margin-top:25px;border-radius:12px;
            background:linear-gradient(135deg,#e1a44e,#dc795b);position:relative
        }
        .screen-card:after{
            content:"";position:absolute;width:48px;height:48px;right:15px;top:15px;
            border:1px solid rgba(255,255,255,.55);transform:rotate(45deg)
        }
        .device-note{
            position:absolute;right:4%;bottom:26px;padding:15px 18px;border:1px solid var(--line-dark);
            border-radius:13px;background:rgba(255,255,255,.08);color:#e9dfe8;font-size:14px
        }
        .section{padding:88px 0}
        .section-light{background:var(--paper)}
        .section-white{background:var(--white)}
        .section-dark{background:var(--night-2);color:var(--white)}
        .section-head{
            display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:34px
        }
        .section-head h2{margin:5px 0 0;font-size:34px;line-height:1.25}
        .section-head p{margin:0;color:var(--muted);max-width:540px}
        .section-dark .section-head p{color:#afa2b0}
        .text-link{color:var(--berry);font-weight:700;white-space:nowrap}
        .text-link:hover{color:var(--coral)}
        .download-layout{
            display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:stretch
        }
        .download-panel{
            padding:34px;border:1px solid var(--line);border-radius:var(--radius);
            background:var(--white);box-shadow:var(--shadow)
        }
        .download-panel h2{margin:0 0 12px;font-size:30px;line-height:1.3}
        .download-panel>p{color:var(--muted);max-width:650px}
        .version-row{
            display:flex;flex-wrap:wrap;gap:10px;margin:24px 0
        }
        .info-chip{
            display:inline-flex;align-items:center;gap:7px;padding:8px 12px;
            border-radius:8px;background:var(--paper);color:var(--ink-soft);font-size:14px
        }
        .info-chip strong{color:var(--berry)}
        .download-actions{display:flex;align-items:center;flex-wrap:wrap;gap:15px}
        .download-btn{
            display:inline-flex;align-items:center;justify-content:center;min-height:48px;
            padding:0 22px;border:0;border-radius:10px;background:var(--coral);color:#fff;font-weight:800;
            transition:.22s ease
        }
        .download-btn:hover{background:#eb8b6b;transform:translateY(-2px);box-shadow:0 10px 22px rgba(220,121,91,.25)}
        .download-hint{font-size:13px;color:var(--muted)}
        .qr-panel{
            display:flex;align-items:center;gap:24px;padding:30px;border-radius:var(--radius);
            background:var(--night-2);color:var(--white);box-shadow:var(--shadow)
        }
        .qr-box{
            width:154px;height:154px;flex:0 0 154px;padding:13px;border-radius:10px;background:#fff;
            display:grid;place-items:center
        }
        .qr-pattern{
            width:100%;height:100%;
            background:
            linear-gradient(90deg,#19151b 10%,transparent 10% 20%,#19151b 20% 30%,transparent 30% 40%,#19151b 40% 55%,transparent 55% 66%,#19151b 66% 76%,transparent 76% 86%,#19151b 86%),
            linear-gradient(#19151b 10%,transparent 10% 20%,#19151b 20% 31%,transparent 31% 43%,#19151b 43% 51%,transparent 51% 64%,#19151b 64% 75%,transparent 75% 86%,#19151b 86%);
            opacity:.82
        }
        .qr-panel h3{margin:0 0 8px;font-size:22px}
        .qr-panel p{margin:0;color:#b9adb9;font-size:14px}
        .feature-strip{
            display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px
        }
        .feature-item{
            padding:24px;border-radius:14px;background:var(--paper);border:1px solid var(--line)
        }
        .feature-icon{
            width:42px;height:42px;display:grid;place-items:center;border-radius:11px;
            background:rgba(142,62,104,.12);color:var(--berry);font-weight:800;margin-bottom:16px
        }
        .feature-item h3{margin:0 0 7px;font-size:19px}
        .feature-item p{margin:0;color:var(--muted);font-size:14px}
        .steps{
            display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:start
        }
        .steps-intro h2{margin:0 0 14px;font-size:34px;line-height:1.25}
        .steps-intro p{color:#afa2b0;max-width:450px}
        .step-list{border-top:1px solid var(--line-dark)}
        .step{
            display:grid;grid-template-columns:54px 1fr;gap:18px;padding:22px 0;
            border-bottom:1px solid var(--line-dark)
        }
        .step-number{
            width:40px;height:40px;display:grid;place-items:center;border-radius:10px;
            color:#fff;background:var(--berry);font-weight:800
        }
        .step h3{margin:0 0 4px;font-size:19px}
        .step p{margin:0;color:#afa2b0;font-size:14px}
        .faq-wrap{max-width:900px;margin:0 auto}
        .faq-item{border-bottom:1px solid var(--line);background:var(--white)}
        .faq-item:first-child{border-top:1px solid var(--line)}
        .faq-question{
            width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;
            padding:21px 2px;border:0;background:transparent;color:var(--ink);
            text-align:left;font-weight:800
        }
        .faq-question span:last-child{color:var(--coral);font-size:24px;font-weight:400;line-height:1}
        .faq-answer{display:none;padding:0 42px 20px 2px;color:var(--muted);font-size:14px}
        .faq-item.open .faq-answer{display:block}
        .faq-item.open .faq-question span:last-child{transform:rotate(45deg)}
        .cta{
            padding:44px 50px;border-radius:var(--radius);background:var(--berry-dark);
            color:#fff;display:flex;justify-content:space-between;align-items:center;gap:24px
        }
        .cta h2{margin:0 0 8px;font-size:30px}
        .cta p{margin:0;color:#decbd6}
        .cta-actions{display:flex;flex-wrap:wrap;gap:12px;flex:0 0 auto}
        .site-footer{padding:58px 0 24px;background:var(--night);color:#c9c0ca}
        .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px}
        .footer-brand p{max-width:330px;margin:18px 0 0;color:#978d99;font-size:14px}
        .footer-title{margin-bottom:13px;color:#fff;font-weight:800}
        .footer-links{display:grid;gap:8px;font-size:14px}
        .footer-links a{color:#a99eaa;transition:.2s ease}
        .footer-links a:hover{color:#f1b084}
        .footer-bottom{
            display:flex;justify-content:space-between;gap:20px;margin-top:42px;padding-top:18px;
            border-top:1px solid var(--line-dark);color:#827783;font-size:12px
        }
        @media(max-width:992px){
            .nav-wrap{gap:18px}.main-nav{gap:2px}.main-nav a{padding:9px 8px;font-size:14px}
            .nav-action{padding:0 14px;font-size:14px}
            .page-hero-grid{gap:35px}.download-layout{grid-template-columns:1fr}
            .steps{gap:35px}
        }
        @media(max-width:768px){
            .container{width:min(var(--container),calc(100% - 40px))}
            .nav-wrap{min-height:68px;flex-wrap:wrap}.brand-text{font-size:16px}
            .main-nav{
                display:none;order:5;flex-basis:100%;padding:8px 0 16px;
                flex-direction:column;align-items:stretch
            }
            .main-nav.open{display:flex}
            .main-nav a{padding:11px 12px}
            .nav-action{margin-left:auto}.menu-btn{display:block}
            .page-hero{padding:50px 0 55px}.page-hero-grid{grid-template-columns:1fr}
            .page-hero h1{font-size:42px}.hero-copy{font-size:16px}
            .hero-device{min-height:300px}.device-frame{width:175px;height:305px}
            .device-note{right:0;bottom:8px}.section{padding:64px 0}
            .section-head{display:block;margin-bottom:25px}.section-head h2{font-size:29px}
            .section-head p{margin-top:10px}.feature-strip{grid-template-columns:1fr}
            .steps{grid-template-columns:1fr}.steps-intro h2{font-size:29px}
            .cta{display:block;padding:32px 26px}.cta-actions{margin-top:23px}
            .footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-brand{grid-column:1/-1}
            .footer-bottom{display:block}.footer-bottom span{display:block;margin-top:6px}
        }
        @media(max-width:520px){
            .container{width:calc(100% - 32px)}
            .nav-action{display:none}.page-hero h1{font-size:35px}
            .hero-actions,.download-actions{align-items:stretch;flex-direction:column}
            .hero-actions a,.download-actions a{width:100%}
            .device-note{position:relative;right:auto;bottom:auto;margin-left:-8px;font-size:12px}
            .hero-device{min-height:325px;flex-direction:column;gap:15px}
            .download-panel,.qr-panel{padding:24px}.qr-panel{display:block;text-align:center}
            .qr-box{margin:0 auto 20px;width:145px;height:145px}
            .download-panel h2{font-size:25px}.footer-grid{grid-template-columns:1fr}
            .footer-brand{grid-column:auto}.cta h2{font-size:25px}
        }

/* roulang page: category3 */
:root{
            --ink:#211d25;--ink-soft:#3a333d;--night:#171419;--night-2:#211a23;
            --paper:#f4f0eb;--paper-2:#ebe4de;--white:#fffdfa;--muted:#8c838e;
            --line:rgba(55,43,57,.14);--line-dark:rgba(255,255,255,.12);
            --berry:#8e3e68;--berry-dark:#642748;--coral:#dc795b;--amber:#e1a44e;
            --mint:#79a99c;--radius:16px;--shadow:0 18px 45px rgba(27,20,28,.12);
            --container:1220px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;color:var(--ink);background:var(--paper);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
        a{color:inherit;text-decoration:none}
        a:focus-visible,button:focus-visible{outline:3px solid rgba(225,164,78,.65);outline-offset:3px}
        img{display:block;max-width:100%}
        button,input{font:inherit}
        button{cursor:pointer}
        .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
        .site-header{position:sticky;top:0;z-index:20;background:rgba(23,20,25,.97);border-bottom:1px solid var(--line-dark)}
        .nav-wrap{min-height:76px;display:flex;align-items:center;gap:38px}
        .brand{display:inline-flex;align-items:center;gap:12px;color:var(--white);font-weight:800;white-space:nowrap}
        .brand-mark{width:38px;height:38px;display:grid;place-items:center;color:#fff;background:var(--berry);border-radius:11px;font-size:19px;box-shadow:5px 5px 0 rgba(220,121,91,.35)}
        .brand-text{font-size:18px}
        .main-nav{display:flex;align-items:center;gap:8px;flex:1}
        .main-nav a{position:relative;color:#c9c0ca;padding:10px 13px;border-radius:9px;transition:.22s ease}
        .main-nav a:hover,.main-nav a:focus,.main-nav a.active{color:#fff;background:rgba(255,255,255,.09)}
        .main-nav a.active::after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;background:var(--coral)}
        .nav-hot{margin-left:4px;color:var(--amber);font-size:11px;vertical-align:top}
        .nav-action,.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:1px solid transparent;border-radius:10px;color:#fff;background:var(--coral);font-weight:700;transition:.22s ease}
        .nav-action:hover,.btn-primary:hover{background:#eb8b6b;transform:translateY(-2px);box-shadow:0 8px 20px rgba(220,121,91,.25);color:#fff}
        .menu-btn{display:none;border:1px solid var(--line-dark);background:transparent;color:#fff;padding:8px 10px;border-radius:8px}
        .hero{position:relative;overflow:hidden;padding:68px 0 74px;color:#fff;background:var(--night)}
        .hero:before{content:"";position:absolute;inset:0;opacity:.22;background-image:linear-gradient(45deg,transparent 48%,#b96f91 49%,transparent 51%),linear-gradient(-45deg,transparent 48%,#b96f91 49%,transparent 51%);background-size:86px 86px}
        .hero-inner{position:relative;display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:center}
        .eyebrow{color:#f3bd79;font-size:13px;font-weight:800;letter-spacing:.08em}
        h1{font-size:clamp(38px,5vw,64px);line-height:1.16;letter-spacing:-.04em;margin:12px 0 20px}
        .hero-copy{max-width:620px;color:#c9beca;font-size:18px}
        .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
        .btn-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border:1px solid rgba(255,255,255,.28);border-radius:10px;color:#fff;transition:.22s ease}
        .btn-secondary:hover{border-color:#f1ae7a;color:#ffd5bb;background:rgba(255,255,255,.07)}
        .news-board{position:relative;min-height:290px;padding:28px;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);background:rgba(255,255,255,.06);box-shadow:0 25px 60px rgba(0,0,0,.22)}
        .news-board:after{content:"";position:absolute;width:180px;height:180px;right:8%;top:18%;border:1px solid rgba(225,164,78,.55);transform:rotate(32deg);box-shadow:0 0 0 16px rgba(142,62,104,.22),0 0 0 32px rgba(220,121,91,.12)}
        .board-top{position:relative;z-index:1;display:flex;justify-content:space-between;border-bottom:1px solid var(--line-dark);padding-bottom:16px;color:#d9cbd8}
        .board-title{font-size:20px;font-weight:800;color:#fff}
        .board-list{position:relative;z-index:2;margin-top:14px;max-width:82%}
        .board-item{display:flex;gap:15px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line-dark)}
        .board-item:last-child{border-bottom:0}
        .board-index{color:var(--amber);font-weight:800}
        .board-item strong{display:block;color:#fff;font-size:15px}
        .board-item small{color:#a99da9}
        .section{padding:86px 0}
        .section-white{background:var(--white)}
        .section-dark{background:var(--night-2);color:#fff}
        .section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:32px}
        .section-head h2{margin:5px 0 0;font-size:34px;line-height:1.25}
        .section-head p{margin:0;color:var(--muted);max-width:530px}
        .section-dark .section-head p{color:#afa2b0}
        .text-link{color:var(--berry);font-weight:700;white-space:nowrap}
        .text-link:hover{color:var(--coral)}
        .news-layout{display:grid;grid-template-columns:280px 1fr;gap:22px;align-items:start}
        .filter-panel{padding:24px;border-radius:var(--radius);background:var(--paper-2);border:1px solid var(--line);position:sticky;top:100px}
        .filter-panel h3{margin:0 0 14px;font-size:20px}
        .filter-note{color:var(--muted);font-size:14px;margin:0 0 18px}
        .filter-list{display:grid;gap:7px}
        .filter-list a{padding:11px 13px;border-radius:9px;color:var(--ink-soft);transition:.2s}
        .filter-list a:hover,.filter-list a.active{background:var(--berry);color:#fff}
        .filter-status{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
        .article-list{display:grid;gap:14px}
        .news-item{display:grid;grid-template-columns:190px 1fr;gap:24px;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);transition:.24s ease}
        .news-item:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(142,62,104,.35)}
        .news-thumb{min-height:145px;border-radius:12px;background:#56334e;position:relative;overflow:hidden}
        .news-thumb:before{content:"";position:absolute;inset:18px;border:1px solid rgba(255,255,255,.35);transform:rotate(-8deg)}
        .news-thumb:after{content:"";position:absolute;width:90px;height:90px;right:18px;bottom:12px;border-radius:50%;background:rgba(225,164,78,.75);mix-blend-mode:screen}
        .thumb-2{background:#4f5950}.thumb-3{background:#68463c}.thumb-4{background:#493653}.thumb-5{background:#806044}
        .news-content{min-width:0}
        .news-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:13px}
        .badge{display:inline-flex;align-items:center;padding:4px 9px;border-radius:6px;background:rgba(142,62,104,.12);color:var(--berry-dark);font-size:12px;font-weight:800}
        .badge.amber{background:rgba(225,164,78,.2);color:#8a5c19}
        .news-item h3{margin:12px 0 6px;font-size:22px;line-height:1.4}
        .news-item h3 a:hover{color:var(--berry)}
        .news-item p{margin:0;color:#706873;font-size:14px}
        .news-more{margin-top:24px;text-align:center}
        .outline-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border:1px solid var(--berry);border-radius:10px;color:var(--berry);font-weight:700;transition:.2s}
        .outline-btn:hover{background:var(--berry);color:#fff}
        .feature-strip{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}
        .content-card{padding:30px;border-radius:var(--radius);background:var(--paper);border:1px solid var(--line)}
        .content-card.dark{background:#302532;color:#fff;border-color:transparent}
        .content-card h3{margin:0 0 10px;font-size:24px}
        .content-card p{color:var(--muted);margin:0 0 22px}
        .dark p{color:#c1b4c0}
        .quick-links{display:flex;flex-wrap:wrap;gap:10px}
        .quick-links a{padding:9px 13px;border-radius:8px;background:rgba(142,62,104,.1);color:var(--berry-dark);font-weight:700}
        .quick-links a:hover{background:var(--berry);color:#fff}
        .faq-wrap{max-width:900px;margin:0 auto}
        .faq-item{border-bottom:1px solid var(--line);padding:19px 0}
        .faq-item summary{cursor:pointer;font-size:18px;font-weight:800;list-style:none;display:flex;justify-content:space-between;gap:18px}
        .faq-item summary::-webkit-details-marker{display:none}
        .faq-item summary:after{content:"+";color:var(--coral);font-size:24px;line-height:1}
        .faq-item[open] summary:after{content:"−"}
        .faq-answer{padding:12px 34px 0 0;color:var(--muted)}
        .cta{padding:52px 0;background:var(--berry-dark);color:#fff}
        .cta-inner{display:flex;justify-content:space-between;align-items:center;gap:30px}
        .cta h2{margin:0 0 8px;font-size:32px}
        .cta p{margin:0;color:#e2cad7}
        .site-footer{padding:58px 0 22px;background:var(--night);color:#bdb0bd}
        .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px;padding-bottom:38px}
        .footer-brand p{max-width:320px;margin:18px 0 0;color:#958996}
        .footer-title{margin-bottom:14px;color:#fff;font-weight:800}
        .footer-links{display:grid;gap:8px;font-size:14px}
        .footer-links a:hover{color:#f0b080}
        .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:20px;border-top:1px solid var(--line-dark);font-size:13px;color:#887b89}
        @media(max-width:992px){
            .nav-wrap{gap:18px}.main-nav{gap:2px}.main-nav a{padding:9px 8px;font-size:14px}.nav-action{display:none}
            .hero-inner{grid-template-columns:1fr;gap:35px}.news-board{max-width:700px}
            .news-layout{grid-template-columns:220px 1fr}.news-item{grid-template-columns:145px 1fr}
            .footer-grid{grid-template-columns:1.5fr 1fr 1fr}
        }
        @media(max-width:768px){
            .container{width:min(var(--container),calc(100% - 36px))}
            .nav-wrap{min-height:68px}.menu-btn{display:block;margin-left:auto}
            .main-nav{display:none;position:absolute;left:18px;right:18px;top:68px;padding:10px;background:var(--night-2);border:1px solid var(--line-dark);border-radius:12px;flex-direction:column;align-items:stretch}
            .main-nav.open{display:flex}.main-nav a{padding:12px 14px}
            .hero{padding:54px 0 58px}.hero-copy{font-size:16px}.news-board{min-height:260px}
            .section{padding:64px 0}.section-head{display:block}.section-head h2{font-size:29px;margin-bottom:8px}.section-head .text-link{display:inline-block;margin-top:15px}
            .news-layout{grid-template-columns:1fr}.filter-panel{position:static}.filter-list{display:flex;overflow:auto;padding-bottom:2px}.filter-list a{white-space:nowrap}
            .feature-strip{grid-template-columns:1fr}.cta-inner{display:block}.cta .btn-primary{margin-top:22px}
            .footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:6px}
        }
        @media(max-width:520px){
            h1{font-size:38px}.container{width:calc(100% - 32px)}.hero-actions a{width:100%}
            .news-board{padding:20px}.board-list{max-width:100%}.news-board:after{opacity:.35}
            .news-item{grid-template-columns:1fr;gap:15px}.news-thumb{min-height:125px}
            .news-item h3{font-size:19px}.content-card{padding:23px}.cta h2{font-size:27px}
            .footer-grid{grid-template-columns:1fr}.footer-brand{padding-bottom:8px}
        }

/* roulang page: category5 */
:root{
            --ink:#211d25;
            --ink-soft:#3a333d;
            --night:#171419;
            --night-2:#211a23;
            --paper:#f4f0eb;
            --paper-2:#ebe4de;
            --white:#fffdfa;
            --muted:#8c838e;
            --line:rgba(55,43,57,.14);
            --line-dark:rgba(255,255,255,.12);
            --berry:#8e3e68;
            --berry-dark:#642748;
            --coral:#dc795b;
            --amber:#e1a44e;
            --mint:#79a99c;
            --radius:16px;
            --shadow:0 18px 45px rgba(27,20,28,.12);
            --container:1220px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--ink);
            background:var(--paper);
            font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;
            font-size:16px;
            line-height:1.7;
            -webkit-font-smoothing:antialiased;
        }
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%}
        button,input{font:inherit}
        button{cursor:pointer}
        .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
        .site-header{
            position:sticky;
            top:0;
            z-index:20;
            background:rgba(23,20,25,.96);
            border-bottom:1px solid var(--line-dark);
        }
        .nav-wrap{min-height:76px;display:flex;align-items:center;gap:38px}
        .brand{display:inline-flex;align-items:center;gap:12px;color:var(--white);font-weight:800;white-space:nowrap}
        .brand-mark{
            width:38px;height:38px;display:grid;place-items:center;
            color:var(--white);background:var(--berry);border-radius:11px;
            font-size:19px;box-shadow:5px 5px 0 rgba(220,121,91,.35)
        }
        .brand-text{font-size:18px}
        .main-nav{display:flex;align-items:center;gap:8px;flex:1}
        .main-nav a{
            position:relative;color:#c9c0ca;padding:10px 13px;border-radius:9px;
            transition:.22s ease
        }
        .main-nav a:hover,.main-nav a:focus,.main-nav a.active{
            color:var(--white);background:rgba(255,255,255,.09)
        }
        .main-nav a.active::after{
            content:"";position:absolute;left:13px;right:13px;bottom:3px;
            height:2px;background:var(--coral)
        }
        .nav-hot{margin-left:4px;color:var(--amber);font-size:11px;vertical-align:top}
        .nav-action,.btn-primary{
            display:inline-flex;align-items:center;justify-content:center;gap:8px;
            min-height:44px;padding:0 20px;border:1px solid transparent;
            border-radius:10px;color:#fff;background:var(--coral);
            font-weight:700;transition:.22s ease
        }
        .nav-action:hover,.btn-primary:hover{
            color:#fff;background:#eb8b6b;transform:translateY(-2px);
            box-shadow:0 8px 20px rgba(220,121,91,.25)
        }
        .menu-btn{
            display:none;border:1px solid var(--line-dark);background:transparent;
            color:var(--white);padding:8px 10px;border-radius:8px
        }
        .hero{
            position:relative;overflow:hidden;color:var(--white);
            background:var(--night);padding:76px 0 82px
        }
        .hero::before{
            content:"";position:absolute;inset:0;opacity:.22;
            background-image:linear-gradient(45deg,transparent 48%,#b96f91 49%,transparent 51%),linear-gradient(-45deg,transparent 48%,#b96f91 49%,transparent 51%);
            background-size:86px 86px
        }
        .hero::after{
            content:"";position:absolute;width:420px;height:420px;right:-120px;top:-180px;
            border:1px solid rgba(225,164,78,.35);border-radius:50%;
            box-shadow:0 0 0 30px rgba(225,164,78,.05),0 0 0 70px rgba(225,164,78,.04)
        }
        .hero-grid{
            position:relative;display:grid;grid-template-columns:1.02fr .98fr;
            gap:72px;align-items:center
        }
        .eyebrow{
            display:inline-flex;align-items:center;gap:8px;color:#f3bd79;
            font-size:13px;font-weight:800;letter-spacing:.08em
        }
        .eyebrow::before{content:"";width:25px;height:2px;background:var(--coral)}
        h1,h2,h3,p{overflow-wrap:anywhere}
        .hero h1{
            margin:17px 0 18px;max-width:650px;font-size:clamp(38px,5vw,66px);
            line-height:1.16;letter-spacing:-.04em
        }
        .hero-copy{max-width:590px;color:#c9beca;font-size:18px}
        .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
        .btn-secondary{
            display:inline-flex;align-items:center;justify-content:center;min-height:44px;
            padding:0 20px;border:1px solid rgba(255,255,255,.28);
            border-radius:10px;color:var(--white);transition:.22s ease
        }
        .btn-secondary:hover,.btn-secondary:focus{
            border-color:#f1ae7a;color:#ffd5bb;background:rgba(255,255,255,.07)
        }
        .guide-art{min-height:370px;position:relative}
        .orbit{
            position:absolute;inset:25px 20px 15px 35px;border:1px solid rgba(255,255,255,.2);
            border-radius:50%;transform:rotate(-18deg)
        }
        .orbit::before,.orbit::after{
            content:"";position:absolute;border-radius:50%;background:var(--amber)
        }
        .orbit::before{width:13px;height:13px;top:18%;left:13%;box-shadow:0 0 0 9px rgba(225,164,78,.14)}
        .orbit::after{width:9px;height:9px;right:12%;bottom:18%;background:var(--mint)}
        .guide-panel{
            position:absolute;left:14%;right:7%;top:58px;padding:27px;
            background:#302732;border:1px solid rgba(255,255,255,.14);
            border-radius:var(--radius);box-shadow:0 25px 60px rgba(0,0,0,.25);
            transform:rotate(2deg)
        }
        .panel-top{display:flex;justify-content:space-between;align-items:center;color:#d8cbd5;font-size:13px}
        .panel-dot{width:10px;height:10px;border-radius:50%;background:var(--coral);box-shadow:18px 0 var(--amber),36px 0 var(--mint)}
        .progress-line{height:8px;margin:26px 0 25px;background:#4a3b49;border-radius:10px;overflow:hidden}
        .progress-line span{display:block;width:68%;height:100%;background:var(--coral);border-radius:10px}
        .mini-steps{display:grid;gap:12px}
        .mini-step{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:10px;background:rgba(255,255,255,.06);color:#eee2e9}
        .mini-step b{
            width:27px;height:27px;display:grid;place-items:center;border-radius:8px;
            background:var(--berry);font-size:13px
        }
        .notice{padding:12px 0;background:var(--amber);color:#2d2021;font-size:14px}
        .notice-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
        .notice strong{margin-right:12px}
        .notice a{text-decoration:underline;text-underline-offset:3px;font-weight:700}
        .section{padding:92px 0}
        .section-light{background:var(--paper)}
        .section-white{background:var(--white)}
        .section-dark{color:var(--white);background:var(--night-2)}
        .section-head{
            display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:34px
        }
        .section-head h2{margin:5px 0 0;font-size:34px;line-height:1.25}
        .section-head p{margin:0;color:var(--muted);max-width:520px}
        .section-dark .section-head p{color:#afa2b0}
        .text-link{color:var(--berry);font-weight:700;white-space:nowrap}
        .text-link:hover{color:var(--coral)}
        .guide-intro{display:grid;grid-template-columns:.75fr 1.25fr;gap:60px;align-items:start}
        .intro-note{
            padding:25px 27px;border-left:4px solid var(--berry);
            background:var(--white);box-shadow:var(--shadow);border-radius:0 var(--radius) var(--radius) 0
        }
        .intro-note h3{margin:0 0 9px;font-size:21px}
        .intro-note p{margin:0;color:var(--ink-soft)}
        .step-list{display:grid;gap:0}
        .step-item{
            position:relative;display:grid;grid-template-columns:64px 1fr;
            gap:21px;padding:0 0 31px
        }
        .step-item:not(:last-child)::after{
            content:"";position:absolute;left:27px;top:56px;bottom:0;width:1px;background:var(--line)
        }
        .step-number{
            position:relative;z-index:1;width:56px;height:56px;display:grid;place-items:center;
            color:#fff;background:var(--berry);border-radius:15px;font-size:20px;font-weight:800;
            box-shadow:5px 5px 0 rgba(220,121,91,.2)
        }
        .step-item:nth-child(2) .step-number{background:var(--coral)}
        .step-item:nth-child(3) .step-number{background:var(--mint);color:#18302b}
        .step-item:nth-child(4) .step-number{background:var(--amber);color:#35251e}
        .step-content{padding-top:2px}
        .step-content h3{margin:0 0 6px;font-size:21px}
        .step-content p{margin:0;color:var(--muted)}
        .channel-section{background:var(--paper-2)}
        .channel-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:20px}
        .channel-main,.channel-side{
            border-radius:var(--radius);padding:30px;min-height:245px;
            transition:.25s ease
        }
        .channel-main{color:#fff;background:var(--berry-dark);position:relative;overflow:hidden}
        .channel-main::after{
            content:"";position:absolute;width:210px;height:210px;right:-50px;bottom:-80px;
            border:25px solid rgba(255,255,255,.1);border-radius:50%
        }
        .channel-side{background:var(--white);border:1px solid var(--line)}
        .channel-main:hover,.channel-side:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
        .channel-label{font-size:13px;font-weight:800;color:#f2bf86}
        .channel-main h3,.channel-side h3{margin:17px 0 9px;font-size:27px}
        .channel-side h3{font-size:23px}
        .channel-main p,.channel-side p{margin:0;color:inherit;opacity:.78}
        .channel-side p{color:var(--muted)}
        .channel-arrow{display:inline-flex;margin-top:25px;font-weight:700;color:#ffd1bc}
        .channel-side .channel-arrow{color:var(--berry)}
        .offer-strip{
            display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:stretch
        }
        .offer-card{
            padding:28px;border-radius:var(--radius);border:1px solid var(--line);
            background:var(--white);box-shadow:0 9px 24px rgba(27,20,28,.06)
        }
        .offer-card.featured{background:#3a2936;color:#fff;border-color:transparent}
        .offer-label{display:inline-block;padding:5px 9px;border-radius:6px;color:#3b2821;background:#f2c276;font-size:12px;font-weight:800}
        .offer-card h3{margin:18px 0 8px;font-size:24px}
        .offer-card p{margin:0;color:var(--muted)}
        .featured p{color:#cbbdca}
        .offer-meta{display:flex;justify-content:space-between;gap:12px;margin-top:24px;padding-top:17px;border-top:1px solid var(--line)}
        .featured .offer-meta{border-color:var(--line-dark)}
        .offer-meta span:last-child{color:var(--coral);font-weight:700}
        .app-section{color:var(--white);background:var(--night)}
        .app-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}
        .device-stack{position:relative;min-height:320px}
        .device{
            position:absolute;width:188px;height:310px;padding:10px;border:6px solid #413543;
            border-radius:28px;background:#241c27;box-shadow:var(--shadow)
        }
        .device:first-child{left:13%;top:20px;transform:rotate(-9deg)}
        .device:last-child{right:13%;top:0;transform:rotate(9deg);background:var(--berry)}
        .device-screen{height:100%;padding:19px 12px;border-radius:17px;background:var(--paper);overflow:hidden}
        .device:last-child .device-screen{background:#362433}
        .screen-bar{height:9px;width:62%;margin-bottom:20px;background:var(--coral);border-radius:5px}
        .screen-block{height:76px;margin-bottom:11px;border-radius:10px;background:var(--berry)}
        .screen-block.small{height:42px;background:var(--amber)}
        .screen-lines{display:grid;gap:8px}
        .screen-lines span{height:7px;border-radius:5px;background:#c9bbb7}
        .app-copy h2{margin:8px 0 15px;font-size:36px;line-height:1.25}
        .app-copy p{max-width:560px;color:#c9beca}
        .app-points{display:flex;flex-wrap:wrap;gap:10px;margin:23px 0}
        .app-points span{padding:8px 12px;border:1px solid var(--line-dark);border-radius:8px;color:#e8dce5;font-size:14px}
        .app-actions{display:flex;gap:12px;flex-wrap:wrap}
        .app-actions .btn-secondary{border-color:#76536a}
        .faq-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:58px}
        .faq-lead{padding:28px;background:var(--berry-dark);color:#fff;border-radius:var(--radius);align-self:start}
        .faq-lead .eyebrow{color:#f3bd79}
        .faq-lead h2{margin:17px 0 10px;font-size:31px}
        .faq-lead p{margin:0;color:#d7c8d1}
        .faq-list{display:grid;gap:11px}
        .faq-item{border:1px solid var(--line);border-radius:12px;background:var(--white);overflow:hidden}
        .faq-item summary{
            list-style:none;display:flex;justify-content:space-between;gap:16px;
            padding:18px 20px;font-weight:700;cursor:pointer
        }
        .faq-item summary::-webkit-details-marker{display:none}
        .faq-item summary::after{content:"＋";color:var(--coral);font-size:21px;line-height:1}
        .faq-item[open] summary::after{content:"－"}
        .faq-answer{padding:0 20px 18px;color:var(--muted);font-size:14px}
        .cta{
            padding:57px 0;color:#fff;background:var(--berry);
            position:relative;overflow:hidden
        }
        .cta::after{
            content:"";position:absolute;right:7%;top:-95px;width:260px;height:260px;
            border:1px solid rgba(255,255,255,.2);border-radius:50%;
            box-shadow:0 0 0 25px rgba(255,255,255,.05),0 0 0 55px rgba(255,255,255,.04)
        }
        .cta-wrap{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:25px}
        .cta h2{margin:0 0 7px;font-size:31px}
        .cta p{margin:0;color:#ead8e1}
        .cta .btn-secondary{border-color:rgba(255,255,255,.5)}
        .site-footer{color:#c9c0ca;background:var(--night);padding:62px 0 24px}
        .footer-grid{display:grid;grid-template-columns:1.5fr .8fr .8fr .8fr;gap:35px}
        .footer-brand p{max-width:300px;margin:20px 0 0;color:#988d9a;font-size:14px}
        .footer-title{margin-bottom:14px;color:#fff;font-weight:800}
        .footer-links{display:grid;gap:9px;font-size:14px}
        .footer-links a{color:#a99eaa;transition:.2s ease}
        .footer-links a:hover,.footer-links a:focus{color:#f1ae7a;padding-left:3px}
        .footer-bottom{
            display:flex;justify-content:space-between;gap:18px;margin-top:48px;padding-top:19px;
            border-top:1px solid var(--line-dark);color:#817683;font-size:13px
        }
        :focus-visible{outline:3px solid rgba(225,164,78,.72);outline-offset:3px}
        @media(max-width:992px){
            .nav-wrap{gap:18px}
            .main-nav{gap:2px}
            .main-nav a{padding:9px 8px;font-size:14px}
            .nav-action{display:none}
            .hero-grid,.guide-intro,.app-layout,.faq-layout{grid-template-columns:1fr;gap:42px}
            .guide-art{max-width:650px;width:100%;margin:auto}
            .guide-intro{gap:30px}
            .footer-grid{grid-template-columns:1.3fr 1fr 1fr}
            .footer-brand{grid-column:1/-1}
        }
        @media(max-width:768px){
            .container{width:min(var(--container),calc(100% - 36px))}
            .nav-wrap{min-height:68px}
            .main-nav{
                display:none;position:absolute;left:18px;right:18px;top:68px;
                padding:12px;background:var(--night-2);border:1px solid var(--line-dark);
                border-radius:12px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch
            }
            .main-nav.open{display:flex}
            .main-nav a{padding:12px 14px}
            .menu-btn{display:block;margin-left:auto}
            .hero{padding:58px 0 62px}
            .hero h1{font-size:42px}
            .hero-copy{font-size:16px}
            .guide-art{min-height:310px}
            .guide-panel{left:5%;right:2%;top:38px}
            .section{padding:65px 0}
            .section-head{display:block;margin-bottom:25px}
            .section-head h2{font-size:29px;margin-bottom:8px}
            .section-head .text-link{display:inline-block;margin-top:13px}
            .channel-layout,.offer-strip{grid-template-columns:1fr}
            .app-layout{gap:20px}
            .device-stack{min-height:300px;max-width:390px;margin:auto;width:100%}
            .app-copy h2{font-size:30px}
            .cta-wrap{display:block}
            .cta .hero-actions{margin-top:22px}
            .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
            .footer-brand{grid-column:1/-1}
            .footer-bottom{display:grid;gap:6px;margin-top:35px}
        }
        @media(max-width:520px){
            .container{width:calc(100% - 32px)}
            .brand-text{font-size:16px}
            .brand-mark{width:35px;height:35px}
            .notice-wrap{display:block;font-size:13px}
            .notice-wrap a{display:inline-block;margin-top:3px}
            .hero h1{font-size:35px}
            .hero-actions,.app-actions{display:grid;grid-template-columns:1fr}
            .hero-actions a,.app-actions a{width:100%}
            .guide-art{min-height:260px}
            .guide-panel{padding:19px;top:28px}
            .mini-step{padding:10px;font-size:14px}
            .channel-main,.channel-side,.offer-card{padding:23px}
            .step-item{grid-template-columns:51px 1fr;gap:14px}
            .step-number{width:45px;height:45px;border-radius:12px;font-size:17px}
            .step-item:not(:last-child)::after{left:22px;top:46px}
            .faq-item summary{padding:15px;font-size:15px}
            .faq-answer{padding:0 15px 15px}
            .footer-grid{grid-template-columns:1fr}
            .footer-brand{grid-column:auto}
        }

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}