/* roulang page: index */
:root{
    --bg: #111113;
    --bg-2: #161618;
    --bg-3: #1c1c1f;
    --surface: rgba(245, 241, 235, 0.96);
    --surface-2: rgba(236, 231, 223, 0.94);
    --surface-dark: rgba(255, 255, 255, 0.06);
    --text: #f4efe8;
    --text-dark: #1f1b17;
    --muted: #b6b0a7;
    --muted-dark: #6e665d;
    --line: rgba(255,255,255,.10);
    --line-dark: rgba(30, 23, 20, .10);
    --accent: #b4493c;
    --accent-2: #d28b39;
    --accent-3: #7c3129;
    --accent-soft: rgba(180,73,60,.16);
    --accent-soft-2: rgba(210,139,57,.16);
    --shadow: 0 18px 50px rgba(0,0,0,.28);
    --shadow-soft: 0 12px 30px rgba(0,0,0,.18);
    --radius: 22px;
    --radius-sm: 16px;
    --container: 1180px;
    --gap: 24px;
    --transition: all .24s ease;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", Arial, sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at 15% 10%, rgba(210,139,57,.14), transparent 24%),
        radial-gradient(circle at 85% 0%, rgba(180,73,60,.18), transparent 28%),
        linear-gradient(180deg, #121214 0%, #0f0f11 42%, #111113 100%);
    line-height:1.7;
    min-height:100vh;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{
    max-width:100%;
    display:block;
}
button,
input,
textarea,
select{
    font:inherit;
}
button{
    border:0;
    background:none;
    color:inherit;
    cursor:pointer;
}
:focus-visible{
    outline:3px solid rgba(210,139,57,.86);
    outline-offset:3px;
}
::selection{
    background:rgba(210,139,57,.28);
    color:#fff;
}

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

.page-shell{
    position:relative;
}

.top-strip{
    position:relative;
    z-index:40;
    background:linear-gradient(90deg, rgba(180,73,60,.96), rgba(124,49,41,.96) 55%, rgba(210,139,57,.94));
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.1);
}
.top-strip .strip-inner{
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:10px 0;
    font-size:14px;
}
.strip-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
    color:#fff;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    transition:var(--transition);
}
.strip-link:hover{
    background:rgba(255,255,255,.20);
    transform:translateY(-1px);
}

.site-header{
    position:sticky;
    top:0;
    z-index:50;
    backdrop-filter:saturate(150%) blur(18px);
    background:linear-gradient(180deg, rgba(15,15,17,.86), rgba(15,15,17,.70));
    border-bottom:1px solid var(--line);
}
.header-inner{
    min-height:84px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:18px;
    padding:14px 0;
    position:relative;
}

.brand{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
}
.brand-mark{
    width:48px;
    height:48px;
    border-radius:16px;
    display:grid;
    place-items:center;
    font-weight:800;
    letter-spacing:.04em;
    color:#fff;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow:0 12px 26px rgba(180,73,60,.22);
    flex:0 0 auto;
}
.brand-text{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
}
.brand-text strong{
    display:block;
    font-size:18px;
    line-height:1.15;
    letter-spacing:.02em;
}
.brand-text em{
    display:inline-flex;
    width:max-content;
    font-style:normal;
    font-size:12px;
    color:rgba(255,255,255,.82);
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);
    padding:4px 8px;
    border-radius:999px;
}

.site-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
}
.site-nav a{
    color:rgba(255,255,255,.82);
    padding:11px 14px;
    border-radius:999px;
    border:1px solid transparent;
    transition:var(--transition);
}
.site-nav a:hover{
    color:#fff;
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.08);
    transform:translateY(-1px);
}
.site-nav a.active,
.site-nav a[aria-current="page"]{
    color:#fff;
    background:linear-gradient(135deg, rgba(180,73,60,.92), rgba(210,139,57,.76));
    border-color:rgba(255,255,255,.08);
    box-shadow:0 10px 18px rgba(180,73,60,.22);
}

.header-tools{
    display:flex;
    align-items:center;
    gap:12px;
    justify-self:end;
}

.site-search{
    display:flex;
    align-items:center;
    gap:0;
    min-width:260px;
    max-width:320px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;
    overflow:hidden;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.site-search input{
    flex:1;
    min-width:0;
    border:0;
    outline:0;
    padding:12px 16px;
    background:transparent;
    color:#fff;
}
.site-search input::placeholder{
    color:rgba(255,255,255,.46);
}
.site-search button{
    height:42px;
    padding:0 16px;
    margin:2px;
    border-radius:999px;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    color:#fff;
    font-weight:700;
    box-shadow:0 10px 20px rgba(180,73,60,.22);
    transition:var(--transition);
}
.site-search button:hover{
    filter:brightness(1.05);
    transform:translateY(-1px);
}
.site-search button:active,
.btn:active,
.menu-toggle:active{
    transform:translateY(0) scale(.98);
}

.menu-toggle{
    display:none;
    width:46px;
    height:46px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);
    align-items:center;
    justify-content:center;
    gap:4px;
    flex-direction:column;
    transition:var(--transition);
}
.menu-toggle:hover{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.16);
}
.menu-toggle span{
    display:block;
    width:18px;
    height:2px;
    background:#fff;
    border-radius:999px;
}
.sr-only{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
}

main{
    display:block;
}

.section{
    padding:76px 0;
    position:relative;
    overflow:hidden;
}

.hero{
    padding:54px 0 36px;
    position:relative;
}
.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg, rgba(17,17,19,.20), rgba(17,17,19,.72)),
        url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
    opacity:.92;
    z-index:-2;
}
.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(17,17,19,.94) 0%, rgba(17,17,19,.74) 44%, rgba(17,17,19,.24) 100%);
    z-index:-1;
}
.hero-grid{
    display:grid;
    grid-template-columns:minmax(0, 1.08fr) minmax(380px, .92fr);
    gap:34px;
    align-items:center;
    min-height:calc(100vh - 180px);
}
.hero-copy{
    max-width:640px;
}
.hero-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:rgba(255,255,255,.88);
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;
    padding:8px 14px;
    margin-bottom:18px;
    font-size:13px;
    letter-spacing:.04em;
}
.hero h1{
    margin:0 0 18px;
    font-size:clamp(38px, 5vw, 66px);
    line-height:1.05;
    letter-spacing:-.03em;
}
.hero-lead{
    margin:0;
    font-size:18px;
    color:rgba(255,255,255,.82);
    max-width:56ch;
}
.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:28px;
}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:48px;
    padding:0 18px;
    border-radius:999px;
    font-weight:700;
    letter-spacing:.01em;
    transition:var(--transition);
    border:1px solid transparent;
    box-shadow:var(--shadow-soft);
}
.btn:hover{
    transform:translateY(-2px);
    filter:brightness(1.03);
}
.btn-primary{
    color:#fff;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
}
.btn-secondary{
    color:#fff;
    background:rgba(255,255,255,.07);
    border-color:rgba(255,255,255,.12);
}
.btn-ghost{
    color:var(--text-dark);
    background:rgba(255,255,255,.72);
    border-color:rgba(255,255,255,.5);
}
.hero-note{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
    color:rgba(255,255,255,.72);
    font-size:14px;
}
.hero-note .note-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);
}

.hero-visual{
    position:relative;
    display:grid;
    gap:16px;
}
.poster-card{
    position:relative;
    min-height:420px;
    border-radius:var(--radius);
    overflow:hidden;
    background:
        linear-gradient(180deg, rgba(17,17,19,.08), rgba(17,17,19,.82)),
        url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:var(--shadow);
}
.poster-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(17,17,19,.08), rgba(17,17,19,.84));
}
.poster-content{
    position:absolute;
    inset:auto 0 0 0;
    padding:22px;
    display:grid;
    gap:10px;
    z-index:1;
}
.poster-title{
    font-size:22px;
    font-weight:800;
    line-height:1.2;
}
.poster-desc{
    margin:0;
    color:rgba(255,255,255,.78);
    max-width:28ch;
}
.poster-badges{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:2px;
}
.badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    width:max-content;
    padding:5px 11px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.02em;
    border:1px solid transparent;
}
.badge-accent{
    background:rgba(180,73,60,.18);
    border-color:rgba(180,73,60,.22);
    color:#f7d2cd;
}
.badge-warm{
    background:rgba(210,139,57,.16);
    border-color:rgba(210,139,57,.24);
    color:#ffe5c2;
}
.badge-neutral{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.10);
    color:#fff;
}
.stack-row{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
}
.mini-card{
    display:grid;
    grid-template-columns:92px minmax(0, 1fr);
    gap:14px;
    align-items:center;
    padding:12px;
    border-radius:18px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:var(--shadow-soft);
    transition:var(--transition);
}
.mini-card:hover{
    transform:translateY(-2px);
    border-color:rgba(255,255,255,.14);
    background:rgba(255,255,255,.08);
}
.mini-thumb{
    width:92px;
    aspect-ratio:1/1;
    border-radius:14px;
    overflow:hidden;
    position:relative;
    background:#222;
}
.mini-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.mini-copy{
    display:grid;
    gap:8px;
    min-width:0;
}
.mini-copy strong{
    font-size:15px;
    line-height:1.25;
}
.mini-copy span{
    font-size:13px;
    color:rgba(255,255,255,.72);
}

.section-head{
    display:grid;
    gap:10px;
    margin-bottom:24px;
}
.section-kicker{
    display:inline-flex;
    width:max-content;
    padding:7px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.section-title{
    margin:0;
    font-size:clamp(24px, 3vw, 40px);
    line-height:1.15;
    letter-spacing:-.02em;
}
.section-desc{
    margin:0;
    max-width:70ch;
    color:var(--muted);
    font-size:16px;
}
.panel-soft{
    background:linear-gradient(180deg, rgba(245,241,235,.98), rgba(233,227,218,.96));
    color:var(--text-dark);
}
.panel-soft .section-kicker{
    color:var(--accent);
    background:rgba(180,73,60,.11);
    border:1px solid rgba(180,73,60,.16);
}
.panel-soft .section-title,
.panel-soft .section-desc{
    color:var(--text-dark);
}
.panel-dark{
    background:
        radial-gradient(circle at 10% 0%, rgba(210,139,57,.12), transparent 24%),
        radial-gradient(circle at 95% 10%, rgba(180,73,60,.12), transparent 20%),
        linear-gradient(180deg, #141416 0%, #111113 100%);
}
.panel-dark .section-kicker{
    color:#fff;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);
}
.panel-dark .section-title,
.panel-dark .section-desc{
    color:#fff;
}
.panel-dark .section-desc{
    color:rgba(255,255,255,.72);
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:16px;
}
.feature-card{
    position:relative;
    padding:22px;
    border-radius:var(--radius-sm);
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:var(--shadow-soft);
    transition:var(--transition);
    overflow:hidden;
}
.feature-card::before{
    content:"";
    position:absolute;
    inset:auto auto -26px -18px;
    width:120px;
    height:120px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(210,139,57,.22), transparent 70%);
    pointer-events:none;
}
.feature-card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,255,255,.14);
    box-shadow:0 20px 42px rgba(0,0,0,.24);
}
.feature-icon{
    width:42px;
    height:42px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg, rgba(180,73,60,.18), rgba(210,139,57,.18));
    border:1px solid rgba(255,255,255,.10);
    margin-bottom:14px;
}
.feature-icon svg{
    width:20px;
    height:20px;
    stroke:#fff;
}
.feature-card h3{
    margin:0 0 8px;
    font-size:18px;
}
.feature-card p{
    margin:0;
    color:rgba(255,255,255,.72);
    font-size:14px;
}
.feature-card .tiny{
    margin-top:14px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#fff;
    font-size:12px;
    font-weight:700;
}
.feature-card .tiny::after{
    content:"→";
    transition:var(--transition);
}
.feature-card:hover .tiny::after{
    transform:translateX(3px);
}

