/* The hero already provides the gap above this paper section. */
:is(.p-musik,.p-music) #main>.music-scene{padding-top:0}
.music-scene-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);gap:clamp(28px,4vw,56px);align-items:center}
.music-scene-copy h2{font-size:clamp(30px,3.1vw,42px)}
.music-scene-copy p{margin-top:20px;color:var(--ink-2)}
.music-scene-copy a{display:inline-block;margin-top:20px;color:var(--green);text-underline-offset:4px}
.music-scene-media{min-width:0;margin:0}
.music-scene-media video{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:16/9;background:var(--ink);border-radius:var(--r-s)}
.music-scene-media figcaption{margin-top:12px;font-size:14px;line-height:1.5;color:var(--muted)}
.music-scene :is(a,video,button):focus-visible{outline:2px solid var(--green);outline-offset:4px}
@media(max-width:760px){.music-scene-grid{grid-template-columns:minmax(0,1fr);gap:24px}.music-scene-copy{max-width:560px}}
.music-scene-choices:not([hidden]){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:24px}
.music-scene-choices button{min-width:0;min-height:64px;padding:10px 7px;border:1px solid var(--edge);border-radius:6px;background:transparent;color:var(--green);font:inherit;text-align:left;cursor:pointer;overflow-wrap:anywhere}
.music-scene-choices strong{display:block;font-size:14px;line-height:1.25;font-weight:600}
.music-scene-choices span{display:block;margin-top:5px;font-size:12px;line-height:1.25}
.music-scene-choices button:hover{background:var(--paper-2)}
.music-scene-choices button[aria-pressed="true"]{background:var(--green);color:var(--paper);border-color:var(--green)}

/* Reserve the tallest description at the current width so scene changes stay still. */
.music-scene-descriptions{display:grid;margin-top:20px}
.music-scene-descriptions p{grid-area:1/1;margin:0;visibility:hidden}
.music-scene-descriptions p[data-active]{visibility:visible}