*{box-sizing:border-box}
body{
margin:0;
font-family:Arial,sans-serif;
background:linear-gradient(135deg,#cbb5ff,#f5efff);
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.screen{display:none;width:100%;justify-content:center;align-items:center}
.screen.active{display:flex}
.card{
width:520px;
background:rgba(255,255,255,.82);
backdrop-filter:blur(12px);
border-radius:28px;
padding:40px;
text-align:center;
box-shadow:0 20px 45px rgba(0,0,0,.18);
animation:fade .4s ease;
}
.logo{font-size:48px}
h1{color:#6d4ad9;margin-bottom:6px}
h2{color:#9878ea;margin-top:0}
.progress{height:12px;background:#e8e3ff;border-radius:999px;overflow:hidden;margin:25px 0}
.fill{height:100%;background:#7b5df5}
button{
border:none;
background:#7b5df5;
color:#fff;
padding:14px 28px;
border-radius:999px;
cursor:pointer;
font-size:16px;
margin:10px;
}
button:hover{transform:scale(1.03)}
.choice{
display:block;
background:white;
padding:16px;
margin:14px 0;
border-radius:16px;
text-align:left;
}
.buttons{display:flex;justify-content:space-between}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}