body{font-family:Quicksand,SF Pro Display,-apple-system,BlinkMacSystemFont,sans-serif;margin:0;padding:0;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff5f7;color:#2d2d2d}body:before{content:"";position:fixed;inset:0;background-image:url(https://images.unsplash.com/photo-1712404152736-df05a6655a02?w=1740&q=80);background-size:cover;background-position:center;opacity:0;transition:opacity 2s ease-in-out;pointer-events:none;z-index:-1}body.story-mode:before{opacity:.5}#app{text-align:center}h1{font-weight:300;font-size:2.5rem;margin:0 0 .5rem;letter-spacing:-.02em}p{font-weight:400;font-size:1rem;color:#666;margin:0}input{font-family:inherit;font-size:1.25rem;font-weight:300;color:#2d2d2d;background:transparent;border:none;border-bottom:1px solid #ddd;padding:.5rem 0;margin-top:1.5rem;width:200px;text-align:center;outline:none;transition:border-color .2s ease}input::placeholder{color:#bbb}input:focus{border-bottom-color:#ff8fa3}#story{max-width:500px;line-height:1.8;color:#444}#story p{margin-bottom:1rem}body.story-mode{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.3)}body.story-mode #story{color:#fff}body.story-mode .highlight{color:#ffb6c1}.scene{position:fixed;bottom:0;left:0;width:100%;height:280px;overflow:hidden;z-index:10;opacity:0;transition:opacity 2s ease-in-out}body.story-mode .scene{opacity:1}.snow{position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(3px 3px at 20px 30px,white,transparent),radial-gradient(3px 3px at 40px 70px,rgba(255,255,255,.9),transparent),radial-gradient(2px 2px at 90px 40px,white,transparent),radial-gradient(3px 3px at 160px 120px,rgba(255,255,255,.9),transparent),radial-gradient(2px 2px at 230px 80px,white,transparent),radial-gradient(3px 3px at 300px 150px,rgba(255,255,255,.9),transparent),radial-gradient(2px 2px at 370px 50px,white,transparent),radial-gradient(3px 3px at 450px 180px,rgba(255,255,255,.9),transparent),radial-gradient(2px 2px at 520px 90px,white,transparent),radial-gradient(3px 3px at 600px 140px,rgba(255,255,255,.9),transparent),radial-gradient(2px 2px at 680px 60px,white,transparent),radial-gradient(3px 3px at 750px 170px,rgba(255,255,255,.9),transparent),radial-gradient(2px 2px at 820px 30px,white,transparent),radial-gradient(3px 3px at 900px 110px,rgba(255,255,255,.9),transparent),radial-gradient(2px 2px at 980px 70px,white,transparent),radial-gradient(3px 3px at 1050px 160px,rgba(255,255,255,.9),transparent),radial-gradient(2px 2px at 1120px 40px,white,transparent),radial-gradient(3px 3px at 1200px 130px,rgba(255,255,255,.9),transparent);background-size:1300px 200px;animation:snowfall 8s linear infinite}@keyframes snowfall{0%{background-position:0 0}to{background-position:0 200px}}.scene:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:40px;background:linear-gradient(to top,#f0f8ff 0%,#e8f4f8 50%,transparent 100%)}.pair{position:absolute;bottom:0;left:-200px;display:flex;align-items:flex-end;animation:walkAcross 12s linear infinite}@keyframes walkAcross{0%{transform:translate(0)}to{transform:translate(calc(100vw + 200px))}}.character{width:52px;height:64px;position:relative}.character.left{margin-right:-20px;transform:translate(-10px)}.character.right{margin-left:-8px}.sprite{width:4px;height:4px;animation:walk .6s steps(1) infinite}.character.left .sprite{animation-name:walkLeft}.character.right .sprite{animation-name:walkRight;animation-delay:.3s}@keyframes walkLeft{0%,49%{box-shadow:16px 0 #5a4030,20px 0 #5a4030,24px 0 #5a4030,28px 0 #5a4030,16px 4px #5a4030,20px 4px #5a4030,16px 8px #5a4030,20px 8px #5a4030,24px 4px #e0b090,28px 4px #e0b090,24px 8px #e0b090,28px 8px #e0b090,24px 12px #e0b090,20px 16px #3d5a4a,24px 16px #3d5a4a,28px 16px #3d5a4a,16px 20px #3d5a4a,20px 20px #4d6a5a,24px 20px #4d6a5a,28px 20px #3d5a4a,32px 20px #3d5a4a,16px 24px #3d5a4a,20px 24px #4d6a5a,24px 24px #4d6a5a,28px 24px #3d5a4a,32px 24px #3d5a4a,32px 20px #e0b090,36px 20px #e0b090,32px 24px #e0b090,36px 24px #e0b090,40px 16px #5a4a3a,40px 20px #5a4a3a,40px 24px #5a4a3a,40px 28px #5a4a3a,40px 32px #5a4a3a,40px 36px #5a4a3a,40px 40px #5a4a3a,20px 28px #2a3a2a,24px 28px #2a3a2a,20px 32px #2a3a2a,24px 32px #2a3a2a,12px 36px #5a4a3a,16px 36px #5a4a3a,20px 36px #5a4a3a,24px 36px #5a4a3a,28px 36px #5a4a3a,12px 40px #5a4a3a,16px 40px #3a2a1a,20px 40px #5a4a3a,24px 40px #5a4a3a,28px 40px #5a4a3a}50%,to{box-shadow:16px 0 #5a4030,20px 0 #5a4030,24px 0 #5a4030,28px 0 #5a4030,16px 4px #5a4030,20px 4px #5a4030,16px 8px #5a4030,20px 8px #5a4030,24px 4px #e0b090,28px 4px #e0b090,24px 8px #e0b090,28px 8px #e0b090,24px 12px #e0b090,20px 16px #3d5a4a,24px 16px #3d5a4a,28px 16px #3d5a4a,16px 20px #3d5a4a,20px 20px #4d6a5a,24px 20px #4d6a5a,28px 20px #3d5a4a,32px 20px #3d5a4a,16px 24px #3d5a4a,20px 24px #4d6a5a,24px 24px #4d6a5a,28px 24px #3d5a4a,32px 24px #3d5a4a,32px 20px #e0b090,36px 20px #e0b090,32px 24px #e0b090,36px 24px #e0b090,40px 16px #5a4a3a,40px 20px #5a4a3a,40px 24px #5a4a3a,40px 28px #5a4a3a,40px 32px #5a4a3a,40px 36px #5a4a3a,40px 40px #5a4a3a,16px 28px #2a3a2a,20px 28px #2a3a2a,16px 32px #2a3a2a,20px 32px #2a3a2a,8px 36px #5a4a3a,12px 36px #5a4a3a,16px 36px #5a4a3a,20px 36px #5a4a3a,8px 40px #5a4a3a,12px 40px #3a2a1a,16px 40px #5a4a3a,20px 40px #5a4a3a}}@keyframes walkRight{0%,49%{box-shadow:12px 0 #1a1a1a,16px 0 #1a1a1a,20px 0 #1a1a1a,24px 0 #1a1a1a,12px 4px #1a1a1a,16px 4px #1a1a1a,12px 8px #1a1a1a,16px 8px #1a1a1a,16px 12px #1a1a1a,20px 4px #e0b090,24px 4px #e0b090,20px 8px #e0b090,24px 8px #e0b090,20px 12px #e0b090,12px 16px #1a1a1a,12px 20px #1a1a1a,12px 24px #1a1a1a,16px 16px #8b4557,20px 16px #8b4557,24px 16px #8b4557,12px 20px #8b4557,16px 20px #9b5567,20px 20px #9b5567,24px 20px #8b4557,28px 20px #8b4557,12px 24px #8b4557,16px 24px #9b5567,20px 24px #9b5567,24px 24px #8b4557,28px 24px #8b4557,32px 20px #e0b090,36px 20px #e0b090,32px 24px #e0b090,36px 24px #e0b090,40px 16px #5a4a3a,40px 20px #5a4a3a,40px 24px #5a4a3a,40px 28px #5a4a3a,40px 32px #5a4a3a,40px 36px #5a4a3a,40px 40px #5a4a3a,20px 28px #2a3a2a,24px 28px #2a3a2a,20px 32px #2a3a2a,24px 32px #2a3a2a,12px 36px #5a4a3a,16px 36px #5a4a3a,20px 36px #5a4a3a,24px 36px #5a4a3a,28px 36px #5a4a3a,12px 40px #5a4a3a,16px 40px #3a2a1a,20px 40px #5a4a3a,24px 40px #5a4a3a,28px 40px #5a4a3a}50%,to{box-shadow:12px 0 #1a1a1a,16px 0 #1a1a1a,20px 0 #1a1a1a,24px 0 #1a1a1a,12px 4px #1a1a1a,16px 4px #1a1a1a,12px 8px #1a1a1a,16px 8px #1a1a1a,16px 12px #1a1a1a,20px 4px #e0b090,24px 4px #e0b090,20px 8px #e0b090,24px 8px #e0b090,20px 12px #e0b090,12px 16px #1a1a1a,12px 20px #1a1a1a,12px 24px #1a1a1a,16px 16px #8b4557,20px 16px #8b4557,24px 16px #8b4557,12px 20px #8b4557,16px 20px #9b5567,20px 20px #9b5567,24px 20px #8b4557,28px 20px #8b4557,12px 24px #8b4557,16px 24px #9b5567,20px 24px #9b5567,24px 24px #8b4557,28px 24px #8b4557,32px 20px #e0b090,36px 20px #e0b090,32px 24px #e0b090,36px 24px #e0b090,40px 16px #5a4a3a,40px 20px #5a4a3a,40px 24px #5a4a3a,40px 28px #5a4a3a,40px 32px #5a4a3a,40px 36px #5a4a3a,40px 40px #5a4a3a,16px 28px #2a3a2a,20px 28px #2a3a2a,16px 32px #2a3a2a,20px 32px #2a3a2a,8px 36px #5a4a3a,12px 36px #5a4a3a,16px 36px #5a4a3a,20px 36px #5a4a3a,8px 40px #5a4a3a,12px 40px #3a2a1a,16px 40px #5a4a3a,20px 40px #5a4a3a}}