/*
 * Pilcrow Reader v2
 *
 * Clean, isolated implementation of the six Reader frames from Figma.
 * The EPUB engine and local-first data layer stay in reader-spike.js; this
 * file owns only geometry, typography and motion. Values are expressed at
 * CSS resolution from the 780 x 1688 (2x) Figma frames.
 */

@font-face {
  font-family: "Geologica Pilcrow";
  src: url("/assets/space/geologica-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

.reader-app.reader-v2 {
  --reader-bg: #151515;
  --reader-card: #2b2b2b;
  --reader-cream: #fbd096;
  --reader-paper-warm: #f1e2c9;
  --reader-paper-light: #fffcf4;
  --reader-paper-black: #121212;
  --reader-panel: #fff8e6;
  --reader-brown: #7e5e31;
  --reader-coral: #ff6c4b;
  --reader-muted: #707070;
  --reader-text: #ffeed7;
  --reader-panel-shadow: 0 10px 22px rgb(93 70 34 / 22%);
  width: min(100%, 390px);
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--reader-bg);
  color: var(--reader-text);
  font-family: "Geologica Pilcrow", system-ui, sans-serif;
}

/* Shelf / Reader Main ---------------------------------------------------- */

.reader-v2 .library-screen {
  display: flex;
  width: 100%;
  min-height: 100dvh;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--reader-bg);
  color: var(--reader-text);
  -webkit-overflow-scrolling: touch;
}

.reader-v2 .reader-main-header {
  position: relative;
  display: block;
  height: 96px;
  min-height: 96px;
  flex: 0 0 96px;
  padding: 0;
}

.reader-v2 .reader-main-logo {
  position: absolute !important;
  top: 52.93px !important;
  left: 26px !important;
  width: 63.75px !important;
  height: 18.73px !important;
  margin: 0 !important;
}

.reader-v2 .reader-world-switch {
  position: absolute !important;
  top: 53px !important;
  right: 24px !important;
  left: auto !important;
  /* Two equal tab cells. `block` made the active Reader tab fall below Space
     on the actual shelf, even though the grid values were present. */
  display: grid !important;
  width: 129.63px !important;
  height: 35px !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2px !important;
  padding: 3px !important;
  border-radius: 18px !important;
  background: #2f2f2f !important;
  transform: none !important;
}

.reader-v2 .reader-world-switch > * {
  display: grid !important;
  min-width: 0 !important;
  height: 29px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 15px !important;
  place-items: center !important;
  background: transparent !important;
  color: #8f8f8f !important;
  font: 300 10.3px/1 "Geologica Pilcrow", system-ui, sans-serif !important;
}

.reader-v2 .reader-world-switch > .is-active {
  background: var(--reader-coral) !important;
  color: var(--reader-bg) !important;
}

.reader-v2 .reader-library {
  display: block;
  flex: 0 0 auto;
  padding: 9px 32.5px 0 !important;
}

.reader-v2 .reader-library h1 {
  width: 341px !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: var(--reader-cream) !important;
  font: 900 39.83px/.9 "Geologica Pilcrow", system-ui, sans-serif !important;
  letter-spacing: -.398px !important;
}

.reader-v2 .library-filters {
  display: flex !important;
  width: calc(100% + 32.5px) !important;
  max-width: none !important;
  height: 37.3px !important;
  gap: 8.8px !important;
  margin: 15px 0 0 !important;
  padding: 0 32.5px 1px 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  grid-template-columns: none !important;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}

.reader-v2 .library-filters::-webkit-scrollbar { display: none; }

