@layer features {
.studio-card { display:flex; align-items:center; gap:14px; padding:14px; border-radius:var(--r-md,14px); background:var(--stage,#1c1714); color:#f6efe8; --played:0%; }
.studio-card-play { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; border:0; background:linear-gradient(180deg,#D06448,#A9442D); color:#fff; cursor:pointer; box-shadow:0 6px 18px rgba(169,68,45,.45); }
.studio-card-play svg { width:22px; height:22px; }
.studio-card-body { flex-grow:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.studio-card-wave { position:relative; display:flex; align-items:center; gap:1px; height:56px; overflow:hidden; }
.studio-card-wave i { flex:1 1 0; min-width:1px; border-radius:2px; background:rgba(246,239,232,.35); }
.studio-card-wave::after { content:''; position:absolute; inset:0 auto 0 0; width:var(--played); background:linear-gradient(90deg,rgba(240,161,132,.0),rgba(240,161,132,.25)); border-right:2px solid #F0A184; pointer-events:none; }
.studio-card-meta { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:rgba(246,239,232,.75); font-variant-numeric:tabular-nums; }
}