html { min-height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background-color: #000;
  background-image:
    radial-gradient(circle at top center, rgba(0, 145, 255, 0.10), transparent 35rem),
    url("../images/bluelines_black_background.png");
  background-repeat: no-repeat, repeat;
  background-size: auto, 512px 768px;
  color: #f2e7c9;
  font-family: "Times New Roman", Times, serif;
}

.primary-frame {
  box-sizing: border-box;
  width: 900px;
  max-width: calc(100vw - 32px);
  margin: 18px auto 42px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.84), rgba(0, 0, 0, 0.72)),
    radial-gradient(circle at top center, rgba(0, 126, 255, 0.10), transparent 38rem);
  border: 3px solid rgba(255, 255, 255, 0.55);
  border-radius: 18px;
  box-shadow:
    0 0 22px rgba(255, 255, 255, 0.13),
    0 0 34px rgba(0, 145, 255, 0.20),
    0 0 42px rgba(186, 124, 32, 0.18),
    inset 0 0 26px rgba(0, 0, 0, 0.80);
}

.site-header, .content-panel, .site-footer { background: transparent; }
.site-header { padding: 0 0 14px; }

.cm-menu { position: relative; width: 100%; line-height: 0; user-select: none; }
.cm-menu img { display: block; width: 100%; height: auto; border: 0; }
.cm-hotspot { position: absolute; display: block; border-radius: 8px; background: transparent; cursor: pointer; z-index: 2; transition: box-shadow 0.18s ease, background-color 0.18s ease; }
.cm-hotspot:hover, .cm-hotspot:focus-visible { background-color: rgba(0, 145, 255, 0.12); box-shadow: 0 0 12px rgba(0, 145, 255, 0.75), inset 0 0 10px rgba(245, 190, 90, 0.18); outline: none; }

/* Top menu hotspot map for TopMenu.png - corrected vertical positions for first two rows. */
.top-login { left: 70.0%; top: 2.3%; width: 26.5%; height: 7.2%; }
.top-btn { width: 18.0%; height: 11.5%; }
.top-01 { left: 2.8%; top: 19.5%; }
.top-02 { left: 21.9%; top: 19.5%; }
.top-03 { left: 41.0%; top: 19.5%; }
.top-04 { left: 60.2%; top: 19.5%; }
.top-05 { left: 79.3%; top: 19.5%; }
.top-06 { left: 2.8%; top: 33.5%; }
.top-07 { left: 21.9%; top: 33.5%; }
.top-08 { left: 41.0%; top: 33.5%; }
.top-09 { left: 60.2%; top: 33.5%; }
.top-10 { left: 79.3%; top: 33.5%; }
.top-11 { left: 2.8%; top: 46.2%; }
.top-12 { left: 21.9%; top: 46.2%; }
.top-13 { left: 41.0%; top: 46.2%; }
.top-14 { left: 60.2%; top: 46.2%; }
.top-15 { left: 79.3%; top: 46.2%; }
.top-16 { left: 2.8%; top: 66.0%; height: 12.0%; }
.top-17 { left: 21.9%; top: 66.0%; height: 12.0%; }
.top-18 { left: 41.0%; top: 66.0%; height: 12.0%; }
.top-19 { left: 60.2%; top: 66.0%; height: 12.0%; }
.top-20 { left: 79.3%; top: 66.0%; height: 12.0%; }

.content-panel { padding: 0; }
.hero-section { display: flex; justify-content: center; margin: 0 auto 18px; }
.hero-image { display: block; width: min(100%, 820px); height: auto; border: 1px solid rgba(179, 126, 32, 0.72); border-radius: 14px; box-shadow: 0 0 18px rgba(0, 145, 255, 0.22), 0 0 18px rgba(179, 126, 32, 0.18); }

