/* roulang page: index */
:root{
            --bg: #111014;
            --bg-2: #17151a;
            --panel: #f6efe8;
            --panel-2: #ede3d9;
            --panel-3: #e3d7cb;
            --text: #221d1a;
            --text-weak: #6f6259;
            --text-light: #faf5ef;
            --line: rgba(34, 29, 26, .12);
            --line-strong: rgba(34, 29, 26, .18);
            --accent: #b84f61;
            --accent-2: #d39b45;
            --accent-3: #7b3848;
            --success: #7a9a64;
            --shadow: 0 18px 40px rgba(24, 16, 12, .12);
            --shadow-strong: 0 24px 56px rgba(24, 16, 12, .18);
            --radius: 24px;
            --radius-sm: 16px;
            --radius-lg: 32px;
            --container: 1180px;
            --space-1: 6px;
            --space-2: 10px;
            --space-3: 14px;
            --space-4: 18px;
            --space-5: 24px;
            --space-6: 32px;
            --space-7: 42px;
            --space-8: 56px;
            --space-9: 72px;
            --space-10: 96px;
            --transition: 220ms cubic-bezier(.2,.8,.2,1);
        }

        *{box-sizing:border-box}
        html{
            scroll-behavior:smooth;
        }
        body{
            margin:0;
            font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;
            color:var(--text);
            background:
                radial-gradient(1200px 700px at 20% -10%, rgba(184,79,97,.18), transparent 60%),
                radial-gradient(900px 500px at 90% 8%, rgba(211,155,69,.12), transparent 55%),
                linear-gradient(180deg, #1a171d 0%, #121015 28%, #121015 100%);
            line-height:1.7;
            -webkit-font-smoothing:antialiased;
            text-rendering:optimizeLegibility;
        }
        img{
            display:block;
            max-width:100%;
            height:auto;
        }
        a{
            color:inherit;
            text-decoration:none;
        }
        button,
        input,
        textarea{
            font:inherit;
        }
        button{
            border:0;
            background:none;
            padding:0;
            cursor:pointer;
        }
        ::selection{
            background:rgba(184,79,97,.22);
            color:var(--text);
        }
        .skip-link{
            position:absolute;
            left:12px;
            top:-60px;
            z-index:1000;
            padding:12px 16px;
            border-radius:999px;
            background:var(--panel);
            color:var(--text);
            box-shadow:var(--shadow);
            transition:transform var(--transition), top var(--transition);
        }
        .skip-link:focus{
            top:12px;
            outline:none;
        }

        .container{
            width:min(100% - 32px, var(--container));
            margin:0 auto;
        }

        .site-header{
            position:sticky;
            top:0;
            z-index:100;
            backdrop-filter:saturate(120%) blur(18px);
            background:rgba(17,16,20,.78);
            border-bottom:1px solid rgba(255,255,255,.08);
        }
        .header-inner{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
            min-height:78px;
            padding:12px 0;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:12px;
            color:var(--text-light);
            font-weight:800;
            letter-spacing:.02em;
            min-width:max-content;
        }
        .brand-badge{
            display:inline-grid;
            place-items:center;
            width:38px;
            height:38px;
            border-radius:14px;
            color:#1f1714;
            background:linear-gradient(145deg, #f7d79d, #d39b45);
            box-shadow:0 10px 24px rgba(211,155,69,.28);
            font-size:.95rem;
            font-weight:900;
        }
        .brand-text{
            font-size:1.02rem;
            line-height:1.1;
        }

        .nav-toggle{
            display:none;
            align-items:center;
            justify-content:center;
            width:46px;
            height:46px;
            border-radius:14px;
            border:1px solid rgba(255,255,255,.12);
            color:var(--text-light);
            background:rgba(255,255,255,.04);
            transition:transform var(--transition), background var(--transition), border-color var(--transition);
        }
        .nav-toggle:hover{
            transform:translateY(-1px);
            background:rgba(255,255,255,.08);
            border-color:rgba(255,255,255,.18);
        }
        .nav-toggle:focus-visible{
            outline:3px solid rgba(211,155,69,.45);
            outline-offset:3px;
        }
        .nav-toggle span{
            display:block;
            width:20px;
            height:2px;
            background:currentColor;
            border-radius:999px;
            position:relative;
        }
        .nav-toggle span::before,
        .nav-toggle span::after{
            content:"";
            position:absolute;
            left:0;
            width:20px;
            height:2px;
            background:currentColor;
            border-radius:999px;
            transition:transform var(--transition), top var(--transition), opacity var(--transition);
        }
        .nav-toggle span::before{top:-7px}
        .nav-toggle span::after{top:7px}

        .site-nav{
            display:flex;
            align-items:center;
            gap:10px;
        }
        .nav-list{
            display:flex;
            align-items:center;
            gap:8px;
            padding:0;
            margin:0;
            list-style:none;
        }
        .nav-list a{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:42px;
            padding:0 16px;
            border-radius:999px;
            color:rgba(250,245,239,.82);
            border:1px solid transparent;
            transition:transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
        }
        .nav-list a:hover{
            transform:translateY(-1px);
            background:rgba(255,255,255,.07);
            border-color:rgba(255,255,255,.12);
            color:#fff;
        }
        .nav-list a:focus-visible{
            outline:3px solid rgba(211,155,69,.45);
            outline-offset:2px;
        }
        .nav-list a.is-active{
            background:linear-gradient(145deg, rgba(184,79,97,.24), rgba(211,155,69,.18));
            color:#fff;
            border-color:rgba(255,255,255,.10);
            box-shadow:0 10px 26px rgba(184,79,97,.16);
        }

        main{
            display:block;
        }

        .hero{
            padding:34px 0 24px;
        }
        .hero-shell{
            position:relative;
            overflow:hidden;
            border-radius:var(--radius-lg);
            border:1px solid rgba(255,255,255,.08);
            background:
                linear-gradient(135deg, rgba(17,16,20,.92), rgba(31,24,28,.90)),
                url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
            box-shadow:var(--shadow-strong);
        }
        .hero-shell::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(700px 320px at 15% 20%, rgba(184,79,97,.18), transparent 60%),
                radial-gradient(500px 240px at 88% 12%, rgba(211,155,69,.12), transparent 58%);
            pointer-events:none;
        }
        .hero-inner{
            position:relative;
            display:grid;
            grid-template-columns:1.05fr .95fr;
            gap:28px;
            align-items:center;
            padding:42px;
            min-height:560px;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 14px;
            border-radius:999px;
            color:#f8efe8;
            background:rgba(255,255,255,.08);
            border:1px solid rgba(255,255,255,.12);
            font-size:.88rem;
            letter-spacing:.02em;
            width:max-content;
            box-shadow:0 10px 28px rgba(0,0,0,.16);
        }
        .eyebrow::before{
            content:"";
            width:8px;
            height:8px;
            border-radius:999px;
            background:linear-gradient(145deg, var(--accent-2), #f4c87b);
            box-shadow:0 0 0 6px rgba(211,155,69,.16);
        }
        .hero h1{
            margin:18px 0 0;
            color:#fffdf9;
            font-size:clamp(2.4rem, 6vw, 4.8rem);
            line-height:1.02;
            letter-spacing:-.04em;
            font-weight:900;
            max-width:11ch;
        }
        .hero-copy{
            margin:18px 0 0;
            max-width:58ch;
            color:rgba(250,245,239,.82);
            font-size:1.04rem;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:28px;
        }
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:50px;
            padding:0 20px;
            border-radius:999px;
            font-weight:700;
            letter-spacing:.01em;
            transition:transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition);
            will-change:transform;
        }
        .btn:hover{
            transform:translateY(-2px);
        }
        .btn:active{
            transform:translateY(0);
        }
        .btn:focus-visible{
            outline:3px solid rgba(211,155,69,.46);
            outline-offset:3px;
        }
        .btn-primary{
            color:#231913;
            background:linear-gradient(145deg, #f6d59a, #d39b45);
            box-shadow:0 16px 34px rgba(211,155,69,.26);
        }
        .btn-primary:hover{
            box-shadow:0 20px 40px rgba(211,155,69,.34);
        }
        .btn-secondary{
            color:#fff8f1;
            border:1px solid rgba(255,255,255,.16);
            background:rgba(255,255,255,.06);
        }
        .btn-secondary:hover{
            background:rgba(255,255,255,.09);
            border-color:rgba(255,255,255,.24);
        }
        .hero-meta{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:24px;
        }
        .pill{
            display:inline-flex;
            align-items:center;
            gap:8px;
            min-height:38px;
            padding:0 14px;
            border-radius:999px;
            color:rgba(255,250,243,.92);
            background:rgba(255,255,255,.08);
            border:1px solid rgba(255,255,255,.10);
            font-size:.92rem;
        }
        .pill strong{
            font-weight:800;
            color:#fff;
        }

        .hero-aside{
            display:grid;
            gap:16px;
            align-self:stretch;
        }
        .hero-visual{
            position:relative;
            overflow:hidden;
            min-height:360px;
            border-radius:28px;
            background:
                linear-gradient(180deg, rgba(20,18,22,.10), rgba(20,18,22,.72)),
                url('/assets/images/backpic/back-2.jpg') center/cover no-repeat;
            border:1px solid rgba(255,255,255,.10);
            box-shadow:0 18px 42px rgba(0,0,0,.24);
        }
        .hero-visual::after{
            content:"";
            position:absolute;
            inset:auto 18px 18px 18px;
            height:120px;
            border-radius:22px;
            background:linear-gradient(180deg, rgba(246,239,232,.95), rgba(246,239,232,.82));
            border:1px solid rgba(255,255,255,.46);
            box-shadow:0 14px 30px rgba(0,0,0,.18);
        }
        .hero-visual-card{
            position:absolute;
            left:18px;
            right:18px;
            bottom:18px;
            z-index:2;
            display:flex;
            gap:14px;
            align-items:center;
            padding:14px;
            border-radius:22px;
            background:rgba(246,239,232,.94);
            border:1px solid rgba(255,255,255,.62);
            box-shadow:0 14px 30px rgba(0,0,0,.16);
        }
        .hero-visual-thumb{
            flex:0 0 110px;
            height:92px;
            border-radius:18px;
            background:url('/assets/images/coverpic/cover-1.webp') center/cover no-repeat;
            box-shadow:0 10px 22px rgba(0,0,0,.12);
        }
        .hero-visual-copy{
            min-width:0;
        }
        .hero-visual-copy .tag{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:5px 10px;
            border-radius:999px;
            background:rgba(184,79,97,.12);
            color:var(--accent-3);
            font-size:.82rem;
            font-weight:700;
        }
        .hero-visual-copy h2{
            margin:10px 0 6px;
            font-size:1.18rem;
            line-height:1.2;
            letter-spacing:-.02em;
            color:var(--text);
        }
        .hero-visual-copy p{
            margin:0;
            color:var(--text-weak);
            font-size:.95rem;
        }
        .floating-note{
            display:grid;
            grid-template-columns:repeat(3, 1fr);
            gap:12px;
        }
        .note-card{
            padding:14px 15px;
            border-radius:22px;
            background:rgba(246,239,232,.92);
            border:1px solid rgba(255,255,255,.44);
            box-shadow:0 14px 28px rgba(0,0,0,.12);
        }
        .note-card b{
            display:block;
            font-size:1rem;
            color:var(--text);
            line-height:1.25;
        }
        .note-card span{
            display:block;
            margin-top:6px;
            color:var(--text-weak);
            font-size:.88rem;
            line-height:1.45;
        }

        .section{
            padding:22px 0;
        }
        .section-card{
            background:linear-gradient(180deg, rgba(246,239,232,.98), rgba(242,234,225,.96));
            border:1px solid rgba(255,255,255,.60);
            border-radius:var(--radius-lg);
            box-shadow:var(--shadow);
        }
        .section-head{
            display:flex;
            align-items:end;
            justify-content:space-between;
            gap:18px;
            margin-bottom:18px;
        }
        .section-title{
            margin:0;
            font-size:clamp(1.5rem, 2.8vw, 2.15rem);
            line-height:1.12;
            letter-spacing:-.03em;
            color:var(--text);
        }
        .section-desc{
            margin:10px 0 0;
            color:var(--text-weak);
            max-width:62ch;
        }
        .section-link{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:var(--accent-3);
            font-weight:700;
            white-space:nowrap;
        }
        .section-link::after{
            content:"→";
            transition:transform var(--transition);
        }
        .section-link:hover::after{
            transform:translateX(3px);
        }

        .quick-strip{
            margin-top:4px;
        }
        .quick-grid{
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:14px;
        }
        .quick-card{
            padding:20px 18px;
            border-radius:24px;
            background:linear-gradient(180deg, rgba(246,239,232,.98), rgba(241,231,220,.96));
            border:1px solid rgba(255,255,255,.62);
            box-shadow:0 12px 28px rgba(24,16,12,.08);
            transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
        }
        .quick-card:hover{
            transform:translateY(-2px);
            box-shadow:0 18px 34px rgba(24,16,12,.12);
            border-color:rgba(184,79,97,.18);
        }
        .quick-card .kicker{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:5px 10px;
            border-radius:999px;
            background:rgba(184,79,97,.10);
            color:var(--accent-3);
            font-size:.83rem;
            font-weight:700;
        }
        .quick-card h3{
            margin:12px 0 8px;
            font-size:1.04rem;
            line-height:1.3;
            color:var(--text);
        }
        .quick-card p{
            margin:0;
            color:var(--text-weak);
            font-size:.92rem;
            line-height:1.65;
        }

        .featured-wrap{
            display:grid;
            grid-template-columns:1.15fr .85fr;
            gap:16px;
        }
        .feature-main,
        .feature-side{
            min-height:100%;
        }
        .feature-main{
            overflow:hidden;
            border-radius:28px;
            background:linear-gradient(180deg, rgba(30,24,28,.10), rgba(30,24,28,.68)), url('/assets/images/coverpic/cover-2.webp') center/cover no-repeat;
            border:1px solid rgba(255,255,255,.66);
            box-shadow:var(--shadow);
            padding:28px;
            display:flex;
            align-items:end;
        }
        .feature-main .overlay{
            max-width:36rem;
            padding:20px 18px;
            border-radius:24px;
            background:rgba(246,239,232,.92);
            border:1px solid rgba(255,255,255,.64);
            box-shadow:0 14px 30px rgba(0,0,0,.12);
        }
        .feature-main .overlay .tag{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:5px 10px;
            border-radius:999px;
            background:rgba(211,155,69,.14);
            color:#7e4e11;
            font-size:.82rem;
            font-weight:700;
        }
        .feature-main h3{
            margin:12px 0 10px;
            font-size:1.4rem;
            line-height:1.22;
            color:var(--text);
        }
        .feature-main p{
            margin:0;
            color:var(--text-weak);
        }
        .feature-main .meta{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-top:14px;
        }

        .feature-stack{
            display:grid;
            gap:16px;
        }
        .mini-card{
            display:grid;
            grid-template-columns:116px 1fr;
            gap:14px;
            align-items:stretch;
            overflow:hidden;
            border-radius:26px;
            background:linear-gradient(180deg, rgba(246,239,232,.98), rgba(240,231,220,.96));
            border:1px solid rgba(255,255,255,.62);
            box-shadow:0 12px 28px rgba(24,16,12,.08);
            transition:transform var(--transition), box-shadow var(--transition);
        }
        .mini-card:hover{
            transform:translateY(-2px);
            box-shadow:0 18px 34px rgba(24,16,12,.12);
        }
        .mini-thumb{
            min-height:148px;
            background-size:cover;
            background-position:center;
        }
        .mini-card:nth-child(1) .mini-thumb{background-image:url('/assets/images/coverpic/cover-3.webp')}
        .mini-card:nth-child(2) .mini-thumb{background-image:url('/assets/images/coverpic/cover-4.webp')}
        .mini-copy{
            padding:18px 18px 18px 0;
        }
        .mini-copy .tag{
            display:inline-flex;
            align-items:center;
            padding:5px 10px;
            border-radius:999px;
            background:rgba(184,79,97,.10);
            color:var(--accent-3);
            font-size:.82rem;
            font-weight:700;
        }
        .mini-copy h3{
            margin:10px 0 8px;
            font-size:1.08rem;
            line-height:1.28;
        }
        .mini-copy p{
            margin:0;
            color:var(--text-weak);
            font-size:.93rem;
            line-height:1.66;
        }

        .latest{
            padding-top:18px;
        }
        .latest-card{
            padding:28px;
            border-radius:var(--radius-lg);
            background:linear-gradient(180deg, rgba(246,239,232,.98), rgba(241,233,223,.96));
            border:1px solid rgba(255,255,255,.6);
            box-shadow:var(--shadow);
        }
        .latest-head{
            display:flex;
            align-items:end;
            justify-content:space-between;
            gap:18px;
            margin-bottom:18px;
        }
        .latest-head .section-desc{
            margin-top:8px;
        }
        .post-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0, 1fr));
            gap:14px;
        }
        .post-card{
            position:relative;
            overflow:hidden;
            padding:20px 18px;
            border-radius:24px;
            background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(247,240,233,.92));
            border:1px solid rgba(34,29,26,.10);
            box-shadow:0 12px 26px rgba(24,16,12,.06);
            transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
        }
        .post-card::before{
            content:"";
            position:absolute;
            inset:0 auto 0 0;
            width:4px;
            background:linear-gradient(180deg, var(--accent), var(--accent-2));
        }
        .post-card:hover{
            transform:translateY(-2px);
            box-shadow:0 18px 32px rgba(24,16,12,.1);
            border-color:rgba(184,79,97,.22);
        }
        .post-card-top{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            margin-bottom:12px;
        }
        .post-badge{
            display:inline-flex;
            align-items:center;
            max-width:100%;
            padding:5px 10px;
            border-radius:999px;
            background:rgba(184,79,97,.10);
            color:var(--accent-3);
            font-size:.8rem;
            font-weight:700;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .post-time{
            color:var(--text-weak);
            font-size:.84rem;
            white-space:nowrap;
        }
        .post-card h3{
            margin:0;
            font-size:1.1rem;
            line-height:1.35;
            letter-spacing:-.02em;
        }
        .post-card h3 a{
            display:inline;
            color:var(--text);
            transition:color var(--transition);
        }
        .post-card h3 a:hover{
            color:var(--accent-3);
        }
        .post-card p{
            margin:10px 0 14px;
            color:var(--text-weak);
            font-size:.95rem;
            line-height:1.72;
        }
        .post-link{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:var(--accent-3);
            font-weight:700;
        }
        .post-link::after{
            content:"→";
            transition:transform var(--transition);
        }
        .post-card:hover .post-link::after,
        .post-link:hover::after{
            transform:translateX(3px);
        }
        .empty-state{
            padding:26px;
            border-radius:24px;
            border:1px dashed rgba(34,29,26,.16);
            background:rgba(255,255,255,.56);
            color:var(--text-weak);
            text-align:center;
        }

        .guide-grid{
            display:grid;
            grid-template-columns:1fr .88fr;
            gap:16px;
            align-items:stretch;
        }
        .guide-panel{
            padding:28px;
            border-radius:var(--radius-lg);
            background:linear-gradient(180deg, rgba(246,239,232,.98), rgba(240,231,220,.96));
            border:1px solid rgba(255,255,255,.62);
            box-shadow:var(--shadow);
        }
        .guide-steps{
            display:grid;
            gap:12px;
            margin-top:20px;
        }
        .step{
            display:flex;
            gap:14px;
            align-items:flex-start;
            padding:18px 18px;
            border-radius:22px;
            background:rgba(255,255,255,.55);
            border:1px solid rgba(34,29,26,.08);
        }
        .step-num{
            flex:0 0 36px;
            width:36px;
            height:36px;
            border-radius:14px;
            display:grid;
            place-items:center;
            background:linear-gradient(145deg, rgba(184,79,97,.16), rgba(211,155,69,.18));
            color:var(--accent-3);
            font-weight:800;
        }
        .step h3{
            margin:0 0 6px;
            font-size:1.02rem;
            line-height:1.3;
        }
        .step p{
            margin:0;
            color:var(--text-weak);
            line-height:1.68;
        }
        .guide-aside{
            overflow:hidden;
            border-radius:var(--radius-lg);
            background:
                linear-gradient(180deg, rgba(26,20,24,.12), rgba(26,20,24,.78)),
                url('/assets/images/backpic/back-3.webp') center/cover no-repeat;
            border:1px solid rgba(255,255,255,.16);
            box-shadow:var(--shadow-strong);
            color:#fff;
            padding:28px;
            display:flex;
            align-items:end;
        }
        .guide-aside-inner{
            width:100%;
            padding:18px;
            border-radius:24px;
            background:rgba(18,16,20,.48);
            border:1px solid rgba(255,255,255,.14);
            backdrop-filter:blur(8px);
        }
        .guide-aside-inner h3{
            margin:0 0 10px;
            font-size:1.3rem;
            line-height:1.22;
        }
        .guide-aside-inner p{
            margin:0;
            color:rgba(255,250,243,.84);
        }
        .guide-aside-inner .btn{
            margin-top:18px;
        }

        .faq-wrap{
            padding:28px;
            border-radius:var(--radius-lg);
            background:linear-gradient(180deg, rgba(246,239,232,.98), rgba(241,233,223,.96));
            border:1px solid rgba(255,255,255,.62);
            box-shadow:var(--shadow);
        }
        .faq-list{
            display:grid;
            gap:12px;
            margin-top:18px;
        }
        .faq-item{
            overflow:hidden;
            border-radius:22px;
            background:rgba(255,255,255,.62);
            border:1px solid rgba(34,29,26,.08);
            transition:border-color var(--transition), box-shadow var(--transition), transform var(--transition);
        }
        .faq-item[open]{
            border-color:rgba(184,79,97,.20);
            box-shadow:0 12px 28px rgba(24,16,12,.08);
        }
        .faq-item summary{
            list-style:none;
            padding:18px 18px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            cursor:pointer;
            font-weight:700;
            color:var(--text);
        }
        .faq-item summary::-webkit-details-marker{
            display:none;
        }
        .faq-item summary::after{
            content:"+";
            flex:0 0 auto;
            width:28px;
            height:28px;
            border-radius:999px;
            display:grid;
            place-items:center;
            background:rgba(184,79,97,.10);
            color:var(--accent-3);
            font-size:1rem;
            transition:transform var(--transition), background var(--transition);
        }
        .faq-item[open] summary::after{
            content:"–";
            background:rgba(211,155,69,.16);
        }
        .faq-item summary:hover::after{
            transform:scale(1.04);
        }
        .faq-item summary:focus-visible{
            outline:3px solid rgba(211,155,69,.42);
            outline-offset:3px;
            border-radius:18px;
        }
        .faq-answer{
            padding:0 18px 18px;
            color:var(--text-weak);
            line-height:1.75;
        }

        .cta{
            padding:22px 0 36px;
        }
        .cta-shell{
            overflow:hidden;
            border-radius:var(--radius-lg);
            background:
                linear-gradient(135deg, rgba(37,25,30,.96), rgba(19,17,22,.98)),
                url('/assets/images/coverpic/cover-4.webp') center/cover no-repeat;
            border:1px solid rgba(255,255,255,.10);
            box-shadow:var(--shadow-strong);
            color:var(--text-light);
            position:relative;
        }
        .cta-shell::before{
            content:"";
            position:absolute;
            inset:0;
            background:radial-gradient(600px 240px at 10% 20%, rgba(184,79,97,.20), transparent 60%);
            pointer-events:none;
        }
        .cta-inner{
            position:relative;
            padding:34px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
        }
        .cta h2{
            margin:0 0 10px;
            font-size:clamp(1.6rem, 3vw, 2.3rem);
            line-height:1.15;
            letter-spacing:-.03em;
        }
        .cta p{
            margin:0;
            color:rgba(255,250,243,.82);
            max-width:54ch;
        }
        .cta-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            justify-content:flex-end;
        }

        .site-footer{
            padding:0 0 28px;
        }
        .footer-card{
            padding:26px 26px 22px;
            border-radius:28px;
            background:rgba(246,239,232,.96);
            border:1px solid rgba(255,255,255,.62);
            box-shadow:var(--shadow);
        }
        .footer-top{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:20px;
            padding-bottom:18px;
            border-bottom:1px solid rgba(34,29,26,.10);
        }
        .footer-brand{
            max-width:38rem;
        }
        .footer-brand .brand{
            color:var(--text);
        }
        .footer-brand p{
            margin:12px 0 0;
            color:var(--text-weak);
        }
        .footer-links{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            justify-content:flex-end;
        }
        .footer-links a{
            display:inline-flex;
            min-height:40px;
            align-items:center;
            padding:0 14px;
            border-radius:999px;
            border:1px solid rgba(34,29,26,.10);
            background:rgba(255,255,255,.50);
            color:var(--text);
            transition:transform var(--transition), border-color var(--transition), background var(--transition);
        }
        .footer-links a:hover{
            transform:translateY(-1px);
            border-color:rgba(184,79,97,.18);
            background:rgba(255,255,255,.82);
        }
        .footer-bottom{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            flex-wrap:wrap;
            margin-top:16px;
            color:var(--text-weak);
            font-size:.92rem;
        }
        .footer-bottom a{
            color:var(--accent-3);
            font-weight:700;
        }

        .sr-only{
            position:absolute;
            width:1px;
            height:1px;
            padding:0;
            margin:-1px;
            overflow:hidden;
            clip:rect(0,0,0,0);
            white-space:nowrap;
            border:0;
        }

        @media (max-width: 1100px){
            .hero-inner{
                grid-template-columns:1fr;
                min-height:auto;
            }
            .hero h1{
                max-width:none;
            }
            .floating-note{
                grid-template-columns:repeat(3, 1fr);
            }
            .featured-wrap,
            .guide-grid{
                grid-template-columns:1fr;
            }
        }

        @media (max-width: 900px){
            .quick-grid{
                grid-template-columns:repeat(2,1fr);
            }
            .post-grid{
                grid-template-columns:1fr;
            }
            .footer-top,
            .cta-inner{
                flex-direction:column;
                align-items:flex-start;
            }
            .cta-actions{
                justify-content:flex-start;
            }
            .hero-inner{
                padding:28px;
            }
            .hero-visual{
                min-height:300px;
            }
            .nav-toggle{
                display:inline-flex;
            }
            .site-nav{
                position:absolute;
                left:16px;
                right:16px;
                top:78px;
                padding:14px;
                border-radius:24px;
                background:rgba(17,16,20,.94);
                border:1px solid rgba(255,255,255,.10);
                box-shadow:var(--shadow-strong);
                opacity:0;
                pointer-events:none;
                transform:translateY(-8px);
                transition:opacity var(--transition), transform var(--transition);
            }
            .site-nav.is-open{
                opacity:1;
                pointer-events:auto;
                transform:translateY(0);
            }
            .nav-list{
                width:100%;
                flex-direction:column;
                align-items:stretch;
            }
            .nav-list a{
                justify-content:flex-start;
                width:100%;
                min-height:46px;
                padding:0 16px;
            }
        }

        @media (max-width: 720px){
            .section{
                padding:18px 0;
            }
            .section-card,
            .latest-card,
            .guide-panel,
            .faq-wrap,
            .footer-card{
                border-radius:24px;
            }
            .hero{
                padding-top:18px;
            }
            .hero-inner{
                gap:22px;
                padding:22px;
            }
            .hero-copy{
                font-size:1rem;
            }
            .hero-visual-thumb{
                flex-basis:88px;
                height:82px;
            }
            .hero-visual-card{
                flex-direction:column;
                align-items:flex-start;
            }
            .floating-note{
                grid-template-columns:1fr;
            }
            .mini-card{
                grid-template-columns:1fr;
            }
            .mini-thumb{
                min-height:180px;
            }
            .mini-copy{
                padding:0 18px 18px;
            }
            .latest-card,
            .guide-panel,
            .faq-wrap{
                padding:22px;
            }
            .section-head,
            .latest-head{
                align-items:flex-start;
                flex-direction:column;
            }
            .section-link{
                align-self:flex-start;
            }
        }

        @media (max-width: 520px){
            .container{
                width:min(100% - 22px, var(--container));
            }
            .header-inner{
                min-height:72px;
            }
            .brand-text{
                font-size:.98rem;
            }
            .nav-list a{
                min-height:44px;
            }
            .quick-grid{
                grid-template-columns:1fr;
            }
            .btn{
                width:100%;
            }
            .hero-actions{
                flex-direction:column;
            }
            .hero h1{
                font-size:clamp(2.05rem, 12vw, 3rem);
            }
            .hero-visual{
                min-height:280px;
            }
            .hero-visual-thumb{
                width:100%;
                flex-basis:auto;
            }
            .hero-visual-card{
                inset:auto 12px 12px 12px;
            }
            .quick-card,
            .post-card,
            .step,
            .faq-item summary{
                border-radius:20px;
            }
            .cta-inner{
                padding:24px;
            }
            .footer-links{
                justify-content:flex-start;
            }
        }

        @media (prefers-reduced-motion: reduce){
            html{
                scroll-behavior:auto;
            }
            *,
            *::before,
            *::after{
                animation-duration:.01ms !important;
                animation-iteration-count:1 !important;
                transition-duration:.01ms !important;
                scroll-behavior:auto !important;
            }
        }

