:root { --ink:#18202f; --muted:#697386; --paper:#f6f8fc; --white:#fff; --coral:#ff5d57; --blue:#4d67eb; --line:#e6eaf2; --deep:#171d33; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Microsoft YaHei", "PingFang SC", sans-serif; font-size:16px; line-height:1.7; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; max-width:100%; object-fit:cover; }
.shell { width:min(1200px, calc(100% - 40px)); margin:0 auto; }
.site-header { position:sticky; top:0; z-index:10; background:rgba(246,248,252,.94); backdrop-filter:blur(12px); border-bottom:1px solid rgba(230,234,242,.85); }
.header-inner { min-height:82px; display:flex; align-items:center; gap:26px; }
.brand { display:flex; align-items:center; gap:10px; flex:none; }
.brand-mark { width:40px; height:40px; display:grid; place-items:center; color:#fff; background:var(--coral); border-radius:13px 13px 5px 13px; font-size:22px; font-weight:900; }
.brand strong, .brand small { display:block; line-height:1.15; }
.brand strong { font-size:19px; letter-spacing:.04em; }
.brand small { margin-top:3px; color:var(--muted); font-size:9px; letter-spacing:.12em; }
.main-nav { display:flex; align-items:center; gap:3px; margin-left:auto; }
.nav-link { padding:9px 9px; color:#465168; font-size:14px; border-radius:9px; white-space:nowrap; }
.nav-link span { margin-right:4px; color:var(--blue); }
.nav-link:hover, .nav-link.is-active { color:var(--coral); background:#fff1f0; font-weight:700; }
.search-pill { padding:9px 13px; border:1px solid var(--line); background:#fff; border-radius:999px; font-size:14px; white-space:nowrap; }
.hero { min-height:465px; margin-top:52px; display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:center; background:linear-gradient(115deg,#192341 0%,#2a3c78 66%,#465dba 100%); color:#fff; border-radius:30px; padding:58px 72px; overflow:hidden; }
.eyebrow { margin:0 0 10px; color:var(--coral); font-size:12px; font-weight:800; letter-spacing:.14em; }
.hero .eyebrow { color:#ffbab7; }
h1,h2,h3,p { overflow-wrap:anywhere; }
h1 { margin:0; font-size:clamp(32px,5vw,58px); line-height:1.18; letter-spacing:.02em; }
h2 { margin:0; font-size:clamp(25px,3vw,34px); line-height:1.3; }
h3 { margin:0; line-height:1.4; }
.hero-copy > p:not(.eyebrow) { max-width:570px; margin:21px 0 27px; color:#dfe6ff; font-size:17px; }
.hero-title-link { display:inline-block; }
.hero-art { position:relative; max-width:340px; justify-self:end; transform:rotate(3deg); }
.hero-art img { aspect-ratio:3/4; border:8px solid #fff; border-radius:18px; box-shadow:17px 20px 0 rgba(255,255,255,.16); }
.hero-sticker { position:absolute; bottom:-17px; left:-28px; display:grid; place-items:center; width:84px; height:84px; background:var(--coral); border-radius:50%; color:#fff; font-weight:800; line-height:1.25; text-align:center; transform:rotate(-10deg); }
.hero-actions,.tag-row { display:flex; flex-wrap:wrap; gap:12px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:45px; padding:10px 19px; border-radius:11px; font-weight:800; }
.button-primary { color:#fff; background:var(--coral); }
.button-quiet { color:#fff; border:1px solid rgba(255,255,255,.4); }
.quick-strip { display:grid; grid-template-columns:repeat(4,1fr); margin-top:26px; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.quick-strip div { padding:19px 24px; border-right:1px solid var(--line); }
.quick-strip div:last-child { border:0; }
.quick-strip span { float:left; margin:3px 10px 0 0; color:var(--coral); font-weight:900; }
.quick-strip strong,.quick-strip small { display:block; line-height:1.35; }
.quick-strip small { margin-top:4px; color:var(--muted); font-size:12px; }
.section-block { margin-top:76px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:25px; }
.section-heading > a,.text-link { color:var(--blue); font-weight:800; white-space:nowrap; }
.category-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.category-card { position:relative; min-height:175px; padding:25px; overflow:hidden; border-radius:18px; background:#fff; border:1px solid var(--line); transition:transform .2s; }
.category-card:hover { transform:translateY(-4px); }
.category-icon { display:grid; place-items:center; width:42px; height:42px; margin-bottom:15px; border-radius:12px; color:#fff; background:var(--blue); font-size:22px; }
.c1 .category-icon,.c4 .category-icon { background:#e36b7a; }.c2 .category-icon,.c5 .category-icon { background:#e8a63d; }.c3 .category-icon { background:#20a28b; }
.category-card p { margin:6px 30px 0 0; color:var(--muted); font-size:14px; line-height:1.55; }.mini-arrow { position:absolute; right:23px; bottom:20px; color:var(--coral); font-weight:bold; }
.feature-layout { display:grid; grid-template-columns:300px 1fr; gap:55px; align-items:center; padding:42px; background:#fff; border-radius:24px; }.feature-cover img { aspect-ratio:3/4; border-radius:16px; }.feature-copy p:not(.eyebrow) { max-width:600px; color:var(--muted); }.tag-row { margin:22px 0; }.tag-row span { padding:5px 10px; color:#58627a; background:#f1f4fa; border-radius:999px; font-size:13px; }
.comic-grid { display:grid; gap:20px; }.four-grid { grid-template-columns:repeat(4,1fr); }.five-grid { grid-template-columns:repeat(5,1fr); }.comic-card { overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:15px; }.comic-card img { aspect-ratio:3/4; transition:transform .25s; }.comic-card:hover img { transform:scale(1.04); }.comic-card > div { padding:15px; }.card-meta { color:var(--coral); font-size:12px; font-weight:800; }.comic-card h2,.comic-card h3 { margin-top:4px; font-size:18px; }.comic-card p { margin:5px 0 0; color:var(--muted); font-size:13px; }
.ranking-panel { padding:39px 48px; background:var(--deep); color:#fff; border-radius:25px; }.ranking-panel .section-heading { margin-bottom:12px; }.ranking-panel .section-heading > a { color:#ffb2ae; }.ranking-list { padding:0; margin:0; list-style:none; }.ranking-list li { display:grid; grid-template-columns:70px 1fr 80px 110px; align-items:center; min-height:57px; border-bottom:1px solid rgba(255,255,255,.12); }.ranking-list li:last-child { border:0; }.rank-no { color:#9badf8; font-weight:900; font-size:19px; }.ranking-list li:nth-child(-n+3) .rank-no { color:#ff817d; }.ranking-list em { color:#9ba7c8; font-size:13px; font-style:normal; text-align:right; }.ranking-list li > span:not(.rank-no) { color:#ffc09d; font-weight:700; }
.mood-ribbon { display:flex; justify-content:space-between; align-items:center; gap:30px; padding:31px 39px; color:#fff; background:linear-gradient(100deg,#ff705e,#f15178); border-radius:20px; }.mood-ribbon .eyebrow { color:#ffe0d9; }.mood-links { display:flex; flex-wrap:wrap; gap:10px; }.mood-links a { padding:9px 13px; background:rgba(255,255,255,.16); border-radius:999px; font-size:14px; }
.wide-story { display:grid; grid-template-columns:1fr 1fr; overflow:hidden; background:#e9efff; border-radius:24px; }.wide-story-copy { padding:48px; }.wide-story-copy p:not(.eyebrow) { color:#4d5c79; }.wide-story img { height:100%; min-height:300px; }.reading-tips { display:grid; grid-template-columns:250px 1fr; gap:40px; }.tips-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.tips-grid > div { padding:23px; background:#fff; border-top:4px solid var(--blue); border-radius:0 0 14px 14px; }.tips-grid b { color:var(--coral); font-size:22px; }.tips-grid h3 { margin-top:15px; }.tips-grid p { margin-bottom:0; color:var(--muted); font-size:14px; }.about-panel { padding:50px; color:#fff; background:#293b70; border-radius:24px; }.about-panel .eyebrow { color:#ffb8b4; }.about-panel p:not(.eyebrow) { max-width:880px; color:#dbe3ff; }.about-panel .text-link { color:#fff; text-decoration:underline; }.app-panel { display:grid; grid-template-columns:100px 1fr auto; gap:30px; align-items:center; margin-top:76px; padding:30px 40px; background:#fff; border:1px solid var(--line); border-radius:24px; }.app-panel h2 { font-size:27px; }.app-panel p:not(.eyebrow) { margin:7px 0 0; color:var(--muted); }.qr-mark { position:relative; display:grid; place-items:center; width:90px; height:90px; overflow:hidden; color:#fff; background:repeating-linear-gradient(90deg,#18202f 0 7px,#fff 7px 12px),repeating-linear-gradient(#18202f 0 6px,#fff 6px 11px); }.qr-mark span { position:relative; z-index:1; display:grid; place-items:center; width:42px; height:42px; background:var(--coral); font-weight:900; }.site-footer { margin-top:76px; padding:48px 0 0; color:#bfcae5; background:#151b2c; }.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px; }.footer-brand { color:#fff; font-size:21px; font-weight:800; }.footer-grid p { margin-top:5px; font-size:14px; }.footer-grid a { display:block; margin:7px 0; font-size:14px; }.copyright { margin-top:35px; padding:18px 0; border-top:1px solid rgba(255,255,255,.1); color:#8795b8; font-size:13px; }
.listing-page,.article-page { padding-top:40px; }.breadcrumb { display:flex; flex-wrap:wrap; gap:9px; color:#73809a; font-size:14px; }.breadcrumb a { color:var(--blue); }.listing-hero { margin-top:22px; padding:42px 48px; color:#fff; background:linear-gradient(120deg,#273962,#506bd0); border-radius:22px; }.listing-hero .eyebrow { color:#c9d5ff; }.listing-hero p:last-child { max-width:670px; color:#e3e9ff; }.seo-copy { margin:60px 0 0; padding:36px 42px; background:#fff; border-radius:20px; }.seo-copy p { color:var(--muted); }.article-page article { max-width:850px; margin:24px auto 0; }.article-header { padding:42px; background:#fff; border-radius:22px; }.article-header h1 { font-size:clamp(31px,5vw,48px); }.article-meta { color:var(--muted); font-size:14px; }.article-header > p:last-child { margin-bottom:0; color:#4f5b73; }.chapter-content { margin-top:28px; background:#fff; padding:18px; border-radius:18px; }.chapter-content figure { margin:0 0 22px; }.chapter-content figure:last-child { margin-bottom:0; }.chapter-content img { aspect-ratio:3/4; max-height:920px; object-position:center; }.chapter-content figcaption { padding:8px 4px 0; color:var(--muted); font-size:13px; }.chapter-end { padding:48px 20px; text-align:center; }.chapter-end span { color:var(--coral); font-size:28px; }.chapter-end h2 { margin-top:8px; }.chapter-end p { color:var(--muted); }.chapter-nav { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; margin-bottom:20px; }.chapter-nav > :last-child { text-align:right; }.chapter-nav span { color:var(--muted); }
@media (max-width:1050px) { .header-inner { gap:13px; }.main-nav { overflow:auto; max-width:calc(100vw - 270px); }.nav-link { font-size:13px; }.hero { padding:48px; gap:35px; }.five-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:720px) { .shell { width:min(100% - 28px,1200px); }.site-header { position:relative; }.header-inner { flex-wrap:wrap; padding:12px 0; }.main-nav { order:3; width:100%; max-width:100%; margin:0; padding-bottom:2px; }.search-pill { margin-left:auto; }.nav-link { padding:7px 8px; }.nav-link span { display:none; }.hero { grid-template-columns:1fr; min-height:0; margin-top:28px; padding:36px 26px; border-radius:22px; }.hero-art { width:60%; justify-self:center; }.quick-strip { grid-template-columns:repeat(2,1fr); }.quick-strip div:nth-child(2) { border-right:0; }.quick-strip div { padding:16px; }.section-block,.app-panel { margin-top:52px; }.section-heading { align-items:start; flex-direction:column; }.category-grid,.four-grid,.five-grid { grid-template-columns:repeat(2,1fr); }.feature-layout,.wide-story,.reading-tips { grid-template-columns:1fr; gap:25px; }.feature-layout { padding:24px; }.feature-cover { max-width:260px; }.ranking-panel { padding:27px 22px; }.ranking-list li { grid-template-columns:42px 1fr 42px; gap:8px; }.ranking-list em { display:none; }.mood-ribbon { align-items:start; flex-direction:column; padding:27px; }.tips-grid { grid-template-columns:1fr; }.wide-story-copy,.about-panel,.listing-hero,.seo-copy,.article-header { padding:28px 24px; }.wide-story img { min-height:230px; }.app-panel { grid-template-columns:75px 1fr; gap:18px; padding:24px; }.app-panel .button { grid-column:1/-1; }.qr-mark { width:70px; height:70px; }.footer-grid { grid-template-columns:1fr 1fr; }.footer-grid > :first-child { grid-column:1/-1; }.chapter-content { padding:10px; }.chapter-nav { grid-template-columns:1fr 1fr; }.chapter-nav .button { grid-column:1/-1; grid-row:1; }.chapter-nav > :last-child { text-align:right; } }