.sound-panel { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 auto 14px; max-width: 720px; }
.sound-widget { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid rgba(179, 126, 32, 0.64); border-radius: 12px; background: radial-gradient(circle at top center, rgba(0, 145, 255, 0.12), transparent 70%), rgba(0, 0, 0, 0.64); box-shadow: 0 0 12px rgba(0, 145, 255, 0.12), 0 0 12px rgba(0, 0, 0, 0.8); }
.sound-title { margin: 0 0 8px; color: #f0d385; font-size: 18px; letter-spacing: 0.4px; text-align: center; }
.sound-icon { display: inline-block; margin-right: 6px; }
.custom-audio-controls { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; }
.audio-play, .audio-restart, .music-play, .music-restart { min-width: 38px; height: 34px; color: #f8e3aa; background: linear-gradient(180deg, #0a2236, #010305); border: 1px solid rgba(179, 126, 32, 0.70); border-radius: 8px; cursor: pointer; }
.audio-play:hover, .audio-restart:hover, .music-play:hover, .music-restart:hover, .audio-play:focus-visible, .audio-restart:focus-visible, .music-play:focus-visible, .music-restart:focus-visible { color: #ffffff; outline: none; box-shadow: 0 0 10px rgba(0, 145, 255, 0.55); }
.audio-progress { flex: 1 1 220px; min-width: 180px; accent-color: #2da9ff; }
.volume-label { display: inline-flex; align-items: center; gap: 7px; color: #d9c692; font-size: 15px; }
.audio-volume { width: 92px; accent-color: #2da9ff; }
.music-volume { width: 116px; accent-color: #0f6b3f; }
.audio-time-box { min-width: 94px; color: #d9c692; font-size: 15px; text-align: right; }
.audio-error, .music-error { display: none; margin: 10px 0 0; color: #ffb7b7; text-align: center; }
.music-note { margin: 8px 0 0; color: #bfcfae; font-size: 14px; text-align: center; }

.page-switch { margin: 0 auto 20px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; text-align: center; }
.page-mode-button { min-width: 190px; display: inline-flex; align-items: center; justify-content: center; color: #ffffff; text-decoration: none; padding: 10px 18px; border-radius: 9px; border: 1px solid rgba(225, 245, 255, 0.58); font-size: 17px; letter-spacing: 0.35px; box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.08), 0 0 10px rgba(0, 145, 255, 0.28); transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, filter 0.18s ease; }
.mode-full, .mode-summary { background: radial-gradient(circle at center, rgba(38, 190, 218, 0.16), transparent 80%), linear-gradient(180deg, #075970, #032938); }
.page-mode-button.active-mode { border-color: rgba(255, 255, 255, 0.88); box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.14), 0 0 18px rgba(96, 206, 255, 0.56); }
.page-mode-button:hover, .page-mode-button:focus-visible { color: #ffffff; transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.92); outline: none; box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.18), 0 0 18px rgba(96, 206, 255, 0.70); filter: brightness(1.22); }
.active-mode { border-color: rgba(255, 255, 255, 0.88); box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.14), 0 0 18px rgba(96, 206, 255, 0.56); }

.page-text { font-size: 20px; line-height: 1.55; color: #f0e6cd; }
.page-text h1 { margin: 22px 0 16px; color: #f6d27d; font-weight: normal; font-size: 42px; line-height: 1.1; text-align: center; text-shadow: 0 0 12px rgba(0, 135, 255, 0.35), 0 0 10px rgba(212, 156, 50, 0.35); }
.page-text h2 { margin: 26px 0 12px; color: #f6d27d; font-weight: normal; font-size: 30px; line-height: 1.18; text-shadow: 0 0 10px rgba(0, 135, 255, 0.25), 0 0 8px rgba(212, 156, 50, 0.25); }
.page-text p { margin: 0 0 18px; }
.center-line { text-align: center; }
.highlight { color: #f6d27d; }
.indent { margin-left: 26px; }
.question-item { color: #d9edff; }
.verin-intro { margin: 0 0 22px; color: #ffffff; font-size: 23px; line-height: 1.35; text-align: center; text-shadow: 0 0 12px rgba(0, 145, 255, 0.45), 0 0 10px rgba(212, 156, 50, 0.35); }
.story-note, .draft-note { margin: 20px 0 24px; padding: 14px 16px; border: 1px solid rgba(0, 145, 255, 0.38); border-radius: 12px; background: radial-gradient(circle at top center, rgba(0, 145, 255, 0.12), transparent 70%), rgba(0, 0, 0, 0.46); }
.story-note h2 { margin-top: 0; }
.inline-link { color: #8fe4ff; text-decoration: none; border-bottom: 1px solid rgba(143, 228, 255, 0.55); }
.inline-link:hover, .inline-link:focus-visible { color: #ffffff; outline: none; border-bottom-color: #ffffff; text-shadow: 0 0 8px rgba(143, 228, 255, 0.7); }

.site-footer { padding: 16px 0 0; }
.cm-bottom-menu { margin-top: 12px; }
.bottom-btn { width: 19.0%; height: 28.5%; }
.bottom-01 { left: 0.8%; top: 2.0%; }
.bottom-02 { left: 20.4%; top: 2.0%; }
.bottom-03 { left: 40.0%; top: 2.0%; }
.bottom-04 { left: 59.7%; top: 2.0%; }
.bottom-05 { left: 79.2%; top: 2.0%; }
.bottom-06 { left: 0.8%; top: 35.0%; }
.bottom-07 { left: 20.4%; top: 35.0%; }
.bottom-08 { left: 40.0%; top: 35.0%; }
.bottom-09 { left: 59.7%; top: 35.0%; }
.bottom-10 { left: 79.2%; top: 35.0%; }
.bottom-11 { left: 0.8%; top: 68.0%; }
.bottom-12 { left: 20.4%; top: 68.0%; }
.bottom-13 { left: 40.0%; top: 68.0%; }
.bottom-14 { left: 59.7%; top: 68.0%; }
.bottom-15 { left: 79.2%; top: 68.0%; }
.webmaster-row { display: flex; justify-content: center; margin: 18px 0 0; }
.webmaster-button { color: #f5f4df; text-decoration: none; padding: 10px 22px; border: 1px solid rgba(183, 231, 190, 0.55); border-radius: 9px; background: radial-gradient(circle at center, rgba(95, 205, 139, 0.20), transparent 80%), linear-gradient(180deg, #0d5c3c, #062d1f); box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.08), 0 0 10px rgba(20, 126, 76, 0.45); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.webmaster-button:hover, .webmaster-button:focus-visible { color: #ffffff; border-color: rgba(209, 255, 215, 0.92); outline: none; transform: translateY(-1px); box-shadow: inset 0 0 16px rgba(255, 255, 255, 0.12), 0 0 18px rgba(32, 180, 108, 0.75); }
.music-credit { margin: 20px auto 0; max-width: 780px; padding: 13px 16px; border: 1px solid rgba(179, 126, 32, 0.52); border-radius: 12px; background: radial-gradient(circle at top center, rgba(0, 145, 255, 0.10), transparent 70%), rgba(0, 0, 0, 0.48); color: #e8dcc1; font-size: 16px; line-height: 1.42; text-align: center; }
.music-credit p { margin: 0 0 10px; }
.music-credit p:last-child { margin-bottom: 0; }
.music-credit a { color: #8fe4ff; text-decoration: none; border-bottom: 1px solid rgba(143, 228, 255, 0.55); }
.music-credit a:hover, .music-credit a:focus-visible { color: #ffffff; outline: none; border-bottom-color: #ffffff; text-shadow: 0 0 8px rgba(143, 228, 255, 0.7); }
.bottom-spacer { height: 22px; }

@media (max-width: 640px) {
  .primary-frame { width: 100%; max-width: 100%; margin: 0; border-radius: 0; border-left-width: 3px; border-right-width: 3px; padding: 8px; }
  .page-text { font-size: 18px; }
  .page-text h1 { font-size: 34px; }
  .page-text h2 { font-size: 27px; }
  .custom-audio-controls { align-items: stretch; }
  .audio-progress { flex-basis: 100%; }
}

/* v20 repair: Summary / Non-Summary page state colors.
   Inactive button = pine green. Active button = light blue. */
.page-switch .page-mode-button,
.page-switch .mode-summary,
.page-switch .mode-full {
  color: #ffffff;
  background:
    radial-gradient(circle at center, rgba(95, 205, 139, 0.18), transparent 80%),
    linear-gradient(180deg, #0d5c3c, #062d1f);
  border-color: rgba(183, 231, 190, 0.58);
  box-shadow:
    inset 0 0 12px rgba(255, 255, 255, 0.08),
    0 0 10px rgba(20, 126, 76, 0.38);
}

.page-switch .page-mode-button.active-mode,
.page-switch .mode-summary.active-mode,
.page-switch .mode-full.active-mode {
  color: #ffffff;
  background:
    radial-gradient(circle at center, rgba(188, 234, 255, 0.22), transparent 80%),
    linear-gradient(180deg, #55c2f7, #176997);
  border-color: rgba(255, 255, 255, 0.90);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.16),
    0 0 18px rgba(96, 206, 255, 0.60);
}

.page-switch .page-mode-button:hover,
.page-switch .page-mode-button:focus-visible {
  color: #ffffff;
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.94);
  outline: none;
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.18),
    0 0 18px rgba(96, 206, 255, 0.70);
  filter: brightness(1.22);
}

/* Floating Reader Control v9:
   Narrow stationary Page Audio controller anchored beside the content frame.
   JavaScript positions it against the visible white content-panel frame line. */
.floating-reader-control {
  position: fixed;
  right: auto;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  width: 46px;
  padding: 5px 3px;
  border: 1px solid rgba(246, 210, 125, 0.72);
  border-radius: 10px;
  background: rgba(10, 14, 24, 0.92);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.50);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #ffffff;
  font-family: "Times New Roman", Georgia, serif;
}

.floating-reader-control .floating-reader-title {
  color: #f6d27d;
  font-weight: bold;
  font-size: 0.48rem;
  line-height: 1.0;
  text-align: center;
  letter-spacing: 0.02em;
}

.floating-reader-control button {
  width: 34px;
  min-height: 29px;
  padding: 2px;
  border: 1px solid rgba(246, 210, 125, 0.72);
  border-radius: 8px;
  background: rgba(246, 210, 125, 0.12);
  color: #ffffff;
  font-weight: bold;
  font-size: 0.70rem;
  line-height: 1;
  cursor: pointer;
}

.floating-reader-control button:hover,
.floating-reader-control button:focus {
  background: rgba(246, 210, 125, 0.25);
  outline: none;
}

.floating-reader-control .floating-reader-seconds-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #d9c692;
  font-size: 0.46rem;
  line-height: 1.0;
  text-align: center;
}

.floating-reader-control .floating-reader-seconds {
  width: 34px;
  box-sizing: border-box;
  padding: 2px 1px;
  border: 1px solid rgba(246, 210, 125, 0.6);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  text-align: center;
  font-size: 0.66rem;
}

.floating-reader-control .floating-reader-time {
  color: #ffffff;
  font-size: 0.48rem;
  line-height: 1.0;
  text-align: center;
  max-width: 40px;
  overflow: hidden;
}

.floating-reader-control.is-hidden {
  display: none !important;
}

@media (max-width: 900px) {
  .floating-reader-control {
    width: 42px;
    padding: 5px 2px;
    border-radius: 9px;
    gap: 4px;
  }

  .floating-reader-control .floating-reader-title {
    font-size: 0.44rem;
  }

  .floating-reader-control button {
    width: 32px;
    min-height: 28px;
    font-size: 0.68rem;
  }

  .floating-reader-control .floating-reader-seconds {
    width: 32px;
    font-size: 0.64rem;
  }

  .floating-reader-control .floating-reader-time {
    display: none;
  }
}

/* Mobile Top Reader Control v17:
   On phones/small tablets, the fixed top Audio File Player Controls bar replaces the body Page Audio widget and side reader control.
   Desktop keeps the normal Page Audio widget and side floating reader control. */
.mobile-top-reader-control {
  display: none;
}

@media (max-width: 900px) {
  .persistent-music-bar {
    display: none !important;
  }

  body.cm-mobile-top-reader-active {
    padding-top: 72px;
  }

  .floating-reader-control {
    display: none !important;
  }

  .sound-panel > .page-audio-widget {
    display: none !important;
  }

  .mobile-top-reader-control {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    min-height: 58px;
    box-sizing: border-box;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(246, 210, 125, 0.70);
    background: rgba(8, 12, 22, 0.96);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #ffffff;
    font-family: "Times New Roman", Georgia, serif;
  }

  .mobile-top-reader-control .mobile-reader-title {
    color: #f6d27d;
    font-weight: bold;
    font-size: 0.62rem;
    line-height: 1.05;
    text-align: center;
    white-space: normal;
    width: 70px;
  }

  .mobile-top-reader-control button {
    min-width: 34px;
    min-height: 32px;
    padding: 2px 5px;
    border: 1px solid rgba(246, 210, 125, 0.72);
    border-radius: 9px;
    background: rgba(246, 210, 125, 0.12);
    color: #ffffff;
    font-weight: bold;
    font-size: 0.76rem;
    line-height: 1;
  }

  .mobile-top-reader-control .mobile-reader-seconds-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: #d9c692;
    font-size: 0.54rem;
    line-height: 1;
    text-align: center;
  }

  .mobile-top-reader-control .mobile-reader-seconds {
    width: 38px;
    box-sizing: border-box;
    padding: 2px 1px;
    border: 1px solid rgba(246, 210, 125, 0.62);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    text-align: center;
    font-size: 0.68rem;
  }

  .mobile-top-reader-control .mobile-reader-time {
    color: #ffffff;
    font-size: 0.60rem;
    min-width: 34px;
    text-align: center;
  }
}

@media (max-width: 430px) {
  body.cm-mobile-top-reader-active {
    padding-top: 68px;
  }

  .mobile-top-reader-control {
    gap: 4px;
    padding: 5px 4px;
  }

  .mobile-top-reader-control .mobile-reader-title {
    font-size: 0.52rem;
    width: 58px;
  }

  .mobile-top-reader-control button {
    min-width: 30px;
    min-height: 30px;
    padding: 2px 4px;
    font-size: 0.70rem;
  }

  .mobile-top-reader-control .mobile-reader-seconds {
    width: 34px;
    font-size: 0.64rem;
  }

  .mobile-top-reader-control .mobile-reader-time {
    display: none;
  }
}

/* Mobile Top Reader Control v17 Stepper:
   Mobile browsers often do not show native number-field arrows, so custom up/down controls are provided. */
.mobile-top-reader-control .mobile-reader-stepper {
  display: flex;
  align-items: center;
  gap: 2px;
}

.mobile-top-reader-control .mobile-reader-stepper-buttons {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mobile-top-reader-control .mobile-reader-stepper-buttons button {
  min-width: 18px;
  width: 18px;
  min-height: 15px;
  height: 15px;
  padding: 0;
  border-radius: 5px;
  font-size: 0.56rem;
  line-height: 1;
}

@media (max-width: 430px) {
  .mobile-top-reader-control .mobile-reader-stepper-buttons button {
    min-width: 16px;
    width: 16px;
    min-height: 14px;
    height: 14px;
    font-size: 0.52rem;
  }
}


/* Controls All Pages v17 background note: the background image is expected at images/bluelines_black_background.png. A duplicate is also included under Images/ for case-sensitive hosts. */

/* Background lowercase standard v19:
   Upload the background image as: images/bluelines_black_background.png
   Because this CSS file lives inside css/, the correct reference is: ../images/bluelines_black_background.png */
body {
  background-color: #030712;
  background-image:
    linear-gradient(rgba(3, 7, 18, 0.18), rgba(3, 7, 18, 0.18)),
    url("../images/bluelines_black_background.png");
  background-repeat: repeat;
  background-size: auto;
  background-attachment: fixed;
}

/* Audio Book Landing Page v1 */
.audiobook-landing-panel {
  max-width: 1180px;
  margin: 1.6rem auto 2.2rem auto;
  padding: clamp(1rem, 2.8vw, 2rem);
  text-align: center;
}

.audiobook-hero-image {
  display: block;
  width: 100%;
  max-width: 1100px;
  height: auto;
  margin: 0 auto 1.8rem auto;
  border-radius: 18px;
  border: 1px solid rgba(246, 210, 125, 0.58);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.55);
}

.audiobook-title {
  color: #f6d27d;
  font-family: "Times New Roman", Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
  text-align: center;
  margin: 0.75rem auto 1rem auto;
  text-shadow: 0 0 16px rgba(246, 210, 125, 0.34);
}

.audiobook-intro-text {
  max-width: 920px;
  margin: 0 auto 1.5rem auto;
  color: #ffffff;
  font-family: "Times New Roman", Georgia, serif;
  font-size: clamp(1.12rem, 2vw, 1.42rem);
  line-height: 1.55;
  text-align: center;
}

.audiobook-enter-row {
  display: flex;
  justify-content: center;
  margin-top: 1.4rem;
}

.audiobook-enter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(86vw, 340px);
  min-height: 62px;
  padding: 0.85rem 1.5rem;
  border: 1px solid rgba(246, 210, 125, 0.88);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 140, 255, 0.38), transparent 58%),
    linear-gradient(180deg, rgba(24, 32, 52, 0.96), rgba(4, 8, 18, 0.98));
  color: #f6d27d;
  font-family: "Times New Roman", Georgia, serif;
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  font-weight: bold;
  letter-spacing: 0.03em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow:
    inset 0 0 18px rgba(0, 135, 255, 0.35),
    0 0 22px rgba(0, 135, 255, 0.22),
    0 0 16px rgba(246, 210, 125, 0.12);
}

.audiobook-enter-button:hover,
.audiobook-enter-button:focus {
  color: #ffffff;
  border-color: #ffffff;
  box-shadow:
    inset 0 0 24px rgba(0, 135, 255, 0.55),
    0 0 28px rgba(0, 135, 255, 0.32),
    0 0 20px rgba(246, 210, 125, 0.22);
  outline: none;
}

@media (max-width: 700px) {
  .audiobook-landing-panel {
    margin-top: 1rem;
    padding: 0.8rem;
  }

  .audiobook-hero-image {
    border-radius: 12px;
    margin-bottom: 1.15rem;
  }

  .audiobook-enter-button {
    min-height: 54px;
  }
}

/* Audio Book Landing Page image button v5 */
.audiobook-enter-button.image-button-link {
  display: inline-block;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  line-height: 0;
  text-decoration: none;
}

.audiobook-enter-button-image {
  display: block;
  width: min(88vw, 820px);
  height: auto;
  margin: 0 auto;
}

.audiobook-enter-button.image-button-link:hover .audiobook-enter-button-image,
.audiobook-enter-button.image-button-link:focus .audiobook-enter-button-image {
  filter:
    drop-shadow(0 0 18px rgba(0, 135, 255, 0.42))
    drop-shadow(0 0 10px rgba(246, 210, 125, 0.25));
}

.audiobook-enter-button.image-button-link:focus {
  outline: 2px solid rgba(246, 210, 125, 0.85);
  outline-offset: 6px;
}

/* Audio Book index top audio controller v7 */
.audiobook-top-audio-panel {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.35rem auto 1.2rem auto;
  text-align: center;
}

.audiobook-index-audio-widget {
  margin-left: auto;
  margin-right: auto;
  max-width: 980px;
  width: min(96%, 980px);
}

.audiobook-index-audio-widget .custom-audio-controls {
  justify-content: center;
}

@media (max-width: 900px) {
  .audiobook-top-audio-panel {
    margin-top: 0.9rem;
    margin-bottom: 1rem;
  }
}

/* Audio Book landing text alignment v8:
   Only the CM Audio Book title is centered.
   The explanatory text below it is left-justified for easier reading. */
.audiobook-title {
  text-align: center !important;
}

.audiobook-intro-text {
  text-align: left !important;
  margin-left: auto;
  margin-right: auto;
}

.audiobook-landing-panel .page-text {
  text-align: left !important;
}

.audiobook-landing-panel .audiobook-title {
  text-align: center !important;
}

/* Site-wide Desktop Background Music Controller v30:
   The background music controller is injected by js/background-music.js on desktop only.
   Phone and tablet screens do not create or load the music player. */
.persistent-music-bar.desktop-only-background-music {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  margin: 0 auto 12px auto;
  text-align: center;
  background: radial-gradient(circle at top center, rgba(0, 145, 255, 0.12), transparent 70%), rgba(0, 0, 0, 0.82);
  border-bottom: 1px solid rgba(246, 210, 125, 0.58);
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.55), 0 0 16px rgba(0, 145, 255, 0.12);
  color: #ffffff;
  font-family: "Times New Roman", Georgia, serif;
  position: relative;
  z-index: 9999;
}

.desktop-only-background-music .persistent-music-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center !important;
  align-items: center !important;
  width: fit-content;
  max-width: 96%;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}

.persistent-music-title {
  color: #f6d27d;
  font-weight: bold;
  letter-spacing: 0.3px;
}

.persistent-music-button {
  min-width: 38px;
  min-height: 32px;
  color: #f8e3aa;
  background: linear-gradient(180deg, #0a2236, #010305);
  border: 1px solid rgba(246, 210, 125, 0.75);
  border-radius: 8px;
  cursor: pointer;
  font-family: "Times New Roman", Georgia, serif;
}

.persistent-music-button:hover,
.persistent-music-button:focus-visible {
  color: #ffffff;
  outline: none;
  box-shadow: 0 0 8px rgba(0, 145, 255, 0.60), 0 0 8px rgba(246, 210, 125, 0.25);
}

.persistent-music-volume-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ffffff;
  font-size: 0.95rem;
}

#persistent-music-volume {
  width: 130px;
}

.persistent-music-note {
  color: #d9e8ff;
  font-size: 0.9rem;
  opacity: 0.95;
}

@media (max-width: 900px) {
  .persistent-music-bar,
  .desktop-only-background-music {
    display: none !important;
  }
}