/* Keep the existing card grid and its responsive cover-to-buttons spacing. */
.demo-with-player { position: relative; }
.demo-with-player .cover { position: relative; z-index: 0; }
.demo-cover-art { display: inline-block; position: relative; left: 2%; transform: perspective(400px) rotateY(24deg); }
.demo-with-player .dcoverimg { transform: none; left: 0; display: block; }
.demo-cover-reflection { position: absolute; left: 0; top: 100%; width: 100%; height: 100%; transform: scaleY(-1); opacity: .33; pointer-events: none; }
.demo-preview { position: relative; width: 100%; min-width: 0; }
.demo-preview-sizing { visibility: hidden; pointer-events: none; user-select: none; }
.demo-wave-definition { position: absolute; pointer-events: none; }
.demo-preview .mejs__container { position: absolute; top: var(--catalog-wave-top, 0px); width: 100% !important; height: var(--catalog-wave-height, 63px) !important; margin: 0; }
.demo-preview .mejs__time-total { clip-path: var(--catalog-waveform); -webkit-clip-path: var(--catalog-waveform); }
.demo-preview .mejs__button>button { width: 22px; height: 22px; }
.demo-preview .audio-button-silhouette { inset: -2.75px; width: 27.5px; height: 27.5px; }
.demo-preview .mejs__button>button::after { width: 22px; height: 22px; }
.demo-with-player .dtitle, .demo-with-player .dsubtitle { position: relative; z-index: 30; }
.demo-with-player .dbuttons { position: relative; z-index: 30; }
/* Clip decorative layers before the buttons, including their transparent centers. */
.demo-with-player .cover { clip-path: inset(-10px -100px var(--cover-clip-bottom, -55px) -100px); }
/* Keep the reflected artwork full-size. Only its fade/crop stays shallow;
   the whole player must remain unisolated for the shared Screen glow. */
.demo-preview .audio-waveform-reflection {
    mask-image: var(--catalog-reflection-fade) !important;
    -webkit-mask-image: var(--catalog-reflection-fade) !important;
    clip-path: inset(0 0 max(0px, calc(100% - var(--catalog-reflection-room, 42px))) 0);
}

.demo-cover-reflection { -webkit-mask-image: linear-gradient(to top, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.987) .1%, hsla(0, 0%, 0%, 0.951) .4%, hsla(0, 0%, 0%, 0.896) .9%, hsla(0, 0%, 0%, 0.825) 1.5%, hsla(0, 0%, 0%, 0.741) 2.4%, hsla(0, 0%, 0%, 0.648) 3.6%, hsla(0, 0%, 0%, 0.55) 4.9%, hsla(0, 0%, 0%, 0.45) 6.5%, hsla(0, 0%, 0%, 0.352) 8.3%, hsla(0, 0%, 0%, 0.259) 10.4%, hsla(0, 0%, 0%, 0.175) 12.8%, hsla(0, 0%, 0%, 0.104) 15.4%, hsla(0, 0%, 0%, 0.049) 18.3%, hsla(0, 0%, 0%, 0.013) 21.5%, hsla(0, 0%, 0%, 0) 25%); mask-image: linear-gradient(to top, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.987) .1%, hsla(0, 0%, 0%, 0.951) .4%, hsla(0, 0%, 0%, 0.896) .9%, hsla(0, 0%, 0%, 0.825) 1.5%, hsla(0, 0%, 0%, 0.741) 2.4%, hsla(0, 0%, 0%, 0.648) 3.6%, hsla(0, 0%, 0%, 0.55) 4.9%, hsla(0, 0%, 0%, 0.45) 6.5%, hsla(0, 0%, 0%, 0.352) 8.3%, hsla(0, 0%, 0%, 0.259) 10.4%, hsla(0, 0%, 0%, 0.175) 12.8%, hsla(0, 0%, 0%, 0.104) 15.4%, hsla(0, 0%, 0%, 0.049) 18.3%, hsla(0, 0%, 0%, 0.013) 21.5%, hsla(0, 0%, 0%, 0) 25%); }