.mug{width:8em;height:6em;border-radius:.05em .05em 3em 3em;border:10px solid #c6c6c6;position:relative;margin:0 auto 5em}.mug:after{content:"";position:absolute;width:20px;height:2em;right:0;margin-right:-2.5em;top:1em;border-radius:.05em 3em 3em .5em;border:10px solid #c6c6c6}.carafe{overflow:hidden;border-radius:.05em .05em 2.2em 2.2em;background:#c6c6c6;width:100%;height:100%;transition:all 1s}.vanilla{transform:translateY(400%);position:relative;background:repeating-linear-gradient(45deg,#fff,#fff 10px,#e1cf95 10px,#e1cf95 20px);width:100%;height:20%;animation:pour-tea 2s 1s forwards;z-index:2}.stream{position:absolute;transform:rotate(90deg);height:80px;width:80px;margin-top:-55px;opacity:0;animation:move-and-fade 2.5s linear infinite;animation-delay:3.4s}.stream:before{position:absolute;content:"~";font-size:70px}.stream:first-child{margin-left:20px;margin-top:-70px;animation:move-and-fade 2.5s linear infinite;animation-delay:3.2s}.stream:last-child{margin-left:40px;animation:move-and-fade 2.5s linear infinite;animation-delay:3s}.flake{position:absolute;margin-top:-55px;margin-left:125px;opacity:0;animation:move-and-fade 2.5s linear infinite;animation-delay:3.4s}@keyframes move-and-fade{0%{opacity:0;transform:translateY(0) rotate(90deg)}50%{opacity:.5}75%{opacity:0}to{transform:translateY(-15px) rotate(90deg);opacity:0}}.flake:before{content:"*";position:absolute;color:#fff;height:80px;width:80px;margin-top:0;font-size:70px}.flake:first-child{margin-left:90px;margin-top:-70px;animation:move-and-fade 2.5s linear infinite;animation-delay:3.2s}@keyframes move-and-fade{0%{opacity:0;transform:translateY(0) rotate(90deg)}50%{opacity:.5}75%{opacity:0}to{transform:translateY(-10px) rotate(90deg);opacity:0}}.flake:last-child{margin-left:50px;margin-top:-45px;animation:move-and-fade 2.5s linear infinite;animation-delay:3s}@keyframes move-and-fade{0%{opacity:0;transform:translateY(0) rotate(90deg)}50%{opacity:.5}75%{opacity:0}to{transform:translateY(-20px) rotate(90deg);opacity:0}}@keyframes pour-tea{0%{transform:translateY(100%)}to{transform:translateY(0)}}.carafe[data-v-8709b092]{min-height:96px;overflow:hidden;border-radius:.05em .05em 2.2em 2.2em;background:#fff;width:100%;height:100%}.syrup[data-v-2fa3a41a]{transform:translateY(400%);position:relative;width:100%;height:20%;animation:pour-tea 2s 1s forwards;z-index:2;background:repeating-linear-gradient(45deg,var(--texture-color),var(--texture-color) 10px,rgb(225,207,149) 10px,rgb(225,207,149) 20px)}.baseBeverage[data-v-8cc1f7b4]{position:relative;width:100%;height:100%;bottom:0;animation:pour-tea 2s;z-index:300}.froth[data-v-84d3ef89]{overflow:visible;transform:translateY(400%);position:relative;height:20%;width:100%;background-color:#c6c6c6;animation:pour-tea 2s 2s forwards}.foam[data-v-84d3ef89]{display:block;background:#e4e0d2;border-radius:30px;height:40px;width:40px;position:absolute}.foam[data-v-84d3ef89]:nth-child(1){top:0;left:-3px}.foam[data-v-84d3ef89]:nth-child(2){top:0;left:55px}.foam[data-v-84d3ef89]:nth-child(3){width:30px;height:30px;border-radius:40px;top:3px;left:30px}.foam[data-v-84d3ef89]:nth-child(4){width:30px;height:30px;border-radius:45px;top:5px;right:-2px}.foam[data-v-84d3ef89]:nth-child(5){top:2px;right:10px}body,html{position:relative;display:flex;align-items:center;justify-content:center;height:100%;background-color:#6e4228;background:linear-gradient(to bottom,#6e4228,#956f5a)}ul{list-style:none}.auth-row{margin-top:10px;margin-bottom:8px;display:flex;align-items:center;gap:8px}.user-label{color:#fff;font-size:.9rem}.hint{margin-top:4px;color:#fff;font-size:.85rem}.status-message{margin-top:8px;padding:6px 10px;border-radius:4px;background:#fff3cd;border:1px solid #ffeeba;color:#856404;font-size:.9rem}