/* MP3 library final neutral glass theme: transparent, quiet, no accent green. */
html body.view-mp3,
html body #mp3 {
  --mp3-ink: #20242b;
  --mp3-soft-ink: #596271;
  --mp3-muted: #7d8694;
  --mp3-glass: rgba(255, 255, 255, 0.36);
  --mp3-glass-strong: rgba(255, 255, 255, 0.62);
  --mp3-line: rgba(255, 255, 255, 0.64);
  --mp3-inner-line: rgba(24, 32, 42, 0.045);
  --mp3-shadow: rgba(22, 30, 42, 0.24);
  --mp3-warm: rgba(245, 232, 205, 0.22);
}

html body.view-mp3 {
  background:
    radial-gradient(circle at 10% 8%, rgba(205, 233, 231, 0.46), transparent 34%),
    radial-gradient(circle at 92% 10%, rgba(248, 235, 201, 0.38), transparent 36%),
    radial-gradient(circle at 50% 96%, rgba(212, 222, 229, 0.42), transparent 40%),
    linear-gradient(180deg, #eef3f3 0%, #f6f7f8 48%, #eef1f0 100%) !important;
}

html body.view-mp3 .main,
html body.view-mp3 #mp3.active-view {
  background:
    radial-gradient(circle at 8% 10%, rgba(196, 231, 227, 0.32), transparent 36%),
    radial-gradient(circle at 98% 8%, rgba(248, 235, 201, 0.28), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(235, 240, 240, 0.16)) !important;
}

html body.view-mp3 .mp3-shell {
  background:
    radial-gradient(circle at 8% 6%, rgba(193, 229, 226, 0.3), transparent 32%),
    radial-gradient(circle at 98% 8%, rgba(247, 233, 202, 0.32), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(205, 214, 222, 0.22), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(234, 239, 239, 0.12)),
    rgba(255, 255, 255, 0.04) !important;
}

html body.view-mp3 .mp3-hero,
html body.view-mp3 .mp3-type-panel,
html body.view-mp3 .mp3-list-panel,
html body.view-mp3 .mp3-player-panel,
html body.view-mp3 .mp3-settings-card {
  border: 1px solid var(--mp3-line) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.62), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.52), rgba(244, 248, 249, 0.18)),
    rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(18, 28, 40, 0.045),
    0 30px 74px -48px rgba(18, 28, 40, 0.46),
    0 2px 10px -8px rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(34px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(34px) saturate(1.2) !important;
}

html body.view-mp3 .mp3-hero h2,
html body.view-mp3 .mp3-panel-head h3,
html body.view-mp3 .mp3-player-panel h3,
html body.view-mp3 .mp3-mobile-detail-head strong,
html body.view-mp3 .mp3-mobile-player-head strong,
html body.view-mp3 .mp3-hero-stats strong {
  color: var(--mp3-ink) !important;
  letter-spacing: 0 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.78),
    0 -1px 0 rgba(18, 28, 40, 0.045) !important;
}

html body.view-mp3 .mp3-hero p,
html body.view-mp3 .mp3-hero-stats span,
html body.view-mp3 .mp3-panel-head span,
html body.view-mp3 .mp3-question-item p,
html body.view-mp3 .mp3-type-list button small,
html body.view-mp3 .mp3-mobile-detail-head span,
html body.view-mp3 .mp3-mobile-player-head span {
  color: var(--mp3-muted) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58) !important;
}

html body.view-mp3 .mp3-orb,
html body.view-mp3 .mp3-player-badge {
  color: #2c3139 !important;
  background:
    radial-gradient(circle at 26% 14%, rgba(255, 255, 255, 0.88), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(226, 231, 238, 0.42)),
    rgba(255, 255, 255, 0.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -1px 0 rgba(18, 28, 40, 0.07),
    0 18px 36px -30px rgba(18, 28, 40, 0.42) !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.76),
    0 -1px 0 rgba(18, 28, 40, 0.04) !important;
}

html body.view-mp3 .mp3-hero-stats article,
html body.view-mp3 .mp3-type-list button,
html body.view-mp3 .mp3-question-item,
html body.view-mp3 .mp3-search,
html body.view-mp3 .mp3-tabs button,
html body.view-mp3 .mp3-play-all,
html body.view-mp3 .mp3-understand-row button,
html body.view-mp3 .mp3-setting-options button,
html body.view-mp3 .mp3-slider-field,
html body.view-mp3 .mp3-player-top button,
html body.view-mp3 .mp3-subtitle-toggle,
html body.view-mp3 .mp3-mobile-detail-head button,
html body.view-mp3 .mp3-mobile-player-head button {
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(245, 249, 250, 0.16)),
    rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(18, 28, 40, 0.035),
    0 16px 34px -27px rgba(18, 28, 40, 0.3) !important;
  color: var(--mp3-ink) !important;
}

