:root {
  color-scheme: light;
  --ink: #26302b;
  --muted: #687269;
  --paper: #fbf8ee;
  --surface: #fffdf6;
  --line: #e4dac7;
  --accent: #a8323a;
  --deep: #263733;
  --shadow: 0 18px 45px rgba(46, 39, 30, .12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", Arial, sans-serif; line-height: 1.6; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.site-header { position: sticky; top: 0; z-index: 10; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px clamp(20px, 4vw, 64px); border-bottom: 1px solid rgba(228,218,199,.75); background: rgba(251,248,238,.88); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 850; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--accent); color: #fff8e8; }
.nav { display: flex; align-items: center; gap: clamp(14px, 3vw, 34px); color: var(--muted); font-size: 15px; }
.nav a:hover, .network-links a:hover { color: var(--accent); }
.hero { position: relative; min-height: calc(100vh - 72px); display: grid; align-items: center; overflow: hidden; background: #e9f0e8; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(251,248,238,.92), rgba(251,248,238,.72) 42%, rgba(251,248,238,.08) 82%); }
.hero-copy { position: relative; z-index: 1; width: min(690px, calc(100% - 40px)); margin-left: clamp(20px, 6vw, 90px); padding: 60px 0 140px; }
.eyebrow, .section-kicker, .tag { margin: 0 0 10px; color: var(--accent); font-size: 12px; font-weight: 850; letter-spacing: 0; text-transform: uppercase; }
h1, h2, h3 { margin-top: 0; line-height: 1.12; letter-spacing: 0; }
.hero h1 { margin-bottom: 22px; font-size: clamp(50px, 7vw, 96px); }
.hero p:not(.eyebrow) { max-width: 650px; margin: 0; color: #566158; font-size: clamp(17px, 2vw, 21px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 11px 20px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-weight: 780; }
.button.primary { border-color: var(--accent); background: var(--accent); color: #fffaf0; }
.button.ghost { background: rgba(255,255,255,.58); }
.hero-stats { position: absolute; z-index: 2; left: clamp(20px, 6vw, 90px); right: clamp(20px, 6vw, 90px); bottom: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid rgba(228,218,199,.75); border-radius: 8px; background: rgba(255,253,246,.84); backdrop-filter: blur(14px); box-shadow: var(--shadow); }
.hero-stats span { min-height: 74px; display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 14px; background: rgba(255,255,255,.42); color: var(--muted); }
.hero-stats strong { color: var(--accent); font-size: 29px; }
.intro, .toolbar, .creative, .keywords, .network, .sources { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.intro { display: grid; grid-template-columns: minmax(280px, .95fr) minmax(320px, 1.05fr); gap: clamp(28px, 6vw, 84px); padding: 86px 0 54px; }
.intro h2, .toolbar h2, .creative h2, .keywords h2, .network h2 { font-size: clamp(28px, 4vw, 46px); }
.intro > p, .creative p, .network p, .sources p, .product-content p:not(.tag), .set-list p { color: var(--muted); }
.toolbar { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 42px 0 22px; }
.filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.filter { min-width: 72px; min-height: 40px; border: 1px solid var(--line); border-radius: 8px; background: #fffdf6; color: var(--muted); cursor: pointer; }
.filter.is-active { border-color: var(--deep); background: var(--deep); color: white; }
.products { width: min(1180px, calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding-bottom: 84px; }
.product-card { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 12px 28px rgba(46,39,30,.08); transition: transform .2s ease, box-shadow .2s ease; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.product-card.is-hidden { display: none; }
.product-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 1px solid var(--line); }
.product-content { padding: 20px; }
.product-content h3 { margin-bottom: 8px; font-size: 24px; }
.meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; color: var(--deep); font-weight: 780; }
.creative { display: grid; grid-template-columns: .78fr 1.22fr; gap: 30px; padding: 72px clamp(20px, 4vw, 54px); border-radius: 8px; background: var(--deep); color: #fff8e8; }
.creative .section-kicker { color: #efc277; }
.set-list { display: grid; gap: 14px; }
.set-list article { display: grid; grid-template-columns: 56px 1fr; gap: 10px 18px; padding: 20px; border: 1px solid rgba(255,248,232,.18); border-radius: 8px; background: rgba(255,255,255,.06); }
.set-list span { grid-row: span 2; color: #efc277; font-size: 28px; font-weight: 900; }
.set-list h3 { margin-bottom: 0; }
.set-list p { margin: 0; color: rgba(255,248,232,.75); }
.keywords, .network, .sources { padding: 64px 0 0; }
.keyword-list, .network-links, .source-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.keyword-list span, .network-links a, .source-links a { min-height: 36px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fffdf6; color: var(--deep); font-weight: 750; }
.network { display: grid; grid-template-columns: .8fr 1.2fr; gap: 28px; align-items: start; }
.network-links a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: white; }
.sources { padding-bottom: 64px; border-top: 1px solid var(--line); margin-top: 64px; }
.sources h2 { font-size: 18px; }
.footer { display: flex; justify-content: space-between; gap: 18px; padding: 26px clamp(20px, 4vw, 64px); border-top: 1px solid var(--line); color: var(--muted); }
.theme-chengdu { --paper: #fbf3e6; --surface: #fff9ee; --line: #ead6bb; background: radial-gradient(circle at 18% 18%, rgba(182,52,61,.10), transparent 28%), radial-gradient(circle at 85% 8%, rgba(38,55,51,.10), transparent 26%), var(--paper); }
.theme-chengdu .hero::after { background: linear-gradient(90deg, rgba(251,243,230,.94), rgba(251,243,230,.70) 44%, rgba(251,243,230,.06) 82%); }
.theme-chengdu .products { grid-template-columns: 1.1fr .95fr .95fr; }
.theme-chengdu .product-card:nth-child(1) { border-top: 5px solid #263733; }
.theme-chengdu .creative { background: linear-gradient(135deg, #263733, #6f3030); }
.theme-chengdu .intro { border-left: 8px solid rgba(38,55,51,.22); padding-left: clamp(18px, 3vw, 42px); }
.theme-chengdu .keyword-list span { border-radius: 999px; }
.theme-sichuan { --paper: #fff5ec; --surface: #fffaf3; --line: #edd0bd; background: linear-gradient(180deg, #fff5ec 0%, #f8eee4 100%); }
.theme-sichuan .hero::after { background: linear-gradient(90deg, rgba(255,245,236,.93), rgba(255,245,236,.64) 42%, rgba(167,50,57,.10) 82%); }
.theme-sichuan .hero h1 { color: #8d2730; }
.theme-sichuan .product-card:nth-child(3n) { background: #fff3e9; }
.theme-sichuan .creative { background: #3b2b24; }
.theme-sichuan .toolbar { border-top: 1px solid #e3b69a; border-bottom: 1px solid #e3b69a; }
.theme-sichuan .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.theme-sichuan .product-card { display: grid; grid-template-columns: .92fr 1fr; }
.theme-sichuan .product-card img { height: 100%; aspect-ratio: auto; }
.theme-beibuwan { --paper: #eef8f7; --surface: #fbfffd; --line: #c9e3df; --muted: #587572; background: linear-gradient(180deg, #eef8f7, #f7fbf5); }
.theme-beibuwan .hero::after { background: linear-gradient(90deg, rgba(238,248,247,.92), rgba(238,248,247,.56) 45%, rgba(30,124,135,.16) 86%); }
.theme-beibuwan .hero-copy { margin-left: auto; margin-right: clamp(20px, 6vw, 90px); }
.theme-beibuwan .products { gap: 22px; }
.theme-beibuwan .product-card { border-radius: 0 18px 0 18px; }
.theme-beibuwan .creative { background: linear-gradient(135deg, #17393d, #1e7c87); }
.theme-beibuwan .network { border-top: 3px double rgba(30,124,135,.35); }
.theme-guangxi { --paper: #f3f7e9; --surface: #fffdf1; --line: #d8dfbd; background: repeating-linear-gradient(135deg, rgba(38,123,97,.08) 0 10px, transparent 10px 30px), var(--paper); }
.theme-guangxi .hero::after { background: linear-gradient(90deg, rgba(243,247,233,.94), rgba(243,247,233,.66) 40%, rgba(38,123,97,.10) 82%); }
.theme-guangxi .product-card img { border-bottom: 5px solid rgba(38,123,97,.25); }
.theme-guangxi .creative { background: linear-gradient(135deg, #213c35, #6c2e49); }
.theme-guangxi .hero-copy { text-align: center; margin-left: auto; margin-right: auto; }
.theme-guangxi .hero-actions { justify-content: center; }
.theme-guangxi .intro { background: rgba(255,253,241,.74); padding: 42px; border: 1px solid var(--line); border-radius: 8px; margin-top: 70px; }
.theme-nanning { --paper: #f1f8ed; --surface: #fefff8; --line: #d4e4c9; background: radial-gradient(circle at 82% 18%, rgba(255,255,220,.55), transparent 22%), linear-gradient(180deg, #f1f8ed, #fbf8ee); }
.theme-nanning .hero::after { background: linear-gradient(90deg, rgba(241,248,237,.95), rgba(241,248,237,.68) 44%, rgba(43,133,98,.09) 84%); }
.theme-nanning .brand-mark, .theme-nanning .button.primary { border-radius: 999px; }
.theme-nanning .product-card { box-shadow: 0 10px 26px rgba(43,133,98,.10); }
.theme-nanning .creative { background: #1e3f34; }
.theme-nanning .products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.theme-nanning .product-card:nth-child(1), .theme-nanning .product-card:nth-child(2) { grid-column: span 2; }
.theme-nanning .filter { border-radius: 999px; }
.theme-yibin { --paper: #fbf0e7; --surface: #fffaf2; --line: #e7cdbd; background: linear-gradient(90deg, rgba(157,52,54,.08), transparent 32%), var(--paper); }
.theme-yibin .hero::after { background: linear-gradient(90deg, rgba(251,240,231,.94), rgba(251,240,231,.68) 40%, rgba(72,105,75,.12) 84%); }
.theme-yibin .hero h1 { color: #7d292c; }
.theme-yibin .product-card:nth-child(3) { border-left: 6px solid #55784e; }
.theme-yibin .creative { background: linear-gradient(135deg, #5b2528, #263735); }
.theme-yibin .site-header { background: rgba(48,37,34,.90); color: #fff8e8; }
.theme-yibin .nav { color: rgba(255,248,232,.72); }
.theme-yibin .sets, .theme-yibin .creative { box-shadow: 0 24px 60px rgba(91,37,40,.16); }
@media (max-width: 900px) { .site-header { align-items: flex-start; flex-direction: column; } .intro, .creative, .network { grid-template-columns: 1fr; } .toolbar { align-items: start; flex-direction: column; } .filters { justify-content: flex-start; } .products { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero::after { background: linear-gradient(180deg, rgba(251,248,238,.94), rgba(251,248,238,.78) 56%, rgba(251,248,238,.16)); } }
@media (max-width: 640px) { .nav { width: 100%; justify-content: space-between; } .hero { min-height: 820px; } .hero-copy { width: calc(100% - 32px); margin-left: 16px; } .hero-stats { left: 16px; right: 16px; grid-template-columns: 1fr; } .hero-stats span { min-height: 54px; } .intro, .toolbar, .creative, .keywords, .network, .sources { width: calc(100% - 32px); } .products { width: min(100% - 32px, 430px); grid-template-columns: 1fr; } .creative { padding: 42px 18px; } .set-list article { grid-template-columns: 1fr; } .set-list span { grid-row: auto; } .footer { flex-direction: column; } }
@media (max-width: 640px) { .theme-sichuan .products, .theme-nanning .products, .theme-chengdu .products { grid-template-columns: 1fr; } .theme-sichuan .product-card { display: block; } .theme-beibuwan .hero-copy, .theme-guangxi .hero-copy { margin-left: 16px; margin-right: 16px; text-align: left; } .theme-guangxi .hero-actions { justify-content: flex-start; } }