*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:
"Microsoft YaHei",
sans-serif;
}



body{

height:100vh;
overflow:hidden;

}



.bg{

width:100%;
height:100%;

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


background:

linear-gradient(
135deg,
#ffd6a5,
#ffb5c5,
#ffe8c8
);


position:relative;

}




.card{


width:360px;

padding:30px;

border-radius:25px;


background:

rgba(255,255,255,.75);


backdrop-filter:blur(15px);


text-align:center;


box-shadow:

0 15px 40px
rgba(255,120,80,.25);


animation:

show .8s ease;


}



@keyframes show{

from{

opacity:0;

transform:
translateY(40px)
scale(.9);

}

to{

opacity:1;

transform:
translateY(0)
scale(1);

}

}



.logo{


width:160px;

height:160px;


border-radius:20px;


object-fit:cover;


box-shadow:

0 8px 25px
rgba(0,0,0,.15);


animation:

float 3s infinite;


}



@keyframes float{


50%{

transform:
translateY(-10px);

}


}




h1{


margin-top:20px;

font-size:26px;

color:#ff6b6b;


}



p{


margin-top:15px;

line-height:1.7;

font-size:15px;

color:#555;


}




.loading{


margin-top:25px;

font-size:18px;


color:#ff7f50;


}



#count{


font-size:42px;

font-weight:bold;


color:#ff5252;


}



button{


margin-top:25px;


width:80%;

height:45px;


border:none;


border-radius:30px;


background:

linear-gradient(
90deg,
#ff9966,
#ff5e62
);


color:white;


font-size:16px;


cursor:pointer;


box-shadow:

0 8px 20px
rgba(255,90,90,.3);


transition:.3s;


}



button:hover{

transform:
scale(1.05);

}




.tip{


margin-top:18px;

font-size:13px;

color:#999;


}



.star{


position:absolute;

animation:

move 5s infinite;


}



.s1{

top:20%;

left:20%;

}



.s2{

right:20%;

top:25%;

}



.s3{

bottom:20%;

left:25%;

}




@keyframes move{


50%{

transform:
translateY(-30px)
rotate(20deg);

}

}