:root{
  --bg:#e8e3da;
  --bg2:#f0ece6;
  --ink:#171614;
  --muted:#716d66;
  --line:rgba(23,22,20,.12);
  --toolbar-h:64px;
  --page-ratio:.70710678;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
button,a{font:inherit;color:inherit}button{border:0}
.app{width:100%;height:100%;display:flex;flex-direction:column;background:radial-gradient(circle at 50% 45%,#f4f1eb 0,#ebe7df 45%,#ded8cf 100%)}

.topbar{height:var(--toolbar-h);flex:0 0 var(--toolbar-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 clamp(18px,2.2vw,36px);border-bottom:1px solid var(--line);background:rgba(242,239,233,.94);backdrop-filter:blur(18px);position:relative;z-index:40}
.identity{display:flex;align-items:baseline;gap:16px;white-space:nowrap}.name{font-family:Didot,'Bodoni 72','Times New Roman',serif;font-size:21px;letter-spacing:-.025em}.edition{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.page-status{font-size:11px;letter-spacing:.14em;color:#5d5953;min-width:104px;text-align:center}
.controls{justify-self:end;display:flex;align-items:center;gap:4px}.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:transparent;cursor:pointer;transition:background .2s,opacity .2s;text-decoration:none}.icon-btn:hover{background:rgba(23,22,20,.06)}.icon-btn.active{background:rgba(23,22,20,.06)}.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}.icon-btn svg rect{fill:none}.icon-btn[disabled]{opacity:.2;pointer-events:none}.icon-btn:not(.active) .sound-waves{opacity:.16}

.viewer{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:10px 66px 24px}
.book-viewport{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
.zoom-layer{position:relative;display:flex;align-items:center;justify-content:center;transform-origin:center center;transition:transform .22s ease;will-change:transform}
.zoom-layer.no-transition{transition:none}.flipbook{transform:translateZ(0);filter:drop-shadow(0 26px 42px rgba(44,38,31,.20))}.flipbook.interaction-paused{pointer-events:none}
.book-viewport.zoomed{cursor:grab}.book-viewport.zoomed.dragging{cursor:grabbing}

/* HTML page mode keeps the original page images crisp instead of rasterising the book to a low-res canvas. */
.page{position:relative;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.025)}
.page img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;pointer-events:none;image-rendering:auto}
/* very subtle static gutter: the moving page engine adds the dynamic fold shadow */
.page:nth-child(even)::after,.page:nth-child(odd):not(:first-child)::after{content:"";position:absolute;top:0;bottom:0;width:13px;pointer-events:none;z-index:2}
.page:nth-child(even)::after{right:0;background:linear-gradient(to left,rgba(29,24,18,.11),rgba(29,24,18,0))}
.page:nth-child(odd):not(:first-child)::after{left:0;background:linear-gradient(to right,rgba(29,24,18,.09),rgba(29,24,18,0))}
.flipbook .stf__parent{filter:drop-shadow(0 6px 8px rgba(45,39,32,.13))}

.nav-arrow{position:absolute;z-index:28;top:50%;transform:translateY(-50%);width:54px;height:80px;display:grid;place-items:center;background:transparent;color:#59554f;cursor:pointer;opacity:.68;transition:opacity .2s,background .2s}.nav-arrow:hover{opacity:1;background:rgba(23,22,20,.045)}.nav-arrow.prev{left:8px}.nav-arrow.next{right:8px}.nav-arrow svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}.nav-arrow[disabled]{opacity:.14;pointer-events:none}
.reading-hint{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);font-size:9px;text-transform:uppercase;letter-spacing:.16em;color:#8d877f;white-space:nowrap;opacity:1;transition:opacity .5s}.reading-hint.hide{opacity:0}
.library-error{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#f5f1e9;color:#111;padding:28px 32px;border-radius:10px;max-width:520px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.18)}.library-error strong{display:block;margin-bottom:12px}.library-error a{text-decoration:underline}

.thumb-drawer{position:fixed;z-index:60;right:0;top:0;width:min(440px,92vw);height:100%;background:#f4f0e8;color:#151515;transform:translateX(102%);transition:transform .34s cubic-bezier(.2,.72,.15,1);box-shadow:-30px 0 70px rgba(0,0,0,.18);display:flex;flex-direction:column}.thumb-drawer.open{transform:translateX(0)}
.drawer-scrim{position:fixed;z-index:55;inset:0;background:rgba(37,32,27,.34);opacity:0;pointer-events:none;transition:opacity .3s}.drawer-scrim.open{opacity:1;pointer-events:auto}.drawer-head{height:104px;display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid rgba(0,0,0,.10)}.drawer-kicker{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.18em;color:#777}.drawer-head h2{font-family:Didot,'Bodoni 72','Times New Roman',serif;font-size:38px;font-weight:400;letter-spacing:-.04em;margin:3px 0 0}.drawer-close{background:transparent;font-size:36px;font-weight:200;cursor:pointer;padding:5px 8px;color:#444}
.thumb-grid{overflow:auto;padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:18px 14px}.thumb{background:transparent;border:0;padding:0;cursor:pointer;text-align:left;color:#111}.thumb-img{background:#fff;aspect-ratio:var(--page-ratio)/1;box-shadow:0 6px 16px rgba(0,0,0,.08);border:1px solid rgba(0,0,0,.07);overflow:hidden}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.thumb span{display:block;margin-top:7px;font-size:10px;letter-spacing:.12em;color:#777}.thumb.current .thumb-img{outline:2px solid #111;outline-offset:2px}.thumb:hover .thumb-img{outline:1px solid rgba(0,0,0,.45);outline-offset:2px}

@media(max-width:820px){
  :root{--toolbar-h:60px}
  .topbar{grid-template-columns:1fr auto;padding:0 10px 0 14px}.identity{gap:8px}.name{font-size:18px}.edition{display:none}.page-status{position:absolute;left:50%;transform:translateX(-50%);font-size:10px}.controls{gap:0}.desktop-only{display:none}.icon-btn{width:35px;height:35px}.icon-btn svg{width:18px;height:18px}.controls .icon-btn:nth-last-child(2){display:none}
  .viewer{padding:7px 34px 22px}.nav-arrow{width:36px;height:64px}.nav-arrow.prev{left:0}.nav-arrow.next{right:0}.nav-arrow svg{width:22px;height:22px}.reading-hint{font-size:8px;bottom:5px;max-width:76vw;text-align:center;white-space:normal}
  .flipbook{filter:drop-shadow(0 18px 30px rgba(44,38,31,.18))}
}
@media(max-width:520px){.identity .name{max-width:120px;overflow:hidden;text-overflow:ellipsis}.controls .icon-btn:last-child{display:none}}

/* V6: cover centring — shift animates together with the page flip (inline transform set by viewer.js) */
.flipbook.cover-slide{transition:transform .9s cubic-bezier(.45,.05,.25,1)}