html body.view-mp3 .mp3-type-list button > span {
  color: #3c424c !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(225, 230, 237, 0.34)),
    rgba(255, 255, 255, 0.36) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -1px 0 rgba(18, 28, 40, 0.055) !important;
}

html body.view-mp3 .mp3-type-list button strong,
html body.view-mp3 .mp3-question-item strong,
html body.view-mp3 .mp3-play-all strong,
html body.view-mp3 .mp3-tabs button,
html body.view-mp3 .mp3-setting-options button,
html body.view-mp3 .mp3-understand-row button,
html body.view-mp3 .mp3-search input {
  color: var(--mp3-ink) !important;
  font-weight: 820 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72),
    0 -1px 0 rgba(18, 28, 40, 0.04) !important;
}

html body.view-mp3 .mp3-type-list button em,
html body.view-mp3 .mp3-question-item p em,
html body.view-mp3 .mp3-question-item p b,
html body.view-mp3 .mp3-question-item p i,
html body.view-mp3 .mp3-question-item p small,
html body.view-mp3 .mp3-play-all em {
  color: #6e7683 !important;
  background: rgba(255, 255, 255, 0.52) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
}

html body.view-mp3 .mp3-type-list button:hover,
html body.view-mp3 .mp3-question-item:hover,
html body.view-mp3 .mp3-tabs button:hover,
html body.view-mp3 .mp3-setting-options button:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(18, 28, 40, 0.04),
    0 18px 36px -30px rgba(18, 28, 40, 0.28) !important;
}

html body.view-mp3 .mp3-type-list button.active,
html body.view-mp3 .mp3-tabs button.active,
html body.view-mp3 .mp3-question-item.active,
html body.view-mp3 .mp3-setting-options button.active {
  color: #252a32 !important;
  border-color: rgba(255, 255, 255, 0.78) !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.9), transparent 35%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(232, 237, 244, 0.38)),
    rgba(255, 255, 255, 0.44) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(18, 28, 40, 0.075),
    0 20px 42px -32px rgba(18, 28, 40, 0.38) !important;
}

html body.view-mp3 .mp3-type-list button.active strong,
html body.view-mp3 .mp3-type-list button.active small,
html body.view-mp3 .mp3-type-list button.active em,
html body.view-mp3 .mp3-question-item.active strong,
html body.view-mp3 .mp3-question-item.active p,
html body.view-mp3 .mp3-question-item.active p em,
html body.view-mp3 .mp3-question-item.active p b,
html body.view-mp3 .mp3-question-item.active p i,
html body.view-mp3 .mp3-question-item.active p small,
html body.view-mp3 .mp3-tabs button.active,
html body.view-mp3 .mp3-setting-options button.active {
  color: #252a32 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.78),
    0 -1px 0 rgba(18, 28, 40, 0.04) !important;
}

html body.view-mp3 .mp3-type-list button.active > span {
  color: #ffffff !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.26), transparent 34%),
    linear-gradient(145deg, #767d88, #4d5561) !important;
  text-shadow: 0 1px 0 rgba(18, 28, 40, 0.24) !important;
}

html body.view-mp3 .mp3-type-list button.active em,
html body.view-mp3 .mp3-question-item.active p em,
html body.view-mp3 .mp3-question-item.active p b,
html body.view-mp3 .mp3-question-item.active p i,
html body.view-mp3 .mp3-question-item.active p small {
  background: rgba(255, 255, 255, 0.58) !important;
}

html body.view-mp3 .mp3-play-all span,
html body.view-mp3 .mp3-control-row .mp3-main-play {
  color: #ffffff !important;
  background:
    radial-gradient(circle at 30% 15%, rgba(255, 255, 255, 0.24), transparent 34%),
    linear-gradient(145deg, #858c96, #535b66) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 16px 30px -24px rgba(18, 28, 40, 0.52) !important;
}

html body.view-mp3 .mp3-control-row button {
  color: #343a44 !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(246, 248, 251, 0.34)),
    rgba(255, 255, 255, 0.4) !important;
}

html body.view-mp3 .mp3-understand-row button.active {
  color: #252a32 !important;
  border-color: rgba(255, 255, 255, 0.78) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(232, 237, 244, 0.42)),
    rgba(255, 255, 255, 0.42) !important;
}

html body.view-mp3 .mp3-star.saved {
  color: #a97918 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

html body.view-mp3 .mp3-progress-row input,
html body.view-mp3 .mp3-slider-field input {
  accent-color: #6e7683 !important;
}

html body.view-mp3 .mp3-transcript {
  display: block !important;
  min-height: 176px !important;
  max-height: 270px !important;
  overflow: hidden auto !important;
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.56), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.44), rgba(244, 248, 249, 0.16)),
    rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -1px 0 rgba(18, 28, 40, 0.035),
    0 18px 38px -30px rgba(18, 28, 40, 0.28) !important;
  backdrop-filter: blur(28px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.16) !important;
  scrollbar-width: none !important;
}

