* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: white; color: black; }
body { font: 18px Arial, sans-serif; }
body.mac-kindlesize { position: relative; width: 618px; height: 716px; }
button { min-height: 46px; padding: 6px 12px; margin: 0; border: 2px solid black; border-radius: 0; background: white; color: black; font: inherit; cursor: pointer; }
button:disabled { border-color: #888; color: #777; cursor: default; }
button:focus, textarea:focus { outline: 3px solid black; outline-offset: 2px; }
header { position: absolute; top: 0; left: 0; right: 0; height: 126px; padding: 8px 18px; border-bottom: 1px solid black; }
h1 { font-size: 22px; line-height: 25px; margin: 0; }
#book-credit { margin: 3px 0 8px; font-size: 14px; line-height: 16px; }
.toolbar button { margin-right: 5px; font-size: 17px; }
#reading-area { position: absolute; top: 140px; bottom: 94px; left: 25px; right: 25px; overflow: hidden; }
#page-window { position: relative; overflow: hidden; width: 100%; }
#source { position: relative; margin: 0; padding: 6px 4px 0; font: 22px/33px Georgia, 'Times New Roman', serif; }
#source.large { font-size: 26px; line-height: 39px; }
.paragraph { margin: 0 0 18px; padding: 0; white-space: pre-wrap; }
.paragraph.title { font-weight: bold; margin-top: 24px; margin-bottom: 24px; }
.paragraph.title:first-child { margin-top: 0; }
.word.kept { background: #ddd; border-bottom: 2px solid black; }
.word.has-note { text-decoration: underline; text-decoration-style: dotted; }
.paragraph:focus { outline: 2px solid black; }
footer { position: absolute; bottom: 0; left: 0; right: 0; height: 88px; padding: 5px 16px 0; border-top: 1px solid black; background: white; }
.turns { position: relative; height: 46px; text-align: center; }
#previous { position: absolute; left: 0; top: 0; }
#next { position: absolute; right: 0; top: 0; }
#page-label { display: inline-block; margin-top: 12px; font-size: 17px; }
#status { margin: 5px 0 0; font-size: 14px; line-height: 17px; }
.panel { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 16px 22px; overflow: auto; background: white; z-index: 3; }
[hidden] { display: none !important; }
.panel h2 { font-size: 24px; margin: 18px 0 12px; }
blockquote { font: 20px/28px Georgia, serif; margin: 0 0 16px; max-height: 115px; overflow: auto; border-left: 3px solid black; padding-left: 12px; white-space: pre-wrap; }
label { display: block; margin: 18px 0 8px; }
textarea { width: 100%; font: 20px/28px Arial, sans-serif; color: black; background: white; border: 2px solid black; margin: 0 0 10px; padding: 8px; }
#note-status { font-size: 18px; }
.note-card { border-top: 1px solid black; padding: 14px 0; }
.note-card p { white-space: pre-wrap; overflow-wrap: break-word; }
.note-card button { margin-bottom: 10px; }
@media (max-height: 540px) { header { height: 112px; } #book-credit { margin-bottom: 3px; } #reading-area { top: 122px; bottom: 88px; } footer { height: 82px; } }

/* Dedicated offline-launch experiment. */
header { height: 148px; }
#reading-area { top: 160px; }
#offline-status { font-size: 14px; line-height: 18px; margin: 5px 0 0; }
@media (max-height: 540px) { header { height: 142px; } #reading-area { top: 152px; } }