:root{
  --bg:#111;
  --panel:#171717;
  --paper:#f4efe6;
  --ink:#f6f2ea;
  --muted:#b7aa98;
  --accent:#9c6a43;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
body{display:flex;flex-direction:column;overflow:hidden}
.reader-header,.reader-footer{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:18px;padding:12px 18px;background:#0e0e0e;border-color:#2c2c2c;
  z-index:10
}
.reader-header{border-bottom:1px solid #2c2c2c}
.reader-footer{border-top:1px solid #2c2c2c;font-size:12px;letter-spacing:.12em}
.brand{font-size:12px;letter-spacing:.16em}
.issue-title{text-align:center;font-family:Georgia,serif;font-size:18px}
.reader-actions{justify-self:end;display:flex;gap:8px}
button{background:none;color:inherit;border:1px solid #3a3a3a;border-radius:999px;padding:8px 12px;cursor:pointer}
button:hover{background:#1c1c1c}
.reader-shell{position:relative;flex:1;display:grid;grid-template-columns:64px 1fr 64px;min-height:0}
.stage{
  min-height:0;display:flex;align-items:center;justify-content:center;
  padding:18px;perspective:1800px;overflow:hidden;
}
.page-wrap{
  position:relative;height:min(88vh,calc(100vh - 130px));max-width:100%;
  display:flex;align-items:center;justify-content:center;
}
.page{
  max-height:100%;max-width:100%;object-fit:contain;display:block;
  box-shadow:0 20px 55px rgba(0,0,0,.45);background:#ddd;
  transform-origin:left center;
}
.page.flip-in{animation:flipIn .35s ease}
.page.flip-out{animation:flipOut .22s ease}
@keyframes flipIn{from{transform:rotateY(-7deg) scale(.995);opacity:.65}to{transform:none;opacity:1}}
@keyframes flipOut{from{transform:none;opacity:1}to{transform:rotateY(7deg) scale(.995);opacity:.65}}
.nav{
  border:0;border-radius:0;font-size:42px;color:#cab79e;display:flex;align-items:center;justify-content:center;
}
.nav:hover{background:#171717}
.progress{width:180px;height:3px;background:#2a2a2a;display:inline-block;vertical-align:middle}
#progressBar{display:block;height:100%;width:0;background:var(--accent)}
.reader-footer>span:last-child{justify-self:end}
.thumb-panel{
  position:fixed;top:0;right:0;bottom:0;width:min(430px,90vw);background:#121212;
  border-left:1px solid #2a2a2a;transform:translateX(100%);transition:.25s ease;z-index:50;
  display:flex;flex-direction:column
}
.thumb-panel.open{transform:translateX(0)}
.thumb-panel-head{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #2a2a2a}
.thumb-grid{padding:14px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;overflow:auto}
.thumb{border:1px solid #303030;padding:0;background:#181818;border-radius:8px;overflow:hidden}
.thumb img{width:100%;display:block}
.thumb span{display:block;padding:7px 9px;font-size:11px;letter-spacing:.08em;text-align:left}
@media (max-width:760px){
  .reader-header{grid-template-columns:1fr auto}
  .issue-title{display:none}
  .reader-shell{grid-template-columns:42px 1fr 42px}
  .stage{padding:8px}
  .page-wrap{height:min(82vh,calc(100vh - 122px))}
  .reader-footer{grid-template-columns:auto 1fr auto}
  .progress{width:100%}
}