.reader-surface{--reader-accent:#b86b3b;--reader-paper:#faf7f1;--reader-ink:#302b25;--reader-muted:#948b7f;padding:16px 24px;background:#f5f6f7}.reader-frame{display:flex;flex-direction:column;width:100%;max-width:672px;height:100%;margin:0 auto;border-radius:3px;background:var(--reader-paper);color:var(--reader-ink);box-shadow:0 1px 2px #17212b08,0 4px 18px #17212b08}.reader-page-footer{color:var(--reader-muted)}.reader-controls{border-radius:0 0 3px 3px;padding-bottom:env(safe-area-inset-bottom)}.reader-control-row{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;align-items:center;gap:4px;height:46px;padding:0 8px}.reader-transport{grid-column:2}@media (max-width:639px){.reader-surface{padding:12px 12px 0}.reader-controls{margin:0 -12px;border-radius:0;border-width:1px 0}.reader-control-row{grid-template-columns:minmax(0,1fr) 36px}.reader-transport{grid-column:1}}@media (max-width:359px){.reader-transport{gap:6px}.reader-playback{gap:0}.reader-step{width:24px}.reader-skip{width:32px}.reader-speed{width:36px}}@media (prefers-color-scheme:dark){.reader-surface{--reader-paper:#121110;--reader-ink:#e7e3dc;--reader-muted:#a49e95}}@media (prefers-reduced-motion:reduce){.reader-surface *{transition-duration:0s!important}}