html, body { height: auto; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }

.library-page {
  display: flex; flex-direction: column;
  width: 100%; max-width: 100%;
  min-height: 100vh; min-height: 100dvh;
  overflow-x: hidden;
  background: #fefcf4 url('marketing-assets/About Background_2.png') center bottom / 100% auto no-repeat;
}

.library-hero {
  position: relative;
  flex: 0 0 auto;
  padding: clamp(16px, 3.6vh, 36px) clamp(18px, 6.4vw, 110px) clamp(120px, 18vh, 180px);
  background: url('marketing-assets/Library Page_Top_2.png') center top / cover no-repeat;
}
.library-hero .topbar { position: relative; z-index: 2; }

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: clamp(28px, 6vh, 72px) auto 0;
  text-align: center;
}
.hero-description {
  position: relative;
}
.hero-description::before {
  content: '';
  pointer-events: none;
  position: absolute;
  z-index: 0;
  left: -18%; right: -18%; top: -42%; bottom: -28%;
  background: radial-gradient(ellipse at center, rgb(255 255 255 / 0.78) 0%, rgb(255 255 255 / 0.55) 42%, rgb(255 255 255 / 0) 72%);
}
.hero-description > * {
  position: relative;
  z-index: 1;
}
.hero-copy h1 {
  margin: 0;
  font-family: 'Baloo 2', cursive;
  font-size: clamp(32px, 4.2vw, 56px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: #002b43;
  text-wrap: unset;
  overflow-wrap: break-word;
}
.title-break { display: inline; }
.hero-body {
  margin: 12px auto 0;
  max-width: 620px;
  font-size: clamp(14px, 1.15vw, 18px);
  font-weight: 600;
  line-height: 1.5;
  color: #173f60;
}

.wave-divider {
  position: absolute;
  left: 0; right: -1px; bottom: -1px;
  width: 100%; height: 42px;
  display: block;
}

.library-lower {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.songs {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(20px, 4vh, 40px) clamp(24px, 8vw, 120px) 0;
  text-align: center;
}
.songs h2 {
  margin: 0;
  font-family: 'Baloo 2', cursive;
  font-size: clamp(22px, 2.4vw, 32px);
  color: #002b43;
}
.songs-intro {
  max-width: 680px;
  margin: 10px auto 0;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 600;
  line-height: 1.45;
  color: #173f60;
}

.songs-table-wrap {
  width: 100%;
  max-width: 860px;
  margin: clamp(22px, 3.6vh, 36px) auto 0;
  padding: 10px 8px 6px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 10px 28px rgb(16 84 115 / 0.08);
}
.songs-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  table-layout: fixed;
}
.col-song { width: 46%; }
.col-level { width: 24%; }
.col-skills { width: 30%; }
.songs-table th,
.songs-table td {
  padding: 14px 22px;
  font-size: clamp(13px, 1vw, 16px);
  vertical-align: middle;
}
.songs-table thead th {
  padding-top: 16px;
  padding-bottom: 12px;
  font-size: clamp(11px, 0.8vw, 13px);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6a849c;
}
.songs-table tbody th {
  padding-left: 52px;
  font-weight: 800;
  color: #087a9d;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2334bdd0' d='M10 4.5v11.16A3.2 3.2 0 0 0 8.4 15.3c-1.77 0-3.2 1.23-3.2 2.75S6.63 20.8 8.4 20.8c1.72 0 3.12-1.16 3.2-2.62V9.15l8.4-1.9v6.51a3.2 3.2 0 0 0-1.6-.35c-1.77 0-3.2 1.23-3.2 2.75s1.43 2.75 3.2 2.75c1.77 0 3.2-1.23 3.2-2.75V3.2L10 4.5Z'/%3E%3C/svg%3E") 22px center / 18px 18px no-repeat;
}
.songs-table tbody td:nth-child(2) {
  font-style: italic;
  font-weight: 700;
  color: #5a7893;
}
.songs-table tbody td:nth-child(3) {
  font-weight: 600;
  color: #35577a;
}
.songs-table tbody tr + tr th,
.songs-table tbody tr + tr td {
  border-top: 1px solid #e7eef4;
}
.songs-note {
  margin: 16px 0 0;
  font-size: clamp(12px, 0.9vw, 14px);
  font-weight: 700;
  font-style: italic;
  color: #5a7893;
}

.library-cta {
  flex: 0 0 auto;
  margin-top: clamp(24px, 4vh, 40px);
  padding: clamp(16px, 3vh, 32px) clamp(24px, 8vw, 120px) clamp(88px, 14vh, 160px);
  text-align: center;
}
.library-cta-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 22px;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 22px;
  border-radius: 100px;
  background: rgb(196 236 247 / 0.72);
}
.library-cta-banner h2 {
  margin: 0;
  font-family: 'Baloo 2', cursive;
  font-size: clamp(20px, 2vw, 28px);
  color: #002b43;
}
.cta-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 100px;
  padding: 10px 22px;
  background: #34bdd0;
  color: white;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.cta-play:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgb(16 84 115 / 0.15);
}
.cta-arrow {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-top: 1px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}
.library-tagline {
  margin: 18px 0 0;
  font-size: clamp(14px, 1.1vw, 18px);
  font-weight: 800;
  font-style: italic;
  color: #34bdd0;
}
.tagline-heart {
  display: inline-block;
  margin-left: 4px;
  font-style: normal;
}

