/* =========================================================
   藏书阁与阅读页样式（books.css）
   主题变量沿用站点 style.css；新增 .reader-* 命名空间避免与全站冲突。
   ========================================================= */

/* ============= 藏书墙 page ============= */
.books-page { padding-top: 32px; padding-bottom: 80px; }
.books-page .page-sub { color: var(--ink-2); margin: 6px 0 18px; }

.books-search {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-bottom: 16px;
}
#bookSearch {
  flex: 1; min-width: 220px; padding: 10px 14px; font-size: 15px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink); outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
#bookSearch:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}

.books-sort { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 14px; }
.books-sort select {
  padding: 6px 10px; font-size: 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); cursor: pointer;
}

.book-facets {
  display: flex; align-items: flex-start; gap: 10px;
  flex-wrap: wrap; margin: 4px 0 24px;
  padding: 14px 16px; background: var(--surface-2);
  border-radius: var(--radius); border: 1px dashed var(--line);
}
.book-facets-label { color: var(--ink-3); font-size: 13px; line-height: 28px; }
.book-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); padding: 4px 12px; border-radius: 999px;
  font-size: 13px; cursor: pointer; transition: all .15s ease;
  font-family: inherit;
}
.chip:hover { color: var(--ink); border-color: var(--accent); }
.chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* 分类徽标：封面下方、书名之后 */
.book-cat {
  display: inline-block; margin: 5px 0 0; padding: 1px 9px;
  border-radius: 999px; font-size: 11.5px; line-height: 1.7;
  background: var(--accent-soft); color: var(--accent-ink);
  border: 1px solid var(--accent);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 22px 18px;
  margin-top: 8px;
}
.book-card {
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: inherit;
  border-radius: var(--radius); transition: transform .18s ease;
}
.book-card:hover { transform: translateY(-3px); }
.book-card:hover .book-title { color: var(--accent); }

.book-cover-wrap {
  position: relative; aspect-ratio: 2 / 3; overflow: hidden;
  border-radius: 8px; background: var(--surface-2);
  box-shadow: 0 6px 18px -10px rgba(40, 28, 14, .35);
  display: flex; align-items: center; justify-content: center;
}
.book-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-cover.broken { display: none; }
.book-fallback { font-size: 56px; color: var(--ink-3); }
.book-fmts { position: absolute; top: 6px; left: 6px; display: flex; gap: 4px; }
.book-fmt { font-size: 10.5px; letter-spacing: .5px; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,.55); color: #fff; font-weight: 600; }
.book-fmt.pdf { background: rgba(192, 57, 43, .85); }
.book-fmt.epub { background: rgba(40, 90, 160, .85); }
.book-rating {
  position: absolute; bottom: 6px; right: 6px;
  font-size: 12px; padding: 2px 8px; border-radius: 999px;
  background: rgba(0,0,0,.62); color: #ffd76b; font-weight: 600;
}
.book-info { padding: 0 4px; }
.book-title { font-size: 15px; line-height: 1.4; margin: 0; font-weight: 600; transition: color .15s; }
.book-author { font-size: 13px; color: var(--ink-2); margin: 4px 0 0; line-height: 1.4; }
.book-tags { font-size: 12.5px; color: var(--ink-3); margin: 4px 0 0; line-height: 1.4; }

.loadmore {
  display: block; margin: 36px auto 0; padding: 10px 32px;
  border: 1px dashed var(--line); border-radius: 999px;
  background: transparent; color: var(--ink-2); cursor: pointer;
  font-family: inherit; font-size: 14px;
  transition: all .15s ease;
}
.loadmore:hover { color: var(--accent); border-color: var(--accent); }

.empty { text-align: center; padding: 64px 16px; color: var(--ink-2); }
.empty .btn-primary {
  display: inline-block; margin-top: 12px; padding: 8px 18px;
  background: var(--accent); color: var(--accent-ink); border-radius: 999px;
  text-decoration: none; font-weight: 600;
}

@media (max-width: 640px) {
  .book-grid { grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: 18px 12px; }
  .books-search { flex-direction: column; align-items: stretch; }
  .book-facets { padding: 10px 12px; }
}

/* =========================================================
   阅读页 reader.*
   ========================================================= */

:root {
  --reader-bg: #fdfaf3;
  --reader-fg: #2a2520;
  --reader-soft: #f3ece1;
  --reader-bar-bg: rgba(255, 255, 255, .92);
  --reader-line: rgba(0, 0, 0, .08);
  --reader-accent: #c05a38;
  --reader-font-scale: 1;
}
body[data-reader-theme="light"] { --reader-bg: #fdfaf3; --reader-fg: #2a2520; --reader-soft: #f3ece1; --reader-bar-bg: rgba(255, 255, 255, .92); }
body[data-reader-theme="sepia"] { --reader-bg: #f4ecd8; --reader-fg: #4a3b1d; --reader-soft: #ecdfc0; --reader-bar-bg: rgba(244, 236, 216, .92); }
body[data-reader-theme="dark"]  { --reader-bg: #1a1612; --reader-fg: #ece4d8; --reader-soft: #2a2520; --reader-bar-bg: rgba(20, 16, 12, .92); --reader-line: rgba(255, 255, 255, .08); --reader-accent: #e07a55; }

/*
  100vh 在手机上算的是「带地址栏的最大高度」，实际可见区比它小，底栏会被浏览器工具条盖住一半。
  100dvh 是动态视口高度，地址栏收起/展开时跟着变——支持的浏览器用后者，不支持的退回 100vh。
*/
.reader-body { background: var(--reader-bg); color: var(--reader-fg); height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.reader-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px;
  background: var(--reader-bar-bg);
  border-bottom: 1px solid var(--reader-line);
  backdrop-filter: blur(8px);
}
.reader-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-2); text-decoration: none; font-size: 14px;
  padding: 6px 10px; border-radius: var(--radius-sm);
}
.reader-back:hover { color: var(--reader-accent); background: var(--reader-soft); }
.reader-back svg { width: 18px; height: 18px; }
.reader-title { flex: 1; min-width: 0; }
.reader-title h1 { font-size: 16px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-meta { font-size: 12.5px; color: var(--ink-3); margin: 2px 0 0; }

.reader-tools { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.reader-tools .icon-btn {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; background: transparent; color: var(--reader-fg);
  border-radius: 8px; cursor: pointer; transition: all .15s ease;
}
.reader-tools .icon-btn:hover { background: var(--reader-soft); }
.reader-tools .icon-btn svg { width: 18px; height: 18px; }
.reader-tools .btnFontLarger .a,
.reader-tools .icon-btn .a { font-size: 13px; line-height: 1; }
.reader-tools .btnFontLarger .b,
.reader-tools .icon-btn .b { font-size: 13px; font-weight: 700; line-height: 1; }
.reader-divider { width: 1px; height: 22px; background: var(--reader-line); margin: 0 4px; }

.reader-stage {
  flex: 1 1 auto; position: relative; display: flex; min-height: 0;
  background: var(--reader-bg);
}
.reader-canvas {
  flex: 1; min-width: 0; min-height: 0;
  padding: 18px;
  overflow: auto;
  display: flex; align-items: flex-start; justify-content: center;
}
.reader-canvas:focus { outline: none; }
.reader-canvas.pdf-canvas-stage { padding: 18px; }
.pdf-canvas { display: block; box-shadow: 0 8px 24px -16px rgba(0,0,0,.4); background: #fff; }

.reader-side {
  position: absolute; top: 0; bottom: 0; width: min(300px, 80%);
  background: var(--reader-bar-bg); border-right: 1px solid var(--reader-line);
  padding: 18px 14px; overflow-y: auto;
  backdrop-filter: blur(8px);
  z-index: 10; transition: transform .2s ease;
}
.reader-side[hidden] { display: none; }
.toc-list, .bm-list { list-style: none; padding: 0; margin: 8px 0 0; }
.toc-list a, .bm-list a {
  display: block; padding: 7px 8px; border-radius: 6px;
  text-decoration: none; color: var(--reader-fg); font-size: 14px;
  line-height: 1.4; transition: background .15s;
  word-break: break-word;
}
.toc-list a:hover, .bm-list a:hover { background: var(--reader-soft); color: var(--reader-accent); }
.bm-list li { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.bm-list .icon-btn { color: var(--ink-3); }
.btn-primary {
  display: inline-block; margin-top: 12px; padding: 8px 16px;
  background: var(--reader-accent); color: var(--reader-fg);
  border: none; border-radius: 8px; cursor: pointer; font-size: 14px;
  text-decoration: none; font-family: inherit;
}

.reader-foot {
  flex: 0 0 auto;
  padding: 8px 18px; background: var(--reader-bar-bg);
  border-top: 1px solid var(--reader-line);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
}
.reader-progress { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-2); width: min(720px, 100%); }
.reader-progress #progressLabel { flex: 0 0 auto; min-width: 110px; }
.reader-progress #progressPct { flex: 0 0 auto; min-width: 40px; text-align: right; }
.reader-progress #progressBar {
  flex: 1; accent-color: var(--reader-accent); height: 4px;
}

.reader-toast {
  position: fixed; left: 50%; bottom: 80px;
  transform: translateX(-50%);
  padding: 8px 18px; border-radius: 999px;
  background: rgba(0,0,0,.78); color: #fff; font-size: 14px;
  z-index: 100; pointer-events: none;
  animation: toast-in .18s ease both;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

.reader-error { text-align: center; padding: 60px 16px; color: var(--reader-fg); }
.reader-error p { font-size: 16px; margin: 0 0 16px; }
.hint { color: var(--ink-3); font-size: 13.5px; line-height: 1.6; }

@media (max-width: 720px) {
  .reader-bar { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  .reader-title h1 { font-size: 15px; }
  .reader-title { flex-basis: 100%; order: 2; }
  .reader-tools { order: 1; flex: 1; justify-content: flex-end; }
  .reader-divider { display: none; }
  .reader-canvas { padding: 8px; }
}

/* epub.js 生成的 iframe 撑满阅读区 */
.reader-canvas > div,
.reader-canvas iframe { width: 100% !important; max-width: 920px; margin: 0 auto; }

/* =========================================================
   划词词典 rd.*（reader-dict.js）
   颜色一律跟着阅读主题变量走，浅色/护眼/深色三套都成立。
   ========================================================= */

.rd-pop, .rd-panel {
  background: var(--reader-bar-bg);
  border: 1px solid var(--reader-line);
  border-radius: 12px;
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .45);
  color: var(--reader-fg);
  font-size: 14px;
  line-height: 1.6;
  backdrop-filter: blur(10px);
}
.rd-pop[hidden], .rd-panel[hidden], .rd-page-text[hidden] { display: none; }

/* ---- 划词浮层 ---- */
.rd-pop {
  position: fixed;
  z-index: 200;
  width: min(360px, 92vw);
  max-height: 62vh;
  overflow-y: auto;
  padding: 10px 12px 8px;
  animation: rd-in .14s ease both;
}
@keyframes rd-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.rd-pop-bar { display: flex; justify-content: flex-end; }
.rd-pop-body { padding: 0 2px; }
.rd-pop-foot {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--reader-line);
}

/* ---- 查词面板 ---- */
.rd-panel {
  position: fixed;
  z-index: 210;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, 94vw);
  max-height: 84vh;
  overflow-y: auto;
  padding: 14px 16px 16px;
}
.rd-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rd-panel-head h2 { margin: 0; font-size: 16px; }
.rd-panel-form { display: flex; gap: 8px; margin-bottom: 10px; }
.rd-input {
  flex: 1; min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--reader-line);
  border-radius: 8px;
  background: var(--reader-soft);
  color: var(--reader-fg);
  font-size: 14px; font-family: inherit;
}
.rd-input:focus { outline: 2px solid var(--reader-accent); outline-offset: -1px; }
.rd-go {
  flex: 0 0 auto; padding: 8px 16px;
  border: none; border-radius: 8px; cursor: pointer;
  background: var(--reader-accent); color: #fff;
  font-size: 14px; font-family: inherit;
}
.rd-panel-body { min-height: 60px; }
.rd-panel-pdf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid var(--reader-line);
}
.rd-panel-foot {
  padding-top: 10px; margin-top: 10px;
  border-top: 1px solid var(--reader-line);
}
.rd-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.rd-toggle input { width: 16px; height: 16px; accent-color: var(--reader-accent); }

