.music-view {margin-inline:auto;color:var(--ocean)}
.music-hero {
  position:relative;isolation:isolate;overflow:hidden;min-height:180px;
  display:grid;align-items:center;padding:clamp(22px,4vw,47px);
  background:linear-gradient(106deg,#e7f1f6 10%,#dcecf6 65%,#c6dfed);border:1px solid #c8deea;
  border-radius:12px
}
.music-hero header {position:relative;z-index:1}
.music-hero .lead {max-width:34ch}
.music-hero-record {
  position:absolute;right:clamp(8px,7vw,82px);top:50%;transform:translateY(-50%) rotate(-13deg);
  display:grid;place-items:center;width:clamp(128px,25vw,249px);aspect-ratio:1;border-radius:50%;
  color:#193955;background:repeating-radial-gradient(circle,#18354f 0 3px,#274a65 4px 5px,#18354f 6px 8px);
  border:6px solid #21415c;box-shadow:5px 16px 44px #1a395640
}
.music-hero-record .icon {width:31%;height:31%;padding:8%;border-radius:50%;background:#d6eaf4;stroke-width:2}
.music-search {display:grid;gap:6px}
.music-search label {font-size:.87rem;font-weight:750}
.music-search-input {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;max-width:690px}
.music-search input {
  width:100%;min-height:48px;padding:8px 13px;font-size:1rem;
  color:var(--ink);border:1px solid #a9c6d5;border-radius:6px;background:#fff
}
.music-search .button {min-height:48px;justify-content:center}
.music-list-head {display:flex;align-items:center;justify-content:space-between;gap:10px}
#music-search-status:empty {display:none}
.music-tracks {display:grid;gap:6px;padding:0;margin-bottom:0;list-style:none}
.music-track-row {
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;
  gap:13px;padding:8px 12px;width:100%;text-align:left;border:1px solid var(--line);border-radius:8px;background:var(--paper)
}
.music-track-row:hover {border-color:var(--shore);background:#f3f9fc}
.music-track-copy {display:grid;gap:1px;min-width:0}
.music-track-copy strong,.music-track-copy span,.music-track-topic {overflow-wrap:anywhere}
.music-track-copy strong {font-size:1rem;line-height:1.3}
.music-track-copy span,.music-track-topic {font-size:.81rem;color:var(--quiet)}
.music-play {
  display:grid;place-items:center;width:34px;height:34px;color:var(--ocean);
  border-radius:50%;background:var(--surf)
}
.music-play .icon {height:15px;width:15px}
.music-disc {
  --disc-outer:#28536d;--disc-inner:#cfebf2;display:grid;place-items:center;
  width:47px;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,var(--disc-outer) 0 2px,#23425c 3px 4px);
  color:#163950;font-family:var(--title);font-size:.7rem
}
.music-disc span {display:grid;place-items:center;width:45%;aspect-ratio:1;border-radius:50%;background:var(--disc-inner)}
[data-tone="sand"] .music-disc {--disc-outer:#784f5d;--disc-inner:#f4e1dc}
[data-tone="sun"] .music-disc {--disc-outer:#8a6c45;--disc-inner:#f4e4b7}
[data-tone="deep"] .music-disc {--disc-outer:#284066;--disc-inner:#d2ddf0}
.music-detail-head {
  display:flex;align-items:center;gap:clamp(13px,4vw,28px);padding:clamp(15px,4vw,28px);
  border-radius:10px;border:1px solid #ccdee8;background:linear-gradient(100deg,#e5f1f8,#f2f8fa)
}
.music-detail-head .music-disc {width:clamp(58px,10vw,92px);flex:none;font-size:1.1rem}
.music-detail-head .page-title {font-size:clamp(1.85rem,5vw,3.8rem);overflow-wrap:anywhere}
.music-detail-grid {display:grid;grid-template-columns:minmax(0,1.75fr) minmax(235px,1fr);gap:15px;align-items:start}
.music-player,.music-lesson-invite {min-width:0}
.music-player {padding:12px}
.music-player audio {display:block;width:100%}
.music-inline-player {padding:0}
.music-inline-player p {margin-top:6px}
.music-player iframe {display:block;width:100%;border:0;border-radius:7px;background:#e8eff4}
.music-apple {height:175px}
.music-video {aspect-ratio:16/9;min-height:200px}
.music-lesson-invite {border-top:3px solid #77a7c4}
.music-lesson-invite .button {width:100%;justify-content:center}
.music-caption {display:grid;gap:2px;padding:13px;min-height:86px;border-radius:7px;background:var(--ocean);color:#fff}
.music-caption p:first-child {font-weight:750}
.music-caption p + p {color:#cfe6f4}
.music-transcript {border:1px solid var(--line);border-radius:7px;background:var(--foam)}
.music-transcript summary {padding:9px 11px;font-weight:700;cursor:pointer}
.music-transcript ol {list-style:none;margin:0;padding:0;max-height:288px;overflow:auto}
.music-transcript button {
  display:grid;grid-template-columns:36px minmax(0,1fr);gap:7px;width:100%;text-align:left;
  padding:7px 10px;border:0;border-top:1px solid var(--line);background:#fff;color:var(--ink);font-size:.86rem
}
.music-transcript button:hover {background:#eaf4f9}
.music-transcript button > span {display:grid;gap:2px}
.music-transcript time,.music-transcript span span {color:var(--quiet)}
.music-game-progress {display:grid;gap:5px;color:var(--quiet);font-size:.82rem;font-weight:750}
.music-game-progress progress {height:7px}
.music-question .answer-feedback {padding:11px;border-radius:7px}
.music-order {display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-height:54px;padding:7px;border-radius:6px;border:1px solid var(--line);background:var(--foam)}
.music-order span {background:#fff;border:1px solid var(--line);border-radius:6px;padding:5px 8px}
.music-word {min-width:40px}
.music-clip {display:flex;gap:7px;align-items:center}
.music-end {border-top:3px solid var(--sky)}
.music-score {font:500 clamp(2.6rem,9vw,4rem)/1 var(--title);color:var(--blue)}
@media(max-width:740px) {
  .music-detail-grid {grid-template-columns:1fr}
  .music-hero-record {right:-18px;opacity:.24}
  .music-hero .lead {max-width:30ch}
}
@media(max-width:480px) {
  .music-hero {min-height:155px}
  .music-track-row {grid-template-columns:auto minmax(0,1fr) auto;gap:8px 9px;padding:7px 9px}
  .music-track-row .music-disc {grid-row:span 2}
  .music-track-topic {grid-column:2;grid-row:2;margin-top:-6px;font-size:.73rem}
  .music-play {grid-column:3;grid-row:1/span 2}
  .music-detail-head .page-title {letter-spacing:-.035em}
  .music-search-input .button .icon {display:none}
}

.music-passage {
  border-left:3px solid var(--sky);background:#edf5f9;border-radius:0 7px 7px 0;
  padding:11px 13px;color:var(--ocean);font-size:1.04rem;line-height:1.55;overflow-wrap:anywhere
}
.music-source {font-size:.78rem;overflow-wrap:anywhere}
#music-lyrics {
  display:block;width:100%;resize:vertical;min-height:165px;padding:9px 11px;color:var(--ink);
  background:#fff;border:1px solid #a9c6d5;border-radius:7px;font:inherit
}
#music-lyrics-error:empty {display:none}
.music-observations fieldset {margin:0;padding:0 0 12px;border:0;border-bottom:1px solid var(--line);min-width:0}
.music-observations legend {font-weight:800}
.music-observations fieldset .row {margin-top:8px;gap:6px}
.music-observations [aria-pressed="true"] {background:#dfedf6;border-color:#8db8d4}
.music-lesson-invite > .text-btn {min-height:35px}

.music-collections,.music-pagination {
  display:flex;flex-wrap:wrap;align-items:center;gap:8px
}
.music-collections [aria-pressed="true"] {
  background:var(--ocean);border-color:var(--ocean);color:white
}
.music-genre-filter {display:grid;gap:6px;max-width:300px}
.music-genre-filter label {font-size:.87rem;font-weight:750}
.music-genre-filter select {
  width:100%;min-height:44px;padding:8px 12px;font:inherit;
  color:var(--ink);background:white;border:1px solid #a9c6d5;border-radius:6px
}
.music-range {text-align:right;white-space:nowrap}
.music-chart-sources {color:var(--quiet)}
.music-chart-sources summary {cursor:pointer;font-size:.82rem}
.music-chart-sources p {margin-top:6px}
.music-pagination {justify-content:space-between;padding-block:8px}
#music-list-title {scroll-margin-top:80px}
.music-track-topic:empty {display:none}
.music-track-row .music-play {grid-column:4}
.music-extra {display:flex;flex-wrap:wrap;gap:2px 12px}
.music-extra .text-btn {min-height:34px}
@media(max-width:480px) {
  .music-track-row {grid-template-columns:auto minmax(0,1fr) auto}
  .music-track-row .music-play {grid-column:3}
  .music-list-head {align-items:flex-start;flex-wrap:wrap;gap:2px 10px}
  .music-pagination .button {gap:3px;padding-inline:8px}
}