/* roulang page: index */
:root{
            --bg:#0f0a0c;
            --bg-2:#140f11;
            --panel:#171114;
            --panel-2:#1c1418;
            --line:rgba(255,255,255,.10);
            --line-2:rgba(255,255,255,.16);
            --text:#f6efe9;
            --muted:#b8a9a2;
            --soft:#8f8179;
            --accent:#8d2439;
            --accent-2:#c08a4b;
            --accent-3:#e0c27d;
            --shadow:0 16px 32px rgba(0,0,0,.28);
            --shadow-soft:0 8px 18px rgba(0,0,0,.18);
            --radius-sm:12px;
            --radius-md:16px;
            --radius-lg:22px;
            --radius-xl:28px;
            --container:1320px;
            --ease:cubic-bezier(.2,.8,.2,1);
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--text);
            background:
                radial-gradient(1200px 700px at 12% 0%, rgba(141,36,57,.18), transparent 50%),
                radial-gradient(900px 600px at 85% 10%, rgba(192,138,75,.10), transparent 45%),
                linear-gradient(180deg, #110c0e 0%, #0e090b 100%);
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
            line-height:1.8;
            text-rendering:optimizeLegibility;
            -webkit-font-smoothing:antialiased;
            overflow-x:hidden;
        }
        ::selection{background:rgba(192,138,75,.28);color:#fff}
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%;height:auto}
        button,input{font:inherit}
        button{cursor:pointer}
        .sr-only{
            position:absolute!important;
            width:1px;height:1px;
            padding:0;margin:-1px;
            overflow:hidden;clip:rect(0,0,0,0);
            white-space:nowrap;border:0;
        }
        .container{
            width:min(var(--container), calc(100% - 32px));
            margin:0 auto;
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:60;
            background:rgba(14,9,11,.95);
            border-bottom:1px solid rgba(255,255,255,.08);
        }
        .nav-inner{
            min-height:76px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            position:relative;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:12px;
            min-width:0;
            font-weight:800;
            letter-spacing:.02em;
            color:var(--text);
            flex:0 0 auto;
        }
        .brand-mark{
            width:42px;height:42px;
            border-radius:14px;
            background:
                radial-gradient(12px 12px at 30% 30%, rgba(255,255,255,.22), transparent 65%),
                linear-gradient(145deg, #7f2035 0%, #b3493d 45%, #c38b4b 100%);
            box-shadow:0 10px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.18);
            position:relative;
            flex:0 0 auto;
        }
        .brand-mark::before,
        .brand-mark::after{
            content:"";
            position:absolute;
            inset:10px 12px;
            border-radius:10px;
            border:1px solid rgba(255,255,255,.26);
        }
        .brand-mark::after{
            inset:15px 16px;
            border-radius:8px;
            border-color:rgba(255,255,255,.18);
        }
        .brand-text{
            min-width:0;
            display:flex;
            flex-direction:column;
            line-height:1.15;
        }
        .brand-text strong{
            font-size:1.02rem;
        }
        .brand-text span{
            font-size:.82rem;
            color:var(--muted);
            margin-top:4px;
        }
        .site-nav{
            display:flex;
            align-items:center;
            margin-left:auto;
        }
        .nav-menu{
            display:flex;
            align-items:center;
            gap:10px;
        }
        .nav-link,
        .nav-chip,
        .nav-button{
            min-height:42px;
            padding:0 14px;
            border-radius:999px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            border:1px solid transparent;
            transition:transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
            white-space:nowrap;
        }
        .nav-link{
            color:var(--muted);
            background:transparent;
        }
        .nav-link:hover,
        .nav-link:focus-visible{
            color:var(--text);
            background:rgba(255,255,255,.05);
            border-color:rgba(255,255,255,.08);
            outline:none;
        }
        .nav-link.active{
            color:var(--text);
            background:rgba(141,36,57,.14);
            border-color:rgba(141,36,57,.38);
            box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
        }
        .nav-chip{
            color:#f2d5ad;
            background:rgba(192,138,75,.12);
            border-color:rgba(192,138,75,.22);
            font-size:.92rem;
        }
        .nav-button{
            color:var(--text);
            background:rgba(255,255,255,.05);
            border-color:rgba(255,255,255,.09);
        }
        .nav-button:hover,
        .nav-button:focus-visible{
            background:rgba(255,255,255,.08);
            border-color:rgba(255,255,255,.16);
            outline:none;
        }
        .nav-toggle{
            display:none;
            width:46px;height:46px;
            border-radius:14px;
            background:rgba(255,255,255,.05);
            border:1px solid rgba(255,255,255,.10);
            color:var(--text);
            align-items:center;
            justify-content:center;
            padding:0;
        }
        .nav-toggle .bars{
            width:18px;height:12px;
            position:relative;
            display:inline-block;
        }
        .nav-toggle .bars::before,
        .nav-toggle .bars::after,
        .nav-toggle .bars span{
            content:"";
            position:absolute;
            left:0;
            right:0;
            height:2px;
            border-radius:999px;
            background:currentColor;
            transition:transform .18s var(--ease), top .18s var(--ease), bottom .18s var(--ease), opacity .18s var(--ease);
        }
        .nav-toggle .bars::before{top:0}
        .nav-toggle .bars span{top:5px}
        .nav-toggle .bars::after{bottom:0}
        .site-header.nav-open .nav-toggle .bars::before{top:5px;transform:rotate(45deg)}
        .site-header.nav-open .nav-toggle .bars span{opacity:0}
        .site-header.nav-open .nav-toggle .bars::after{bottom:5px;transform:rotate(-45deg)}
        .hero{
            position:relative;
            overflow:hidden;
            padding:42px 0 26px;
        }
        .hero::before{
            content:"";
            position:absolute;
            inset:0;
            background-image:url('/assets/images/backpic/back-1.jpg');
            background-size:cover;
            background-position:center;
            opacity:.14;
            filter:saturate(.92) contrast(1.06);
            pointer-events:none;
        }
        .hero::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, rgba(10,7,8,.18), rgba(10,7,8,.68));
            pointer-events:none;
        }
        .hero .container{
            position:relative;
            z-index:1;
        }
        .hero-grid{
            display:grid;
            grid-template-columns:1.05fr .95fr;
            gap:28px;
            align-items:stretch;
        }
        .hero-copy{
            padding:18px 0 8px;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            min-height:34px;
            padding:0 12px;
            border-radius:999px;
            background:rgba(255,255,255,.06);
            border:1px solid rgba(255,255,255,.09);
            color:#f5ddc4;
            font-size:.92rem;
            letter-spacing:.04em;
        }
        .eyebrow::before{
            content:"";
            width:8px;height:8px;
            border-radius:999px;
            background:var(--accent-2);
            box-shadow:0 0 0 4px rgba(192,138,75,.14);
        }
        .hero h1{
            margin:18px 0 14px;
            font-size:clamp(2.2rem, 4.8vw, 4.35rem);
            line-height:1.05;
            letter-spacing:-.03em;
        }
        .hero p{
            margin:0;
            max-width:60ch;
            color:var(--muted);
            font-size:1.03rem;
        }
        .hero-actions{
            display:flex;
            gap:12px;
            flex-wrap:wrap;
            margin-top:24px;
        }
        .btn{
            min-height:48px;
            padding:0 18px;
            border-radius:14px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            font-weight:700;
            border:1px solid transparent;
            transition:transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
            user-select:none;
        }
        .btn:hover{transform:translateY(-1px)}
        .btn:active{transform:translateY(0) scale(.99)}
        .btn:focus-visible{
            outline:2px solid rgba(224,194,125,.75);
            outline-offset:3px;
        }
        .btn-primary{
            color:#fff;
            background:linear-gradient(135deg, #8e2438 0%, #b8463c 58%, #c48a4b 100%);
            box-shadow:0 12px 22px rgba(141,36,57,.20);
        }
        .btn-primary:hover{box-shadow:0 16px 28px rgba(141,36,57,.28)}
        .btn-secondary{
            color:var(--text);
            background:rgba(255,255,255,.05);
            border-color:rgba(255,255,255,.10);
        }
        .btn-secondary:hover{
            background:rgba(255,255,255,.08);
            border-color:rgba(255,255,255,.16);
        }
        .search-bar{
            display:flex;
            gap:10px;
            max-width:660px;
            margin-top:20px;
            align-items:center;
        }
        .search-input{
            flex:1;
            min-width:0;
            min-height:50px;
            border-radius:16px;
            border:1px solid rgba(255,255,255,.10);
            background:rgba(20,15,17,.95);
            color:var(--text);
            padding:0 16px;
            box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
            transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
        }
        .search-input::placeholder{color:#8f8179}
        .search-input:focus{
            outline:none;
            border-color:rgba(192,138,75,.45);
            box-shadow:0 0 0 4px rgba(192,138,75,.10);
            background:#171114;
        }
        .search-btn{
            min-width:132px;
        }
        .hero-meta{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:18px;
        }
        .pill{
            display:inline-flex;
            align-items:center;
            gap:8px;
            min-height:36px;
            padding:0 12px;
            border-radius:999px;
            background:rgba(255,255,255,.05);
            border:1px solid rgba(255,255,255,.08);
            color:var(--muted);
            font-size:.94rem;
        }
        .pill strong{color:var(--text)}
        .hero-visual{
            display:grid;
            grid-template-columns:1.18fr .82fr;
            gap:14px;
            align-items:stretch;
        }
        .poster,
        .thumb{
            position:relative;
            overflow:hidden;
            border-radius:var(--radius-xl);
            border:1px solid rgba(255,255,255,.10);
            background:var(--panel);
            box-shadow:var(--shadow);
            transform:translateZ(0);
        }
        .poster{
            min-height:100%;
        }
        .poster img,
        .thumb img{
            width:100%;
            height:100%;
            object-fit:cover;
            transition:transform .45s var(--ease), filter .45s var(--ease);
            filter:saturate(.92) contrast(1.04);
        }
        .poster::after,
        .thumb::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, rgba(9,6,7,.08), rgba(9,6,7,.76));
            pointer-events:none;
        }
        .poster:hover img,
        .thumb:hover img{transform:scale(1.03)}
        .poster-content{
            position:absolute;
            inset:auto 18px 18px 18px;
            z-index:1;
        }
        .poster-content .poster-tag{
            display:inline-flex;
            align-items:center;
            gap:8px;
            min-height:32px;
            padding:0 12px;
            border-radius:999px;
            background:rgba(141,36,57,.16);
            border:1px solid rgba(141,36,57,.34);
            color:#f4d8d2;
            font-size:.88rem;
        }
        .poster-content h2{
            margin:12px 0 6px;
            font-size:1.52rem;
            line-height:1.16;
        }
        .poster-content p{
            margin:0;
            color:#eadfd8;
            max-width:24ch;
            font-size:.94rem;
        }
        .thumb-stack{
            display:grid;
            gap:14px;
        }
        .thumb{
            min-height:190px;
        }
        .thumb-content{
            position:absolute;
            inset:auto 14px 14px 14px;
            z-index:1;
        }
        .thumb-content strong{
            display:block;
            font-size:1rem;
            line-height:1.25;
            margin-bottom:6px;
        }
        .thumb-content span{
            color:#e9ddd6;
            font-size:.88rem;
        }
        main{padding-bottom:28px}
        section{
            padding:18px 0;
            scroll-margin-top:92px;
        }
        .section-soft{
            background:linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0));
            border-top:1px solid rgba(255,255,255,.03);
            border-bottom:1px solid rgba(255,255,255,.03);
        }
        .section-head{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:18px;
            margin-bottom:18px;
        }
        .section-head h2{
            margin:0;
            font-size:clamp(1.55rem, 2.8vw, 2.2rem);
            line-height:1.14;
            letter-spacing:-.02em;
        }
        .section-head p{
            margin:0;
            color:var(--muted);
            max-width:58ch;
        }
        .section-head .section-note{
            display:flex;
            flex-direction:column;
            gap:8px;
            align-items:flex-end;
            text-align:right;
        }
        .tagline{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:#f2d7b6;
            font-size:.92rem;
        }
        .grid-4{
            display:grid;
            grid-template-columns:repeat(4, minmax(0, 1fr));
            gap:16px;
        }
        .feature-card,
        .spot-card,
        .info-card,
        .guide-card,
        .cta-panel,
        .mini-note,
        .empty-state{
            border-radius:var(--radius-lg);
            border:1px solid rgba(255,255,255,.09);
            background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
            box-shadow:var(--shadow-soft);
        }
        .feature-card{
            padding:20px;
            min-height:168px;
            transition:transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
        }
        .feature-card:hover,
        .spot-card:hover,
        .info-card:hover,
        .guide-card:hover{
            transform:translateY(-3px);
            border-color:rgba(224,194,125,.25);
            box-shadow:0 16px 32px rgba(0,0,0,.26);
        }
        .feature-icon{
            width:46px;height:46px;
            border-radius:15px;
            display:grid;
            place-items:center;
            color:#f0d9bf;
            background:linear-gradient(135deg, rgba(141,36,57,.28), rgba(192,138,75,.18));
            border:1px solid rgba(255,255,255,.08);
            margin-bottom:14px;
            font-size:1.12rem;
            font-weight:800;
        }
        .feature-card h3,
        .spot-card h3,
        .guide-card h3{
            margin:0 0 8px;
            font-size:1.05rem;
            line-height:1.35;
        }
        .feature-card p,
        .spot-card p,
        .guide-card p{
            margin:0;
            color:var(--muted);
        }
        .spot-grid{
            display:grid;
            grid-template-columns:1.15fr .85fr;
            gap:16px;
            align-items:stretch;
        }
        .spot-card{
            overflow:hidden;
            position:relative;
        }
        .spot-card .spot-image{
            position:relative;
            min-height:100%;
            overflow:hidden;
        }
        .spot-card .spot-image img{
            width:100%;
            height:100%;
            object-fit:cover;
            min-height:260px;
            transition:transform .48s var(--ease);
        }
        .spot-card:hover .spot-image img{transform:scale(1.03)}
        .spot-card .spot-overlay{
            position:absolute;
            inset:auto 18px 18px 18px;
            z-index:1;
        }
        .spot-card .spot-overlay .badge{
            display:inline-flex;
            align-items:center;
            gap:8px;
            min-height:32px;
            padding:0 12px;
            border-radius:999px;
            background:rgba(20,15,17,.72);
            border:1px solid rgba(255,255,255,.10);
            color:#f5ddc4;
            font-size:.88rem;
            margin-bottom:12px;
        }
        .spot-card .spot-overlay h3{
            font-size:1.34rem;
            margin-bottom:6px;
            color:#fff7f2;
        }
        .spot-card .spot-overlay p{
            max-width:36ch;
            color:#f0e5df;
        }
        .spot-side{
            display:grid;
            gap:14px;
        }
        .spot-mini{
            display:grid;
            grid-template-columns:128px 1fr;
            gap:14px;
            align-items:stretch;
            overflow:hidden;
            padding:12px;
        }
        .spot-mini .mini-cover{
            border-radius:16px;
            overflow:hidden;
            min-height:116px;
            border:1px solid rgba(255,255,255,.08);
            background:var(--panel);
        }
        .spot-mini .mini-cover img{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .spot-mini .mini-body{
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            gap:10px;
            min-width:0;
        }
        .meta-row{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            align-items:center;
            color:var(--soft);
            font-size:.86rem;
        }
        .badge{
            display:inline-flex;
            align-items:center;
            gap:6px;
            min-height:28px;
            padding:0 10px;
            border-radius:999px;
            background:rgba(141,36,57,.12);
            border:1px solid rgba(141,36,57,.20);
            color:#f0d3d7;
            font-size:.84rem;
        }
        .spot-mini h3{
            margin:0;
            font-size:1rem;
            line-height:1.38;
        }
        .spot-mini p{
            margin:0;
            color:var(--muted);
            font-size:.92rem;
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;
        }
        .news-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            margin-bottom:14px;
        }
        .news-head .news-count{
            color:var(--muted);
            font-size:.92rem;
        }
        .empty-state{
            padding:18px 20px;
            color:#f1dfcd;
            background:rgba(255,255,255,.025);
            margin-bottom:14px;
        }
        .news-list{
            display:grid;
            gap:12px;
        }
        .news-item{
            display:grid;
            grid-template-columns:170px minmax(0, 1fr) auto;
            gap:16px;
            align-items:center;
            padding:14px;
            border-radius:22px;
            border:1px solid rgba(255,255,255,.09);
            background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.015));
            transition:transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
            box-shadow:var(--shadow-soft);
        }
        .news-item:hover{
            transform:translateY(-2px);
            border-color:rgba(224,194,125,.22);
            box-shadow:0 16px 28px rgba(0,0,0,.24);
        }
        .news-cover{
            border-radius:18px;
            overflow:hidden;
            min-height:120px;
            border:1px solid rgba(255,255,255,.08);
            background:var(--panel);
        }
        .news-cover img{
            width:100%;
            height:100%;
            object-fit:cover;
            min-height:120px;
            transition:transform .45s var(--ease);
        }
        .news-item:hover .news-cover img{transform:scale(1.03)}
        .news-body{
            min-width:0;
        }
        .news-body h3{
            margin:8px 0 8px;
            font-size:1.12rem;
            line-height:1.4;
        }
        .news-body p{
            margin:0;
            color:var(--muted);
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;
        }
        .news-more{
            color:#f2d7b6;
            font-weight:700;
            white-space:nowrap;
            padding-left:10px;
        }
        .guide-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:16px;
        }
        .guide-card{
            padding:20px;
            position:relative;
            overflow:hidden;
        }
        .guide-number{
            width:38px;height:38px;
            border-radius:999px;
            display:grid;
            place-items:center;
            margin-bottom:14px;
            background:linear-gradient(135deg, rgba(141,36,57,.22), rgba(192,138,75,.16));
            border:1px solid rgba(255,255,255,.08);
            color:#f2d7c3;
            font-weight:800;
        }
        .faq-list{
            display:grid;
            gap:12px;
        }
        .faq-item{
            border-radius:18px;
            border:1px solid rgba(255,255,255,.09);
            background:rgba(255,255,255,.025);
            overflow:hidden;
        }
        .faq-item summary{
            list-style:none;
            cursor:pointer;
            padding:18px 18px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            font-weight:700;
            color:var(--text);
        }
        .faq-item summary::-webkit-details-marker{display:none}
        .faq-item summary::after{
            content:"+";
            width:32px;height:32px;
            flex:0 0 auto;
            border-radius:10px;
            display:grid;
            place-items:center;
            background:rgba(255,255,255,.05);
            border:1px solid rgba(255,255,255,.08);
            color:#f2d5b4;
            transition:transform .18s var(--ease), background-color .18s var(--ease);
        }
        .faq-item[open] summary::after{
            content:"−";
            transform:rotate(0);
            background:rgba(141,36,57,.12);
        }
        .faq-body{
            padding:0 18px 18px;
            color:var(--muted);
        }
        .cta-panel{
            padding:26px;
            background:
                radial-gradient(900px 400px at 10% 0%, rgba(141,36,57,.22), transparent 40%),
                linear-gradient(135deg, rgba(20,15,17,.96), rgba(16,11,12,.92));
            border-color:rgba(192,138,75,.16);
        }
        .cta-panel-inner{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
        }
        .cta-panel h2{
            margin:0 0 10px;
            font-size:clamp(1.6rem, 3vw, 2.3rem);
            line-height:1.14;
        }
        .cta-panel p{
            margin:0;
            color:var(--muted);
            max-width:60ch;
        }
        .cta-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            justify-content:flex-end;
        }
        .mini-note{
            margin-top:14px;
            padding:14px 16px;
            color:var(--muted);
            font-size:.93rem;
        }
        .site-footer{
            padding:28px 0 34px;
            border-top:1px solid rgba(255,255,255,.08);
            background:linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0));
        }
        .footer-grid{
            display:grid;
            grid-template-columns:1.15fr .85fr;
            gap:18px;
            align-items:start;
        }
        .footer-brand{
            display:flex;
            align-items:flex-start;
            gap:12px;
        }
        .footer-brand .brand-text strong{
            font-size:1.05rem;
        }
        .footer-brand p{
            margin:10px 0 0;
            color:var(--muted);
            max-width:62ch;
        }
        .footer-links{
            display:grid;
            gap:10px;
            justify-items:start;
        }
        .footer-links a{
            color:var(--muted);
            display:inline-flex;
            align-items:center;
            gap:8px;
            transition:color .18s var(--ease), transform .18s var(--ease);
        }
        .footer-links a:hover,
        .footer-links a:focus-visible{
            color:var(--text);
            transform:translateX(2px);
            outline:none;
        }
        .footer-meta{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:18px;
            color:var(--soft);
            font-size:.92rem;
        }
        .copyright{
            margin-top:18px;
            color:var(--soft);
            font-size:.92rem;
        }
        .focus-ring:focus-visible{
            outline:2px solid rgba(224,194,125,.75);
            outline-offset:3px;
        }
        @media (max-width: 1440px){
            .container{width:min(1280px, calc(100% - 32px))}
        }
        @media (max-width: 1200px){
            .hero-grid{grid-template-columns:1fr .95fr}
            .grid-4{grid-template-columns:repeat(2, minmax(0, 1fr))}
            .spot-grid{grid-template-columns:1fr}
            .guide-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
            .footer-grid{grid-template-columns:1fr}
        }
        @media (max-width: 992px){
            .hero-grid{grid-template-columns:1fr}
            .hero-copy{padding-top:8px}
            .hero-visual{grid-template-columns:1fr 1fr}
            .news-item{grid-template-columns:150px minmax(0,1fr)}
            .news-more{grid-column:1 / -1;padding-left:0}
            .site-nav{margin-left:0}
            .nav-toggle{display:inline-flex}
            .nav-menu{
                position:absolute;
                top:calc(100% + 12px);
                right:0;
                width:min(360px, calc(100vw - 32px));
                padding:14px;
                border-radius:22px;
                background:rgba(18,13,15,.98);
                border:1px solid rgba(255,255,255,.10);
                box-shadow:var(--shadow);
                display:none;
                flex-direction:column;
                align-items:stretch;
            }
            .site-header.nav-open .nav-menu{display:flex}
            .nav-link,
            .nav-chip,
            .nav-button{width:100%;justify-content:flex-start}
            .section-head{
                flex-direction:column;
                align-items:flex-start;
            }
            .section-head .section-note{
                align-items:flex-start;
                text-align:left;
            }
        }
        @media (max-width: 768px){
            .container{width:min(100% - 24px, var(--container))}
            .hero{padding:30px 0 18px}
            .hero h1{font-size:clamp(2rem, 8vw, 3rem)}
            .hero-visual{grid-template-columns:1fr}
            .poster{min-height:320px}
            .thumb-stack{grid-template-columns:1fr 1fr}
            .search-bar{flex-direction:column;align-items:stretch}
            .search-btn{width:100%}
            .hero-actions .btn{flex:1 1 100%}
            .grid-4{grid-template-columns:1fr}
            .guide-grid{grid-template-columns:1fr}
            .news-item{grid-template-columns:1fr}
            .news-cover{min-height:180px}
            .cta-panel-inner{flex-direction:column;align-items:flex-start}
            .cta-actions{width:100%;justify-content:flex-start}
            .cta-actions .btn{flex:1 1 100%}
            .footer-links{margin-top:8px}
        }
        @media (max-width: 576px){
            .nav-inner{min-height:70px}
            .brand-text span{display:none}
            .hero h1{margin-top:16px}
            .thumb-stack{grid-template-columns:1fr}
            .poster-content h2{font-size:1.28rem}
            .spot-mini{grid-template-columns:1fr}
            .spot-mini .mini-cover{min-height:160px}
            .cta-panel{padding:20px}
            .footer-brand{flex-direction:column}
        }
        @media (max-width: 390px){
            .container{width:min(100% - 18px, var(--container))}
            .hero p,
            .section-head p,
            .feature-card p,
            .spot-mini p,
            .guide-card p,
            .faq-body,
            .footer-brand p,
            .copyright{
                font-size:.93rem;
            }
            .btn,
            .nav-link,
            .nav-chip,
            .nav-button,
            .search-input{min-height:46px}
            .poster{min-height:280px}
        }