/* roulang page: article */
:root{
            --bg: #111014;
            --bg-2: #17151a;
            --panel: #f6efe8;
            --panel-2: #ede3d9;
            --panel-3: #e3d7cb;
            --text: #221d1a;
            --text-weak: #6f6259;
            --text-light: #faf5ef;
            --line: rgba(34, 29, 26, .12);
            --line-strong: rgba(34, 29, 26, .18);
            --accent: #b84f61;
            --accent-2: #d39b45;
            --accent-3: #7b3848;
            --success: #7a9a64;
            --shadow: 0 18px 40px rgba(24, 16, 12, .12);
            --shadow-strong: 0 24px 56px rgba(24, 16, 12, .18);
            --radius: 24px;
            --radius-sm: 16px;
            --radius-lg: 32px;
            --container: 1180px;
            --space-1: 6px;
            --space-2: 10px;
            --space-3: 14px;
            --space-4: 18px;
            --space-5: 24px;
            --space-6: 32px;
            --space-7: 42px;
            --space-8: 56px;
            --space-9: 72px;
            --space-10: 96px;
            --transition: 220ms cubic-bezier(.2,.8,.2,1);
        }

        html{
            scroll-behavior:smooth;
        }

        *{
            box-sizing:border-box;
        }

        body{
            margin:0;
            font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;
            color:var(--text);
            background:
                radial-gradient(1200px 700px at 20% -10%, rgba(184,79,97,.18), transparent 60%),
                radial-gradient(900px 500px at 90% 8%, rgba(211,155,69,.12), transparent 55%),
                linear-gradient(180deg, #1a171d 0%, #121015 28%, #121015 100%);
            line-height:1.7;
            -webkit-font-smoothing:antialiased;
            text-rendering:optimizeLegibility;
        }

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

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

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

        button,
        input,
        textarea{
            font:inherit;
        }

        button{
            border:0;
            background:none;
            padding:0;
            cursor:pointer;
        }

        :focus-visible{
            outline:3px solid rgba(211,155,69,.5);
            outline-offset:3px;
        }

        .container{
            width:min(100% - 32px, var(--container));
            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;
            z-index:1000;
            padding:10px 14px;
            border-radius:999px;
            background:#fff;
            color:#111;
            box-shadow:var(--shadow);
        }

        .site-header{
            position:sticky;
            top:0;
            z-index:100;
            backdrop-filter:saturate(120%) blur(18px);
            background:rgba(17,16,20,.78);
            border-bottom:1px solid rgba(255,255,255,.08);
        }

        .header-inner{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
            min-height:78px;
            padding:12px 0;
        }

        .brand{
            display:inline-flex;
            align-items:center;
            gap:12px;
            color:var(--text-light);
            font-weight:800;
            letter-spacing:.02em;
            min-width:max-content;
        }

        .brand-badge{
            display:inline-grid;
            place-items:center;
            width:38px;
            height:38px;
            border-radius:14px;
            color:#1f1714;
            background:linear-gradient(145deg, #f7d79d, #d39b45);
            box-shadow:0 10px 24px rgba(211,155,69,.28);
            font-size:.95rem;
            font-weight:900;
            flex:0 0 auto;
        }

        .brand-text{
            font-size:1.02rem;
            line-height:1.1;
        }

        .nav-toggle{
            display:none;
            align-items:center;
            justify-content:center;
            width:46px;
            height:46px;
            border-radius:14px;
            border:1px solid rgba(255,255,255,.12);
            color:var(--text-light);
            background:rgba(255,255,255,.04);
            transition:transform var(--transition), background var(--transition), border-color var(--transition);
        }

        .nav-toggle:hover{
            transform:translateY(-1px);
            background:rgba(255,255,255,.08);
            border-color:rgba(255,255,255,.18);
        }

        .nav-toggle:focus-visible{
            outline:3px solid rgba(211,155,69,.45);
            outline-offset:3px;
        }

        .nav-toggle span{
            display:block;
            width:20px;
            height:2px;
            background:currentColor;
            border-radius:999px;
            position:relative;
        }

        .nav-toggle span::before,
        .nav-toggle span::after{
            content:"";
            position:absolute;
            left:0;
            width:20px;
            height:2px;
            background:currentColor;
            border-radius:999px;
            transition:transform var(--transition), top var(--transition), opacity var(--transition);
        }

        .nav-toggle span::before{top:-7px}
        .nav-toggle span::after{top:7px}

        .site-nav{
            display:flex;
            align-items:center;
            gap:10px;
        }

        .nav-list{
            display:flex;
            align-items:center;
            gap:8px;
            padding:0;
            margin:0;
            list-style:none;
        }

        .nav-list a{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:42px;
            padding:0 16px;
            border-radius:999px;
            color:rgba(250,245,239,.82);
            border:1px solid transparent;
            transition:transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
        }

        .nav-list a:hover{
            transform:translateY(-1px);
            background:rgba(255,255,255,.07);
            border-color:rgba(255,255,255,.12);
            color:#fff;
        }

        .nav-list a.is-active{
            background:linear-gradient(145deg, rgba(184,79,97,.24), rgba(211,155,69,.16));
            color:#fff;
            border-color:rgba(255,255,255,.16);
            box-shadow:0 10px 24px rgba(0,0,0,.18);
        }

        main.page-main{
            padding:32px 0 72px;
        }

        .article-hero{
            padding:28px 0 24px;
        }

        .article-shell{
            position:relative;
            overflow:hidden;
            border-radius:var(--radius-lg);
            border:1px solid rgba(255,255,255,.08);
            background:
                linear-gradient(135deg, rgba(23,21,26,.95), rgba(18,16,21,.9)),
                url('/assets/images/backpic/back-2.jpg') center/cover no-repeat;
            box-shadow:var(--shadow-strong);
            display:grid;
            grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);
            gap:24px;
            padding:28px;
            isolation:isolate;
        }

        .article-shell::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(800px 280px at 8% 0%, rgba(184,79,97,.22), transparent 70%),
                radial-gradient(640px 260px at 94% 18%, rgba(211,155,69,.16), transparent 72%),
                linear-gradient(180deg, rgba(17,16,20,.16), rgba(17,16,20,.6));
            pointer-events:none;
            z-index:0;
        }

        .hero-copy,
        .hero-visual{
            position:relative;
            z-index:1;
        }

        .hero-copy{
            display:flex;
            flex-direction:column;
            gap:16px;
            padding:4px 2px 4px 0;
        }

        .breadcrumbs{
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            gap:8px;
            color:rgba(250,245,239,.68);
            font-size:.95rem;
        }

        .breadcrumbs a{
            color:rgba(250,245,239,.82);
            transition:color var(--transition), opacity var(--transition);
        }

        .breadcrumbs a:hover{
            color:#fff;
        }

        .section-kicker{
            display:inline-flex;
            align-items:center;
            gap:8px;
            width:max-content;
            padding:7px 12px;
            border-radius:999px;
            background:rgba(255,255,255,.08);
            color:rgba(250,245,239,.88);
            border:1px solid rgba(255,255,255,.12);
            font-size:.92rem;
            letter-spacing:.02em;
        }

        .article-title{
            margin:0;
            color:var(--text-light);
            font-size:clamp(2rem, 4vw, 3.7rem);
            line-height:1.06;
            letter-spacing:-.04em;
            max-width:13.5em;
        }

        .article-summary{
            margin:0;
            color:rgba(250,245,239,.82);
            max-width:62ch;
            font-size:1.03rem;
        }

        .meta-row{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
        }

        .meta-chip{
            display:inline-flex;
            align-items:center;
            min-height:38px;
            padding:0 14px;
            border-radius:999px;
            background:rgba(255,255,255,.08);
            color:rgba(250,245,239,.9);
            border:1px solid rgba(255,255,255,.12);
            font-size:.94rem;
            letter-spacing:.01em;
        }

        .hero-actions,
        .cta-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
        }

        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:46px;
            padding:0 18px;
            border-radius:999px;
            border:1px solid transparent;
            font-weight:700;
            transition:transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition), color var(--transition), opacity var(--transition);
            user-select:none;
        }

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

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

        .btn-primary{
            background:linear-gradient(145deg, var(--accent), var(--accent-3));
            color:#fff;
            box-shadow:0 14px 28px rgba(184,79,97,.24);
        }

        .btn-primary:hover{
            box-shadow:0 18px 34px rgba(184,79,97,.28);
            color:#fff;
        }

        .btn-secondary{
            background:rgba(255,255,255,.06);
            color:var(--text-light);
            border-color:rgba(255,255,255,.14);
        }

        .btn-secondary:hover{
            background:rgba(255,255,255,.1);
            border-color:rgba(255,255,255,.22);
            color:#fff;
        }

        .btn-light{
            background:#fff;
            color:var(--text);
            border-color:rgba(34,29,26,.08);
            box-shadow:var(--shadow);
        }

        .btn-light:hover{
            color:var(--text);
            border-color:rgba(34,29,26,.14);
            box-shadow:var(--shadow-strong);
        }

        .hero-visual{
            display:flex;
            align-items:stretch;
        }

        .visual-frame{
            position:relative;
            width:100%;
            min-height:340px;
            border-radius:calc(var(--radius-lg) - 4px);
            overflow:hidden;
            background:#0e0d10;
            box-shadow:var(--shadow);
            border:1px solid rgba(255,255,255,.08);
        }

        .visual-frame img{
            width:100%;
            height:100%;
            object-fit:cover;
            filter:saturate(.96) contrast(1.03);
            transform:scale(1.01);
        }

        .visual-frame::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, rgba(17,16,20,.04), rgba(17,16,20,.66));
            pointer-events:none;
        }

        .visual-card{
            position:absolute;
            left:18px;
            right:18px;
            bottom:18px;
            z-index:2;
            padding:16px 18px;
            border-radius:20px;
            background:rgba(17,16,20,.72);
            backdrop-filter:blur(14px);
            border:1px solid rgba(255,255,255,.12);
            color:var(--text-light);
            box-shadow:0 14px 28px rgba(0,0,0,.18);
        }

        .visual-card strong{
            display:block;
            font-size:1rem;
            line-height:1.3;
            margin-bottom:4px;
        }

        .visual-card span{
            display:block;
            color:rgba(250,245,239,.72);
            font-size:.92rem;
        }

        .content-zone{
            padding-top:8px;
        }

        .content-grid{
            display:grid;
            grid-template-columns:minmax(0,1fr) 320px;
            gap:24px;
            align-items:start;
        }

        .article-card,
        .info-card,
        .related-card,
        .cta-panel,
        .empty-state{
            background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
            border:1px solid var(--line);
            border-radius:var(--radius);
            box-shadow:var(--shadow);
        }

        .article-card{
            padding:28px;
        }

        .article-topline{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            margin-bottom:18px;
            padding-bottom:16px;
            border-bottom:1px solid var(--line);
        }

        .tag{
            display:inline-flex;
            align-items:center;
            gap:8px;
            min-height:34px;
            padding:0 12px;
            border-radius:999px;
            background:rgba(184,79,97,.1);
            color:var(--accent-3);
            border:1px solid rgba(184,79,97,.16);
            font-size:.92rem;
            font-weight:700;
        }

        .top-meta{
            color:var(--text-weak);
            font-size:.95rem;
        }

        .article-content{
            font-size:1.04rem;
            color:var(--text);
        }

        .article-content > *:first-child{
            margin-top:0;
        }

        .article-content > *:last-child{
            margin-bottom:0;
        }

        .article-content h2,
        .article-content h3,
        .article-content h4{
            margin:2em 0 .8em;
            line-height:1.22;
            letter-spacing:-.02em;
            color:var(--text);
        }

        .article-content h2{
            font-size:1.55rem;
        }

        .article-content h3{
            font-size:1.22rem;
        }

        .article-content h4{
            font-size:1.08rem;
        }

        .article-content p{
            margin:0 0 1em;
        }

        .article-content a{
            color:var(--accent-3);
            text-decoration:underline;
            text-underline-offset:2px;
            transition:opacity var(--transition);
        }

        .article-content a:hover{
            opacity:.82;
        }

        .article-content ul,
        .article-content ol{
            padding-left:1.25em;
            margin:0 0 1.2em;
        }

        .article-content li{
            margin:.45em 0;
        }

        .article-content blockquote{
            margin:24px 0;
            padding:18px 20px;
            border-left:4px solid var(--accent);
            background:rgba(184,79,97,.08);
            border-radius:18px;
            color:var(--text);
        }

        .article-content img{
            border-radius:22px;
            margin:22px 0;
            box-shadow:var(--shadow);
        }

        .article-content hr{
            border:0;
            border-top:1px solid var(--line);
            margin:28px 0;
        }

        .article-content table{
            width:100%;
            border-collapse:collapse;
            margin:22px 0;
            overflow:hidden;
            border-radius:18px;
            display:block;
            overflow-x:auto;
        }

        .article-content th,
        .article-content td{
            border:1px solid var(--line);
            padding:12px 14px;
            text-align:left;
            background:rgba(255,255,255,.22);
            white-space:nowrap;
        }

        .article-content th{
            background:rgba(255,255,255,.34);
            font-weight:800;
        }

        .aside-stack{
            display:grid;
            gap:18px;
            position:sticky;
            top:96px;
        }

        .info-card{
            padding:22px;
        }

        .info-card h2{
            margin:0 0 14px;
            font-size:1.1rem;
            letter-spacing:-.01em;
        }

        .bullet-list{
            list-style:none;
            padding:0;
            margin:0;
            display:grid;
            gap:12px;
        }

        .bullet-list li{
            display:flex;
            gap:12px;
            align-items:flex-start;
            padding:12px 0;
            border-top:1px solid var(--line);
        }

        .bullet-list li:first-child{
            border-top:0;
            padding-top:0;
        }

        .bullet-list span{
            display:inline-grid;
            place-items:center;
            min-width:34px;
            height:34px;
            border-radius:12px;
            background:rgba(211,155,69,.14);
            color:var(--accent-3);
            font-weight:800;
            flex:0 0 auto;
        }

        .bullet-list strong{
            display:block;
            line-height:1.5;
        }

        .info-dl{
            display:grid;
            gap:12px;
            margin:0;
        }

        .info-dl > div{
            display:flex;
            justify-content:space-between;
            gap:14px;
            padding:12px 0;
            border-top:1px solid var(--line);
        }

        .info-dl > div:first-child{
            border-top:0;
            padding-top:0;
        }

        .info-dl dt{
            color:var(--text-weak);
            flex:0 0 auto;
        }

        .info-dl dd{
            margin:0;
            font-weight:700;
            text-align:right;
        }

        .info-dl a{
            color:var(--accent-3);
            text-decoration:underline;
            text-underline-offset:2px;
        }

        .callout-card{
            background:
                linear-gradient(145deg, rgba(184,79,97,.08), rgba(211,155,69,.08)),
                linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
        }

        .callout-card p{
            margin:0 0 16px;
            color:var(--text-weak);
        }

        .section-block{
            padding-top:30px;
        }

        .section-head{
            display:flex;
            justify-content:space-between;
            align-items:flex-end;
            gap:20px;
            margin:0 0 18px;
        }

        .section-head h2{
            margin:0;
            font-size:1.45rem;
            letter-spacing:-.02em;
            color:var(--text-light);
        }

        .section-head p{
            margin:0;
            color:rgba(250,245,239,.7);
            max-width:58ch;
        }

        .section-head.light h2{
            color:var(--text);
        }

        .section-head.light p{
            color:var(--text-weak);
        }

        .related-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0, 1fr));
            gap:18px;
        }

        .related-card{
            overflow:hidden;
            display:flex;
            flex-direction:column;
            min-height:100%;
        }

        .related-thumb{
            position:relative;
            aspect-ratio:16/9;
            overflow:hidden;
            background:#0f0e11;
        }

        .related-thumb img{
            width:100%;
            height:100%;
            object-fit:cover;
            transition:transform var(--transition);
        }

        .related-card:hover .related-thumb img{
            transform:scale(1.03);
        }

        .related-body{
            padding:18px;
            display:flex;
            flex-direction:column;
            gap:10px;
        }

        .related-body .meta-row{
            margin-bottom:2px;
        }

        .related-body h3{
            margin:0;
            font-size:1.06rem;
            line-height:1.35;
            color:var(--text);
        }

        .related-body p{
            margin:0;
            color:var(--text-weak);
        }

        .link-line{
            display:inline-flex;
            align-items:center;
            gap:8px;
            font-weight:700;
            color:var(--accent-3);
        }

        .faq-list{
            display:grid;
            gap:12px;
        }

        .faq-item{
            border:1px solid var(--line);
            border-radius:var(--radius);
            overflow:hidden;
            background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
            box-shadow:var(--shadow);
        }

        .faq-item summary{
            list-style:none;
            cursor:pointer;
            padding:18px 22px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            font-weight:800;
            color:var(--text);
        }

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

        .faq-item summary::after{
            content:"+";
            color:var(--accent-3);
            font-weight:900;
            font-size:1.4rem;
            line-height:1;
            flex:0 0 auto;
        }

        .faq-item[open] summary::after{
            content:"–";
        }

        .faq-body{
            padding:0 22px 18px;
            color:var(--text-weak);
        }

        .faq-body p{
            margin:0;
        }

        .cta-panel{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:24px;
            padding:24px 26px;
            background:
                linear-gradient(145deg, rgba(184,79,97,.1), rgba(211,155,69,.1)),
                linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
        }

        .cta-panel h2{
            margin:0 0 8px;
            font-size:1.4rem;
            color:var(--text);
        }

        .cta-panel p{
            margin:0;
            color:var(--text-weak);
            max-width:60ch;
        }

        .empty-state{
            text-align:center;
            padding:54px 28px;
        }

        .empty-state h1{
            margin:12px 0 10px;
            font-size:clamp(1.9rem,4vw,2.8rem);
            letter-spacing:-.03em;
            color:var(--text);
        }

        .empty-state p{
            margin:0 auto 20px;
            max-width:52ch;
            color:var(--text-weak);
        }

        .site-footer{
            padding:38px 0 48px;
        }

        .footer-card{
            padding:24px 26px;
            border-radius:var(--radius-lg);
            border:1px solid rgba(255,255,255,.08);
            background:rgba(23,21,26,.84);
            color:rgba(250,245,239,.9);
            box-shadow:var(--shadow);
        }

        .footer-top{
            display:flex;
            justify-content:space-between;
            gap:24px;
            align-items:flex-start;
        }

        .footer-brand{
            max-width:56ch;
        }

        .footer-brand .brand{
            margin-bottom:12px;
        }

        .footer-brand p{
            margin:0;
            color:rgba(250,245,239,.68);
        }

        .footer-links{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            justify-content:flex-end;
        }

        .footer-links a{
            display:inline-flex;
            align-items:center;
            min-height:40px;
            padding:0 14px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.12);
            color:rgba(250,245,239,.84);
            transition:transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
        }

        .footer-links a:hover{
            transform:translateY(-1px);
            background:rgba(255,255,255,.08);
            border-color:rgba(255,255,255,.2);
            color:#fff;
        }

        .footer-bottom{
            margin-top:18px;
            padding-top:18px;
            border-top:1px solid rgba(255,255,255,.08);
            display:flex;
            justify-content:space-between;
            gap:12px;
            flex-wrap:wrap;
            color:rgba(250,245,239,.62);
            font-size:.95rem;
        }

        @media (max-width: 1024px){
            .article-shell,
            .content-grid{
                grid-template-columns:1fr;
            }

            .aside-stack{
                position:static;
                top:auto;
            }

            .visual-frame{
                min-height:280px;
            }

            .article-title{
                max-width:none;
            }
        }

        @media (max-width: 860px){
            .nav-toggle{
                display:inline-flex;
            }

            .site-nav{
                position:absolute;
                top:calc(100% + 1px);
                left:0;
                right:0;
                padding:0 16px 16px;
                display:none;
                background:rgba(17,16,20,.96);
                border-bottom:1px solid rgba(255,255,255,.08);
                backdrop-filter:saturate(120%) blur(18px);
            }

            .site-nav.is-open{
                display:block;
            }

            .nav-list{
                flex-direction:column;
                align-items:stretch;
                padding-top:10px;
            }

            .nav-list a{
                width:100%;
                justify-content:flex-start;
                padding:0 18px;
                background:rgba(255,255,255,.04);
            }

            .header-inner{
                position:relative;
            }

            .hero-actions,
            .cta-actions,
            .footer-top,
            .footer-bottom,
            .section-head{
                flex-direction:column;
                align-items:flex-start;
            }

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

            .section-head{
                align-items:flex-start;
            }

            .footer-links{
                justify-content:flex-start;
            }
        }

        @media (max-width: 768px){
            main.page-main{
                padding:24px 0 64px;
            }

            .article-hero{
                padding:22px 0 18px;
            }

            .article-shell,
            .cta-panel,
            .footer-card,
            .article-card,
            .info-card,
            .empty-state{
                padding:20px;
            }

            .article-title{
                font-size:clamp(1.8rem, 8vw, 2.6rem);
            }

            .article-summary{
                font-size:1rem;
            }

            .visual-frame{
                min-height:240px;
            }

            .breadcrumbs{
                font-size:.92rem;
            }

            .article-topline{
                flex-direction:column;
                align-items:flex-start;
            }

            .cta-panel{
                align-items:flex-start;
            }
        }

        @media (max-width: 520px){
            .container{
                width:min(100% - 24px, var(--container));
            }

            .header-inner{
                min-height:70px;
            }

            .brand-text{
                font-size:.98rem;
            }

            .section-kicker,
            .meta-chip,
            .tag{
                font-size:.88rem;
            }

            .meta-row{
                gap:8px;
            }

            .meta-chip{
                padding:0 10px;
                min-height:34px;
            }

            .btn{
                width:100%;
            }

            .hero-actions,
            .cta-actions{
                width:100%;
            }

            .hero-actions .btn,
            .cta-actions .btn{
                width:100%;
            }

            .article-content{
                font-size:1rem;
            }

            .article-content img{
                border-radius:16px;
            }

            .faq-item summary{
                padding:16px;
            }

            .faq-body{
                padding:0 16px 16px;
            }

            .footer-card{
                padding:18px;
            }

            .footer-bottom{
                font-size:.92rem;
            }
        }

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