footer{text-align:center;margin-top:56px;font-size:13px}footer a{color:#666;text-decoration:none}footer a:hover{text-decoration:underline}*{box-sizing:border-box}body{margin:0;background:#fff;color:#222;font-family:system-ui,sans-serif}main{max-width:1000px;margin:auto;padding:24px 12px 32px}.comic{display:block;width:auto;max-width:100%;height:auto;margin:0 auto}nav{display:flex;justify-content:center;gap:8px;margin-top:20px}nav a,nav button,nav span{display:inline-block;border:1px solid #ccc;border-radius:4px;background:#fff;color:#222;padding:9px 12px;font:inherit;text-decoration:none;text-align:center}nav a:hover,nav button:enabled:hover{background:#f3f3f3}nav button:enabled{cursor:pointer}nav span,nav button:disabled{color:#999;background:#fafafa}a:focus-visible,button:focus-visible{outline:3px solid #2563eb;outline-offset:3px}.empty{text-align:center;margin:25vh 0}@media(max-width:380px){nav{gap:4px}nav a,nav button,nav span{padding:9px}}
/* Fit the comic and controls together on roomy screens; preserve natural scrolling on small ones. */
@media (min-width:768px) and (min-height:480px) {
  main.reader {
    max-width:none;
    height:100vh;
    height:100dvh;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) auto auto;
  }
  main.reader > .comic {
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    object-fit:contain;
  }
}