@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap";:root{--primary-blue:#0ea5e9;--light-blue:#7dd3fc;--dark-blue:#0284c7;--bg-gradient:linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);--glass-bg:#ffffffb3;--glass-border:#ffffff80;--glass-shadow:0 8px 32px 0 #0ea5e926;--text-main:#0f172a;--text-muted:#64748b;--silhouette-bg:#0000001a;--font-family:"Outfit", system-ui, sans-serif}@media (prefers-color-scheme:dark){:root{--bg-gradient:linear-gradient(135deg, #0f172a 0%, #1e293b 100%);--glass-bg:#0f172a99;--glass-border:#ffffff1a;--glass-shadow:0 8px 32px 0 #0006;--text-main:#f8fafc;--text-muted:#94a3b8;--silhouette-bg:#ffffff1a}}*{box-sizing:border-box;margin:0;padding:0}button:active,.btn:active,.glass-panel[role=button]:active{transition:transform .1s cubic-bezier(.4,0,.2,1);transform:scale(.95)}html,body{font-family:var(--font-family);background:var(--bg-gradient);color:var(--text-main);overscroll-behavior-y:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh}#root{max-width:600px;margin:0 auto;padding:20px 20px 40px}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:24px;padding:24px}.btn{background:var(--primary-blue);color:#fff;cursor:pointer;border:none;border-radius:100px;justify-content:center;align-items:center;gap:8px;padding:16px 32px;font-family:inherit;font-size:1.1rem;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);display:inline-flex;box-shadow:0 4px 12px #0ea5e94d}.btn:active{transform:scale(.95);box-shadow:0 2px 6px #0ea5e94d}.btn-secondary{color:var(--primary-blue);border:2px solid var(--primary-blue);box-shadow:none;background:0 0}h1{letter-spacing:-1px;margin-bottom:8px;font-size:2.5rem;font-weight:800}h2{color:var(--text-main);font-size:1.5rem;font-weight:600}p{color:var(--text-muted);line-height:1.6}.progress-container{width:250px;height:250px;margin:40px auto;position:relative}.water-bottle{border:8px solid var(--glass-border);background:var(--silhouette-bg);-webkit-backdrop-filter:blur(12px)brightness(1.2);border-radius:50%;width:100%;height:100%;position:relative;overflow:hidden;box-shadow:inset 0 0 20px #0000001a}.water-fill{background:linear-gradient(180deg, var(--light-blue) 0%, var(--primary-blue) 100%);z-index:1;width:100%;transition:height 1.2s cubic-bezier(.34,1.56,.64,1);position:absolute;bottom:0;left:0}.water-fill:after{content:"";opacity:.8;background-image:radial-gradient(circle at 20% 30%,#fff6 1px,#0000 1px),radial-gradient(circle at 70% 60%,#fff6 2px,#0000 2px),radial-gradient(circle at 40% 80%,#fff3 1.5px,#0000 1.5px);background-size:40px 40px;animation:3s linear infinite floatBubbles;position:absolute;inset:0}@keyframes floatBubbles{0%{background-position:0 40px}to{background-position:0 0}}.water-fill:before{content:"";background:#ffffff59;border-radius:40%;width:130%;height:18px;animation:3s ease-in-out infinite waterWave;position:absolute;top:-8px;left:-15%}@keyframes waterWave{0%,to{transform:translate(-5%)scaleY(1)}50%{transform:translate(5%)scaleY(.7)}}@keyframes wave{0%{transform:translate(-50%)rotate(0)}to{transform:translate(-50%)rotate(360deg)}}.progress-text{z-index:10;text-align:center;color:var(--text-main);text-shadow:0 2px 10px #ffffff80;font-size:2.5rem;font-weight:800;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.progress-subtext{opacity:.8;font-size:1rem;font-weight:600}.social-list{flex-direction:column;gap:16px;margin-top:20px;display:flex}.social-item{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:16px;justify-content:space-between;align-items:center;padding:16px;display:flex}.social-item-name{font-size:1.1rem;font-weight:600}.social-item-amount{color:var(--primary-blue);font-size:1.2rem;font-weight:800}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-slide-up{animation:.6s cubic-bezier(.16,1,.3,1) slideUp}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.animate-pop{animation:.3s ease-in-out pop}.pikachu-mask{border:none;-webkit-mask-image:url(/pikachu.png);mask-image:url(/pikachu.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}@keyframes sparking{0%{filter:drop-shadow(0 0 5px #fbbf24)drop-shadow(0 0 10px #fbbf24)}50%{filter:drop-shadow(0 0 2px #f59e0b)drop-shadow(0 0 5px #f59e0b)}to{filter:drop-shadow(0 0 5px #fbbf24)drop-shadow(0 0 10px #fbbf24)}}.character-sparking{animation:1s infinite alternate sparking}@keyframes glowingSurge{0%{filter:drop-shadow(0 0 10px #38bdf8)drop-shadow(0 0 20px #0284c7)brightness(1.2)}50%{filter:drop-shadow(0 0 20px #bae6fd)drop-shadow(0 0 40px #38bdf8)brightness(1.5)}to{filter:drop-shadow(0 0 10px #38bdf8)drop-shadow(0 0 20px #0284c7)brightness(1.2)}}.character-glowing{animation:2s infinite alternate glowingSurge}.eevee-mask{border:none;-webkit-mask-image:url(/eevee.png);mask-image:url(/eevee.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.vaporeon-mask{border:none;-webkit-mask-image:url(/vaporeon.png);mask-image:url(/vaporeon.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.jolteon-mask{border:none;-webkit-mask-image:url(/jolteon.png);mask-image:url(/jolteon.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.flareon-mask{border:none;-webkit-mask-image:url(/flareon.png);mask-image:url(/flareon.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.umbreon-mask{border:none;-webkit-mask-image:url(/umbreon.png);mask-image:url(/umbreon.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.espeon-mask{border:none;-webkit-mask-image:url(/espeon.png);mask-image:url(/espeon.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.leafeon-mask{border:none;-webkit-mask-image:url(/leafeon.png);mask-image:url(/leafeon.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.glaceon-mask{border:none;-webkit-mask-image:url(/glaceon.png);mask-image:url(/glaceon.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.sylveon-mask{border:none;-webkit-mask-image:url(/sylveon.png);mask-image:url(/sylveon.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.party_pikachu-mask{border:none;-webkit-mask-image:url(/party_pikachu.png);mask-image:url(/party_pikachu.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.detective_pikachu-mask{border:none;-webkit-mask-image:url(/detective_pikachu.png);mask-image:url(/detective_pikachu.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.ash_pikachu-mask{border:none;-webkit-mask-image:url(/ash_pikachu.png);mask-image:url(/ash_pikachu.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mewtwo-mask{border:none;-webkit-mask-image:url(/mewtwo.png);mask-image:url(/mewtwo.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.appa-mask{border:none;-webkit-mask-image:url(/appa.png);mask-image:url(/appa.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.naga_korra-mask{border:none;-webkit-mask-image:url(/naga_korra.png);mask-image:url(/naga_korra.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.squirtle-mask{background:#ffffff1a;border:none;-webkit-mask-image:url(/squirtle.png);mask-image:url(/squirtle.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.korra-mask{background:#ffffff1a;border:none;-webkit-mask-image:url(/korra.png);mask-image:url(/korra.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.fire_korra-mask{background:#ffffff1a;border:none;-webkit-mask-image:url(/fire_korra.png);mask-image:url(/fire_korra.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.earth_korra-mask{background:#ffffff1a;border:none;-webkit-mask-image:url(/earth_korra.png);mask-image:url(/earth_korra.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.water_korra-mask{background:#ffffff1a;border:none;-webkit-mask-image:url(/water_korra.png);mask-image:url(/water_korra.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.avatar_korra-mask{background:#ffffff1a;border:none;-webkit-mask-image:url(/avatar_korra.png);mask-image:url(/avatar_korra.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.naga-mask{background:#ffffff1a;border:none;-webkit-mask-image:url(/naga.png);mask-image:url(/naga.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.kitana-mask{background:#ffffff1a;border:none;-webkit-mask-image:url(/kitana.png);mask-image:url(/kitana.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.orca-mask{background:#ffffff1a;border:none;-webkit-mask-image:url(/orca.png);mask-image:url(/orca.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.dolphin-mask{background:#ffffff1a;border:none;-webkit-mask-image:url(/dolphin.png);mask-image:url(/dolphin.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.howl-mask{background:#ffffff1a;border:none;-webkit-mask-image:url(/howl.png);mask-image:url(/howl.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mew-mask{background:#ffffff1a;border:none;-webkit-mask-image:url(/mew.png);mask-image:url(/mew.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.sophie-mask{background:#ffffff1a;border:none;-webkit-mask-image:url(/sophie.png);mask-image:url(/sophie.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.scorpion-mask{background:#ffffff1a;border:none;-webkit-mask-image:url(/scorpion.png);mask-image:url(/scorpion.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}@keyframes float-heart{0%{opacity:0;transform:translate(-50%,100%)scale(.5)}20%{opacity:1;transform:translate(-50%,-20%)scale(1.5)}80%{opacity:1;transform:translate(-50%,-80%)scale(1.5)}to{opacity:0;transform:translate(-50%,-100%)scale(1)}}.floating-heart{z-index:50;pointer-events:none;font-size:4rem;animation:2s ease-in-out forwards float-heart;position:absolute;top:50%;left:50%}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes slideDown{0%{opacity:0;transform:translate(-50%,-100%)}to{opacity:1;transform:translate(-50%)}}@keyframes heartBeat{0%{transform:scale(1)}15%{transform:scale(1.2)}30%{transform:scale(1)}45%{transform:scale(1.2)}60%{transform:scale(1)}}@keyframes shake{0%{transform:translate(1px,1px)rotate(0)}10%{transform:translate(-1px,-2px)rotate(-5deg)}20%{transform:translate(-3px)rotate(5deg)}30%{transform:translate(3px,2px)rotate(0)}40%{transform:translate(1px,-1px)rotate(5deg)}50%{transform:translate(-1px,2px)rotate(-5deg)}60%{transform:translate(-3px,1px)rotate(0)}70%{transform:translate(3px,1px)rotate(-5deg)}80%{transform:translate(-1px,-1px)rotate(5deg)}90%{transform:translate(1px,2px)rotate(0)}to{transform:translate(1px,-2px)rotate(-5deg)}}.central-heart-container{z-index:10;flex-shrink:0;justify-content:center;align-items:center;width:80px;height:80px;margin:0 -20px;display:flex;position:relative}@media (width<=640px){.central-heart-container{margin:-20px auto}}.central-heart{cursor:pointer;background:#ffffff1a;border:2px dashed #ffffff4d;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;font-size:2rem;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.central-heart:hover{background:#fff3;transform:scale(1.1)}.central-heart.half-left{background:linear-gradient(90deg,#ec489980 50%,#ffffff1a 50%);border:2px solid #ec4899}.central-heart.half-right{background:linear-gradient(90deg,#ffffff1a 50%,#ec489980 50%);border:2px solid #ec4899}.central-heart.full{background:linear-gradient(135deg,#f43f5e 0%,#e11d48 100%);border:2px solid #ec4899;animation:1.5s infinite heartBeat;box-shadow:0 0 20px #ec4899cc,inset 0 0 10px #ffffff80}.central-heart.gift{background:linear-gradient(135deg,#fbbf24 0%,#d97706 100%);border:2px solid #fbbf24;animation:.5s infinite shake;box-shadow:0 0 20px #fbbf24cc}.drink-carousel{scroll-snap-type:x mandatory;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;gap:16px;padding:16px 0;display:flex;overflow-x:auto}.drink-carousel::-webkit-scrollbar{display:none}.drink-item{scroll-snap-align:center;background:var(--glass-bg);border:2px solid var(--glass-border);cursor:pointer;opacity:.5;border-radius:50%;flex:none;justify-content:center;align-items:center;width:80px;height:80px;font-size:2.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;transform:scale(.8)}.drink-item.selected{opacity:1;border-color:var(--primary-blue);background:linear-gradient(135deg,#fff3 0%,#fff0 100%);transform:scale(1.1);box-shadow:0 8px 32px #0ea5e966}.interactive-glass{border:4px solid var(--glass-border);cursor:ns-resize;touch-action:none;background:#ffffff1a;border-top:none;border-radius:0 0 30px 30px;width:140px;height:240px;position:relative;overflow:hidden;box-shadow:inset 0 -10px 20px #0000001a,0 10px 20px #0003}.interactive-glass:after{content:"";pointer-events:none;background:linear-gradient(90deg,#fff6 0%,#fff0 20% 80%,#fff3 100%);position:absolute;inset:0 10px}.interactive-liquid{background:var(--primary-blue);width:100%;transition:height .1s ease-out;position:absolute;bottom:0;left:0}.interactive-liquid:before{content:"";background:inherit;opacity:.8;border-radius:40%;width:200%;height:30px;animation:3s linear infinite wave;position:absolute;top:-15px;left:-50%}.interactive-liquid:after{content:"";background:inherit;border-radius:40%;width:200%;height:30px;animation:4s linear infinite reverse wave;position:absolute;top:-10px;left:-50%}.interactive-glass.coffee{border-radius:10px 10px 30px 30px;width:180px;height:180px}.interactive-glass.coffee:before{content:"";z-index:-1;border:8px solid #fff6;border-radius:20px;width:60px;height:80px;position:absolute;top:30px;right:-40px}.interactive-glass.tea{border-radius:0 0 50px 50px;width:150px;height:200px}.interactive-glass.tea:before{content:"";z-index:-1;border:6px solid #fff6;border-radius:20px;width:50px;height:70px;position:absolute;top:40px;right:-35px}.interactive-glass.soda{background:linear-gradient(90deg,#fff3 0%,#fff9 20%,#fff0 100%);border:4px solid #94a3b8;border-radius:20px;width:120px;height:250px}.interactive-glass.soda:after{display:none}.interactive-glass.juice{clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);background:#ffffff26;border:none;border-radius:0}.on-fire{animation:2s infinite alternate firePulse;box-shadow:0 0 20px 5px #ff572299,inset 0 0 15px #ff57224d!important}@keyframes firePulse{0%{box-shadow:0 0 15px 2px #ff572280,inset 0 0 10px #ff572233}to{box-shadow:0 0 30px 10px #ff9800b3,inset 0 0 20px #ff980066}}.jesse-mask{-webkit-mask-image:url(/jesse.png);-webkit-mask-position:50%;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat}.james-mask{-webkit-mask-image:url(/james.png);-webkit-mask-position:50%;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat}.sophie-mask{-webkit-mask-image:url(/sophie.png);-webkit-mask-position:50%;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat}