/*
 * 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: #2b2b2b;
  --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 { right: 20px !important; left: auto !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: auto !important;
  left: 20px !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: 23.799px !important;
  height: 23.799px !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 × 844: controls occupy y=547…791. */
  bottom: 33px !important;
  left: 20px !important;
  display: block !important;
  width: auto !important;
  height: 264px !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: 48px !important;
  left: 0 !important;
  display: block !important;
  width: 188px !important;
  height: 147px !important;
  min-height: 147px !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-main {
  position: absolute !important;
  top: 15.36px !important;
  left: 21.95px !important;
  display: flex !important;
  gap: 6.584px !important;
  align-items: flex-start !important;
}
.reader-v2 .reader-location-main > img {
  display: block !important;
  width: 17.556px !important;
  height: 17.556px !important;
  flex: 0 0 17.556px !important;
}
.reader-v2 .reader-location-main strong {
  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-main strong {
  top: .73px !important;
  left: 24.14px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 15.591px !important;
}
.reader-v2 .reader-location-summary {
  position: absolute !important;
  left: 21px !important;
  width: 146px !important;
  height: 38px !important;
  color: #7e5e31 !important;
  font-family: "Geologica Pilcrow", system-ui, sans-serif !important;
  overflow: visible !important;
}
.reader-v2 .reader-location-summary--chapter { top: 43px !important; }
.reader-v2 .reader-location-summary--book { top: 91px !important; }
.reader-v2 .reader-location-summary > strong {
  display: block !important;
  margin: 0 !important;
  color: #7e5e31 !important;
  font: 500 14px/17.717px "Geologica Pilcrow", system-ui, sans-serif !important;
}
.reader-v2 .reader-location-metrics {
  position: absolute !important;
  top: 18px !important;
  left: 0 !important;
  display: block !important;
  width: 146px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}
.reader-v2 .reader-location-metric {
  position: absolute !important;
  top: 0 !important;
  display: inline-flex !important;
  gap: 6.609px !important;
  align-items: center !important;
  min-width: 0 !important;
  color: #7e5e31 !important;
  font: 400 12.116px/19.514px "Geologica Pilcrow", system-ui, sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
.reader-v2 .reader-location-metric--pages { left: 0 !important; }
.reader-v2 .reader-location-metric--time { left: 60px !important; }
.reader-v2 .reader-location-metric > img {
  display: block !important;
  width: 12.116px !important;
  height: 12.116px !important;
  flex: 0 0 12.116px !important;
}
.reader-v2 .reader-location-metric > span {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  color: #7e5e31 !important;
  font: inherit !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

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

.reader-v2 .reader-panel-actions button {
  display: grid !important;
  width: 132px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 15px !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: 264px !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; }

/* Reader interaction — the touch surface restores the reliable iOS PWA tap
   path, but resolves links and long-press text selection against the EPUB
   document below it. */
.reader-v2 .reader-shell[data-mode="scroll"] .reader-center-tap-zone {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  pointer-events: auto !important;
}
.reader-v2 #reader-text-selection-feedback {
  position: absolute !important;
  z-index: 6 !important;
  inset: 0 !important;
  pointer-events: none !important;
}
.reader-v2 #reader-text-selection-feedback[hidden] { display: none !important; }
.reader-v2 #reader-text-selection-feedback i {
  position: absolute !important;
  display: block !important;
  border-radius: 2px !important;
  background: var(--reader-selection-color, #ff6c4b) !important;
  opacity: .36 !important;
  mix-blend-mode: multiply;
}
.reader-v2 #reader-text-selection-feedback .reader-selection-handle {
  position: absolute !important;
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  border: 2px solid #fff8e6 !important;
  border-radius: 50% !important;
  background: var(--reader-selection-color, #ff6c4b) !important;
  box-shadow: 0 2px 7px rgb(0 0 0 / 27%) !important;
  transform: translate(-50%, -10%) !important;
}
.reader-v2 #reader-text-selection-feedback .reader-selection-handle::before {
  position: absolute !important;
  top: -13px !important;
  right: 50% !important;
  width: 3px !important;
  height: 14px !important;
  border-radius: 2px !important;
  background: var(--reader-selection-color, #ff6c4b) !important;
  content: "" !important;
  transform: translateX(50%) !important;
}
.reader-v2 #reader-text-selection-feedback .reader-selection-handle--start::before { top: -2px !important; height: 14px !important; transform: translateX(50%) translateY(-100%) !important; }
.reader-v2 .reader-selection-actions {
  --selection-panel-scale: .85;
  transform: scale(var(--selection-panel-scale));
  transform-origin: top center;
  position: absolute !important;
  z-index: 40 !important;
  top: var(--selection-panel-top, 90px) !important;
  right: 12px !important;
  bottom: auto !important;
  left: 12px !important;
  display: block !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 8px 12px 12px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: #FFF9ED !important;
  color: #825F32 !important;
  box-shadow: 0 10px 28px rgb(52 38 23 / 16%), 0 2px 6px rgb(52 38 23 / 9%) !important;
  font: 400 16px/1.12 "Geologica Pilcrow", sans-serif !important;
  letter-spacing: 0 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
.reader-v2 .reader-selection-actions[hidden] { display: none !important; }

/* Chapter pills follow their full title, rather than a fixed single line. */
.reader-v2 #contents-sheet #contents-list {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
}
.reader-v2 #contents-sheet #contents-list button {
  display: flex !important;
  height: auto !important;
  max-height: none !important;
  min-height: 30px !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}
.reader-v2 #contents-sheet #contents-list .toc-item-label {
  display: block !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
}
.reader-v2 #contents-sheet #contents-list .toc-item-page {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
.reader-v2 .reader-selection-actions.is-entering {
  animation: reader-selection-enter 336ms cubic-bezier(.22,.68,.25,1) both;
}
@keyframes reader-selection-enter {
  0% { opacity: 0; transform: translateY(4px) scale(.82); }
  75% { opacity: 1; transform: translateY(0) scale(.856); }
  100% { opacity: 1; transform: scale(.85); }
}
.reader-v2 .reader-selection-actions button {
  position: relative !important;
  display: flex !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  font: inherit !important;
  letter-spacing: 0 !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms, transform 150ms;
}
.reader-v2 .reader-selection-actions button:focus-visible { outline: 2px solid #825F32; outline-offset: 2px; }
.reader-v2 .reader-selection-actions svg { display: block; flex-shrink: 0; }
.reader-v2 .reader-selection-toolbar { display: grid !important; height: 44px !important; grid-template-columns: 88px minmax(0, 1fr) 44px !important; align-items: center !important; }
.reader-v2 .reader-selection-quick { display: flex !important; align-items: center !important; gap: 2px !important; }
.reader-v2 .reader-selection-quick button { width: 40px !important; height: 40px !important; border-radius: 50% !important; }
.reader-v2 .reader-selection-quick button svg { transition: transform 120ms ease-out; }
.reader-v2 .reader-selection-quick button:active svg { transform: scale(.8); }
.reader-v2 .reader-selection-quick button.is-tapped { background: #E9D3B4 !important; }
.reader-v2 .reader-selection-quick button.is-tapped svg { animation: reader-quick-tap 240ms ease-out; }
@keyframes reader-quick-tap {
  0%, 35% { transform: scale(.8); }
  100% { transform: scale(1); }
}
.reader-v2 .reader-selection-actions .reader-selection-close { width: 44px !important; height: 44px !important; border-radius: 50% !important; }
.reader-v2 .reader-selection-color-row { display: flex !important; min-width: 0; align-items: center !important; justify-content: center !important; gap: 5px !important; padding-right: 45px !important; }
.reader-v2 .reader-selection-color-row button {
  width: 34px !important;
  height: 30px !important;
  flex: 0 0 34px !important;
  border-radius: 8px !important;
  background: var(--selection-color) !important;
  color: #FFF !important;
}
.reader-v2 .reader-selection-color-row button.is-active { box-shadow: inset 0 0 0 2px rgba(255, 249, 237, .9) !important; }
.reader-v2 .reader-selection-color-row button svg { visibility: hidden; }
.reader-v2 .reader-selection-color-row button.is-active svg { visibility: visible; }
.reader-v2 .reader-selection-color-row [data-selection-color="coral"] { --selection-color: #FF674B; }
.reader-v2 .reader-selection-color-row [data-selection-color="violet"] { --selection-color: #8B5CF6; }
.reader-v2 .reader-selection-color-row [data-selection-color="sun"] { --selection-color: #F2B01E; color: #3A2A08 !important; }
.reader-v2 .reader-selection-divider { height: 1px !important; margin: 0 2px !important; background: rgba(130, 95, 50, .16) !important; }
.reader-v2 .reader-selection-action-row { display: flex !important; align-items: stretch !important; gap: 4px !important; margin-top: 6px !important; }
.reader-v2 .reader-selection-action-row + .reader-selection-action-row { margin-top: 4px !important; }
.reader-v2 .reader-selection-actions .reader-selection-cell {
  height: 58px !important;
  flex: 1 1 0 !important;
  gap: 5px !important;
  padding: 0 5px !important;
  border-radius: 10px !important;
  background: #F4E8D3 !important;
}
.reader-v2 .reader-selection-cell > span:last-child { min-width: 0; text-align: left; line-height: 1.12; }
.reader-v2 .reader-selection-icon { position: relative !important; display: flex !important; width: 16px !important; height: 16px !important; flex: 0 0 16px !important; align-items: center; justify-content: center; }
.reader-v2 .reader-selection-external { position: absolute !important; top: -3px !important; right: -4px !important; opacity: .6 !important; }
.reader-v2 .reader-selection-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
@media (hover: hover) {
  .reader-v2 .reader-selection-quick button:hover { background: #F3E5C9 !important; }
  .reader-v2 .reader-selection-actions .reader-selection-close:hover { background: rgb(243 229 201 / 60%) !important; }
  .reader-v2 .reader-selection-color-row button:hover { transform: scale(1.04); }
  .reader-v2 .reader-selection-actions .reader-selection-cell:hover { background: #EEDCC1 !important; }
}
.reader-v2 .reader-selection-actions .reader-selection-cell:active { background: #E9D3B4 !important; }
@media (max-width: 359px) {
  .reader-v2 .reader-selection-color-row { padding-right: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .reader-v2 .reader-selection-actions.is-entering { animation: none; }
  .reader-v2 .reader-selection-actions button { transition: none; }
  .reader-v2 .reader-selection-quick button svg { transition: none; animation: none !important; }
  .reader-v2 .reader-selection-quick button:active svg { transform: none; }
}
.reader-v2 .reader-selection-collection {
  position: absolute !important;
  z-index: 18 !important;
  top: 82px !important;
  right: 16px !important;
  bottom: 104px !important;
  left: 16px !important;
  overflow: auto !important;
  padding: 14px !important;
  border-radius: 19px !important;
  background: #fff8e6 !important;
  box-shadow: 0 14px 32px rgb(0 0 0 / 34%) !important;
  color: #694d2c !important;
}
.reader-v2 .reader-selection-collection[hidden] { display: none !important; }
.reader-v2 .reader-selection-collection header { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 10px !important; }
.reader-v2 .reader-selection-collection header strong { font: 700 17px/1.2 "Geologica Pilcrow", system-ui, sans-serif !important; }
.reader-v2 .reader-selection-collection header button { width: 30px !important; height: 30px !important; border: 0 !important; border-radius: 50% !important; background: #ff6c4b !important; color: white !important; font-size: 21px !important; }
.reader-v2 .reader-selection-collection > p { margin: 26px 8px !important; color: #987b58 !important; font: 400 13px/1.45 "Geologica Pilcrow", system-ui, sans-serif !important; }
.reader-v2 .reader-selection-saved-item { position: relative !important; margin: 8px 0 !important; padding: 11px 15px 11px 16px !important; border-radius: 12px !important; background: #eed9bd !important; }
.reader-v2 .reader-selection-saved-item button { display: block !important; width: 100% !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: #694d2c !important; font: 600 13px/1.35 "Geologica Pilcrow", system-ui, sans-serif !important; text-align: left !important; }
.reader-v2 .reader-selection-saved-item p { margin: 6px 0 0 !important; color: #987b58 !important; font: 400 12px/1.35 "Geologica Pilcrow", system-ui, sans-serif !important; }
.reader-v2 .reader-selection-saved-item > i { position: absolute !important; top: 10px !important; bottom: 10px !important; left: 5px !important; width: 4px !important; border-radius: 2px !important; background: var(--saved-selection-color, #ff6c4b) !important; }
.reader-v2 .reader-selection-saved-item--card { background: #e6defe !important; }
.reader-v2 .fb2-reader,
.reader-v2 .fb2-reader * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}
.reader-v2 .fb2-reader::selection {
  background: rgb(255 108 75 / 38%);
  color: inherit;
}

/* 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-progress-drag {
  position: absolute !important;
  z-index: 5 !important;
  top: 0 !important;
  right: -18px !important;
  bottom: 0 !important;
  left: -18px !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  cursor: grab !important;
  background: transparent !important;
  touch-action: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
.reader-v2 .contents-progress-drag:active { cursor: grabbing !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 .settings-theme-group {
  position: absolute !important;
  top: 25px !important;
  left: 34.628px !important;
  display: block !important;
  width: 276.665px !important;
  height: 49.097px !important;
  margin: 0 !important;
}
.reader-v2 .reader-settings-sheet .settings-theme-group .settings-label {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}
.reader-v2 .reader-settings-sheet .settings-theme-group .theme-options {
  position: absolute !important;
  top: 20px !important;
  left: 0 !important;
  display: block !important;
  width: 276.665px !important;
  height: 29.229px !important;
  margin: 0 !important;
}
.reader-v2 .reader-settings-sheet .settings-theme-group .theme-options button {
  position: absolute !important;
  top: 0 !important;
  display: grid !important;
  height: 29.229px !important;
  min-height: 29.229px !important;
  padding: 0 !important;
  border-radius: 9.17px !important;
  place-items: center !important;
  font-size: 11.115px !important;
  line-height: 6.73px !important;
}
.reader-v2 .reader-settings-sheet .settings-theme-group .theme-options button:nth-child(1) { left: 2.193px !important; width: 69.678px !important; }
.reader-v2 .reader-settings-sheet .settings-theme-group .theme-options button:nth-child(2) { left: 76.157px !important; width: 64.678px !important; }
.reader-v2 .reader-settings-sheet .settings-theme-group .theme-options button:nth-child(3) { left: 145.187px !important; width: 65.678px !important; }
.reader-v2 .reader-settings-sheet .settings-theme-group .theme-options button:nth-child(4) { left: 215.312px !important; width: 61.678px !important; }
.reader-v2 .reader-settings-sheet .figma-settings-font {
  position: absolute !important;
  top: 77.832px !important;
  left: 27.5px !important;
  width: 240.164px !important;
  height: 75.668px !important;
}
.reader-v2 .reader-settings-sheet .figma-settings-font > span:not(.font-size-stepper) {
  top: 4.935px !important;
  left: 7.128px !important;
  color: #7e5e31 !important;
  font-size: 12px !important;
}
.reader-v2 .reader-settings-sheet .figma-settings-font select {
  top: 26.168px !important;
  left: 9.5px !important;
  width: 195px !important;
  height: 37px !important;
  padding: 0 35px 0 20.836px !important;
  border-radius: 51px !important;
  background: #d8bda3 !important;
  color: #7e5e31 !important;
}
.reader-v2 .reader-settings-sheet .figma-settings-font .reader-font-arrow {
  top: 42.893px !important;
  left: 172.5px !important;
  width: 12.352px !important;
  height: 6.328px !important;
}
.reader-v2 .reader-settings-sheet .figma-font-size-stepper {
  top: 27.168px !important;
  left: 212.5px !important;
  width: 71px !important;
  height: 35px !important;
  padding: 0 !important;
  border-radius: 10.235px !important;
  background: transparent !important;
}
.reader-v2 .reader-settings-sheet .figma-font-size-stepper button,
.reader-v2 .reader-settings-sheet .figma-font-size-stepper button + button {
  width: 34.533px !important;
  height: 34.533px !important;
  padding: 0 !important;
}
.reader-v2 .reader-settings-sheet .figma-font-size-stepper button img { width: 34.533px !important; height: 34.533px !important; }
.reader-v2 .reader-settings-sheet .figma-settings-range { display: block !important; }
.reader-v2 .reader-settings-sheet .figma-line-height { top: 150.5px !important; }
.reader-v2 .reader-settings-sheet .figma-side-margins { top: 208px !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 { display: none !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; }
}

/* Reader shelf — Figma nodes 251:1200, 251:1218, 251:1239.
   This is one isolated final layer because historical spike rules share the
   same class names and are intentionally left untouched. */
.reader-v2 .shelf-book-card { width: 324px !important; height: 84px !important; border-radius: 16px !important; background: #2b2b2b !important; box-shadow: 0 4px 6px rgb(0 0 0 / 25%) !important; }
.reader-v2 .shelf-book-card > .book-cover, .reader-v2 .shelf-book-card > .cover-fallback { top: 10px !important; left: 12px !important; width: 46px !important; height: 58px !important; border-radius: 4px !important; }
.reader-v2 .shelf-book-card::after { position: absolute; z-index: 2; top: 73px; left: 12px; width: 46px; height: 2px; border-radius: 1px; content: ""; background: linear-gradient(90deg, #c8f542 var(--shelf-progress, 0%), rgb(255 255 255 / 13%) var(--shelf-progress, 0%)); pointer-events: none; }
.reader-v2 .shelf-book-copy h2 { top: 10px !important; right: 77px !important; left: 70px !important; color: #ffeed7 !important; font-family: Inter, system-ui, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: normal !important; letter-spacing: 0 !important; }
.reader-v2 .shelf-book-copy > p { top: 29px !important; right: 77px !important; left: 70px !important; width: auto !important; color: #707070 !important; font-family: Inter, system-ui, sans-serif !important; font-size: 11px !important; font-weight: 400 !important; }
.reader-v2 .book-progress-line { top: 57px !important; left: 70px !important; color: #c8f542 !important; font-family: Inter, system-ui, sans-serif !important; font-size: 10px !important; font-weight: 500 !important; }
.reader-v2 .shelf-book-card > .book-open { z-index: 0 !important; }
.reader-v2 .shelf-book-card .book-status-panel { top: 46px !important; right: 12px !important; z-index: 9 !important; width: auto !important; min-height: 0 !important; pointer-events: auto !important; touch-action: manipulation !important; }
.reader-v2 .shelf-book-card .book-status-chip { position: relative !important; z-index: 1 !important; display: block !important; width: auto !important; height: auto !important; padding: 5px 12px !important; border-radius: 100px !important; background: #1b1b1b !important; color: #ffeed7 !important; font-family: Inter, system-ui, sans-serif !important; font-size: 10px !important; font-weight: 600 !important; line-height: normal !important; pointer-events: auto !important; touch-action: manipulation !important; }
.reader-v2 .shelf-book-card .book-more { top: 10px !important; right: 12px !important; z-index: 10 !important; display: block !important; width: 19px !important; height: 24px !important; }
.reader-v2 .shelf-book-card .book-more img { display: block !important; width: 19px !important; height: 24px !important; }
.reader-v2 .shelf-book-card.is-status-open { z-index: 10 !important; margin-bottom: 0 !important; }
.reader-v2 .shelf-book-card.is-context-open { z-index: 10 !important; }
.reader-v2 .shelf-book-card .status-menu { position: absolute !important; z-index: 2 !important; top: -9px !important; right: -3px !important; left: auto !important; display: flex !important; width: 165px !important; height: 190px !important; flex-direction: column !important; gap: 3px !important; padding: 6px !important; border: .65px solid #252525 !important; border-radius: 11px !important; background: #353535 !important; box-shadow: 0 6px 6px rgb(0 0 0 / 63%) !important; box-sizing: border-box !important; opacity: 1 !important; transform: none !important; animation: none !important; pointer-events: auto !important; }
.reader-v2 .shelf-book-card .status-menu-choice { display: flex !important; width: 100% !important; min-height: 0 !important; height: 33px !important; gap: 6px !important; align-items: center !important; justify-content: flex-start !important; padding: 0 8px !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; color: #b7b7b7 !important; font-family: "Geologica Pilcrow", system-ui, sans-serif !important; font-size: 9px !important; font-weight: 300 !important; line-height: normal !important; text-align: left !important; }
.reader-v2 .shelf-book-card .status-menu-choice.is-active { background: #151515 !important; color: #7a5dff !important; font-size: 10.5px !important; }
.reader-v2 .shelf-book-card .status-menu-choice img { display: none !important; }
.reader-v2 .shelf-book-card .status-menu-choice::before { display: block; width: 12.5px; height: 12.5px; flex: 0 0 auto; content: ""; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.reader-v2 .shelf-book-card .status-menu-choice--reading::before { -webkit-mask-image: url("/assets/reader-shelf/status-reading.svg"); mask-image: url("/assets/reader-shelf/status-reading.svg"); }
.reader-v2 .shelf-book-card .status-menu-choice--want::before { -webkit-mask-image: url("/assets/reader-shelf/status-want.svg"); mask-image: url("/assets/reader-shelf/status-want.svg"); }
.reader-v2 .shelf-book-card .status-menu-choice--finished::before { -webkit-mask-image: url("/assets/reader-shelf/status-finished.svg"); mask-image: url("/assets/reader-shelf/status-finished.svg"); }
.reader-v2 .shelf-book-card .status-menu-choice--paused::before { -webkit-mask-image: url("/assets/reader-shelf/status-paused.svg"); mask-image: url("/assets/reader-shelf/status-paused.svg"); }
.reader-v2 .shelf-book-card .status-menu-choice--dropped::before { -webkit-mask-image: url("/assets/reader-shelf/status-dropped.svg"); mask-image: url("/assets/reader-shelf/status-dropped.svg"); }
.reader-v2 .book-context-menu { position: absolute; z-index: 12; top: 4px; right: 12px; display: flex; width: 180px; height: 90px; flex-direction: column; gap: 3px; padding: 6px; border: .6px solid #252525; border-radius: 11px; background: #353535; box-shadow: 0 6px 6px rgb(0 0 0 / 56%); box-sizing: border-box; opacity: 0; transform: translateY(-4px); animation: shelf-floating-menu-in .18s cubic-bezier(.2,.75,.2,1) .03s forwards; }
.reader-v2 .book-context-choice { display: flex; width: 100%; height: 37px; min-height: 0; gap: 7px; align-items: center; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; color: #b7b7b7; font-family: "Geologica Pilcrow", system-ui, sans-serif; font-size: 10.5px; font-weight: 400; text-align: left; }
.reader-v2 .book-context-choice--remove { color: #ff6c4b; font-weight: 500; }
.reader-v2 .book-context-choice img { width: 8.5px; height: 8.5px; flex: 0 0 auto; }
@keyframes shelf-floating-menu-in { to { opacity: 1; transform: translateY(0); } }

/* Small physical feedback for the Reader shelf. Disabled when the device asks
   for reduced motion; it never changes layout or touch targets. */
@media (prefers-reduced-motion: no-preference) {
  .reader-v2 .shelf-book-card .status-menu {
    transform-origin: 88% 9% !important;
    animation: shelf-status-bounce .34s cubic-bezier(.2,.85,.25,1) both !important;
  }
  .reader-v2 .book-context-menu {
    transform-origin: 88% 10%;
    animation: shelf-status-bounce .28s cubic-bezier(.2,.85,.25,1) both;
  }
  .reader-v2 .shelf-book-card .book-status-chip,
  .reader-v2 .shelf-book-card .book-more,
  .reader-v2 .shelf-book-card .status-menu-choice,
  .reader-v2 .shelf-book-card .book-context-choice {
    transition: transform .11s ease, filter .11s ease !important;
    -webkit-tap-highlight-color: transparent;
  }
  .reader-v2 .shelf-book-card .book-status-chip:active,
  .reader-v2 .shelf-book-card .book-more:active,
  .reader-v2 .shelf-book-card .status-menu-choice:active,
  .reader-v2 .shelf-book-card .book-context-choice:active {
    filter: brightness(.94);
    transform: scale(.96) !important;
  }
}
@keyframes shelf-status-bounce {
  0% { opacity: 0; transform: scale(.84); }
  58% { opacity: 1; transform: scale(1.055); }
  78% { opacity: 1; transform: scale(.99); }
  100% { opacity: 1; transform: scale(1); }
}

/* The iPhone may report reduced motion even when Tomas wants this test.
   These last rules deliberately keep the shelf feedback available here. */
.reader-v2 .library-list { overflow: visible !important; isolation: isolate; }
.reader-v2 .shelf-book-card.is-status-open { position: relative !important; z-index: 100 !important; overflow: visible !important; }
.reader-v2 .shelf-book-card.is-status-open .book-status-panel { z-index: 101 !important; overflow: visible !important; }
body > .status-menu.status-menu--portal {
  position: fixed !important;
  z-index: 1000 !important;
  display: flex !important;
  width: 220px !important;
  height: 190px !important;
  flex-direction: column !important;
  gap: 3.916px !important;
  padding: 7.832px !important;
  border: .979px solid #252525 !important;
  border-radius: 15.663px !important;
  background: #353535 !important;
  box-shadow: 0 11.747px 23.495px rgb(0 0 0 / 63%) !important;
  box-sizing: border-box !important;
  transform-origin: 88% 9% !important;
  animation: shelf-status-bounce .32s cubic-bezier(.2,.85,.25,1) both !important;
}
body > .status-menu.status-menu--portal .status-menu-choice {
  display: flex !important;
  width: 100% !important;
  min-height: 0 !important;
  height: 31.34px !important;
  gap: 7.832px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 9.789px !important;
  border: 0 !important;
  border-radius: 7.832px !important;
  background: transparent !important;
  color: #b7b7b7 !important;
  font-family: "Geologica Pilcrow", system-ui, sans-serif !important;
  font-size: 11.747px !important;
  font-weight: 300 !important;
  line-height: normal !important;
  text-align: left !important;
}
body > .status-menu.status-menu--portal .status-menu-choice.is-active { background: #151515 !important; color: #7a5dff !important; font-size: 13.705px !important; }
body > .status-menu.status-menu--portal .status-menu-choice img { display: none !important; }
body > .status-menu.status-menu--portal .status-menu-choice::before { display: block; width: 15.663px !important; height: 15.663px !important; flex: 0 0 auto; content: ""; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
body > .status-menu.status-menu--portal .status-menu-choice--reading::before { -webkit-mask-image: url("/assets/reader-shelf/status-reading.svg"); mask-image: url("/assets/reader-shelf/status-reading.svg"); }
body > .status-menu.status-menu--portal .status-menu-choice--want::before { -webkit-mask-image: url("/assets/reader-shelf/status-want.svg"); mask-image: url("/assets/reader-shelf/status-want.svg"); }
body > .status-menu.status-menu--portal .status-menu-choice--finished::before { -webkit-mask-image: url("/assets/reader-shelf/status-finished.svg"); mask-image: url("/assets/reader-shelf/status-finished.svg"); }
body > .status-menu.status-menu--portal .status-menu-choice--paused::before { -webkit-mask-image: url("/assets/reader-shelf/status-paused.svg"); mask-image: url("/assets/reader-shelf/status-paused.svg"); }
body > .status-menu.status-menu--portal .status-menu-choice--dropped::before { -webkit-mask-image: url("/assets/reader-shelf/status-dropped.svg"); mask-image: url("/assets/reader-shelf/status-dropped.svg"); }
.reader-v2 .shelf-book-card .book-status-chip,
.reader-v2 .shelf-book-card .book-more,
body > .status-menu.status-menu--portal .status-menu-choice,
.reader-v2 .shelf-book-card .book-context-choice { transition: transform .11s ease, filter .11s ease !important; }
.reader-v2 .shelf-book-card .book-status-chip:active,
.reader-v2 .shelf-book-card .book-more:active,
body > .status-menu.status-menu--portal .status-menu-choice:active,
.reader-v2 .shelf-book-card .book-context-choice:active { filter: brightness(.94); transform: scale(.96) !important; }

/* Reader Shelf Grid — Figma nodes 259:1463 and 271:1791. */
.reader-v2 .reader-library { position: relative; }
.reader-v2 .library-view-switcher {
  position: absolute;
  z-index: 7;
  top: 122px;
  right: 26.4px;
  display: flex;
  width: 43.6px;
  height: 16px;
  gap: 11.6px;
  align-items: center;
}
.reader-v2 .library-view-switcher button {
  display: grid;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #707070;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
}
.reader-v2 .library-view-switcher button.is-active { color: var(--reader-coral); }
.reader-v2 .view-icon-list { display: grid; width: 16px; gap: 4px; }
.reader-v2 .view-icon-list i { display: block; width: 16px; height: 1.6px; border-radius: .8px; background: currentColor; }
.reader-v2 .view-icon-grid { display: grid; width: 16px; height: 16px; grid-template-columns: repeat(2, 7.2px); grid-template-rows: repeat(2, 7.2px); gap: 1.6px; }
.reader-v2 .view-icon-grid i { width: 7.2px; height: 7.2px; border-radius: 1.6px; background: currentColor; }
.reader-v2 .library-screen[data-library-view="grid"] .reader-intro {
  position: sticky;
  z-index: 6;
  top: 210px;
  margin-bottom: 18px !important;
  background: var(--reader-bg);
}
.reader-v2 .library-screen[data-library-view="grid"] #current-book { display: none; }
.reader-v2 .library-screen[data-library-view="grid"] .library-list {
  display: grid !important;
  width: 354px !important;
  max-width: none !important;
  margin-top: 0 !important;
  margin-left: -14.5px !important;
  grid-template-columns: repeat(2, 173.214px);
  grid-auto-flow: row;
  column-gap: 7.572px;
  row-gap: 12.756px;
}
.reader-v2 .shelf-book-card--grid {
  width: 173.214px !important;
  height: 258.243px !important;
  overflow: visible !important;
  border: 1.069px solid #252525 !important;
  border-radius: 12.831px !important;
  background: #2b2b2b !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.reader-v2 .shelf-book-card--grid > .book-cover,
.reader-v2 .shelf-book-card--grid > .cover-fallback {
  top: 7.484px !important;
  left: 7.484px !important;
  width: 156.106px !important;
  height: 177.491px !important;
  border-radius: 6.415px !important;
}
.reader-v2 .shelf-book-card--grid::after { display: none; }
.reader-v2 .shelf-book-card--grid .shelf-book-copy h2 {
  top: 193.914px !important;
  right: 31.235px !important;
  left: 7.45px !important;
  color: #ffeed7 !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 12.831px !important;
  font-weight: 700 !important;
}
.reader-v2 .shelf-book-card--grid .shelf-book-copy > p {
  top: 210.983px !important;
  right: 31.235px !important;
  left: 7.45px !important;
  width: auto !important;
  color: #707070 !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 9.623px !important;
  font-weight: 400 !important;
}
.reader-v2 .shelf-book-card--grid .book-progress-line {
  top: 229.88px !important;
  left: 7.45px !important;
  color: #c8f542 !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 9.623px !important;
  font-weight: 600 !important;
}
.reader-v2 .shelf-book-card--grid .book-status-panel { top: 224.505px !important; right: 7.485px !important; z-index: 9 !important; }
.reader-v2 .shelf-book-card--grid .book-status-chip { min-width: 53.717px !important; height: 20.465px !important; padding: 4.733px 11.358px !important; font-size: 9.465px !important; font-weight: 600 !important; box-sizing: border-box !important; }
.reader-v2 .shelf-book-card--grid .book-more { top: 192.323px !important; right: 7.485px !important; width: 17.984px !important; height: 22.717px !important; }
.reader-v2 .shelf-book-card--grid .book-more img { width: 17.984px !important; height: 22.717px !important; }

/* Reader controls — Figma pass, build 87 -------------------------------- */

/* Contents is now the right-hand column: chapter card first, orange rail
   second. The list itself remains independently scrollable. */
.reader-v2 #contents-sheet .reader-contents-sheet {
  top: 128px !important;
  right: 26px !important;
  left: auto !important;
  width: 241px !important;
  height: 415px !important;
}
.reader-v2 .contents-card {
  right: auto !important;
  left: .5px !important;
  width: 188.5px !important;
  height: 415.5px !important;
  padding: 0 !important;
  border-radius: 16.5px !important;
  background: #fff8e6 !important;
}
.reader-v2 .contents-progress-rail {
  top: -.5px !important;
  right: 0 !important;
  left: auto !important;
  width: 39.714px !important;
  height: 412.233px !important;
  border-radius: 22.637px !important;
  background: #fff8e6 !important;
  box-shadow: 0 0 32.5px rgb(70 59 44 / 65%) !important;
}
.reader-v2 .contents-progress-rail::before {
  top: 20.65px !important;
  right: auto !important;
  bottom: 24.82px !important;
  left: 20.055px !important;
  width: 1.6px !important;
  background: #ff6c4b !important;
}
.reader-v2 .contents-progress-rail span {
  top: 20.65px !important;
  left: 9.134px !important;
  width: 21.843px !important;
  height: 21.843px !important;
  background: #ff6c4b !important;
  box-shadow: none !important;
  transition: top .11s linear !important;
}
.reader-v2 #contents-sheet .reader-sheet-heading { display: none !important; }
.reader-v2 .contents-list {
  top: 29px !important;
  right: 10.4px !important;
  bottom: 29px !important;
  left: 10.4px !important;
  gap: 7.5px !important;
  padding: 0 !important;
}
.reader-v2 .contents-list button {
  min-height: 13px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #7e5e31 !important;
  font: 400 12.48px/12.11px "Geologica Pilcrow", system-ui, sans-serif !important;
  text-align: right !important;
}
.reader-v2 .contents-list button[aria-current="true"],
.reader-v2 .contents-list button.is-active {
  color: #ff6c4b !important;
  font-weight: 500 !important;
}

/* This keeps the existing Settings anchor and drag behaviour, but replaces
   the former generic controls with the current Figma palette and sizing. */
.reader-v2 #settings-sheet .reader-settings-sheet {
  background: #f1e2c9 !important;
  color: #7e5e31 !important;
  box-shadow: 0 0 16.25px rgb(70 59 44 / 65%) !important;
}
.reader-v2 .settings-drag-handle span { background: #d8bda3 !important; }
.reader-v2 .reader-settings-sheet .settings-label,
.reader-v2 .reader-settings-sheet .settings-field > span:not(.font-size-stepper),
.reader-v2 .reader-settings-sheet .settings-range > span,
.reader-v2 .reader-settings-sheet .settings-range output {
  color: #7e5e31 !important;
  font-family: "Geologica Pilcrow", system-ui, sans-serif !important;
}
.reader-v2 .reader-settings-sheet .settings-label {
  font-size: 12px !important;
  line-height: 1 !important;
}
.reader-v2 .reader-settings-sheet .theme-options { gap: 14px !important; }
.reader-v2 .reader-settings-sheet .theme-options button {
  border: 0 !important;
  box-shadow: 0 0 8.3px rgb(70 59 44 / 48%) !important;
}
.reader-v2 .reader-settings-sheet .theme-options [data-reader-theme="warm"] { background: #f1e2c9 !important; }
.reader-v2 .reader-settings-sheet .theme-options [data-reader-theme="light"] { background: #ffeed7 !important; }
.reader-v2 .reader-settings-sheet .theme-options [data-reader-theme="black"] { background: #151515 !important; color: #ffeed7 !important; }
.reader-v2 .reader-settings-sheet .theme-options [data-reader-theme="cold"] { background: #f3f5ff !important; }
.reader-v2 .reader-settings-sheet .settings-field select {
  width: 195px !important;
  background: #d8bda3 !important;
  color: #7e5e31 !important;
}
.reader-v2 .font-size-stepper { background: #d8bda3 !important; }
.reader-v2 .reader-settings-sheet label[for="reader-line-height"],
.reader-v2 .reader-settings-sheet label[for="reader-margin"] {
  position: absolute !important;
  left: 34.5px !important;
  display: none !important;
  width: 277px !important;
  height: 44px !important;
  margin: 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: block !important; }
.reader-v2 .reader-settings-sheet label[for="reader-line-height"] { top: 150.5px !important; }
.reader-v2 .reader-settings-sheet label[for="reader-margin"] { top: 208px !important; }
.reader-v2 .reader-settings-sheet .settings-range > span {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}
.reader-v2 .reader-settings-sheet .settings-range output { display: none !important; }
.reader-v2 .reader-settings-sheet .settings-range input {
  position: absolute !important;
  top: 16px !important;
  left: 0 !important;
  width: 277px !important;
  height: 26.686px !important;
  margin: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  accent-color: #ff6c4b !important;
}
.reader-v2 .reader-settings-sheet .settings-range input::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 5px;
  background: linear-gradient(to right, #ff6c4b var(--range-fill, 50%), #d8bda3 var(--range-fill, 50%));
}
.reader-v2 .reader-settings-sheet .settings-range input::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border: 0;
  border-radius: 50%;
  -webkit-appearance: none;
  background: #ff6c4b;
  box-shadow: 0 0 8.3px rgb(70 59 44 / 48%);
}

@media (max-width: 359px) {
  .reader-v2 .library-screen[data-library-view="grid"] .library-list { width: calc(100vw - 36px) !important; margin-left: -6px !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .reader-v2 .shelf-book-card--grid { width: 100% !important; }
}

/* Shelf scroll: the frame itself never moves. Only books move below the
   Figma 282:768 mask, so the Reader header/filters stay readable. */
.reader-app.reader-v2 {
  position: relative !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  isolation: isolate;
}
.reader-v2 .library-screen {
  position: relative !important;
  display: block !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}
.reader-v2 .library-screen::after {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 265px;
  content: "";
  background: #151515;
  filter: blur(15.95px);
  pointer-events: none;
}
.reader-v2 .reader-main-header,
.reader-v2 .reader-library h1,
.reader-v2 .reader-library .library-filters,
.reader-v2 .reader-library .reader-intro,
.reader-v2 .reader-library .library-view-switcher {
  position: relative !important;
  z-index: 5 !important;
}
.reader-v2 .reader-library {
  position: relative !important;
  height: calc(100% - 96px) !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}
.reader-v2 .library-scroll-region {
  position: absolute !important;
  z-index: 0 !important;
  top: 0 !important;
  right: 18px !important;
  bottom: 0 !important;
  left: 18px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  /* The first card starts below the copy, but the scroll container itself
     begins above it. That lets the card travel beneath the blurred mask
     instead of being cut on a hard overflow edge. */
  padding: 166px 0 128px !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  scrollbar-width: none;
}
.reader-v2 .library-scroll-region::-webkit-scrollbar { display: none; }
.reader-v2 .library-scroll-region #current-book,
.reader-v2 .library-scroll-region .library-list {
  margin-left: 14.5px !important;
}
.reader-v2 .library-screen[data-library-view="grid"] .library-scroll-region .library-list {
  margin-left: 0 !important;
}
.reader-v2 .library-screen[data-library-view="grid"] .reader-intro {
  position: relative !important;
  z-index: 5 !important;
  top: auto !important;
  background: transparent !important;
}
.reader-v2 .reader-library .library-view-switcher {
  position: absolute !important;
  z-index: 5 !important;
}
.reader-v2 .reader-footer {
  position: absolute !important;
  z-index: 12 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  padding: 20px 24px max(20px, env(safe-area-inset-bottom)) !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
}
.reader-v2 .reader-footer .add-book-button {
  pointer-events: auto;
  box-shadow: 0 7px 16px rgb(0 0 0 / 34%) !important;
}
.reader-v2 .shelf-book-card--grid .book-progress-line { top: 232.88px !important; }

/* Reader shelf navigation and the first local reading-goals surface.
   The dock is deliberately shared by Shelf and Stats: no visual jump while
   moving between the two Reader spaces. */
.reader-v2 .reader-shelf-nav {
  position: absolute !important;
  z-index: 30 !important;
  right: 50% !important;
  bottom: max(16px, env(safe-area-inset-bottom)) !important;
  left: auto !important;
  display: flex !important;
  width: auto !important;
  height: 64px !important;
  gap: 8px !important;
  padding: 10px 35px !important;
  border-radius: 32px !important;
  background: #2b2b2b !important;
  box-shadow: 0 9px 22px rgb(0 0 0 / 38%) !important;
  transform: translateX(50%) !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}
.reader-v2 .reader-shelf-nav * { pointer-events: auto !important; touch-action: manipulation !important; }
.reader-v2 .reader-shelf-nav button {
  display: grid !important;
  width: 59px !important;
  height: 44px !important;
  gap: 5px !important;
  padding: 0 !important;
  border: 0 !important;
  place-items: center !important;
  background: transparent !important;
  color: #ffeed7 !important;
  font: 300 10.72px/14.3px "Geologica Pilcrow", system-ui, sans-serif !important;
}
.reader-v2 .reader-shelf-nav button.is-active { color: #7a5dff !important; }
.reader-v2 .reader-shelf-nav-icon { display: grid !important; width: 21.44px; height: 21.44px; place-items: center; }
.reader-v2 .reader-shelf-nav-icon img { display: block; width: 21.44px; height: 21.44px; object-fit: contain; }
.reader-v2 .reader-shelf-nav button:not(.is-active) .reader-shelf-nav-icon img { opacity: .95; }
.reader-v2 .reader-footer { bottom: 74px !important; padding-bottom: 13px !important; }
.reader-v2 .library-scroll-region { padding-bottom: 210px !important; }

/* Build 125: this is a direct child of the Reader app, not a child of the
   shelf/statistics scrolling regions. It must win over their masks on iOS. */
.reader-v2 > .reader-shelf-nav--global {
  position: fixed !important;
  z-index: 999 !important;
  pointer-events: auto !important;
  -webkit-user-select: none;
  user-select: none;
}
.reader-v2 > .reader-shelf-nav--global[hidden] { display: none !important; }
.reader-v2 .reader-shelf-nav--legacy { display: none !important; }

.reader-v2 .reader-stats-screen {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: #151515 !important;
  color: #ffeed7 !important;
  -webkit-overflow-scrolling: touch;
}
.reader-v2 .reader-stats-screen[hidden] { display: none !important; }
.reader-v2 .reader-stats-screen .reader-main-header { height: 96px !important; min-height: 96px !important; }
.reader-v2 .reader-stats-content { display: grid; gap: 16px; padding: 16px 24px 116px; }
.reader-v2 .reader-stats-title-section { display: grid; gap: 4px; }
.reader-v2 .reader-stats-title-section h1 { margin: 0; color: #fbd096; font: 900 32px/1 "Geologica Pilcrow", system-ui, sans-serif; letter-spacing: -.32px; }
.reader-v2 .reader-stats-title-section p { margin: 0; color: #707070; font: 300 14px/1.25 "Geologica Pilcrow", system-ui, sans-serif; }
.reader-v2 .reader-stats-progress { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: center; padding: 12px 0; }
.reader-v2 .reader-goal-ring { --goal-progress: 0deg; position: relative; display: grid; width: 110px; height: 110px; place-content: center; border-radius: 50%; background: conic-gradient(#ff6c4b var(--goal-progress), #2b2b2b 0); }
.reader-v2 .reader-goal-ring::after { position: absolute; inset: 7px; border-radius: inherit; content: ""; background: #151515; }
.reader-v2 .reader-goal-ring strong, .reader-v2 .reader-goal-ring span { position: relative; z-index: 1; text-align: center; }
.reader-v2 .reader-goal-ring strong { color: #ffeed7; font: 900 28px/1 "Geologica Pilcrow", system-ui, sans-serif; }
.reader-v2 .reader-goal-ring span { margin-top: 4px; color: #707070; font: 300 12px/1 "Geologica Pilcrow", system-ui, sans-serif; }
.reader-v2 .reader-stats-eyebrow, .reader-v2 .reader-goal-card p { margin: 0; color: #707070; font: 400 12px/1.2 "Geologica Pilcrow", system-ui, sans-serif; text-transform: uppercase; }
.reader-v2 .reader-stats-progress h2 { margin: 6px 0; color: #ffeed7; font: 900 19px/1.13 "Geologica Pilcrow", system-ui, sans-serif; }
.reader-v2 .reader-stats-progress h2 em { color: #fbd096; font-style: normal; }
.reader-v2 .reader-stats-progress p:last-child { margin: 0; color: #707070; font: 300 13px/1.25 "Geologica Pilcrow", system-ui, sans-serif; }
.reader-v2 .reader-streak-card, .reader-v2 .reader-goal-card { border-radius: 20px; background: #2b2b2b; }
.reader-v2 .reader-streak-card { display: grid; gap: 14px; padding: 18px; }
.reader-v2 .reader-streak-card > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.reader-v2 .reader-streak-card span { color: #707070; font: 400 14px/1 "Geologica Pilcrow", system-ui, sans-serif; }
.reader-v2 .reader-streak-card strong { color: #fbd096; font: 900 20px/1 "Geologica Pilcrow", system-ui, sans-serif; }
.reader-v2 .reader-streak-days { display: flex; margin: 0; padding: 0; list-style: none; justify-content: space-between; }
.reader-v2 .reader-streak-days li { display: grid; gap: 8px; place-items: center; color: #707070; font: 300 12px/1 "Geologica Pilcrow", system-ui, sans-serif; }
.reader-v2 .reader-streak-days i { display: grid; width: 28px; height: 28px; border: 1px solid #707070; border-radius: 50%; place-items: center; font-style: normal; }
.reader-v2 .reader-streak-days i.is-active { border-color: #ff6c4b; background: #ff6c4b; color: #151515; }
.reader-v2 .reader-streak-days i.is-today:not(.is-active) { border-color: #fbd096; }
.reader-v2 .reader-stats-goals { display: grid; gap: 12px; padding: 8px 0; }
.reader-v2 .reader-goal-card { display: flex; min-height: 76px; align-items: center; justify-content: space-between; padding: 18px; box-sizing: border-box; }
.reader-v2 .reader-goal-card strong { display: block; margin-top: 4px; color: #ffeed7; font: 700 18px/1 "Geologica Pilcrow", system-ui, sans-serif; }
.reader-v2 .reader-goal-actions { display: flex; gap: 12px; align-items: center; }
.reader-v2 .reader-goal-actions button { display: grid; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; place-items: center; background: #252525; color: #ffeed7; font: 400 20px/1 system-ui; }
.reader-v2 .reader-goal-actions b { min-width: 56px; color: #ff6c4b; font: 900 18px/1 "Geologica Pilcrow", system-ui, sans-serif; text-align: center; }

.reader-v2 .reader-timer-panel {
  position: absolute !important;
  z-index: 9 !important;
  top: -3px !important;
  right: auto !important;
  left: 0 !important;
  display: flex !important;
  width: 63px !important;
  height: 42px !important;
  padding: 9px 22px !important;
  box-sizing: border-box !important;
  gap: 8px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 79px !important;
  align-items: center !important;
  background: #ff6c4b !important;
  box-shadow: 0 4px 6px rgb(70 59 44 / 22%) !important;
  color: #ffeed7 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: width .38s cubic-bezier(.22,.82,.25,1), box-shadow .24s ease, opacity .22s ease .2s, transform .32s cubic-bezier(.22,.82,.25,1) .2s !important;
}
.reader-v2 .reader-timer-panel:active { box-shadow: 0 2px 4px rgb(70 59 44 / 22%) !important; }
.reader-v2 .reader-timer-panel.is-expanded { width: 188px !important; }
.reader-v2 .reader-timer-panel > img {
  display: block !important;
  width: 19px !important;
  height: 18px !important;
  flex: 0 0 19px !important;
}
.reader-v2 .reader-timer-copy {
  display: grid !important;
  width: 117px !important;
  flex: 0 0 117px !important;
  gap: 0 !important;
  color: #ffeed7 !important;
  font: 300 12px/12px "Geologica Pilcrow", system-ui, sans-serif !important;
  text-align: left !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  transform: translateX(-6px) !important;
  transition: opacity .15s ease .12s, transform .38s cubic-bezier(.22,.82,.25,1) !important;
}
.reader-v2 .reader-timer-panel.is-expanded .reader-timer-copy {
  opacity: 1 !important;
  transform: translateX(0) !important;
}
.reader-v2.reader-app .reader-controls-hidden .reader-timer-panel {
  opacity: 0 !important;
  transform: translateY(8px) !important;
  transition-delay: 0s !important;
}
@media (prefers-reduced-motion: reduce) {
  .reader-v2 .reader-timer-panel,
  .reader-v2 .reader-timer-copy { transition: none !important; }
}

/* Reader Settings — Figma node 290:343. This replaces the old expandable
   sheet with one fixed 350 × 405 composition. */
.reader-v2 #settings-sheet .reader-settings-sheet { right: 20px !important; bottom: 20px !important; left: 20px !important; width: 350px !important; max-width: calc(100% - 40px) !important; height: 405px !important; overflow: hidden !important; border-radius: 28px !important; background: #fff8e6 !important; box-shadow: 0 0 16.25px rgb(70 59 44 / 65%) !important; transform-origin: center bottom !important; animation: pilcrow-settings-in .28s cubic-bezier(.22,.82,.25,1) both !important; }
.reader-v2 #settings-sheet .settings-drag-handle, .reader-v2 #settings-sheet .reader-sheet-heading, .reader-v2 #settings-sheet > .reader-settings-sheet > .settings-group, .reader-v2 #settings-sheet > .reader-settings-sheet > .settings-field, .reader-v2 #settings-sheet > .reader-settings-sheet > .settings-range, .reader-v2 #settings-sheet > .reader-settings-sheet > .settings-switch-row, .reader-v2 #settings-sheet > .reader-settings-sheet > .reset-settings { display: none !important; }
.reader-v2 #settings-sheet .settings-figma { position: relative !important; display: block !important; width: 100% !important; height: 100% !important; color: #7e5e31 !important; font-family: "Geologica Pilcrow", system-ui, sans-serif !important; }
.reader-v2 #settings-sheet .settings-figma-title { position: absolute !important; top: 19px !important; left: 35px !important; margin: 0 !important; color: #7e5e31 !important; font: 400 16px/10.44px "Geologica Pilcrow", system-ui, sans-serif !important; }
.reader-v2 #settings-sheet .settings-figma-section { position: absolute !important; left: 21px !important; width: 309px !important; overflow: hidden !important; border-radius: 14.7px !important; background: #d8bda3 !important; box-sizing: border-box !important; }
.reader-v2 #settings-sheet .settings-figma-theme { top: 44px !important; height: 70px !important; }
.reader-v2 #settings-sheet .settings-figma-font { top: 120px !important; height: 86px !important; }
.reader-v2 #settings-sheet .settings-figma-spacing { top: 212px !important; height: 126px !important; }
.reader-v2 #settings-sheet .settings-figma-mode { top: 344px !important; height: 43px !important; }
.reader-v2 #settings-sheet .settings-figma-label { display: inline-flex !important; gap: 8px !important; align-items: center !important; margin: 0 !important; color: #7e5e31 !important; font: 400 12.74px/10.44px "Geologica Pilcrow", system-ui, sans-serif !important; white-space: nowrap !important; }
.reader-v2 #settings-sheet .settings-figma-label > img { display: block !important; width: 12px !important; height: 12px !important; flex: 0 0 12px !important; }
.reader-v2 #settings-sheet .settings-figma-theme > .settings-figma-label { position: absolute !important; top: 11px !important; left: 21.71px !important; }
.reader-v2 #settings-sheet .settings-figma-theme .theme-options { position: absolute !important; top: 30.58px !important; left: 8.36px !important; display: block !important; width: 291.9px !important; height: 31.66px !important; margin: 0 !important; }
.reader-v2 #settings-sheet .settings-figma-theme .theme-options button { position: absolute !important; top: 0 !important; display: grid !important; height: 31.66px !important; padding: 0 !important; border: 0 !important; border-radius: 7.43px !important; place-items: center !important; color: #7e5e31 !important; font: 400 11.8px/7.15px "Geologica Pilcrow", system-ui, sans-serif !important; }
.reader-v2 #settings-sheet .settings-figma-theme .theme-options button:nth-child(1) { left: 0 !important; width: 69.59px !important; background: #ffeed7 !important; }
.reader-v2 #settings-sheet .settings-figma-theme .theme-options button:nth-child(2) { left: 78.14px !important; width: 64.46px !important; background: #f1e2c9 !important; }
.reader-v2 #settings-sheet .settings-figma-theme .theme-options button:nth-child(3) { left: 151.71px !important; width: 65.7px !important; background: #2b2b2b !important; color: #fff0da !important; }
.reader-v2 #settings-sheet .settings-figma-theme .theme-options button:nth-child(4) { left: 226.31px !important; width: 65.59px !important; background: #f3f5ff !important; }
.reader-v2 #settings-sheet .settings-figma-theme .theme-options button.is-active { outline: 1.5px solid #ff6c4b !important; outline-offset: 0 !important; box-shadow: none !important; }
.reader-v2 #settings-sheet .settings-figma-row { position: absolute !important; right: 18.38px !important; left: 18.38px !important; height: 41px !important; box-sizing: border-box !important; }
.reader-v2 #settings-sheet .settings-figma-font-choice { top: 0 !important; }
.reader-v2 #settings-sheet .settings-figma-font-choice::after, .reader-v2 #settings-sheet .settings-figma-spacing .settings-figma-row:not(:last-child)::after { position: absolute !important; right: 0 !important; bottom: 0 !important; left: 0 !important; height: 1px !important; content: "" !important; background: rgb(126 94 49 / 40%) !important; }
.reader-v2 #settings-sheet .settings-figma-font-choice > .settings-figma-label { position: absolute !important; top: 15.75px !important; left: 3.18px !important; }
.reader-v2 #settings-sheet .settings-figma-font-choice > span:last-child { position: absolute !important; top: 12.4px !important; right: 0 !important; display: block !important; width: 114px !important; height: 17px !important; }
.reader-v2 #settings-sheet .settings-figma-font-choice select { position: absolute !important; top: 0 !important; right: 10px !important; width: 105px !important; height: 17px !important; padding: 0 !important; border: 0 !important; appearance: none !important; background: transparent !important; color: #7e5e31 !important; font: 200 12.6px/10.44px "Geologica Pilcrow", system-ui, sans-serif !important; text-align: right !important; }
.reader-v2 #settings-sheet .settings-figma-font-choice > span:last-child > img { position: absolute !important; top: 5px !important; right: 0 !important; width: 6.64px !important; height: 12.97px !important; transform: rotate(-90deg) !important; pointer-events: none !important; }
.reader-v2 #settings-sheet .settings-figma-font > .settings-figma-row:last-child { top: 43px !important; }
.reader-v2 #settings-sheet .settings-figma-font .settings-figma-label { position: absolute !important; top: 14.77px !important; left: 3.18px !important; }
.reader-v2 #settings-sheet .settings-figma-spacing .settings-figma-row:nth-child(1) { top: 0 !important; }
.reader-v2 #settings-sheet .settings-figma-spacing .settings-figma-row:nth-child(2) { top: 42.77px !important; }
.reader-v2 #settings-sheet .settings-figma-spacing .settings-figma-row:nth-child(3) { top: 85.54px !important; }
.reader-v2 #settings-sheet .settings-figma-spacing .settings-figma-label { position: absolute !important; top: 13.44px !important; left: 3.18px !important; }
.reader-v2 #settings-sheet .settings-figma-stepper { position: absolute !important; top: 5.25px !important; right: 0 !important; display: block !important; width: 76.28px !important; height: 29.4px !important; }
.reader-v2 #settings-sheet .settings-figma-stepper > img { display: block !important; width: 100% !important; height: 100% !important; }
.reader-v2 #settings-sheet .settings-figma-stepper button { position: absolute !important; top: 0 !important; width: 38.14px !important; height: 29.4px !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
.reader-v2 #settings-sheet .settings-figma-stepper button:nth-of-type(1) { left: 0 !important; }
.reader-v2 #settings-sheet .settings-figma-stepper button:nth-of-type(2) { right: 0 !important; }
.reader-v2 #settings-sheet .settings-figma-mode > .settings-figma-label { position: absolute !important; top: 17.64px !important; left: 21.56px !important; }
.reader-v2 #settings-sheet #reader-mode-toggle-v2 { position: absolute !important; top: 6.86px !important; right: 18.62px !important; width: 69.58px !important; height: 29.4px !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
.reader-v2 #settings-sheet #reader-mode-toggle-v2 img { display: block !important; width: 100% !important; height: 100% !important; }
@keyframes pilcrow-settings-in { from { opacity: 0; transform: translate3d(0,18px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }

/* New Reader controls, bookmark and iOS-safe title/status area. */
.reader-v2 .reader-panel-actions #reader-bookmark-button { position: relative !important; display: grid !important; width: 49px !important; height: 40px !important; padding: 0 !important; overflow: visible !important; border: 0 !important; border-radius: 15px !important; background: #fff8e6 !important; place-items: center !important; }
.reader-v2 .reader-panel-actions #reader-bookmark-button img { display: block !important; width: 12px !important; height: 18px !important; }
.reader-v2 .reader-panel-actions .bookmark-lottie { position: absolute !important; z-index: 2 !important; inset: -2px !important; display: block !important; overflow: visible !important; pointer-events: none !important; }
.reader-v2 .reader-panel-actions .bookmark-lottie svg { width: 100% !important; height: 100% !important; overflow: visible !important; }
.reader-v2 .reader-panel-actions #reader-bookmark-button.is-lottie-playing { animation: bookmark-lottie-fallback .56s cubic-bezier(.2,.8,.2,1) both !important; }
@keyframes bookmark-lottie-fallback { 0% { transform: scale(1); } 28% { transform: scale(.9); } 55% { transform: scale(1.075); } 100% { transform: scale(1); } }
.reader-v2 .reader-return-to-page { display: grid !important; width: 40.96px !important; height: 40.96px !important; padding: 0 !important; border-radius: 48.36px !important; background: #ff6c4b !important; place-items: center !important; }
.reader-v2 .reader-return-to-page img { width: 20.48px !important; height: 20.48px !important; filter: none !important; }
.reader-v2 .reader-top-fade { position: absolute !important; z-index: 7 !important; top: -29px !important; right: 0 !important; left: 0 !important; height: 96px !important; background: var(--reader-paper) !important; filter: blur(24.1px) !important; pointer-events: none !important; }
.reader-v2 .reader-inline-status { position: absolute !important; top: 44px !important; right: 83px !important; left: 83px !important; margin: 0 !important; overflow: hidden !important; color: var(--reader-brown) !important; font: 400 10px/1.2 "Geologica Pilcrow", system-ui, sans-serif !important; text-align: center !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.reader-v2 .reader-shell:not([hidden]) ~ .reader-toast { display: none !important; }

/* Persistent import/open errors stay above the dock, including tablet layouts. */
.reader-v2 #reader-error-notice {
  position: fixed;
  z-index: 10000;
  top: max(20px, calc(env(safe-area-inset-top, 0px) + 12px));
  left: 50%;
  transform: translateX(-50%);
  width: min(440px, calc(100% - 32px));
  max-height: calc(100dvh - 160px);
  overflow: auto;
  box-sizing: border-box;
  padding: 18px;
  border: 1px solid #ff674b;
  border-radius: 18px;
  background: #fff7e5;
  color: #34281e;
  box-shadow: 0 12px 40px #0005;
}
.reader-v2 #reader-error-notice[hidden] { display: none !important; }
.reader-v2 #reader-error-notice p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.reader-v2 #reader-error-notice button {
  border: 0;
  border-radius: 20px;
  padding: 10px 18px;
  min-height: 44px;
  background: #ff674b;
  color: #151515;
  font: inherit;
  cursor: pointer;
}


/* Reader polish — build 103. The compact values below come directly from the
   current Figma Reader panels, while keeping the existing working EPUB engine. */
.reader-v2 .reader-stage,
.reader-v2 .reader-stage foliate-view,
.reader-v2 .epub-reader,
.reader-v2 .epub-reader iframe { touch-action: manipulation !important; }
.reader-v2 .reader-inline-status[data-kind="setting"]:not([hidden]) {
  top: 44px !important;
  right: auto !important;
  left: 50% !important;
  display: grid !important;
  width: max-content !important;
  min-width: 0 !important;
  height: 25px !important;
  padding: 0 10.5px !important;
  box-sizing: border-box !important;
  border-radius: 16.5px !important;
  background: #fff8e6 !important;
  box-shadow: 0 0 7.45px rgb(70 59 44 / 40%) !important;
  color: #7e5e31 !important;
  font: 500 12.48px/12.11px "Geologica Pilcrow", system-ui, sans-serif !important;
  place-items: center !important;
  transform: translateX(-50%) !important;
  animation: pilcrow-setting-feedback .18s ease-out both !important;
}
.reader-v2 .reader-inline-status[hidden],
.reader-v2 .reader-inline-status:not([data-kind="setting"]) {
  display: none !important;
}
@keyframes pilcrow-setting-feedback { from { opacity: 0; transform: translateX(-50%) translateY(5px) scale(.96); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }

/* No pseudo rail: contents and bookmarks are two intentional floating panels. */
.reader-v2 #contents-sheet .reader-contents-sheet {
  top: 123px !important;
  right: 17px !important;
  left: auto !important;
  width: 220px !important;
  height: 272px !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}
.reader-v2 #contents-sheet .contents-card {
  top: 0 !important;
  right: 0 !important;
  width: 220px !important;
  height: 190px !important;
  padding: 7.832px !important;
  border-radius: 15.663px !important;
  background: #fff8e6 !important;
  box-shadow: 0 11.747px 23.495px rgb(0 0 0 / 63%) !important;
}
.reader-v2 #contents-sheet .reader-sheet-heading { display: none !important; }
.reader-v2 #contents-sheet .contents-list {
  inset: 7.832px !important;
  display: grid !important;
  gap: 3.916px !important;
  align-content: start !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 !important;
  touch-action: pan-y !important;
}
.reader-v2 #contents-sheet .contents-list button {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 30px !important;
  padding: 4.5px 9.789px !important;
  border-radius: 7.832px !important;
  background: #d8bda3 !important;
  color: #7e5e31 !important;
  font: 300 10.5px/1.1 "Geologica Pilcrow", system-ui, sans-serif !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}
.reader-v2 #contents-sheet .toc-item-label {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
.reader-v2 #contents-sheet .toc-item-page {
  flex: 0 0 auto !important;
  color: currentColor !important;
  font-size: 9px !important;
  line-height: 1 !important;
  opacity: .72 !important;
  white-space: nowrap !important;
}
.reader-v2 #contents-sheet .contents-list button[aria-current="true"],
.reader-v2 #contents-sheet .contents-list button.is-active {
  background: #2b2b2b !important;
  color: #fbd096 !important;
  font-size: 12.705px !important;
}
.reader-v2 #contents-sheet .contents-bookmarks {
  position: absolute !important;
  top: 200px !important;
  right: 0 !important;
  display: grid !important;
  width: 220px !important;
  /* Eight 25.24px rows, seven gaps and the vertical padding. The ninth
     bookmark deliberately starts the existing inner scroll. */
  max-height: 238.33px !important;
  gap: 3.31px !important;
  overflow: auto !important;
  padding: 6.62px !important;
  box-sizing: border-box !important;
  border-radius: 13.239px !important;
  background: #fff8e6 !important;
  box-shadow: 0 9.929px 19.859px rgb(0 0 0 / 63%) !important;
}
.reader-v2 #contents-sheet .contents-bookmarks[hidden] { display: none !important; }
.reader-v2 #contents-sheet .bookmark-row { display: grid !important; min-height: 25.24px !important; grid-template-columns: 25.24px 1fr !important; gap: 4.76px !important; }
.reader-v2 #contents-sheet .bookmark-remove,
.reader-v2 #contents-sheet .bookmark-open {
  min-height: 25.24px !important;
  border: 0 !important;
  border-radius: 6.62px !important;
  background: #d8bda3 !important;
  color: #7e5e31 !important;
}
.reader-v2 #contents-sheet .bookmark-remove { display: grid !important; width: 25.24px !important; height: 25.24px !important; padding: 0 !important; place-items: center !important; }
.reader-v2 #contents-sheet .bookmark-remove img { display: block !important; width: 12px !important; height: 12px !important; }
.reader-v2 #contents-sheet .bookmark-remove.is-removing { animation: bookmark-trash-pop .125s ease-in both !important; }
.reader-v2 #contents-sheet .bookmark-open {
  display: flex !important;
  width: 100% !important;
  padding: 6.62px 8.274px !important;
  border: 0 !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6.62px !important;
  font: 300 10px/normal "Geologica Pilcrow", system-ui, sans-serif !important;
  white-space: nowrap !important;
}
.reader-v2 #contents-sheet .bookmark-open span:last-child { overflow: hidden !important; font-size: 11.584px !important; text-align: right !important; text-overflow: ellipsis !important; }
@keyframes bookmark-trash-pop { 50% { transform: translateY(-3px) scale(1.13); } 100% { transform: translateY(2px) scale(.9); opacity: 0; } }

/* The controls still move in/out, just with much less visual snap. */
.reader-v2 .reading-header,
.reader-v2 .reader-homebar { transition: opacity .63s ease, transform .78s cubic-bezier(.18,.72,.2,1) !important; }
.reader-v2 #settings-sheet .reader-settings-sheet {
  bottom: 30px !important;
  animation: pilcrow-settings-in-gentle .56s cubic-bezier(.18,.75,.22,1) both !important;
}
@keyframes pilcrow-settings-in-gentle { from { opacity: 0; transform: translate3d(0,10px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }

/* Exact Figma proportions, with a CSS transition between the two reading modes. */
.reader-v2 #settings-sheet #reader-mode-toggle-v2 {
  overflow: hidden !important;
  border-radius: 14.7px !important;
  background: #2b2b2b !important;
  transition: background-color .32s cubic-bezier(.2,.8,.2,1) !important;
}
.reader-v2 #settings-sheet #reader-mode-toggle-v2 img { display: none !important; }
.reader-v2 #settings-sheet #reader-mode-toggle-v2::after {
  position: absolute !important;
  top: 1.96px !important;
  left: 30.38px !important;
  width: 37.24px !important;
  height: 25.48px !important;
  border-radius: 12.74px !important;
  content: "" !important;
  background: #ff6c4b !important;
  transition: left .32s cubic-bezier(.2,.8,.2,1), transform .32s cubic-bezier(.2,.8,.2,1) !important;
}
.reader-v2 #settings-sheet #reader-mode-toggle-v2[data-mode="pages"] { background: #f1e2c9 !important; }
.reader-v2 #settings-sheet #reader-mode-toggle-v2[data-mode="pages"]::after { left: 3.35px !important; }

/* The return arrow is the actual Figma glyph, centred inside its 40.96 px control. */
.reader-v2 .reader-return-to-page img { width: 6.2264px !important; height: 11.4466px !important; }

/* Shelf context menu lives in the document layer, anchored to its dots button.
   That keeps it intact across both list and grid cards. */
body > .book-context-menu {
  position: fixed !important;
  z-index: 80 !important;
  display: flex !important;
  width: 180px !important;
  height: 90px !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 6px !important;
  border: .6px solid #252525 !important;
  border-radius: 11px !important;
  box-sizing: border-box !important;
  background: #353535 !important;
  box-shadow: 0 6px 6px rgb(0 0 0 / 56%) !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  animation: none !important;
}
body > .book-context-menu.is-closing { animation: shelf-floating-menu-out .16s ease forwards !important; pointer-events: none !important; }
body > .book-context-menu .book-context-choice { display: flex !important; width: 100% !important; height: 37px !important; min-height: 0 !important; gap: 7px !important; align-items: center !important; padding: 0 9px !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; color: #b7b7b7 !important; font: 400 10.5px/1 "Geologica Pilcrow", system-ui, sans-serif !important; text-align: left !important; }
body > .book-context-menu .book-context-choice--remove { color: #ff6c4b !important; font-weight: 500 !important; }
body > .book-context-menu .book-context-choice img { width: 8.5px !important; height: 8.5px !important; flex: 0 0 auto !important; }
@keyframes shelf-floating-menu-out { to { opacity: 0; transform: translateY(-4px); } }

/* Whole-book progress rail — Figma node 416:2024. The short dark/coral
   handle is deliberately separate from the table-of-contents scroll. */
.reader-v2 #contents-sheet .reader-contents-sheet {
  width: 260px !important;
}
.reader-v2 #contents-sheet .contents-card {
  right: auto !important;
  left: 0 !important;
  width: 220px !important;
}
.reader-v2 #contents-sheet .contents-bookmarks {
  right: 40px !important;
}
.reader-v2 #contents-sheet .contents-progress-rail {
  position: absolute !important;
  z-index: 4 !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  display: block !important;
  width: 34px !important;
  height: 190px !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 5px solid #faf3e2 !important;
  border-radius: 27px !important;
  box-sizing: border-box !important;
  background: #d8bda3 !important;
  box-shadow: 0 9.929px 19.859px rgb(0 0 0 / 63%) !important;
  cursor: grab !important;
  touch-action: none !important;
}
.reader-v2 #contents-sheet .contents-progress-rail[hidden] { display: none !important; }
.reader-v2 #contents-sheet .contents-progress-rail::before { content: none !important; }
.reader-v2 #contents-sheet .contents-progress-rail > span {
  position: absolute !important;
  top: 0 !important;
  left: -5px !important;
  display: block !important;
  width: 34px !important;
  height: var(--contents-progress-fill-height, 16px) !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(to bottom, #2b2b2b 0, #2b2b2b calc(100% - 16px), #ff6c4b calc(100% - 16px), #ff6c4b 100%) !important;
  box-shadow: none !important;
  pointer-events: none !important;
  transition: height .11s linear !important;
}
.reader-v2 #contents-sheet .contents-progress-drag {
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: grab !important;
  touch-action: none !important;
  -webkit-appearance: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}
.reader-v2 #contents-sheet .contents-progress-rail:active,
.reader-v2 #contents-sheet .contents-progress-drag:active { cursor: grabbing !important; }

/* Five complete table-of-contents rows fit in the card; the sixth starts
   below the clip instead of peeking through as a thin distracting stripe. */
.reader-v2 #contents-sheet .contents-list { bottom: 13px !important; }