:root{font-family:Helvetica Neue,Arial,Hiragino Kaku Gothic ProN,Hiragino Sans,Meiryo,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#4a4a4a;background-color:#fffaf0;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;justify-content:center}#root{max-width:1280px;width:100%;margin:0 auto;text-align:center}*{box-sizing:border-box}.main-container{position:relative;width:100%;margin:0 auto;background:linear-gradient(to bottom,#ffca28,#fb8c00);min-height:100vh;padding:0;justify-content:space-evenly}.header-ribbon{position:relative;z-index:10;padding:20px 0;text-align:center;flex-shrink:0}.ribbon-content{background-color:#fff;color:#5d4037;padding:15px 30px;border-radius:50px;box-shadow:0 4px 15px #fffc,0 2px 4px #0000001a;display:inline-block;transform:rotate(0);border:none;position:relative}.ribbon-content:before,.ribbon-content:after{content:"";position:absolute;background-color:#fff;border-radius:50%;z-index:-1}.ribbon-content:before{width:40px;height:40px;top:-10px;left:10px}.ribbon-content:after{width:30px;height:30px;bottom:-5px;right:15px}.ribbon-content h1{margin:0;font-family:Georgia,serif;font-size:1.5rem;font-weight:700;letter-spacing:1px}.content-area{flex:0 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:5;width:100%;padding:10px 20px;margin-top:80px;margin-bottom:40px}.footer-area{z-index:5;padding:0 0 20px;flex-shrink:0;text-align:center;width:100%}.footer-message-box{background-color:#fff;border:2px solid #d4c4a8;padding:15px;border-radius:12px;margin:0 auto 20px;box-shadow:0 2px 4px #0000000d;max-width:80%}.footer-message-box p{margin:5px 0;font-size:.9rem;color:#5d4037}.message-title{font-weight:700;font-size:1rem!important;margin-bottom:10px!important}.footer-names{color:#5d4037;font-family:Helvetica,sans-serif}.footer-names p{margin:2px 0;font-size:.85rem}.bubbles-container{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:0;pointer-events:none}.bubble{position:absolute;bottom:-20px;background-color:#fff9;border-radius:50%;animation:rise 10s infinite ease-in;border:2px solid #ffffff;box-shadow:0 2px 4px #c8b4a066}.bubble:nth-child(1){left:10%;width:20px;height:20px;animation-duration:8s;animation-delay:0s}.bubble:nth-child(2){left:20%;width:15px;height:15px;animation-duration:12s;animation-delay:2s}.bubble:nth-child(3){left:35%;width:25px;height:25px;animation-duration:10s;animation-delay:4s}.bubble:nth-child(4){left:50%;width:10px;height:10px;animation-duration:15s;animation-delay:0s}.bubble:nth-child(5){left:65%;width:30px;height:30px;animation-duration:11s;animation-delay:3s}.bubble:nth-child(6){left:80%;width:22px;height:22px;animation-duration:9s;animation-delay:5s}.bubble:nth-child(7){left:90%;width:18px;height:18px;animation-duration:13s;animation-delay:1s}@keyframes rise{0%{bottom:-20px;transform:translate(0);opacity:0}10%{opacity:.8}80%{opacity:.4}to{bottom:100%;transform:translate(-20px);opacity:0}}.opening-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000;pointer-events:none;display:flex;justify-content:center;align-items:center;overflow:hidden}.background-layer{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fffaf0;transition:opacity 1s ease-out;pointer-events:auto}.opening-container.finished .background-layer{opacity:0;pointer-events:none}.animation-wrapper{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.bottle-container{position:absolute;top:20%;left:50%;transform:translate(-50%);z-index:20;display:flex;flex-direction:column;align-items:center;animation:dropInBottle 1s cubic-bezier(.175,.885,.32,1.275) .5s forwards,pourMotion 3s ease-in-out 1.5s forwards,flyOutBottle .5s ease-in 5s forwards}.css-bottle{position:relative;width:70px;height:190px;display:flex;flex-direction:column;align-items:center;transform-origin:center bottom}.bottle-cap{width:16px;height:5px;background:linear-gradient(to right,#cfd8dc,#fff,#b0bec5);border-radius:2px 2px 0 0;z-index:10;border-bottom:1px solid #78909c;box-shadow:0 1px 2px #0000004d}.bottle-neck{width:16px;height:55px;background-color:#3e2723;z-index:5;position:relative;background:linear-gradient(to right,#2d1e1b,#4e342e 40%,#5d4037 60%,#2d1e1b)}.bottle-shoulder{display:block;width:50px;height:35px;background-color:#3e2723;clip-path:polygon(34% 0,66% 0,100% 100%,0% 100%);z-index:3;position:relative;margin-top:-1px;background:linear-gradient(to right,#2d1e1b,#4e342e 30%,#5d4037,#3e2723 70%,#2d1e1b)}.bottle-shoulder:after{content:none}.bottle-body{width:50px;height:110px;background-color:#3e2723;border-radius:0 0 8px 8px;z-index:2;display:flex;justify-content:center;align-items:center;position:relative;margin-top:-1px;background:linear-gradient(to right,#2d1e1b,#4e342e 30%,#5d4037,#3e2723 70%,#2d1e1b)}.bottle-label{width:40px;height:60px;background:linear-gradient(135deg,#e0e0e0,#f5f5f5 50%,#bdbdbd);border-radius:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 1px 4px #0000004d;position:relative;margin-top:10px}.bottle-label:before{content:"";position:absolute;top:5px;width:30px;height:2px;background-color:#d50000;box-shadow:0 2px #d50000}.bottle-label:after{content:"";width:18px;height:12px;border:1px solid #757575;background:repeating-linear-gradient(45deg,#eee,#eee 2px,#bdbdbd 2px 3px);margin-top:2px}.mug-wrapper{position:absolute;top:50%;transform:translateY(-50%);z-index:30;pointer-events:auto}.mug-wrapper.left{left:-80px;animation:mugSequenceLeft 7s linear forwards}.mug-wrapper.right{right:-80px;animation:mugSequenceRight 7s linear forwards}.mug{position:relative;width:70px;height:90px;z-index:2}.glass-inner{position:relative;width:100%;height:100%;border:4px solid #8d6e63;border-top:none;border-radius:0 0 12px 12px;background-color:#fff9;overflow:hidden;box-shadow:inset 0 0 8px #0000000d;z-index:5;background-clip:padding-box}.handle{position:absolute;top:20px;width:24px;height:50px;border:4px solid #8d6e63;z-index:-1}.handle-left{left:-20px;border-right:4px solid #8d6e63;border-radius:12px 0 0 12px}.handle-right{right:-20px;border-left:4px solid #8d6e63;border-radius:0 12px 12px 0}.liquid{position:absolute;bottom:0;left:0;width:100%;height:0%;background-color:#ffc107;background-image:linear-gradient(to right,#ffb300,#ffca28,#ffb300)}.liquid:after{content:"";position:absolute;width:100%;height:100%;background-image:radial-gradient(rgba(255,255,255,.6) 2px,transparent 2px);background-size:8px 8px;opacity:.6}.foam{position:absolute;bottom:0;left:0;width:100%;height:0;background-color:#fff;border-radius:4px 4px 0 0}.bottle-container{position:absolute;top:20%;left:50%;transform:translate(-50%);z-index:20;display:flex;flex-direction:column;align-items:center;animation:dropInBottle 1s cubic-bezier(.175,.885,.32,1.275) 0s forwards,pourSequence 4.5s ease-in-out 1s forwards,flyOutBottle .5s ease-in 5.5s forwards}@keyframes dropInBottle{0%{top:-200px;opacity:0}to{top:20%;opacity:1}}@keyframes pourSequence{0%{left:50%;transform:translate(-50%) rotate(0)}10%{left:35%;transform:translate(-50%) rotate(0)}15%{left:35%;transform:translate(-50%) rotate(-60deg)}40%{left:35%;transform:translate(-50%) rotate(-60deg)}45%{left:35%;transform:translate(-50%) rotate(0)}55%{left:65%;transform:translate(-50%) rotate(0)}60%{left:65%;transform:translate(-50%) rotate(60deg)}85%{left:65%;transform:translate(-50%) rotate(60deg)}90%{left:65%;transform:translate(-50%) rotate(0)}to{left:50%;transform:translate(-50%) rotate(0)}}.mug-wrapper.left .liquid{animation:fillLiquidLeft 4s linear 1.5s forwards}.mug-wrapper.left .foam{animation:fillFoamLeft 4s linear 1.5s forwards}.mug-wrapper.right .liquid{animation:fillLiquidRight 4s linear 1.5s forwards}.mug-wrapper.right .foam{animation:fillFoamRight 4s linear 1.5s forwards}@keyframes fillLiquidLeft{0%,15%{height:0%}35%,to{height:90%}}@keyframes fillFoamLeft{0%,15%{height:0;bottom:0}35%,to{height:18px;bottom:90%}}@keyframes fillLiquidRight{0%,55%{height:0%}75%,to{height:90%}}@keyframes fillFoamRight{0%,55%{height:0;bottom:0}75%,to{height:18px;bottom:90%}}@keyframes flyOutBottle{to{top:-300px;opacity:0}}.cheers-text{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%) scale(0);font-family:Times New Roman,serif;font-size:4rem;font-weight:900;color:#ff6f00;-webkit-text-stroke:1px #fff;text-shadow:3px 3px 0 #fff;z-index:30;opacity:0;animation:popText 2s cubic-bezier(.175,.885,.32,1.275) 5s forwards}@keyframes popText{0%{transform:translate(-50%,-50%) scale(0);opacity:0}20%{transform:translate(-50%,-50%) scale(1.2);opacity:1}80%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(1);opacity:0}}@keyframes mugSequenceLeft{0%{left:-120px;top:50%;transform:translateY(-50%) rotate(0);opacity:0}10%{left:30px;top:50%;transform:translateY(-50%) rotate(0);opacity:1}80%{left:30px;top:50%;transform:translateY(-50%) rotate(0);opacity:1}90%{left:30px;top:70px;transform:translateY(0) rotate(10deg);opacity:1}to{left:30px;top:70px;transform:translateY(0) rotate(10deg);opacity:1}}@keyframes mugSequenceRight{0%{right:-120px;top:50%;transform:translateY(-50%) rotate(0);opacity:0}10%{right:30px;top:50%;transform:translateY(-50%) rotate(0);opacity:1}80%{right:30px;top:50%;transform:translateY(-50%) rotate(0);opacity:1}90%{right:30px;top:70px;transform:translateY(0) rotate(-10deg);opacity:1}to{right:30px;top:70px;transform:translateY(0) rotate(-10deg);opacity:1}}.bm-mug-component{position:absolute;top:70px;z-index:100;pointer-events:none}.bm-mug-component.left{left:30px;transform:rotate(10deg)}.bm-mug-component.right{right:30px;transform:rotate(-10deg)}.bm-mug-body{position:relative;width:70px;height:90px;z-index:2}.bm-glass-inner{position:relative;width:100%;height:100%;border:4px solid #8d6e63;border-top:none;border-radius:0 0 12px 12px;background-color:#fff9;overflow:hidden;box-shadow:inset 0 0 8px #0000000d;z-index:5;background-clip:padding-box}.bm-handle{position:absolute;top:20px;width:24px;height:50px;border:4px solid #8d6e63;z-index:-10}.bm-handle-left{left:-20px;border-right:4px solid #8d6e63;border-radius:12px 0 0 12px}.bm-handle-right{right:-20px;border-left:4px solid #8d6e63;border-radius:0 12px 12px 0}.bm-liquid{position:absolute;bottom:0;left:0;width:100%;height:90%;background-color:#ffc107;background-image:linear-gradient(to right,#ffb300,#ffca28,#ffb300)}.bm-liquid:after{content:"";position:absolute;width:100%;height:100%;background-image:radial-gradient(rgba(255,255,255,.6) 2px,transparent 2px);background-size:8px 8px;opacity:.6}.bm-foam{position:absolute;bottom:90%;left:0;width:100%;height:18px;background-color:#fff;border-radius:4px 4px 0 0}.image-container{width:100%;margin-bottom:15px;display:flex;justify-content:center}.welcome-image{max-width:100%;height:auto;border-radius:8px;box-shadow:0 4px 8px #0000001a}.instruction-text{font-size:.8rem;color:#8d6e63;margin-bottom:15px}.download-button{background-color:#d4c4a8;color:#fff;border:none;padding:10px 20px;border-radius:20px;font-size:.9rem;cursor:pointer;transition:background-color .3s;box-shadow:0 2px 4px #0000001a;margin-bottom:20px}.download-button:hover{background-color:#bcaaa4}.download-button:active{transform:translateY(1px)}