.reader-page { --reader-font-size: 20px; --reader-font-family: 'Open Sans', system-ui, sans-serif; }
.reader-column { width: min(100%, 860px); margin-inline: auto; }
.reader-breadcrumbs { margin-bottom: 22px; font-size: 11px; }
.reader-breadcrumbs > a:nth-of-type(2) { max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-heading { text-align: center; padding: 13px 20px 9px; }
.site-dark .reader-book-name { display: inline-flex; align-items: center; justify-content: center; gap: 9px; max-width: 100%; color: #9cc9b7; font-size: 12px; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.reader-book-name i { font-size: 12px; flex-shrink: 0; color: #729d8c; }
.reader-chapter-number { display: block; margin: 22px 0 10px; color: #7d9f94; font-size: 9px; letter-spacing: 2.2px; font-weight: 700; }
.reader-heading h1 { color: #e0ede7; font-size: clamp(23px, 3vw, 32px); font-weight: 700; line-height: 1.4; letter-spacing: -.6px; max-width: 690px; margin: 0 auto; overflow-wrap: anywhere; }
.reader-heading-rule { display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: 25px; }
.reader-heading-rule > span { width: 46px; height: 1px; background: linear-gradient(90deg, transparent, #628e744f); }
.reader-heading-rule > span:last-child { transform: rotate(180deg); }
.reader-heading-rule i { color: #749c88; font-size: 5px; }
.reader-navigation { position: relative; z-index: 160; display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 9px; width: min(100%, 440px); margin: 24px auto; }
.site-dark .reader-nav-link, .site-dark .reader-nav-index { display: flex; align-items: center; justify-content: center; gap: 11px; min-height: 44px; padding: 11px 14px; border: 1px solid #355248; border-radius: 10px; background: #13231f; color: #b5d7c7; font-size: 12px; font-weight: 600; line-height: 1.4; text-align: center; }
.reader-nav-link i { font-size: 11px; }
.site-dark .reader-nav-index { background: #18282d; color: #9fbbb1; padding-inline: 0; font-size: 14px; }
.site-dark .reader-next { background: #86dfb8; color: #0c2b1e; border-color: #86dfb8; }
.site-dark .reader-nav-link:hover:not(:disabled), .site-dark .reader-nav-index:hover { background: #244233; color: #c3f5db; border-color: #6ee7b77a; }
.site-dark .reader-next:hover { background: #a2edcd; color: #0c2b1e; }
.site-dark .reader-nav-link:disabled { color: #5b736d; background: #101b1f; border-color: #293d3c; cursor: not-allowed; }
.reader-toolbar { position: sticky; top: 12px; z-index: 160; display: flex; align-items: center; gap: 13px; padding: 10px 16px; border: 1px solid #354c45; border-radius: 12px; background: #16242bee; color: #a9c8b9; backdrop-filter: blur(16px); box-shadow: 0 5px 20px #0002; }
.reader-toolbar[hidden] { display: none; }
.reader-toolbar-caption { display: inline-flex; align-items: center; gap: 8px; color: #8cae9f; font-size: 11px; margin-right: auto; }
.reader-toolbar-caption i { font-size: 12px; }
.reader-size-control { display: inline-flex; align-items: center; border: 1px solid #365047; border-radius: 8px; overflow: hidden; }
.reader-size-control button { min-width: 34px; height: 31px; border: 0; background: #ffffff03; color: #bfd9cb; font: 12px system-ui, sans-serif; cursor: pointer; }
.reader-size-control button > span { font-size: 10px; margin-left: 2px; color: #80b29a; }
.reader-size-control button:hover { background: #6ee7b712; }
.reader-size-control button:disabled { opacity: .35; cursor: not-allowed; }
.reader-size-control output { min-width: 30px; text-align: center; color: #8cae9d; font-size: 10px; font-variant-numeric: tabular-nums; }
.site-dark #reader-font-family { min-width: 112px; padding: 7px 23px 7px 10px; border: 1px solid #365047; border-radius: 8px; background-color: #13231f; color: #b7d2c4; font-size: 11px; }
.reader-progress-label { display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-width: 52px; font-size: 10px; color: #83b29a; font-variant-numeric: tabular-nums; }
.reader-progress-label > i { font-size: 11px; }
.reader-progress-track { position: absolute; inset: auto 10px 0; height: 2px; overflow: hidden; border-radius: 2px; }
.reader-progress-track > span { display: block; height: 100%; width: 0; border-radius: 2px; background: #86dfb8; }
.reader-paper { padding: 42px 48px 28px; margin-top: 16px; border: 1px solid #2b3f43; border-radius: 17px; background: #121d25; box-shadow: 0 12px 40px #0000000b; }
.reader-prose { color: #c5d1d8; font-family: var(--reader-font-family); font-size: var(--reader-font-size); line-height: 1.95; text-align: left; overflow-wrap: anywhere; letter-spacing: .005em; }
.reader-prose :is(p, span, div, font) { color: inherit !important; background-color: transparent !important; font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; max-width: 100%; }
.reader-prose p { margin: 0 0 1.15em; }
.reader-prose p:empty { display: none; }
.reader-prose .reader-extra-break { display: none; }
.reader-prose :is(h1, h2, h3, h4) { color: #dbeae2; font-size: 1.12em; line-height: 1.7; margin: 1.4em 0 .8em; }
.reader-prose a { color: #9bdabb; text-decoration: underline; text-underline-offset: 3px; }
.reader-prose :is(img, video, iframe, embed, object) { max-width: 100%; height: auto; }
.reader-prose img { display: block; margin: 24px auto; border-radius: 10px; }
.reader-prose pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.reader-prose table { display: block; max-width: 100%; overflow-x: auto; }
.reader-prose > :last-child { margin-bottom: 0; }
.reader-end-mark { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 40px; }
.reader-end-mark > i { width: 3px; height: 3px; background: #608a74; transform: rotate(45deg); }
.reader-end-mark > span { width: 40px; height: 1px; margin-inline: 8px; background: #658d722f; }
.reader-end-caption { text-align: center; font-size: 10px; color: #6c9382; margin: 15px 0 0; }
.reader-bottom-navigation { margin-top: 26px; }
.reader-keyboard-hint { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; color: #698b7e; font-size: 10px; margin: 0 0 30px; }
.reader-keyboard-hint kbd { padding: 2px 5px; border: 1px solid #2d443b; border-radius: 4px; color: #92b09f; background: #15231e; font-size: 9px; }
.reader-keyboard-hint > span { margin: 0 6px; }
.reader-keyboard-hint a { color: #95beaa; }
.reader-native-slot:empty { display: none; }
.reader-page .story-shelf { margin-top: 40px; }
.reader-content-empty { color: #92afa4; font-style: italic; }

/* Native modal stays above the site navigation and floating widgets. */
.reader-dialog { width: min(540px, 92vw); max-height: 86dvh; padding: 26px; border: 1px solid #456655; border-radius: 19px; background: #132027; color: #d1e3dc; box-shadow: 0 30px 100px #0009; }
.reader-dialog:not([open]) { display: none; }
.reader-dialog::backdrop { background: #020a0ec9; backdrop-filter: blur(5px); }
.reader-dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 23px; }
.reader-dialog-heading .story-eyebrow { font-size: 8px; }
.reader-dialog-heading h2 { font-size: 24px; font-weight: 700; letter-spacing: -.6px; margin: 9px 0 0; }
.reader-dialog-close { width: 36px; height: 36px; border: 1px solid #3d564d; border-radius: 10px; background: #ffffff03; color: #bad6c7; font: 25px/1 system-ui, sans-serif; }
.reader-chapter-search { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border: 1px solid #355248; border-radius: 10px; background: #0e1c21; }
.reader-chapter-search:focus-within { border-color: #6ee7b78c; }
.reader-chapter-search > i { font-size: 12px; color: #789e8c; }
.site-dark .reader-chapter-search input, .site-dark .reader-chapter-search input:focus { width: 100%; min-width: 0; border: 0; padding: 5px 0; background: transparent; box-shadow: none; outline: none; color: #cfe5d9; font-size: 12px; }
.reader-chapter-search button { flex-shrink: 0; padding: 9px 13px; border: 1px solid #486957; border-radius: 7px; background: #213c2f; color: #b1e1c6; font-size: 11px; }
.reader-chapter-search button > span { margin-left: 8px; }
.reader-chapter-search button:disabled { opacity: .5; }
.reader-dialog-feedback { font-size: 11px; color: #edbf9f; margin: 12px 0; }
.reader-dialog-feedback:empty { display: none; }
.reader-nearby-heading { display: flex; justify-content: space-between; gap: 10px; margin: 22px 0 12px; color: #7f9d90; font-size: 10px; }
.reader-nearby-heading > span:last-child { color: #a6d2b9; }
.reader-chapter-results { max-height: min(350px, 44dvh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #345a48 transparent; }
.reader-chapter-options { list-style: none; padding: 0; margin: 0; }
.reader-chapter-option { display: flex; align-items: center; gap: 12px; padding: 13px 10px; border: 1px solid transparent; border-bottom-color: #ffffff07; border-radius: 9px; }
.reader-option-number { width: 30px; flex-shrink: 0; color: #719b83; font-size: 11px; font-variant-numeric: tabular-nums; text-align: center; }
.reader-option-title { min-width: 0; color: #b5cbc3; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.reader-chapter-option:hover, .reader-chapter-option[aria-current="page"] { border-color: #6ee7b72b; background: #6ee7b709; }
.reader-chapter-option[aria-current="page"] .reader-option-title { color: #9be1bc; font-weight: 600; }
.reader-list-status { text-align: center; font-size: 12px; color: #94b6a5; margin: 0; padding: 20px 10px; }
.reader-list-status:empty { display: none; }
.reader-list-retry { display: block; margin: 0 auto 12px; border: 1px solid #40604f; border-radius: 8px; padding: 7px 12px; background: #1c352a; color: #b3d6c1; font-size: 11px; }
.reader-list-retry[hidden] { display: none; }
.reader-full-index { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid #345044; color: #a8d7bc; font-size: 12px; }
html.reader-dialog-open { overflow: hidden; }
@media (max-width: 680px) {
  .reader-view .aff-bubble-wrap { top: auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: none; }
  .reader-breadcrumbs { font-size: 10px; gap: 8px; }
  .reader-heading { padding: 6px 5px 0; }
  .site-dark .reader-book-name { font-size: 11px; }
  .reader-chapter-number { font-size: 8px; margin-top: 20px; }
  .reader-heading h1 { font-size: 24px; line-height: 1.5; letter-spacing: -.4px; }
  .reader-heading-rule { margin-top: 22px; }
  .reader-navigation { gap: 8px; margin-block: 22px; }
  .site-dark .reader-nav-link { min-height: 43px; padding: 10px 9px; gap: 7px; font-size: 11px; }
  .reader-nav-link i { font-size: 10px; }
  .reader-toolbar { top: 8px; gap: 10px; padding: 9px 11px; border-radius: 10px; }
  .reader-toolbar-caption { display: none; }
  .site-dark #reader-font-family { margin-left: auto; min-width: 100px; font-size: 10px; }
  .reader-size-control button { min-width: 32px; }
  .reader-size-control output { min-width: 24px; }
  .reader-progress-label { min-width: 40px; gap: 5px; font-size: 9px; }
  .reader-progress-label > i { display: none; }
  .reader-paper { padding: 25px 19px 23px; margin-top: 12px; border-radius: 13px; }
  .reader-prose { line-height: 1.9; letter-spacing: 0; }
  .reader-prose img { margin-block: 20px; border-radius: 7px; }
  .reader-end-mark { margin-top: 30px; }
  .reader-keyboard-hint { font-size: 9px; gap: 4px; line-height: 2; }
  .reader-keyboard-hint kbd { font-size: 8px; }
  .reader-dialog { padding: 22px 18px; border-radius: 16px; }
  .reader-dialog-heading h2 { font-size: 23px; }
  .site-dark .reader-chapter-search input { font-size: 11px; }
  .reader-chapter-search button { font-size: 10px; padding-inline: 10px; }
  .reader-chapter-search button > span { display: none; }
}
@media (max-width: 359px) {
  .reader-toolbar { gap: 7px; padding-inline: 9px; }
  .site-dark #reader-font-family { min-width: 88px; max-width: 88px; }
  .reader-progress-label { min-width: 28px; font-size: 8px; }
  .reader-size-control button { min-width: 29px; }
  .reader-paper { padding-inline: 16px; }
  .site-dark .reader-nav-link { font-size: 10px; gap: 5px; }
}