/* roulang page: index */
:root{
            --bg:#120f14;
            --bg-soft:#17131a;
            --bg-soft-2:#1d1820;
            --panel:#201a24;
            --panel-2:#251d29;
            --line:rgba(255,255,255,.08);
            --line-2:rgba(255,255,255,.14);
            --text:#f6efe9;
            --muted:#c8b9b0;
            --muted-2:#9d8e88;
            --accent:#8e2c41;
            --accent-2:#b44b67;
            --accent-3:#d7b57a;
            --good:#c9a96e;
            --shadow:0 24px 55px rgba(0,0,0,.38);
            --shadow-soft:0 14px 34px rgba(0,0,0,.24);
            --radius:24px;
            --radius-sm:16px;
            --radius-xs:12px;
            --container:1280px;
            --gap:24px;
            --gap-sm:16px;
            --gap-xs:10px;
            --trans:.24s ease;
            --trans-fast:.16s ease;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            min-height:100vh;
            font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif;
            color:var(--text);
            background:
                radial-gradient(1200px 700px at 15% 0%, rgba(180,75,103,.16), transparent 60%),
                radial-gradient(900px 600px at 90% 10%, rgba(215,181,122,.10), transparent 55%),
                linear-gradient(180deg, #0f0c11 0%, #141017 34%, #120f14 100%);
            line-height:1.75;
            -webkit-font-smoothing:antialiased;
            text-rendering:optimizeLegibility;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background:
                linear-gradient(transparent 0 0),
                repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0, rgba(255,255,255,.015) 1px, transparent 1px, transparent 118px),
                repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0, rgba(255,255,255,.012) 1px, transparent 1px, transparent 118px);
            opacity:.35;
            mix-blend-mode:soft-light;
        }
        img{max-width:100%;display:block}
        a{color:inherit;text-decoration:none}
        button,input,textarea,select{font:inherit}
        button{
            border:0;
            background:none;
            color:inherit;
            padding:0;
            cursor:pointer;
        }
        ::selection{background:rgba(180,75,103,.35);color:#fff}
        .skip-link{
            position:absolute;
            left:-999px;
            top:0;
            z-index:9999;
            padding:12px 16px;
            background:var(--accent-3);
            color:#231815;
            border-radius:999px;
        }
        .skip-link:focus{left:16px;top:16px;outline:none}
        .container{
            width:min(var(--container), calc(100% - 32px));
            margin:0 auto;
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:1000;
            backdrop-filter:blur(18px);
            -webkit-backdrop-filter:blur(18px);
            background:linear-gradient(180deg, rgba(17,13,19,.92), rgba(17,13,19,.72));
            border-bottom:1px solid rgba(255,255,255,.07);
        }
        .header-inner{
            display:flex;
            align-items:center;
            gap:18px;
            padding:16px 0;
            flex-wrap:wrap;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:12px;
            min-width:0;
            margin-right:auto;
        }
        .brand-mark{
            display:grid;
            place-items:center;
            width:44px;
            height:44px;
            border-radius:15px;
            background:
                linear-gradient(145deg, rgba(180,75,103,.95), rgba(142,44,65,.92));
            box-shadow:0 10px 26px rgba(142,44,65,.32);
            font-weight:800;
            letter-spacing:.08em;
            color:#fff7f1;
            flex:0 0 auto;
        }
        .brand-text{
            font-size:1.02rem;
            font-weight:800;
            letter-spacing:.02em;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .menu-toggle{
            display:none;
            align-items:center;
            justify-content:center;
            width:48px;
            height:48px;
            border-radius:14px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
            color:var(--text);
            box-shadow:var(--shadow-soft);
            transition:transform var(--trans), background var(--trans), border-color var(--trans);
        }
        .menu-toggle:hover{transform:translateY(-1px);border-color:rgba(215,181,122,.35);background:rgba(255,255,255,.05)}
        .menu-toggle:active{transform:translateY(1px)}
        .menu-toggle:focus-visible,
        .nav-link:focus-visible,
        .btn:focus-visible,
        .search-input:focus-visible,
        .search-submit:focus-visible,
        .card-link:focus-visible,
        details summary:focus-visible{
            outline:0;
            box-shadow:0 0 0 3px rgba(215,181,122,.32), 0 0 0 6px rgba(180,75,103,.14);
        }
        .site-nav{
            display:flex;
            align-items:center;
            gap:8px;
        }
        .nav-link{
            position:relative;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:11px 16px;
            border-radius:999px;
            color:var(--muted);
            border:1px solid transparent;
            transition:transform var(--trans-fast), background var(--trans), color var(--trans), border-color var(--trans);
        }
        .nav-link:hover{
            color:var(--text);
            background:rgba(255,255,255,.04);
            border-color:rgba(255,255,255,.08);
            transform:translateY(-1px);
        }
        .nav-link.active{
            color:#fff5ed;
            background:linear-gradient(135deg, rgba(142,44,65,.95), rgba(180,75,103,.82));
            box-shadow:0 12px 24px rgba(142,44,65,.28);
        }
        .header-tools{
            display:flex;
            align-items:center;
            gap:12px;
            margin-left:auto;
        }
        .searchbar{
            display:flex;
            align-items:center;
            gap:10px;
            padding:8px;
            border-radius:999px;
            background:rgba(255,255,255,.04);
            border:1px solid var(--line);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
        }
        .search-input{
            width:min(260px, 22vw);
            border:0;
            background:transparent;
            color:var(--text);
            padding:8px 10px;
            outline:none;
        }
        .search-input::placeholder{color:var(--muted-2)}
        .search-submit{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            height:38px;
            padding:0 16px;
            border-radius:999px;
            background:linear-gradient(135deg, var(--accent), var(--accent-2));
            color:#fff8f5;
            font-weight:700;
            letter-spacing:.02em;
            box-shadow:0 10px 22px rgba(180,75,103,.22);
            transition:transform var(--trans-fast), box-shadow var(--trans), filter var(--trans);
        }
        .search-submit:hover{transform:translateY(-1px);box-shadow:0 14px 26px rgba(180,75,103,.3);filter:saturate(1.05)}
        .search-submit:active{transform:translateY(1px)}
        main{display:block}
        .section{
            position:relative;
            padding:88px 0;
        }
        .section.tight{padding:62px 0}
        .section.alt{
            background:linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,.02));
            border-top:1px solid rgba(255,255,255,.05);
            border-bottom:1px solid rgba(255,255,255,.05);
        }
        .section-head{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:18px;
            margin-bottom:28px;
        }
        .section-title-wrap{max-width:760px}
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            margin-bottom:12px;
            color:var(--accent-3);
            font-weight:700;
            letter-spacing:.12em;
            text-transform:uppercase;
            font-size:.78rem;
        }
        .eyebrow::before{
            content:"";
            width:22px;
            height:1px;
            background:linear-gradient(90deg, transparent, var(--accent-3), transparent);
        }
        .section-title{
            margin:0;
            font-size:clamp(1.45rem, 2vw, 2rem);
            line-height:1.22;
            letter-spacing:.01em;
        }
        .section-desc{
            margin:10px 0 0;
            color:var(--muted);
            font-size:.98rem;
            max-width:62ch;
        }
        .section-note{
            color:var(--muted-2);
            font-size:.92rem;
        }
        .hero{
            padding:38px 0 36px;
        }
        .hero-shell{
            position:relative;
            overflow:hidden;
            border-radius:32px;
            border:1px solid rgba(255,255,255,.08);
            background:
                linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
                linear-gradient(180deg, rgba(24,19,28,.95), rgba(15,12,17,.9));
            box-shadow:var(--shadow);
        }
        .hero-shell::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(1000px 520px at 15% 18%, rgba(180,75,103,.15), transparent 52%),
                radial-gradient(680px 420px at 88% 18%, rgba(215,181,122,.12), transparent 55%);
            pointer-events:none;
        }
        .hero-grid{
            position:relative;
            display:grid;
            grid-template-columns:1.05fr .95fr;
            gap:30px;
            align-items:stretch;
            padding:34px;
        }
        .hero-copy{
            display:flex;
            flex-direction:column;
            justify-content:center;
            gap:18px;
            min-width:0;
        }
        .hero-badges{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
        }
        .chip{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 12px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.04);
            color:var(--muted);
            font-size:.88rem;
        }
        .chip .dot{
            width:8px;height:8px;border-radius:999px;background:var(--accent-3);box-shadow:0 0 0 4px rgba(215,181,122,.14);
        }
        .hero-title{
            margin:0;
            font-size:clamp(2.1rem, 4.3vw, 4.6rem);
            line-height:1.04;
            letter-spacing:-.03em;
            text-wrap:balance;
            max-width:12ch;
        }
        .hero-title span{
            color:var(--accent-3);
            text-shadow:0 0 26px rgba(215,181,122,.14);
        }
        .hero-text{
            margin:0;
            color:var(--muted);
            font-size:1.02rem;
            max-width:62ch;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:4px;
        }
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            min-height:48px;
            padding:0 18px;
            border-radius:16px;
            font-weight:700;
            letter-spacing:.02em;
            transition:transform var(--trans-fast), box-shadow var(--trans), background var(--trans), border-color var(--trans), color var(--trans);
        }
        .btn-primary{
            background:linear-gradient(135deg, var(--accent), var(--accent-2));
            color:#fff7f3;
            box-shadow:0 16px 28px rgba(142,44,65,.28);
        }
        .btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 34px rgba(142,44,65,.34)}
        .btn-secondary{
            border:1px solid rgba(215,181,122,.28);
            background:rgba(255,255,255,.03);
            color:var(--text);
        }
        .btn-secondary:hover{
            transform:translateY(-2px);
            border-color:rgba(215,181,122,.48);
            background:rgba(255,255,255,.06);
            box-shadow:var(--shadow-soft);
        }
        .hero-meta{
            display:grid;
            grid-template-columns:repeat(4, minmax(0,1fr));
            gap:12px;
            margin-top:8px;
        }
        .meta-item{
            padding:14px 14px 12px;
            border-radius:18px;
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.06);
        }
        .meta-item strong{
            display:block;
            color:#fff2eb;
            margin-bottom:4px;
            font-size:.96rem;
        }
        .meta-item span{color:var(--muted-2);font-size:.88rem}
        .hero-visual{
            position:relative;
            min-height:500px;
            border-radius:28px;
            overflow:hidden;
            border:1px solid rgba(255,255,255,.08);
            background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
        }
        .hero-visual img.main-shot{
            position:absolute;
            inset:0;
            width:100%;
            height:100%;
            object-fit:cover;
            filter:saturate(.9) contrast(1.02);
            transform:scale(1.01);
        }
        .hero-visual::after{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(180deg, rgba(10,8,12,.12), rgba(10,8,12,.75)),
                radial-gradient(700px 420px at 70% 12%, rgba(180,75,103,.24), transparent 52%);
            pointer-events:none;
        }
        .hero-visual-card{
            position:absolute;
            left:20px;
            right:20px;
            bottom:20px;
            z-index:2;
            display:grid;
            grid-template-columns:96px 1fr;
            gap:14px;
            padding:16px;
            border-radius:22px;
            background:rgba(18,15,20,.78);
            border:1px solid rgba(255,255,255,.12);
            backdrop-filter:blur(14px);
            -webkit-backdrop-filter:blur(14px);
            box-shadow:0 18px 40px rgba(0,0,0,.3);
        }
        .hero-thumb{
            width:96px;
            height:96px;
            border-radius:18px;
            overflow:hidden;
            flex:0 0 auto;
        }
        .hero-thumb img{
            width:100%;
            height:100%;
            object-fit:cover;
            transition:transform var(--trans);
        }
        .hero-visual-card:hover .hero-thumb img{transform:scale(1.05)}
        .hero-visual-card h3{
            margin:0 0 6px;
            font-size:1.08rem;
            line-height:1.35;
        }
        .hero-visual-card p{
            margin:0;
            color:var(--muted);
            font-size:.93rem;
            line-height:1.7;
        }
        .hero-visual-card .mini-row{
            display:flex;
            gap:8px;
            flex-wrap:wrap;
            margin-top:10px;
        }
        .mini-tag{
            display:inline-flex;
            align-items:center;
            padding:6px 10px;
            border-radius:999px;
            background:rgba(255,255,255,.06);
            color:#f0dfd5;
            border:1px solid rgba(255,255,255,.08);
            font-size:.8rem;
        }
        .hero-panel{
            position:absolute;
            top:18px;
            right:18px;
            z-index:2;
            padding:12px 14px;
            border-radius:18px;
            background:rgba(18,15,20,.7);
            border:1px solid rgba(255,255,255,.1);
            color:#f6e7dd;
            font-size:.9rem;
            box-shadow:0 14px 30px rgba(0,0,0,.22);
        }
        .trust-strip{
            margin-top:18px;
            display:grid;
            grid-template-columns:repeat(4, minmax(0,1fr));
            gap:12px;
        }
        .trust-item{
            padding:16px 18px;
            border-radius:18px;
            border:1px solid rgba(255,255,255,.07);
            background:rgba(255,255,255,.03);
            color:var(--muted);
            box-shadow:0 10px 22px rgba(0,0,0,.12);
        }
        .trust-item strong{
            display:block;
            margin-bottom:5px;
            color:var(--text);
            font-size:.98rem;
        }
        .trust-item span{font-size:.9rem;color:var(--muted-2)}
        .featured-grid{
            display:grid;
            grid-template-columns:1.45fr .85fr;
            gap:20px;
        }
        .feature-card{
            overflow:hidden;
            border-radius:28px;
            background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.025));
            border:1px solid rgba(255,255,255,.07);
            box-shadow:var(--shadow-soft);
            transition:transform var(--trans), box-shadow var(--trans), border-color var(--trans);
        }
        .feature-card:hover{
            transform:translateY(-4px);
            box-shadow:0 24px 48px rgba(0,0,0,.3);
            border-color:rgba(215,181,122,.18);
        }
        .feature-card .image{
            position:relative;
            overflow:hidden;
            aspect-ratio:16/9;
            background:#221920;
        }
        .feature-card .image::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, rgba(10,8,12,.06), rgba(10,8,12,.66));
            pointer-events:none;
        }
        .feature-card img{
            width:100%;
            height:100%;
            object-fit:cover;
            transition:transform var(--trans), filter var(--trans);
        }
        .feature-card:hover img{transform:scale(1.045)}
        .feature-body{
            padding:20px 20px 22px;
        }
        .feature-label{
            display:inline-flex;
            align-items:center;
            gap:8px;
            margin-bottom:10px;
            color:var(--accent-3);
            font-size:.82rem;
            letter-spacing:.08em;
            font-weight:700;
        }
        .feature-title{
            margin:0 0 10px;
            font-size:1.35rem;
            line-height:1.3;
        }
        .feature-text{
            margin:0;
            color:var(--muted);
            line-height:1.8;
        }
        .feature-actions{
            display:flex;
            gap:10px;
            flex-wrap:wrap;
            margin-top:16px;
        }
        .feature-side{
            display:grid;
            gap:20px;
        }
        .small-card{
            display:grid;
            grid-template-columns:120px 1fr;
            gap:14px;
            overflow:hidden;
            border-radius:24px;
            background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
            border:1px solid rgba(255,255,255,.07);
            transition:transform var(--trans), box-shadow var(--trans), border-color var(--trans);
        }
        .small-card:hover{
            transform:translateY(-4px);
            box-shadow:0 22px 42px rgba(0,0,0,.26);
            border-color:rgba(180,75,103,.24);
        }
        .small-card .thumb{
            position:relative;
            min-height:170px;
            overflow:hidden;
        }
        .small-card .thumb::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.54));
        }
        .small-card img{
            width:100%;
            height:100%;
            object-fit:cover;
            transition:transform var(--trans);
        }
        .small-card:hover img{transform:scale(1.04)}
        .small-card .content{
            padding:18px 18px 18px 0;
            display:flex;
            flex-direction:column;
            justify-content:center;
        }
        .small-card h3{
            margin:0 0 8px;
            font-size:1.04rem;
            line-height:1.38;
        }
        .small-card p{
            margin:0;
            color:var(--muted);
            font-size:.94rem;
            line-height:1.72;
        }
        .small-card .card-foot{
            margin-top:12px;
            color:var(--accent-3);
            font-size:.88rem;
            font-weight:700;
        }
        .latest-wrap{
            display:grid;
            grid-template-columns:minmax(0,1fr) 300px;
            gap:18px;
            align-items:end;
            margin-bottom:24px;
        }
        .search-inline{
            padding:12px;
            border-radius:22px;
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.07);
            box-shadow:var(--shadow-soft);
        }
        .search-inline .searchbar{
            width:100%;
            border-radius:18px;
            padding:8px;
            justify-content:space-between;
        }
        .search-inline .search-input{width:100%;min-width:0}
        .latest-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:16px;
        }
        .latest-card{
            display:block;
            overflow:hidden;
            border-radius:24px;
            background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
            border:1px solid rgba(255,255,255,.07);
            box-shadow:var(--shadow-soft);
            transition:transform var(--trans), box-shadow var(--trans), border-color var(--trans), background var(--trans);
            min-height:100%;
        }
        .latest-card:hover{
            transform:translateY(-4px);
            border-color:rgba(215,181,122,.2);
            box-shadow:0 24px 46px rgba(0,0,0,.28);
            background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.022));
        }
        .latest-card-inner{
            padding:20px;
            display:flex;
            flex-direction:column;
            gap:12px;
            min-height:100%;
        }
        .latest-meta{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            flex-wrap:wrap;
            color:var(--muted-2);
            font-size:.86rem;
        }
        .latest-category{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:6px 10px;
            border-radius:999px;
            background:rgba(180,75,103,.12);
            color:#f1dfe4;
            border:1px solid rgba(180,75,103,.18);
        }
        .latest-time{white-space:nowrap}
        .latest-card h3{
            margin:0;
            font-size:1.12rem;
            line-height:1.42;
            letter-spacing:.01em;
        }
        .latest-card p{
            margin:0;
            color:var(--muted);
            line-height:1.82;
        }
        .latest-action{
            margin-top:auto;
            color:var(--accent-3);
            font-weight:700;
            display:inline-flex;
            align-items:center;
            gap:8px;
        }
        .latest-action::after{
            content:"→";
            transition:transform var(--trans);
        }
        .latest-card:hover .latest-action::after{transform:translateX(2px)}
        .empty-state{
            padding:24px;
            border-radius:24px;
            border:1px dashed rgba(255,255,255,.14);
            color:var(--muted);
            background:rgba(255,255,255,.03);
            text-align:center;
            grid-column:1/-1;
        }
        .guide-grid{
            display:grid;
            grid-template-columns:1fr .95fr;
            gap:18px;
            align-items:stretch;
        }
        .guide-card{
            overflow:hidden;
            border-radius:28px;
            border:1px solid rgba(255,255,255,.07);
            background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.024));
            box-shadow:var(--shadow-soft);
        }
        .guide-card .box{
            padding:22px;
        }
        .guide-list{
            list-style:none;
            margin:0;
            padding:0;
            display:grid;
            gap:12px;
        }
        .guide-list li{
            display:flex;
            gap:12px;
            align-items:flex-start;
            padding:14px 14px;
            border-radius:18px;
            background:rgba(255,255,255,.03);
            border:1px solid rgba(255,255,255,.06);
        }
        .guide-num{
            width:30px;
            height:30px;
            border-radius:999px;
            display:grid;
            place-items:center;
            background:linear-gradient(135deg, rgba(142,44,65,.92), rgba(180,75,103,.78));
            color:#fff8f5;
            font-weight:800;
            flex:0 0 auto;
            box-shadow:0 10px 18px rgba(142,44,65,.22);
        }
        .guide-list strong{
            display:block;
            margin-bottom:2px;
            font-size:.98rem;
        }
        .guide-list span{
            color:var(--muted);
            font-size:.92rem;
        }
        .quote-card{
            position:relative;
            overflow:hidden;
            min-height:100%;
        }
        .quote-media{
            position:relative;
            min-height:260px;
        }
        .quote-media img{
            width:100%;
            height:100%;
            object-fit:cover;
            filter:saturate(.9);
        }
        .quote-media::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, rgba(10,8,12,.1), rgba(10,8,12,.75));
        }
        .quote-body{
            position:absolute;
            inset:auto 0 0 0;
            padding:22px;
            z-index:2;
        }
        .quote-body .quote{
            margin:0 0 10px;
            font-size:1.18rem;
            line-height:1.5;
            font-weight:800;
            max-width:14ch;
        }
        .quote-body p{
            margin:0;
            color:#f0e2da;
            opacity:.92;
        }
        .faq-list{
            display:grid;
            gap:14px;
            margin:0;
        }
        details{
            border-radius:20px;
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.07);
            overflow:hidden;
            box-shadow:var(--shadow-soft);
        }
        summary{
            list-style:none;
            cursor:pointer;
            padding:18px 18px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            font-weight:700;
        }
        summary::-webkit-details-marker{display:none}
        summary::after{
            content:"+";
            width:28px;
            height:28px;
            border-radius:999px;
            display:grid;
            place-items:center;
            background:rgba(255,255,255,.05);
            color:var(--accent-3);
            flex:0 0 auto;
            transition:transform var(--trans), background var(--trans);
        }
        details[open] summary::after{
            content:"–";
            transform:rotate(0deg);
            background:rgba(180,75,103,.14);
        }
        details p{
            margin:0;
            padding:0 18px 18px;
            color:var(--muted);
            line-height:1.82;
        }
        .cta{
            padding:0 0 88px;
        }
        .cta-shell{
            position:relative;
            overflow:hidden;
            border-radius:32px;
            background:
                linear-gradient(180deg, rgba(14,11,16,.48), rgba(14,11,16,.76)),
                url('/assets/images/backpic/back-2.jpg') center/cover no-repeat;
            border:1px solid rgba(255,255,255,.08);
            box-shadow:var(--shadow);
        }
        .cta-shell::after{
            content:"";
            position:absolute;
            inset:0;
            background:radial-gradient(700px 320px at 70% 0%, rgba(215,181,122,.14), transparent 55%);
            pointer-events:none;
        }
        .cta-inner{
            position:relative;
            z-index:1;
            padding:34px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            flex-wrap:wrap;
        }
        .cta-copy{
            max-width:720px;
        }
        .cta-copy h2{
            margin:0 0 10px;
            font-size:clamp(1.5rem, 2.5vw, 2.2rem);
            line-height:1.18;
        }
        .cta-copy p{
            margin:0;
            color:var(--muted);
            max-width:62ch;
        }
        .cta-actions{
            display:flex;
            gap:12px;
            flex-wrap:wrap;
        }
        .site-footer{
            padding:34px 0 44px;
            border-top:1px solid rgba(255,255,255,.06);
            background:linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,.015));
        }
        .footer-grid{
            display:grid;
            grid-template-columns:1.2fr .8fr .8fr;
            gap:18px;
            align-items:start;
        }
        .footer-brand{
            display:flex;
            flex-direction:column;
            gap:12px;
        }
        .footer-brand strong{
            font-size:1.08rem;
        }
        .footer-brand p{
            margin:0;
            color:var(--muted);
            line-height:1.8;
            max-width:42ch;
        }
        .footer-links{
            display:grid;
            gap:10px;
        }
        .footer-links a{
            color:var(--muted);
            transition:color var(--trans), transform var(--trans);
        }
        .footer-links a:hover{
            color:#fff4ec;
            transform:translateX(2px);
        }
        .footer-note{
            color:var(--muted-2);
            font-size:.92rem;
            line-height:1.8;
        }
        .copyright{
            margin-top:24px;
            padding-top:18px;
            border-top:1px solid rgba(255,255,255,.06);
            color:var(--muted-2);
            font-size:.92rem;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            flex-wrap:wrap;
        }
        .section-anchor{scroll-margin-top:100px}
        .hidden{display:none !important}
        @media (max-width: 1120px){
            .hero-grid{grid-template-columns:1fr;gap:22px}
            .hero-visual{min-height:420px}
            .latest-wrap{grid-template-columns:1fr}
            .guide-grid{grid-template-columns:1fr}
            .footer-grid{grid-template-columns:1fr 1fr}
        }
        @media (max-width: 920px){
            .section{padding:72px 0}
            .hero{padding-top:24px}
            .hero-meta,.trust-strip,.latest-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
            .featured-grid{grid-template-columns:1fr}
            .small-card{grid-template-columns:132px 1fr}
            .footer-grid{grid-template-columns:1fr}
            .header-tools{margin-left:0;width:100%;justify-content:flex-start}
            .searchbar{width:100%}
            .search-input{width:100%}
        }
        @media (max-width: 760px){
            .menu-toggle{display:inline-flex;margin-left:auto}
            .site-nav,.header-tools{
                display:none;
                width:100%;
            }
            .site-header.nav-open .site-nav,
            .site-header.nav-open .header-tools{
                display:flex;
            }
            .site-header.nav-open .header-inner{
                padding-bottom:18px;
            }
            .site-nav{
                order:3;
                flex-wrap:wrap;
                padding:12px;
                border-radius:20px;
                background:rgba(255,255,255,.04);
                border:1px solid rgba(255,255,255,.07);
            }
            .header-tools{
                order:4;
                padding:12px;
                border-radius:20px;
                background:rgba(255,255,255,.04);
                border:1px solid rgba(255,255,255,.07);
            }
            .searchbar{width:100%}
            .hero-grid{padding:22px}
            .hero-title{max-width:100%}
            .hero-meta,.trust-strip,.latest-grid{grid-template-columns:1fr}
            .small-card{grid-template-columns:1fr}
            .small-card .thumb{min-height:220px}
            .small-card .content{padding:0 18px 18px}
            .feature-body,.latest-card-inner,.guide-card .box,.cta-inner{padding:18px}
            .hero-visual{min-height:360px}
            .hero-visual-card{
                left:14px;
                right:14px;
                bottom:14px;
                grid-template-columns:1fr;
            }
            .hero-thumb{width:100%;height:160px}
            .cta-actions,.hero-actions{width:100%}
            .btn{width:100%}
            .search-submit{width:auto;min-width:92px}
            .section-head{flex-direction:column;align-items:flex-start}
        }
        @media (max-width: 520px){
            .container{width:min(100% - 20px, var(--container))}
            .header-inner{gap:12px}
            .brand-text{font-size:.95rem}
            .brand-mark{width:40px;height:40px}
            .hero-title{font-size:clamp(1.9rem, 10vw, 2.9rem)}
            .section{padding:60px 0}
            .section.tight{padding:52px 0}
            .hero-shell{border-radius:24px}
            .hero-grid{padding:18px}
            .feature-card,.small-card,.latest-card,.guide-card,.cta-shell,details{border-radius:22px}
            .trust-item,.chip,.nav-link,.searchbar{border-radius:16px}
            summary{padding:16px}
            details p{padding:0 16px 16px}
        }

/* roulang page: article */
:root{
            --bg:#120f14;
            --bg-soft:#17131a;
            --bg-soft-2:#1d1820;
            --panel:#201a24;
            --panel-2:#251d29;
            --line:rgba(255,255,255,.08);
            --line-2:rgba(255,255,255,.14);
            --text:#f6efe9;
            --muted:#c8b9b0;
            --muted-2:#9d8e88;
            --accent:#8e2c41;
            --accent-2:#b44b67;
            --accent-3:#d7b57a;
            --good:#c9a96e;
            --shadow:0 24px 55px rgba(0,0,0,.38);
            --shadow-soft:0 14px 34px rgba(0,0,0,.24);
            --radius:24px;
            --radius-sm:16px;
            --radius-xs:12px;
            --container:1280px;
            --gap:24px;
            --gap-sm:16px;
            --gap-xs:10px;
            --trans:.24s ease;
            --trans-fast:.16s ease;
        }
        html{scroll-behavior:smooth}
        *{box-sizing:border-box}
        body{
            margin:0;
            min-height:100vh;
            font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif;
            color:var(--text);
            background:
                radial-gradient(1200px 700px at 15% 0%, rgba(180,75,103,.16), transparent 60%),
                radial-gradient(900px 600px at 90% 10%, rgba(215,181,122,.10), transparent 55%),
                linear-gradient(180deg, #0f0c11 0%, #141017 34%, #120f14 100%);
            line-height:1.75;
            -webkit-font-smoothing:antialiased;
            text-rendering:optimizeLegibility;
            overflow-x:hidden;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background:
                linear-gradient(transparent 0 0),
                repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0, rgba(255,255,255,.015) 1px, transparent 1px, transparent 118px),
                repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0, rgba(255,255,255,.012) 1px, transparent 1px, transparent 118px);
            opacity:.35;
            mix-blend-mode:soft-light;
        }
        img{max-width:100%;display:block}
        a{color:inherit;text-decoration:none}
        p{margin:0 0 1rem}
        button,input,textarea,select{font:inherit}
        button{
            border:0;
            background:none;
            color:inherit;
            padding:0;
            cursor:pointer;
        }
        .container{
            width:min(var(--container), calc(100% - 32px));
            margin:0 auto;
        }
        .skip-link{
            position:absolute;
            left:-9999px;
            top:auto;
            width:1px;
            height:1px;
            overflow:hidden;
        }
        .skip-link:focus{
            left:16px;
            top:16px;
            width:auto;
            height:auto;
            padding:10px 14px;
            z-index:2000;
            border-radius:999px;
            background:var(--accent-3);
            color:#20140d;
            box-shadow:var(--shadow-soft);
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:1000;
            backdrop-filter:blur(18px);
            -webkit-backdrop-filter:blur(18px);
            background:linear-gradient(180deg, rgba(17,13,19,.92), rgba(17,13,19,.72));
            border-bottom:1px solid rgba(255,255,255,.07);
        }
        .header-inner{
            display:flex;
            align-items:center;
            gap:18px;
            padding:16px 0;
            flex-wrap:wrap;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:12px;
            min-width:0;
            margin-right:auto;
        }
        .brand-mark{
            display:grid;
            place-items:center;
            width:44px;
            height:44px;
            border-radius:15px;
            background:
                linear-gradient(145deg, rgba(180,75,103,.95), rgba(142,44,65,.92));
            box-shadow:0 10px 26px rgba(142,44,65,.32);
            font-weight:800;
            letter-spacing:.08em;
            color:#fff7f1;
            flex:0 0 auto;
        }
        .brand-text{
            font-size:1.02rem;
            font-weight:800;
            letter-spacing:.02em;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .site-nav{
            display:flex;
            align-items:center;
            gap:8px;
            flex-wrap:wrap;
        }
        .nav-link{
            position:relative;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:11px 16px;
            border-radius:999px;
            color:var(--muted);
            border:1px solid transparent;
            transition:transform var(--trans-fast), background var(--trans), color var(--trans), border-color var(--trans), box-shadow var(--trans);
        }
        .nav-link:hover{
            color:var(--text);
            background:rgba(255,255,255,.04);
            border-color:rgba(255,255,255,.08);
            transform:translateY(-1px);
        }
        .nav-link.active{
            color:#fff5ed;
            background:linear-gradient(135deg, rgba(142,44,65,.95), rgba(180,75,103,.82));
            box-shadow:0 12px 24px rgba(142,44,65,.28);
        }
        .nav-link:active{transform:translateY(1px)}
        .nav-link:focus-visible,
        .btn-pill:focus-visible,
        .btn-ghost:focus-visible,
        .card-link:focus-visible,
        summary:focus-visible,
        .back-link:focus-visible{
            outline:0;
            box-shadow:0 0 0 3px rgba(215,181,122,.32), 0 0 0 6px rgba(180,75,103,.14);
        }
        main{position:relative}
        .page-hero{
            position:relative;
            padding:48px 0 26px;
            overflow:hidden;
        }
        .page-hero::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(180deg, rgba(18,15,20,.18), rgba(18,15,20,.76)),
                radial-gradient(1200px 680px at 20% 0%, rgba(180,75,103,.20), transparent 60%),
                url('/assets/images/backpic/back-3.jpg') center/cover no-repeat;
            opacity:.98;
            z-index:-2;
        }
        .page-hero::after{
            content:"";
            position:absolute;
            inset:0;
            z-index:-1;
            background:linear-gradient(180deg, rgba(18,15,20,.16), rgba(18,15,20,.52) 60%, rgba(18,15,20,.82));
        }
        .hero-grid{
            display:grid;
            grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);
            gap:28px;
            align-items:stretch;
        }
        .hero-copy{
            padding:30px 0 8px;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:7px 12px;
            border-radius:999px;
            background:rgba(255,255,255,.06);
            color:var(--accent-3);
            border:1px solid rgba(215,181,122,.18);
            font-size:.88rem;
            letter-spacing:.06em;
            margin-bottom:16px;
        }
        .hero-copy h1{
            margin:0 0 14px;
            font-size:clamp(2rem, 4vw, 4rem);
            line-height:1.06;
            letter-spacing:-.03em;
            font-weight:800;
            max-width:12ch;
            text-wrap:balance;
            color:#fff7f1;
            text-shadow:0 10px 30px rgba(0,0,0,.2);
        }
        .hero-subtitle{
            max-width:62ch;
            color:var(--muted);
            font-size:1.03rem;
            line-height:1.9;
            margin-bottom:20px;
        }
        .meta-row{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin:0 0 20px;
        }
        .meta-chip{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:9px 12px;
            border-radius:999px;
            background:rgba(255,255,255,.05);
            border:1px solid rgba(255,255,255,.08);
            color:var(--text);
            font-size:.92rem;
            white-space:nowrap;
        }
        .meta-chip strong{
            color:var(--accent-3);
            font-weight:700;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:10px;
        }
        .btn-pill,
        .btn-ghost{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            min-height:46px;
            padding:12px 18px;
            border-radius:999px;
            transition:transform var(--trans), background var(--trans), border-color var(--trans), box-shadow var(--trans), color var(--trans);
        }
        .btn-pill{
            background:linear-gradient(135deg, rgba(142,44,65,.98), rgba(180,75,103,.9));
            color:#fff7f1;
            box-shadow:0 16px 34px rgba(142,44,65,.28);
        }
        .btn-pill:hover{
            transform:translateY(-2px);
            box-shadow:0 22px 44px rgba(142,44,65,.36);
            color:#fff;
        }
        .btn-pill:active{transform:translateY(1px)}
        .btn-ghost{
            border:1px solid rgba(255,255,255,.14);
            background:rgba(255,255,255,.03);
            color:var(--text);
        }
        .btn-ghost:hover{
            transform:translateY(-2px);
            border-color:rgba(215,181,122,.32);
            background:rgba(255,255,255,.06);
            color:#fff;
        }
        .hero-badges{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:18px;
        }
        .badge-soft{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 12px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.04);
            color:var(--muted);
            font-size:.9rem;
        }
        .hero-visual{
            position:relative;
            min-height:380px;
            border-radius:var(--radius);
            overflow:hidden;
            background:
                linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
                var(--panel);
            box-shadow:var(--shadow);
            border:1px solid rgba(255,255,255,.08);
        }
        .hero-visual::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(180deg, rgba(18,15,20,.06), rgba(18,15,20,.52)),
                url('/assets/images/backpic/back-2.jpg') center/cover no-repeat;
            transform:scale(1.03);
        }
        .hero-visual::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(160deg, rgba(142,44,65,.18), rgba(18,15,20,.02) 55%, rgba(215,181,122,.14));
            mix-blend-mode:screen;
        }
        .visual-card{
            position:absolute;
            right:18px;
            left:18px;
            bottom:18px;
            z-index:1;
            display:grid;
            grid-template-columns:1fr auto;
            gap:14px;
            align-items:end;
            padding:16px;
            border-radius:22px;
            background:linear-gradient(180deg, rgba(25,20,28,.82), rgba(25,20,28,.58));
            border:1px solid rgba(255,255,255,.09);
            backdrop-filter:blur(14px);
            box-shadow:var(--shadow-soft);
        }
        .visual-card img{
            width:172px;
            aspect-ratio:4/5;
            object-fit:cover;
            border-radius:18px;
            box-shadow:0 16px 30px rgba(0,0,0,.34);
            border:1px solid rgba(255,255,255,.08);
        }
        .visual-copy{
            min-width:0;
        }
        .visual-copy strong{
            display:block;
            font-size:1.04rem;
            margin-bottom:7px;
        }
        .visual-copy p{
            margin:0;
            color:var(--muted);
            line-height:1.8;
            font-size:.95rem;
        }
        .hero-path{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin:18px 0 0;
            color:var(--muted-2);
            font-size:.92rem;
        }
        .hero-path a{
            color:var(--accent-3);
            transition:color var(--trans);
        }
        .hero-path a:hover{color:#ffe5b6}
        .page-section{
            padding:28px 0;
        }
        .section-soft{
            background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
        }
        .article-stage{
            padding:14px 0 24px;
        }
        .reading-progress{
            position:sticky;
            top:78px;
            z-index:800;
            height:4px;
            margin-bottom:18px;
            border-radius:999px;
            background:rgba(255,255,255,.07);
            overflow:hidden;
            box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
        }
        .reading-progress span{
            display:block;
            height:100%;
            width:0;
            background:linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3));
            border-radius:999px;
            transition:width .16s linear;
        }
        .article-layout{
            display:grid;
            grid-template-columns:minmax(0,1.65fr) minmax(290px,.92fr);
            gap:24px;
            align-items:start;
        }
        .article-card,
        .rail-card,
        .mini-panel,
        .faq-panel,
        .cta-panel,
        .notfound-card,
        .summary-card{
            background:linear-gradient(180deg, rgba(32,26,36,.96), rgba(29,24,32,.95));
            border:1px solid rgba(255,255,255,.08);
            box-shadow:var(--shadow-soft);
            border-radius:var(--radius);
        }
        .article-card{
            padding:24px;
            overflow:hidden;
        }
        .article-summary{
            display:grid;
            grid-template-columns:minmax(0,1.25fr) 210px;
            gap:18px;
            align-items:stretch;
            margin-bottom:18px;
        }
        .summary-card{
            padding:20px;
        }
        .summary-card h2,
        .rail-card h2,
        .mini-panel h2,
        .faq-title,
        .cta-title,
        .module-title{
            margin:0 0 10px;
            font-size:1.22rem;
            line-height:1.3;
            font-weight:800;
            letter-spacing:-.02em;
        }
        .summary-card p,
        .rail-card p,
        .mini-panel p{
            margin:0;
            color:var(--muted);
            line-height:1.85;
        }
        .summary-image{
            position:relative;
            overflow:hidden;
            border-radius:22px;
            min-height:220px;
            border:1px solid rgba(255,255,255,.08);
            box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
        }
        .summary-image img{
            width:100%;
            height:100%;
            object-fit:cover;
            transition:transform var(--trans);
        }
        .summary-image:hover img{transform:scale(1.05)}
        .summary-stamp{
            position:absolute;
            left:14px;
            bottom:14px;
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 12px;
            border-radius:999px;
            background:rgba(18,15,20,.72);
            color:#fff5ed;
            border:1px solid rgba(255,255,255,.09);
            backdrop-filter:blur(12px);
            font-size:.9rem;
        }
        .article-meta{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin:14px 0 18px;
        }
        .article-meta .meta-chip{
            background:rgba(255,255,255,.03);
        }
        .article-content{
            color:var(--text);
            font-size:1.03rem;
            line-height:1.95;
            overflow-wrap:break-word;
        }
        .article-content :is(h2, h3, h4){
            margin:1.9em 0 .75em;
            line-height:1.32;
            color:#fff6ef;
            letter-spacing:-.02em;
        }
        .article-content h2{font-size:1.5rem}
        .article-content h3{font-size:1.22rem}
        .article-content p{color:#f3e8e0}
        .article-content a{
            color:var(--accent-3);
            text-decoration:none;
            border-bottom:1px solid rgba(215,181,122,.2);
            transition:color var(--trans), border-color var(--trans);
        }
        .article-content a:hover{
            color:#ffe7c1;
            border-bottom-color:rgba(255,231,193,.42);
        }
        .article-content img,
        .article-content figure img{
            border-radius:20px;
            border:1px solid rgba(255,255,255,.08);
            box-shadow:var(--shadow-soft);
        }
        .article-content figure{
            margin:1.4rem 0;
        }
        .article-content figcaption{
            color:var(--muted-2);
            font-size:.92rem;
            margin-top:10px;
        }
        .article-content blockquote{
            margin:1.4rem 0;
            padding:18px 20px;
            border-left:4px solid var(--accent-2);
            background:rgba(255,255,255,.04);
            color:var(--text);
            border-radius:0 18px 18px 0;
        }
        .article-content ul,
        .article-content ol{
            padding-left:1.3rem;
            margin:0 0 1rem;
        }
        .article-content li{margin:.4rem 0}
        .article-content hr{
            border:0;
            height:1px;
            margin:1.8rem 0;
            background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
        }
        .article-content code{
            padding:.16rem .42rem;
            border-radius:8px;
            background:rgba(255,255,255,.08);
            color:#ffe9d2;
        }
        .article-content pre{
            overflow:auto;
            padding:18px;
            border-radius:18px;
            background:#151017;
            border:1px solid rgba(255,255,255,.08);
            color:#f7ede7;
        }
        .article-content table{
            width:100%;
            border-collapse:collapse;
            margin:1.2rem 0;
            overflow:hidden;
            border-radius:16px;
        }
        .article-content th,
        .article-content td{
            border:1px solid rgba(255,255,255,.08);
            padding:12px 14px;
            text-align:left;
        }
        .article-content th{
            background:rgba(255,255,255,.05);
            color:#fff6ef;
        }
        .article-content td{
            color:#f1e5dd;
            background:rgba(255,255,255,.02);
        }
        .reading-rail{
            position:sticky;
            top:98px;
            display:grid;
            gap:16px;
        }
        .rail-card{
            padding:20px;
        }
        .rail-card h2{
            font-size:1.1rem;
            margin-bottom:12px;
        }
        .rail-list{
            list-style:none;
            padding:0;
            margin:0;
            display:grid;
            gap:10px;
        }
        .rail-list li{
            display:flex;
            align-items:flex-start;
            gap:10px;
            color:var(--muted);
            line-height:1.7;
        }
        .rail-list li::before{
            content:"";
            width:9px;
            height:9px;
            border-radius:50%;
            margin-top:.55em;
            background:linear-gradient(135deg, var(--accent-2), var(--accent-3));
            flex:0 0 auto;
            box-shadow:0 0 0 4px rgba(180,75,103,.12);
        }
        .toc-list{
            list-style:none;
            padding:0;
            margin:0;
            display:grid;
            gap:8px;
        }
        .toc-list li a{
            display:flex;
            align-items:center;
            gap:10px;
            padding:10px 12px;
            border-radius:14px;
            background:rgba(255,255,255,.03);
            border:1px solid rgba(255,255,255,.06);
            color:var(--muted);
            transition:transform var(--trans), background var(--trans), border-color var(--trans), color var(--trans);
        }
        .toc-list li a:hover{
            transform:translateY(-1px);
            background:rgba(255,255,255,.06);
            border-color:rgba(215,181,122,.2);
            color:#fff;
        }
        .toc-list li a.active{
            color:#fff6ef;
            background:linear-gradient(135deg, rgba(142,44,65,.72), rgba(180,75,103,.44));
            border-color:rgba(255,255,255,.08);
        }
        .toc-index{
            display:inline-grid;
            place-items:center;
            width:24px;
            height:24px;
            border-radius:8px;
            background:rgba(255,255,255,.06);
            color:var(--accent-3);
            font-size:.84rem;
            flex:0 0 auto;
        }
        .toc-text{
            min-width:0;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
        }
        .mini-panel{
            padding:20px;
        }
        .latest-section{
            padding:18px 0 8px;
        }
        .module-head{
            display:flex;
            align-items:end;
            justify-content:space-between;
            gap:16px;
            margin-bottom:16px;
        }
        .module-head h2{
            margin:0;
            font-size:1.65rem;
            line-height:1.2;
            letter-spacing:-.02em;
        }
        .module-head .sub{
            margin-top:8px;
            color:var(--muted);
            max-width:62ch;
        }
        .text-link{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:var(--accent-3);
            padding:10px 0;
            transition:color var(--trans), transform var(--trans);
            white-space:nowrap;
        }
        .text-link:hover{
            color:#ffe7c1;
            transform:translateX(2px);
        }
        .related-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:18px;
        }
        .related-card{
            overflow:hidden;
            border-radius:var(--radius);
            background:linear-gradient(180deg, rgba(32,26,36,.96), rgba(29,24,32,.95));
            border:1px solid rgba(255,255,255,.08);
            box-shadow:var(--shadow-soft);
            transition:transform var(--trans), box-shadow var(--trans), border-color var(--trans);
            min-height:100%;
        }
        .related-card:hover{
            transform:translateY(-4px);
            box-shadow:var(--shadow);
            border-color:rgba(215,181,122,.2);
        }
        .related-card:hover img{transform:scale(1.05)}
        .related-media{
            position:relative;
            overflow:hidden;
            aspect-ratio:16/9;
            background:var(--panel-2);
        }
        .related-media img{
            width:100%;
            height:100%;
            object-fit:cover;
            transition:transform var(--trans);
        }
        .related-body{
            padding:18px;
        }
        .related-body h3{
            margin:0 0 8px;
            font-size:1.08rem;
            line-height:1.38;
            font-weight:800;
            color:#fff6ef;
        }
        .related-body p{
            margin:0 0 14px;
            color:var(--muted);
            line-height:1.8;
        }
        .related-foot{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            font-size:.92rem;
            color:var(--muted-2);
        }
        .tag{
            display:inline-flex;
            align-items:center;
            padding:7px 10px;
            border-radius:999px;
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.08);
            color:var(--accent-3);
            font-size:.82rem;
            white-space:nowrap;
        }
        .faq-section{
            padding:22px 0 10px;
        }
        .faq-panel{
            padding:22px;
        }
        .faq-list{
            display:grid;
            gap:12px;
            margin-top:16px;
        }
        details.faq-item{
            border:1px solid rgba(255,255,255,.08);
            border-radius:18px;
            background:rgba(255,255,255,.03);
            overflow:hidden;
        }
        details.faq-item[open]{
            background:rgba(255,255,255,.05);
            border-color:rgba(215,181,122,.18);
        }
        details.faq-item summary{
            list-style:none;
            padding:16px 18px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            cursor:pointer;
            font-weight:700;
            color:#fff5ed;
        }
        details.faq-item summary::-webkit-details-marker{display:none}
        details.faq-item summary::after{
            content:"+";
            color:var(--accent-3);
            font-size:1.25rem;
            line-height:1;
            transition:transform var(--trans);
        }
        details.faq-item[open] summary::after{
            content:"–";
        }
        .faq-content{
            padding:0 18px 18px;
            color:var(--muted);
            line-height:1.9;
        }
        .cta-section{
            padding:26px 0 48px;
        }
        .cta-panel{
            position:relative;
            overflow:hidden;
            padding:28px;
            background:
                linear-gradient(135deg, rgba(142,44,65,.18), rgba(32,26,36,.98) 48%, rgba(215,181,122,.10)),
                linear-gradient(180deg, rgba(32,26,36,.96), rgba(29,24,32,.95));
        }
        .cta-panel::before{
            content:"";
            position:absolute;
            inset:-2px;
            background:url('/assets/images/backpic/back-1.jpg') center/cover no-repeat;
            opacity:.08;
            pointer-events:none;
        }
        .cta-inner{
            position:relative;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
        }
        .cta-copy{
            max-width:760px;
        }
        .cta-title{
            font-size:1.55rem;
            margin-bottom:10px;
        }
        .cta-copy p{
            color:var(--muted);
            margin:0;
        }
        .cta-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            justify-content:flex-end;
        }
        .site-footer{
            padding:26px 0 18px;
            border-top:1px solid rgba(255,255,255,.08);
            background:linear-gradient(180deg, rgba(18,15,20,.24), rgba(18,15,20,.62));
        }
        .footer-grid{
            display:grid;
            grid-template-columns:1.3fr .8fr 1fr;
            gap:18px;
            padding:8px 0 18px;
        }
        .footer-brand strong{
            display:block;
            font-size:1.05rem;
            margin-bottom:8px;
            color:#fff6ef;
        }
        .footer-brand p,
        .footer-note{
            color:var(--muted);
            line-height:1.85;
            margin:0;
        }
        .footer-links{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            align-content:flex-start;
        }
        .footer-links a{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:10px 14px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.03);
            color:var(--text);
            transition:transform var(--trans), background var(--trans), border-color var(--trans), color var(--trans);
        }
        .footer-links a:hover{
            transform:translateY(-1px);
            background:rgba(255,255,255,.06);
            border-color:rgba(215,181,122,.2);
            color:#fff;
        }
        .copyright{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:14px;
            padding-top:14px;
            border-top:1px solid rgba(255,255,255,.08);
            color:var(--muted-2);
            font-size:.92rem;
        }
        .notfound-wrap{
            padding:52px 0 36px;
        }
        .notfound-card{
            max-width:760px;
            margin:0 auto;
            padding:36px;
            text-align:left;
            background:
                linear-gradient(160deg, rgba(142,44,65,.12), rgba(29,24,32,.96)),
                linear-gradient(180deg, rgba(32,26,36,.96), rgba(29,24,32,.95));
        }
        .notfound-card h1{
            margin:4px 0 14px;
            font-size:clamp(2rem, 4vw, 3rem);
            line-height:1.08;
            letter-spacing:-.03em;
        }
        .notfound-card p{
            color:var(--muted);
            margin-bottom:20px;
        }
        .back-link{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            min-height:46px;
            padding:12px 18px;
            border-radius:999px;
            background:linear-gradient(135deg, rgba(142,44,65,.98), rgba(180,75,103,.9));
            color:#fff7f1;
            box-shadow:0 16px 34px rgba(142,44,65,.28);
            transition:transform var(--trans), box-shadow var(--trans);
        }
        .back-link:hover{
            transform:translateY(-2px);
            box-shadow:0 22px 44px rgba(142,44,65,.36);
            color:#fff;
        }
        .back-link:active{transform:translateY(1px)}
        .muted{color:var(--muted)}
        .mb-0{margin-bottom:0}
        @media (max-width: 1180px){
            .hero-grid,
            .article-layout{
                grid-template-columns:1fr;
            }
            .reading-rail{
                position:relative;
                top:0;
                grid-template-columns:repeat(2, minmax(0,1fr));
            }
            .article-summary{
                grid-template-columns:1fr;
            }
            .summary-image{
                min-height:260px;
            }
            .related-grid{
                grid-template-columns:repeat(2, minmax(0,1fr));
            }
            .cta-inner{
                flex-direction:column;
                align-items:flex-start;
            }
            .cta-actions{
                justify-content:flex-start;
            }
        }
        @media (max-width: 768px){
            .site-header{
                position:sticky;
                top:0;
            }
            .header-inner{
                gap:12px;
                padding:14px 0;
            }
            .brand{
                width:100%;
                margin-right:0;
            }
            .site-nav{
                width:100%;
                gap:10px;
            }
            .nav-link{
                flex:1 1 calc(50% - 5px);
                min-width:0;
            }
            .page-hero{
                padding:34px 0 18px;
            }
            .hero-copy{
                padding-top:10px;
            }
            .hero-copy h1{
                max-width:none;
            }
            .hero-visual{
                min-height:300px;
            }
            .visual-card{
                grid-template-columns:1fr;
            }
            .visual-card img{
                width:100%;
                aspect-ratio:16/9;
            }
            .reading-rail{
                grid-template-columns:1fr;
            }
            .related-grid{
                grid-template-columns:1fr;
            }
            .footer-grid{
                grid-template-columns:1fr;
            }
            .copyright{
                flex-direction:column;
                align-items:flex-start;
            }
            .notfound-card{
                padding:26px 20px;
            }
            .article-card{
                padding:18px;
            }
            .cta-panel{
                padding:22px;
            }
            .summary-card{
                padding:18px;
            }
        }
        @media (max-width: 520px){
            .container{
                width:min(var(--container), calc(100% - 24px));
            }
            .page-hero{
                padding-top:28px;
            }
            .hero-actions,
            .cta-actions{
                width:100%;
            }
            .btn-pill,
            .btn-ghost,
            .back-link{
                width:100%;
            }
            .meta-row,
            .hero-badges,
            .article-meta{
                gap:8px;
            }
            .meta-chip,
            .badge-soft,
            .tag{
                font-size:.84rem;
            }
            .article-content{
                font-size:1rem;
            }
            .module-head{
                flex-direction:column;
                align-items:flex-start;
            }
            details.faq-item summary{
                padding:15px 16px;
            }
            .faq-content{
                padding:0 16px 16px;
            }
        }
        @media (prefers-reduced-motion: reduce){
            html{scroll-behavior:auto}
            *, *::before, *::after{
                animation:none !important;
                transition:none !important;
                scroll-behavior:auto !important;
            }
        }

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