body{margin:0;font-family:sans-serif;background:#120812;color:#ffd1ea;overflow-x:hidden}
.page{display:none;padding:20px;text-align:center;animation:fade .6s}
.page.active{display:block}
@keyframes fade{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}

.card{max-width:500px;margin:auto;background:rgba(255,255,255,.06);padding:20px;border-radius:20px;backdrop-filter:blur(10px)}

.avatar{width:120px;height:120px;border-radius:50%;border:3px solid #ff4d9a}

button{padding:10px 20px;margin:10px;border:none;border-radius:14px;background:#ff4d9a;color:white;box-shadow:0 0 20px #ff4d9a}

#player{position:fixed;bottom:0;width:100%;background:#1a0a12;padding:10px;text-align:center}

#bg{position:fixed;inset:0;overflow:hidden;z-index:-1}

.heart{position:absolute;color:#ff4d9a;animation:float 8s linear infinite;opacity:.7}

@keyframes float{
from{transform:translateY(100vh) scale(.5)}
to{transform:translateY(-10vh) scale(1.2)}
}