@font-face{font-family:Raleway;font-weight:100 900;font-display:swap;src:url(fonts/raleway-var-latin.woff2) format("woff2")}
@font-face{font-family:Roboto;font-weight:100 900;font-display:swap;src:url(fonts/roboto-var-latin.woff2) format("woff2")}
:root{--ground:oklch(0.985 0.002 250);--stage:#e9eaec;--ink:#333;--soft:#5c5c5c;--hair:#e3e4e6;--red:#fe0000;--deep:#c40000;--r:6px}
*{box-sizing:border-box}
body{margin:0;background:var(--stage);color:var(--ink);font:400 16px/1.5 Roboto,-apple-system,"Segoe UI",Arial,sans-serif}
header{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--ground);border-bottom:1px solid var(--hair)}
header h1{display:flex;align-items:center;gap:16px;margin:0;font:700 1.05rem/1 Raleway,Arial,sans-serif}
header h1 img{height:34px;width:auto;display:block}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
button,a.btn{background:var(--ground);color:var(--ink);border:1.5px solid var(--ink);border-radius:var(--r);padding:8px 14px;font:600 .9rem/1.2 Roboto,Arial,sans-serif;cursor:pointer;text-decoration:none;white-space:nowrap}
button:hover,a.btn:hover{background:var(--ink);color:#fff}
a.btn{background:var(--deep);border-color:var(--deep);color:#fff}
a.btn:hover{background:#9c0000;border-color:#9c0000}
button:focus-visible,a.btn:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
#count{min-width:7.5em;text-align:center;color:var(--soft);font-size:.9rem}
main{padding:20px 16px 24px}
#book{margin:0 auto}
.page{background:#fff}
.page img{width:100%;height:100%;display:block;object-fit:cover}
.hint{color:var(--soft);text-align:center;font-size:.85rem;margin:12px 0 0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:700px){header{padding:10px 14px}header h1 span{display:none}header h1 img{height:30px}.bar{gap:6px}button,a.btn{padding:7px 10px;font-size:.85rem}#count{min-width:0}main{padding:12px 8px 20px}}

dialog#zoombox{max-width:96vw;max-height:94vh;padding:0;border:0;background:#fff;overflow:auto}
dialog#zoombox::backdrop{background:rgba(0,0,0,.8)}
dialog#zoombox img{display:block;width:1275px;max-width:none;height:auto}
dialog#zoombox img + img{border-top:8px solid #e3e4e6}
dialog#zoombox .close{position:sticky;top:8px;left:8px;margin:8px;z-index:1}
@media (max-width:700px){dialog#zoombox img{width:900px}}