@keyframes pour-layer{0%{transform:translateY(400%)}to{transform:translateY(0)}}.base{position:relative;background-color:#361713;width:100%;height:50%;bottom:0;animation:pour-layer 2s forwards;z-index:300}.syrup{position:relative;transform:translateY(400%);background:repeating-linear-gradient(45deg,white,white 10px,var(--syrup-color, #ffefd5) 10px,var(--syrup-color, #ffefd5) 20px);width:100%;height:20%;animation:pour-layer 2s 1s forwards;z-index:2}.froth{overflow:visible;position:relative;transform:translateY(400%);height:30%;width:100%;background-color:#c6c6c6;animation:pour-layer 2s 2s forwards}.foam{display:block;background:#e4e0d2;border-radius:30px;height:40px;width:40px;position:absolute}.foam:nth-child(1){top:0;left:-3px}.foam:nth-child(2){top:0;left:55px}.foam:nth-child(3){width:30px;height:30px;border-radius:40px;top:3px;left:30px}.foam:nth-child(4){width:30px;height:30px;border-radius:45px;top:5px;right:-2px}.foam:nth-child(5){top:2px;right:10px}.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}@keyframes move-and-fade-10{0%{opacity:0;transform:translateY(0) rotate(90deg)}50%{opacity:.5}75%{opacity:0}to{transform:translateY(-10px) rotate(90deg);opacity:0}}@keyframes move-and-fade-15{0%{opacity:0;transform:translateY(0) rotate(90deg)}50%{opacity:.5}75%{opacity:0}to{transform:translateY(-15px) rotate(90deg);opacity:0}}@keyframes move-and-fade-20{0%{opacity:0;transform:translateY(0) rotate(90deg)}50%{opacity:.5}75%{opacity:0}to{transform:translateY(-20px) rotate(90deg);opacity:0}}.stream{position:absolute;transform:rotate(90deg);height:80px;width:80px;margin-top:-55px;opacity:0;animation:move-and-fade-15 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-10 2.5s linear infinite;animation-delay:3.2s}.stream:last-child{margin-left:40px;animation:move-and-fade-20 2.5s linear infinite;animation-delay:3s}.flake{position:absolute;margin-top:-55px;margin-left:125px;opacity:0;animation:move-and-fade-15 2.5s linear infinite;animation-delay:3.4s}.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-10 2.5s linear infinite;animation-delay:3.2s}.flake:last-child{margin-left:50px;margin-top:-45px;animation:move-and-fade-20 2.5s linear infinite;animation-delay:3s}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{height:100%}body{margin:0;display:flex;align-items:center;justify-content:center;min-width:320px;min-height:100vh;background-color:#6e4228;background:linear-gradient(to bottom,#6e4228,#956f5a)}#app{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.card{padding:2em}ul{list-style:none;padding-left:0}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}