.comic-reader{max-width:960px;margin:auto;scroll-margin-top:130px}.comic-options,.comic-navigation{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.comic-options{margin-bottom:10px}.comic-options label{display:flex;align-items:center;gap:7px;font-size:12px}.comic-options select{background:var(--surface);color:var(--text);border:1px solid var(--line);padding:7px;border-radius:5px}.comic-options>.comic-navigation{margin-left:auto}.comic-navigation{justify-content:center;margin:14px 0;font-size:13px}.comic-navigation .button{font-size:12px}.comic-reading-hint{font-size:12px;line-height:1.7;color:var(--muted)}
.comic-page{background:#f7f4ec;color:#171717;border:1px solid #171717;box-shadow:0 12px 30px #0003;padding:22px}.comic-page>header{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:15px;padding-bottom:10px;border-bottom:2px solid #252525;font-size:14px}.comic-page>header b{font-size:24px;line-height:1}.comic-page>footer{text-align:right;padding-top:14px;font-size:11px;color:#555}.comic-page-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}.comic-cell{border:3px solid #202020;background:#fff;min-width:0;overflow:hidden}.comic-featured{grid-column:1/-1}.comic-art{position:relative;background:#18212a}.comic-shot-number{position:absolute;top:8px;left:8px;background:#fff;color:#222;font:bold 12px sans-serif;border:1px solid #222;min-width:23px;padding:4px;text-align:center}.comic-page .reading-inline-picture{height:300px;background:#18212a}.comic-page .comic-featured .reading-inline-picture{height:350px}.comic-page .reading-inline-picture img{height:100%;width:100%;object-fit:contain}.comic-page.fit-cover .reading-inline-picture img{object-fit:cover;object-position:center}.comic-lettering{padding:0 12px;background:#fff}.comic-lettering:empty{display:none}.comic-narration,.comic-dialogue,.comic-subtitle{font-size:14px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;margin:12px 0}.comic-narration{background:#f6f0dd;border:1px solid #403b30;padding:9px 12px}.comic-dialogue{position:relative;border:2px solid #242424;border-radius:24px;padding:13px 20px;margin:16px 0 23px;background:#fff}.comic-dialogue:after{content:'';position:absolute;bottom:-10px;left:28px;width:14px;height:14px;transform:skewY(-35deg);border-left:2px solid #242424;border-bottom:2px solid #242424;background:#fff}.comic-subtitle{text-align:center;color:#555;font-size:12px}.layout-action .comic-cell:not(.comic-featured) .comic-art{clip-path:polygon(0 0,100% 0,96% 100%,4% 100%)}.layout-action .comic-featured .reading-inline-picture{height:400px}.layout-dialogue .reading-inline-picture{height:260px}.comic-source{margin-top:16px;font-size:12px;color:var(--muted)}.comic-source summary{cursor:pointer}.comic-source>section{padding:10px;border-bottom:1px solid var(--line)}.comic-source .comic-narration,.comic-source .comic-dialogue{color:#222}
@container(max-width:640px){.comic-page{padding:12px}.comic-page-grid{gap:8px}.comic-cell{border-width:2px}.comic-page .reading-inline-picture,.layout-dialogue .reading-inline-picture{height:210px}.comic-page .comic-featured .reading-inline-picture{height:250px}.comic-lettering{padding:0 7px}.comic-narration,.comic-dialogue{font-size:12px;padding:7px;line-height:1.7}.comic-options>.comic-navigation{margin-left:0}}
.comic-options>label{flex-shrink:0;white-space:nowrap}.comic-options select{width:auto;max-width:200px}.comic-options input[type=checkbox]{width:16px;height:16px;flex:0 0 16px}

/* Page composition and source-aware cropping are shared by original and code images. */
.comic-page{background:#fff;color:#172024;max-width:980px;box-shadow:0 10px 28px #0002}
.comic-page-grid{gap:9px;padding:9px;background:white}
.comic-cell{position:relative;overflow:hidden;border:2px solid #182024!important;background:#fff}
.comic-art{overflow:hidden;position:relative}
.comic-art .reading-inline-picture{margin:0}
.comic-page.fit-guided .comic-art img{object-fit:cover;object-position:var(--focus-x) var(--focus-y);transform:scale(var(--focus-zoom));transform-origin:var(--focus-x) var(--focus-y)}
.comic-page .comic-art img{height:310px}
.comic-page .comic-featured .comic-art img{height:280px}
.comic-page.layout-action .comic-featured .comic-art img{height:430px}
.comic-page.layout-action .comic-cell:not(.comic-featured){clip-path:polygon(3% 0,100% 0,97% 100%,0 100%)}
.comic-page.layout-dialogue .comic-cell .comic-art img{height:370px}
.comic-lettering{position:absolute!important;inset:0;padding:10px!important;display:flex;flex-direction:column;justify-content:space-between;gap:10px;pointer-events:none;background:transparent!important}
.comic-lettering p{font-size:13px;line-height:1.6;margin:0;max-width:70%;box-shadow:1px 2px 0 #1113;color:#152029;background:#fffffff2}
.comic-lettering .comic-narration{align-self:flex-start;border:1.5px solid #111;border-radius:0;padding:6px 10px}
.comic-lettering .comic-dialogue{align-self:flex-end;position:relative;border:2px solid #182024;border-radius:48% 48% 45% 45%;padding:12px 20px}
.comic-lettering .comic-dialogue:after{content:'';position:absolute;bottom:-8px;left:25%;width:12px;height:14px;background:#fff;border-left:2px solid #182024;transform:skewY(-38deg)}
.comic-shot-number{z-index:2;right:8px;left:auto}
.comic-source{margin:12px 0}.comic-source p{white-space:pre-wrap}
@media(max-width:760px){.comic-lettering p{font-size:11px;max-width:85%}.comic-page .comic-art img{height:250px}.comic-page.layout-action .comic-featured .comic-art img{height:320px}}

.comic-page .reading-inline-picture{height:auto!important;background:transparent}
.reading-source-controls details{flex-basis:100%;font-size:12px;overflow-wrap:anywhere}