html body.view-mp3 .mp3-transcript::-webkit-scrollbar {
  display: none !important;
}

html body.view-mp3 .mp3-lyric-track {
  display: grid !important;
  gap: 14px !important;
  min-height: 100% !important;
  padding: 48px 0 !important;
}

html body.view-mp3 .mp3-lyric-line {
  margin: 0 !important;
  color: rgba(32, 36, 43, 0.36) !important;
  font-size: clamp(18px, 1.75vw, 28px) !important;
  font-weight: 760 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  transform: scale(0.96) !important;
  transition: color 0.28s ease, opacity 0.28s ease, transform 0.28s ease !important;
}

html body.view-mp3 .mp3-lyric-line.past {
  color: rgba(32, 36, 43, 0.22) !important;
}

html body.view-mp3 .mp3-lyric-line.active {
  color: #20242b !important;
  opacity: 1 !important;
  font-weight: 860 !important;
  transform: scale(1) !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82),
    0 10px 24px rgba(18, 28, 40, 0.12) !important;
}

html body.view-mp3 .mp3-transcript.is-hidden {
  display: block !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body.view-mp3 .mp3-subtitle-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 16px !important;
  line-height: 44px !important;
  white-space: nowrap !important;
}

html body.view-mp3 .mp3-content-state,
html body.view-mp3 .mp3-empty {
  display: grid;
  min-height: 180px;
  padding: 24px;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 24px;
  color: var(--mp3-soft-ink);
  background: rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
  text-align: center;
}

html body.view-mp3 .mp3-content-state strong {
  color: var(--mp3-ink);
  font-size: 15px;
  line-height: 1.35;
}

html body.view-mp3 .mp3-content-state small {
  color: var(--mp3-muted);
  font-size: 12px;
  line-height: 1.45;
}

html body.view-mp3 .mp3-content-state.is-loading > span {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(89, 98, 113, 0.16);
  border-top-color: rgba(0, 183, 131, 0.72);
  border-radius: 50%;
  animation: mp3ContentSpin 0.8s linear infinite;
}

html body.view-mp3 .mp3-content-state button {
  min-height: 38px;
  margin-top: 4px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 999px;
  color: var(--mp3-ink);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font: inherit;
  font-size: 13px;
  font-weight: 720;
  cursor: pointer;
}

html body.view-mp3 .mp3-settings-sheet {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: none;
  align-items: end;
  justify-content: center;
}

html body.view-mp3 .mp3-settings-sheet.open {
  display: flex;
}

html body.view-mp3 .mp3-settings-sheet[aria-hidden="true"] {
  display: none;
}

html body.view-mp3 .mp3-settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 22, 28, 0.34);
}

html body.view-mp3 .mp3-settings-card {
  position: relative;
  display: grid;
  gap: 20px;
  width: min(560px, calc(100vw - 24px));
  max-height: min(78vh, 720px);
  padding: 24px;
  overflow: auto;
  border-radius: 30px 30px 0 0;
}

html body.view-mp3 .mp3-settings-head {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
}

html body.view-mp3 .mp3-settings-head h3,
html body.view-mp3 .mp3-setting-group h4 {
  margin: 0;
  color: var(--mp3-ink);
}

html body.view-mp3 .mp3-settings-head h3 {
  text-align: center;
  font-size: 21px;
}

html body.view-mp3 .mp3-settings-head button {
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 999px;
  color: var(--mp3-ink);
  background: rgba(255, 255, 255, 0.54);
  font: inherit;
  font-weight: 720;
}

html body.view-mp3 .mp3-setting-group h4 {
  margin-bottom: 10px;
  font-size: 16px;
}

@keyframes mp3ContentSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  html body.view-mp3 .mp3-content-state.is-loading > span {
    animation: none;
  }
}