.reader-v2 .library-filters button {
  min-width: max-content !important;
  height: 37.3px !important;
  flex: 0 0 auto !important;
  padding: 0 14px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 18.7px !important;
  background: var(--reader-card) !important;
  color: var(--reader-text) !important;
  font: 300 12.64px/1 "Geologica Pilcrow", system-ui, sans-serif !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.reader-v2 .library-filters button.is-active {
  background: var(--reader-cream) !important;
  color: var(--reader-bg) !important;
}

.reader-v2 .reader-intro {
  width: 244px !important;
  min-height: 29px !important;
  margin: 15px 0 25px !important;
  color: var(--reader-muted) !important;
  font: 300 14px/1.05 "Geologica Pilcrow", system-ui, sans-serif !important;
}

.reader-v2 .reader-intro strong {
  color: var(--reader-coral) !important;
  font-weight: 700 !important;
}

.reader-v2 #current-book,
.reader-v2 .library-list {
  width: 324px !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.reader-v2 .library-list {
  display: grid !important;
  gap: 12.5px !important;
  margin-top: 12.5px !important;
}

.reader-v2 .shelf-book-card {
  position: relative !important;
  display: block !important;
  width: 324px !important;
  max-width: 100% !important;
  height: 84px !important;
  margin: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 14.54px !important;
  background: var(--reader-card) !important;
  color: var(--reader-text) !important;
  isolation: isolate;
  transition: margin-bottom .25s ease;
}

.reader-v2 .shelf-book-card > .book-open {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
}

.reader-v2 .shelf-book-card > .book-cover,
.reader-v2 .shelf-book-card > .cover-fallback {
  position: absolute !important;
  z-index: 2 !important;
  top: 10px !important;
  left: 12px !important;
  width: 47.44px !important;
  height: 63.42px !important;
  border-radius: 3.61px !important;
  object-fit: cover !important;
}

.reader-v2 .shelf-book-card > .cover-fallback {
  display: grid !important;
  place-items: center !important;
  background: #666 !important;
  color: #eee !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: .8px !important;
}

.reader-v2 .shelf-book-copy {
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  pointer-events: none;
}

.reader-v2 .shelf-book-copy h2 {
  position: absolute !important;
  top: 8px !important;
  right: 30px !important;
  left: 70px !important;
  overflow: hidden !important;
  margin: 0 !important;
  color: var(--reader-text) !important;
  font: 700 16px/28.997px "Geologica Pilcrow", system-ui, sans-serif !important;
  letter-spacing: -.1px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.reader-v2 .shelf-book-copy > p {
  position: absolute !important;
  top: 33px !important;
  left: 70px !important;
  width: 166px !important;
  overflow: hidden !important;
  margin: 0 !important;
  color: var(--reader-muted) !important;
  font: 300 10px/normal "Geologica Pilcrow", system-ui, sans-serif !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.reader-v2 .book-progress-line {
  position: absolute !important;
  top: 63px !important;
  left: 70.5px !important;
  display: block !important;
  margin: 0 !important;
  color: var(--reader-text) !important;
  font: 200 8px/normal "Geologica Pilcrow", system-ui, sans-serif !important;
}

.reader-v2 .shelf-book-card .book-status-panel {
  position: absolute !important;
  z-index: 5 !important;
  top: 39px !important;
  right: 12px !important;
  width: 90px !important;
  min-height: 32px !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

.reader-v2 .shelf-book-card .book-status-chip {
  position: static !important;
  display: grid !important;
  width: 90px !important;
  height: 32px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 16px !important;
  place-items: center !important;
  background: var(--reader-cream) !important;
  color: var(--reader-bg) !important;
  font: 300 11px/15.228px "Geologica Pilcrow", system-ui, sans-serif !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

.reader-v2 .shelf-book-card .book-more {
  position: absolute !important;
  z-index: 6 !important;
  top: 10.5px !important;
  right: 12px !important;
  display: flex !important;
  width: 17px !important;
  height: 5px !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.reader-v2 .shelf-book-card .book-more img {
  width: 3px !important;
  height: 3px !important;
}

.reader-v2 .shelf-book-card.is-status-open {
  z-index: 8 !important;
  margin-bottom: 137px !important;
}

.reader-v2 .shelf-book-card .status-menu {
  position: absolute !important;
  top: 39px !important;
  right: 0 !important;
  left: 0 !important;
  display: flex !important;
  width: 155px !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 8px !important;
  border-radius: 14px !important;
  background: var(--reader-bg) !important;
  box-shadow: 0 14px 30px rgb(0 0 0 / 28%) !important;
}

.reader-v2 .shelf-book-card .status-menu-choice {
  display: flex !important;
  width: 100% !important;
  height: 25px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--reader-card) !important;
  color: var(--reader-text) !important;
  font: 300 9px/1 "Geologica Pilcrow", system-ui, sans-serif !important;
}

.reader-v2 .reader-footer {
  display: grid !important;
  gap: 11px !important;
  margin-top: auto !important;
  padding: 28px 24px max(31px, env(safe-area-inset-bottom)) !important;
  place-items: center !important;
  text-align: center !important;
}

.reader-v2 .add-book-button {
  width: 192px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: var(--reader-coral) !important;
  color: var(--reader-bg) !important;
  font: 300 13.5px/1 "Geologica Pilcrow", system-ui, sans-serif !important;
}

.reader-v2 .reader-footer p {
  margin: 0 !important;
  color: rgb(217 217 217 / 36%) !important;
  font: 100 11px/1.27 "Geologica Pilcrow", system-ui, sans-serif !important;
}

.reader-v2 .reader-main-nav { display: none !important; }

/* Book / reading surface ------------------------------------------------- */

.reader-v2 .reader-shell {
  --reader-paper: var(--reader-paper-warm);
  --reader-ink: #151515;
  position: fixed !important;
  z-index: 20 !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: var(--reader-paper) !important;
  color: var(--reader-ink) !important;
}

.reader-v2 .reader-shell[hidden],
.reader-v2 .reader-return-to-page[hidden] { display: none !important; }

.reader-v2 .reader-shell[data-theme="light"] { --reader-paper: var(--reader-paper-light); --reader-ink: #151515; }
.reader-v2 .reader-shell[data-theme="black"] { --reader-paper: var(--reader-paper-black); --reader-ink: #f4f0e7; }
.reader-v2 .reader-shell[data-theme="cold"] { --reader-paper: #f3f5ff; --reader-ink: #151515; }

.reader-v2 .reader-stage {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: var(--reader-paper) !important;
}

.reader-v2 .reader-stage > .epub-reader,
.reader-v2 .reader-stage > foliate-view,
.reader-v2 .epub-reader .epub-container {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  background: var(--reader-paper) !important;
}

.reader-v2 .epub-reader iframe { border: 0 !important; }
.reader-v2 .epub-reader .epub-container {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
}

.reader-v2 .reading-header {
  position: absolute !important;
  z-index: 8 !important;
  top: 69px !important;
  right: 0 !important;
  left: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 20px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: translate3d(0, 0, 0) !important;
  transition: opacity .42s ease, transform .52s cubic-bezier(.2,.75,.2,1) !important;
}

.reader-v2 .reading-header::after { content: none !important; }
.reader-v2 .reading-header > * { pointer-events: auto !important; }

.reader-v2 .reading-percent,
.reader-v2 .reading-title,
.reader-v2 .reading-back {
  position: absolute !important;
  top: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: var(--reader-panel) !important;
  color: var(--reader-brown) !important;
  font: 300 12.48px/40px "Geologica Pilcrow", system-ui, sans-serif !important;
  box-shadow: var(--reader-panel-shadow) !important;
}

.reader-v2 .reading-percent { left: 20px !important; width: 50px !important; padding: 0 !important; }

.reader-v2 .reading-title {
  right: 83px !important;
  left: 83px !important;
  overflow: hidden !important;
  padding: 0 14px !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.reader-v2 .reading-back {
  right: 20px !important;
  left: auto !important;
  display: grid !important;
  width: 51px !important;
  padding: 0 !important;
  place-items: center !important;
  background: var(--reader-coral) !important;
}

.reader-v2 .reader-back-icon {
  width: 10px !important;
  height: 18px !important;
}

.reader-v2 .reader-close-icon {
  position: relative !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
}

.reader-v2 .reader-close-icon::before,
.reader-v2 .reader-close-icon::after {
  position: absolute !important;
  top: 8px !important;
  left: 0 !important;
  width: 18px !important;
  height: 2px !important;
  border-radius: 2px !important;
  content: "" !important;
  background: var(--reader-panel) !important;
}

.reader-v2 .reader-close-icon::before { transform: rotate(45deg) !important; }
.reader-v2 .reader-close-icon::after { transform: rotate(-45deg) !important; }

.reader-v2 .reader-homebar {
  position: absolute !important;
  z-index: 8 !important;
  right: 20px !important;
  /* Figma Reader frame is 390 x 844: the location card starts at 20 / 646. */
  bottom: 33px !important;
  left: 20px !important;
  display: block !important;
  width: auto !important;
  height: 165px !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: translate3d(0, 0, 0) !important;
  transition: opacity .42s ease, transform .52s cubic-bezier(.2,.75,.2,1) !important;
}

.reader-v2 .reader-homebar::before { content: none !important; }

.reader-v2 .reader-location-card {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  display: block !important;
  width: 188px !important;
  height: 98px !important;
  min-height: 98px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 16.5px !important;
  background: var(--reader-panel) !important;
  box-shadow: var(--reader-panel-shadow) !important;
  color: var(--reader-brown) !important;
  pointer-events: none !important;
}

.reader-v2 .reader-location-card > img {
  position: absolute !important;
  top: 15.36px !important;
  left: 21.95px !important;
  width: 17.556px !important;
  height: 17.556px !important;
  filter: none !important;
}
.reader-v2 .reader-location-card div { position: static !important; min-width: 0 !important; }
.reader-v2 .reader-location-card strong,
.reader-v2 .reader-location-card span {
  position: absolute !important;
  display: block !important;
  margin: 0 !important;
  overflow: visible !important;
  color: #7e5e31 !important;
  font-family: "Geologica Pilcrow", system-ui, sans-serif !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.reader-v2 .reader-location-card strong {
  top: 16.09px !important;
  left: 46.09px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 15.591px !important;
}
.reader-v2 #reader-pages-chapter,
.reader-v2 #reader-pages-book {
  left: 20.48px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 17.717px !important;
}
.reader-v2 #reader-pages-chapter { top: 39.5px !important; width: 147.035px !important; }
.reader-v2 #reader-pages-book { top: 61.45px !important; width: 179.953px !important; }

.reader-v2 .reader-panel-actions {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  top: 104.5px !important;
  bottom: auto !important;
  display: flex !important;
  gap: 10px !important;
  pointer-events: auto !important;
}

.reader-v2 .reader-panel-actions button {
  display: grid !important;
  width: 126px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 20px !important;
  place-items: center !important;
  background: var(--reader-panel) !important;
  color: var(--reader-brown) !important;
  box-shadow: var(--reader-panel-shadow) !important;
  font: 400 12px/1 "Geologica Pilcrow", system-ui, sans-serif !important;
}

.reader-v2 .reader-panel-actions #reader-contents-button { width: 50px !important; background: var(--reader-panel) !important; }
.reader-v2 .reader-mode-icon,
.reader-v2 .reader-mode-icon::before {
  position: absolute !important;
  display: block !important;
  width: 13px !important;
  height: 17px !important;
  border: 1.6px solid var(--reader-brown) !important;
  border-radius: 3px !important;
  content: "" !important;
}

.reader-v2 .reader-mode-icon {
  position: relative !important;
  box-sizing: border-box !important;
}

.reader-v2 .reader-mode-icon::before {
  top: -4px !important;
  left: -4px !important;
  box-sizing: border-box !important;
  background: var(--reader-panel) !important;
}

.reader-v2.reader-app .reader-controls-hidden .reading-header {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate3d(0, -155%, 0) !important;
}

.reader-v2.reader-app .reader-controls-hidden .reader-homebar {
  height: 165px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate3d(0, 135%, 0) !important;
}

.reader-v2 .reader-return-to-page {
  position: absolute !important;
  z-index: 9 !important;
  top: 126px !important;
  left: calc(50% - 25px) !important;
  display: grid !important;
  width: 50px !important;
  height: 26px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 16px !important;
  place-items: center !important;
  background: var(--reader-coral) !important;
  color: var(--reader-bg) !important;
  box-shadow: 0 5px 12px rgb(70 59 44 / 22%) !important;
}

.reader-v2 .reader-return-to-page img {
  width: 10px !important;
  height: 18px !important;
  filter: invert(10%) sepia(9%) saturate(550%) hue-rotate(314deg) brightness(90%) contrast(94%) !important;
}

.reader-v2 .reader-center-tap-zone {
  position: absolute !important;
  z-index: 5 !important;
  top: 22% !important;
  left: 16% !important;
  display: block !important;
  width: 68% !important;
  height: 56% !important;
  padding: 0 !important;
  border: 0 !important;
  transform: none !important;
  background: transparent !important;
  /* PWA Safari does not consistently surface taps from EPUB iframes. This is
     the explicit fallback surface. Its JS keeps scroll gestures kinetic. */
  pointer-events: auto !important;
  touch-action: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Keep it alive while chrome is showing too: the second tap closes chrome.
   Header and bottom controls sit above this transparent central lane. */
.reader-v2 .reader-shell:not(.reader-controls-hidden) .reader-center-tap-zone { pointer-events: auto !important; }
.reader-v2 .reader-shell[data-mode="pages"] .reader-center-tap-zone { top: 25% !important; left: 33% !important; width: 34% !important; height: 50% !important; pointer-events: none !important; }

/* Contents -------------------------------------------------------------- */

.reader-v2 .reader-sheet-layer {
  position: absolute !important;
  z-index: 12 !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
}

.reader-v2 .reader-sheet-layer[hidden] { display: none !important; }
.reader-v2 .reader-sheet-backdrop { position: absolute !important; inset: 0 !important; border: 0 !important; background: transparent !important; pointer-events: auto !important; }

.reader-v2 #contents-sheet .reader-contents-sheet {
  position: absolute !important;
  top: 127px !important;
  left: 20px !important;
  display: block !important;
  width: 242px !important;
  height: 415px !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--reader-brown) !important;
  pointer-events: auto !important;
}

.reader-v2 .contents-progress-rail {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 40px !important;
  height: 100% !important;
  border-radius: 22px !important;
  background: var(--reader-panel) !important;
  box-shadow: var(--reader-panel-shadow) !important;
  cursor: grab !important;
  pointer-events: auto !important;
  touch-action: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
.reader-v2 .contents-progress-rail:active { cursor: grabbing !important; }

.reader-v2 .contents-progress-rail::before {
  position: absolute !important;
  top: 32px !important;
  bottom: 32px !important;
  left: 19px !important;
  width: 2px !important;
  border-radius: 2px !important;
  content: "" !important;
  background: var(--reader-coral) !important;
}

.reader-v2 .contents-progress-rail span {
  position: absolute !important;
  top: 50px !important;
  left: 14px !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: var(--reader-coral) !important;
  transition: top .24s ease-out !important;
  pointer-events: none !important;
}

.reader-v2 .contents-card {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  display: block !important;
  width: 188px !important;
  height: 100% !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  border-radius: 16.5px !important;
  background: var(--reader-panel) !important;
  pointer-events: auto !important;
  touch-action: pan-y !important;
  box-shadow: var(--reader-panel-shadow) !important;
}

.reader-v2 #contents-sheet .reader-sheet-heading { display: block !important; flex: 0 0 auto !important; margin: 0 0 12px !important; padding: 0 !important; background: transparent !important; }
.reader-v2 #contents-sheet .reader-sheet-kicker,
.reader-v2 #contents-sheet .reader-sheet-close { display: none !important; }

.reader-v2 #contents-sheet .contents-card h2 {
  margin: 0 !important;
  color: var(--reader-brown) !important;
  font: 700 15px/1.2 "Geologica Pilcrow", system-ui, sans-serif !important;
}

.reader-v2 .contents-list {
  position: absolute !important;
  top: 50px !important;
  right: 16px !important;
  bottom: 16px !important;
  left: 16px !important;
  display: grid !important;
  min-height: 0 !important;
  align-content: start !important;
  gap: 6px !important;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  padding: 0 3px 3px 0 !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  pointer-events: auto !important;
  scrollbar-width: none !important;
}

.reader-v2 .contents-list::-webkit-scrollbar { display: none !important; }

.reader-v2 .contents-list button {
  width: 100% !important;
  min-height: 35px !important;
  padding: 8px 9px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--reader-paper-warm) !important;
  color: var(--reader-brown) !important;
  font: 300 10px/1.18 "Geologica Pilcrow", system-ui, sans-serif !important;
  text-align: left !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

/* Settings -------------------------------------------------------------- */

.reader-v2 #settings-sheet .reader-settings-sheet {
  position: absolute !important;
  right: 20px !important;
  bottom: 44px !important;
  left: 20px !important;
  display: block !important;
  width: auto !important;
  height: var(--settings-sheet-height, 177.5px) !important;
  max-height: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 17px !important;
  background: var(--reader-panel) !important;
  color: var(--reader-brown) !important;
  pointer-events: auto !important;
  box-shadow: 0 0 16.25px rgb(70 59 44 / 65%) !important;
  transition: height .32s cubic-bezier(.2,.76,.2,1), bottom .32s cubic-bezier(.2,.76,.2,1) !important;
}

.reader-v2 #settings-sheet .reader-settings-sheet.is-expanded { height: var(--settings-sheet-height, 271px) !important; }
.reader-v2 #settings-sheet .reader-sheet-heading { display: none !important; }

.reader-v2 .settings-drag-handle {
  position: absolute !important;
  top: 9px !important;
  left: 50% !important;
  width: 82px !important;
  height: 18px !important;
  padding: 0 !important;
  border: 0 !important;
  transform: translateX(-50%) !important;
  background: transparent !important;
  touch-action: none !important;
}

.reader-v2 .settings-drag-handle span { display: block !important; width: 82px !important; height: 4px !important; border-radius: 8px !important; background: var(--reader-brown) !important; }
.reader-v2 .reader-settings-sheet .settings-group:first-of-type {
  position: absolute !important;
  top: 23px !important;
  left: 34.63px !important;
  width: 276.665px !important;
  margin: 0 !important;
}
.reader-v2 .reader-settings-sheet .settings-group { margin: 0 !important; }
.reader-v2 .reader-settings-sheet .settings-group + .settings-group { display: none !important; }
.reader-v2 .reader-settings-sheet .settings-label { margin: 0 !important; color: var(--reader-bg) !important; font: 400 10.966px/1.05 "Geologica Pilcrow", system-ui, sans-serif !important; }
.reader-v2 .reader-settings-sheet .theme-options { display: flex !important; gap: 14px !important; margin: 19.74px 0 0 2.19px !important; }
.reader-v2 .reader-settings-sheet .theme-options button { width: auto !important; height: 29px !important; padding: 0 18.339px !important; border: .548px solid #151515 !important; border-radius: 9.17px !important; background: var(--reader-panel) !important; color: var(--reader-brown) !important; font: 400 11.115px/6.73px "Geologica Pilcrow", system-ui, sans-serif !important; }
.reader-v2 .reader-settings-sheet .theme-options [data-reader-theme="warm"] { background: var(--reader-text) !important; }
.reader-v2 .reader-settings-sheet .theme-options [data-reader-theme="light"] { background: var(--reader-paper-light) !important; }
.reader-v2 .reader-settings-sheet .theme-options [data-reader-theme="black"] { background: var(--reader-paper-black) !important; color: var(--reader-text) !important; }
.reader-v2 .reader-settings-sheet .theme-options [data-reader-theme="cold"] { background: #f3f5ff !important; }
.reader-v2 .reader-settings-sheet .theme-options button.is-active { border-color: #151515 !important; box-shadow: none !important; }
.reader-v2 .reader-settings-sheet .settings-field { position: absolute !important; top: 77.83px !important; left: 27.5px !important; display: block !important; width: 240.164px !important; height: 75.668px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.reader-v2 .reader-settings-sheet .settings-field > span:not(.font-size-stepper) { position: absolute !important; top: 4.93px !important; left: 7.13px !important; display: block !important; color: var(--reader-bg) !important; font: 400 10.966px/1.05 "Geologica Pilcrow", system-ui, sans-serif !important; }
.reader-v2 .reader-settings-sheet .settings-field select { position: absolute !important; top: 25.67px !important; left: 10px !important; width: 203.5px !important; height: 37.5px !important; padding: 0 35px 0 20.84px !important; border: 0 !important; border-radius: 10.966px !important; appearance: none !important; background: var(--reader-card) !important; color: var(--reader-text) !important; font: 400 12px/9.943px "Geologica Pilcrow", system-ui, sans-serif !important; }
.reader-v2 .reader-font-arrow { position: absolute !important; top: 42.4px !important; left: 186.5px !important; width: 12.352px !important; height: 6.328px !important; pointer-events: none !important; }
.reader-v2 .reader-settings-sheet .settings-field::after { content: none !important; }
.reader-v2 .font-size-stepper { position: absolute !important; top: 25.67px !important; right: auto !important; left: 217.5px !important; display: flex !important; width: 66.5px !important; height: 37.5px !important; gap: 0 !important; padding: 3.29px 3.92px !important; border-radius: 10.966px !important; background: var(--reader-muted) !important; }
.reader-v2 .font-size-stepper button { display: grid !important; width: 28px !important; height: 31px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; place-items: center !important; background: transparent !important; color: transparent !important; }
.reader-v2 .font-size-stepper button + button { width: 28.5px !important; }
.reader-v2 .font-size-stepper button img { display: block !important; width: 100% !important; height: 100% !important; }
.reader-v2 .reader-settings-sheet label[for="reader-font-size"],
.reader-v2 .reader-settings-sheet .settings-switch-row,
.reader-v2 .reader-settings-sheet .mode-options,
.reader-v2 .reader-settings-sheet .reset-settings { display: none !important; }
.reader-v2 .reader-settings-sheet label[for="reader-line-height"],
.reader-v2 .reader-settings-sheet label[for="reader-margin"] { display: none !important; margin: 11px 0 0 !important; }
.reader-v2 .reader-settings-sheet.is-expanded label[for="reader-line-height"],
.reader-v2 .reader-settings-sheet.is-expanded label[for="reader-margin"] { display: grid !important; grid-template-columns: 1fr auto !important; gap: 5px !important; }
.reader-v2 .reader-settings-sheet .settings-range > span,
.reader-v2 .reader-settings-sheet .settings-range output { color: var(--reader-brown) !important; font: 700 10px/1 "Geologica Pilcrow", system-ui, sans-serif !important; }
.reader-v2 .reader-settings-sheet .settings-range output { font-weight: 300 !important; }
.reader-v2 .reader-settings-sheet .settings-range input { width: 100% !important; height: 16px !important; grid-column: 1 / -1 !important; accent-color: var(--reader-coral) !important; }

.reader-v2 .reader-loading { z-index: 2 !important; }
.reader-v2 .page-mode-hint { z-index: 3 !important; }

@media (max-width: 359px) {
  .reader-v2 .reader-library { padding-right: 24px !important; padding-left: 24px !important; }
  .reader-v2 .reader-world-switch { right: 18px !important; width: 122px !important; }
  .reader-v2 .shelf-book-card { width: 100% !important; }
}