@media (max-width: 1050px) {
  .library-hero {
    padding-bottom: 140px;
    background-size: 170% auto;
    background-position: center 8%;
  }
  .hero-copy { max-width: 640px; margin-top: 36px; }
  .hero-copy h1 { font-size: 40px; }
  .hero-body { font-size: 16px; line-height: 1.55; }
  .hero-description::before { inset: -20px -28px; }
  .wave-divider { height: 60px; }
}

@media (max-width: 700px) {
  .library-hero {
    padding: max(12px, env(safe-area-inset-top)) 12px 88px;
    background-size: 280% auto;
    background-position: center 10%;
  }
  .hero-copy { max-width: 100%; margin-top: 24px; padding-inline: 12px; }
  .hero-copy h1 { font-size: clamp(26px, 7.4vw, 32px); line-height: 1.15; }
  .title-break { display: block; }
  .hero-body { font-size: 15px; padding-inline: 4px; }
  .desktop-break { display: none; }
  .hero-description::before { top: -16px; right: 0; bottom: -16px; left: 0; }
  .wave-divider { height: 44px; }
  .songs { padding-inline: 16px; max-width: 100%; }
  .songs-intro { padding-inline: 8px; }
  .songs-table-wrap { max-width: 100%; padding: 8px 10px 4px; border-radius: 22px; }
  .songs-table,
  .songs-table colgroup,
  .songs-table col,
  .songs-table thead,
  .songs-table tbody,
  .songs-table tr,
  .songs-table tbody th,
  .songs-table td {
    display: block;
    width: 100%;
    max-width: 100%;
  }
  .songs-table colgroup,
  .songs-table col,
  .songs-table thead { display: none; }
  .songs-table tbody th,
  .songs-table tbody td {
    padding: 0;
    border: 0;
  }
  .songs-table tbody tr {
    padding: 14px 8px;
  }
  .songs-table tbody tr + tr {
    border-top: 1px solid #e7eef4;
  }
  .songs-table tbody tr + tr th,
  .songs-table tbody tr + tr td { border-top: 0; }
  .songs-table tbody th {
    margin-bottom: 6px;
    padding-left: 40px;
    font-size: 15px;
    background-position: 8px center;
  }
  .songs-table tbody td {
    padding-left: 40px;
    font-size: 13px;
    line-height: 1.4;
  }
  .songs-table tbody td + td { margin-top: 2px; }
  .library-cta { padding-inline: 16px; padding-bottom: 120px; }
  .library-cta-banner {
    flex-direction: column;
    border-radius: 28px;
    padding: 18px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-play { transition: none; }
}