:root{color-scheme:light;--ink:#17213a;--muted:#667085;--line:#e5e8f0;--paper:#f6f7fb;--brand:#5b6df8}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,PingFang SC,Microsoft YaHei,sans-serif}.topbar{height:72px;padding:0 max(24px,calc((100% - 1120px)/2));display:flex;align-items:center;gap:24px;background:#fff;border-bottom:1px solid var(--line)}.topbar .back{color:#44506a;text-decoration:none}.topbar div{display:flex;flex-direction:column}.topbar small{color:var(--muted);margin-top:3px}main{max-width:1120px;margin:0 auto;padding:36px 24px 64px}.state-card{max-width:560px;margin:80px auto;background:#fff;border:1px solid var(--line);border-radius:24px;padding:48px;text-align:center;box-shadow:0 18px 50px #1b275e14}.state-icon{font-size:44px}.state-card h1{margin:18px 0 8px}.state-card p{color:var(--muted);line-height:1.7}.state-card a{display:inline-block;margin-top:12px;color:var(--brand)}.hero{min-height:250px;padding:42px 52px;border-radius:28px;display:flex;justify-content:space-between;align-items:center;color:#fff;background:linear-gradient(135deg,#3346c8,#7584ff);overflow:hidden}.hero span,.reader-heading span{font-size:12px;letter-spacing:.16em;font-weight:800}.hero h1{font-size:38px;margin:12px 0}.hero p{opacity:.85}.hero-art{width:160px;height:160px;display:grid;place-items:center;border-radius:50%;font-size:44px;font-weight:900;background:#ffffff29;transform:rotate(8deg)}.section-head{margin:40px 0 18px;display:flex;justify-content:space-between;align-items:end}.section-head span{font-size:13px;color:var(--brand);font-weight:800}.section-head h2{margin:6px 0 0}.section-head button,.reader-back{border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 16px;cursor:pointer}.comic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}.comic-card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 10px 25px #1b275e0d}.comic-cover{height:190px;display:grid;place-items:center;color:#fff;font-size:46px;font-weight:900}.comic-content{padding:20px}.comic-content span{font-size:12px;font-weight:800;color:var(--brand)}.comic-content h3{margin:8px 0;overflow-wrap:anywhere}.comic-content p{min-height:48px;color:var(--muted);line-height:1.55}.comic-content button{width:100%;border:0;border-radius:12px;padding:12px;background:var(--ink);color:#fff;font-weight:700;cursor:pointer}.library-empty{grid-column:1/-1;min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#fff;border:1px dashed #cbd1df;border-radius:18px;color:var(--muted)}.library-empty strong{color:var(--ink);font-size:18px}.reader-toolbar{margin-bottom:28px;display:flex;align-items:center;justify-content:space-between;gap:12px}.reader-back{margin:0}.reader-open{border:0;border-radius:12px;padding:11px 16px;background:var(--brand);color:#fff;text-decoration:none;font-weight:700}.reader-heading{text-align:center;margin-bottom:22px}.reader-heading span{color:var(--brand)}.reader-heading h1{font-size:34px;margin:8px;overflow-wrap:anywhere}.reader-heading p{color:var(--muted);overflow-wrap:anywhere}.reader-loading{min-height:180px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;color:var(--muted)}.pdf-viewport{width:100%;min-height:420px;padding:12px;overflow:auto;text-align:center;background:#dfe2e8;border:1px solid var(--line);border-radius:8px}.pdf-viewport canvas{display:block;max-width:100%;margin:0 auto;background:#fff;box-shadow:0 4px 18px #00000029}.page-controls{position:sticky;bottom:12px;width:max-content;max-width:100%;margin:18px auto 0;padding:8px;display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:14px;background:#fffffff5;box-shadow:0 8px 24px #17213a24}.page-controls button{border:1px solid var(--line);border-radius:10px;padding:10px 14px;background:#fff;color:var(--ink);font-weight:700}.page-controls button:disabled{opacity:.4}.page-controls span{min-width:100px;text-align:center;font-variant-numeric:tabular-nums}@media(max-width:640px){main{padding:22px 14px}.hero{padding:30px 24px}.hero h1{font-size:29px}.hero-art{display:none}.comic-grid{grid-template-columns:1fr}.pdf-viewport{min-height:320px;padding:6px}.page-controls{bottom:8px;gap:8px}.page-controls button{padding:10px}.page-controls span{min-width:86px;font-size:13px}.state-card{padding:34px 22px;margin-top:40px}}