/* roulang page: article */
:root{
            --bg:#0f0a0c;
            --bg-2:#140f11;
            --panel:#171114;
            --panel-2:#1c1418;
            --panel-3:#22181d;
            --line:rgba(255,255,255,.10);
            --line-2:rgba(255,255,255,.16);
            --text:#f6efe9;
            --muted:#b8a9a2;
            --soft:#8f8179;
            --accent:#8d2439;
            --accent-2:#c08a4b;
            --accent-3:#e0c27d;
            --shadow:0 16px 32px rgba(0,0,0,.28);
            --shadow-soft:0 8px 18px rgba(0,0,0,.18);
            --radius-sm:12px;
            --radius-md:16px;
            --radius-lg:22px;
            --radius-xl:28px;
            --container:1320px;
            --ease:cubic-bezier(.2,.8,.2,1);
        }
        html{scroll-behavior:smooth}
        *{box-sizing:border-box}
        body{
            margin:0;
            color:var(--text);
            background:
                radial-gradient(1100px 700px at 12% 0%, rgba(141,36,57,.18), transparent 52%),
                radial-gradient(900px 540px at 82% 8%, rgba(192,138,75,.10), transparent 46%),
                linear-gradient(180deg, #110c0e 0%, #0e090b 100%);
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
            line-height:1.8;
            text-rendering:optimizeLegibility;
            -webkit-font-smoothing:antialiased;
            overflow-x:hidden;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background:
                radial-gradient(600px 320px at 20% 15%, rgba(255,255,255,.03), transparent 60%),
                radial-gradient(520px 280px at 80% 20%, rgba(255,255,255,.02), transparent 60%);
            z-index:-1;
        }
        a{color:inherit;text-decoration:none}
        a:hover{text-decoration:none;color:inherit}
        img{display:block;max-width:100%;height:auto}
        button,input,textarea,select{font:inherit;color:inherit}
        button{cursor:pointer}
        ::selection{background:rgba(192,138,75,.28);color:var(--text)}
        .focus-ring:focus-visible,
        .btn-core:focus-visible,
        .nav-link:focus-visible,
        .nav-chip:focus-visible,
        .nav-toggle:focus-visible,
        .footer-links a:focus-visible,
        .footer-brand:focus-visible,
        .card-link:focus-visible,
        .search-field:focus-visible,
        summary:focus-visible,
        input[type="search"]:focus-visible{
            outline:2px solid rgba(224,194,125,.95);
            outline-offset:3px;
            box-shadow:0 0 0 4px rgba(224,194,125,.12);
        }
        .container{
            width:min(var(--container), calc(100% - 32px));
            margin:0 auto;
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:60;
            background:rgba(14,9,11,.92);
            backdrop-filter:saturate(140%) blur(10px);
            border-bottom:1px solid rgba(255,255,255,.08);
        }
        .nav-inner{
            min-height:76px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            position:relative;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:12px;
            min-width:0;
            font-weight:800;
            letter-spacing:.02em;
            color:var(--text);
            flex:0 0 auto;
        }
        .brand-mark{
            width:42px;
            height:42px;
            border-radius:14px;
            background:
                radial-gradient(12px 12px at 30% 30%, rgba(255,255,255,.22), transparent 65%),
                linear-gradient(145deg, #7f2035 0%, #b3493d 45%, #c38b4b 100%);
            box-shadow:0 10px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.18);
            position:relative;
            flex:0 0 auto;
        }
        .brand-mark::before,
        .brand-mark::after{
            content:"";
            position:absolute;
            inset:10px 12px;
            border-radius:10px;
            border:1px solid rgba(255,255,255,.26);
        }
        .brand-mark::after{
            inset:15px 16px;
            border-radius:8px;
            border-color:rgba(255,255,255,.18);
        }
        .brand-text{
            min-width:0;
            display:flex;
            flex-direction:column;
            line-height:1.15;
        }
        .brand-text strong{
            font-size:1.02rem;
            letter-spacing:.02em;
        }
        .brand-text span{
            font-size:.82rem;
            color:var(--muted);
            margin-top:4px;
        }
        .site-nav{
            display:flex;
            align-items:center;
            margin-left:auto;
        }
        .nav-menu{
            display:flex;
            align-items:center;
            gap:10px;
        }
        .nav-link,
        .nav-chip,
        .nav-button{
            min-height:42px;
            padding:0 14px;
            border-radius:999px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            border:1px solid transparent;
            transition:transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
            white-space:nowrap;
        }
        .nav-link{
            color:var(--muted);
            background:transparent;
        }
        .nav-link:hover,
        .nav-link:focus-visible{
            color:var(--text);
            background:rgba(255,255,255,.05);
            border-color:rgba(255,255,255,.08);
            outline:none;
        }
        .nav-link.active{
            color:var(--text);
            background:rgba(141,36,57,.14);
            border-color:rgba(141,36,57,.38);
            box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
        }
        .nav-chip{
            color:#f2d5ad;
            background:rgba(192,138,75,.12);
            border-color:rgba(192,138,75,.22);
            font-size:.92rem;
        }
        .nav-chip:hover{
            background:rgba(192,138,75,.16);
            border-color:rgba(192,138,75,.30);
        }
        .nav-toggle{
            display:none;
            width:46px;
            height:46px;
            border-radius:14px;
            background:rgba(255,255,255,.05);
            border:1px solid rgba(255,255,255,.10);
            color:var(--text);
            align-items:center;
            justify-content:center;
            padding:0;
            transition:transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease);
        }
        .nav-toggle:hover{
            background:rgba(255,255,255,.08);
            border-color:rgba(255,255,255,.16);
            transform:translateY(-1px);
        }
        .nav-toggle:active{transform:translateY(0)}
        .nav-toggle .bars{
            width:18px;
            height:12px;
            position:relative;
            display:inline-block;
        }
        .nav-toggle .bars::before,
        .nav-toggle .bars::after,
        .nav-toggle .bars span{
            content:"";
            position:absolute;
            left:0;
            right:0;
            height:2px;
            border-radius:999px;
            background:currentColor;
            transition:transform .18s var(--ease), top .18s var(--ease), bottom .18s var(--ease), opacity .18s var(--ease);
        }
        .nav-toggle .bars::before{top:0}
        .nav-toggle .bars span{top:5px}
        .nav-toggle .bars::after{bottom:0}
        .site-header.nav-open .nav-toggle .bars::before{top:5px;transform:rotate(45deg)}
        .site-header.nav-open .nav-toggle .bars span{opacity:0}
        .site-header.nav-open .nav-toggle .bars::after{bottom:5px;transform:rotate(-45deg)}

        .page-main{
            padding:0 0 34px;
        }

        .article-hero{
            position:relative;
            overflow:hidden;
            padding:28px 0 22px;
        }
        .article-hero::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(180deg, rgba(15,10,12,.70) 0%, rgba(15,10,12,.88) 100%),
                url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
            opacity:.26;
            transform:scale(1.02);
            z-index:0;
        }
        .article-hero::after{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(900px 380px at 15% 20%, rgba(141,36,57,.18), transparent 60%),
                radial-gradient(760px 380px at 82% 8%, rgba(192,138,75,.08), transparent 56%);
            z-index:0;
            pointer-events:none;
        }
        .article-hero-inner{
            position:relative;
            z-index:1;
            display:grid;
            grid-template-columns:minmax(0,1.2fr) minmax(290px,.78fr);
            gap:24px;
            align-items:stretch;
        }
        .hero-copy,
        .hero-panel,
        .content-card,
        .aside-card,
        .feature-card,
        .browse-card,
        .faq-wrap,
        .cta-wrap,
        .not-found-card{
            background:linear-gradient(180deg, rgba(28,20,24,.96) 0%, rgba(23,17,20,.96) 100%);
            border:1px solid var(--line);
            box-shadow:var(--shadow-soft);
        }
        .hero-copy{
            border-radius:var(--radius-xl);
            padding:28px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            min-height:100%;
            position:relative;
            overflow:hidden;
        }
        .hero-copy::before{
            content:"";
            position:absolute;
            inset:auto -20% -30% auto;
            width:260px;
            height:260px;
            background:radial-gradient(circle, rgba(192,138,75,.12) 0%, rgba(192,138,75,0) 72%);
            pointer-events:none;
        }
        .eyebrow,
        .section-kicker{
            display:inline-flex;
            align-items:center;
            gap:8px;
            font-size:.84rem;
            letter-spacing:.08em;
            text-transform:uppercase;
            color:#f2d5ad;
        }
        .eyebrow::before,
        .section-kicker::before{
            content:"";
            width:20px;
            height:1px;
            background:rgba(242,213,173,.56);
        }
        .article-hero h1,
        .page-title{
            margin:14px 0 12px;
            font-size:clamp(2rem, 4vw, 3.5rem);
            line-height:1.1;
            letter-spacing:-.03em;
            font-weight:800;
        }
        .article-hero .summary{
            margin:0;
            color:var(--muted);
            font-size:1.02rem;
            line-height:1.9;
            max-width:68ch;
        }
        .meta-row{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin:18px 0 0;
        }
        .meta-chip,
        .tag-chip,
        .status-chip{
            display:inline-flex;
            align-items:center;
            gap:8px;
            min-height:36px;
            padding:0 12px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.10);
            background:rgba(255,255,255,.04);
            color:var(--text);
            font-size:.92rem;
        }
        .meta-chip strong,
        .tag-chip strong,
        .status-chip strong{
            color:#f6dfc3;
            font-weight:700;
        }
        .meta-chip.age{
            color:#f2d5ad;
            background:rgba(192,138,75,.12);
            border-color:rgba(192,138,75,.24);
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:22px;
        }
        .btn-core{
            min-height:46px;
            padding:0 18px;
            border-radius:999px;
            border:1px solid transparent;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            transition:transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
            font-weight:700;
            letter-spacing:.01em;
            white-space:nowrap;
            user-select:none;
        }
        .btn-core:hover{
            transform:translateY(-1px);
            box-shadow:var(--shadow-soft);
        }
        .btn-core:active{
            transform:translateY(0);
        }
        .btn-primary-core{
            color:#fff7ee;
            background:linear-gradient(145deg, #a02a42 0%, #8d2439 50%, #7a1d31 100%);
            border-color:rgba(255,255,255,.06);
        }
        .btn-primary-core:hover{
            border-color:rgba(255,255,255,.12);
        }
        .btn-secondary-core{
            color:var(--text);
            background:rgba(255,255,255,.05);
            border-color:rgba(255,255,255,.12);
        }
        .btn-secondary-core:hover{
            background:rgba(255,255,255,.08);
            border-color:rgba(255,255,255,.18);
        }
        .hero-panel{
            border-radius:var(--radius-xl);
            padding:18px;
            display:flex;
            flex-direction:column;
            gap:14px;
            overflow:hidden;
            position:relative;
        }
        .hero-preview{
            position:relative;
            border-radius:20px;
            overflow:hidden;
            aspect-ratio:4 / 3;
            background:linear-gradient(160deg, rgba(141,36,57,.18), rgba(192,138,75,.08));
            border:1px solid rgba(255,255,255,.08);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
        }
        .hero-preview img{
            width:100%;
            height:100%;
            object-fit:cover;
            filter:saturate(1.02) contrast(1.03);
        }
        .hero-preview::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, transparent 0%, rgba(10,7,8,.28) 100%);
        }
        .hero-preview-caption{
            position:absolute;
            left:14px;
            right:14px;
            bottom:14px;
            z-index:1;
            display:flex;
            flex-wrap:wrap;
            gap:8px;
        }
        .hero-note{
            padding:14px 14px 12px;
            border-radius:18px;
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.08);
        }
        .hero-note h2{
            font-size:1rem;
            margin:0 0 8px;
            color:#f6dfc3;
        }
        .hero-note p{
            margin:0;
            color:var(--muted);
            font-size:.94rem;
            line-height:1.8;
        }
        .hero-note-list{
            margin:12px 0 0;
            padding:0;
            list-style:none;
            display:grid;
            gap:8px;
        }
        .hero-note-list li{
            display:flex;
            gap:10px;
            align-items:flex-start;
            color:var(--muted);
            font-size:.94rem;
        }
        .hero-note-list li::before{
            content:"";
            width:8px;
            height:8px;
            border-radius:999px;
            margin-top:.55em;
            background:linear-gradient(145deg, var(--accent) 0%, var(--accent-2) 100%);
            box-shadow:0 0 0 3px rgba(141,36,57,.16);
            flex:0 0 auto;
        }

        .article-shell{
            padding:8px 0 0;
        }
        .article-grid{
            display:grid;
            grid-template-columns:minmax(0,1.72fr) minmax(300px,.88fr);
            gap:24px;
            align-items:start;
        }
        .content-card{
            border-radius:var(--radius-xl);
            overflow:hidden;
        }
        .content-head{
            padding:22px 24px 0;
        }
        .content-toolbar{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            align-items:center;
            justify-content:space-between;
            margin-bottom:16px;
        }
        .content-toolbar .status-chip{
            background:rgba(255,255,255,.04);
        }
        .content-toolbar .status-chip.age{
            color:#f1d3aa;
            background:rgba(192,138,75,.12);
            border-color:rgba(192,138,75,.24);
        }
        .keyword-row{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:12px;
        }
        .article-body{
            padding:20px 24px 24px;
            color:#efe5df;
            font-size:1.01rem;
            line-height:1.9;
        }
        .article-body > :first-child{margin-top:0}
        .article-body > :last-child{margin-bottom:0}
        .article-body h2,
        .article-body h3,
        .article-body h4{
            color:var(--text);
            line-height:1.35;
            margin:1.6em 0 .7em;
            font-weight:800;
            letter-spacing:-.02em;
        }
        .article-body h2{font-size:1.55rem}
        .article-body h3{font-size:1.22rem}
        .article-body h4{font-size:1.08rem}
        .article-body p{
            margin:0 0 1em;
            color:#f0e8e3;
        }
        .article-body ul,
        .article-body ol{
            margin:0 0 1em 1.2em;
            padding:0;
            color:#f0e8e3;
        }
        .article-body li{margin:.45em 0}
        .article-body strong{
            color:#fff6ef;
            font-weight:800;
        }
        .article-body a{
            color:#f6cf9e;
            text-decoration:none;
            border-bottom:1px solid rgba(224,194,125,.25);
            transition:color .18s var(--ease), border-color .18s var(--ease);
        }
        .article-body a:hover{
            color:#f8ddb4;
            border-color:rgba(224,194,125,.52);
        }
        .article-body blockquote{
            margin:1.2em 0;
            padding:16px 18px;
            border-left:3px solid rgba(192,138,75,.68);
            background:rgba(255,255,255,.04);
            border-radius:0 var(--radius-md) var(--radius-md) 0;
            color:#f1e6df;
        }
        .article-body hr{
            border:0;
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
            margin:1.4em 0;
        }
        .article-body img{
            width:100%;
            border-radius:18px;
            margin:1.2em 0;
            box-shadow:var(--shadow-soft);
            border:1px solid rgba(255,255,255,.08);
            object-fit:cover;
        }
        .article-body table{
            width:100%;
            border-collapse:separate;
            border-spacing:0;
            overflow:hidden;
            margin:1.2em 0;
            border-radius:16px;
            background:rgba(255,255,255,.03);
            border:1px solid rgba(255,255,255,.08);
        }
        .article-body th,
        .article-body td{
            padding:12px 14px;
            border-bottom:1px solid rgba(255,255,255,.08);
            vertical-align:top;
            text-align:left;
        }
        .article-body th{
            color:#f8e2c0;
            background:rgba(255,255,255,.04);
            font-weight:700;
        }
        .article-body tr:last-child td{border-bottom:0}
        .article-body code{
            font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
            padding:.18em .42em;
            border-radius:8px;
            background:rgba(255,255,255,.08);
            color:#f8ddb4;
        }
        .article-body pre{
            padding:16px 18px;
            border-radius:18px;
            overflow:auto;
            background:#100b0d;
            border:1px solid rgba(255,255,255,.08);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
        }
        .article-body pre code{
            padding:0;
            background:transparent;
            color:#f0e8e3;
        }

        .aside{
            position:relative;
            display:grid;
            gap:18px;
        }
        .aside-sticky{
            position:sticky;
            top:98px;
            display:grid;
            gap:18px;
        }
        .aside-card{
            border-radius:var(--radius-lg);
            padding:18px;
            overflow:hidden;
        }
        .aside-card h3{
            margin:0 0 10px;
            font-size:1.08rem;
            letter-spacing:-.02em;
        }
        .aside-card p{
            margin:0;
            color:var(--muted);
            line-height:1.85;
            font-size:.95rem;
        }
        .aside-visual{
            border-radius:18px;
            overflow:hidden;
            aspect-ratio:16 / 10;
            margin-bottom:14px;
            position:relative;
            border:1px solid rgba(255,255,255,.08);
        }
        .aside-visual img{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .aside-visual::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, transparent 0%, rgba(9,6,7,.26) 100%);
        }
        .aside-list{
            list-style:none;
            padding:0;
            margin:14px 0 0;
            display:grid;
            gap:10px;
        }
        .aside-list li{
            display:flex;
            align-items:flex-start;
            gap:10px;
            color:#efe4de;
            font-size:.95rem;
            line-height:1.7;
        }
        .aside-list li::before{
            content:"";
            width:8px;
            height:8px;
            border-radius:999px;
            margin-top:.55em;
            background:linear-gradient(145deg, var(--accent-2) 0%, var(--accent-3) 100%);
            box-shadow:0 0 0 3px rgba(192,138,75,.14);
            flex:0 0 auto;
        }
        .search-box{
            display:grid;
            gap:12px;
        }
        .search-field{
            width:100%;
            min-height:48px;
            padding:0 14px;
            border-radius:14px;
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.10);
            color:var(--text);
            transition:border-color .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease);
        }
        .search-field::placeholder{color:#9e8f87}
        .search-field:hover{
            background:rgba(255,255,255,.05);
            border-color:rgba(255,255,255,.16);
        }
        .search-actions{
            display:flex;
            gap:10px;
            flex-wrap:wrap;
        }
        .search-actions .btn-core{
            flex:1 1 0;
        }
        .mini-note{
            color:var(--soft);
            font-size:.9rem;
            line-height:1.8;
        }

        .section-block{
            padding:26px 0 0;
        }
        .section-head{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            justify-content:space-between;
            align-items:end;
            margin-bottom:16px;
        }
        .section-head h2{
            margin:0;
            font-size:1.5rem;
            letter-spacing:-.02em;
        }
        .section-head p{
            margin:0;
            color:var(--muted);
            max-width:72ch;
            font-size:.96rem;
        }
        .browse-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:18px;
        }
        .browse-card{
            border-radius:var(--radius-lg);
            overflow:hidden;
            display:flex;
            flex-direction:column;
            min-height:100%;
            transition:transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
        }
        .browse-card:hover{
            transform:translateY(-2px);
            border-color:rgba(255,255,255,.16);
            box-shadow:var(--shadow);
        }
        .browse-cover{
            position:relative;
            aspect-ratio:16 / 10;
            overflow:hidden;
            border-bottom:1px solid rgba(255,255,255,.08);
        }
        .browse-cover img{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .browse-cover::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, transparent 0%, rgba(10,7,8,.30) 100%);
        }
        .browse-body{
            padding:16px 16px 18px;
            display:grid;
            gap:10px;
        }
        .browse-body h3{
            margin:0;
            font-size:1.08rem;
            line-height:1.42;
        }
        .browse-body p{
            margin:0;
            color:var(--muted);
            font-size:.95rem;
            line-height:1.8;
            min-height:3.6em;
        }
        .card-link{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:#f7ddb7;
            font-weight:700;
            width:max-content;
        }
        .card-link::after{
            content:"→";
            transition:transform .18s var(--ease);
        }
        .browse-card:hover .card-link::after{transform:translateX(2px)}

        .faq-wrap{
            border-radius:var(--radius-xl);
            padding:22px;
            margin-top:26px;
        }
        .faq-list{
            display:grid;
            gap:12px;
        }
        .faq-item{
            border-radius:18px;
            overflow:hidden;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.03);
        }
        .faq-item summary{
            list-style:none;
            cursor:pointer;
            padding:16px 18px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            font-weight:700;
            color:var(--text);
        }
        .faq-item summary::-webkit-details-marker{display:none}
        .faq-item summary::after{
            content:"+";
            width:26px;
            height:26px;
            border-radius:999px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            background:rgba(255,255,255,.06);
            border:1px solid rgba(255,255,255,.08);
            color:#f2d5ad;
            flex:0 0 auto;
            transition:transform .18s var(--ease), background-color .18s var(--ease);
        }
        .faq-item[open] summary{
            background:rgba(255,255,255,.03);
        }
        .faq-item[open] summary::after{
            content:"–";
            transform:rotate(0deg);
        }
        .faq-content{
            padding:0 18px 16px;
            color:var(--muted);
            line-height:1.9;
        }

        .cta-wrap{
            margin-top:26px;
            border-radius:var(--radius-xl);
            padding:24px;
            overflow:hidden;
            position:relative;
        }
        .cta-wrap::before{
            content:"";
            position:absolute;
            inset:-1px;
            background:
                radial-gradient(460px 240px at 18% 18%, rgba(141,36,57,.20), transparent 62%),
                radial-gradient(420px 220px at 86% 24%, rgba(192,138,75,.16), transparent 58%);
            pointer-events:none;
            opacity:.9;
        }
        .cta-inner{
            position:relative;
            z-index:1;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            flex-wrap:wrap;
        }
        .cta-inner h2{
            margin:0 0 8px;
            font-size:1.4rem;
            letter-spacing:-.02em;
        }
        .cta-inner p{
            margin:0;
            color:var(--muted);
            max-width:72ch;
            line-height:1.8;
        }
        .cta-actions{
            display:flex;
            gap:12px;
            flex-wrap:wrap;
        }

        .not-found-section{
            padding:36px 0 8px;
        }
        .not-found-card{
            border-radius:var(--radius-xl);
            padding:32px;
            max-width:760px;
            margin:0 auto;
            text-align:left;
        }
        .not-found-card h1{
            margin:10px 0 8px;
            font-size:clamp(2rem, 4vw, 3rem);
            line-height:1.1;
        }
        .not-found-card p{
            margin:0;
            color:var(--muted);
            font-size:1rem;
            line-height:1.9;
            max-width:60ch;
        }
        .not-found-actions{
            display:flex;
            gap:12px;
            flex-wrap:wrap;
            margin-top:18px;
        }

        .site-footer{
            margin-top:32px;
            padding:28px 0 34px;
            border-top:1px solid rgba(255,255,255,.08);
            background:linear-gradient(180deg, rgba(14,9,11,.76) 0%, rgba(14,9,11,.96) 100%);
        }
        .footer-grid{
            display:grid;
            grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
            gap:24px;
            align-items:start;
        }
        .footer-brand{
            margin-bottom:12px;
        }
        .site-footer p{
            margin:0;
            color:var(--muted);
            line-height:1.9;
            max-width:70ch;
        }
        .footer-meta{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:14px;
            color:var(--soft);
            font-size:.92rem;
        }
        .footer-meta span{
            padding:7px 10px;
            border-radius:999px;
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.08);
        }
        .copyright{
            margin-top:14px;
            color:#d9c9c0;
            font-size:.92rem;
        }
        .footer-links{
            display:grid;
            gap:10px;
            justify-items:start;
        }
        .footer-links a{
            min-height:40px;
            display:inline-flex;
            align-items:center;
            padding:0 14px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.10);
            background:rgba(255,255,255,.04);
            color:var(--text);
            transition:transform .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease);
        }
        .footer-links a:hover{
            transform:translateY(-1px);
            border-color:rgba(255,255,255,.16);
            background:rgba(255,255,255,.07);
        }

        .article-sep{
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
            margin:22px 0;
        }

        @media (max-width: 1440px){
            .container{width:min(var(--container), calc(100% - 28px))}
        }
        @media (max-width: 1200px){
            .article-hero-inner{grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr)}
            .article-grid{grid-template-columns:minmax(0,1.54fr) minmax(280px,.92fr)}
            .browse-grid{gap:16px}
        }
        @media (max-width: 992px){
            .nav-toggle{display:inline-flex}
            .site-nav{
                position:absolute;
                top:calc(100% + 10px);
                right:0;
                left:0;
                padding:0 0 4px;
                opacity:0;
                transform:translateY(-8px);
                pointer-events:none;
                transition:opacity .18s var(--ease), transform .18s var(--ease);
            }
            .site-header.nav-open .site-nav{
                opacity:1;
                transform:translateY(0);
                pointer-events:auto;
            }
            .nav-menu{
                margin:0;
                padding:14px;
                border-radius:20px;
                background:rgba(18,12,14,.98);
                border:1px solid rgba(255,255,255,.09);
                box-shadow:var(--shadow);
                display:grid;
                grid-template-columns:repeat(2, minmax(0,1fr));
                gap:10px;
            }
            .nav-chip{
                grid-column:1 / -1;
                width:100%;
            }
            .article-hero-inner,
            .article-grid,
            .footer-grid{
                grid-template-columns:1fr;
            }
            .hero-copy{
                min-height:auto;
            }
            .hero-panel{
                order:2;
            }
            .aside-sticky{
                position:static;
            }
            .browse-grid{
                grid-template-columns:1fr;
            }
            .cta-inner{
                align-items:flex-start;
            }
        }
        @media (max-width: 768px){
            .site-header{backdrop-filter:none}
            .nav-inner{min-height:72px}
            .article-hero{
                padding:20px 0 16px;
            }
            .hero-copy,
            .hero-panel,
            .content-card,
            .aside-card,
            .faq-wrap,
            .cta-wrap,
            .not-found-card{
                border-radius:22px;
            }
            .hero-copy,
            .hero-panel{
                padding:20px;
            }
            .article-hero h1,
            .page-title{
                font-size:clamp(1.75rem, 8vw, 2.5rem);
            }
            .article-body,
            .content-head{
                padding-left:18px;
                padding-right:18px;
            }
            .article-body{
                padding-top:14px;
                padding-bottom:20px;
            }
            .article-body h2{font-size:1.34rem}
            .article-body h3{font-size:1.16rem}
            .hero-actions,
            .cta-actions,
            .search-actions,
            .not-found-actions{
                flex-direction:column;
            }
            .hero-actions .btn-core,
            .cta-actions .btn-core,
            .search-actions .btn-core,
            .not-found-actions .btn-core{
                width:100%;
            }
            .section-head{
                align-items:flex-start;
            }
            .faq-wrap,
            .cta-wrap{
                padding:18px;
            }
        }
        @media (max-width: 576px){
            .container{width:min(var(--container), calc(100% - 22px))}
            .nav-inner{min-height:68px}
            .brand-mark{width:38px;height:38px;border-radius:13px}
            .brand-text strong{font-size:.98rem}
            .brand-text span{font-size:.78rem}
            .nav-menu{
                grid-template-columns:1fr;
            }
            .article-hero-inner,
            .article-grid{
                gap:16px;
            }
            .hero-copy,
            .hero-panel,
            .content-card,
            .aside-card,
            .faq-wrap,
            .cta-wrap,
            .not-found-card{
                border-radius:18px;
            }
            .meta-row,
            .keyword-row{
                gap:8px;
            }
            .meta-chip,
            .tag-chip,
            .status-chip{
                min-height:34px;
                padding:0 10px;
                font-size:.88rem;
            }
            .hero-panel,
            .aside-card,
            .faq-item summary,
            .faq-content{
                padding-left:14px;
                padding-right:14px;
            }
            .faq-item summary{
                padding-top:14px;
                padding-bottom:14px;
            }
            .aside-visual{
                aspect-ratio:16 / 11;
            }
            .site-footer{
                padding-bottom:28px;
            }
        }
        @media (max-width: 390px){
            .container{width:min(var(--container), calc(100% - 18px))}
            .hero-copy,
            .hero-panel,
            .aside-card,
            .content-head,
            .article-body,
            .faq-wrap,
            .cta-wrap,
            .not-found-card{
                padding-left:14px;
                padding-right:14px;
            }
            .article-hero h1,
            .page-title{
                font-size:1.62rem;
            }
            .article-body p,
            .hero-copy .summary,
            .cta-inner p,
            .faq-content,
            .aside-card p,
            .not-found-card p{
                font-size:.95rem;
            }
        }

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