* { box-sizing: border-box; }

:root { --ink:#18213b; --banana:#ffd447; --violet:#7056ce; --paper:#fffdf7; --line:#e7e4da; --muted:#63708a; }

body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.7 "Microsoft YaHei",Arial,sans-serif; }

a { color:inherit; text-decoration:none; }

img { display:block; width:100%; }

.container { width:min(1200px,calc(100% - 40px)); margin-left:auto; margin-right:auto; }

.site-header { position:sticky; top:0; z-index:9; background:rgba(255,253,247,.94); border-bottom:1px solid var(--line); }

.header-inner { min-height:78px; display:flex; align-items:center; gap:28px; }

.brand { display:flex; align-items:center; gap:8px; font-weight:900; font-size:20px; }

.brand-mark { display:grid; place-items:center; width:34px; height:34px; background:var(--banana); border:3px solid var(--ink); border-radius:50%; font-family:Georgia; transform:rotate(-9deg); }

.main-nav { display:flex; flex:1; justify-content:space-between; gap:4px; }

.nav-link { display:flex; gap:5px; align-items:center; padding:8px; border-radius:10px; white-space:nowrap; font-size:14px; font-weight:bold; }

.nav-link.active, .nav-link:hover { background:#fff1aa; }

.nav-toggle { display:none; margin-left:auto; font-size:21px; }

.hero { display:grid; grid-template-columns:1.05fr .95fr; min-height:470px; margin-top:48px; overflow:hidden; border-radius:30px; background:linear-gradient(115deg,#ffefa5,#ffda5f,#cbbaff); }

.hero > div { padding:58px 64px; }

.hero > img { height:100%; object-fit:cover; mix-blend-mode:multiply; }

.eyebrow { margin:0 0 7px; color:var(--violet); font-size:13px; font-weight:900; letter-spacing:1px; }

h1, h2, h3 { line-height:1.25; }

.hero h1 { margin:0 0 16px; font-size:clamp(50px,6vw,76px); letter-spacing:-4px; }

.hero h1 a { text-decoration:underline; text-decoration-thickness:6px; text-decoration-color:#7056ce80; }

.button { display:inline-block; margin-top:13px; padding:10px 20px; border-radius:999px; background:var(--ink); color:white; font-weight:bold; }

.button.light { background:white; color:var(--ink); }

.benefit { display:grid; grid-template-columns:repeat(4,1fr); margin-top:32px; border:1px solid var(--line); border-radius:16px; overflow:hidden; }

.benefit div { padding:20px; text-align:center; font-weight:bold; border-right:1px solid var(--line); }

.section { margin-top:82px; }

.section > h2 { margin-bottom:24px; font-size:36px; }

.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:17px; }

.comic-card { overflow:hidden; border:1px solid var(--line); border-radius:15px; background:#fff; }

.cover { position:relative; display:block; aspect-ratio:3/4; overflow:hidden; background:#eee9ff; }

.cover img { height:100%; object-fit:cover; }

.cover span { position:absolute; right:7px; bottom:7px; padding:3px 7px; border-radius:8px; background:#18213bcc; color:#fff; font-size:11px; }

.comic-card h3 { margin:12px 13px 4px; font-size:16px; }

.comic-card p { margin:0 13px 14px; color:var(--muted); font-size:12px; }

.purple { padding:42px; border-radius:26px; background:#f1edff; }

.categories { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }

.category { display:grid; grid-template-columns:44px 1fr; gap:4px 12px; align-items:center; padding:18px; border-radius:14px; background:#fff; }

.category b { grid-row:span 2; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:#fff2aa; color:var(--violet); font-size:23px; }

.category small { color:var(--muted); }

.feature { display:grid; grid-template-columns:.8fr 1.2fr; gap:40px; padding:36px; border-radius:28px; background:var(--ink); color:white; }

.feature img { height:270px; border-radius:14px; object-fit:cover; }

.feature h2 { font-size:32px; }

.feature p { color:#d1d6e5; }

.two-col { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

.panel { padding:32px; border:1px solid var(--line); border-radius:20px; background:#fff; }

.panel.yellow { background:var(--banana); }

.panel li { padding:9px 0; border-bottom:1px solid var(--line); }

.panel em { float:right; color:var(--violet); font-style:normal; font-weight:bold; }

.moods > div, .calendar > div { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }

.moods a, .calendar b { display:block; min-height:100px; padding:22px; border-radius:15px; background:#fff2f4; font-size:18px; }

.moods a:nth-child(2) { background:#edfff7; }

.moods a:nth-child(3) { background:#eee9ff; }

.moods a:nth-child(4) { background:#fff2aa; }

.calendar > div { grid-template-columns:repeat(5,1fr); }

.calendar b { background:#fff; font-size:14px; }

.about { padding:38px; border-left:5px solid var(--banana); background:#fff; }

.app { display:grid; grid-template-columns:1fr 240px; align-items:center; gap:40px; margin-top:82px; margin-bottom:82px; padding:48px 70px; border-radius:28px; background:#fff1aa; }

.qr { padding:25px; border:7px solid white; border-radius:16px; background:var(--ink); color:var(--banana); font-size:72px; line-height:1; text-align:center; }

.qr strong, .qr small { display:block; color:white; font-size:15px; line-height:1.5; }

.site-footer { padding-top:48px; background:var(--ink); color:white; }

.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px; padding-bottom:35px; }

.footer-grid a { display:block; margin:6px 0; color:#d7dcec; }

.copyright { margin:0; padding:16px; border-top:1px solid #ffffff22; color:#b7c0d4; text-align:center; font-size:13px; }

.inner { margin-top:52px; padding:46px; border-radius:24px; background:linear-gradient(115deg,#fff0a8,#eee8ff); }

.inner h1 { font-size:42px; }

.crumb { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:25px; color:var(--muted); font-size:14px; }

.crumb a { color:var(--violet); }

.filters { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:24px; }

.filters b { margin-right:auto; }

.filters span, .filters a { padding:4px 11px; border-radius:999px; background:#eee9ff; font-size:13px; }

.reader { max-width:900px; margin-top:45px; margin-bottom:82px; }

.reader header { padding-bottom:20px; border-bottom:1px solid var(--line); }

.reader header h1 { font-size:36px; }

.reader aside { margin:22px 0; padding:16px; border-radius:10px; background:#fff2aa; font-size:14px; }

.pages { display:grid; gap:22px; }

.comic-page { margin:0; overflow:hidden; border-radius:12px; background:#eee; }

.comic-page img { max-height:800px; object-fit:contain; background:#e8eaf0; }

.comic-page figcaption { padding:8px 12px; background:#fff; color:var(--muted); font-size:12px; }

.end { padding:35px; text-align:center; }

.chapter-nav { display:grid; grid-template-columns:1fr auto 1fr; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-weight:bold; }

.chapter-nav > :last-child { text-align:right; }

@media (max-width:900px) { .grid { grid-template-columns:repeat(3,1fr); } .main-nav { overflow:auto; justify-content:flex-start; } }

@media (max-width:680px) { .container { width:min(100% - 28px,1200px); } .header-inner { min-height:65px; } .nav-toggle { display:block; } .main-nav { display:none; position:absolute; top:65px; left:14px; right:14px; flex-wrap:wrap; padding:10px; background:#fff; border:1px solid var(--line); border-radius:12px; } .main-nav.is-open { display:flex; } .nav-link { flex:1 0 42%; } .hero { grid-template-columns:1fr; margin-top:28px; } .hero > div { padding:40px 26px 25px; } .hero > img { height:260px; } .benefit { grid-template-columns:repeat(2,1fr); } .grid { grid-template-columns:repeat(2,1fr); } .categories, .two-col, .feature, .app { grid-template-columns:1fr; } .purple { padding:25px 17px; } .feature { padding:24px; } .moods > div { grid-template-columns:repeat(2,1fr); } .calendar > div { grid-template-columns:1fr; } .app { padding:32px 25px; } .footer-grid { grid-template-columns:1fr; } .inner { margin-top:30px; padding:30px 22px; } .chapter-nav { grid-template-columns:1fr; gap:14px; text-align:center; } .chapter-nav > :last-child { text-align:center; } }