/* ---- 结果内容 ---- */
.rd-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.rd-word { font-size: 20px; font-weight: 600; letter-spacing: .02em; }
.rd-ph { font-size: 13px; color: var(--reader-accent); }
.rd-ph-sub { color: var(--ink-3); }

.rd-defs { margin: 4px 0 0; }
.rd-def { display: flex; gap: 8px; padding: 3px 0; }
.rd-note {
  flex: 0 0 auto; max-width: 40%;
  font-size: 13px; color: var(--reader-accent);
  word-break: break-word;
}
.rd-text { flex: 1; min-width: 0; word-break: break-word; }

.rd-baike {
  margin: 8px 0 0; padding: 8px 10px;
  background: var(--reader-soft);
  border-radius: 8px;
  font-size: 13.5px; color: var(--reader-fg);
  max-height: 160px; overflow-y: auto;
}
.rd-brief { margin: 8px 0 0; font-size: 13.5px; }
.rd-label { display: block; font-size: 12.5px; color: var(--ink-3); margin-bottom: 4px; }
.rd-brief .rd-label { display: inline; margin-right: 6px; }

.rd-phrases { margin: 8px 0 0; }
.rd-phrase { display: flex; gap: 8px; font-size: 13.5px; padding: 2px 0; }

.rd-sents { margin: 8px 0 0; }
.rd-sent { padding: 5px 0; border-top: 1px dashed var(--reader-line); }
.rd-sent p { margin: 0; font-size: 13px; }
.rd-sent-src { word-break: break-word; }
.rd-sent-tran { color: var(--ink-3); }