.spotlight-grid{
    display:grid;
    grid-template-columns:minmax(0, 1.25fr) minmax(300px, .75fr);
    gap:18px;
    align-items:stretch;
}
.spot-main,
.spot-small{
    position:relative;
    overflow:hidden;
    border-radius:var(--radius);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:var(--shadow-soft);
    color:#fff;
}
.spot-main{
    min-height:390px;
    background:
        linear-gradient(180deg, rgba(17,17,19,.10), rgba(17,17,19,.88)),
        url('/assets/images/coverpic/cover-3.webp') center/cover no-repeat;
}
.spot-main::after,
.spot-small::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(17,17,19,.06), rgba(17,17,19,.82));
}
.spot-copy{
    position:absolute;
    inset:auto 0 0 0;
    padding:24px;
    z-index:1;
    display:grid;
    gap:10px;
}
.spot-copy h3{
    margin:0;
    font-size:28px;
    line-height:1.15;
}
.spot-copy p{
    margin:0;
    max-width:38ch;
    color:rgba(255,255,255,.80);
}
.spot-copy .link-cta{
    width:max-content;
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#fff;
    font-weight:700;
}
.spot-copy .link-cta::after{
    content:"→";
}
.spot-side{
    display:grid;
    gap:18px;
}
.spot-small{
    min-height:186px;
    background-size:cover;
    background-position:center;
}
.spot-small.one{
    background-image:
        linear-gradient(180deg, rgba(17,17,19,.08), rgba(17,17,19,.86)),
        url('/assets/images/coverpic/cover-1.webp');
}
.spot-small.two{
    background-image:
        linear-gradient(180deg, rgba(17,17,19,.08), rgba(17,17,19,.86)),
        url('/assets/images/coverpic/cover-2.webp');
}
.spot-small.three{
    background-image:
        linear-gradient(180deg, rgba(17,17,19,.08), rgba(17,17,19,.86)),
        url('/assets/images/coverpic/cover-4.webp');
}
.spot-small .spot-copy{
    padding:18px;
}
.spot-small h3{
    margin:0;
    font-size:20px;
}
.spot-small p{
    margin:0;
    color:rgba(255,255,255,.76);
    font-size:14px;
}

.updates-wrap{
    background:linear-gradient(180deg, rgba(245,241,235,.98), rgba(236,230,221,.95));
    color:var(--text-dark);
}
.updates-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
}
.update-card{
    padding:22px;
    border-radius:var(--radius-sm);
    background:#fff;
    border:1px solid rgba(30, 23, 20, .08);
    box-shadow:0 12px 26px rgba(31, 27, 23, .06);
    transition:var(--transition);
    display:grid;
    gap:14px;
}
.update-card:hover{
    transform:translateY(-4px);
    border-color:rgba(180,73,60,.18);
    box-shadow:0 18px 34px rgba(31, 27, 23, .10);
}
.update-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    justify-content:space-between;
}
.update-meta time{
    color:var(--muted-dark);
    font-size:13px;
}
.update-card h3{
    margin:0;
    font-size:19px;
    line-height:1.35;
}
.update-card h3 a{
    transition:var(--transition);
}
.update-card h3 a:hover{
    color:var(--accent);
}
.update-card p{
    margin:0;
    color:var(--muted-dark);
    font-size:14px;
}
.update-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.read-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--accent);
    font-weight:800;
    transition:var(--transition);
}
.read-link:hover{
    transform:translateX(3px);
}
.empty-state{
    padding:28px;
    border-radius:var(--radius-sm);
    background:rgba(255,255,255,.76);
    border:1px dashed rgba(180,73,60,.24);
    color:var(--muted-dark);
    font-weight:700;
}

