.library-hero,
.library-toc,
.library-nav-card {
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface-4, #fff) 92%, transparent);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .06);
}

.library-hero {
  padding: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: 1.5rem;
}

.library-kicker {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .75rem;
  opacity: .72;
  font-weight: 700;
}

.library-hero h1 {
  margin: .45rem 0 .65rem;
  font-size: clamp(2rem, 6vw, 4.6rem);
  line-height: 1;
}

.library-lead {
  max-width: 72ch;
  font-size: 1.05rem;
  line-height: 1.75;
  opacity: .86;
}

.library-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1rem;
}

.library-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 999px;
  padding: .38rem .7rem;
  font-size: .9rem;
  opacity: .88;
  
}

.library-chapter-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 56px;
}

a.library-pill, .chapter-nav-center a {
  color: var(--paper);
  text-decoration-color: color-mix(in srgb, var(--vermillion) 58%, transparent);
  text-underline-offset: 0.18em;
}

.library-toc {
  padding: clamp(1rem, 3vw, 1.75rem);
}

.library-toc h2 {
  margin-top: 0;
}

.library-list {
  display: grid;
  gap: .85rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.library-list a, .library-list .library-list-disabled {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  background: color-mix(in srgb, currentColor 5%, transparent);
}

.library-list-disabled {
  opacity: .6;
  pointer-events: none;
}

.library-list a:hover, .library-list .library-list-disabled:hover {
  background: color-mix(in srgb, currentColor 9%, transparent);
}

.library-list-title {
  font-weight: 700;
}

.library-list-meta {
  opacity: .68;
  white-space: nowrap;
}

.chapter-reader .result-content p {
  content-visibility: auto;
  contain-intrinsic-size: auto 180px;
  margin: 0 0 1.4rem;
  line-height: 3.15;
}

.chapter-reader .result-content {
  font-size: clamp(1.05rem, 2.2vw, 1.28rem);
}

.chapter-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0;
}

.chapter-nav-center {
  text-align: center;
  opacity: .78;
}

.chapter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 999px;
  padding: .68rem 1rem;
  text-decoration: none;
  color: inherit;
  background: color-mix(in srgb, currentColor 5%, transparent);
}

.chapter-button:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.chapter-button[aria-disabled="true"] {
  visibility: hidden;
  pointer-events: none;
}

.chapter-heading-card {
  padding: 1rem 1.25rem;
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: 20px;
  margin-bottom: 1rem;
  background: color-mix(in srgb, currentColor 4%, transparent);
}

.chapter-heading-card h1 {
  margin: .25rem 0 0;
  font-size: clamp(1.8rem, 4vw, 3rem);
}

.word-popup {
  z-index: 9998;
}

.akusento-report-dialog {
  z-index: 9999;
}

@media (max-width: 700px) {
  .library-list a {
    display: block;
  }

  .library-list-meta {
    display: block;
    margin-top: .35rem;
  }

  .chapter-nav {
    align-items: stretch;
  }

  .chapter-button {
    padding-inline: .75rem;
  }
}

.back-to-library {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
  padding-bottom: 15px;
}

.back-to-library:hover {
  color: var(--accent);
}

html.i18n-pending [data-i18n],
html.i18n-pending [data-library-i18n],
html.i18n-pending [data-parser-i18n] {
  visibility: hidden;
}