/* Literata and the reader's actual sepia theme, kept upright. */
.curl-stage.read-stage { padding-top: 28px; }
.reader-card { width: min(100%, 410px); padding: 26px 26px 18px; background: #faf3e0; color: #3d3229; border-radius: 16px; box-shadow: 0 1px 1px #0000000a, 0 6px 14px -6px #281e1429, 0 30px 60px -24px #281e1447; }
.reader-heading, .reader-bottom { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; color: #796e61; }
.reader-heading { padding-bottom: 20px; border-bottom: 1px solid #3d32291a; }
.reader-viewport { height: 358px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3d322933 transparent; margin: 20px -8px 18px; padding: 0 8px; }
.reader-page { position: relative; isolation: isolate; }
.reader-passage { font-family: 'Literata', Georgia, serif; font-size: 18px; line-height: 1.85; font-style: normal; font-kerning: normal; }
.reader-passage span { cursor: pointer; position: relative; border-radius: 3px; transition: color .28s cubic-bezier(.22,.61,.36,1); -webkit-tap-highlight-color: transparent; }
.reader-passage span.is-read { color: #a59b8b; }
.reader-passage span:focus-visible { outline: 1px solid #b0261a; outline-offset: 2px; }
.word-marks { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.word-pill { position: absolute; left: 0; top: 0; border-radius: 7px; background: #b0261a; opacity: .20; will-change: transform,width; }
.reader-bottom { padding-top: 14px; border-top: 1px solid #3d32291a; }
.read-play { min-width: 78px; justify-content: center; }
.read-status:empty { display: none; }
.read-status { font-size: 12px; color: var(--red-ink); margin-top: 10px; }
.diagram.sync-diagram svg { max-width: 600px; margin: auto; font-size: 21px; }
@media (max-width: 600px) {
  .curl-stage.read-stage { margin-inline: 0; padding: 20px 14px 18px; }
  .reader-card { padding: 22px 18px 16px; }
  .reader-passage { font-size: 16px; line-height: 1.9; }
  .reader-heading, .reader-bottom { font-size: 9px; }
  .reader-viewport { height: 340px; }
  .diagram.sync-diagram { padding: 14px 8px 18px; }
  .diagram.sync-diagram svg { font-size: 23px; }
  .sync-diagram figcaption { margin-inline: 8px; }
}