.browse-grid{
    display:grid;
    grid-template-columns:minmax(0, .92fr) minmax(300px, 1.08fr);
    gap:18px;
    align-items:stretch;
}
.browse-panel{
    padding:24px;
    border-radius:var(--radius);
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:var(--shadow-soft);
}
.browse-list{
    display:grid;
    gap:12px;
    margin-top:18px;
}
.browse-item{
    display:flex;
    gap:14px;
    padding:14px 15px;
    border-radius:18px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
}
.browse-num{
    width:34px;
    height:34px;
    border-radius:12px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    background:linear-gradient(135deg, rgba(180,73,60,.25), rgba(210,139,57,.22));
    color:#fff;
    font-weight:800;
}
.browse-item strong{
    display:block;
    margin-bottom:4px;
    font-size:16px;
}
.browse-item p{
    margin:0;
    color:rgba(255,255,255,.72);
    font-size:14px;
}
.browse-visual{
    position:relative;
    min-height:370px;
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    background:
        linear-gradient(180deg, rgba(17,17,19,.06), rgba(17,17,19,.78)),
        url('/assets/images/coverpic/cover-4.webp') center/cover no-repeat;
    box-shadow:var(--shadow);
}
.browse-visual::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(17,17,19,.04), rgba(17,17,19,.82));
}
.browse-visual .visual-copy{
    position:absolute;
    inset:auto 0 0 0;
    padding:24px;
    z-index:1;
}
.browse-visual h3{
    margin:0 0 8px;
    font-size:28px;
    line-height:1.15;
}
.browse-visual p{
    margin:0;
    max-width:34ch;
    color:rgba(255,255,255,.78);
}

.faq-list{
    display:grid;
    gap:14px;
}
.faq-item{
    border-radius:18px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.05);
    box-shadow:var(--shadow-soft);
}
.faq-item summary{
    list-style:none;
    cursor:pointer;
    padding:18px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    font-weight:800;
}
.faq-item summary::-webkit-details-marker{
    display:none;
}
.faq-item summary::after{
    content:"+";
    flex:0 0 auto;
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);
    color:#fff;
    transition:var(--transition);
}
.faq-item[open] summary{
    border-bottom:1px solid rgba(255,255,255,.08);
}
.faq-item[open] summary::after{
    content:"–";
}
.faq-answer{
    padding:0 20px 18px;
    color:rgba(255,255,255,.76);
}
.faq-answer p{
    margin:14px 0 0;
}

.cta-box{
    position:relative;
    overflow:hidden;
    border-radius:28px;
    padding:34px;
    background:
        linear-gradient(135deg, rgba(180,73,60,.96), rgba(124,49,41,.96) 52%, rgba(210,139,57,.88)),
        url('/assets/images/backpic/back-3.jpg') center/cover no-repeat;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 24px 60px rgba(0,0,0,.30);
}
.cta-box::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(17,17,19,.10), rgba(17,17,19,.26));
}
.cta-inner{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:20px;
    align-items:center;
}
.cta-inner h2{
    margin:0 0 10px;
    font-size:clamp(28px, 4vw, 44px);
    line-height:1.08;
}
.cta-inner p{
    margin:0;
    max-width:62ch;
    color:rgba(255,255,255,.86);
}
.cta-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:flex-end;
}

.site-footer{
    padding:34px 0 40px;
    background:linear-gradient(180deg, #0d0d0f, #0a0a0b);
    border-top:1px solid rgba(255,255,255,.08);
}
.footer-grid{
    display:grid;
    grid-template-columns:minmax(0, 1.1fr) auto auto;
    gap:24px;
    align-items:start;
}
.footer-brand{
    display:grid;
    gap:12px;
    max-width:460px;
}
.footer-brand strong{
    font-size:20px;
    letter-spacing:.02em;
}
.footer-brand p{
    margin:0;
    color:rgba(255,255,255,.68);
}
.footer-links,
.footer-tech{
    display:grid;
    gap:10px;
    align-content:start;
}
.footer-title{
    font-size:13px;
    font-weight:800;
    color:rgba(255,255,255,.82);
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:4px;
}
.footer-links a{
    color:rgba(255,255,255,.72);
    transition:var(--transition);
}
.footer-links a:hover{
    color:#fff;
    transform:translateX(3px);
}
.footer-tech p{
    margin:0;
    color:rgba(255,255,255,.64);
    max-width:300px;
}
.copyright{
    margin-top:24px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.08);
    color:rgba(255,255,255,.58);
    font-size:13px;
    display:flex;
    flex-wrap:wrap;
    gap:10px 16px;
    justify-content:space-between;
}

.panel-soft .btn-ghost{
    color:var(--text-dark);
    background:rgba(31,27,23,.06);
    border-color:rgba(31,27,23,.10);
    box-shadow:none;
}
.panel-soft .btn-ghost:hover{
    background:rgba(31,27,23,.08);
}
.panel-soft .btn-secondary{
    color:#fff;
    background:linear-gradient(135deg, var(--accent-3), var(--accent));
    border-color:transparent;
}
.panel-soft .site-search{
    background:#fff;
    border-color:rgba(30,23,20,.08);
}
.panel-soft .site-search input{
    color:var(--text-dark);
}
.panel-soft .site-search input::placeholder{
    color:rgba(110,102,93,.72);
}
.panel-soft .site-search button{
    color:#fff;
}

@media (max-width: 1200px){
    .hero-grid{
        gap:26px;
    }
    .feature-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
    .browse-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width: 992px){
    .header-inner{
        grid-template-columns:auto 1fr auto;
    }
    .site-search{
        min-width:220px;
    }
    .hero-grid{
        grid-template-columns:1fr;
        min-height:auto;
        padding:12px 0 10px;
    }
    .hero-copy{
        max-width:100%;
    }
    .hero-visual{
        grid-template-columns:1fr;
    }
    .spotlight-grid{
        grid-template-columns:1fr;
    }
    .updates-grid{
        grid-template-columns:1fr;
    }
    .footer-grid{
        grid-template-columns:1fr 1fr;
    }
    .footer-brand{
        grid-column:1 / -1;
    }
}

