:root{
  --reader-width:720px;
  --paper:#fffdf9;
  --text:#222;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:Georgia,"Times New Roman",serif;
}

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  background:var(--paper);
  border-bottom:1px solid #ddd;
  font-family:Arial,sans-serif;
}

.reader{
  max-width:var(--reader-width);
  margin:auto;
  padding:28px 22px 100px;
  font-size:18px;
  line-height:1.85;
}

.reader p{
  margin-bottom:1.25em;
}

.reader h1,.reader h2,.reader h3{
  line-height:1.3;
}

.menu{
  position:fixed;
  top:69px;
  left:0;
  width:320px;
  height:calc(100vh - 69px);
  overflow:auto;
  background:white;
  padding:24px;
  z-index:30;
  box-shadow:0 0 20px rgba(0,0,0,.15);
}

.hidden{
  display:none;
}

.bottom-nav{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  padding:12px 16px;
  background:var(--paper);
  border-top:1px solid #ddd;
}

.progress-track{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:#ddd;
  z-index:40;
}

.progress-bar{
  height:100%;
  width:0;
  background:#222;
}

button{
  min-height:44px;
  padding:10px 16px;
  border-radius:8px;
  border:1px solid #aaa;
  background:white;
}

.cover{
  max-width:100%;
}

@media(max-width:700px){
  .reader{
    font-size:18px;
    padding:22px 18px 100px;
  }
  .menu{
    width:85%;
  }
}