body{
font-family:Arial, sans-serif;
margin:0;
background:linear-gradient(#dff4ff,#fff1d6,#ffe9ff);
color:#334;
text-align:center;
}

.app{max-width:900px;margin:auto;padding:20px}

.top{margin-bottom:20px}

.title{font-size:24px;font-weight:bold}

.progress{display:flex;gap:6px;justify-content:center;margin-top:10px}
.step{
padding:6px 10px;
background:#eee;
border-radius:20px;
font-size:12px;
}
.step.active{background:#ffd86a}

.screen{display:none;animation:fade .4s}
.screen.active{display:block}

button{
padding:12px 20px;
margin:10px;
border:none;
border-radius:30px;
background:#ffd86a;
font-weight:bold;
cursor:pointer;
}

.story-card{
background:white;
padding:30px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,.1)
}

.choices{margin:20px 0}
.hidden{display:none}

.dedication{font-style:italic;color:#666}

@keyframes fade{
from{opacity:0;transform:translateY(10px)}
to{opacity:1}
}

.spark{
position:fixed;
width:8px;
height:8px;
border-radius:50%;
animation:burst 1s forwards;
}

@keyframes burst{
0%{opacity:1;transform:translate(0,0)}
100%{opacity:0;transform:translate(var(--dx),var(--dy))}
}