@media (max-width: 768px){
    .top-strip .strip-inner{
        flex-direction:column;
        align-items:flex-start;
    }
    .header-inner{
        grid-template-columns:1fr auto;
        gap:12px;
        min-height:72px;
    }
    .brand-text strong{
        font-size:17px;
    }
    .site-search{
        display:none;
    }
    .menu-toggle{
        display:inline-flex;
    }
    .site-nav{
        position:absolute;
        top:calc(100% + 12px);
        left:0;
        right:0;
        display:none;
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        gap:6px;
        padding:14px;
        border-radius:18px;
        background:rgba(16,16,18,.96);
        border:1px solid rgba(255,255,255,.08);
        box-shadow:var(--shadow);
    }
    .site-nav.is-open{
        display:flex;
    }
    .site-nav a{
        width:100%;
        text-align:center;
        padding:12px 14px;
    }
    .hero{
        padding-top:28px;
    }
    .hero h1{
        font-size:clamp(34px, 10vw, 48px);
    }
    .hero-lead{
        font-size:16px;
    }
    .poster-card{
        min-height:320px;
    }
    .stack-row{
        grid-template-columns:1fr;
    }
    .feature-grid{
        grid-template-columns:1fr;
    }
    .spot-copy h3,
    .browse-visual h3{
        font-size:22px;
    }
    .cta-inner{
        grid-template-columns:1fr;
    }
    .cta-actions{
        justify-content:flex-start;
    }
    .footer-grid{
        grid-template-columns:1fr;
    }
    .copyright{
        flex-direction:column;
        align-items:flex-start;
    }
}

@media (max-width: 520px){
    .container{
        width:min(var(--container), calc(100% - 24px));
    }
    .section{
        padding:64px 0;
    }
    .hero-actions,
    .cta-actions{
        flex-direction:column;
    }
    .btn{
        width:100%;
    }
    .poster-content,
    .spot-copy,
    .browse-visual .visual-copy,
    .cta-box{
        padding:18px;
    }
    .update-card,
    .browse-panel{
        padding:18px;
    }
    .mini-card{
        grid-template-columns:76px minmax(0, 1fr);
    }
    .mini-thumb{
        width:76px;
    }
    .faq-item summary{
        padding:16px;
    }
    .faq-answer{
        padding:0 16px 16px;
    }
}