.rd-source { margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.rd-loading, .rd-error, .rd-hint { margin: 8px 0; font-size: 13.5px; color: var(--ink-3); }
.rd-error { color: #c0392b; }

/* ---- 小按钮 / 历史 / 本页文字 ---- */
.rd-x {
  width: 26px; height: 26px; flex: 0 0 auto;
  border: none; background: transparent; cursor: pointer;
  color: var(--ink-3); font-size: 20px; line-height: 1; border-radius: 6px;
}
.rd-x:hover { background: var(--reader-soft); color: var(--reader-fg); }
.rd-mini {
  padding: 4px 10px;
  border: 1px solid var(--reader-line); border-radius: 999px;
  background: transparent; color: var(--reader-fg);
  font-size: 12.5px; font-family: inherit; cursor: pointer;
}
.rd-mini:hover { background: var(--reader-soft); }
.rd-tip { font-size: 12px; color: var(--ink-3); }

.rd-hist { margin-top: 12px; }
.rd-hist-list { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-chip {
  padding: 3px 10px;
  border: 1px solid var(--reader-line); border-radius: 999px;
  background: var(--reader-soft); color: var(--reader-fg);
  font-size: 12.5px; font-family: inherit; cursor: pointer;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rd-chip:hover { border-color: var(--reader-accent); color: var(--reader-accent); }

.rd-page-text {
  max-height: 180px; overflow-y: auto;
  margin-bottom: 10px; padding: 10px;
  background: var(--reader-soft); border-radius: 8px;
  font-size: 13px; line-height: 1.8;
  user-select: text; -webkit-user-select: text;
  cursor: pointer;
  /* 关掉双击缩放与 300ms 点击延迟，手机上「点一下取词」才跟手 */
  touch-action: manipulation;
}
.rd-page-text-inner { margin: 0; white-space: pre-wrap; word-break: break-word; }
/* 手指按下去给点反馈，不然不知道点中了没 */
.rd-page-text:active { background: var(--reader-line); }

/* 正文里被选中的字：给一点提示色，说明这块能查 */
.rd-pop ~ .reader-canvas ::selection { background: rgba(192, 90, 56, .22); }

@media (max-width: 720px) {
  .rd-panel { width: 94vw; max-height: 78vh; }
  .rd-pop { width: min(340px, 90vw); max-height: 52vh; }
  /* 手机上手指没那么准，抓出来的字得放大、拉宽行距才点得中 */
  .rd-page-text { font-size: 17px; line-height: 2.2; max-height: 38vh; }
  /* 触摸目标不小于 44px，不然点不中 */
  .rd-mini, .rd-x { min-height: 44px; padding: 8px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .rd-pop { animation: none; }
}

/* 自渲染 EPUB 阅读器 iframe：撑满可视区，滚动在帧内 */
.reader-canvas > iframe.epub-iframe {
  display: block;
  height: 100% !important;
  border: 0;
  background: var(--reader-bg);
  min-height: 480px;
}

/* =========================================================
   手机全屏 / 沉浸阅读
   ---------------------------------------------------------
   1) 安全区：iPhone 的刘海和底部小黑条会吃掉内容，靠 env() 补回来；
      没刘海的设备 env() 返回 0，等于没加。
   2) 沉浸模式：把上下两条栏压成 0 高，正文独占整屏（iPhone 没有系统全屏 API，靠这个顶）。
   3) 真全屏（:fullscreen）时 html 已经是屏幕高，body 跟着 100% 就行。
   ========================================================= */
.reader-bar {
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  padding-left: calc(18px + env(safe-area-inset-left, 0px));
  padding-right: calc(18px + env(safe-area-inset-right, 0px));
}
.reader-foot {
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  padding-left: calc(18px + env(safe-area-inset-left, 0px));
  padding-right: calc(18px + env(safe-area-inset-right, 0px));
}
.reader-canvas {
  padding-left: calc(18px + env(safe-area-inset-left, 0px));
  padding-right: calc(18px + env(safe-area-inset-right, 0px));
}

.reader-bar, .reader-foot { transition: height .22s ease, opacity .22s ease, padding .22s ease; }
/*
  直接 display:none，而不是压成 0 高：
  压成 0 高时残留的 border、backdrop-filter 光晕、flex 间距在某些内核里还会留下一条白/灰边，
  看着就像「还挡着一截」。彻底摘掉最省心。
*/
body.is-immersive .reader-bar,
body.is-immersive .reader-foot {
  display: none !important;
}
/*
  沉浸时正文必须自己让开手机的状态栏（顶部）和小黑条（底部）：
  开了 viewport-fit=cover 后页面是铺到整块屏幕的，不让开就正好被这两条压住一截。
*/
body.is-immersive .reader-canvas {
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

html:fullscreen .reader-body { height: 100%; }
html:fullscreen body.is-immersive .reader-canvas { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }

/* 沉浸模式下唯一能叫回工具栏的出口，做得淡一点，不挡阅读 */
.reader-exit-fab {
  position: fixed;
  z-index: 60;
  right: calc(14px + env(safe-area-inset-right, 0px));
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--reader-line);
  background: var(--reader-bar-bg);
  color: var(--reader-fg);
  font-family: inherit;
  font-size: 13px;
  opacity: .55;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: opacity .15s ease;
}
.reader-exit-fab:hover, .reader-exit-fab:active { opacity: 1; }
.reader-exit-fab[hidden] { display: none; }

@media (max-width: 720px) {
  .reader-canvas {
    padding-left: calc(8px + env(safe-area-inset-left, 0px));
    padding-right: calc(8px + env(safe-area-inset-right, 0px));
  }
  .reader-bar {
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    padding-left: calc(12px + env(safe-area-inset-left, 0px));
    padding-right: calc(12px + env(safe-area-inset-right, 0px));
  }
  .reader-foot {
    padding-left: calc(12px + env(safe-area-inset-left, 0px));
    padding-right: calc(12px + env(safe-area-inset-right, 0px));
  }
  /*
    手机顶栏原本 flex-wrap 自由换行，实测在 390 宽的屏上要占 146px（844 高的 17%），
    正文被压掉一大截。改成 grid：第一行「返回 + 书名」，第二行「工具栏」，
    再把按钮缩到 32px，让工具一行放得下（9 颗 ≈ 320px）。
  */
  .reader-bar {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 4px 8px;
  }
  .reader-back { grid-row: 1; grid-column: 1; }
  .reader-title { grid-row: 1; grid-column: 2; flex-basis: auto; }
  .reader-tools {
    grid-row: 2;
    grid-column: 1 / -1;
    flex-wrap: nowrap;
    justify-content: flex-end;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .reader-tools::-webkit-scrollbar { display: none; }
  .reader-tools .icon-btn { width: 32px; height: 32px; }
  .reader-tools .icon-btn svg { width: 17px; height: 17px; }
  .book-meta { font-size: 12px; margin: 1px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .reader-bar, .reader-foot { transition: none; }
}