@media (min-width: 761px) {
  html body.view-mp3 .main {
    overflow-x: hidden !important;
  }

  html body.view-mp3 #mp3.active-view {
    width: min(1180px, calc(100vw - 48px)) !important;
    max-width: min(1180px, calc(100vw - 48px)) !important;
    margin: 0 auto !important;
  }

  html body.view-mp3 .mp3-shell {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    gap: 14px !important;
    padding: clamp(12px, 1.6vw, 22px) !important;
  }

  html body.view-mp3 .mp3-layout {
    grid-template-columns: minmax(190px, 0.7fr) minmax(280px, 0.9fr) minmax(360px, 560px) !important;
    gap: 12px !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-layout {
    display: flex !important;
    justify-content: center !important;
  }

  html body.view-mp3 .mp3-player-panel {
    width: 100% !important;
    max-width: 680px !important;
    min-height: min(760px, calc(100dvh - 112px)) !important;
    padding: clamp(18px, 2vw, 28px) !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-player-panel {
    max-width: 760px !important;
  }

  html body.view-mp3 .mp3-player-badge {
    width: 74px !important;
    height: 74px !important;
    border-radius: 24px !important;
    font-size: 24px !important;
  }

  html body.view-mp3 .mp3-player-panel h3 {
    font-size: clamp(30px, 3.1vw, 46px) !important;
    line-height: 1.05 !important;
  }

  html body.view-mp3 .mp3-transcript {
    min-height: 150px !important;
    max-height: min(260px, 30dvh) !important;
    padding: 16px 18px !important;
    border-radius: 24px !important;
  }

  html body.view-mp3 .mp3-lyric-track {
    gap: 10px !important;
    padding: 38px 0 !important;
  }

  html body.view-mp3 .mp3-lyric-line {
    max-width: 92% !important;
    margin-inline: auto !important;
    font-size: clamp(16px, 1.28vw, 22px) !important;
    line-height: 1.42 !important;
  }
}

@media (max-width: 760px) {
  html body.view-mp3 {
    background:
      radial-gradient(circle at 8% 0%, rgba(205, 233, 231, 0.48), transparent 36%),
      radial-gradient(circle at 100% 8%, rgba(248, 235, 201, 0.36), transparent 34%),
      linear-gradient(180deg, #eef3f3 0%, #f6f7f8 52%, #eef1f0 100%) !important;
  }

  html body.view-mp3 .mp3-shell {
    background:
      radial-gradient(circle at 8% 0%, rgba(205, 233, 231, 0.34), transparent 34%),
      radial-gradient(circle at 100% 12%, rgba(248, 235, 201, 0.28), transparent 34%),
      radial-gradient(circle at 50% 100%, rgba(205, 214, 222, 0.2), transparent 38%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(238, 242, 242, 0.12)) !important;
  }

  html body.view-mp3 .mp3-hero h2 {
    font-size: 31px !important;
    line-height: 1.02 !important;
  }

  html body.view-mp3 .mp3-hero-stats article {
    padding: 12px !important;
    border-radius: 18px !important;
  }

  html body.view-mp3 .mp3-hero-stats strong {
    font-size: 25px !important;
  }

  html body.view-mp3 .mp3-type-list button {
    border-radius: 24px !important;
  }

  html body.view-mp3 .mp3-transcript {
    min-height: 128px !important;
    max-height: 220px !important;
  }

  html body.view-mp3 .mp3-lyric-track {
    gap: 12px !important;
    padding: 38px 0 !important;
  }

  html body.view-mp3 .mp3-lyric-line {
    font-size: 18px !important;
    line-height: 1.42 !important;
  }

  html body.view-mp3 .mp3-subtitle-toggle {
    min-height: 42px !important;
    max-height: 42px !important;
    line-height: 42px !important;
  }
}

/* Engraved button text: keep labels inside the frosted glass instead of floating on top. */
html body.view-mp3 .mp3-back-button,
html body.view-mp3 .mp3-type-list button,
html body.view-mp3 .mp3-type-list button *,
html body.view-mp3 .mp3-tabs button,
html body.view-mp3 .mp3-play-all,
html body.view-mp3 .mp3-play-all *,
html body.view-mp3 .mp3-player-top button,
html body.view-mp3 .mp3-subtitle-toggle,
html body.view-mp3 .mp3-control-row button,
html body.view-mp3 .mp3-understand-row button,
html body.view-mp3 .mp3-setting-options button,
html body.view-mp3 .mp3-mobile-detail-head button,
html body.view-mp3 .mp3-mobile-player-head button,
html body.view-mp3 .mp3-pagination button,
html body.view-mp3 .mp3-star {
  color: rgba(46, 53, 63, 0.88) !important;
  letter-spacing: 0 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82),
    0 -1px 0 rgba(24, 32, 42, 0.12),
    0 0 1px rgba(24, 32, 42, 0.18) !important;
}

html body.view-mp3 .mp3-tabs button.active,
html body.view-mp3 .mp3-setting-options button.active,
html body.view-mp3 .mp3-understand-row button.active,
html body.view-mp3 .mp3-type-list button.active strong,
html body.view-mp3 .mp3-type-list button.active small,
html body.view-mp3 .mp3-type-list button.active em,
html body.view-mp3 .mp3-question-item.active strong,
html body.view-mp3 .mp3-question-item.active p,
html body.view-mp3 .mp3-question-item.active p * {
  color: rgba(38, 44, 53, 0.9) !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.88),
    0 -1px 0 rgba(24, 32, 42, 0.14),
    0 0 1px rgba(24, 32, 42, 0.16) !important;
}