/* roulang page: article */
:root{
    --bg:#111113;
    --bg-2:#161618;
    --bg-3:#1c1c1f;
    --surface:rgba(245,241,235,.96);
    --surface-2:rgba(236,231,223,.94);
    --surface-dark:rgba(255,255,255,.06);
    --text:#f4efe8;
    --text-dark:#1f1b17;
    --muted:#b6b0a7;
    --muted-dark:#6e665d;
    --line:rgba(255,255,255,.10);
    --line-dark:rgba(30,23,20,.10);
    --accent:#b4493c;
    --accent-2:#d28b39;
    --accent-3:#7c3129;
    --accent-soft:rgba(180,73,60,.16);
    --accent-soft-2:rgba(210,139,57,.16);
    --shadow:0 18px 50px rgba(0,0,0,.28);
    --shadow-soft:0 12px 30px rgba(0,0,0,.18);
    --radius:22px;
    --radius-sm:16px;
    --container:1180px;
    --gap:24px;
    --transition:all .24s ease;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",Arial,sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at 15% 10%, rgba(210,139,57,.14), transparent 24%),
        radial-gradient(circle at 85% 0%, rgba(180,73,60,.18), transparent 28%),
        linear-gradient(180deg, #121214 0%, #0f0f11 42%, #111113 100%);
    line-height:1.7;
    min-height:100vh;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit}
button{border:0;background:none;color:inherit;cursor:pointer}
:focus-visible{
    outline:3px solid rgba(210,139,57,.9);
    outline-offset:3px;
}
.container{
    width:min(var(--container), calc(100% - 32px));
    margin:0 auto;
}
main{display:block}
.section{
    padding:74px 0;
    position:relative;
}
.section-tight{padding:46px 0 60px}
.section-heading{
    display:flex;
    flex-wrap:wrap;
    align-items:end;
    justify-content:space-between;
    gap:12px;
    margin-bottom:22px;
}
.section-heading h2{
    margin:0;
    font-size:clamp(24px, 2.6vw, 34px);
    line-height:1.18;
    letter-spacing:.01em;
}
.section-heading p{
    margin:0;
    color:var(--muted);
    max-width:720px;
}
.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:rgba(255,255,255,.88);
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    padding:6px 10px;
    border-radius:999px;
    font-size:13px;
    letter-spacing:.02em;
}
.badge-soft{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:999px;
    background:var(--accent-soft);
    color:#fff;
    border:1px solid rgba(255,255,255,.08);
    font-size:13px;
}
.badge-warm{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:999px;
    background:var(--accent-soft-2);
    color:#fff;
    border:1px solid rgba(255,255,255,.08);
    font-size:13px;
}
.kbd-tag{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 8px;
    border-radius:10px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    color:rgba(255,255,255,.82);
    font-size:12px;
}
.ux-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:48px;
    padding:0 18px;
    border-radius:999px;
    border:1px solid transparent;
    font-weight:700;
    letter-spacing:.01em;
    transition:var(--transition);
    box-shadow:none;
    white-space:nowrap;
}
.ux-btn:hover{
    transform:translateY(-1px);
    filter:brightness(1.04);
}
.ux-btn:active{
    transform:translateY(0) scale(.98);
}
.ux-btn-primary{
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    color:#fff;
    box-shadow:0 12px 22px rgba(180,73,60,.22);
}
.ux-btn-primary:hover{box-shadow:0 16px 28px rgba(180,73,60,.28)}
.ux-btn-ghost{
    background:rgba(255,255,255,.05);
    color:#fff;
    border-color:rgba(255,255,255,.10);
}
.ux-btn-ghost:hover{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.18);
}
.ux-btn-light{
    background:var(--surface);
    color:var(--text-dark);
    border-color:var(--line-dark);
    box-shadow:0 10px 18px rgba(0,0,0,.08);
}
.ux-btn-light:hover{
    background:#fff;
    border-color:rgba(30,23,20,.14);
}
.site-header{
    position:sticky;
    top:0;
    z-index:60;
    backdrop-filter:saturate(150%) blur(18px);
    background:linear-gradient(180deg, rgba(15,15,17,.92), rgba(15,15,17,.72));
    border-bottom:1px solid var(--line);
}
.header-inner{
    min-height:84px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:18px;
    padding:14px 0;
    position:relative;
}
.brand{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
}
.brand-mark{
    width:48px;
    height:48px;
    border-radius:16px;
    display:grid;
    place-items:center;
    font-weight:800;
    letter-spacing:.04em;
    color:#fff;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow:0 12px 26px rgba(180,73,60,.22);
    flex:0 0 auto;
}
.brand-text{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
}
.brand-text strong{
    display:block;
    font-size:18px;
    line-height:1.15;
    letter-spacing:.02em;
}
.brand-text em{
    display:inline-flex;
    width:max-content;
    font-style:normal;
    font-size:12px;
    color:rgba(255,255,255,.82);
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);
    padding:4px 8px;
    border-radius:999px;
}
.site-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
}
.site-nav a{
    color:rgba(255,255,255,.82);
    padding:11px 14px;
    border-radius:999px;
    border:1px solid transparent;
    transition:var(--transition);
}
.site-nav a:hover{
    color:#fff;
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.08);
    transform:translateY(-1px);
}
.site-nav a.active,
.site-nav a[aria-current="page"]{
    color:#fff;
    background:linear-gradient(135deg, rgba(180,73,60,.94), rgba(210,139,57,.78));
    border-color:rgba(255,255,255,.08);
    box-shadow:0 10px 18px rgba(180,73,60,.22);
}
.header-tools{
    display:flex;
    align-items:center;
    gap:12px;
    justify-self:end;
}
.site-search{
    display:flex;
    align-items:center;
    gap:0;
    min-width:260px;
    max-width:320px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;
    overflow:hidden;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.site-search input{
    flex:1;
    min-width:0;
    border:0;
    outline:0;
    padding:12px 16px;
    background:transparent;
    color:#fff;
}
.site-search input::placeholder{color:rgba(255,255,255,.46)}
.site-search button{
    height:42px;
    padding:0 16px;
    margin:2px;
    border-radius:999px;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    color:#fff;
    font-weight:700;
    box-shadow:0 10px 20px rgba(180,73,60,.22);
    transition:var(--transition);
}
.site-search button:hover{
    filter:brightness(1.05);
    transform:translateY(-1px);
}
.menu-toggle{
    display:none;
    width:46px;
    height:46px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);
    align-items:center;
    justify-content:center;
    gap:4px;
    flex-direction:column;
    transition:var(--transition);
}
.menu-toggle:hover{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.16);
}
.menu-toggle span{
    display:block;
    width:18px;
    height:2px;
    background:#fff;
    border-radius:999px;
}
.article-hero{
    position:relative;
    padding:40px 0 26px;
}
.article-hero .hero-shell{
    position:relative;
    overflow:hidden;
    border-radius:28px;
    border:1px solid rgba(255,255,255,.10);
    background:
        linear-gradient(135deg, rgba(17,17,19,.92) 0%, rgba(17,17,19,.66) 55%, rgba(17,17,19,.38) 100%),
        url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
    box-shadow:var(--shadow);
}
.article-hero .hero-shell::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 12% 10%, rgba(180,73,60,.28), transparent 22%),
        radial-gradient(circle at 90% 15%, rgba(210,139,57,.18), transparent 26%);
    pointer-events:none;
}
.article-hero .hero-grid{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
    gap:28px;
    align-items:center;
    padding:32px;
}
.breadcrumb-trail{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    color:rgba(255,255,255,.72);
    font-size:14px;
    margin-bottom:14px;
}
.breadcrumb-trail a{
    color:#fff;
    opacity:.92;
}
.breadcrumb-trail span{opacity:.55}
.article-meta-bar{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    margin:18px 0 0;
}
.article-meta{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    color:rgba(255,255,255,.86);
    font-size:13px;
}
.article-hero h1{
    margin:0;
    font-size:clamp(30px, 4.2vw, 54px);
    line-height:1.12;
    letter-spacing:.01em;
    max-width:12em;
}
.article-hero .lead{
    margin:18px 0 0;
    max-width:54rem;
    color:rgba(255,255,255,.84);
    font-size:16px;
}
.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:24px;
}
.hero-visual{
    position:relative;
    min-height:320px;
}
.hero-card{
    position:relative;
    border-radius:24px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);
    box-shadow:0 20px 40px rgba(0,0,0,.22);
}
.hero-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    aspect-ratio:4/4.2;
    filter:saturate(1.02) contrast(1.02);
}
.hero-card .image-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(17,17,19,.08), rgba(17,17,19,.62));
}
.hero-card .image-caption{
    position:absolute;
    left:16px;
    right:16px;
    bottom:16px;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.image-caption strong{
    font-size:20px;
    line-height:1.2;
}
.image-caption span{
    color:rgba(255,255,255,.82);
    font-size:14px;
}
.article-main{
    padding:16px 0 24px;
}
.article-grid{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(300px,.55fr);
    gap:24px;
    align-items:start;
}
.panel{
    background:var(--surface);
    color:var(--text-dark);
    border:1px solid var(--line-dark);
    border-radius:var(--radius);
    box-shadow:var(--shadow-soft);
}
.panel-dark{
    background:rgba(255,255,255,.05);
    color:#fff;
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius);
    box-shadow:var(--shadow-soft);
}
.article-card{
    padding:30px;
    overflow:hidden;
}
.article-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
}
.article-title-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
}
.article-title-row .badge-soft,
.article-title-row .badge-warm{
    transform:translateY(-1px);
}
.article-card .article-title{
    margin:0;
    font-size:clamp(24px, 2.8vw, 38px);
    line-height:1.18;
    color:var(--text-dark);
}
.article-info{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}
.info-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 12px;
    border-radius:999px;
    background:rgba(180,73,60,.08);
    color:var(--accent-3);
    border:1px solid rgba(180,73,60,.12);
    font-size:13px;
}
.article-summary{
    margin:16px 0 0;
    color:var(--muted-dark);
    font-size:16px;
}
.article-content{
    margin-top:22px;
    font-size:16px;
    line-height:1.9;
    color:var(--text-dark);
}
.article-content p{
    margin:0 0 1em;
}
.article-content h2,
.article-content h3,
.article-content h4{
    color:var(--text-dark);
    line-height:1.25;
    margin:1.6em 0 .7em;
    scroll-margin-top:100px;
}
.article-content h2{font-size:clamp(22px, 2vw, 28px)}
.article-content h3{font-size:clamp(18px, 1.6vw, 22px)}
.article-content h4{font-size:18px}
.article-content ul,
.article-content ol{
    padding-left:1.25em;
    margin:0 0 1em;
}
.article-content li{margin:.45em 0}
.article-content blockquote{
    margin:1.2em 0;
    padding:18px 18px 18px 20px;
    border-left:4px solid var(--accent);
    background:rgba(180,73,60,.07);
    border-radius:16px;
    color:#3d302a;
}
.article-content hr{
    border:0;
    border-top:1px solid rgba(30,23,20,.12);
    margin:1.5em 0;
}
.article-content img{
    border-radius:18px;
    margin:1.2em 0;
    box-shadow:0 16px 30px rgba(0,0,0,.10);
}
.article-content a{
    color:var(--accent);
    text-decoration:underline;
    text-underline-offset:3px;
}
.article-content .tip,
.article-content .notice,
.article-content .callout{
    margin:1.2em 0;
    padding:16px 18px;
    border-radius:18px;
    background:linear-gradient(135deg, rgba(210,139,57,.12), rgba(180,73,60,.08));
    border:1px solid rgba(180,73,60,.12);
    color:#41332d;
}
.article-end-cta{
    margin-top:26px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    padding-top:22px;
    border-top:1px solid rgba(30,23,20,.10);
}
.article-aside{
    display:grid;
    gap:18px;
}
.aside-card{
    padding:22px;
}
.aside-title{
    margin:0 0 12px;
    font-size:18px;
    line-height:1.25;
    color:var(--text-dark);
}
.aside-title.dark{
    color:#fff;
}
.aside-text{
    margin:0;
    color:var(--muted-dark);
}
.aside-meta-list{
    display:grid;
    gap:10px;
    margin-top:14px;
}
.aside-meta-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border-radius:16px;
    background:rgba(255,255,255,.55);
    border:1px solid rgba(30,23,20,.08);
}
.aside-meta-item span:first-child{
    color:var(--muted-dark);
}
.aside-meta-item strong{
    color:var(--text-dark);
}
.related-list{
    display:grid;
    gap:14px;
}
.related-item{
    display:grid;
    grid-template-columns:92px minmax(0,1fr);
    gap:12px;
    align-items:center;
    padding:10px;
    border-radius:18px;
    background:rgba(255,255,255,.58);
    border:1px solid rgba(30,23,20,.08);
    transition:var(--transition);
}
.related-item:hover{
    transform:translateY(-2px);
    border-color:rgba(180,73,60,.18);
    box-shadow:0 12px 24px rgba(0,0,0,.08);
}
.related-item img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:14px;
}
.related-copy strong{
    display:block;
    color:var(--text-dark);
    line-height:1.35;
    margin-bottom:6px;
    font-size:15px;
}
.related-copy p{
    margin:0;
    color:var(--muted-dark);
    font-size:13px;
    line-height:1.6;
}
.quick-links{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.quick-links .ux-btn{
    flex:1 1 160px;
}
.prev-next{
    display:grid;
    gap:10px;
}
.pn-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:13px 14px;
    border-radius:16px;
    background:rgba(255,255,255,.58);
    border:1px solid rgba(30,23,20,.08);
    transition:var(--transition);
}
.pn-link:hover{
    transform:translateY(-1px);
    border-color:rgba(180,73,60,.18);
    box-shadow:0 12px 24px rgba(0,0,0,.08);
}
.pn-link span:first-child{
    color:var(--muted-dark);
    font-size:13px;
}
.pn-link strong{
    color:var(--text-dark);
    font-size:14px;
    line-height:1.4;
}
.faq-wrap{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}
.faq-item{
    padding:0;
    overflow:hidden;
}
.faq-item details{
    display:block;
}
.faq-item summary{
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:20px 22px;
    font-weight:700;
    color:var(--text-dark);
    user-select:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
    content:"+";
    width:30px;
    height:30px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(180,73,60,.08);
    color:var(--accent-3);
    font-size:20px;
    line-height:1;
    transition:var(--transition);
}
.faq-item details[open] summary::after{content:"–"}
.faq-answer{
    padding:0 22px 20px;
    color:var(--muted-dark);
}
.cta-band{
    margin-top:18px;
    padding:26px 28px;
    border-radius:28px;
    background:
        linear-gradient(135deg, rgba(180,73,60,.92), rgba(210,139,57,.76)),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
    color:#fff;
    box-shadow:0 16px 32px rgba(180,73,60,.24);
    border:1px solid rgba(255,255,255,.08);
}
.cta-band h2{
    margin:0;
    font-size:clamp(22px, 2.4vw, 32px);
    line-height:1.2;
}
.cta-band p{
    margin:10px 0 0;
    max-width:720px;
    color:rgba(255,255,255,.88);
}
.cta-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:18px;
}
.cta-band .ux-btn-light{
    background:#fff;
}
.empty-state{
    padding:74px 0 90px;
}
.empty-card{
    max-width:760px;
    margin:0 auto;
    text-align:center;
    padding:40px 30px;
    border-radius:28px;
    background:var(--surface);
    color:var(--text-dark);
    border:1px solid var(--line-dark);
    box-shadow:var(--shadow-soft);
}
.empty-card h1{
    margin:0;
    font-size:clamp(28px, 3vw, 40px);
    line-height:1.15;
}
.empty-card p{
    margin:14px auto 0;
    max-width:40em;
    color:var(--muted-dark);
}
.empty-card .ux-btn{
    margin-top:22px;
}
.site-footer{
    padding:28px 0 18px;
    border-top:1px solid var(--line);
    background:linear-gradient(180deg, rgba(15,15,17,.76), rgba(15,15,17,.96));
}
.footer-grid{
    display:grid;
    grid-template-columns:1.4fr .8fr 1fr;
    gap:24px;
    padding:14px 0 22px;
}
.footer-brand p,
.footer-tech p{
    margin:14px 0 0;
    color:rgba(255,255,255,.72);
}
.footer-title{
    font-size:14px;
    color:#fff;
    font-weight:700;
    margin-bottom:14px;
}
.footer-links{
    display:grid;
    gap:10px;
    align-content:start;
}
.footer-links a{
    color:rgba(255,255,255,.74);
    transition:var(--transition);
}
.footer-links a:hover{
    color:#fff;
    transform:translateX(2px);
}
.copyright{
    padding-top:18px;
    border-top:1px solid var(--line);
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:space-between;
    color:rgba(255,255,255,.66);
    font-size:13px;
}
@media (max-width: 1199.98px){
    .article-hero .hero-grid{
        grid-template-columns:1fr .9fr;
    }
    .article-grid{
        grid-template-columns:1fr .8fr;
    }
}
@media (max-width: 991.98px){
    .header-inner{
        grid-template-columns:auto 1fr auto;
    }
    .site-search{
        display:none;
    }
    .menu-toggle{
        display:inline-flex;
    }
    .site-nav{
        position:absolute;
        left:0;
        right:0;
        top:calc(100% + 10px);
        padding:12px;
        border-radius:20px;
        background:rgba(15,15,17,.96);
        border:1px solid rgba(255,255,255,.10);
        box-shadow:var(--shadow);
        display:none;
        justify-content:flex-start;
    }
    .site-header.nav-open .site-nav{
        display:flex;
    }
    .article-hero .hero-grid,
    .article-grid,
    .footer-grid,
    .faq-wrap{
        grid-template-columns:1fr;
    }
    .hero-visual{
        min-height:auto;
    }
    .hero-card img{
        aspect-ratio:16/10;
    }
}
@media (max-width: 767.98px){
    .section{padding:58px 0}
    .article-hero{
        padding-top:24px;
    }
    .article-hero .hero-shell{
        border-radius:24px;
    }
    .article-hero .hero-grid{
        padding:22px;
    }
    .article-card,
    .aside-card,
    .cta-band{
        padding:20px;
        border-radius:22px;
    }
    .article-toolbar{
        align-items:flex-start;
    }
    .site-nav{
        gap:6px;
    }
    .site-nav a{
        padding:10px 12px;
    }
    .related-item{
        grid-template-columns:78px minmax(0,1fr);
    }
}
@media (max-width: 575.98px){
    .container{width:min(var(--container), calc(100% - 22px))}
    .brand-mark{width:42px;height:42px;border-radius:14px}
    .brand-text strong{font-size:16px}
    .brand-text em{font-size:11px}
    .header-inner{min-height:74px}
    .article-hero h1{max-width:100%}
    .hero-actions,
    .cta-actions,
    .quick-links{
        flex-direction:column;
    }
    .ux-btn,
    .quick-links .ux-btn{
        width:100%;
    }
    .article-content{
        font-size:15px;
        line-height:1.85;
    }
    .article-card,
    .aside-card{
        padding:18px;
    }
    .pn-link{
        align-items:flex-start;
        flex-direction:column;
    }
    .copyright{
        flex-direction:column;
    }
}
@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}

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