:root {
  --library-ink: #294655;
  --library-muted: #5e7169;
  --library-line: #dce2d9;
  --library-paper: #f7f5ed;
  --library-blue: #e6eeeb;
  --library-accent: #d69b70;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--library-ink); background: var(--library-paper); font-family: "Hiragino Maru Gothic ProN", "Yuanti SC", "PingFang SC", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #1974c8; outline-offset: 4px; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
[hidden] { display: none !important; }
.library-shell { max-width: 1000px; margin: auto; padding: 0 40px; }
.library-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px 0; border-bottom: 1px solid var(--library-line); }
.library-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.library-brand > span { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; background: #fffefa; border-radius: 14px; }
.library-brand img { object-fit: contain; display: block; }
.library-brand b { font-size: 16px; font-weight: 750; letter-spacing: .5px; }
.library-brand small { display: block; margin-top: 5px; font-size: 8px; font-weight: 500; letter-spacing: 1.6px; color: var(--library-muted); }
.library-home { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; color: #6a807e; padding: 10px 0 10px 10px; }
.library-home svg { width: 16px; height: 16px; }
.library-intro { position: relative; padding: 48px 0 38px; }
.library-kicker { display: flex; align-items: center; gap: 12px; font-size: 10px; letter-spacing: 2.2px; color: #7d918b; margin: 0 0 18px; font-weight: 650; }
.library-kicker > span { display: block; width: 24px; height: 4px; background: var(--library-accent); }
.library-intro h1 { font-family: "Songti SC", "STSong", "PingFang SC", serif; font-size: 52px; line-height: 1.3; letter-spacing: 3px; margin: 0; font-weight: 800; }
.library-lead { font-size: 15px; line-height: 1.8; color: #617164; margin: 17px 0 0; letter-spacing: .7px; }
.library-intro-note { position: absolute; right: 1px; bottom: 42px; writing-mode: vertical-rl; color: #9aab9f; font-family: "Songti SC", "STSong", serif; letter-spacing: 2px; font-size: 12px; line-height: 1.8; }
.library-collection { border-top: 2px solid #81988c; padding: 22px 0 0; }
.library-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.library-section-heading h2 { display: flex; align-items: baseline; gap: 15px; font-size: 20px; line-height: 1.4; margin: 0; font-weight: 650; letter-spacing: 1px; }
.library-section-heading h2 > span { font-size: 9px; font-weight: 500; letter-spacing: 1.7px; color: #97a69b; }
.library-section-heading > span { font-size: 11px; white-space: nowrap; color: var(--library-muted); }
.library-empty { display: flex; align-items: center; justify-content: center; gap: 35px; padding: 30px 25px; min-height: 180px; background: #eaf0e8; border-radius: 3px 22px 3px 3px; }
.library-empty-books { display: block; width: 144px; height: 108px; object-fit: contain; flex-shrink: 0; }
.library-empty h3 { font-family: "Songti SC", "STSong", "PingFang SC", serif; font-size: 24px; line-height: 1.5; letter-spacing: 1px; margin: 0 0 10px; font-weight: 650; }
.library-empty p { font-size: 13px; line-height: 1.9; color: #5b6c60; margin: 0; }
.library-mobile-break { display: none; }
.library-related { margin-top: 30px; }
.library-related > p { color: #66786b; font-size: 11px; margin: 0 0 12px; letter-spacing: 1px; }
.library-related > div { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.library-related a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 0; border-top: 1px solid var(--library-line); }
.library-related a > span { font-size: 14px; line-height: 1.6; letter-spacing: .4px; }
.library-related svg { width: 18px; height: 18px; color: #93a599; transition: transform .2s; }
.library-related a:hover svg { transform: translateX(3px); }
.library-footer { text-align: center; font-size: 10px; letter-spacing: 1px; color: #66786b; margin: 36px 0 14px; }
.library-search { margin: 0 0 18px; }
.library-search > label { display: block; font-size: 11px; color: #7b9090; margin-bottom: 7px; }
.library-search > div { display: flex; align-items: center; gap: 9px; border: 1px solid #d5dfd6; border-radius: 9px; background: #fffefa; padding: 5px 6px 5px 12px; }
.library-search svg { width: 18px; height: 18px; color: #879c91; }
.library-search input { min-width: 0; width: 100%; border: 0; background: transparent; padding: 9px 0; color: var(--library-ink); font-size: 14px; }
.library-search input::placeholder { color: #9baba0; }
.library-search button { flex-shrink: 0; min-height: 40px; padding: 9px 14px; border: 0; background: var(--library-blue); border-radius: 6px; color: #496859; font-size: 12px; }
.library-categories { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 23px; }
.library-categories button { min-height: 40px; border: 1px solid var(--library-line); background: transparent; border-radius: 6px; padding: 8px 12px; font-size: 12px; color: #718579; }
.library-categories button[aria-pressed="true"] { background: #e6eee4; border-color: #bed3bd; color: #345c43; }
.library-books { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 25px; }
.library-books:empty { display: none; }
.library-book { display: block; min-width: 0; }
.library-book-cover { position: relative; display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 3/4; padding: 8px 3px 13px; border-bottom: 1px solid #cdd9ce; background: linear-gradient(transparent 94%, #e4eadd 94%); }
.library-book-cover img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 2px 5px 5px 2px; box-shadow: 2px 4px 8px #2d48541c; }
.library-book h3 { font-size: 15px; line-height: 1.6; margin: 11px 0 4px; font-weight: 650; overflow-wrap: anywhere; }
.library-book p { font-size: 11px; line-height: 1.7; margin: 0; color: #617164; }
.library-book small { display: inline-block; font-size: 10px; margin-top: 6px; color: #617164; }
.library-search-status { font-size: 13px; line-height: 1.8; color: #617164; margin: 20px 0 0; }
.library-pdf-link { display: inline-block; margin-left: 10px; text-decoration: underline; text-underline-offset: 3px; }
.library-more { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 27px auto 0; min-height: 44px; padding: 10px 18px; border: 1px solid #d2dfd3; border-radius: 7px; background: #fffefa; color: #597c64; font-size: 12px; }
.library-more svg { width: 16px; height: 16px; }
.library-noscript { font-size: 12px; line-height: 1.8; color: #617164; }
.library-reader { border: 0; border-radius: 12px; padding: 0; width: min(1080px, calc(100vw - 20px)); height: min(920px, calc(100dvh - 20px)); max-height: calc(100dvh - 20px); color: var(--library-ink); background: #f8faf6; overflow: hidden; }
.library-reader[open] { display: flex; flex-direction: column; }
.library-reader::backdrop { background: #1833459c; backdrop-filter: blur(5px); }
.library-reader > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--library-line); flex-shrink: 0; background: white; }
.library-reader h2 { font-size: 16px; line-height: 1.5; margin: 3px 0 0; }
.library-reader header small { font-size: 10px; color: #839489; }
.library-reader #reader-close { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border: 0; background: #f0f5ed; border-radius: 8px; color: #5d7663; }
.reader-page { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 15px; }
.reader-page img { display: block; width: 100%; height: 100%; object-fit: contain; }
.reader-page p { font-size: 13px; line-height: 1.9; color: #7c8c80; }
.library-reader > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--library-line); background: white; flex-shrink: 0; }
.library-reader footer button { border: 1px solid #ccddcd; border-radius: 7px; background: #edf4e9; color: #3e6947; padding: 9px 15px; font-size: 12px; min-height: 40px; }
.library-reader footer button:disabled { opacity: .35; cursor: default; }
.library-reader footer span { font-size: 11px; color: #7c9182; white-space: nowrap; }
@media (max-width: 700px) {
  .library-shell { padding: 0 24px; }
  .library-header { padding: 18px 0; }
  .library-brand > span { width: 42px; height: 42px; border-radius: 13px; }
  .library-brand b { font-size: 14px; }
  .library-brand small { font-size: 7px; letter-spacing: 1.4px; }
  .library-home { font-size: 11px; gap: 4px; }
  .library-intro { padding: 35px 0 32px; }
  .library-kicker { font-size: 9px; letter-spacing: 2px; margin-bottom: 17px; gap: 10px; }
  .library-kicker > span { width: 19px; height: 3px; }
  .library-intro h1 { font-size: 39px; letter-spacing: 2px; }
  .library-lead { font-size: 13px; margin-top: 14px; letter-spacing: .3px; }
  .library-intro-note { display: none; }
  .library-collection { padding-top: 18px; }
  .library-section-heading { margin-bottom: 17px; }
  .library-section-heading h2 { font-size: 18px; gap: 12px; }
  .library-section-heading h2 > span { font-size: 8px; letter-spacing: 1.4px; }
  .library-empty { justify-content: flex-start; gap: 17px; padding: 26px 15px; min-height: 159px; border-radius: 3px 19px 3px 3px; }
  .library-empty-books { width: 104px; height: 78px; }
  .library-empty h3 { font-size: 20px; margin-bottom: 8px; letter-spacing: .5px; }
  .library-empty p { font-size: 11px; line-height: 1.9; }
  .library-mobile-break { display: inline; }
  .library-related { margin-top: 26px; }
  .library-related > div { gap: 22px; }
  .library-related > p { font-size: 10px; margin-bottom: 10px; }
  .library-related a { padding: 14px 0; }
  .library-related a > span { font-size: 12px; }
  .library-related svg { width: 16px; height: 16px; }
  .library-footer { font-size: 9px; margin-top: 26px; }
  .library-books { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px 18px; }
  .library-book h3 { font-size: 14px; }
  .library-book p { font-size: 11px; }
  .library-reader > header { padding: 12px; }
  .library-reader h2 { font-size: 14px; }
  .reader-page { padding: 9px; }
  .library-reader footer button { padding: 8px 12px; }
}
@media (max-width: 350px) {
  .library-shell { padding: 0 19px; }
  .library-brand { gap: 7px; }
  .library-brand b { font-size: 13px; }
  .library-brand small { font-size: 7px; letter-spacing: 1px; }
  .library-home { font-size: 10px; }
  .library-intro h1 { font-size: 35px; }
  .library-lead { font-size: 12px; }
  .library-empty { gap: 12px; padding: 24px 12px; }
  .library-empty-books { width: 87px; height: 66px; }
  .library-empty h3 { font-size: 18px; }
  .library-empty p { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .library-related svg { transition: none; }
}

/* Interactive 3D shelf: real catalogue books only; the empty preview is decorative. */
.library-intro { padding-top: 35px; padding-bottom: 26px; }
.library-intro h1 { font-size: 43px; }
.library-intro-note { display: none; }
.library-featured { padding: 0 0 27px; margin-bottom: 25px; border-bottom: 1px solid var(--library-line); }
.library-featured-stage { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; min-height: 254px; }
.library-featured-arrow { position: relative; z-index: 2; display: grid; place-items: center; width: 32px; min-height: 44px; padding: 0; border: 0; background: transparent; color: #5c726b; }
.library-featured-arrow svg { width: 18px; height: 18px; }
.library-featured-arrow:disabled { opacity: .25; cursor: default; }
.library-featured-rail { grid-column: 2; grid-row: 1; display: flex; align-items: flex-end; gap: 5px; min-width: 0; min-height: 254px; padding: 18px 20px 24px; overflow-x: auto; overflow-y: hidden; perspective: 1100px; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-y; }
.library-featured-rail::-webkit-scrollbar { display: none; }
.library-featured-rail:empty { display: none; }
.library-featured-arrow:first-child { grid-column: 1; grid-row: 1; }
.library-featured-arrow:last-child { grid-column: 3; grid-row: 1; }
.library-featured-book { --book-tone: #698b94; display: block; position: relative; flex: 0 0 35px; width: 35px; height: 204px; margin: 0; padding: 0; border: 0; border-radius: 1px; background: transparent; text-align: left; color: #fffdf7; perspective: 900px; transition: flex-basis .5s cubic-bezier(.2,.7,.2,1), width .5s cubic-bezier(.2,.7,.2,1); }
.library-featured-book[aria-pressed="true"] { flex-basis: 150px; width: 150px; }
.library-featured-solid { display: block; position: relative; width: 146px; height: 204px; transform-origin: 12px center; transform: rotateY(90deg); transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.library-featured-book[aria-pressed="true"] .library-featured-solid { transform: rotateY(18deg); }
.library-featured-front { display: flex; align-items: center; justify-content: center; position: absolute; inset: 0; overflow: hidden; background: var(--book-tone); transform: translateZ(12px); box-shadow: 4px 5px 8px #3b403c12; backface-visibility: hidden; }
.library-featured-front img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fffdf7; }
.library-featured-spine { display: flex; align-items: center; justify-content: center; position: absolute; left: -12px; top: 0; width: 24px; height: 100%; padding: 11px 5px; background: var(--book-tone); border-left: 1px solid #ffffff30; border-right: 1px solid #00000014; transform: rotateY(-90deg); backface-visibility: hidden; }
.library-featured-spine > span { display: block; max-height: 100%; overflow: hidden; font-size: 12px; line-height: 1.5; font-weight: 500; letter-spacing: 2px; writing-mode: vertical-rl; }
.library-featured-spine[data-image="true"] { padding: 0; }
.library-featured-spine > img { display: block; width: 100%; height: 100%; object-fit: fill; }
.library-featured-rail[data-short="true"] { justify-content: center; }
.library-featured-preview-note { font-size: 11px; line-height: 1.8; color: #66786b; margin: 14px 0 0; }
.library-featured-pages { display: block; position: absolute; top: 3px; right: -12px; width: 24px; height: calc(100% - 6px); background: repeating-linear-gradient(90deg, #efeadb 0, #efeadb 1px, #fffdf6 1px, #fffdf6 3px); transform: rotateY(90deg); border: 1px solid #d7d3c5; backface-visibility: hidden; }
.library-featured-book:hover .library-featured-spine { filter: brightness(1.08); }
.library-featured-book:focus-visible { outline-offset: 6px; }
.library-featured-preview { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; justify-content: center; gap: 11px; min-width: 0; padding: 23px 20px 25px; perspective: 1000px; }
.library-featured-sample { display: block; position: relative; flex: 0 0 30px; height: 197px; background: linear-gradient(90deg, #ffffff16, transparent 20%, #00000009 95%), var(--sample-tone); border-left: 1px solid #ffffff65; border-right: 1px solid #00000018; box-shadow: 2px 4px 3px #3b403c0c; transform: rotateY(-10deg); }
.library-featured-sample::before, .library-featured-sample::after { content: ""; position: absolute; left: 6px; right: 6px; height: 1px; background: #ffffff70; }
.library-featured-sample::before { top: 20px; }
.library-featured-sample::after { bottom: 20px; }
.library-featured-sample--open { flex-basis: 142px; width: 142px; height: 204px; margin-right: 5px; transform: rotateY(-19deg); background: linear-gradient(90deg, #647a6330 0, transparent 6%, transparent 95%, #ffffff35 100%), #e7dfc9; border-left: 6px solid #728577; border-right: 4px solid #f9f5e8; }
.library-featured-sample--open::before { top: 42px; left: 26px; right: 22px; height: 64px; background: linear-gradient(145deg, #b6c5b4 0 48%, #d1ba99 48% 73%, #a0b7b2 73%); }
.library-featured-sample--open::after { left: 28px; right: 26px; bottom: 48px; height: 16px; background: repeating-linear-gradient(0deg, #9d9b8640 0, #9d9b8640 2px, transparent 2px, transparent 7px); }
.library-featured-empty { font-size: 12px; line-height: 1.9; color: #617164; margin: 4px 0 0; text-align: center; }
.library-featured-empty > span { display: block; font-size: 10px; letter-spacing: 1px; color: #66786b; margin-bottom: 4px; }
.library-featured-details { border-top: 1px solid var(--library-line); padding-top: 23px; }
.library-featured-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; color: #66786b; font-size: 11px; }
.library-featured-meta p { margin: 0; }
.library-featured-meta > span { white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.library-featured-details h2 { font-family: "Songti SC", "STSong", "PingFang SC", serif; font-size: 28px; line-height: 1.5; margin: 10px 0 0; overflow-wrap: anywhere; }
.library-featured-description { margin: 12px 0 0; max-width: 620px; font-size: 14px; line-height: 1.9; color: #5b6c60; white-space: pre-line; overflow-wrap: anywhere; }
.library-featured-read { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 13px; font-size: 13px; border-bottom: 1px solid #c0cdbf; }
.library-featured-read svg { width: 17px; height: 17px; }
@media (max-width: 700px) {
  .library-intro { padding-top: 28px; padding-bottom: 19px; }
  .library-intro h1 { font-size: 32px; letter-spacing: 1px; }
  .library-kicker { font-size: 8px; margin-bottom: 12px; }
  .library-lead { font-size: 12px; margin-top: 10px; }
  .library-featured { padding-bottom: 23px; margin-bottom: 23px; }
  .library-featured-stage { grid-template-columns: 22px minmax(0, 1fr) 22px; min-height: 215px; margin-left: -12px; margin-right: -12px; }
  .library-featured-arrow { width: 44px; transform: translateX(-11px); }
  .library-featured-arrow svg { width: 15px; height: 15px; }
  .library-featured-rail { min-height: 215px; gap: 4px; padding: 17px 14px 24px; }
  .library-featured-book { height: 168px; flex-basis: 29px; width: 29px; }
  .library-featured-book[aria-pressed="true"] { flex-basis: 122px; width: 122px; }
  .library-featured-solid { width: 120px; height: 168px; transform-origin: 10px center; }
  .library-featured-front { transform: translateZ(10px); }
  .library-featured-spine { width: 20px; left: -10px; padding-left: 4px; padding-right: 4px; }
  .library-featured-spine > span { font-size: 11px; letter-spacing: 1px; }
  .library-featured-pages { right: -10px; width: 20px; }
  .library-featured-preview { gap: 6px; padding-left: 15px; padding-right: 15px; }
  .library-featured-sample { flex-basis: 22px; height: 162px; }
  .library-featured-sample--open { flex-basis: 110px; width: 110px; height: 168px; margin-right: 3px; }
  .library-featured-sample--open::before { top: 35px; left: 19px; right: 16px; height: 53px; }
  .library-featured-sample--open::after { left: 21px; right: 20px; bottom: 35px; }
  .library-featured-empty { font-size: 11px; }
  .library-featured-empty > span { font-size: 9px; }
  .library-featured-details { padding-top: 19px; }
  .library-featured-details h2 { font-size: 23px; margin-top: 8px; }
  .library-featured-meta { font-size: 10px; }
  .library-featured-description { font-size: 13px; line-height: 1.85; }
  .library-featured-read { font-size: 12px; }
}
@media (max-width: 350px) {
  .library-featured-stage { margin-left: -7px; margin-right: -7px; }
  .library-featured-preview { gap: 5px; padding-left: 6px; padding-right: 6px; }
  .library-featured-sample { flex-basis: 18px; height: 151px; }
  .library-featured-sample--open { flex-basis: 99px; width: 99px; height: 158px; }
  .library-featured-book { height: 158px; }
  .library-featured-solid { width: 113px; height: 158px; }
  .library-featured-book[aria-pressed="true"] { flex-basis: 115px; width: 115px; }
}
@media (prefers-reduced-motion: reduce) {
  .library-featured-book, .library-featured-solid { transition: none; }
  .library-featured-rail { scroll-behavior: auto; }
}

/* Quiet, edge-to-edge reader. Original pages stay whole, never object-fit:cover. */
body.library-reading { overflow: hidden; }
.library-reader { width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; background: #edeae2; }
.library-reader[open] { display: flex; flex-direction: column; }
.library-reader > .reader-header { position: relative; z-index: 4; min-height: 76px; padding: calc(10px + env(safe-area-inset-top, 0px)) 24px 10px; gap: 16px; background: #f9f7f0; border-bottom: 1px solid #dcded4; }
.reader-heading { text-align: center; flex: 1; min-width: 0; }
.library-reader .reader-heading h2 { font-family: "Songti SC", "STSong", serif; margin: 0 0 4px; font-size: 19px; letter-spacing: .5px; }
.library-reader .reader-heading small { display: block; color: #63736a; font-size: 11px; }
.library-reader #reader-close, .library-reader #reader-contents-toggle { display: flex; align-items: center; justify-content: center; gap: 5px; width: auto; min-width: 64px; height: 44px; padding: 0 2px; border: 0; border-radius: 0; background: transparent; color: #47615d; font-size: 12px; }
.reader-header button svg { width: 20px; height: 20px; }
.reader-toolbar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 24px; min-height: 51px; }
.reader-toolbar > p { min-width: 0; font-size: 12px; color: #556b63; line-height: 1.5; margin: 0; }
.reader-toolbar > div { display: flex; gap: 10px; flex-shrink: 0; }
.reader-toolbar button { display: flex; align-items: center; gap: 4px; border: 1px solid #cfd6cb; background: #faf8f2; color: #405c55; font-size: 11px; border-radius: 5px; min-height: 34px; padding: 5px 10px; }
.reader-toolbar button[aria-pressed="true"] { border-color: #78968b; background: #dfe9dd; }
.reader-toolbar svg { width: 14px; height: 14px; }
.library-reader .reader-page { min-height: 0; padding: 10px 30px; overflow: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; }
.library-reader .reader-page img { flex-shrink: 0; width: 100%; height: 100%; max-width: 1400px; max-height: 100%; object-fit: contain; filter: drop-shadow(0 4px 8px #364d3920); user-select: none; -webkit-user-drag: none; }
.library-reader .reader-page[data-zoom="true"] { display: block; touch-action: pan-x pan-y pinch-zoom; }
.library-reader .reader-page[data-zoom="true"] img { width: 200%; max-width: none; height: auto; max-height: none; margin: 0; }
.reader-hint { flex-shrink: 0; min-height: 24px; margin: 0; padding: 4px 16px; text-align: center; font-size: 10px; line-height: 1.6; color: #67776d; }
.library-reader > .reader-footer { display: block; padding: 0 24px calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 0; background: #f9f7f0; }
.reader-footer > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; }
.reader-footer progress { display: block; appearance: none; width: 100%; height: 2px; border: 0; background: #dbe0d5; color: #779b87; }
.reader-footer progress::-webkit-progress-bar { background: #dbe0d5; }
.reader-footer progress::-webkit-progress-value { background: #779b87; }
.reader-footer progress::-moz-progress-bar { background: #779b87; }
.library-reader .reader-footer button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 0; border: 0; border-radius: 0; background: transparent; color: #3e6254; font-size: 12px; }
.reader-footer button svg { width: 23px; height: 23px; }
.library-reader .reader-footer span { color: #4f695b; font-size: 12px; }
.reader-contents { position: absolute; z-index: 3; top: calc(76px + env(safe-area-inset-top, 0px)); right: 0; width: min(360px, 100%); max-height: calc(100dvh - 150px); overflow: auto; background: #faf8f1; padding: 12px 24px 20px; border: 1px solid #d4dcd0; border-top: 0; box-shadow: -7px 14px 24px #344b4220; }
.reader-contents button { display: block; width: 100%; text-align: left; min-height: 44px; padding: 10px 8px; border: 0; border-bottom: 1px solid #e1e4d9; background: transparent; color: #4c655a; font-size: 13px; line-height: 1.6; }
.reader-contents button[aria-current="page"] { color: #254d41; font-weight: 650; background: #e9eddf; }
@media (max-width: 600px) {
  .library-reader > .reader-header { gap: 8px; padding-left: 14px; padding-right: 14px; }
  .library-reader .reader-heading h2 { font-size: 17px; }
  .library-reader .reader-heading small { font-size: 10px; }
  .library-reader #reader-close, .library-reader #reader-contents-toggle { min-width: 52px; }
  .reader-toolbar { padding: 8px 16px; min-height: 49px; gap: 8px; }
  .reader-toolbar > p { font-size: 11px; }
  .reader-toolbar > div { gap: 6px; }
  .reader-toolbar button { padding: 6px 8px; }
  .library-reader .reader-page { padding: 6px 12px; }
  .library-reader > .reader-footer { padding-left: 20px; padding-right: 20px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .library-reader > .reader-header { min-height: 54px; padding-top: 3px; padding-bottom: 3px; }
  .library-reader .reader-heading small, .reader-hint { display: none; }
  .reader-toolbar { min-height: 34px; padding-top: 2px; padding-bottom: 2px; }
  .reader-toolbar button { min-height: 30px; }
  .reader-contents { top: 54px; max-height: calc(100dvh - 75px); }
  .library-reader .reader-page { padding-top: 2px; padding-bottom: 2px; }
  .library-reader > .reader-footer { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .reader-footer > div { padding-top: 0; }
}