.chapter-music .left-sheet { padding-top: 94px; }
.chapter-music h1 { max-width: 8ch; }
.music-intro { max-width: 36ch; margin-top: 32px; }
.music-record {
  width: min(290px, 80%);
  aspect-ratio: 1;
  margin: 46px auto 8px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 4px, #ffffff12 5px 6px),
    radial-gradient(circle, #b5a48e 0 8%, #352e2c 8.5% 12%, #593b41 12.5% 46%, #352e2c 47% 100%);
  box-shadow: 15px 19px 26px #4a302528, inset 0 0 0 2px #ffffff18;
  transform: rotate(-12deg);
  animation: record-turn 11s linear infinite paused;
}
.music-record.is-playing { animation-play-state: running; }
.music-record span {
  display: grid;
  place-items: center;
  width: 17%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #e5c6aa;
  color: var(--rose);
  font-size: clamp(1rem, 2.2vw, 1.65rem);
  animation: record-heartbeat 1.8s ease-in-out infinite paused;
}
.music-record.is-playing span { animation-play-state: running; }
@keyframes record-turn {
  from { transform: rotate(-12deg); }
  to { transform: rotate(348deg); }
}
@keyframes record-heartbeat {
  0%, 100% { transform: scale(1); }
  18% { transform: scale(1.12); }
  36% { transform: scale(1); }
  54% { transform: scale(1.07); }
  72% { transform: scale(1); }
}
.chapter-music .right-sheet { padding-top: 98px; }
.listening-room { display: grid; gap: 22px; }
.audio-card {
  min-width: 0;
  padding: 29px 28px 28px;
  border: 1px solid var(--line);
  background: #fff9ef;
}
.audio-card-music { border-top: 4px solid var(--rose); }
.audio-card-voice { border-top: 4px solid var(--green); }
.audio-card-kicker {
  display: block;
  margin-bottom: 13px;
  color: var(--rose);
  font: .66rem/1.4 var(--ui);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.audio-card-voice .audio-card-kicker { color: var(--green); }
.audio-card h2, .audio-card h3 { font-size: clamp(1.8rem, 2.7vw, 2.25rem); }
.audio-card-note { margin: 15px 0 24px; line-height: 1.6; }
.audio-card-empty {
  margin: 0;
  padding: 16px 18px;
  border-left: 2px solid #b49483;
  background: #f5ebdf;
  color: var(--muted);
  font: .83rem/1.6 var(--ui);
}
.audio-card audio { display: block; width: 100%; max-width: 100%; color-scheme: light; }
.audio-card audio[hidden] { display: none; }
.audio-card .text-link { margin-top: 16px; }
.song-lyrics { margin-top: 23px; border-top: 1px solid var(--line); }
.song-lyrics summary {
  min-height: 48px;
  padding: 14px 3px;
  color: var(--rose);
  font: .82rem/1.4 var(--ui);
  cursor: pointer;
}
.song-lyrics summary:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.song-lyrics-content { padding: 10px 2px 4px; }
.song-lyrics-stanza {
  margin: 0 0 1.25em;
  font: 1rem/1.65 var(--body);
  white-space: pre-line;
  overflow-wrap: break-word;
}
.song-lyrics-message { color: var(--muted); font-size: .85rem; }
.chapter-hand { display: block; }
.chapter-hand::after { display: none; }
.chapter-hand > .left-sheet {
  padding: 91px max(48px, calc((100% - 680px) / 2)) 35px;
  box-shadow: none;
  border-bottom: 1px solid var(--line);
}
.chapter-hand .left-content { position: static; }
.chapter-hand h1 { font-size: clamp(3.9rem, 6vw, 5.8rem); }
.hand-intro { max-width: 34ch; margin: 22px 0 0; font-size: 1.45rem; }
.chapter-hand > .right-sheet { padding: 24px 30px 68px; box-shadow: none; }
.chapter-hand .poem { max-width: 650px; }
.chapter-hand .poem .stanza:first-child { font-size: inherit; color: var(--ink); }
.chapter-hand .poem .stanza:last-child { color: var(--rose); font-size: inherit; font-style: normal; }
.chapter-hand .audio-card { max-width: 620px; margin: 40px auto 0; scroll-margin-top: 80px; }
@media (min-width: 980px) {
  body:has(.chapter-hand) :is(.book, .reading-tools) { max-width: 940px; }
}
.audio-card-voice::after {
  content: '♪';
  display: block;
  margin-top: 20px;
  color: var(--green);
  font: 1.7rem/1 var(--heading);
  text-align: right;
}
@media (max-width: 979px) {
  .chapter-music .left-sheet { padding-top: 78px; }
  .chapter-music .right-sheet { padding-top: 26px; }
  .music-record { width: 180px; margin-top: 28px; }
  .chapter-hand > .left-sheet { padding: 76px 48px 30px; }
  .chapter-hand > .right-sheet { padding: 22px 29px 52px; }
}
@media (max-width: 680px) {
  .chapter-music .left-sheet { padding-top: 76px; padding-bottom: 20px; }
  .chapter-music .right-sheet { padding: 14px 23px 34px; }
  .music-intro { margin-top: 23px; }
  .music-record { width: 135px; margin-top: 23px; }
  .audio-card { padding: 23px 19px; }
  .audio-card-note { margin-bottom: 20px; }
  .chapter-hand > .left-sheet { padding: 76px 29px 24px; }
  .chapter-hand > .right-sheet { padding: 12px 6px 40px; }
  .chapter-hand h1 { font-size: clamp(3.5rem, 13vw, 4.8rem); }
  .hand-intro { font-size: 1.25rem; }
  .chapter-hand .audio-card { margin-inline: 23px; }
}