.meditation-container{
max-width:420px;
margin:auto;
padding:30px 20px;
}

.meditation-card{

display:block;
width:100%;

padding:16px;

margin-bottom:14px;

border-radius:14px;

background:rgba(255,255,255,0.15);

border:none;

color:white;

font-size:16px;

cursor:pointer;

transition:.2s;
}

.meditation-card:hover{
background:rgba(255,255,255,0.25);
}

.hidden{
display:none;
}


#player{

background:rgba(255,255,255,0.12);

backdrop-filter:blur(10px);

border-radius:20px;

padding:30px;

box-shadow:0 20px 50px rgba(0,0,0,0.25);

}


.controls{
margin-top:30px;
}


#playBtn{

font-size:30px;

border:none;

align-items:center;
justify-content:center;

background:linear-gradient(
135deg,
rgba(255,255,255,0.4),
rgba(255,255,255,0.15)
);

color:white;

border-radius:50%;

width:80px;
height:80px;

cursor:pointer;

box-shadow:0 10px 25px rgba(0,0,0,0.3);

transition:.2s;

}

#playBtn:hover{
transform:scale(1.1);
}


.progress{

height:6px;

background:rgba(255,255,255,0.2);

margin-top:20px;

border-radius:10px;

overflow:hidden;
}


#progressBar{

height:100%;

width:0%;

background:white;

}

.time{

margin-top:12px;

font-size:14px;

color:white;

opacity:.9;

}

.back-btn{

margin-top:30px;

background:none;

border:none;

color:white;

cursor:pointer;

font-size:16px;

}

.breathing-bg{

position:absolute;

top:50%;
left:50%;

width:300px;
height:300px;

transform:translate(-50%,-50%);

border-radius:50%;

background:rgba(255,255,255,0.08);

animation:breathe 10s ease-in-out infinite;

filter:blur(20px);

}

@keyframes breathe{

0%{
transform:translate(-50%,-50%) scale(0.9);
}

50%{
transform:translate(-50%,-50%) scale(1.2);
}

100%{
transform:translate(-50%,-50%) scale(0.9);
}

}