/* The reading pages: /stories, /science, /islamic and one page per story or
   topic (drawn by the API from what is live on the dashboard:
   backend/src/site/library/). The same look as the rest of the site: cream
   ground, warm orange buttons, pastel tints and his 3D pictures. Loaded after
   site.css, whose tokens it uses. */

@font-face { font-family: "Noto Naskh Arabic"; src: url("/fonts/notonaskharabic_regular.ttf") format("truetype"); font-weight: 400 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }

/* Buttons and boxes here set their own display, which would win over the hidden attribute. */
[hidden] { display: none !important; }
.ic { width: 20px; height: 20px; flex: none; }
.lib { display: block; padding-bottom: 72px; }
[lang="ar"] { font-family: "Noto Naskh Arabic", "Geeza Pro", "Arial", serif; }
.tone-peach { --t-bg: var(--peach-tint); --t-ink: var(--peach); }
.tone-orange { --t-bg: var(--orange-tint); --t-ink: var(--orange-deep); }
.tone-blue { --t-bg: var(--blue-tint); --t-ink: var(--blue); }
.tone-green { --t-bg: var(--green-tint); --t-ink: var(--green); }
.tone-yellow { --t-bg: var(--yellow-tint); --t-ink: var(--yellow); }
.tone-pink { --t-bg: var(--pink-tint); --t-ink: var(--pink); }
.tone-purple { --t-bg: var(--purple-tint); --t-ink: var(--purple); }
.tone-teal { --t-bg: var(--teal-tint); --t-ink: var(--teal); }

/* ---- the banner at the top of a list: his picture, whole, with the words straight on its quiet side.
   From 1100px the words sit on the picture and grow and shrink with it (--u is one pixel of the
   banner at its full 1160px), so they always cover the same part of it; below that the picture
   comes first, whole, and the words follow it. */
.lib-hero { padding: 22px 0 8px; }
.lib-banner { --u: min(1px, calc((100vw - 40px) / 1160)); position: relative; border-radius: 30px; overflow: hidden; background: var(--card); box-shadow: var(--shadow-lg); isolation: isolate; }
.lib-banner picture, .lib-banner-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; }
.lib-banner::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--shade, none); }
.lib-banner-copy { position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: var(--copy-w, 40%); padding: calc(20 * var(--u)) 0 calc(20 * var(--u)) calc(44 * var(--u)); display: flex; flex-direction: column; justify-content: center; }
.lib-banner-copy .eyebrow { width: fit-content; margin: 0 0 calc(10 * var(--u)); padding: calc(5 * var(--u)) calc(12 * var(--u)) calc(4 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, .86); box-shadow: 0 6px 16px -10px rgba(90, 40, 0, .45); font-size: calc(12.5 * var(--u)); line-height: 1.2; letter-spacing: .1em; text-shadow: none; }
.lib-banner h1 { font-size: calc(58 * var(--u)); line-height: .98; letter-spacing: -.018em; }
.lib-banner h1 .hl-word { display: block; width: fit-content; padding-bottom: .05em; }
.lib-h1-bn { margin: calc(6 * var(--u)) 0 0; font: 700 calc(23 * var(--u))/1.4 var(--display); color: var(--orange-deep); }
.lib-lead { margin: calc(8 * var(--u)) 0 0; font-size: calc(15.5 * var(--u)); line-height: 1.55; color: var(--ink-soft); text-wrap: balance; }
.lib-lead[lang="bn"] { margin-top: calc(2 * var(--u)); font-size: calc(14.5 * var(--u)); line-height: 1.7; }
.lib-perks { list-style: none; margin: calc(16 * var(--u)) 0 0; padding: 0; display: flex; gap: calc(16 * var(--u)); width: max-content; }
.lib-perks li { display: flex; align-items: center; gap: calc(9 * var(--u)); }
.lib-perk-t { font-weight: 700; font-size: calc(13 * var(--u)); line-height: 1.25; color: var(--ink); }
.lib-perks small { display: block; margin-top: 1px; font-weight: 400; font-size: calc(11.5 * var(--u)); line-height: 1.45; color: var(--ink-soft); }
.lib-perk-ic { display: grid; place-items: center; width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; flex: none; background: var(--perk, var(--btn)); color: var(--perk-ink, #FFFFFF); box-shadow: 0 0 0 3px rgba(255, 255, 255, .92), 0 8px 16px -8px rgba(90, 40, 0, .6); }
.lib-perk-ic .ic { width: 53%; height: 53%; }
.lib-perks .is-orange { --perk: var(--btn); --perk-tint: var(--orange-tint); }
.lib-perks .is-yellow { --perk: var(--hl); --perk-ink: var(--hl-ink); --perk-tint: var(--yellow-tint); }
.lib-perks .is-green { --perk: var(--green-solid); --perk-tint: var(--green-tint); }
.lib-perks .is-pink { --perk: var(--pink-solid); --perk-tint: var(--pink-tint); }
.lib-perks .is-blue { --perk: var(--blue-solid); --perk-tint: var(--blue-tint); }
.lib-perks .is-teal { --perk: var(--teal-solid); --perk-tint: var(--teal-tint); }
/* His hand-lettered line, with a brush stroke in the app's yellow under it; never over a face. */
.lib-scribble { position: absolute; z-index: 2; right: 3.5%; top: 9%; margin: 0; transform: rotate(-7deg); font: 700 calc(36 * var(--u))/1.02 var(--display); color: #FFFFFF; text-shadow: 0 2px 0 rgba(90, 40, 0, .3), 0 6px 20px rgba(0, 0, 0, .35); text-align: center; pointer-events: none; }
.lib-scribble span { display: block; }
.lib-scribble-line { position: absolute; right: -4%; bottom: -.5em; width: 78%; height: auto; color: var(--hl); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
/* The daytime pictures: the sky behind the words goes soft and bright, like morning haze, and
   fades into the sharp picture; the words stay dark, as in his pages, with a white glow. */
.is-stories .lib-banner::before, .is-science .lib-banner::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .6) 30%, rgba(255, 255, 255, .38) 40%, rgba(255, 255, 255, 0) 52%);
  -webkit-backdrop-filter: blur(12px) saturate(1.6); backdrop-filter: blur(12px) saturate(1.6);
  -webkit-mask-image: linear-gradient(90deg, #000 34%, transparent 52%); mask-image: linear-gradient(90deg, #000 34%, transparent 52%);
}
.is-stories .lib-banner-copy, .is-science .lib-banner-copy { text-shadow: 0 0 16px rgba(255, 255, 255, .9), 0 0 4px rgba(255, 255, 255, .6); }
.lib-banner-copy .hl-word { text-shadow: none; background-image: linear-gradient(90deg, var(--orange-deep), var(--orange-dark)); }
.is-stories .lib-perks small, .is-science .lib-perks small { color: var(--ink); }
/* Stories, as in his page: one big word, and what it is for under it. */
.is-stories .lib-banner { --copy-w: 36%; }
.is-stories .lib-banner h1 { font-size: calc(84 * var(--u)); }
.is-stories .lib-banner h1 .hl-word { margin-top: calc(2 * var(--u)); font-size: .35em; letter-spacing: -.01em; }
.is-stories .lib-scribble { left: 43%; right: auto; top: 6%; }
.is-science .lib-banner { --copy-w: 38%; }
.is-science .lib-scribble { top: 5%; }
.is-science .lib-scribble-line { width: 70%; }
/* The night picture: the words sit on a dark side, in white and the app's yellow. */
.is-islamic .lib-banner { --copy-w: 45%; --shade: linear-gradient(90deg, rgba(20, 16, 44, .92) 0%, rgba(20, 16, 44, .82) 30%, rgba(20, 16, 44, .45) 45%, rgba(20, 16, 44, 0) 60%); }
.is-islamic .lib-banner-copy h1, .is-islamic .lib-perk-t { color: #FFFFFF; }
.is-islamic .lib-banner-copy .eyebrow, .is-islamic .lib-h1-bn { color: #FFD66B; }
.is-islamic .lib-banner-copy .eyebrow { background: rgba(255, 214, 107, .12); box-shadow: inset 0 0 0 1px rgba(255, 214, 107, .45); }
.is-islamic .lib-banner-copy .hl-word { background: none; -webkit-text-fill-color: #FFC300; color: #FFC300; }
.is-islamic .lib-lead { color: #EDE7FF; }
.is-islamic .lib-perks small { color: #FFFFFF; }
.is-islamic .lib-scribble { top: 4%; right: 2.5%; font-size: calc(32 * var(--u)); }
.is-islamic .lib-scribble-line { width: 64%; right: -2%; }
/* Below 1100px: the picture whole on top, the words under it on a band that carries its colours on
   (the meadow's green by day, the night's blue for Islamic): the title beside the two leads, and
   the three perks in a row across the band; on a phone one column, the perks as three tiles. */
@media (max-width: 1099.98px) {
  .lib-banner::before, .lib-scribble { display: none; }
  .lib-banner-copy { position: static; width: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-areas: "head en" "head bn" "perks perks"; align-items: center; column-gap: 40px; padding: 28px 34px 26px; background: linear-gradient(180deg, #EAF5E1 0%, #F7FBF2 42%, var(--card) 100%); }
  .lib-banner-head { grid-area: head; }
  .lib-banner-body { display: contents; }
  .is-stories .lib-banner-copy, .is-science .lib-banner-copy { text-shadow: none; }
  .lib-banner-copy .eyebrow { margin-bottom: 10px; padding: 5px 12px 4px; font-size: 12.5px; background: var(--card); }
  .lib-banner h1 { font-size: clamp(34px, 4.4vw, 46px); }
  .is-stories .lib-banner h1 { font-size: clamp(50px, 6.6vw, 68px); }
  .is-stories .lib-banner h1 .hl-word { margin-top: 2px; }
  .lib-h1-bn { margin-top: 6px; font-size: 21px; }
  .lib-lead { grid-area: en; align-self: end; margin: 0; font-size: 16px; }
  .lib-lead[lang="bn"] { grid-area: bn; align-self: start; margin-top: 6px; font-size: 15px; }
  .lib-perks { grid-area: perks; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; width: auto; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(38, 34, 43, .08); }
  .lib-perks li { gap: 10px; }
  .lib-perk-t { font-size: 14px; }
  .lib-perks small { font-size: 12.5px; }
  .lib-perk-ic { width: 38px; height: 38px; }
  .is-islamic .lib-banner-copy { background: radial-gradient(90% 120% at 50% -30%, rgba(255, 195, 0, .14), rgba(255, 195, 0, 0) 60%), #1E1840; }
  .is-islamic .lib-perks { border-top-color: rgba(255, 255, 255, .12); }
}
@media (max-width: 760px) {
  .lib-banner-copy { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "en" "bn" "perks"; padding: 22px 20px; }
  .lib-banner h1 { font-size: clamp(32px, 8.6vw, 44px); }
  .is-stories .lib-banner h1 { font-size: clamp(48px, 13vw, 64px); }
  .lib-lead { margin-top: 14px; }
  .lib-perks { gap: 8px; margin-top: 16px; padding-top: 0; border-top: 0; }
  .lib-perks li { flex-direction: column; justify-content: flex-start; gap: 8px; padding: 12px 6px 11px; border-radius: 18px; background: var(--perk-tint, var(--orange-tint)); text-align: center; }
  .lib-perk-t { font-size: 13px; }
  .lib-perks small { font-size: 11.5px; }
  .lib-perk-ic { width: 36px; height: 36px; }
  .is-islamic .lib-perks li { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
}
@media (max-width: 560px) {
  .lib-hero { padding-top: 14px; }
  .lib-hero .wrap, .lib-browse, .lib-band { padding-left: 14px; padding-right: 14px; }
  .lib-banner { border-radius: 24px; }
}

/* ---- categories: a row of chips with his pictures; the chosen one is filled */
.lib-browse { padding-top: 22px; }
.lib-cats { display: flex; gap: 12px; overflow-x: auto; padding: 6px 4px 14px; margin: 0 -4px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.lib-cat { position: relative; flex: 1 0 128px; max-width: 190px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 124px; padding: 14px 10px 12px; border-radius: 22px; background: var(--card); border: 1.5px solid var(--line); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; text-align: center; transition: transform .15s ease, border-color .15s ease; }
.lib-cat:hover { transform: translateY(-2px); border-color: #F3C9AE; }
.lib-cat-name { font-weight: 700; font-size: 14.5px; line-height: 1.25; }
.lib-cat-name small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.lib-cat-name .lib-cat-sub { font-size: 12px; }
.lib-cat-count { position: absolute; top: 8px; right: 10px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ground-deep); color: var(--muted); font-size: 12px; font-weight: 700; line-height: 22px; }
.lib-cat.is-on { background: var(--btn); border-color: transparent; color: #FFFFFF; box-shadow: 0 16px 28px -14px rgba(184, 58, 10, .85); }
.lib-cat.is-on .lib-cat-name small { color: #FFE6D6; }
.lib-cat.is-on .lib-cat-count { background: rgba(255, 255, 255, .22); color: #FFFFFF; }
.lib-cat-pic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--ground-deep); flex: none; }
.lib-cat-pic img { width: 46px; height: 46px; object-fit: contain; }
.lib-cat-pic.is-icon { background: var(--t-bg); color: var(--t-ink); }
.lib-cat-pic.is-icon .ic { width: 26px; height: 26px; }
.lib-cat.is-on .lib-cat-pic { background: rgba(255, 255, 255, .92); }
.lib-cat-pic.is-sm { width: 26px; height: 26px; }
.lib-cat-pic.is-sm img { width: 22px; height: 22px; }
.lib-cat-pic.is-sm .ic { width: 15px; height: 15px; }

/* ---- the tools: age, language, order and a search box */
.lib-tools { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin: 8px 0 20px; }
.lib-field { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 6px 14px 6px 12px; border-radius: 18px; background: var(--card); border: 1.5px solid var(--line); box-shadow: var(--shadow); flex: 0 1 220px; cursor: pointer; }
.lib-field:focus-within { border-color: var(--orange-deep); }
.lib-field-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--orange-tint); color: var(--orange-deep); flex: none; }
.lib-field-box { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lib-field-label { font-size: 12px; font-weight: 700; letter-spacing: .4px; color: var(--muted); }
.lib-field select { appearance: none; -webkit-appearance: none; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%234A4453' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 16px no-repeat; font: 700 15.5px/1.3 var(--body); color: var(--ink); padding: 0 22px 0 0; min-height: 26px; cursor: pointer; width: 100%; }
.lib-field select:focus { outline: none; }
.lib-search { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; min-height: 58px; padding: 0 16px; border-radius: 18px; background: var(--card); border: 1.5px solid var(--line); box-shadow: var(--shadow); color: var(--muted); }
.lib-search:focus-within { border-color: var(--orange-deep); }
.lib-search input { border: 0; background: transparent; font: 400 16px/1.4 var(--body); color: var(--ink); width: 100%; min-height: 44px; }
.lib-search input:focus { outline: none; }
.lib-go { min-height: 58px; }
.lib-saved { display: inline-flex; align-items: center; gap: 8px; min-height: 58px; padding: 0 18px; border-radius: 18px; background: var(--card); border: 1.5px solid var(--line); box-shadow: var(--shadow); color: var(--ink); font: 700 15px/1 var(--body); cursor: pointer; }
.lib-saved .ic { color: var(--pink-solid); }
.lib-saved[aria-pressed="true"] { background: var(--pink-tint); border-color: var(--pink-solid); }
.lib-saved[aria-pressed="true"] .ic path { fill: var(--pink-solid); }
@media (max-width: 720px) {
  .lib-field { flex: 1 1 calc(50% - 6px); }
  .lib-search { flex-basis: 100%; }
}

/* ---- the grid of cards */
.lib-results.has-side { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.lib-count { margin: 0 0 12px; color: var(--muted); font-size: 15px; }
.lib-count strong { color: var(--ink); }
.lib-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.lib-grid.is-narrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lib-card { position: relative; }
.lib-card[hidden] { display: none; }
.lib-card-link { display: flex; flex-direction: column; height: 100%; border-radius: 24px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.lib-card-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.lib-card-pic { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: var(--t-bg, var(--ground-deep)); }
.lib-card-pic img, .lib-mini-pic img, .lib-row-box img, .lib-cover-box img { position: relative; z-index: 1; }
/* A photo is shown whole; the space around it is the same picture, softly blurred. */
.is-photo::before { content: ""; position: absolute; inset: -24px; background: var(--pic) center / cover no-repeat; filter: blur(16px) saturate(1.1); opacity: .75; }
.lib-card-pic.is-photo img { width: 100%; height: 100%; object-fit: contain; }
.lib-card-pic.is-art img, .lib-mini-pic.is-art img { width: 64%; height: 82%; object-fit: contain; }
.lib-card-pic.is-icon img, .lib-mini-pic.is-icon img { width: 38%; height: 50%; object-fit: contain; }
.lib-card-pic.is-empty .ic, .lib-mini-pic.is-empty .ic { width: 44px; height: 44px; color: var(--t-ink); }
.lib-min { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(38, 34, 43, .78); color: #FFFFFF; font-size: 13px; font-weight: 700; }
.lib-min .ic { width: 14px; height: 14px; }
.lib-lock { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgba(38, 34, 43, .82); color: #FFFFFF; font-weight: 700; font-size: 14px; }
.lib-lock .ic { width: 16px; height: 16px; }
.lib-card.is-plus .lib-card-pic img { filter: blur(3px) saturate(.9); }
.lib-card-body { display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 6px; }
.lib-card-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ground-deep); flex: none; }
.lib-card-icon img { width: 32px; height: 32px; object-fit: contain; }
.lib-card-icon.is-line { background: var(--t-bg); color: var(--t-ink); }
.lib-card-titles { flex: 1; min-width: 0; }
.lib-card-title { margin: 0; font: 700 18px/1.25 var(--display); color: var(--ink); padding-top: 2px; }
.lib-card-bn { display: block; margin-top: 2px; font-size: 15px; color: var(--ink-soft); }
.lib-card-go { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--orange-tint); color: var(--orange-deep); flex: none; }
.lib-card-go .ic { width: 18px; height: 18px; }
.lib-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 14px 16px 68px; margin-top: auto; }
.lib-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--blue-tint); color: var(--blue); font-size: 13px; font-weight: 700; }
.lib-tag .ic { width: 14px; height: 14px; }
.lib-tag.is-age { background: var(--pink-tint); color: var(--pink); }
.lib-tag.is-plus { background: var(--yellow-tint); color: var(--yellow); }
.lib-heart { position: absolute; top: 10px; right: 10px; z-index: 3; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--pink-solid); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5); cursor: pointer; }
.lib-heart .ic { width: 22px; height: 22px; }
.lib-heart[aria-pressed="true"] .ic path { fill: var(--pink-solid); }
/* "Read in": the list names each card in the language chosen. */
.lib-grid[data-lang="bn"] .lib-card-title { font-size: 0; line-height: 0; padding: 0; }
.lib-grid[data-lang="bn"] .lib-card-bn { margin: 0; font: 700 18px/1.5 var(--display); color: var(--ink); }
.lib-grid[data-lang="en"] .lib-card-bn { display: none; }
.lib-empty { display: grid; justify-items: center; gap: 12px; padding: 40px 20px; text-align: center; color: var(--ink-soft); }
.lib-empty[hidden] { display: none; }
.lib-empty p { margin: 0; font-weight: 700; }
.lib-empty p span { display: block; font-weight: 400; color: var(--muted); }
@media (max-width: 1180px) { .lib-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lib-grid.is-narrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) { .lib-results.has-side { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .lib-grid, .lib-grid.is-narrow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 520px) {
  .lib-grid, .lib-grid.is-narrow { grid-template-columns: 1fr; }
  .lib-tags { padding-left: 14px; }
}

/* ---- side boxes and the app card */
.lib-side { display: grid; gap: 18px; align-content: start; }
.lib-box { padding: 18px 18px 16px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.lib-box-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.lib-box-head h2 { font-size: 21px; line-height: 1.2; }
.lib-box-head a { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; font-weight: 700; font-size: 14.5px; text-decoration: none; }
.lib-box-head a .ic { width: 16px; height: 16px; }
.lib-quick { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lib-quick a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 4px; border-radius: 14px; color: var(--ink); text-decoration: none; }
.lib-quick a:hover { background: var(--ground-deep); }
.lib-quick-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--t-bg); color: var(--t-ink); font-weight: 700; font-size: 14px; flex: none; }
.lib-quick-t { flex: 1; font-weight: 700; font-size: 15px; line-height: 1.3; }
.lib-quick-t small { display: block; font-weight: 400; font-size: 13.5px; color: var(--muted); }
.lib-quick-m { font-size: 13px; color: var(--muted); white-space: nowrap; }
.lib-promo { position: relative; display: flex; align-items: flex-end; gap: 10px; overflow: hidden; padding: 26px 24px; border-radius: 28px; background: linear-gradient(135deg, #CF4A0E 0%, #A8360A 100%); color: #FFFFFF; box-shadow: var(--shadow-lg); }
.lib-promo::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.lib-promo-copy { position: relative; z-index: 1; flex: 1; }
.lib-promo h2 { color: #FFFFFF; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; }
.lib-promo p { margin: 8px 0 16px; color: #FFEADB; max-width: 520px; }
.lib-promo .btn-cta { background: #FFFFFF; color: var(--orange-dark); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .45); }
.lib-promo .btn-cta:hover { background: var(--orange-tint); }
.lib-promo .btn-cta .ic { width: 18px; height: 18px; }
.lib-promo-art { position: relative; z-index: 1; width: 150px; height: auto; margin: -10px -6px -26px 0; flex: none; }
.lib-promo.is-compact { padding: 20px 18px; border-radius: 24px; }
.lib-promo.is-compact h2 { font-size: 21px; }
.lib-promo.is-compact p { font-size: 14.5px; }
.lib-promo.is-compact .lib-promo-art { width: 104px; margin-bottom: -20px; }
.lib-band { margin-top: 40px; }
@media (max-width: 560px) { .lib-promo-art { width: 104px; } }

/* ---- one story or topic: the cover on top, whole, over a soft blur of itself */
.lib-cover { position: relative; overflow: hidden; isolation: isolate; background: var(--ground-deep); border-bottom: 1px solid var(--line); }
.lib-cover.is-photo::before { inset: -40px; opacity: .55; filter: blur(28px) saturate(1.15); z-index: -2; }
.lib-cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(255, 248, 239, .96) 0%, rgba(255, 248, 239, .82) 45%, rgba(255, 248, 239, .45) 100%); }
.lib-cover-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 36px; align-items: center; padding-top: 26px; padding-bottom: 34px; }
.lib-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 14px; padding: 0; font-size: 14px; color: var(--muted); }
.lib-crumbs li + li::before { content: "›"; margin: 0 8px; color: var(--muted); }
.lib-crumbs a { color: var(--ink-soft); font-weight: 700; text-decoration: none; }
.lib-crumbs a:hover { color: var(--orange-deep); text-decoration: underline; }
.lib-badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 5px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); font-weight: 700; font-size: 14px; color: var(--ink); }
.lib-badge .lib-cat-pic { background: var(--ground-deep); }
.lib-detail h1 { margin-top: 14px; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -.8px; }
.lib-detail h1 .lib-h1-bn { display: block; margin-top: 8px; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.4; color: var(--orange-deep); letter-spacing: 0; }
.lib-h1-ar { display: block; margin-top: 4px; font: 400 clamp(26px, 3vw, 36px)/1.6 "Noto Naskh Arabic", serif; color: var(--green); letter-spacing: 0; }
.lib-summary { margin: 14px 0 0; max-width: 560px; font-size: 18px; line-height: 1.6; color: var(--ink-soft); }
.lib-summary.lib-bn { margin-top: 6px; font-size: 16.5px; color: var(--muted); }
.lib-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; }
.lib-pills li { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); font-weight: 700; font-size: 15px; }
.lib-pills li .ic { color: var(--orange-deep); }
.lib-pills li.is-plus { background: var(--yellow-tint); color: var(--yellow); }
.lib-cover-pic { margin: 0; }
.lib-cover-box { position: relative; display: grid; place-items: center; min-height: 240px; border-radius: 28px; overflow: hidden; background: var(--t-bg, var(--card)); box-shadow: var(--shadow-lg); border: 4px solid #FFFFFF; }
.lib-cover-box.is-photo img { width: 100%; height: auto; max-height: 460px; object-fit: contain; }
.lib-cover-box.is-art img { width: 58%; height: auto; max-height: 360px; object-fit: contain; padding: 24px 0; }
.lib-cover-box.is-icon img { width: 30%; height: auto; padding: 60px 0; }
.lib-cover-box.is-empty .ic { width: 90px; height: 90px; color: var(--t-ink); margin: 80px 0; }
@media (max-width: 860px) {
  .lib-cover-grid { grid-template-columns: 1fr; gap: 18px; padding-top: 14px; }
  .lib-cover-pic { order: -1; }
  .lib-crumbs { order: -2; }
  .lib-cover::after { background: linear-gradient(180deg, rgba(255, 248, 239, .55) 0%, rgba(255, 248, 239, .94) 45%); }
}

/* ---- the tools under the cover: listen, the reading language, PDF, share, save */
.lib-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 18px; padding-bottom: 6px; }
.lib-actions[hidden] { display: none; }
.lib-actions-gap { flex: 1; }
.lib-langs { display: flex; flex-wrap: wrap; gap: 10px; }
.lib-act { display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 18px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--card); box-shadow: var(--shadow); color: var(--ink); font: 700 15.5px/1 var(--body); cursor: pointer; }
.lib-act:hover { border-color: #F3C9AE; }
.lib-act .ic { color: var(--orange-deep); }
.lib-act[aria-pressed="true"] { background: var(--orange-tint); border-color: var(--orange-deep); }
.lib-act.is-primary { background: var(--btn); color: #FFFFFF; border-color: transparent; box-shadow: 0 14px 26px -14px rgba(184, 58, 10, .85); padding: 0 22px; }
.lib-act.is-primary .ic { color: #FFFFFF; }
.lib-act.is-primary .ic path { fill: #FFFFFF; }
.lib-act[data-act="save"] .ic { color: var(--pink-solid); }
.lib-act[data-act="save"][aria-pressed="true"] .ic path { fill: var(--pink-solid); }
.lib-toast { position: fixed; left: 50%; bottom: 24px; z-index: 70; transform: translateX(-50%); padding: 12px 20px; border-radius: 14px; background: var(--ink); color: #FFFFFF; font-weight: 700; box-shadow: var(--shadow-lg); }
@media (max-width: 560px) {
  .lib-actions { gap: 8px; }
  .lib-act { padding: 0 14px; min-height: 46px; font-size: 14.5px; }
  .lib-actions-gap { display: none; }
}

/* ---- the reading: one row per page, step, card or verse */
.lib-columns { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; align-items: start; padding-top: 20px; }
.lib-reading { display: grid; gap: 22px; }
.lib-row { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: 24px; align-items: start; padding: 16px; border-radius: 26px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); scroll-margin-top: 90px; transition: box-shadow .2s ease, border-color .2s ease; }
.lib-row.no-pic { grid-template-columns: 1fr; padding: 20px 22px; }
.lib-row.is-playing { border-color: var(--orange-deep); box-shadow: 0 0 0 3px var(--orange-tint), var(--shadow-lg); }
.lib-row-pic { margin: 0; }
.lib-row-box { position: relative; display: grid; place-items: center; border-radius: 20px; overflow: hidden; background: var(--t-bg, var(--ground-deep)); }
.lib-row-box.is-photo img { width: 100%; height: auto; }
.lib-row-box.is-art img { width: 70%; height: auto; padding: 18px 0; }
.lib-row-box.is-icon img { width: 34%; height: auto; padding: 36px 0; }
.lib-row-title { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 10px; font-size: 22px; line-height: 1.25; }
.lib-num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--btn); color: #FFFFFF; font: 700 17px/1 var(--display); flex: none; padding-top: 2px; }
.lib-row-heads { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; }
.lib-row-heads .lib-bn { font-size: 19px; line-height: 1.5; color: var(--orange-deep); }
.lib-row-text p { margin: 0 0 12px; font-size: 17px; line-height: 1.7; }
.lib-row-text p.lib-bn { font-size: 17px; line-height: 1.85; color: var(--ink-soft); }
.lib-row-text p.lib-ar { font-size: 30px; line-height: 2.05; color: var(--green); text-align: right; }
.lib-roman { color: var(--muted); }
.lib-voices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.lib-say { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 16px 0 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--ground); color: var(--ink); font: 700 14.5px/1 var(--body); cursor: pointer; }
.lib-say .ic { width: 16px; height: 16px; color: var(--orange-deep); }
.lib-say .ic path { fill: currentColor; }
.lib-say.is-playing { background: var(--orange-tint); border-color: var(--orange-deep); }
.lib-print-note, .lib-print-mark { display: none; }
/* A picture's download copy, invisible over it: what a right click or a long
   press finds (render.js copyOver, site.js). The clean picture takes no
   clicks at all (site.css). Kept after the picture rules so it wins them. */
.lib-card-pic > img.dl, .lib-mini-pic > img.dl, .lib-row-box > img.dl, .lib-cover-box > img.dl, .lib-banner > img.dl { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; max-height: none; padding: 0; opacity: 0; pointer-events: auto; -webkit-touch-callout: default; }
.lib-banner > img.dl { z-index: 1; }

/* His logo small in the corner of every picture, new uploads included (Mr
   Mehedi, 2026-09-27). The picture stays clean: "Save image" gets its
   download copy instead (site.js, data-dl), and the PDF shows thin
   "CubieKids" all over it (print, below). */
.wm { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.wm::after { content: ""; position: absolute; right: 3%; bottom: 3%; width: clamp(24px, 12%, 72px); aspect-ratio: 1; background: url("/img/logo.webp?v=2") center / contain no-repeat; filter: drop-shadow(0 2px 4px rgba(40, 20, 0, .35)); }
.lib-card-pic > :not(img):not(.wm), .lib-mini-pic > :not(img):not(.wm) { z-index: 3; }
/* The reading language: both at first; "Read in English" or "বাংলায় পড়ুন" shows one. */
.lib-detail[data-read="en"] .lib-bn, .lib-detail[data-read="bn"] .lib-en { display: none; }
.lib-detail[data-read="en"] .lib-say[data-lang="bn"], .lib-detail[data-read="bn"] .lib-say[data-lang="en"] { display: none; }
.lib-detail[data-read="bn"] .lib-row-heads .lib-bn { color: var(--ink); font-size: 22px; }
.lib-detail[data-read="bn"] h1 .lib-h1-bn { display: block; }
@media (max-width: 1040px) { .lib-columns { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .lib-row { grid-template-columns: 1fr; gap: 14px; padding: 12px; }
  .lib-row-title { font-size: 20px; }
}

/* ---- the note (a story's moral, a topic's "Try it at home"), details, more */
.lib-note { display: flex; gap: 14px; padding: 18px; border-radius: 24px; background: var(--yellow-tint); border: 1px solid #F5DFA8; }
.lib-note img { width: 52px; height: 52px; flex: none; }
.lib-note h2 { font-size: 20px; line-height: 1.25; }
.lib-note h2 small { display: block; font: 700 15px/1.5 var(--display); color: var(--yellow); }
.lib-note p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; }
.lib-details { list-style: none; margin: 0; padding: 0; }
.lib-details li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; border-top: 1px solid var(--line); font-size: 15px; }
.lib-details li:first-child { border-top: 0; }
.lib-dt { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.lib-dt .ic { width: 18px; height: 18px; color: var(--orange-deep); }
.lib-dd { font-weight: 700; text-align: right; }
.lib-mini { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lib-mini a { display: grid; gap: 6px; color: var(--ink); text-decoration: none; }
.lib-mini h3 { font-size: 15.5px; line-height: 1.25; }
.lib-mini a:hover h3 { color: var(--orange-deep); }
.lib-mini .lib-tag { justify-self: start; font-size: 12px; }
.lib-mini-pic { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--t-bg, var(--ground-deep)); }
.lib-mini-pic.is-photo img { width: 100%; height: 100%; object-fit: contain; }
.lib-mini-pic .lib-min { font-size: 12px; padding: 2px 8px; left: 6px; bottom: 6px; }
.lib-locked { display: grid; justify-items: center; gap: 10px; padding: 40px 24px; border-radius: 28px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); text-align: center; }
.lib-locked-ic { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--yellow-tint); color: var(--yellow); }
.lib-locked-ic .ic { width: 34px; height: 34px; }
.lib-locked h2 { font-size: 26px; }
.lib-locked p { margin: 0; color: var(--ink-soft); }
.lib-locked .btn-cta { margin-top: 8px; }
.lib-locked .btn-cta .ic { width: 18px; height: 18px; }
.lib-missing-box { display: grid; justify-items: center; gap: 12px; padding: 70px 20px; text-align: center; }
.lib-missing-box p { margin: 0; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .lib-card-link:hover, .lib-cat:hover { transform: none; } }

/* ---- the lock's ways in: sign in, bKash, the app */
.lib-locked-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.lib-locked-actions .btn-cta, .lib-locked-actions .btn-line { gap: 8px; }
.lib-locked-actions .ic { width: 18px; height: 18px; }
.lib-locked-price { margin: 4px 0 0; font-weight: 700; color: var(--ink-soft); }
.lib-locked-price span { display: block; font-weight: 400; color: var(--muted); }
.lib-locked-how { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; text-decoration: none; }
.lib-locked-how .ic { width: 16px; height: 16px; }
.lib-locked p[lang="bn"] { color: var(--muted); }

/* ---- /account: one account for the app and the website */
.acc-page { padding-top: 34px; }
.acc-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; align-items: start; }
.acc-card { padding: 30px 28px; border-radius: 30px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.acc-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 10px; border-radius: 999px; background: var(--orange-tint); color: var(--orange-deep); font-weight: 700; font-size: 14px; }
.acc-badge .ic { width: 16px; height: 16px; }
.acc-card h1 { margin-top: 14px; font-size: clamp(34px, 4vw, 46px); line-height: 1.05; }
.acc-card h1 .lib-h1-bn { display: block; margin-top: 6px; font-size: 24px; color: var(--orange-deep); }
.acc-lead { margin: 12px 0 0; color: var(--ink-soft); }
.acc-lead[lang="bn"] { color: var(--muted); font-size: 15.5px; }
.acc-tabs { display: flex; gap: 6px; margin: 22px 0 16px; padding: 5px; border-radius: 18px; background: var(--ground-deep); }
.acc-tabs button { flex: 1; min-height: 46px; border: 0; border-radius: 14px; background: transparent; font: 700 15.5px/1 var(--body); color: var(--ink-soft); cursor: pointer; }
.acc-tabs button[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.acc-form { display: grid; gap: 14px; margin-top: 8px; }
.acc-field { display: grid; gap: 6px; }
.acc-field > span { font-weight: 700; font-size: 15px; }
.acc-field small { font-weight: 400; color: var(--muted); }
.acc-field input { min-height: 52px; padding: 0 16px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--ground); font: 400 17px/1.3 var(--body); color: var(--ink); }
.acc-field input:focus { outline: none; border-color: var(--orange-deep); background: #FFFFFF; }
.acc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.acc-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; cursor: pointer; }
.acc-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--orange-deep); flex: none; }
.acc-check small { display: block; color: var(--muted); }
.acc-submit { width: 100%; }
.acc-submit .ic { width: 18px; height: 18px; }
.acc-msg { display: grid; gap: 2px; margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; font-weight: 700; font-size: 15px; }
.acc-msg span[lang="bn"] { font-weight: 400; }
.acc-msg.is-bad { background: #FFE8E6; color: #9B1C1C; }
.acc-msg.is-good { background: var(--green-tint); color: var(--green); }
.acc-note { margin: 0; color: var(--ink-soft); }
.acc-note span { display: block; color: var(--muted); }
.acc-small { margin: 14px 0 0; font-size: 14.5px; color: var(--muted); }
.acc-small span { display: block; }
.acc-plan { display: flex; gap: 14px; align-items: flex-start; margin-top: 20px; padding: 18px; border-radius: 22px; background: var(--ground-deep); border: 1px solid var(--line); }
.acc-plan.is-plus { background: var(--green-tint); border-color: #BFE3CB; }
.acc-plan-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--card); color: var(--orange-deep); flex: none; }
.acc-plan.is-plus .acc-plan-ic { color: var(--green); }
.acc-plan h2 { font-size: 22px; line-height: 1.25; }
.acc-plan h2 small { font: 700 15px/1.4 var(--body); color: var(--green); }
.acc-plan h2 span { display: block; font: 700 16px/1.5 var(--display); color: var(--muted); }
.acc-plan p { margin: 6px 0 0; color: var(--ink-soft); font-size: 15.5px; }
.acc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.acc-actions .ic { width: 18px; height: 18px; }
.acc-code { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.acc-code h2 { font-size: 21px; }
.acc-code h2 span { display: block; font: 700 16px/1.5 var(--display); color: var(--muted); }
.acc-code p { margin: 8px 0 0; color: var(--ink-soft); font-size: 15.5px; }
.acc-code p[lang="bn"] { color: var(--muted); }
.acc-code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.acc-code-row .ic { width: 18px; height: 18px; }
.acc-code-value { padding: 10px 16px; border-radius: 12px; background: var(--ground-deep); border: 1px dashed #E3B893; font: 700 18px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .5px; user-select: all; }
.acc-signout { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--orange-deep); font: 700 15.5px/1 var(--body); cursor: pointer; }
.acc-signout .ic { width: 18px; height: 18px; }
.acc-how { padding: 26px 26px 18px; border-radius: 30px; background: var(--ground-deep); border: 1px solid var(--line); }
.acc-how h2 { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; }
.acc-how h2 span { display: block; margin-top: 4px; font: 700 18px/1.5 var(--display); color: var(--orange-deep); }
.acc-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.acc-steps li { display: flex; gap: 14px; padding: 16px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.acc-step-pic { position: relative; flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--ground-deep); }
.acc-step-pic img { width: 50px; height: 50px; object-fit: contain; }
.acc-step-n { position: absolute; left: -6px; top: -6px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--btn); color: #FFFFFF; font: 700 14px/1 var(--display); padding-top: 2px; }
.acc-steps h3 { font-size: 18.5px; line-height: 1.25; }
.acc-steps h3 span { display: block; font: 700 15.5px/1.5 var(--display); color: var(--muted); }
.acc-steps p { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.acc-steps p[lang="bn"] { color: var(--muted); }
.acc-steps b span { font-weight: 400; }
@media (max-width: 900px) { .acc-wrap { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .acc-card { padding: 22px 18px; border-radius: 24px; }
  .acc-how { padding: 20px 14px 12px; }
  .acc-pair { grid-template-columns: 1fr; }
  .acc-steps li { flex-direction: column; }
}

/* ---- print ("Download PDF"): the reading only, every picture whole */
@media print {
  @page { margin: 14mm; }
  body { background: #FFFFFF; font-size: 12pt; }
  .lib-actions, .lib-side, .lib-crumbs, .lib-voices, .lib-heart, .skip { display: none !important; }
  .lib-cover { background: none; border: 0; }
  .lib-cover::before, .lib-cover::after, .is-photo::before { display: none; }
  .lib-cover-grid, .lib-columns { display: block; padding: 0; }
  .lib-cover-box { box-shadow: none; border: 0; max-width: 60%; margin: 12px 0; }
  .lib-row { display: grid; grid-template-columns: 40% 1fr; box-shadow: none; break-inside: avoid; page-break-inside: avoid; border: 1px solid #E5D5C4; margin-bottom: 10px; }
  .lib-detail[data-read=""] .lib-bn, .lib-detail:not([data-read]) .lib-bn { display: block; }
  .lib-print-note { display: block; margin-top: 12px; color: #6D6577; font-size: 10pt; }
  .lib-print-note a { color: #C2410C; font-weight: 700; }
  /* The PDF: "CubieKids · cubiekids.tech" across every page, and at its foot
     where the browser allows it (Mr Mehedi, 2026-09-27). */
  @page { @bottom-center { content: "CubieKids · cubiekids.tech"; font: 700 9pt "Nunito", sans-serif; color: #C2410C; } }
  .lib-print-mark { display: grid; justify-items: center; position: fixed; top: 50%; left: 50%; z-index: 20; transform: translate(-50%, -50%) rotate(-30deg); pointer-events: none; color: rgba(194, 65, 12, .06); white-space: nowrap; }
  /* Thin "CubieKids" all over every picture, as in its download copy: drawn as
     an SVG, since a turned text layer prints as a black box in Chrome. */
  .wm::before { content: url("/img/wm-pattern.svg"); position: absolute; left: 0; top: 0; }
  .lib-print-mark span { font: 700 88pt/1 var(--display); }
  img.dl { display: none !important; }
  .lib-print-mark small { font: 700 26pt/1.2 var(--body); }
}