:root{
  --bg1:#f7f2f3;
  --bg2:#ece2e6;
  --paper:#fffdfb;
  --shadow:0 16px 40px rgba(0,0,0,.18);
  --brand:#6b2134;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  font-family:Georgia,serif;
}
.viewer{
  min-height:100vh;
  display:grid;
  grid-template-columns:72px minmax(0,1fr) 72px;
  align-items:center;
  gap:10px;
  padding:20px 8px;
}
.book{
  position:relative;
  max-width:1100px;
  width:100%;
  margin:0 auto;
}
.spread{
  position:relative;
  width:100%;
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:var(--paper);
}
.spread.desktop{
  display:grid;
  grid-template-columns:1fr 1fr;
  aspect-ratio:1.545 / 1;
}
.page{
  position:relative;
  background:var(--paper);
}
.page.left{border-radius:18px 0 0 18px}
.page.right{border-radius:0 18px 18px 0}
.page img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#fff;
}
.page.left::after,.page.right::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.page.left::after{background:linear-gradient(90deg,rgba(0,0,0,.08),transparent 10%,transparent 90%,rgba(0,0,0,.08));}
.page.right::after{background:linear-gradient(270deg,rgba(0,0,0,.08),transparent 10%,transparent 90%,rgba(0,0,0,.08));}
.spine{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:20px;
  z-index:3;
  background:linear-gradient(90deg, rgba(0,0,0,.12), rgba(255,255,255,.6), rgba(0,0,0,.12));
  box-shadow:inset 0 0 16px rgba(0,0,0,.12);
  border-radius:10px;
}
.nav{
  width:56px;
  height:56px;
  border:none;
  border-radius:50%;
  background:rgba(107,33,52,.94);
  color:white;
  font-size:2rem;
  line-height:1;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(107,33,52,.25);
}
.nav:disabled{opacity:.35;cursor:not-allowed}
.hidden{display:none !important}
.spread.mobile{
  aspect-ratio:0.773 / 1;
}
.page.single{border-radius:18px}
@media (max-width: 820px){
  .viewer{grid-template-columns:52px minmax(0,1fr) 52px; padding:14px 4px;}
  .spine,.spread.desktop{display:none !important}
  .spread.mobile.hidden{display:block !important}
}