/* roulang page: index */
:root{
            --bg:#f6efe9;
            --bg-soft:#fcf8f4;
            --bg-dark:#24141f;
            --bg-deep:#321b2b;
            --card:#fffaf7;
            --card-2:#f9f1ee;
            --ink:#241c22;
            --muted:#6f6470;
            --muted-2:#8f8090;
            --line:#e6d8d6;
            --line-2:#cfbebe;
            --primary:#7d2149;
            --primary-2:#a94e6d;
            --primary-3:#d9a3ae;
            --accent:#c48c6d;
            --accent-2:#e8cdb9;
            --success:#4f8b72;
            --shadow:0 18px 50px rgba(48, 18, 34, .12);
            --shadow-2:0 24px 72px rgba(48, 18, 34, .18);
            --radius-xl:28px;
            --radius-lg:22px;
            --radius-md:16px;
            --radius-sm:12px;
            --container:1220px;
            --header-h:78px;
        }
        *,*::before,*::after{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
            background:var(--bg);
            color:var(--ink);
            line-height:1.75;
            overflow-x:hidden;
            -webkit-font-smoothing:antialiased;
            text-rendering:optimizeLegibility;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background:
                radial-gradient(circle at 15% 10%, rgba(194,140,109,.08), transparent 24%),
                radial-gradient(circle at 85% 0%, rgba(125,33,73,.08), transparent 18%),
                radial-gradient(circle at 85% 85%, rgba(169,78,109,.06), transparent 18%);
            z-index:-1;
        }
        body.nav-open{overflow:hidden}
        a{
            color:var(--primary);
            text-decoration:none;
            transition:color .2s ease, transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
        }
        a:hover{color:var(--primary-2)}
        a:active{transform:translateY(1px)}
        a:focus-visible,
        button:focus-visible,
        summary:focus-visible,
        input:focus-visible,
        textarea:focus-visible{
            outline:3px solid rgba(196,140,109,.35);
            outline-offset:3px;
        }
        img{display:block;max-width:100%;height:auto}
        button,
        input,
        textarea{
            font:inherit;
        }
        button{
            cursor:pointer;
            border:0;
            background:none;
        }
        p{margin:0 0 1rem}
        h1,h2,h3,h4,h5,h6{
            margin:0;
            line-height:1.18;
            letter-spacing:-.02em;
        }
        ul,ol{margin:0;padding:0;list-style:none}
        table{width:100%;border-collapse:collapse}
        .table-wrap{width:100%;overflow-x:auto}
        ::selection{background:var(--primary);color:#fff}
        .container{
            width:min(calc(100% - 32px), var(--container));
            margin:0 auto;
        }
        .section{
            padding:88px 0;
            position:relative;
        }
        .section--tight{padding:68px 0}
        .section--light{
            background:linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.75));
        }
        .section--soft{
            background:linear-gradient(180deg, rgba(249,241,238,.82), rgba(252,248,244,.95));
        }
        .section__head{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:24px;
            margin-bottom:30px;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            font-size:12px;
            font-weight:700;
            letter-spacing:.12em;
            text-transform:uppercase;
            color:var(--primary);
        }
        .eyebrow::before{
            content:"";
            width:10px;
            height:10px;
            border-radius:999px;
            background:linear-gradient(135deg, var(--primary), var(--accent));
            box-shadow:0 0 0 6px rgba(125,33,73,.09);
        }
        .section-title{
            max-width:720px;
        }
        .section-title h2{
            font-size:clamp(28px, 4vw, 42px);
            margin-top:10px;
        }
        .section-title p{
            margin-top:12px;
            color:var(--muted);
            font-size:16px;
            line-height:1.8;
        }
        .section-link{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:var(--primary);
            font-weight:700;
            white-space:nowrap;
        }
        .section-link svg{transition:transform .2s ease}
        .section-link:hover svg{transform:translateX(3px)}
        .badge,
        .chip,
        .pill{
            display:inline-flex;
            align-items:center;
            gap:6px;
            min-height:34px;
            border-radius:999px;
            padding:0 12px;
            font-size:13px;
            font-weight:700;
            letter-spacing:.01em;
        }
        .badge{
            background:rgba(125,33,73,.10);
            color:var(--primary);
            border:1px solid rgba(125,33,73,.12);
        }
        .badge--soft{
            background:rgba(194,140,109,.12);
            color:#8f5f3c;
            border-color:rgba(194,140,109,.16);
        }
        .badge--dark{
            background:rgba(255,255,255,.10);
            color:#f9f0f4;
            border-color:rgba(255,255,255,.16);
        }
        .chip{
            background:rgba(255,255,255,.55);
            color:#5d5160;
            border:1px solid var(--line);
        }
        .pill{
            background:rgba(255,255,255,.15);
            color:#fff;
            border:1px solid rgba(255,255,255,.12);
        }
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            min-height:48px;
            padding:0 18px;
            border-radius:999px;
            border:1px solid transparent;
            font-weight:700;
            letter-spacing:.01em;
            transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
        }
        .btn:hover{transform:translateY(-2px)}
        .btn:active{transform:translateY(0)}
        .btn--primary{
            background:linear-gradient(135deg, var(--primary), var(--primary-2));
            color:#fff;
            box-shadow:0 18px 32px rgba(125,33,73,.22);
        }
        .btn--primary:hover{
            box-shadow:0 22px 40px rgba(125,33,73,.28);
            color:#fff;
        }
        .btn--ghost{
            background:rgba(255,255,255,.12);
            border-color:rgba(255,255,255,.22);
            color:#fff;
        }
        .btn--ghost:hover{
            background:rgba(255,255,255,.18);
            color:#fff;
        }
        .btn--light{
            background:#fff;
            color:var(--primary);
            border-color:var(--line);
            box-shadow:0 10px 28px rgba(48,18,34,.08);
        }
        .btn--light:hover{
            background:#fff6f5;
            border-color:rgba(125,33,73,.18);
            color:var(--primary);
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:80;
            backdrop-filter:blur(16px);
            -webkit-backdrop-filter:blur(16px);
            background:rgba(36,20,31,.64);
            border-bottom:1px solid rgba(255,255,255,.08);
            transition:background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
        }
        .site-header.is-scrolled{
            background:rgba(250,246,243,.9);
            border-bottom:1px solid rgba(230,216,214,.95);
            box-shadow:0 12px 30px rgba(48,18,34,.08);
        }
        .site-header__inner{
            min-height:var(--header-h);
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            position:relative;
        }
        .site-brand{
            display:inline-flex;
            align-items:center;
            gap:12px;
            min-width:0;
            color:#fff;
        }
        .site-header.is-scrolled .site-brand{color:var(--ink)}
        .site-brand__mark{
            width:42px;
            height:42px;
            border-radius:14px;
            position:relative;
            background:
                radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 34%),
                linear-gradient(135deg, #6f173e, #aa4b68 66%, #d79a82);
            box-shadow:0 14px 28px rgba(125,33,73,.24);
            flex:0 0 auto;
        }
        .site-brand__mark::before,
        .site-brand__mark::after{
            content:"";
            position:absolute;
            inset:11px;
            border-radius:11px 11px 15px 11px;
            border:1.6px solid rgba(255,255,255,.56);
            transform:rotate(13deg);
        }
        .site-brand__mark::after{
            inset:15px 9px 9px 15px;
            border-radius:14px 10px 10px 14px;
            transform:rotate(-8deg);
            opacity:.7;
        }
        .site-brand__text{
            min-width:0;
            display:flex;
            flex-direction:column;
            gap:2px;
        }
        .site-brand__name{
            font-size:clamp(16px, 2vw, 20px);
            font-weight:800;
            letter-spacing:-.02em;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .site-brand__sub{
            font-size:12px;
            color:rgba(255,255,255,.75);
        }
        .site-header.is-scrolled .site-brand__sub{color:var(--muted)}
        .site-nav{
            display:flex;
            align-items:center;
            gap:18px;
        }
        .site-nav__list{
            display:flex;
            align-items:center;
            gap:8px;
        }
        .site-nav__link{
            display:inline-flex;
            align-items:center;
            min-height:42px;
            padding:0 14px;
            border-radius:999px;
            color:rgba(255,255,255,.86);
            font-weight:700;
        }
        .site-header.is-scrolled .site-nav__link{
            color:var(--ink);
        }
        .site-nav__link:hover,
        .site-nav__link:focus-visible{
            background:rgba(255,255,255,.1);
            color:#fff;
        }
        .site-header.is-scrolled .site-nav__link:hover,
        .site-header.is-scrolled .site-nav__link:focus-visible{
            background:rgba(125,33,73,.08);
            color:var(--primary);
        }
        .site-nav__link.is-active{
            background:rgba(255,255,255,.12);
            color:#fff;
        }
        .site-header.is-scrolled .site-nav__link.is-active{
            background:rgba(125,33,73,.09);
            color:var(--primary);
        }
        .site-header__cta{
            display:flex;
            align-items:center;
            gap:10px;
        }
        .nav-toggle{
            display:none;
            align-items:center;
            justify-content:center;
            width:46px;
            height:46px;
            border-radius:14px;
            border:1px solid rgba(255,255,255,.15);
            background:rgba(255,255,255,.08);
            color:#fff;
        }
        .site-header.is-scrolled .nav-toggle{
            border-color:var(--line);
            background:#fff;
            color:var(--ink);
        }
        .nav-toggle__lines{
            width:18px;
            height:12px;
            position:relative;
        }
        .nav-toggle__lines::before,
        .nav-toggle__lines::after,
        .nav-toggle__lines span{
            content:"";
            position:absolute;
            left:0;
            right:0;
            height:2px;
            border-radius:999px;
            background:currentColor;
        }
        .nav-toggle__lines::before{top:0}
        .nav-toggle__lines span{top:5px}
        .nav-toggle__lines::after{bottom:0}
        .hero{
            position:relative;
            overflow:hidden;
            background:
                radial-gradient(circle at 12% 20%, rgba(255,255,255,.12), transparent 22%),
                radial-gradient(circle at 78% 12%, rgba(255,217,210,.10), transparent 18%),
                linear-gradient(135deg, #24111d 0%, #3e1c31 56%, #27131f 100%);
            color:#fff;
            padding:34px 0 88px;
        }
        .hero::after{
            content:"";
            position:absolute;
            inset:auto 0 0 0;
            height:150px;
            background:linear-gradient(180deg, rgba(246,239,233,0) 0%, rgba(246,239,233,.96) 100%);
            pointer-events:none;
        }
        .hero__grid{
            position:relative;
            z-index:1;
            display:grid;
            grid-template-columns:1.06fr .94fr;
            gap:28px;
            align-items:center;
        }
        .hero__copy{
            padding:28px 0;
        }
        .hero__eyebrow{
            display:inline-flex;
            align-items:center;
            gap:10px;
            margin-bottom:16px;
            color:#fff;
        }
        .hero__eyebrow .badge{background:rgba(255,255,255,.10); color:#f8eef3; border-color:rgba(255,255,255,.14)}
        .hero h1{
            font-size:clamp(38px, 6vw, 62px);
            font-weight:800;
            letter-spacing:-.04em;
            max-width:10ch;
            text-wrap:balance;
        }
        .hero__sub{
            max-width:640px;
            margin-top:18px;
            font-size:17px;
            line-height:1.9;
            color:rgba(255,255,255,.82);
        }
        .hero__actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:26px;
        }
        .hero__tags{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:24px;
        }
        .hero__meta{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:24px;
        }
        .hero__meta .pill{
            background:rgba(255,255,255,.08);
            color:rgba(255,255,255,.88);
            border-color:rgba(255,255,255,.10);
        }
        .hero__panel{
            position:relative;
        }
        .hero__frame{
            position:relative;
            overflow:hidden;
            min-height:560px;
            border-radius:var(--radius-xl);
            border:1px solid rgba(255,255,255,.12);
            box-shadow:var(--shadow-2);
            background:rgba(255,255,255,.08);
        }
        .hero__bg{
            position:absolute;
            inset:0;
            width:100%;
            height:100%;
            object-fit:cover;
            filter:saturate(.82) contrast(.96) brightness(.72);
            transform:scale(1.03);
        }
        .hero__shade{
            position:absolute;
            inset:0;
            background:
                linear-gradient(180deg, rgba(35,16,28,.16), rgba(35,16,28,.66)),
                radial-gradient(circle at 30% 20%, rgba(255,255,255,.16), transparent 25%),
                radial-gradient(circle at 76% 76%, rgba(194,140,109,.18), transparent 26%);
        }
        .hero__stack{
            position:absolute;
            inset:18px;
            display:grid;
            gap:14px;
        }
        .hero__feature{
            position:relative;
            display:grid;
            grid-template-columns:1fr;
            align-items:end;
            min-height:360px;
            border-radius:24px;
            overflow:hidden;
            background:rgba(255,255,255,.08);
            border:1px solid rgba(255,255,255,.12);
            box-shadow:0 14px 34px rgba(0,0,0,.16);
        }
        .hero__feature img{
            width:100%;
            height:100%;
            object-fit:cover;
            filter:saturate(.92) contrast(.96);
            transform:scale(1.02);
        }
        .hero__feature::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, rgba(19,10,16,.08) 0%, rgba(19,10,16,.60) 100%);
        }
        .hero__featureBody{
            position:absolute;
            inset:auto 18px 18px 18px;
            z-index:1;
            display:flex;
            flex-direction:column;
            gap:10px;
        }
        .hero__featureBody .badge{
            align-self:flex-start;
            background:rgba(255,255,255,.12);
            color:#fff;
            border-color:rgba(255,255,255,.14);
        }
        .hero__featureTitle{
            font-size:22px;
            font-weight:800;
            color:#fff;
            max-width:16ch;
            text-wrap:balance;
        }
        .hero__featureText{
            color:rgba(255,255,255,.82);
            font-size:14px;
            line-height:1.7;
            max-width:28ch;
        }
        .hero__miniGrid{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:14px;
        }
        .hero__miniCard{
            position:relative;
            min-height:150px;
            border-radius:22px;
            overflow:hidden;
            border:1px solid rgba(255,255,255,.12);
            background:rgba(255,255,255,.08);
            box-shadow:0 10px 24px rgba(0,0,0,.12);
        }
        .hero__miniCard img{
            width:100%;
            height:100%;
            object-fit:cover;
            filter:saturate(.88) brightness(.82);
            transform:scale(1.03);
        }
        .hero__miniCard::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, rgba(16,10,16,.10), rgba(16,10,16,.55));
        }
        .hero__miniInfo{
            position:absolute;
            left:14px;
            right:14px;
            bottom:14px;
            z-index:1;
        }
        .hero__miniTitle{
            font-size:16px;
            font-weight:800;
            color:#fff;
            margin-top:8px;
        }
        .hero__miniText{
            color:rgba(255,255,255,.82);
            font-size:13px;
            line-height:1.65;
        }
        .hero__miniCard--text{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            padding:16px;
            background:
                radial-gradient(circle at 20% 20%, rgba(255,255,255,.08), transparent 24%),
                linear-gradient(135deg, rgba(125,33,73,.95), rgba(62,28,49,.92));
        }
        .hero__miniCard--text::after{display:none}
        .hero__miniCard--text .hero__miniInfo{
            position:relative;
            inset:auto;
        }
        .hero__miniLabel{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:7px 10px;
            border-radius:999px;
            font-size:12px;
            font-weight:700;
            background:rgba(255,255,255,.12);
            color:#fff;
            border:1px solid rgba(255,255,255,.12);
        }
        .hero__miniNote{
            margin-top:12px;
            font-size:13px;
            line-height:1.7;
            color:rgba(255,255,255,.84);
        }
        .intro{
            margin-top:-24px;
            position:relative;
            z-index:2;
        }
        .intro__grid{
            display:grid;
            grid-template-columns:1.15fr .85fr;
            gap:20px;
            align-items:stretch;
        }
        .panel{
            background:var(--card);
            border:1px solid var(--line);
            border-radius:var(--radius-xl);
            box-shadow:var(--shadow);
        }
        .panel--dark{
            background:linear-gradient(135deg, #311b2a, #412036);
            color:#fff;
            border-color:rgba(255,255,255,.08);
        }
        .panel__body{
            padding:28px;
        }
        .intro__main{
            display:flex;
            flex-direction:column;
            gap:18px;
        }
        .intro__main h2{
            font-size:clamp(24px, 3vw, 34px);
        }
        .intro__main p{
            color:var(--muted);
            line-height:1.85;
            max-width:60ch;
        }
        .intro__quote{
            margin:0;
            padding:18px 18px 18px 22px;
            border-left:4px solid var(--primary);
            border-radius:18px;
            background:linear-gradient(180deg, #fff8f7, #fff);
            color:#4d4250;
        }
        .intro__list{
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:16px;
        }
        .intro__item{
            padding:18px;
            border-radius:22px;
            border:1px solid var(--line);
            background:linear-gradient(180deg, #fff, #fcf7f5);
            min-height:156px;
            display:flex;
            flex-direction:column;
            gap:10px;
        }
        .intro__itemIcon{
            width:44px;
            height:44px;
            border-radius:15px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            background:rgba(125,33,73,.10);
            color:var(--primary);
        }
        .intro__item h3{
            font-size:18px;
        }
        .intro__item p{
            color:var(--muted);
            font-size:14px;
            line-height:1.75;
            margin:0;
        }
        .showcase{
            display:grid;
            grid-template-columns:.92fr 1.08fr;
            gap:22px;
            align-items:center;
        }
        .showcase__media{
            position:relative;
            overflow:hidden;
            border-radius:var(--radius-xl);
            border:1px solid var(--line);
            box-shadow:var(--shadow);
            min-height:420px;
            background:var(--card);
        }
        .showcase__media img{
            width:100%;
            height:100%;
            object-fit:cover;
            filter:saturate(.96) contrast(.98);
            transform:scale(1.02);
        }
        .showcase__media::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, rgba(25,14,20,.08), rgba(25,14,20,.36));
        }
        .showcase__badge{
            position:absolute;
            left:18px;
            top:18px;
            z-index:1;
        }
        .showcase__body{
            display:flex;
            flex-direction:column;
            gap:16px;
        }
        .showcase__body h2{
            font-size:clamp(26px, 3vw, 36px);
        }
        .showcase__body p{
            color:var(--muted);
            line-height:1.86;
        }
        .check-list{
            display:grid;
            gap:12px;
            margin-top:8px;
        }
        .check-list li{
            position:relative;
            padding-left:32px;
            color:#4a404e;
            line-height:1.75;
        }
        .check-list li::before{
            content:"";
            position:absolute;
            left:0;
            top:8px;
            width:18px;
            height:18px;
            border-radius:999px;
            background:
                radial-gradient(circle at 50% 50%, #fff 0 38%, transparent 39%),
                linear-gradient(135deg, var(--primary), var(--primary-2));
            box-shadow:0 0 0 5px rgba(125,33,73,.08);
        }
        .feature{
            background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(252,247,244,.95));
        }
        .feature__grid{
            display:grid;
            grid-template-columns:1.08fr .92fr;
            gap:20px;
            align-items:stretch;
        }
        .feature-card,
        .feature-stack__item{
            background:var(--card);
            border:1px solid var(--line);
            border-radius:var(--radius-xl);
            overflow:hidden;
            box-shadow:var(--shadow);
            transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
        }
        .feature-card:hover,
        .feature-stack__item:hover,
        .news-feature:hover,
        .news-card:hover,
        .news-mini:hover,
        .guide-card:hover,
        .cta__card:hover{
            transform:translateY(-4px);
            box-shadow:var(--shadow-2);
            border-color:rgba(125,33,73,.18);
        }
        .feature-card__media{
            position:relative;
            min-height:320px;
            overflow:hidden;
        }
        .feature-card__media img{
            width:100%;
            height:100%;
            object-fit:cover;
            filter:saturate(.92) contrast(.98);
            transform:scale(1.02);
        }
        .feature-card__media::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, rgba(20,11,16,.05), rgba(20,11,16,.48));
        }
        .feature-card__body{
            padding:24px;
        }
        .feature-card__body h3{
            font-size:clamp(22px, 2.6vw, 30px);
            margin-top:10px;
        }
        .feature-card__body p{
            margin-top:12px;
            color:var(--muted);
            line-height:1.86;
        }
        .feature-card__meta{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:18px;
        }
        .feature-card__meta .chip{
            background:#fff;
        }
        .feature-stack{
            display:grid;
            gap:18px;
        }
        .feature-stack__item{
            display:grid;
            grid-template-columns:130px 1fr;
            gap:18px;
            padding:18px;
            align-items:center;
        }
        .feature-stack__image{
            position:relative;
            overflow:hidden;
            border-radius:20px;
            min-height:128px;
        }
        .feature-stack__image img{
            width:100%;
            height:100%;
            object-fit:cover;
            filter:saturate(.92) brightness(.92);
            transform:scale(1.03);
        }
        .feature-stack__copy h3{
            font-size:19px;
        }
        .feature-stack__copy p{
            margin:8px 0 0;
            color:var(--muted);
            font-size:14px;
            line-height:1.75;
        }
        .feature-stack__tags{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-top:14px;
        }
        .feature-stack__tags .tag{
            display:inline-flex;
            align-items:center;
            min-height:30px;
            padding:0 10px;
            border-radius:999px;
            font-size:12px;
            font-weight:700;
            background:#f9efef;
            color:#7a3554;
            border:1px solid rgba(125,33,73,.10);
        }
        .news{
            background:linear-gradient(180deg, rgba(252,248,244,.96), rgba(247,240,236,.98));
        }
        .news__layout{
            display:grid;
            grid-template-columns:1.04fr .96fr;
            gap:22px;
            align-items:start;
        }
        .news-feature{
            background:var(--card);
            border:1px solid var(--line);
            border-radius:var(--radius-xl);
            overflow:hidden;
            box-shadow:var(--shadow);
            transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
        }
        .news-feature__link{
            display:grid;
            grid-template-columns:280px 1fr;
            min-height:100%;
            color:inherit;
        }
        .news-feature__media{
            position:relative;
            min-height:100%;
            overflow:hidden;
            background:#ece2dd;
        }
        .news-feature__media img{
            width:100%;
            height:100%;
            object-fit:cover;
            filter:saturate(.94) contrast(.98);
            transform:scale(1.02);
        }
        .news-feature__media::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, rgba(20,11,16,.04), rgba(20,11,16,.28));
        }
        .news-feature__body{
            padding:26px;
            display:flex;
            flex-direction:column;
            gap:14px;
            justify-content:center;
        }
        .news-meta{
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            gap:10px;
        }
        .news-time,
        .news-tag{
            font-size:13px;
            color:var(--muted);
        }
        .news-title{
            font-size:clamp(22px, 2.8vw, 31px);
            line-height:1.25;
            text-wrap:balance;
        }
        .news-summary{
            color:var(--muted);
            line-height:1.85;
            font-size:15px;
        }
        .news-footer{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            margin-top:auto;
        }
        .news-read{
            color:var(--primary);
            font-weight:700;
        }
        .news-list{
            display:grid;
            gap:16px;
        }
        .news-card{
            display:grid;
            grid-template-columns:auto 1fr auto;
            gap:14px;
            align-items:center;
            padding:18px 20px;
            border-radius:22px;
            background:var(--card);
            border:1px solid var(--line);
            box-shadow:var(--shadow);
            transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
        }
        .news-card__icon{
            width:52px;
            height:52px;
            border-radius:16px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            background:linear-gradient(135deg, rgba(125,33,73,.1), rgba(196,140,109,.12));
            color:var(--primary);
            flex:0 0 auto;
        }
        .news-card__body{
            min-width:0;
        }
        .news-card__meta{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-bottom:8px;
        }
        .news-card__title{
            font-size:18px;
            line-height:1.4;
            margin-bottom:8px;
            text-wrap:balance;
        }
        .news-card__summary{
            color:var(--muted);
            font-size:14px;
            line-height:1.78;
            margin:0;
        }
        .news-card__action{
            color:var(--primary);
            font-weight:700;
            white-space:nowrap;
        }
        .empty-state{
            padding:38px 24px;
            text-align:center;
            border-radius:24px;
            border:1px dashed rgba(125,33,73,.2);
            background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(249,241,238,.8));
            box-shadow:var(--shadow);
        }
        .empty-state__icon{
            width:72px;
            height:72px;
            margin:0 auto 16px;
            border-radius:24px;
            display:grid;
            place-items:center;
            background:linear-gradient(135deg, rgba(125,33,73,.1), rgba(194,140,109,.14));
            color:var(--primary);
        }
        .empty-state p{
            margin:0;
            color:var(--muted);
            line-height:1.8;
        }
        .guide{
            background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(252,247,244,.96));
        }
        .guide__grid{
            display:grid;
            grid-template-columns:repeat(4, minmax(0,1fr));
            gap:16px;
        }
        .guide-card{
            padding:22px 20px;
            border-radius:24px;
            background:var(--card);
            border:1px solid var(--line);
            box-shadow:var(--shadow);
            transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
        }
        .guide-card__num{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            width:36px;
            height:36px;
            border-radius:12px;
            background:rgba(125,33,73,.10);
            color:var(--primary);
            font-weight:800;
        }
        .guide-card h3{
            margin-top:14px;
            font-size:18px;
        }
        .guide-card p{
            margin-top:8px;
            color:var(--muted);
            font-size:14px;
            line-height:1.78;
        }
        .guide-note{
            margin-top:18px;
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:16px;
            align-items:stretch;
        }
        .guide-quote{
            padding:22px 24px;
            border-radius:24px;
            background:linear-gradient(180deg, #fff, #fff7f6);
            border:1px solid var(--line);
            box-shadow:var(--shadow);
        }
        .guide-quote blockquote{
            margin:0;
            padding-left:18px;
            border-left:4px solid var(--primary);
            color:#4e4350;
            line-height:1.86;
            font-size:15px;
        }
        .guide-side{
            padding:22px 24px;
            border-radius:24px;
            background:linear-gradient(135deg, #f7eeea, #fff);
            border:1px solid var(--line);
            box-shadow:var(--shadow);
        }
        .guide-side ul{
            display:grid;
            gap:10px;
            margin-top:8px;
        }
        .guide-side li{
            position:relative;
            padding-left:22px;
            color:#564a58;
            line-height:1.72;
        }
        .guide-side li::before{
            content:"";
            position:absolute;
            left:0;
            top:11px;
            width:8px;
            height:8px;
            border-radius:999px;
            background:linear-gradient(135deg, var(--primary), var(--accent));
        }
        .faq{
            background:linear-gradient(180deg, rgba(252,248,244,.94), rgba(247,239,233,.98));
        }
        .faq__grid{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:16px;
        }
        .faq-item{
            padding:0;
            border-radius:22px;
            background:var(--card);
            border:1px solid var(--line);
            box-shadow:var(--shadow);
            overflow:hidden;
            transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
        }
        .faq-item[open]{
            border-color:rgba(125,33,73,.18);
            box-shadow:var(--shadow-2);
        }
        .faq-item summary{
            list-style:none;
            padding:20px 22px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            cursor:pointer;
            font-weight:800;
            color:var(--ink);
        }
        .faq-item summary::-webkit-details-marker{display:none}
        .faq-item summary span{
            min-width:0;
            text-wrap:balance;
        }
        .faq-item summary::after{
            content:"+";
            width:34px;
            height:34px;
            flex:0 0 auto;
            display:grid;
            place-items:center;
            border-radius:12px;
            background:rgba(125,33,73,.08);
            color:var(--primary);
            font-size:20px;
            font-weight:700;
            transition:transform .2s ease, background-color .2s ease;
        }
        .faq-item[open] summary{
            background:linear-gradient(180deg, rgba(125,33,73,.06), rgba(125,33,73,.02));
        }
        .faq-item[open] summary::after{
            content:"–";
            background:rgba(125,33,73,.12);
        }
        .faq-item__body{
            padding:0 22px 20px 22px;
            color:var(--muted);
            line-height:1.86;
            font-size:15px;
        }
        .cta{
            padding:0 0 88px;
        }
        .cta__card{
            position:relative;
            overflow:hidden;
            border-radius:32px;
            background:
                radial-gradient(circle at 15% 15%, rgba(255,255,255,.12), transparent 22%),
                radial-gradient(circle at 85% 20%, rgba(194,140,109,.18), transparent 18%),
                linear-gradient(135deg, #2d1625 0%, #451c33 58%, #31192a 100%);
            color:#fff;
            border:1px solid rgba(255,255,255,.1);
            box-shadow:var(--shadow-2);
        }
        .cta__inner{
            display:grid;
            grid-template-columns:1.05fr .95fr;
            gap:24px;
            padding:34px;
            align-items:center;
        }
        .cta__body h2{
            font-size:clamp(26px, 3.2vw, 40px);
        }
        .cta__body p{
            margin-top:14px;
            color:rgba(255,255,255,.80);
            line-height:1.9;
            max-width:56ch;
        }
        .cta__actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:24px;
        }
        .cta__panel{
            padding:22px;
            border-radius:26px;
            background:rgba(255,255,255,.08);
            border:1px solid rgba(255,255,255,.12);
            backdrop-filter:blur(8px);
            -webkit-backdrop-filter:blur(8px);
        }
        .cta__panel h3{
            font-size:18px;
            color:#fff;
        }
        .cta__panel p{
            margin-top:10px;
            color:rgba(255,255,255,.78);
            line-height:1.82;
            font-size:14px;
        }
        .cta__panel .badge{
            margin-top:14px;
        }
        .site-footer{
            background:#21111b;
            color:#e8dfe2;
            padding:42px 0 30px;
            border-top:1px solid rgba(255,255,255,.08);
        }
        .footer__grid{
            display:grid;
            grid-template-columns:1.2fr .8fr 1fr;
            gap:22px;
            align-items:start;
        }
        .site-footer .site-brand{color:#fff}
        .footer__text{
            margin-top:14px;
            color:rgba(255,255,255,.72);
            line-height:1.84;
            max-width:36ch;
        }
        .footer__links{
            display:grid;
            gap:10px;
        }
        .footer__links a{
            color:rgba(255,255,255,.82);
            display:inline-flex;
            width:max-content;
        }
        .footer__links a:hover{color:#fff}
        .footer__note{
            display:grid;
            gap:10px;
            color:rgba(255,255,255,.72);
            line-height:1.8;
        }
        .footer__bottom{
            margin-top:28px;
            padding-top:18px;
            border-top:1px solid rgba(255,255,255,.08);
            display:flex;
            justify-content:space-between;
            gap:14px;
            flex-wrap:wrap;
            color:rgba(255,255,255,.56);
            font-size:13px;
        }
        .content-anchor{scroll-margin-top:100px}
        .sr-only{
            position:absolute!important;
            width:1px;
            height:1px;
            padding:0;
            margin:-1px;
            overflow:hidden;
            clip:rect(0,0,0,0);
            white-space:nowrap;
            border:0;
        }
        .muted{color:var(--muted)}
        .mt-0{margin-top:0}
        .mb-0{margin-bottom:0}
        .center{text-align:center}
        @media (max-width: 1100px){
            .hero__grid,
            .intro__grid,
            .showcase,
            .feature__grid,
            .news__layout,
            .cta__inner,
            .footer__grid{
                grid-template-columns:1fr;
            }
            .hero__frame{min-height:520px}
            .feature-stack__item{grid-template-columns:120px 1fr}
            .guide__grid{grid-template-columns:repeat(2, minmax(0,1fr))}
            .news-feature__link{grid-template-columns:220px 1fr}
        }
        @media (max-width: 860px){
            .site-header__inner{min-height:64px}
            .nav-toggle{display:inline-flex}
            .site-nav{
                position:absolute;
                right:0;
                top:calc(100% + 10px);
                width:min(340px, calc(100vw - 32px));
                padding:14px;
                border-radius:24px;
                background:rgba(33,18,29,.96);
                border:1px solid rgba(255,255,255,.08);
                box-shadow:var(--shadow-2);
                flex-direction:column;
                align-items:stretch;
                gap:12px;
                opacity:0;
                visibility:hidden;
                transform:translateY(-12px);
                pointer-events:none;
            }
            .site-header.is-scrolled .site-nav{
                background:#fff;
                border-color:var(--line);
            }
            .site-nav.is-open{
                opacity:1;
                visibility:visible;
                transform:translateY(0);
                pointer-events:auto;
            }
            .site-nav__list{
                flex-direction:column;
                align-items:stretch;
            }
            .site-nav__link{
                justify-content:center;
                color:#fff;
                background:rgba(255,255,255,.06);
            }
            .site-header.is-scrolled .site-nav__link{
                background:#f7f2ef;
                color:var(--ink);
            }
            .site-nav__link.is-active{
                background:rgba(255,255,255,.12);
                color:#fff;
            }
            .site-header.is-scrolled .site-nav__link.is-active{
                background:rgba(125,33,73,.09);
                color:var(--primary);
            }
            .site-header__cta .btn--ghost{display:none}
            .hero{
                padding:24px 0 72px;
            }
            .hero__copy{
                padding:18px 0 8px;
            }
            .intro{
                margin-top:0;
            }
            .intro__list{
                grid-template-columns:1fr;
            }
            .feature-stack__item{
                grid-template-columns:1fr;
            }
            .feature-stack__image{
                min-height:200px;
            }
            .news-feature__link{
                grid-template-columns:1fr;
            }
            .news-feature__media{min-height:240px}
            .guide__grid{grid-template-columns:1fr}
            .faq__grid{grid-template-columns:1fr}
            .hero h1{max-width:12ch}
            .hero__actions .btn{flex:1 1 180px}
            .cta__actions .btn{flex:1 1 180px}
        }
        @media (max-width: 620px){
            .container{width:min(calc(100% - 24px), var(--container))}
            .section{padding:64px 0}
            .section--tight{padding:52px 0}
            .section__head{
                flex-direction:column;
                align-items:flex-start;
                gap:14px;
            }
            .hero__frame{min-height:480px}
            .hero__miniGrid{
                grid-template-columns:1fr;
            }
            .news-card{
                grid-template-columns:1fr;
                align-items:start;
            }
            .news-card__icon{width:46px;height:46px}
            .news-card__action{
                padding-top:4px;
            }
            .cta__inner,
            .panel__body{
                padding:22px;
            }
            .footer__bottom{
                flex-direction:column;
            }
        }
        @media (prefers-reduced-motion: reduce){
            html{scroll-behavior:auto}
            *,*::before,*::after{
                animation-duration:.01ms!important;
                animation-iteration-count:1!important;
                transition-duration:.01ms!important;
            }
        }

/* roulang page: article */
:root{
            --bg:#f6efe9;
            --bg-soft:#fcf8f4;
            --bg-dark:#24141f;
            --bg-deep:#321b2b;
            --card:#fffaf7;
            --card-2:#f9f1ee;
            --ink:#241c22;
            --muted:#6f6470;
            --muted-2:#8f8090;
            --line:#e6d8d6;
            --line-2:#cfbebe;
            --primary:#7d2149;
            --primary-2:#a94e6d;
            --primary-3:#d9a3ae;
            --accent:#c48c6d;
            --accent-2:#e8cdb9;
            --success:#4f8b72;
            --shadow:0 18px 50px rgba(48,18,34,.12);
            --shadow-2:0 24px 72px rgba(48,18,34,.18);
            --radius-xl:28px;
            --radius-lg:22px;
            --radius-md:16px;
            --radius-sm:12px;
            --container:1220px;
            --header-h:78px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
            background:var(--bg);
            color:var(--ink);
            line-height:1.75;
            overflow-x:hidden;
            -webkit-font-smoothing:antialiased;
            text-rendering:optimizeLegibility;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background:
                radial-gradient(circle at 12% 8%, rgba(194,140,109,.09), transparent 25%),
                radial-gradient(circle at 88% 0%, rgba(125,33,73,.09), transparent 22%),
                radial-gradient(circle at 82% 84%, rgba(169,78,109,.07), transparent 20%);
            z-index:-1;
        }
        body.nav-open{overflow:hidden}
        a{
            color:var(--primary);
            text-decoration:none;
            transition:color .2s ease,transform .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease,opacity .2s ease;
        }
        a:hover{color:var(--primary-2)}
        a:active{transform:translateY(1px)}
        a:focus-visible,
        button:focus-visible,
        summary:focus-visible,
        input:focus-visible,
        textarea:focus-visible{
            outline:3px solid rgba(196,140,109,.35);
            outline-offset:3px;
        }
        img{display:block;max-width:100%;height:auto}
        button,input,textarea{font:inherit}
        button{cursor:pointer;border:0;background:none}
        .container{
            width:min(calc(100% - 32px), var(--container));
            margin:0 auto;
        }
        .section{
            padding:88px 0;
            position:relative;
        }
        .section--tight{padding:68px 0}
        .section--soft{
            background:linear-gradient(180deg, rgba(249,241,238,.82), rgba(252,248,244,.96));
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            font-size:12px;
            font-weight:800;
            letter-spacing:.12em;
            color:var(--primary);
        }
        .eyebrow::before{
            content:"";
            width:10px;
            height:10px;
            border-radius:999px;
            background:linear-gradient(135deg,var(--primary),var(--accent));
            box-shadow:0 0 0 6px rgba(125,33,73,.09);
        }
        .badge,.chip,.pill{
            display:inline-flex;
            align-items:center;
            gap:6px;
            min-height:34px;
            border-radius:999px;
            padding:0 12px;
            font-size:13px;
            font-weight:700;
            letter-spacing:.01em;
        }
        .badge{
            background:rgba(125,33,73,.10);
            color:var(--primary);
            border:1px solid rgba(125,33,73,.12);
        }
        .badge--soft{
            background:rgba(194,140,109,.12);
            color:#8f5f3c;
            border-color:rgba(194,140,109,.16);
        }
        .badge--dark{
            background:rgba(255,255,255,.10);
            color:#f9f0f4;
            border:1px solid rgba(255,255,255,.16);
        }
        .chip{
            background:rgba(255,255,255,.58);
            color:#5d5160;
            border:1px solid var(--line);
        }
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            min-height:48px;
            padding:0 18px;
            border-radius:999px;
            border:1px solid transparent;
            font-weight:800;
            letter-spacing:.01em;
            transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease,border-color .2s ease,color .2s ease;
        }
        .btn:hover{transform:translateY(-2px)}
        .btn:active{transform:translateY(0)}
        .btn--primary{
            background:linear-gradient(135deg,var(--primary),var(--primary-2));
            color:#fff;
            box-shadow:0 18px 32px rgba(125,33,73,.22);
        }
        .btn--primary:hover{
            color:#fff;
            box-shadow:0 22px 40px rgba(125,33,73,.28);
        }
        .btn--ghost{
            color:var(--primary);
            background:rgba(255,255,255,.56);
            border-color:rgba(125,33,73,.18);
        }
        .btn--ghost:hover{
            color:var(--primary);
            background:#fff7f5;
            border-color:rgba(169,78,109,.32);
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:50;
            min-height:var(--header-h);
            background:rgba(36,20,31,.88);
            backdrop-filter:blur(18px);
            border-bottom:1px solid rgba(255,255,255,.08);
        }
        .site-header__inner{
            min-height:var(--header-h);
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
        }
        .site-brand{
            display:inline-flex;
            align-items:center;
            gap:12px;
            min-width:0;
            color:#fff;
        }
        .site-brand:hover{color:#fff;opacity:.92}
        .site-brand__mark{
            width:42px;
            height:42px;
            flex:0 0 auto;
            border-radius:16px;
            background:
                radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 26%),
                linear-gradient(135deg, var(--primary-2), var(--accent));
            box-shadow:0 14px 34px rgba(169,78,109,.32);
            position:relative;
            overflow:hidden;
        }
        .site-brand__mark::after{
            content:"";
            position:absolute;
            width:58px;
            height:18px;
            left:-7px;
            bottom:8px;
            border-radius:999px;
            border:2px solid rgba(255,255,255,.52);
            transform:rotate(-20deg);
        }
        .site-brand__text{
            display:flex;
            flex-direction:column;
            line-height:1.18;
            min-width:0;
        }
        .site-brand__name{
            font-weight:900;
            font-size:16px;
            color:#fff8f6;
            max-width:330px;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
        }
        .site-brand__sub{
            margin-top:4px;
            font-size:12px;
            color:rgba(255,255,255,.64);
            white-space:nowrap;
        }
        .site-nav{
            display:flex;
            align-items:center;
            justify-content:center;
            flex:1;
        }
        .site-nav__list{
            display:flex;
            align-items:center;
            gap:6px;
            padding:6px;
            border-radius:999px;
            background:rgba(255,255,255,.07);
            border:1px solid rgba(255,255,255,.08);
        }
        .site-nav__link{
            display:inline-flex;
            align-items:center;
            min-height:38px;
            padding:0 14px;
            border-radius:999px;
            color:rgba(255,255,255,.78);
            font-size:14px;
            font-weight:700;
        }
        .site-nav__link:hover{
            color:#fff;
            background:rgba(255,255,255,.10);
        }
        .site-nav__link.is-active{
            color:#fff;
            background:linear-gradient(135deg, rgba(125,33,73,.85), rgba(169,78,109,.72));
            box-shadow:0 10px 24px rgba(0,0,0,.16);
        }
        .site-header__cta{
            display:flex;
            align-items:center;
            gap:12px;
        }
        .nav-toggle{
            display:none;
            width:42px;
            height:42px;
            border-radius:14px;
            border:1px solid rgba(255,255,255,.14);
            background:rgba(255,255,255,.08);
            align-items:center;
            justify-content:center;
        }
        .nav-toggle__lines,
        .nav-toggle__lines span{
            display:block;
            width:19px;
            height:2px;
            background:#fff;
            border-radius:999px;
            position:relative;
        }
        .nav-toggle__lines::before,
        .nav-toggle__lines::after{
            content:"";
            position:absolute;
            left:0;
            width:19px;
            height:2px;
            border-radius:999px;
            background:#fff;
            transition:transform .2s ease,top .2s ease,opacity .2s ease;
        }
        .nav-toggle__lines::before{top:-7px}
        .nav-toggle__lines::after{top:7px}
        .nav-open .nav-toggle__lines span{opacity:0}
        .nav-open .nav-toggle__lines::before{top:0;transform:rotate(45deg)}
        .nav-open .nav-toggle__lines::after{top:0;transform:rotate(-45deg)}
        .article-hero{
            position:relative;
            overflow:hidden;
            padding:54px 0 68px;
            background:
                linear-gradient(135deg, rgba(36,20,31,.94), rgba(50,27,43,.92)),
                url('/assets/images/backpic/back-2.jpg') center/cover no-repeat;
            color:#fff8f6;
        }
        .article-hero::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at 18% 24%, rgba(216,163,174,.18), transparent 30%),
                radial-gradient(circle at 86% 10%, rgba(196,140,109,.16), transparent 28%),
                linear-gradient(180deg, rgba(36,20,31,.12), rgba(36,20,31,.76));
            pointer-events:none;
        }
        .article-hero__inner{
            position:relative;
            z-index:1;
        }
        .breadcrumb{
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            gap:9px;
            margin:0 0 26px;
            color:rgba(255,255,255,.62);
            font-size:14px;
        }
        .breadcrumb a{
            color:rgba(255,255,255,.78);
            font-weight:700;
        }
        .breadcrumb a:hover{color:#fff}
        .breadcrumb__current{
            max-width:620px;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
        }
        .article-head{
            display:grid;
            grid-template-columns:minmax(0,1.08fr) minmax(320px,.72fr);
            gap:38px;
            align-items:end;
        }
        .article-head__main h1{
            margin:16px 0 18px;
            max-width:850px;
            font-size:clamp(32px, 5vw, 58px);
            line-height:1.14;
            font-weight:900;
            letter-spacing:-.035em;
            color:#fffaf7;
            word-break:break-word;
        }
        .article-head__summary{
            max-width:780px;
            margin:0;
            color:rgba(255,255,255,.76);
            font-size:16px;
            line-height:1.9;
        }
        .article-meta{
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            gap:10px;
            margin-top:22px;
        }
        .article-cover{
            position:relative;
            border-radius:var(--radius-xl);
            overflow:hidden;
            border:1px solid rgba(255,255,255,.14);
            box-shadow:0 28px 70px rgba(0,0,0,.28);
            min-height:300px;
            background:#2a1724;
        }
        .article-cover img{
            width:100%;
            height:360px;
            object-fit:cover;
            filter:saturate(.82) contrast(.95);
            transform:scale(1.01);
        }
        .article-cover::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, transparent 35%, rgba(36,20,31,.72));
        }
        .article-cover__note{
            position:absolute;
            left:18px;
            right:18px;
            bottom:18px;
            z-index:1;
            padding:16px;
            border-radius:20px;
            background:rgba(36,20,31,.68);
            border:1px solid rgba(255,255,255,.12);
            backdrop-filter:blur(12px);
            color:rgba(255,255,255,.82);
            font-size:14px;
        }
        .reading-layout{
            display:grid;
            grid-template-columns:minmax(0, 820px) minmax(280px, 1fr);
            gap:34px;
            align-items:start;
        }
        .article-card,
        .side-card,
        .related-card,
        .notice-card{
            background:rgba(255,250,247,.88);
            border:1px solid var(--line);
            border-radius:var(--radius-xl);
            box-shadow:var(--shadow);
        }
        .article-card{
            padding:42px;
            overflow:hidden;
        }
        .article-content{
            color:#332932;
            font-size:17px;
            line-height:1.9;
            word-break:break-word;
        }
        .article-content > *:first-child{margin-top:0}
        .article-content p{
            margin:0 0 1.2em;
        }
        .article-content h2{
            margin:2em 0 .75em;
            font-size:clamp(24px, 3vw, 32px);
            line-height:1.35;
            font-weight:900;
            color:#241c22;
            letter-spacing:-.02em;
        }
        .article-content h3{
            margin:1.7em 0 .65em;
            font-size:clamp(20px, 2.4vw, 25px);
            line-height:1.42;
            font-weight:850;
            color:#33202b;
        }
        .article-content h4{
            margin:1.4em 0 .55em;
            font-size:18px;
            font-weight:850;
            color:#3c2a34;
        }
        .article-content ul,
        .article-content ol{
            margin:0 0 1.25em;
            padding-left:1.45em;
        }
        .article-content li{
            margin:.42em 0;
            padding-left:.15em;
        }
        .article-content blockquote{
            margin:1.6em 0;
            padding:18px 22px;
            border-left:5px solid var(--primary);
            border-radius:0 18px 18px 0;
            background:linear-gradient(135deg, rgba(125,33,73,.08), rgba(196,140,109,.10));
            color:#4c3d48;
        }
        .article-content blockquote p:last-child{margin-bottom:0}
        .article-content a{
            color:var(--primary);
            font-weight:750;
            border-bottom:1px solid rgba(125,33,73,.22);
        }
        .article-content a:hover{
            color:var(--primary-2);
            background:rgba(217,163,174,.16);
            border-bottom-color:rgba(169,78,109,.45);
        }
        .article-content img{
            border-radius:22px;
            margin:1.5em auto;
            box-shadow:0 18px 45px rgba(48,18,34,.13);
        }
        .article-content figure{
            margin:1.8em 0;
        }
        .article-content figcaption{
            text-align:center;
            font-size:14px;
            color:var(--muted);
            margin-top:10px;
        }
        .article-content table{
            width:100%;
            border-collapse:collapse;
            margin:1.5em 0;
            overflow:hidden;
            border-radius:16px;
            display:block;
            max-width:100%;
            overflow-x:auto;
            border:1px solid var(--line);
            background:#fff;
        }
        .article-content th,
        .article-content td{
            padding:12px 14px;
            border-bottom:1px solid var(--line);
            min-width:130px;
        }
        .article-content th{
            background:#f6e9e6;
            color:#3c2833;
            font-weight:850;
        }
        .article-empty{
            text-align:center;
            padding:40px 18px;
        }
        .article-empty__icon{
            width:72px;
            height:72px;
            margin:0 auto 18px;
            border-radius:24px;
            background:linear-gradient(135deg, rgba(125,33,73,.12), rgba(196,140,109,.16));
            display:grid;
            place-items:center;
            color:var(--primary);
            font-size:30px;
            font-weight:900;
        }
        .article-empty h2{
            font-size:28px;
            margin:0 0 10px;
            font-weight:900;
        }
        .article-empty p{
            margin:0 auto 22px;
            max-width:520px;
            color:var(--muted);
        }
        .article-sidebar{
            position:sticky;
            top:calc(var(--header-h) + 20px);
            display:grid;
            gap:18px;
        }
        .side-card{
            padding:22px;
        }
        .side-card h2,
        .side-card h3{
            margin:0 0 14px;
            font-size:19px;
            font-weight:900;
            color:#2d2029;
        }
        .side-list{
            display:grid;
            gap:12px;
            margin:0;
            padding:0;
            list-style:none;
        }
        .side-list li{
            display:flex;
            justify-content:space-between;
            gap:16px;
            padding:12px 0;
            border-bottom:1px solid var(--line);
            color:var(--muted);
            font-size:14px;
        }
        .side-list li:last-child{border-bottom:0}
        .side-list strong{
            color:#332932;
            white-space:nowrap;
        }
        .quick-links{
            display:grid;
            gap:10px;
        }
        .quick-link{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            padding:13px 14px;
            border-radius:16px;
            background:#fff6f3;
            border:1px solid rgba(125,33,73,.10);
            font-weight:800;
        }
        .quick-link:hover{
            background:#fff;
            border-color:rgba(169,78,109,.28);
            box-shadow:0 14px 26px rgba(48,18,34,.08);
            transform:translateY(-2px);
        }
        .notice-card{
            padding:22px;
            background:linear-gradient(135deg, rgba(125,33,73,.08), rgba(232,205,185,.24));
        }
        .notice-card p{
            margin:10px 0 0;
            color:#5a4a55;
            line-height:1.85;
        }
        .related{
            margin-top:30px;
            padding-top:30px;
            border-top:1px solid var(--line);
        }
        .related__head{
            display:flex;
            align-items:end;
            justify-content:space-between;
            gap:18px;
            margin-bottom:18px;
        }
        .related__head h2{
            margin:0;
            font-size:26px;
            font-weight:900;
        }
        .related-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:16px;
        }
        .related-card{
            padding:20px;
            box-shadow:none;
            transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
        }
        .related-card:hover{
            transform:translateY(-4px);
            border-color:rgba(169,78,109,.34);
            box-shadow:0 18px 42px rgba(48,18,34,.10);
        }
        .related-card__meta{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            align-items:center;
            margin-bottom:11px;
        }
        .related-card h3{
            margin:0 0 8px;
            font-size:18px;
            line-height:1.45;
            font-weight:900;
        }
        .related-card p{
            margin:0 0 12px;
            color:var(--muted);
            font-size:14px;
            line-height:1.75;
        }
        .article-cta{
            margin-top:26px;
            border-radius:var(--radius-xl);
            padding:28px;
            background:
                radial-gradient(circle at 20% 0%, rgba(217,163,174,.30), transparent 32%),
                linear-gradient(135deg, #321b2b, #7d2149);
            color:#fff8f6;
            overflow:hidden;
            position:relative;
        }
        .article-cta::after{
            content:"";
            position:absolute;
            right:-50px;
            bottom:-70px;
            width:190px;
            height:190px;
            border-radius:999px;
            background:rgba(255,255,255,.08);
        }
        .article-cta h2{
            position:relative;
            margin:12px 0 10px;
            font-size:28px;
            font-weight:900;
        }
        .article-cta p{
            position:relative;
            margin:0 0 18px;
            max-width:680px;
            color:rgba(255,255,255,.76);
        }
        .article-cta__actions{
            position:relative;
            display:flex;
            flex-wrap:wrap;
            gap:12px;
        }
        .site-footer{
            padding:58px 0 26px;
            background:
                radial-gradient(circle at 10% 0%, rgba(169,78,109,.20), transparent 30%),
                linear-gradient(135deg, #21131d, #321b2b);
            color:rgba(255,255,255,.78);
        }
        .footer__grid{
            display:grid;
            grid-template-columns:1.35fr .7fr .95fr;
            gap:34px;
            align-items:start;
        }
        .footer__text{
            max-width:520px;
            margin:18px 0 0;
            color:rgba(255,255,255,.66);
        }
        .footer__links{
            display:grid;
            gap:10px;
        }
        .footer__links a{
            color:rgba(255,255,255,.72);
            font-weight:700;
        }
        .footer__links a:hover{
            color:#fff;
            transform:translateX(3px);
        }
        .footer__note{
            padding:20px;
            border-radius:22px;
            background:rgba(255,255,255,.07);
            border:1px solid rgba(255,255,255,.10);
        }
        .footer__note p{
            margin:12px 0 0;
            color:rgba(255,255,255,.70);
        }
        .footer__bottom{
            display:flex;
            justify-content:space-between;
            gap:16px;
            margin-top:38px;
            padding-top:22px;
            border-top:1px solid rgba(255,255,255,.10);
            color:rgba(255,255,255,.55);
            font-size:14px;
        }
        @media (max-width:1024px){
            :root{--header-h:70px}
            .site-header__cta .badge{display:none}
            .article-head{
                grid-template-columns:1fr;
                gap:28px;
            }
            .article-cover img{height:320px}
            .reading-layout{
                grid-template-columns:1fr;
            }
            .article-sidebar{
                position:static;
                grid-template-columns:repeat(2, minmax(0,1fr));
            }
            .notice-card{grid-column:1 / -1}
            .footer__grid{
                grid-template-columns:1fr 1fr;
            }
            .footer__note{grid-column:1 / -1}
        }
        @media (max-width:768px){
            .container{width:min(calc(100% - 24px), var(--container))}
            .section{padding:58px 0}
            .site-header__inner{gap:12px}
            .site-brand__mark{width:38px;height:38px;border-radius:14px}
            .site-brand__name{max-width:210px;font-size:14px}
            .site-brand__sub{font-size:11px}
            .nav-toggle{display:flex}
            .site-nav{
                position:fixed;
                left:12px;
                right:12px;
                top:calc(var(--header-h) + 10px);
                display:none;
                flex:none;
                z-index:60;
            }
            .nav-open .site-nav{display:block}
            .site-nav__list{
                display:grid;
                gap:8px;
                padding:12px;
                border-radius:22px;
                background:rgba(36,20,31,.96);
                box-shadow:0 24px 70px rgba(0,0,0,.28);
            }
            .site-nav__link{
                justify-content:center;
                min-height:44px;
            }
            .article-hero{padding:36px 0 48px}
            .breadcrumb__current{max-width:100%}
            .article-head__main h1{font-size:clamp(28px, 9vw, 42px)}
            .article-cover{min-height:auto}
            .article-cover img{height:260px}
            .article-card{padding:26px 20px;border-radius:22px}
            .article-content{font-size:16px;line-height:1.88}
            .article-sidebar{grid-template-columns:1fr}
            .related-grid{grid-template-columns:1fr}
            .related__head{
                display:block;
            }
            .related__head .btn{
                margin-top:14px;
            }
            .footer__grid{grid-template-columns:1fr}
            .footer__bottom{
                flex-direction:column;
            }
        }
        @media (max-width:520px){
            .site-brand__name{max-width:168px}
            .site-brand__sub{display:none}
            .article-meta{align-items:flex-start}
            .article-cover img{height:220px}
            .article-cover__note{
                left:12px;
                right:12px;
                bottom:12px;
                padding:13px;
                font-size:13px;
            }
            .article-card{padding:22px 16px}
            .article-content h2{font-size:24px}
            .article-content h3{font-size:20px}
            .side-card,.notice-card{padding:18px}
            .article-cta{padding:22px}
            .article-cta h2{font-size:24px}
            .article-cta__actions .btn{
                width:100%;
            }
        }

/* 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}