.card-media{position:relative;width:100%;aspect-ratio:1;overflow:hidden;container-type:inline-size;background:#e8f2f6}
.card-media-song{background:#f2eee6}
.card-media-image{display:block;width:100%;height:100%;object-fit:cover}
.card-media-shade{position:absolute;inset:0;background:rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:opacity .2s}
button.card-media-button[id^="play-btn-"]{position:absolute;z-index:2;right:12px;bottom:12px;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:999px;background:rgba(20,24,28,.82);color:white;font-size:12px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;max-width:calc(100% - 64px)}
button.card-media-button[id^="play-btn-"]>i{font-size:14px!important;margin:0!important}
button.card-media-button:disabled{cursor:default;opacity:.65}
button.card-media-button:focus-visible{outline:3px solid white;outline-offset:3px}
.card-media-time{position:absolute;z-index:2;top:12px;right:12px;padding:4px 6px;border-radius:5px;background:rgba(20,24,28,.74);color:white;font-size:10px;line-height:1.4;font-variant-numeric:tabular-nums;pointer-events:none}
.card-media-progress{position:absolute;z-index:3;left:0;bottom:0;height:3px;background:#38bcec;pointer-events:none}
.card-media-song .card-media-progress{background:#f5b033}
@media(hover:hover){.card-media:hover .card-media-shade{opacity:1}.card-media-button:hover{background:#15191d}}
.card-media:focus-within .card-media-shade{opacity:1}
@container(max-width:170px){button.card-media-button[id^="play-btn-"]{right:8px;bottom:8px;padding:0}.card-media-time{top:8px;right:8px;padding:3px 4px}}
@media(prefers-reduced-motion:reduce){.card-media-shade{transition:none}}

.audio-card:has(.card-media-button){position:relative}
.dk-card.audio-card .dk-card-visual{position:static;overflow:visible}
.dk-card.audio-card .card-media{border-radius:14px}
.dk-card.audio-card>.dk-card-row:last-child{padding-right:52px;min-height:44px}
.dk-card.audio-card .dk-card-author{flex-shrink:1;max-width:100%}
.dk-card.audio-card .dk-card-author span{min-width:0}
.audio-card button.card-media-button[id^="play-btn-"]{right:16px;bottom:16px;max-width:none}
.audio-card:not(.dk-card):has(.card-media-button){padding-bottom:56px}
@media(max-width:600px){.audio-card button.card-media-button[id^="play-btn-"]{right:10px;bottom:10px}}