/* roulang page: index */
:root{
--am:#c9762a;
--am2:#241a13;
--bg:#fbf8f2;
--fg:#1a1512;
--mut:#6f685c;
--ln:#e7dfd1;
--rd:18px;
--sd:0 16px 34px rgba(26,21,18,.09);
--sp:clamp(1.2rem,3.6vw,3rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.7 "PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure,figcaption{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--am);outline-offset:3px;border-radius:8px}
.gcdvvm-bar{position:sticky;top:0;z-index:40;background:rgba(251,248,242,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--ln)}
.gcdvvm-bar-in{display:flex;align-items:center;gap:1rem;width:min(1180px,92%);margin:0 auto;min-height:66px}
.gcdvvm-logo{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.02rem;letter-spacing:.01em;flex:none}
.gcdvvm-logo span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--am2);color:#f3c17a;font-size:1.02rem}
.gcdvvm-nav{margin-left:auto;display:flex;align-items:center;gap:.15rem;overflow-x:auto;scrollbar-width:none}
.gcdvvm-nav::-webkit-scrollbar{display:none}
.gcdvvm-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .78rem;border-radius:11px;color:var(--mut);font-size:.94rem;white-space:nowrap;transition:background .2s,color .2s}
.gcdvvm-nav a:hover{color:var(--fg);background:#f1eadc}
.gcdvvm-nav a.gcdvvm-on{color:#fff;background:var(--am)}
.gcdvvm-hero{position:relative;overflow:hidden;background:var(--am2);color:#f7f1e6;isolation:isolate;scroll-margin-top:78px}
.gcdvvm-hero::before{content:"";position:absolute;inset:0;background:url("/assets/images/backpic/back-1.webp") center/cover no-repeat;opacity:.3;z-index:-1}
.gcdvvm-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(36,26,19,.95) 32%,rgba(36,26,19,.58) 100%);z-index:-1}
.gcdvvm-hero-in{display:grid;grid-template-columns:1.12fr .88fr;gap:var(--sp);align-items:center;width:min(1180px,92%);margin:0 auto;padding:calc(var(--sp)*1.5) 0 calc(var(--sp)*1.3)}
.gcdvvm-tag{display:inline-block;padding:.32rem .85rem;border-radius:999px;background:#f0b45f;color:#2a1d12;font-size:.8rem;font-weight:700;letter-spacing:.08em}
.gcdvvm-hero h1{font-size:clamp(1.85rem,5.4vw,3.3rem);line-height:1.18;letter-spacing:-.02em;margin:.75rem 0 .6rem}
.gcdvvm-hero h1 span{color:#f0b45f}
.gcdvvm-sub{font-size:clamp(1rem,2vw,1.18rem);color:#f3e8d5;margin-bottom:.85rem}
.gcdvvm-desc{color:#cdc0ad;font-size:.95rem;max-width:48ch}
.gcdvvm-limit{display:inline-block;margin-top:1rem;font-size:.86rem;color:#f0b45f;border:1px dashed rgba(240,180,95,.6);border-radius:999px;padding:.32rem .9rem}
.gcdvvm-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 1.35rem;border-radius:999px;font-weight:600;font-size:.95rem;transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.gcdvvm-btn-main{background:#f0b45f;color:#2a1d12;box-shadow:0 12px 26px rgba(240,180,95,.28)}
.gcdvvm-btn-main:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(240,180,95,.38)}
.gcdvvm-btn-ghost{border:1px solid rgba(247,241,230,.45);color:#f7f1e6}
.gcdvvm-btn-ghost:hover{background:rgba(247,241,230,.12)}
.gcdvvm-hero-txt .gcdvvm-btn{margin:1.15rem .6rem 0 0}
.gcdvvm-poster{position:relative;justify-self:end;width:min(360px,100%);border-radius:calc(var(--rd)*1.2);overflow:hidden;box-shadow:0 26px 50px rgba(0,0,0,.42);border:1px solid rgba(240,180,95,.28);transform:rotate(-1.4deg)}
.gcdvvm-poster img{width:100%;aspect-ratio:4/5;object-fit:cover}
.gcdvvm-poster figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.5rem .95rem .85rem;font-size:.86rem;color:#f7f1e6;background:linear-gradient(transparent,rgba(20,14,10,.88))}
.gcdvvm-stamp{position:absolute;top:.7rem;right:.7rem;background:#f0b45f;color:#2a1d12;font-size:.76rem;font-weight:700;padding:.24rem .6rem;border-radius:8px;transform:rotate(4deg)}
.gcdvvm-sec{padding:calc(var(--sp)*1.15) 0;scroll-margin-top:78px}
.gcdvvm-alt{background:#f4ede1}
.gcdvvm-wrap{width:min(1180px,92%);margin:0 auto}
.gcdvvm-head{max-width:700px;margin-bottom:1.7rem}
.gcdvvm-kicker{display:block;font-size:.78rem;letter-spacing:.26em;color:var(--am);font-weight:700;margin-bottom:.5rem}
.gcdvvm-h2{font-size:clamp(1.35rem,3vw,1.9rem);line-height:1.32;letter-spacing:-.01em}
.gcdvvm-lead{margin-top:.65rem;color:var(--mut);font-size:.96rem}
.gcdvvm-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.gcdvvm-trio li{background:#fff;border:1px solid var(--ln);border-radius:var(--rd);padding:1.3rem;box-shadow:0 1px 0 rgba(26,21,18,.03);transition:transform .25s,box-shadow .25s}
.gcdvvm-trio li:hover{transform:translateY(-3px);box-shadow:var(--sd)}
.gcdvvm-num{display:block;font-size:.82rem;letter-spacing:.2em;color:var(--am);font-weight:700}
.gcdvvm-trio h3{margin:.5rem 0 .4rem;font-size:1.05rem}
.gcdvvm-trio p{color:var(--mut);font-size:.9rem}
.gcdvvm-tags{display:flex;flex-wrap:wrap;gap:.6rem}
.gcdvvm-tags li{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1.1rem;border-radius:999px;background:#fff;border:1px solid var(--ln);font-size:.93rem;color:#3a322a}
.gcdvvm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.gcdvvm-card{background:#fff;border:1px solid var(--ln);border-radius:var(--rd);overflow:hidden;transition:transform .25s,box-shadow .25s}
.gcdvvm-card:hover{transform:translateY(-4px);box-shadow:var(--sd)}
.gcdvvm-thumb{position:relative;aspect-ratio:3/4;overflow:hidden;background:#e9e1d3}
.gcdvvm-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.gcdvvm-card:hover .gcdvvm-thumb img{transform:scale(1.06)}
.gcdvvm-pill{position:absolute;top:.55rem;left:.55rem;padding:.2rem .58rem;border-radius:8px;background:rgba(26,21,18,.82);color:#f4c98a;font-size:.74rem;letter-spacing:.06em}
.gcdvvm-card h3{padding:.75rem .85rem .2rem;font-size:1rem;line-height:1.45}
.gcdvvm-card p{padding:0 .85rem .95rem;color:var(--mut);font-size:.9rem;line-height:1.62}
.gcdvvm-rank{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
.gcdvvm-rank li{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:.8rem;background:#fff;border:1px solid var(--ln);border-radius:14px;padding:.62rem .9rem;transition:border-color .2s,transform .2s}
.gcdvvm-rank li:hover{border-color:var(--am);transform:translateY(-2px)}
.gcdvvm-no{font-size:1rem;font-weight:700;color:var(--am);font-variant-numeric:tabular-nums}
.gcdvvm-rank h3{font-size:.95rem;font-weight:600;line-height:1.4}
.gcdvvm-rank-meta{font-size:.8rem;color:var(--mut);white-space:nowrap}
.gcdvvm-recs{display:grid;gap:.9rem}
.gcdvvm-rec{display:grid;grid-template-columns:150px 1fr;gap:1rem;align-items:center;background:#fff;border:1px solid var(--ln);border-radius:var(--rd);padding:.7rem;transition:transform .25s,box-shadow .25s}
.gcdvvm-rec:hover{transform:translateX(4px);box-shadow:var(--sd)}
.gcdvvm-rec .gcdvvm-thumb{aspect-ratio:16/10;border-radius:12px}
.gcdvvm-rec h3{font-size:1rem;margin-bottom:.25rem}
.gcdvvm-rec p{font-size:.9rem;color:var(--mut)}
.gcdvvm-news li{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:baseline;justify-content:space-between;padding:.95rem .2rem;border-bottom:1px dashed var(--ln)}
.gcdvvm-news li:last-child{border-bottom:0}
.gcdvvm-news h3{flex:1 1 260px;font-size:.98rem;font-weight:600;line-height:1.55}
.gcdvvm-news time{font-size:.8rem;color:var(--am);white-space:nowrap}
.gcdvvm-save{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:center;background:#fff;border:1px solid var(--ln);border-radius:calc(var(--rd)*1.2);padding:calc(var(--sp)*.9)}
.gcdvvm-save h2{font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.35;margin-bottom:.6rem}
.gcdvvm-save p{color:var(--mut);font-size:.94rem}
.gcdvvm-points li{position:relative;padding-left:1.5rem;margin-bottom:.7rem;font-size:.93rem;color:#3a322a}
.gcdvvm-points li:last-child{margin-bottom:0}
.gcdvvm-points li::before{content:"";position:absolute;left:0;top:.68em;width:8px;height:8px;border-radius:2px;background:var(--am)}
.gcdvvm-topics{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.gcdvvm-topic{background:#fff;border:1px solid var(--ln);border-radius:var(--rd);overflow:hidden;transition:transform .25s,box-shadow .25s}
.gcdvvm-topic:hover{transform:translateY(-4px);box-shadow:var(--sd)}
.gcdvvm-topic img{width:100%;aspect-ratio:16/9;object-fit:cover}
.gcdvvm-topic h3{padding:.85rem .95rem .2rem;font-size:1rem}
.gcdvvm-topic p{padding:0 .95rem .95rem;font-size:.9rem;color:var(--mut)}
.gcdvvm-creators{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.gcdvvm-creator{display:flex;gap:.9rem;align-items:center;background:#fff;border:1px solid var(--ln);border-radius:var(--rd);padding:1rem;transition:transform .25s,box-shadow .25s}
.gcdvvm-creator:hover{transform:translateY(-3px);box-shadow:var(--sd)}
.gcdvvm-avatar{width:62px;height:62px;border-radius:50%;object-fit:cover;flex:none;border:2px solid #f0e3cd}
.gcdvvm-creator h3{font-size:.98rem}
.gcdvvm-creator p{font-size:.86rem;color:var(--mut);line-height:1.55}
.gcdvvm-creator em{display:block;margin-top:.25rem;font-style:normal;font-size:.78rem;color:var(--am)}
.gcdvvm-voices{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.gcdvvm-voice{background:#fff;border:1px solid var(--ln);border-left:3px solid var(--am);border-radius:14px;padding:1rem 1.1rem;transition:box-shadow .25s}
.gcdvvm-voice:hover{box-shadow:var(--sd)}
.gcdvvm-voice p{font-size:.93rem;color:#3a322a}
.gcdvvm-who{display:block;margin-top:.6rem;font-size:.82rem;color:var(--mut)}
.gcdvvm-note{background:#fff8ec;border:1px solid #f0dcbb;border-radius:var(--rd);padding:1.15rem 1.3rem;color:#5d5245;font-size:.9rem}
.gcdvvm-note strong{color:#8a5a1c}
.gcdvvm-cta{position:relative;overflow:hidden;background:var(--am2);color:#f6efe3;border-radius:calc(var(--rd)*1.3);padding:calc(var(--sp)*1.05);display:grid;gap:.5rem;justify-items:start}
.gcdvvm-cta::after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(240,180,95,.35),transparent 70%)}
.gcdvvm-cta h2{font-size:clamp(1.3rem,2.8vw,1.7rem);position:relative}
.gcdvvm-cta p{color:#cdc0ad;position:relative;max-width:56ch;font-size:.95rem}
.gcdvvm-cta .gcdvvm-btn-main{margin-top:.8rem;position:relative}
.gcdvvm-foot{background:#1a1512;color:#bdb2a1;margin-top:calc(var(--sp)*1.1);padding:calc(var(--sp)*1.05) 0 1.4rem}
.gcdvvm-foot-grid{width:min(1180px,92%);margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:1.6rem}
.gcdvvm-foot-col h3{color:#f6efe3;font-size:.95rem;margin-bottom:.7rem}
.gcdvvm-foot-col p,.gcdvvm-foot-col li{font-size:.86rem;line-height:1.85}
.gcdvvm-foot-col a:hover{color:#f0b45f}
.gcdvvm-copy{width:min(1180px,92%);margin:1.6rem auto 0;padding-top:1rem;border-top:1px solid #302722;font-size:.8rem;color:#8d8375;display:flex;flex-wrap:wrap;gap:.4rem 1rem;justify-content:space-between}
@media (max-width:1024px){
.gcdvvm-hero-in{grid-template-columns:1fr}
.gcdvvm-poster{justify-self:start;width:min(300px,70%);transform:none}
.gcdvvm-grid{grid-template-columns:repeat(3,1fr)}
.gcdvvm-rank{grid-template-columns:1fr}
.gcdvvm-save{grid-template-columns:1fr}
.gcdvvm-foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
.gcdvvm-bar-in{flex-wrap:wrap;padding:.45rem 0;gap:.4rem}
.gcdvvm-nav{width:100%;margin-left:0;order:3;padding-bottom:.2rem}
.gcdvvm-grid{grid-template-columns:repeat(2,1fr)}
.gcdvvm-trio,.gcdvvm-topics,.gcdvvm-creators,.gcdvvm-voices{grid-template-columns:1fr}
.gcdvvm-rec{grid-template-columns:110px 1fr}
}
@media (max-width:520px){
.gcdvvm-hero h1{font-size:1.68rem}
.gcdvvm-hero-in{padding:calc(var(--sp)*1.15) 0 calc(var(--sp)*1.1)}
.gcdvvm-hero-txt .gcdvvm-btn{width:100%;margin:1rem 0 0}
.gcdvvm-grid{gap:.75rem}
.gcdvvm-card h3{font-size:.92rem;padding:.62rem .68rem .15rem}
.gcdvvm-card p{font-size:.875rem;padding:0 .68rem .82rem}
.gcdvvm-rec{grid-template-columns:1fr}
.gcdvvm-rec .gcdvvm-thumb{aspect-ratio:16/9}
.gcdvvm-topics{gap:.8rem}
.gcdvvm-foot-grid{grid-template-columns:1fr}
.gcdvvm-btn{width:100%}
.gcdvvm-cta .gcdvvm-btn-main{width:100%}
}