body{
margin:0;
font-family:Arial;
background:#020617;
color:white;
overflow:hidden;
cursor:none;
}

canvas{
position:fixed;
top:0;
left:0;
z-index:0;
}

.container{
position:relative;
z-index:2;
text-align:center;
margin-top:100px;
}

.countdown{
font-size:50px;
margin:20px;
font-weight:bold;
}

.progress-bar{
width:300px;
height:6px;
background:#1e293b;
margin:20px auto;
border-radius:10px;
overflow:hidden;
}

#progress{
height:100%;
width:0%;
background:linear-gradient(90deg,#6366f1,#3b82f6);
}

.timeline{
margin-top:30px;
width:300px;
margin-left:auto;
margin-right:auto;
text-align:left;
}

.step{
padding:10px;
border-left:3px solid #334155;
opacity:0.5;
}

.step.done{border-color:#22c55e;opacity:1;}
.step.active{border-color:#3b82f6;opacity:1;}

.cursor{
width:20px;
height:20px;
border:2px solid #6366f1;
border-radius:50%;
position:fixed;
pointer-events:none;
transform:translate(-50%,-50%);
}