:root { --green:#102d25; --cream:#f3efe5; --gold:#bda26b; }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; color:white; background:radial-gradient(circle at 50% 35%, #294b40 0, var(--green) 62%); font-family:Montserrat,Arial,sans-serif; overflow-x:hidden; }
button, a { font:inherit; }
.viewer-header { position:relative; z-index:5; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:82px; padding:14px clamp(18px,4vw,58px); border-bottom:1px solid rgba(255,255,255,.18); }
.back, .download { color:white; text-decoration:none; font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.back span { margin-left:10px; }
.download { justify-self:end; padding:10px 13px; border:1px solid rgba(255,255,255,.5); }
.title { text-align:center; font-family:"Cormorant Garamond",Georgia,serif; }
.title strong { display:block; font-size:25px; font-weight:500; letter-spacing:.03em; }
.title small { display:block; margin-top:3px; font-family:Montserrat,Arial,sans-serif; font-size:7px; letter-spacing:.2em; text-transform:uppercase; opacity:.65; }
.viewer-main { min-height:calc(100svh - 82px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:22px 12px 16px; }
.book-stage { position:relative; width:min(1280px,94vw); height:min(76vh,850px); display:grid; place-items:center; }
#book { margin:auto; }
#book img { display:block; width:100% !important; height:100% !important; object-fit:cover; background:#f7f4eb; }
.loading { position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.7); font-family:"Cormorant Garamond",Georgia,serif; font-size:22px; transition:opacity .3s; pointer-events:none; }
.loading.hidden { opacity:0; }
.controls { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:12px; }
.controls button { width:42px; height:38px; border:1px solid rgba(255,255,255,.4); color:white; background:rgba(255,255,255,.06); cursor:pointer; }
.controls button:hover { background:rgba(255,255,255,.14); }
#page-counter { min-width:78px; text-align:center; font-size:10px; letter-spacing:.12em; }
.divider { width:1px; height:22px; margin:0 2px; background:rgba(255,255,255,.25); }
.hint { margin:10px 0 0; font-size:8px; letter-spacing:.14em; text-transform:uppercase; opacity:.48; }
.stf__parent { margin:auto !important; }
.stf__block { box-shadow:0 24px 65px rgba(0,0,0,.36); }
@media (max-width:700px) {
  .viewer-header { min-height:68px; grid-template-columns:1fr auto; }
  .title { display:none; }
  .viewer-main { min-height:calc(100svh - 68px); padding-top:10px; }
  .book-stage { width:98vw; height:min(76svh,720px); }
  .hint { display:none; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }