:root { color-scheme: light; --link-blue: #147eac; }
* { box-sizing: border-box; }
html { background: #faf9f6; }
body { margin: 0; color: #2d3436; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; }
.comic { width: min(100%, 760px); margin: 0 auto; background: #fff; }
.page { margin: 0; padding: 0 0 22px; }
.page-art { position: relative; isolation: isolate; }
.page-art img, .line-contents img { width: 100%; height: auto; display: block; }
.page-number { margin: 8px 16px 0; color: #7e827d; font-size: 12px; text-align: right; }
.tap-hint { margin: 0; padding: 8px 16px 12px; color: #147eac; font-size: 12px; text-align: center; }
.blue-ink { display: none; position: absolute; pointer-events: none; background: var(--link-blue); mix-blend-mode: screen; }
.js .blue-ink { display: block; }
.speech-link { position: absolute; border: 0; border-radius: 48%; background: transparent; padding: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: rgb(20 126 172 / 16%); }
.speech-link:focus-visible { outline: 3px solid var(--link-blue); outline-offset: 3px; }
@media (hover: hover) { .speech-link:hover { box-shadow: inset 0 0 0 2px rgb(20 126 172 / 38%); } }
.line-contents { margin: 0; position: relative; }
.line-cta-link { position: absolute; left: 12.1%; top: 81.1%; width: 75.9%; height: 12.6%; border-radius: 18px; cursor: pointer; touch-action: manipulation; }
.line-cta-link:focus-visible { outline: 3px solid #147eac; outline-offset: 4px; }
.info-dialog { width: min(calc(100% - 32px), 720px); max-height: calc(100dvh - 48px); margin: auto; padding: 32px 24px; border: 1px solid #d3dadd; border-top: 5px solid var(--link-blue); border-radius: 12px; background: #fff; color: #2d3436; overflow-y: auto; box-shadow: 0 10px 40px rgb(0 0 0 / 14%); }
.info-dialog::backdrop { background: rgb(0 0 0 / 44%); }
.dialog-heading { margin: 0 52px 22px 0; font-size: clamp(21px, 4.8vw, 28px); line-height: 1.5; font-weight: 700; }
.dialog-copy { margin: 0; font-size: clamp(16px, 3.8vw, 22px); line-height: 2; overflow-wrap: anywhere; }
.close-dialog { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border: 2px solid var(--link-blue); border-radius: 3px; background: #fff; color: #4e585d; cursor: pointer; display: grid; place-items: center; }
.close-dialog svg { width: 25px; height: 25px; }
.close-dialog:focus-visible { outline: 3px solid #147eac; outline-offset: 3px; }
.fallback-info { padding: 24px; line-height: 1.9; }
@media (min-width: 600px) { .info-dialog { padding: 54px 44px; } .close-dialog { width: 52px; height: 52px; top: 18px; right: 18px; } }
@media (prefers-reduced-motion: no-preference) { .info-dialog[open] { animation: appear 140ms ease-out; } @keyframes appear { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } }