*{box-sizing:border-box}
html{background:#071633}
body{margin:0;background:#071633;color:#fff;font-family:system-ui,sans-serif}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(#071633aa,#071633cc),url("assets/banner.png") center/cover;filter:blur(20px);transform:scale(1.08)}
main{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
.banner{position:relative;width:min(100%,560px,calc((100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))*941/1672));overflow:hidden}
.banner img{display:block;width:100%;height:auto}
.redeem{position:absolute;left:3.5%;top:81.1%;width:93%;height:11.6%;border-radius:999px;overflow:hidden;-webkit-tap-highlight-color:transparent}
.redeem:focus-visible{outline:4px solid #fff;outline-offset:-4px;box-shadow:inset 0 0 0 8px #087aff}
.redeem:hover{box-shadow:inset 0 0 20px #ffffff60}
.redeem:active{background:#ffffff14}
.redeem::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 37%,#fff4 50%,transparent 63%);animation:sweep 3.5s ease-in-out infinite}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.effects{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.effects i{position:absolute;left:var(--x,8%);bottom:-10%;width:18px;aspect-ratio:1;border-radius:50%;border:2px solid #ffe899;background:radial-gradient(circle at 30% 20%,#fff5aa,#ffc338 50%,#b6680a);box-shadow:0 0 12px #ffc23599;animation:float 6s linear infinite;animation-delay:var(--delay,0s)}
.effects i:nth-child(2){--x:90%;--delay:-2s}.effects i:nth-child(3){--x:16%;--delay:-4s}
.effects b{position:absolute;top:17%;left:27%;width:14%;aspect-ratio:1;background:radial-gradient(circle,#fff9ce,#f7d87f55 25%,transparent 65%);animation:sparkle 3s ease-in-out infinite alternate}
.effects b:last-child{top:58%;left:75%;animation-delay:-1.5s}
@keyframes float{from{transform:translateY(0) rotateY(0);opacity:0}15%,70%{opacity:.9}to{transform:translateY(-75svh) rotateY(650deg);opacity:0}}
@keyframes sparkle{from{transform:scale(.4);opacity:.1}to{transform:scale(1.25);opacity:.85}}
@keyframes sweep{from{transform:translateX(-100%)}55%,to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.effects,.redeem::after{display:none}}