.music { max-width: 40rem; }
.music [hidden] { display: none; }
.music-view { padding: 1.8rem 0; border-top: 1px solid var(--line); }
.music-view:first-child { border-top: 0; padding-top: .6rem; }
.music-view:last-child { padding-bottom: .4rem; }
.music-view h2 { margin: 0 0 .9rem; font: 1.4rem/1.3 var(--serif); }
.music .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.music-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: .8rem; margin: .7rem 0 1rem; font: 2.7rem/1.15 var(--serif); }
.music-big small { color: var(--muted); font: .78rem var(--mono); }
.music-artist-row { display: grid; grid-template-columns: minmax(7rem, 1fr) minmax(1rem, 2fr) 3.3rem; gap: .8rem; align-items: center; width: 100%; padding: .3rem 0; border: 0; background: none; color: var(--ink); font: .82rem/1.4 var(--sans); text-align: left; cursor: pointer; }
.music-artist-row > :last-child { text-align: right; font: .76rem var(--mono); }
.music-artist-row[aria-pressed="true"] > :first-child { font-weight: bold; }
.music-artist-row:hover > :first-child { text-decoration: underline; text-underline-offset: 3px; }
.music-bar { display: block; height: 4px; background: #c9c6b966; }
.music-bar > span { display: block; height: 100%; background: var(--copper); }
.music-artist-row[aria-pressed="true"] .music-bar > span { background: var(--green); }
.music button:focus-visible, .music select:focus-visible { outline: 1px solid var(--copper); outline-offset: 3px; }
.music-song-picker { display: block; margin: .6rem 0 1.2rem; }
.music-song-picker select { display: block; width: 100%; max-width: 100%; padding: .45rem 1.4rem .45rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background-color: transparent; color: var(--green); font: .86rem/1.5 var(--sans); text-overflow: ellipsis; cursor: pointer; }
.music-repeat-focus { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 1.5rem; align-items: center; min-height: 10rem; }
.music-repeat-number { display: flex; flex-direction: column; margin: 0; font: 2.9rem/1 var(--serif); }
.music-repeat-number strong { font-weight: normal; }
.music-repeat-number span { color: var(--muted); font: .8rem/1.5 var(--mono); margin-top: .3rem; }
.music .music-repeat-artist { margin: .7rem 0 .15rem; font: .9rem/1.4 var(--sans); }
.music .music-repeat-time { margin: 0; font: .76rem/1.5 var(--mono); color: var(--muted); }
.music-dots { display: grid; grid-template-columns: repeat(25, 4px); gap: 5px; align-content: center; }
.music-dots i { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--copper); }
.music-dots .version-two { background: var(--green); }
.music .music-insight { margin: 1rem 0 0; font: italic .9rem/1.5 var(--serif); color: var(--muted); }
.music-switch { display: inline-flex; gap: 1rem; margin: 0 0 1.2rem; }
.music-switch button { border: 0; border-bottom: 1px solid transparent; padding: .2rem 0; color: var(--muted); background: none; font: .78rem var(--sans); cursor: pointer; }
.music-switch button[aria-pressed="true"] { color: var(--green); border-bottom-color: var(--copper); }
.music-hour-bars { height: 150px; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; padding-bottom: 26px; margin-top: .3rem; }
.music-hour-bars button { position: relative; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 0; cursor: pointer; }
.music-hour-fill { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--amount) * 100%); background: var(--copper); opacity: .8; }
.music-hour-bars button:hover .music-hour-fill, .music-hour-bars button[aria-pressed="true"] .music-hour-fill { opacity: 1; background: var(--green); }
.music-hour-tick { position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%); white-space: nowrap; color: var(--muted); font: .65rem var(--mono); }
.music-hour-bars button:first-child .music-hour-tick { left: 0; transform: none; }
.music-hour-bars button:last-child .music-hour-tick { left: auto; right: 0; transform: none; }
.music-calendar { display: grid; grid-template-rows: repeat(7, 18px); grid-auto-flow: column; grid-auto-columns: 18px; gap: 4px; width: fit-content; }
.music-calendar button { border: 0; padding: 0; background: rgb(148 93 63 / calc(.07 + var(--amount) * .83)); cursor: pointer; }
.music-calendar button:hover, .music-calendar button[aria-pressed="true"] { outline: 1px solid var(--green); outline-offset: 1px; }
.music-calendar-months { display: flex; justify-content: space-between; max-width: 150px; color: var(--muted); font: .68rem var(--mono); margin-top: .55rem; }
.music .music-inspect { min-height: 1.5em; margin: .5rem 0 0; font: .72rem/1.5 var(--mono); color: var(--muted); }
.music-verdict { display: flex; gap: 3rem; margin: 1.1rem 0; }
.music .music-verdict p { display: flex; flex-direction: column; margin: 0; }
.music-verdict strong { font: 2rem/1.15 var(--serif); }
.music-verdict span { margin-top: .25rem; color: var(--muted); font: .75rem var(--sans); }
#music-tempo svg { display: block; width: 100%; height: auto; overflow: visible; }
#music-tempo svg text { fill: var(--muted); font: 10px var(--mono); }
#music-tempo g:focus { outline: 1px solid var(--copper); outline-offset: 2px; }
.music-grid { stroke: var(--line); }
.music-reference { stroke: var(--copper); stroke-dasharray: 2 4; stroke-width: 1; }
.music-tempo-major { fill: var(--green); }
.music-tempo-minor { fill: var(--copper); }
.music-tempo-unknown { fill: var(--line); }
.music-key { display: flex; flex-wrap: wrap; gap: 1.1rem; color: var(--muted); font: .72rem var(--sans); margin: .4rem 0; }
.music-key > span::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 5px; background: var(--line); }
.music-key .music-major::before { background: var(--green); }
.music-key .music-minor::before { background: var(--copper); }
@media (max-width: 580px) {
  .music-repeat-focus { grid-template-columns: minmax(0, 1fr) 175px; gap: .6rem; }
  .music-dots { grid-template-columns: repeat(25, 3px); gap: 4px; }
  .music-dots i { width: 3px; height: 3px; }
  .music-big { font-size: 2.2rem; }
  .music-repeat-number { font-size: 2.4rem; }
  .music-artist-row { gap: .6rem; }
}
@media (max-width: 350px) {
  .music-repeat-focus { grid-template-columns: 1fr; gap: 1rem; }
  .music-repeat-focus > :first-child { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: end; }
  .music-repeat-number { grid-row: span 2; }
  .music .music-repeat-artist { margin-top: 0; }
}