:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body.rd { display: flex; flex-direction: column; background: #1b1d21; color: #e8e8e8; font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rd-bar { display: flex; align-items: center; gap: 14px; padding: 8px 14px; background: #14161a; border-bottom: 1px solid #2b2e34; flex-wrap: wrap; }
.rd-back { color: #cfd3da; text-decoration: none; white-space: nowrap; font-weight: 600; }
.rd-back:hover { color: #fff; }
.rd-title { flex: 1 1 200px; min-width: 0; margin: 0; font: 600 15px/1.3 inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rd-ctl button, .rd-link { height: 34px; min-width: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid #3a3e46; background: #23262c; color: #e8e8e8; font: 600 14px/32px inherit; text-decoration: none; cursor: pointer; }
.rd-ctl button { font-size: 20px; line-height: 30px; padding: 0 10px; }
.rd-ctl button:hover, .rd-link:hover { background: #2f333b; }
.rd-page { display: inline-flex; align-items: center; gap: 6px; color: #aab0ba; }
.rd-page input { width: 72px; height: 34px; border-radius: 8px; border: 1px solid #3a3e46; background: #101215; color: #fff; text-align: center; font: 600 15px inherit; }
.rd-stage { flex: 1 1 auto; position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 14px; }
.rd-load { color: #aab0ba; text-align: center; }
#rd-book { margin: 0 auto; }
.rd-pg { background: #fff; overflow: hidden; }
.rd-pg canvas { display: block; width: 100%; height: 100%; }
.rd-pg.empty { background: #f3f3f1; }
.rd-pg .rd-n { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font: 11px/1 sans-serif; color: #888; pointer-events: none; }
@media (max-width: 640px) { .rd-bar { gap: 8px; } .rd-title { order: 3; flex-basis: 100%; } .rd-link { display: none; } }