*{box-sizing:border-box}
:root{--page-gap:6px;--bg:#ececec}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:#111;font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
.viewer{width:100%;max-width:1400px;margin:0 auto;padding:0}
.page-shell{position:relative;margin:0 auto var(--page-gap);background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.12);overflow:hidden}
.page-shell canvas{display:block;width:100%;height:auto}
.cover-placeholder{max-width:760px}
.cover-placeholder img{display:block;width:100%;height:auto}
.loading{text-align:center;padding:14px;color:#666;font-size:14px}
.annotation-layer{position:absolute;inset:0;pointer-events:none}
.annotation-link{position:absolute;display:block;pointer-events:auto;background:rgba(0,0,0,0);cursor:pointer}
.annotation-link:focus{outline:2px solid rgba(0,0,0,.25);outline-offset:1px}
.share-button{position:fixed;z-index:50;top:max(12px,env(safe-area-inset-top));right:12px;border:1px solid rgba(0,0,0,.22);border-radius:999px;background:rgba(255,255,255,.94);color:#111;padding:10px 16px;font-size:14px;box-shadow:0 3px 14px rgba(0,0,0,.12);backdrop-filter:blur(10px);cursor:pointer}
.share-button:active{transform:scale(.98)}
.progress-track{position:fixed;z-index:20;left:0;right:0;bottom:0;height:3px;background:rgba(0,0,0,.08)}
.progress-bar{height:100%;width:0;background:#111}
@media(max-width:760px){
  :root{--page-gap:4px}
  .page-shell{margin-bottom:var(--page-gap);box-shadow:none}
  .cover-placeholder{max-width:none}
  .share-button{top:max(10px,env(safe-area-inset-top));right:10px;padding:9px 14px;font-size:13px}
}