html body.view-mp3 .mp3-type-list button.active > span,
html body.view-mp3 .mp3-play-all span,
html body.view-mp3 .mp3-control-row .mp3-main-play {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18),
    0 -1px 0 rgba(11, 16, 24, 0.34),
    0 0 1px rgba(255, 255, 255, 0.28) !important;
}

html body.view-mp3 .mp3-control-row button:not(.mp3-main-play),
html body.view-mp3 .mp3-player-top button,
html body.view-mp3 .mp3-subtitle-toggle,
html body.view-mp3 .mp3-understand-row button {
  font-weight: 760 !important;
}

/* Keep long SGD transcripts compact; lyrics scroll inside this viewport. */
html body.view-mp3 .mp3-player-panel .mp3-transcript,
html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-transcript {
  height: clamp(158px, 25dvh, 230px) !important;
  min-height: clamp(158px, 25dvh, 230px) !important;
  max-height: clamp(158px, 25dvh, 230px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

html body.view-mp3 .mp3-player-panel .mp3-lyric-track,
html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-lyric-track {
  gap: 9px !important;
  padding: 34px 0 !important;
}

html body.view-mp3 .mp3-player-panel .mp3-lyric-line,
html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-lyric-line {
  font-size: clamp(15px, 1.12vw, 20px) !important;
  line-height: 1.38 !important;
}

@media (max-width: 760px) {
  html body.view-mp3 .mp3-player-panel .mp3-transcript,
  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-transcript {
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
  }

  html body.view-mp3 .mp3-player-panel .mp3-lyric-track,
  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-lyric-track {
    gap: 8px !important;
    padding: 30px 0 !important;
  }

  html body.view-mp3 .mp3-player-panel .mp3-lyric-line,
  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-lyric-line {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 760px) {
  html body.view-mp3 .mp3-list-panel {
    padding-bottom: 18px !important;
  }

  html body.view-mp3 .mp3-question-list {
    gap: 12px !important;
    padding-bottom: 16px !important;
  }

  html body.view-mp3 .mp3-question-item {
    min-height: 98px !important;
    padding-block: 8px !important;
  }

  html body.view-mp3 .mp3-question-item > button:first-child {
    gap: 10px !important;
  }

  html body.view-mp3 .mp3-question-item p {
    gap: 7px !important;
    margin-top: 7px !important;
  }

  html body.view-mp3 .mp3-question-item p em,
  html body.view-mp3 .mp3-question-item p b,
  html body.view-mp3 .mp3-question-item p i,
  html body.view-mp3 .mp3-question-item p small {
    min-height: 28px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    line-height: 20px !important;
  }

  html body.view-mp3 .mp3-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: fit-content !important;
    max-width: calc(100% - 28px) !important;
    margin: 10px auto 2px !important;
    padding: 7px 9px !important;
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    border-radius: 18px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.52), rgba(240, 245, 247, 0.22)),
      rgba(255, 255, 255, 0.24) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      inset 0 -1px 0 rgba(18, 28, 40, 0.04),
      0 14px 28px -24px rgba(18, 28, 40, 0.28) !important;
    backdrop-filter: blur(24px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.12) !important;
  }

  html body.view-mp3 .mp3-pagination[hidden] {
    display: none !important;
  }

  html body.view-mp3 .mp3-pagination button {
    min-width: 74px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    border-radius: 13px !important;
    font-size: 16px !important;
    font-weight: 760 !important;
    line-height: 38px !important;
    white-space: nowrap !important;
  }

  html body.view-mp3 .mp3-pagination span {
    min-width: 54px !important;
    color: rgba(32, 36, 43, 0.88) !important;
    font-size: 17px !important;
    font-weight: 760 !important;
    text-align: center !important;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.8),
      0 -1px 0 rgba(24, 32, 42, 0.1) !important;
  }
}