:root { --ink:#1e2433; --muted:#778094; --line:#e9ecf3; --paper:#ffffff; --soft:#f7f8fc; --primary:#7357ff; --primary-dark:#5337d6; --coral:#ff6b6b; --shadow:0 18px 55px rgba(37,31,88,.09); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fbfbfe; font-family:Inter,"Noto Sans SC","Microsoft YaHei",sans-serif; line-height:1.7; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; height:auto; object-fit:cover; }
.site-header { background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; backdrop-filter:blur(16px); }
.header-inner,.page-shell { max-width:1200px; margin:0 auto; padding:0 28px; }
.header-inner { min-height:78px; display:flex; align-items:center; gap:30px; }
.brand { display:flex; align-items:center; gap:11px; min-width:210px; }
.brand-mark { width:40px; height:40px; border-radius:13px 13px 13px 4px; display:grid; place-items:center; color:#fff; font-size:21px; background:linear-gradient(135deg,#7a5cff,#ff7190); box-shadow:0 8px 18px #7558ff3d; }
.brand strong { display:block; font-size:19px; letter-spacing:-.04em; }
.brand small { color:var(--muted); font-size:11px; display:block; }
.main-nav { display:flex; align-items:center; justify-content:space-between; gap:4px; flex:1; }
.nav-link { padding:10px 11px; border-radius:12px; color:#626b80; font-size:14px; white-space:nowrap; display:flex; align-items:center; gap:6px; transition:.2s; }
.nav-link:hover,.nav-link.active { color:var(--primary); background:#f0edff; }
.nav-icon { font-size:16px; }
.header-search { width:185px; display:flex; align-items:center; border:1px solid var(--line); border-radius:12px; padding:0 10px; background:#fff; }
.header-search input { border:0; outline:0; width:100%; padding:10px 7px; font-size:13px; background:transparent; }
.hero { margin-top:32px; border-radius:28px; overflow:hidden; min-height:390px; color:#fff; background:radial-gradient(circle at 88% 16%,#ff8baa 0 8%,transparent 9%),radial-gradient(circle at 78% 80%,#5e4ce2 0 16%,transparent 17%),linear-gradient(116deg,#282653,#5141a6 58%,#b45b95); position:relative; }
.hero:after { content:'漫'; position:absolute; right:6%; bottom:-34px; color:#ffffff19; font-weight:900; font-size:300px; transform:rotate(-12deg); }
.hero-content { max-width:660px; padding:66px 62px; position:relative; z-index:1; }
.eyebrow { font-size:13px; letter-spacing:.12em; color:#d9d2ff; }
.hero h1 { margin:12px 0 16px; line-height:1.18; font-size:clamp(32px,5vw,58px); letter-spacing:-.06em; }
.hero h1 a { text-decoration:underline; text-decoration-color:#ff9cb2; text-decoration-thickness:4px; text-underline-offset:8px; }
.hero p { color:#e9e7ff; max-width:555px; font-size:16px; }
.hero-actions { display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.btn { border:0; border-radius:12px; padding:11px 19px; font-weight:700; font-size:14px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
.btn-primary { color:#352b73; background:#fff; }.btn-ghost { color:#fff; background:#ffffff1a; border:1px solid #ffffff52; }
.section { margin-top:68px; }.section-head { display:flex; align-items:end; justify-content:space-between; margin-bottom:22px; }.section-head h2 { margin:0; font-size:27px; letter-spacing:-.04em; }.section-head p { margin:5px 0 0; color:var(--muted); font-size:14px; }.more { color:var(--primary); font-size:13px; font-weight:700; }
.signal-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }.signal { background:#fff; padding:20px; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }.signal b { display:block; font-size:27px; }.signal span { color:var(--muted); font-size:13px; }.signal i { color:var(--primary); font-style:normal; float:right; font-size:22px; }
.category-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }.category { background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px; min-height:180px; transition:.2s; }.category:hover { transform:translateY(-4px); box-shadow:var(--shadow); }.category .cat-icon { width:43px; height:43px; display:grid; place-items:center; border-radius:14px; background:#f0edff; color:var(--primary); font-size:21px; }.category h3 { margin:16px 0 5px; font-size:17px; }.category p { margin:0; color:var(--muted); font-size:13px; }
.comic-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }.comic-card { background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; transition:.2s; }.comic-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }.comic-cover { aspect-ratio:4/5; background:#eee; }.comic-card .body { padding:14px 15px 16px; }.tag { display:inline-block; color:var(--primary); background:#f0edff; border-radius:6px; padding:2px 7px; font-size:11px; }.comic-card h3 { margin:8px 0 2px; font-size:16px; }.comic-card p { margin:0; color:var(--muted); font-size:12px; }.meter { height:5px; background:#edf0f6; border-radius:9px; margin-top:12px; overflow:hidden; }.meter span { display:block; height:100%; background:linear-gradient(90deg,#7357ff,#ff7c9b); border-radius:9px; }
.split-panel { display:grid; grid-template-columns:1.1fr .9fr; gap:22px; }.feature { border-radius:22px; padding:31px; color:#fff; min-height:275px; background:linear-gradient(135deg,#ff7b75,#ffb65c); position:relative; overflow:hidden; }.feature:after { content:'♡'; position:absolute; right:25px; bottom:-45px; font-size:210px; color:#ffffff24; }.feature h2 { margin:10px 0; font-size:30px; max-width:390px; line-height:1.25; }.feature p { max-width:440px; color:#fff6f0; }.feature .btn { color:#d95750; background:#fff; }.roadmap { background:#fff; border:1px solid var(--line); border-radius:22px; padding:26px; }.roadmap h3 { margin-top:0; }.road { display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }.road:last-child { border:0; }.road b { color:var(--primary); font-size:12px; min-width:72px; }.road span { font-size:13px; }
.rank-box { display:grid; grid-template-columns:1fr 1fr; gap:22px; background:#fff; border:1px solid var(--line); border-radius:22px; padding:24px; }.rank-list { display:grid; gap:9px; }.rank-item { display:flex; align-items:center; gap:12px; padding:9px; border-radius:12px; }.rank-item:hover { background:var(--soft); }.rank-num { font-weight:800; color:#b7bdcb; width:20px; }.rank-item:nth-child(-n+3) .rank-num { color:var(--coral); }.rank-thumb { width:44px; height:52px; border-radius:7px; object-fit:cover; }.rank-item strong { font-size:14px; display:block; }.rank-item small { color:var(--muted); }
.about { display:grid; grid-template-columns:1fr 1fr; gap:35px; align-items:center; background:#f1f0ff; border-radius:24px; padding:35px; }.about h2 { margin:0 0 13px; font-size:28px; }.about p { color:#5e6679; font-size:14px; }.about-points { display:grid; grid-template-columns:1fr 1fr; gap:13px; }.point { background:#fff; padding:15px; border-radius:14px; }.point b { display:block; color:var(--primary); font-size:20px; }.point span { font-size:12px; color:var(--muted); }
.app-banner { margin:68px 0 42px; background:#202338; color:#fff; border-radius:24px; padding:29px 35px; display:flex; align-items:center; justify-content:space-between; gap:25px; }.app-banner h2 { margin:0 0 6px; }.app-banner p { margin:0; color:#b8bed4; font-size:13px; }.qr { width:77px; height:77px; border-radius:13px; padding:8px; background:repeating-linear-gradient(45deg,#fff 0 4px,#202338 4px 8px); flex:none; }.site-footer { border-top:1px solid var(--line); padding:25px 0 34px; color:var(--muted); font-size:12px; }.footer-inner { display:flex; justify-content:space-between; gap:20px; }
.breadcrumbs { margin:28px 0 16px; color:var(--muted); font-size:13px; }.breadcrumbs a { color:var(--primary); }.page-title { font-size:38px; margin:0; letter-spacing:-.05em; }.page-intro { color:var(--muted); max-width:720px; }.article-grid { display:grid; grid-template-columns:1fr 300px; gap:28px; align-items:start; }.article-card { background:#fff; border:1px solid var(--line); border-radius:22px; padding:30px; }.article-meta { color:var(--muted); font-size:13px; margin:7px 0 22px; }.reading-note { background:#f6f2ff; color:#5d4ac7; padding:14px 17px; border-radius:13px; font-size:13px; margin-bottom:25px; }.chapter-text { font-size:16px; color:#42495a; }.chapter-text h2 { color:var(--ink); margin-top:32px; }.panel-image { border-radius:13px; margin:20px 0; aspect-ratio:16/10; }.chapter-end { border-top:1px solid var(--line); margin-top:28px; padding-top:20px; color:var(--primary); font-weight:700; }.article-side { position:sticky; top:100px; background:#fff; padding:20px; border:1px solid var(--line); border-radius:18px; }.article-side h3 { margin-top:0; }.article-side a { display:block; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; }.article-side a:last-child { border:0; }.article-nav { display:flex; justify-content:space-between; gap:12px; margin-top:22px; }.article-nav a { background:#fff; border:1px solid var(--line); padding:12px 15px; border-radius:12px; color:var(--primary); font-size:13px; }
@media (max-width:980px) { .header-inner { gap:14px; }.brand { min-width:auto; }.brand small { display:none; }.main-nav { overflow-x:auto; justify-content:flex-start; }.header-search { display:none; }.category-grid,.comic-grid { grid-template-columns:repeat(3,1fr); }.hero-content { padding:55px 45px; } }
@media (max-width:680px) { .header-inner,.page-shell { padding-left:17px; padding-right:17px; }.header-inner { min-height:69px; }.brand strong { font-size:16px; }.main-nav { gap:0; }.nav-link { padding:8px 9px; font-size:12px; }.nav-link span:not(.nav-icon) { display:none; }.hero { margin-top:18px; min-height:440px; border-radius:21px; }.hero-content { padding:42px 25px; }.hero h1 { font-size:37px; }.signal-row,.category-grid,.comic-grid { grid-template-columns:repeat(2,1fr); gap:12px; }.signal { padding:15px; }.signal b { font-size:22px; }.section { margin-top:45px; }.section-head h2 { font-size:23px; }.section-head { align-items:center; }.category { padding:16px; min-height:170px; }.category h3 { font-size:15px; }.split-panel,.rank-box,.about,.article-grid { grid-template-columns:1fr; }.feature { min-height:260px; padding:24px; }.rank-box { padding:16px; }.about { padding:23px; }.about-points { gap:9px; }.app-banner { margin-top:45px; padding:22px; align-items:flex-start; }.app-banner .btn { display:none; }.qr { width:58px; height:58px; }.footer-inner { display:block; }.article-card { padding:20px; }.page-title { font-size:30px; }.article-side { position:static; }.article-nav { flex-direction:column; }.article-nav a { text-align:center; } }