.animation-container{position:relative;width:20em;height:35em;font-size:10px;min-width:16em;max-width:16em!important;margin-bottom:6em}.animation-container,.animation-container *{box-sizing:border-box}.tap{top:4em;left:calc(50% - 2.22em);width:2em;height:4em;background:linear-gradient(#333,#d3d3d3 50%,#999 80%);border-radius:.4em .4em 0 0;transform:skew(5deg,1deg);z-index:1}.tap,.tap:before{position:absolute}.tap:before{content:"";left:0;width:100%;height:1em;background:#999;bottom:-.5em;border-radius:50% 50% 100% 100%;border:.2em solid #555}.bucket{position:absolute;bottom:0;left:calc(50% - 7.5em);width:15em;height:20em;background:#d3d3d3;background:linear-gradient(90deg,#333 0,#d3d3d3 50%,#999 80%);border-radius:0 0 1em 1em}.bucket:before{background:#999}.bucket:after,.bucket:before{content:"";position:absolute;left:0;width:100%;height:2em;top:-1em;border-radius:50%;border:.2em solid #555}.bucket:after{background:transparent}.bucket-handle{position:absolute;width:16em;height:7em;top:-5.5em;left:-.5em;border:.5em solid #555;border-bottom:none;border-radius:100% 100% 0 0;z-index:2}.bucket-valve{position:absolute;bottom:-.5em;left:20%;width:2em;height:2em;background:linear-gradient(270deg,#333 0,#777 50%,#999 80%);border-radius:.4em .4em 0 0;transform:skew(-15deg,1deg)}.bucket-valve:before{content:"";position:absolute;left:0;width:100%;height:1em;background:#999;bottom:-.5em;border-radius:50% 50% 100% 100%;border:.2em solid #555}.water{position:absolute;bottom:4%;left:5%;width:90%;background:linear-gradient(#d0e4f7,#73b1e7 50%);height:0;transition:height 1s ease,opacity 1s ease;border-radius:0 0 1em 1em;opacity:0}.water:before{content:"";position:absolute;left:0;width:100%;height:1em;background:linear-gradient(0deg,#c0d4e7 0,#73b1e7);top:-.5em;border-radius:100% 100% 50% 50%/100% 100% 50% 50%}.water.empty{transition:height 1s ease,opacity .5s ease}.tap-water-flow,.valve-water-flow{position:absolute;background:#66b3ff;width:1em;height:0;z-index:10}.tap-water-flow{top:4em;left:.5em}.valve-water-flow{top:1.65em;left:50%;transform:translateX(-50%)}.indicator{width:10%;height:100%;display:flex;flex-direction:column;overflow:hidden;transition:width 1s ease}.indicator.indicator-hidden{width:0}.indicator-segment{width:100%;transition:height 1s ease}.overflow-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:1.6em;font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-shadow:0 0 .3em rgba(0,0,0,.7),0 0 .6em rgba(0,0,0,.7);white-space:nowrap;pointer-events:none;z-index:6}@media (max-width:767px){.animation-container.fullscreen-active{position:fixed;inset:0;margin:auto;max-width:none!important;max-height:80vh;font-size:min(6vw,2.28571vh)!important;padding:3em 2em 1em;opacity:0;z-index:1050;transition:opacity .4s ease}.animation-container.fullscreen-active.fullscreen-visible{opacity:1}.animation-container.fullscreen-active:before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:-1}}.bucket-size-preview{max-height:60vh;overflow:auto;display:flex;justify-content:center}