* {
    box-sizing: border-box;
}


body {

    margin: 0;

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 20px;


    font-family:

    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Microsoft YaHei",
    Arial,
    sans-serif;


    color: white;


    background:

    linear-gradient(
        135deg,
        #111,
        #222
    );


    transition:

    background 2s ease;


    overflow-x: hidden;

}



/* 背景光晕 */

body::before {


    content:"";


    position:fixed;


    width:500px;


    height:500px;


    top:-200px;


    left:-200px;



    background:

    radial-gradient(

        circle,

        rgba(255,255,255,0.15),

        transparent 70%

    );



    filter:blur(80px);


    z-index:-1;



}



.card {


    width:100%;


    max-width:420px;



    padding:28px;



    text-align:center;



    border-radius:35px;



    background:

    rgba(

        255,

        255,

        255,

        0.13

    );



    backdrop-filter:

    blur(35px);



    -webkit-backdrop-filter:

    blur(35px);



    border:

    1px solid

    rgba(

        255,

        255,

        255,

        0.18

    );



    box-shadow:


    0 25px 80px

    rgba(

        0,

        0,

        0,

        0.45

    );


}



/* 专辑封面 */

#cover {


    width:100%;


    aspect-ratio:1/1;



    object-fit:cover;



    border-radius:28px;



    box-shadow:


    0 20px 50px

    rgba(

        0,

        0,

        0,

        0.55

    );



    transition:

    transform .5s ease,

    box-shadow .5s ease;


}



/* 播放状态 */

#cover.playing {


    animation:


    breathe 3s infinite ease-in-out;


}



@keyframes breathe {


    0% {


        transform:

        scale(1);



    }



    50% {


        transform:

        scale(1.035);



        box-shadow:


        0 25px 80px

        rgba(

        255,

        255,

        255,

        0.35

        );


    }



    100% {


        transform:

        scale(1);



    }

}




h1 {


    margin-top:30px;



    margin-bottom:10px;



    font-size:28px;



    line-height:1.3;



    font-weight:700;



}




h2 {


    margin:0;



    font-size:20px;



    font-weight:500;



    opacity:0.9;


}



p {


    margin-top:15px;



    font-size:17px;



    opacity:0.75;



}



/* 播放器 */

audio {


    width:100%;



    margin-top:30px;



    border-radius:20px;


}



/* 信息区域 */


.info {


    margin-top:30px;



    padding:20px;



    display:flex;



    flex-direction:column;



    gap:12px;



    text-align:left;



    border-radius:25px;



    background:


    rgba(

        255,

        255,

        255,

        0.12

    );



    border:

    1px solid

    rgba(

        255,

        255,

        255,

        0.1

    );



}




.info p {


    margin:0;



    padding:12px 15px;



    border-radius:15px;



    background:


    rgba(

        255,

        255,

        255,

        0.08

    );



    font-size:14px;



    opacity:0.9;


}



/* 手机适配 */


@media(max-width:480px){



    .card{


        padding:22px;


        border-radius:30px;


    }



    h1{


        font-size:24px;


    }



    h2{


        font-size:18px;


    }


}