:root { --ink:#17213d; --muted:#64708a; --banana:#ffd83d; --paper:#fff; --line:#e8edf5; --shadow:0 14px 35px rgba(23,33,61,.1); }
* { box-sizing:border-box; }
body { margin:0; background:linear-gradient(#fffdf4,#f4f7ff); color:var(--ink); font-family:"Microsoft YaHei",Arial,sans-serif; line-height:1.7; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; object-fit:cover; }
.container { width:min(1200px,calc(100% - 40px)); margin:auto; }
.site-header { position:sticky; top:0; z-index:10; background:rgba(255,255,255,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.header-inner { min-height:82px; display:flex; align-items:center; gap:24px; }
.brand { display:flex; align-items:center; gap:9px; font-size:22px; font-weight:900; white-space:nowrap; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:15px 15px 19px 19px; background:var(--banana); transform:rotate(-8deg); }
.primary-nav { display:flex; flex:1; justify-content:space-between; gap:4px; }
.nav-link { padding:7px 9px; border-radius:11px; color:#536079; font-size:14px; font-weight:800; white-space:nowrap; }
.nav-link:hover,.nav-link.active { background:#fff2b5; color:var(--ink); }
.nav-icon { color:#bf8200; font-size:16px; }
.header-action,.button { display:inline-block; padding:9px 14px; border-radius:999px; background:var(--ink); color:white; font-size:13px; font-weight:800; white-space:nowrap; }
.hero { position:relative; overflow:hidden; margin-top:42px; padding:48px; border-radius:30px; background:var(--ink); color:white; box-shadow:var(--shadow); }
.hero:after { content:""; position:absolute; right:-70px; bottom:-120px; width:310px; height:310px; border:32px solid var(--banana); border-radius:50%; }
.eyebrow,.section-kicker { margin:0 0 7px; color:#c48600; font-size:13px; font-weight:900; letter-spacing:.11em; }.hero .eyebrow { color:#ffe169; }
h1 { margin:0; font-size:clamp(38px,6vw,68px); line-height:1.1; letter-spacing:-.07em; }.hero h1 a { text-decoration:underline; text-decoration-color:var(--banana); text-underline-offset:10px; }.hero p:not(.eyebrow) { max-width:650px; color:#d6dff1; font-size:17px; }.hero-cta { display:inline-block; padding:11px 18px; border-radius:12px; background:var(--banana); color:var(--ink); font-weight:900; }.hero-stats { display:flex; gap:32px; margin-top:30px; }.hero-stats strong { display:block; color:var(--banana); font-size:22px; }.hero-stats span,.muted,.comic-meta { color:var(--muted); font-size:13px; }.hero-stats span { color:#cad4e9; }
.section { margin-top:72px; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:15px; margin-bottom:22px; }h2 { margin:0; font-size:28px; line-height:1.25; letter-spacing:-.04em; }h3 { margin:0; font-size:17px; line-height:1.35; }.section-more { color:#536079; font-size:14px; font-weight:900; }
.featured-grid { display:grid; grid-template-columns:1.35fr .9fr .9fr; gap:18px; }.feature-main,.feature-card { min-height:230px; overflow:hidden; border-radius:22px; background:var(--paper); box-shadow:var(--shadow); }.feature-main { position:relative; color:white; }.feature-main img { position:absolute; inset:0; height:100%; filter:brightness(.58); }.feature-copy { position:absolute; z-index:1; right:22px; bottom:20px; left:22px; }.feature-copy h3 { margin:5px 0; font-size:24px; }.feature-card img { height:140px; }.feature-card div,.comic-card div,.article-card div { padding:13px; }.tag { display:inline-block; padding:2px 8px; border-radius:99px; background:#fff2b5; color:#956500; font-size:12px; font-weight:900; }
.category-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }.category-card { min-height:152px; padding:20px; border:1px solid var(--line); border-radius:20px; background:white; }.category-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }.symbol { display:grid; place-items:center; width:39px; height:39px; margin-bottom:13px; border-radius:13px; background:#fff2b5; color:#af7700; font-size:19px; }.category-card p,.article-card p { margin:5px 0; color:var(--muted); font-size:13px; }
.comic-row { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }.comic-card,.article-card { overflow:hidden; border-radius:18px; background:white; box-shadow:0 8px 22px rgba(23,33,61,.08); }.comic-card img { aspect-ratio:3/4; }.comic-card h3 { min-height:46px; margin-top:6px; }.rank-layout { display:grid; grid-template-columns:1.15fr .85fr; gap:22px; }.rank-list { padding:6px 20px; border-radius:22px; background:white; box-shadow:var(--shadow); }.rank-item { display:flex; align-items:center; gap:13px; padding:13px 0; border-bottom:1px solid var(--line); }.rank-item:last-child { border:0; }.rank-no { color:#c88900; font-size:21px; font-weight:900; }.rank-item img { width:46px; height:58px; border-radius:8px; }.rank-item h3 { flex:1; }.notice { padding:28px; border-radius:22px; background:#ffd83d; }.notice h3 { font-size:22px; }.notice a { padding:8px 12px; border-radius:9px; background:var(--ink); color:white; font-size:13px; font-weight:800; }.calendar { display:grid; grid-template-columns:repeat(7,1fr); gap:10px; padding:22px; border-radius:22px; background:white; box-shadow:var(--shadow); }.day { min-height:90px; padding:10px; border-radius:13px; background:#f6f8fc; font-size:13px; font-weight:800; }.day b { display:block; margin-top:12px; color:#8f6000; font-size:11px; }.day.today { background:#fff2b5; }.story-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:25px; align-items:center; padding:30px; border-radius:25px; background:#eaf1ff; }.story-layout img { aspect-ratio:4/3; border-radius:18px; }.story-layout p { color:#50607c; }.checks { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; padding:0; list-style:none; font-size:14px; font-weight:800; }.checks li:before { content:'✓'; margin-right:7px; color:#bd8200; }.newsletter { display:grid; grid-template-columns:1.2fr .7fr; gap:30px; align-items:center; padding:36px; border-radius:28px; background:var(--ink); color:white; }.newsletter p { color:#cbd4e8; }.qr { display:grid; place-items:center; justify-self:end; width:170px; height:170px; border:12px solid white; border-radius:12px; background:repeating-conic-gradient(#17213d 0 25%,#fff 0 50%) 50%/23px 23px; }.qr span { display:grid; place-items:center; width:48px; height:48px; border-radius:11px; background:var(--banana); color:var(--ink); font-size:24px; font-weight:900; }.site-footer { margin-top:72px; padding:30px 0; border-top:1px solid var(--line); color:#68738a; font-size:13px; }.footer-inner { display:flex; justify-content:space-between; gap:15px; }.breadcrumbs { margin-top:30px; color:#68738a; font-size:13px; }.breadcrumbs a { color:#8f6000; }.page-head { margin-top:20px; padding:30px; border-radius:24px; background:var(--ink); color:white; }.page-head h1 { font-size:42px; }.page-head p { color:#d6dff1; }.article-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }.article-card img { aspect-ratio:16/10; }.article-card h2 { margin:7px 0; font-size:20px; }.reader { max-width:830px; margin:30px auto 0; }.reader-header { padding:30px; border-radius:22px; background:white; box-shadow:var(--shadow); }.reader-header h1 { margin-top:8px; font-size:35px; }.reader-note { margin-top:18px; padding:15px; border-left:4px solid #f0b700; border-radius:10px; background:#fff8d8; color:#625433; font-size:14px; }.comic-pages { display:grid; gap:18px; margin-top:26px; }.comic-pages figure { margin:0; overflow:hidden; border-radius:17px; background:white; box-shadow:var(--shadow); }.comic-pages img { aspect-ratio:16/10; }.comic-pages figcaption { padding:8px 13px; color:#68738a; font-size:12px; }.reader-end { margin:24px 0; padding:22px; border-radius:16px; background:#fff2b5; text-align:center; }.reader-nav { display:flex; justify-content:space-between; gap:12px; }.reader-nav a { padding:10px 14px; border-radius:11px; background:var(--ink); color:white; font-size:14px; font-weight:800; }
@media (max-width:900px) { .header-inner { padding:11px 0; align-items:flex-start; }.primary-nav { flex-wrap:wrap; justify-content:flex-start; }.header-action { display:none; }.featured-grid,.rank-layout,.story-layout,.newsletter { grid-template-columns:1fr 1fr; }.feature-main { grid-column:span 2; }.comic-row { grid-template-columns:repeat(3,1fr); }.article-grid { grid-template-columns:repeat(2,1fr); }.category-grid { grid-template-columns:repeat(2,1fr); }.qr { justify-self:center; } }
@media (max-width:600px) { .container { width:min(100% - 24px,1200px); }.site-header { position:static; }.header-inner { gap:9px; }.brand { font-size:18px; }.brand-mark { width:32px; height:32px; }.primary-nav { max-height:82px; overflow:auto; }.nav-link { padding:5px 7px; font-size:12px; }.hero { margin-top:25px; padding:30px 24px; }.hero:after { opacity:.4; }.hero-stats { gap:15px; }.section { margin-top:52px; }.featured-grid,.rank-layout,.story-layout,.newsletter { grid-template-columns:1fr; }.feature-main { grid-column:auto; }.comic-row,.article-grid { grid-template-columns:repeat(2,1fr); }.category-grid { gap:11px; }.category-card { min-height:140px; padding:15px; }.calendar { grid-template-columns:repeat(4,1fr); padding:12px; }.day { min-height:75px; }.checks { grid-template-columns:1fr; }.footer-inner { flex-direction:column; }.reader-header { padding:22px; }.reader-header h1 { font-size:29px; }.reader-nav a { font-size:12px; } }