:root { --ink:#201d2d; --muted:#746f82; --paper:#fffdf9; --lavender:#eee9ff; --purple:#6847d9; --orange:#ff8f66; --line:#e8e2ef; --shadow:0 14px 35px rgba(43,31,87,.09); }
* { 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; line-height:1.7; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; max-width:100%; object-fit:cover; }
.container { width:min(1200px, calc(100% - 40px)); margin:0 auto; }
.site-header { position:sticky; top:0; z-index:10; background:rgba(255,253,249,.95); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.header-inner { min-height:82px; display:flex; align-items:center; gap:22px; }
.brand { display:flex; align-items:center; gap:10px; flex:none; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; color:white; background:var(--purple); border-radius:12px 12px 12px 3px; font-size:20px; font-weight:800; }
.brand strong { display:block; font-size:18px; line-height:1.1; }
.brand small { display:block; color:var(--muted); font-size:9px; letter-spacing:1px; }
.main-nav { display:flex; align-items:center; justify-content:center; gap:5px; flex:1; }
.nav-link { padding:9px 10px; border-radius:10px; color:#5d5868; white-space:nowrap; font-size:13px; }
.nav-link span:first-child { margin-right:4px; color:var(--purple); }
.nav-link:hover,.nav-link.is-active { color:var(--purple); background:var(--lavender); font-weight:700; }
.header-search { display:flex; gap:5px; align-items:center; padding:9px 12px; border:1px solid var(--line); border-radius:20px; color:var(--purple); font-size:13px; }
.hero { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:64px; margin-top:54px; min-height:430px; }
.eyebrow { margin:0 0 9px; color:var(--purple); font-size:12px; letter-spacing:1.8px; font-weight:800; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(38px,6vw,70px); line-height:1.1; margin-bottom:20px; letter-spacing:-3px; }
h2 { font-size:30px; line-height:1.25; margin-bottom:12px; }
h3 { line-height:1.35; margin-bottom:8px; }
.hero-copy > p:not(.eyebrow) { max-width:560px; color:var(--muted); font-size:17px; }
.hero-actions { display:flex; gap:13px; margin-top:27px; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:45px; padding:11px 19px; border-radius:12px; font-weight:700; transition:transform .2s; }
.button:hover { transform:translateY(-2px); }
.button-primary { color:white; background:var(--purple); box-shadow:0 8px 18px rgba(104,71,217,.25); }
.button-light { background:var(--lavender); color:var(--purple); }
.button-dark { color:white; background:var(--ink); }
.hero-art { position:relative; }
.hero-art img { aspect-ratio:1.15; border-radius:36px 36px 8px 36px; box-shadow:var(--shadow); }
.hero-sticker { position:absolute; top:24px; right:-14px; display:grid; place-items:center; width:76px; height:76px; color:#45207e; background:#ffe266; border-radius:50%; font-size:14px; line-height:1.25; text-align:center; font-weight:800; transform:rotate(12deg); }
.hero-note { position:absolute; bottom:-20px; left:-30px; display:flex; gap:12px; align-items:center; padding:12px 16px; background:white; box-shadow:var(--shadow); border-radius:16px; }
.hero-note span { color:var(--orange); font-size:27px; }.hero-note p { margin:0; font-size:12px; line-height:1.35; }.hero-note strong { font-size:14px; }
.stats-strip { display:grid; grid-template-columns:repeat(4,1fr); margin-top:70px; padding:23px; background:#292239; color:white; border-radius:19px; text-align:center; }
.stats-strip div + div { border-left:1px solid #494153; }.stats-strip strong,.stats-strip span { display:block; }.stats-strip strong { color:#ffc86f; font-size:22px; }.stats-strip span { font-size:12px; color:#d5d0df; }
.section-space { margin-top:92px; }.section-heading { max-width:680px; margin-bottom:28px; }.section-heading > p:last-child { color:var(--muted); }.split-heading { display:flex; justify-content:space-between; align-items:end; max-width:none; }.split-heading > a,.text-link { color:var(--purple); font-weight:700; white-space:nowrap; }
.featured-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }.featured-card { border:1px solid var(--line); border-radius:17px; overflow:hidden; background:white; transition:transform .2s,box-shadow .2s; }.featured-card:hover,.comic-tile:hover { transform:translateY(-4px); box-shadow:var(--shadow); }.featured-card img { aspect-ratio:3/4; }.featured-card div { padding:16px; }.featured-card p,.comic-tile p { color:var(--muted); font-size:13px; margin-bottom:0; }.chip { display:inline-block; margin-bottom:8px; padding:3px 8px; border-radius:20px; background:var(--lavender); color:var(--purple); font-size:11px; font-weight:700; }
.category-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.category-card { position:relative; min-height:195px; padding:22px; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; }.category-card:nth-child(2n) { background:#fbf8ff; }.category-icon { display:grid; place-items:center; width:43px; height:43px; margin-bottom:17px; background:#ffe9df; border-radius:12px; color:#d9603e; font-size:22px; }.category-card:nth-child(2n) .category-icon { color:var(--purple); background:var(--lavender); }.category-card p { color:var(--muted); font-size:13px; }.category-go { position:absolute; bottom:18px; color:var(--purple); font-size:13px; font-weight:700; }
.two-column { display:grid; grid-template-columns:1.55fr .75fr; gap:25px; }.update-panel { padding:30px; border:1px solid var(--line); background:white; border-radius:20px; }.list-row { display:grid; grid-template-columns:35px 53px 1fr auto; gap:12px; align-items:center; padding:11px 0; border-top:1px solid var(--line); }.list-row img { aspect-ratio:1; border-radius:10px; }.rank-num { color:#c4baca; font-weight:800; }.list-row strong,.list-row small { display:block; }.list-row small { color:var(--muted); font-size:12px; }.list-row em { color:var(--orange); font-size:12px; font-style:normal; }.week-card { padding:29px; background:#ffdccd; border-radius:20px; }.week-card img { margin:16px 0; aspect-ratio:1.4; border-radius:13px; }.week-card p:not(.eyebrow) { font-size:13px; color:#5f4540; }
.theme-banner { display:grid; grid-template-columns:1.25fr .75fr; gap:30px; padding:46px 55px; background:#dcd2ff; border-radius:26px; overflow:hidden; }.theme-banner p:not(.eyebrow) { max-width:620px; color:#51496a; }.shelf-visual { display:flex; justify-content:center; align-items:center; gap:11px; transform:rotate(-7deg); }.shelf-visual span { display:grid; place-items:center; width:92px; height:140px; border-radius:15px 15px 6px 6px; color:white; background:#825fdd; font-size:40px; box-shadow:8px 9px 0 rgba(67,43,126,.18); }.shelf-visual span:nth-child(2) { height:172px; background:#fb946d; }.shelf-visual span:nth-child(3) { background:#3d3657; }
.ranking-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.ranking-grid article { padding:25px; border-top:4px solid var(--purple); background:white; box-shadow:var(--shadow); }.ranking-grid span { color:#e0d7ec; font-size:36px; font-weight:900; }.ranking-grid p { margin:0; color:var(--muted); font-size:13px; }.quote-panel { padding:50px 12%; text-align:center; background:#fff3b9; border-radius:25px; }.quote-mark { display:block; height:43px; color:var(--orange); font-family:serif; font-size:70px; }.quote-panel p { margin:0 auto 12px; max-width:720px; font-size:23px; font-weight:700; }.quote-panel > span:last-child { color:var(--muted); font-size:13px; }
.about-section { display:grid; grid-template-columns:.9fr 1.1fr; gap:68px; align-items:center; }.about-art img { aspect-ratio:1; border-radius:40px 8px 40px 8px; }.about-section p:not(.eyebrow) { color:var(--muted); }.app-card { display:grid; grid-template-columns:120px 1fr auto; align-items:center; gap:29px; padding:29px 38px; background:#2d2640; color:white; border-radius:24px; }.app-card h2 { margin-bottom:6px; }.app-card p:not(.eyebrow) { margin:0; color:#d7d0e5; font-size:14px; }.qr-brand { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:10px; width:116px; height:116px; background:white; border-radius:12px; color:var(--purple); }.qr-brand span { grid-column:span 2; display:grid; place-items:center; background:var(--lavender); font-size:28px; font-weight:900; }.qr-brand i { display:block; background:#4e3d7a; }.qr-brand i:nth-of-type(2) { background:#ff9772; }.qr-brand i:nth-of-type(3) { background:#8e75dc; }
.breadcrumb { display:flex; gap:9px; margin-top:35px; color:var(--muted); font-size:13px; }.breadcrumb a { color:var(--purple); }.listing-hero { margin-top:26px; padding:46px 55px; background:#ede8ff; border-radius:26px; }.listing-hero h1 { margin-bottom:12px; font-size:48px; }.listing-hero p:last-child { max-width:760px; margin:0; color:#5d5377; }.filter-bar { display:flex; gap:24px; align-items:center; padding-bottom:18px; margin-bottom:25px; border-bottom:1px solid var(--line); font-size:14px; }.filter-bar span { margin-right:auto; font-weight:700; }.filter-bar a { color:var(--purple); }.comic-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }.comic-tile { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:white; transition:transform .2s,box-shadow .2s; }.comic-tile img { aspect-ratio:3/4; }.comic-tile div { padding:14px; }.comic-tile h2 { font-size:17px; margin-bottom:6px; }.comic-tile small { display:block; margin-top:12px; color:var(--purple); font-size:11px; }.seo-copy { padding:30px 37px; border-left:5px solid var(--orange); background:#fff9f5; }.seo-copy h2 { font-size:24px; }.seo-copy p { margin:0; color:var(--muted); }
.reader-layout { max-width:850px; }.reader-header { margin-top:30px; text-align:center; }.reader-header h1 { font-size:42px; letter-spacing:-2px; }.reader-meta { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 17px; color:var(--muted); font-size:13px; }.reading-note { margin:25px auto 0; max-width:730px; padding:14px 18px; color:#605671; background:#f3efff; border-radius:13px; font-size:13px; text-align:left; }.comic-pages { margin-top:40px; }.comic-page { margin:0 auto 25px; }.comic-page img { aspect-ratio:2/3; border-radius:10px; box-shadow:var(--shadow); }.comic-page figcaption { margin-top:7px; color:var(--muted); font-size:12px; text-align:center; }.chapter-end { padding:34px; margin-top:42px; background:#fff1d6; border-radius:20px; text-align:center; }.chapter-end span { color:var(--orange); font-size:28px; }.chapter-end h2 { margin:2px 0 6px; font-size:24px; }.chapter-end p { margin:0; color:var(--muted); font-size:13px; }.chapter-nav { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; align-items:center; margin-top:25px; text-align:center; }.chapter-nav > a:not(.button) { padding:11px; color:var(--purple); font-weight:700; }
.site-footer { margin-top:92px; padding:51px 0 21px; background:#24202f; color:#ded8e9; }.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:34px; }.footer-brand { margin-bottom:9px; color:white; font-size:20px; font-weight:800; }.footer-grid p:not(.footer-brand):not(.footer-heading) { max-width:400px; color:#aaa2b8; font-size:13px; }.footer-heading { color:white; font-weight:800; }.footer-grid a { display:block; margin-bottom:8px; color:#bdb5ca; font-size:13px; }.copyright { display:flex; justify-content:space-between; gap:20px; padding-top:27px; margin-top:27px; border-top:1px solid #40394c; color:#938b9f; font-size:12px; }
@media (max-width:900px) { .header-inner { align-items:flex-start; padding:13px 0; }.main-nav { justify-content:flex-start; overflow-x:auto; padding:4px 0; }.header-search { display:none; }.hero { gap:32px; }.featured-grid { grid-template-columns:repeat(2,1fr); }.comic-grid { grid-template-columns:repeat(3,1fr); }.app-card { grid-template-columns:100px 1fr; }.app-card .button { grid-column:2; justify-self:start; }.category-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .container { width:min(100% - 28px,1200px); }.header-inner { gap:12px; }.brand strong { font-size:15px; }.brand small { display:none; }.main-nav { gap:2px; }.nav-link { padding:7px 8px; font-size:12px; }.nav-link span:last-child { display:none; }.nav-link span:first-child { margin:0; font-size:17px; }.hero { grid-template-columns:1fr; margin-top:36px; }.hero-art { margin:5px 14px 0; }.hero-note { left:-10px; }.stats-strip { grid-template-columns:repeat(2,1fr); gap:15px; }.stats-strip div + div { border-left:0; }.stats-strip div:nth-child(even) { border-left:1px solid #494153; }.section-space { margin-top:63px; }.split-heading { align-items:start; gap:10px; }.split-heading h2 { font-size:25px; }.featured-grid,.ranking-grid { grid-template-columns:1fr 1fr; }.featured-card:last-child { display:none; }.category-grid { grid-template-columns:1fr 1fr; }.category-card { min-height:186px; padding:17px; }.two-column,.theme-banner,.about-section { grid-template-columns:1fr; }.update-panel { padding:20px; }.list-row { grid-template-columns:29px 44px 1fr; }.list-row em { display:none; }.week-card { padding:23px; }.theme-banner { padding:31px 25px; }.shelf-visual { min-height:130px; }.shelf-visual span { width:67px; height:105px; }.shelf-visual span:nth-child(2) { height:130px; }.quote-panel { padding:39px 20px; }.quote-panel p { font-size:19px; }.app-card { grid-template-columns:82px 1fr; padding:23px; gap:16px; }.qr-brand { width:82px; height:82px; }.app-card h2 { font-size:23px; }.app-card .button { grid-column:1 / -1; }.listing-hero { padding:33px 25px; }.listing-hero h1 { font-size:36px; }.filter-bar { flex-wrap:wrap; gap:8px 15px; }.filter-bar span { width:100%; }.comic-grid { grid-template-columns:1fr 1fr; }.comic-tile:last-child { grid-column:1 / -1; width:calc(50% - 9px); }.reader-header h1 { font-size:34px; }.chapter-nav { grid-template-columns:1fr; }.footer-grid { grid-template-columns:1fr 1fr; }.footer-grid > div:first-child { grid-column:1 / -1; }.copyright { flex-direction:column; gap:5px; } }