:root{--bg:#f5f6f8;--surface:#ffffff;--surface-2:#fafafa;--text:#17191f;--muted:#737985;--line:#e5e7eb;--accent:#17191f;--radius:20px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;-webkit-font-smoothing:antialiased}button{font:inherit}.page{width:calc(100% - 32px);margin:0 auto;padding:34px 0 70px}.header{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:22px}.eyebrow{margin:0 0 8px;color:var(--muted);font-weight:800;font-size:11px;letter-spacing:.16em}h1{margin:0;font-size:clamp(30px,5vw,48px);line-height:1.05;letter-spacing:-.04em}.header-desc{max-width:390px;color:var(--muted);font-size:14px;line-height:1.7;margin:0}.characters-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:18px}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.section-head h2{margin:0;font-size:17px}.section-head span{color:var(--muted);font-size:12px}.characters{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}.person{display:flex;flex-direction:column;min-width:0;border-radius:14px;background:var(--surface-2);overflow:hidden;outline:1px solid var(--line)}.avatar{width:100%;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#f3e8df,#e9edf8);font-size:72px}.avatar img{width:100%;height:100%;object-fit:cover}.person-text{width:100%;padding:12px 12px 14px}.person strong{display:block;font-size:16px}.person small{display:block;margin-top:5px;color:var(--muted);font-size:12px;line-height:1.5}.reader{display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px;align-items:start}.episodes{position:sticky;top:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px}.episodes-title{display:flex;justify-content:space-between;align-items:center;padding:4px 4px 12px}.episodes-title strong{font-size:15px}.episodes-title span{font-size:11px;color:var(--muted)}.episode-list{display:flex;flex-direction:column;gap:8px}.episode-btn{width:100%;border:1px solid transparent;background:transparent;border-radius:13px;padding:11px 12px;text-align:left;cursor:pointer;transition:.16s ease}.episode-btn:hover{background:#f4f5f7}.episode-btn.active{background:#17191f;color:#fff}.episode-no{display:block;font-size:10px;letter-spacing:.08em;opacity:.55;margin-bottom:3px}.episode-name{display:block;font-size:13px;font-weight:750;line-height:1.35}.comic-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.comic-topbar{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:18px 20px;border-bottom:1px solid var(--line)}.comic-title{margin:0;font-size:22px;letter-spacing:-.02em}.comic-desc{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.55}.counter{flex:0 0 auto;padding:7px 10px;border-radius:999px;background:#f1f2f4;color:var(--muted);font-size:11px}.comic-image-wrap{padding:18px;background:#eceef2}.comic-image{width:100%;display:block;border-radius:14px;background:#fff;box-shadow:0 8px 30px #0000000f}.image-placeholder{width:100%;aspect-ratio:4/5;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,transparent 49.4%,#e8e8e8 49.5%,#e8e8e8 50.5%,transparent 50.6%),linear-gradient(45deg,transparent 49.4%,#e8e8e8 49.5%,#e8e8e8 50.5%,transparent 50.6%),#fff;color:#8a909c;text-align:center;padding:30px;box-shadow:0 8px 30px #0000000f}.image-placeholder strong{display:block;font-size:18px;color:#575d68;margin-bottom:7px}.image-placeholder span{font-size:13px;line-height:1.6}.comic-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:14px 18px 18px}.nav-btn{border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px 14px;cursor:pointer;font-weight:700;color:var(--text)}.nav-btn:hover{background:#f7f7f8}.nav-btn:disabled{opacity:.35;cursor:not-allowed}.nav-btn.next{justify-self:end}.nav-status{color:var(--muted);font-size:12px}.mobile-episode-strip{display:none}@media(max-width:860px){.header{display:block}.header-desc{margin-top:10px;max-width:none}.characters{display:flex;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}.characters::-webkit-scrollbar{display:none}.person{flex:0 0 150px;scroll-snap-align:start}.avatar{font-size:60px}.reader{display:block}.episodes{display:none}.mobile-episode-strip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-bottom:12px;padding:2px;scroll-snap-type:x proximity}.mobile-episode-strip::-webkit-scrollbar{display:none}.mobile-episode-btn{flex:0 0 auto;border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 13px;font-size:12px;font-weight:700;cursor:pointer;scroll-snap-align:start}.mobile-episode-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}}@media(max-width:560px){.page{width:calc(100% - 16px);padding-top:20px}.characters-wrap,.comic-card{border-radius:16px}.characters-wrap{padding:14px}.section-head span{display:none}.comic-topbar{padding:15px 15px 13px}.comic-title{font-size:19px}.comic-image-wrap{padding:10px}.image-placeholder{border-radius:10px;aspect-ratio:3/4}.comic-nav{grid-template-columns:1fr 1fr;padding:12px}.nav-status{grid-column:1/-1;grid-row:1;text-align:center}.nav-btn{grid-row:2;width:100%}}