html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit;padding:0;margin:0}body{display:flex;height:100vh;font-family:Montserrat,sans-serif}.minifigure{position:relative;width:300px;height:485px;margin:auto;perspective:200;transform-style:preserve-3d;transition:transform .4s}.minifigure.explode{transform:scale(.75) translateZ(0)}.head{position:absolute;z-index:2;top:2.25em;left:50%;width:7.25em;height:6.25em;transform:translate(-50%);color:#f2cc0d;background-color:currentColor;background-image:linear-gradient(#ffffff4d,#fff0 20%,#0000 80%,#00000026 95%,#0000004d),linear-gradient(to right,#fff0 50%,#fff3,#fff0);border-radius:1.5em;transition:transform .4s}.explode .head{transform:translate(-50%,-8em)}.head:before,.head:after{content:"";position:absolute;left:50%;height:2em;transform:translate(-50%);background-color:currentColor}.head:before{top:-1.25em;width:3.5em;height:1.25em;background-image:linear-gradient(#ffffff80,#fff0 30%),linear-gradient(to right,#fff0 70%,#ffffff40,#fff0 90%);border-radius:.25em .25em 0 0}.head:after{bottom:-.875em;width:4.5em;height:1em;background-image:linear-gradient(#0003,#0000000d 50%),linear-gradient(to right,#fff0 70%,#ffffff40,#fff0 90%);border-radius:0 0 .125em .125em}.faces-wrap{height:100%;overflow:hidden}.faces{display:flex;transition:transform .4s cubic-bezier(0,0,0,1.25)}.explode .faces{transform:translate(-500%)!important}.face{position:relative;flex:1 0 100%}.eye{position:absolute;top:2.25em;width:.75em;height:.9375em;color:#fff;background-color:currentColor;border-radius:50%;box-shadow:inset 0 -.125em 0 .25em #000}.eye:before{content:"";position:absolute;left:50%;color:#000;transform:translate(-50%)}.eye.right{left:2.25em}.eye.left{right:2.25em}.classic .eye{top:2.4375em;height:.75em;color:#000;box-shadow:none}.large-smile .eye{top:2em}.worried .eye,.surprised .eye{top:2.4375em;width:1em;height:1.125em;box-shadow:inset 0 -.125em 0 .3125em #000}.worried .eye.right{left:2.125em}.worried .eye.left{right:2.125em}.frown .eye{top:2.625em}.frown .eye:before{bottom:80%;width:1.25em;height:1em;border:.1875em solid transparent;border-bottom-color:currentColor;border-radius:50%}.frown .eye.right:before{margin-left:-.25em;transform:translate(-50%) rotate(-20deg)}.frown .eye.left:before{margin-left:.25em;transform:translate(-50%) rotate(20deg)}.brow{position:absolute;bottom:.625em;left:50%;width:1.75em;height:1em;transform-origin:0 0;transform:translate(-50%);color:#000;border:.25em solid transparent;border-top-color:currentColor;border-bottom:none;border-radius:50% 50% 0 0}.right .brow{border-left:none}.left .brow{border-right:none}.large-smile .brow{bottom:.375em;width:1.25em;height:1.375em;border:none;border-top:.25em solid;border-radius:50% 50% 0 0}.large-smile .right .brow{margin-left:-.125em;transform:skewY(-10deg) translate(-50%) translateZ(0)}.large-smile .left .brow{margin-left:.125em;transform:skewY(10deg) translate(-50%) translateZ(0)}.worried .brow{width:1.25em;height:.875em;bottom:1.25em;border-top:none;border-bottom:.25em solid currentColor;border-radius:0 0 50% 50%}.worried .right .brow{margin-left:-.25em;transform:rotate(-20deg) translate(-50%) translateZ(0)}.worried .left .brow{margin-left:.25em;transform:rotate(20deg) translate(-50%) translateZ(0)}.frown .brow{width:1.5em;bottom:1.375em;border-top:none;border-bottom:.25em solid currentColor;border-radius:0 0 50% 50%}.frown .right .brow{margin-left:-.625em;transform:rotate(-35deg) translate(-50%) translateZ(0)}.frown .left .brow{margin-left:.625em;transform:rotate(35deg) translate(-50%) translateZ(0)}.surprised .brow{bottom:1em;width:1.5em;border-right:none;border-left:none}.surprised .right .brow{margin-left:-.5em;transform:rotate(-15deg) translate(-50%) translateZ(0)}.surprised .left .brow{margin-left:.5em;transform:rotate(15deg) translate(-50%) translateZ(0)}.mouth{position:absolute;top:3.125em;left:50%;width:2.5em;height:1.5em;transform:translate(-50%);color:#000;border:.25em solid transparent;border-bottom-color:currentColor;border-radius:50%}.mouth:before,.mouth:after{content:"";position:absolute;left:50%;transform:translate(-50%)}.classic .mouth{top:2.9375em}.large-smile .mouth{top:.125em;width:3.125em;height:5em;border:none;border-bottom:1.5em solid;border-radius:0 0 70% 70%/0 0 50% 50%}.large-smile .mouth:before{top:1.6875em;width:4.25em;height:2em;color:#000;border:.1875em solid transparent;border-bottom-color:currentColor;border-radius:0 0 50% 50%;box-shadow:0 .9375em 0 -.75em #fff}.large-smile .mouth:after{top:4.4375em;width:1.25em;height:.375em;color:#c00;background-color:currentColor;border-radius:70%/50% 50% 100% 100%}.worried .mouth{top:4.5em;width:2em;height:1.25em;transform:translate(-50%) rotate(-10deg) translateZ(0);border-top-color:currentColor;border-right:none;border-bottom-color:transparent;border-right-width:.5em;border-radius:50% 50% 0 0}.frown .mouth{top:4.25em;width:2.75em;height:2em;margin-left:-.125em;transform:translate(-50%) rotate(-15deg) translateZ(0);border-top-color:currentColor;border-right:none;border-bottom-color:transparent;border-right-width:.5em;border-radius:50% 50% 0 0}.frown .mouth:before{top:.375em;width:.75em;height:.625em;margin-left:.125em;color:#000;border:.125em solid transparent;border-top-color:currentColor;border-right:none;border-radius:50% 50% 0 0}.surprised .mouth{top:4em;width:3.125em;height:1.625em;background-color:currentColor;border:none;border-radius:70% 70% 60% 60%/100% 100% 50% 50%}.surprised .mouth:before,.surprised .mouth:after{color:#fff;background-color:currentColor}.surprised .mouth:before{top:.1875em;width:2em;height:.375em;border-radius:70% 70% 60% 60%/100% 100% 50% 50%}.surprised .mouth:after{bottom:.1875em;width:2.25em;height:.375em;border-radius:70% 70% 60% 60%/100% 100% 50% 50%}.upper-body{position:absolute;z-index:1;top:9.25em;width:100%;color:#e6e6e6;perspective:320px}.upper-body:before,.upper-body:after{content:"";position:absolute;left:50%;transform:translate(-50%)}.upper-body:before{bottom:100%;width:3em;height:3.5em;background-color:currentColor;background-image:linear-gradient(to right,#fff0 50%,#fff3,#fff0 90%),linear-gradient(#0000 50%,#0000000d 80%,#0000001a);border-radius:50% 50% 0 0/10% 10% 0 0}.upper-body:after{top:-2.75em;width:2em;height:2em;background-color:#000000e6;background-image:linear-gradient(to right,#fff0 50%,#fff3 80%,#fff0);border-radius:50%/10%}.torso{position:absolute;z-index:1;top:0;left:50%;width:7.75em;height:9.125em;transform-origin:top center;transform:translate(-50%) rotateX(45deg);background-color:currentColor;background-image:linear-gradient(#ffffff1a,#0000 80%,#0000000d 98%,#00000040);border-radius:.5em .5em .125em .125em;box-shadow:inset 0 .25em .25em #ffffff80,-1.5em .5em 1em -1.25em #0000004d,1.5em .5em 1em -1.25em #0000004d}.arm{position:absolute;left:50%;top:4em;width:3em;height:5.5em;transform-origin:center 1.5em;background-color:currentColor;border-radius:1.5em/1em}.arm.right{margin-left:-6.25rem;transform:translate(-50%) rotate(12deg);box-shadow:inset .5em .25em .375em -.25em #fff6,inset 0 0 .75em .75em currentColor,inset 0 0 0 2em #ffffff26}.arm.left{margin-left:6.25rem;transform:translate(-50%) rotate(-12deg);box-shadow:inset -.5em .25em .375em -.25em #fff6,inset 0 0 .75em .75em currentColor,inset 0 0 0 2em #ffffff26}.arm:before{content:"";position:absolute;bottom:3.5em;left:0;width:100%;height:5.5em;backface-visibility:hidden;transform-origin:center 4.5em;background-color:currentColor;border-radius:1.5em/1.5em 1.5em 1em 1em}.arm.right:before{transform:rotate(14deg);box-shadow:inset .75em .125em .375em -.5em #fff6,inset .25em 1.1em .75em .75em currentColor,inset 0 0 0 2em #ffffff26}.arm.left:before{transform:rotate(-14deg);box-shadow:inset -.75em .125em .375em -.5em #fff6,inset -.25em 1.1em .75em .75em currentColor,inset 0 0 0 2em #ffffff26}.arm:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1.5em;transform-origin:center 4.5em;background-color:currentColor;border-radius:50%;box-shadow:inset 0 0 0 1em #fff3}.hand{position:absolute;z-index:1;top:80%;left:50%;width:1.75em;height:1.75em;transform:translate(-50%);color:#f2cc0d;background-color:currentColor;background-image:linear-gradient(to right,#fff3,#00000013,#fff3);border-radius:1em/.5em;box-shadow:0 -.125em .125em #0000001a}.hand:before{content:"";position:absolute;z-index:1;top:1em;left:50%;width:3.5em;height:3.5em;transform:translate(-50%);color:#f5d63d;border:.75em solid;border-bottom-color:transparent;box-shadow:inset 0 .25em #00000026,inset 0 .25em;border-radius:50%}.lower-body{position:absolute;top:18.5em;left:50%;width:10em;height:11.75em;transform:translate(-50%);color:#e6e6e6;transition:transform .4s}.explode .lower-body{transform:translate(-50%,8em)}.lower-body>div{position:absolute;background-color:currentColor}.waist{z-index:1;top:0;width:100%;height:1.5em;background-image:linear-gradient(#00000026,#0000 80%,#ffffff1a 90%,#ffffff26);border-radius:.125em;box-shadow:0 .75em .75em -.25em #00000040}.waist:before,.waist:after{content:"";position:absolute;bottom:100%;left:50%;width:3em;height:3em;transform:translate(-50%);background-color:currentColor;background-image:linear-gradient(#ffffffbf,#fff0 10%),linear-gradient(to right,#fff0 20%,#ffffff40 25%,#fff0 40% 60%,#ffffff40 75%,#fff0 80%,#fff3),linear-gradient(#ffffff1a,#00000026)}.waist:before{margin-left:-2.75em;border-radius:50% 30% 0 0/100% 30% 0 100%}.waist:after{margin-left:2.75em;border-radius:30% 50% 0% 0%/30% 100% 100% 0%}.crotch{z-index:1;top:1.5em;left:50%;width:10%;height:4.5em;transform:translate(-50%);background-image:linear-gradient(#0003,#0000000d 10%,#0003 10%,#ffffff1a,#0000001a);border-radius:0 0 .25em .25em;box-shadow:-.5em 0 .25em -.25em #00000026,.5em 0 .25em -.25em #00000026,-.25em 0 .125em -.125em #0003,.25em 0 .125em -.125em #0003}.leg{bottom:0;left:50%;width:4.75em;height:10.75em;transform:translate(-50%);background-image:linear-gradient(#0000001a 10%,#ffffff1a 25%,#0000001a 45%,#0000,50%,#0000000d,65%,#0000 74%,#0000001a,78%,#fff3 78%,#fff0 82%,#0000001a);border-radius:.25em .25em .0625em .0625em}.leg.right{margin-left:-2.75em}.leg.left{margin-left:2.75em}.controls{position:relative;z-index:1;width:200px;padding:1.5em;color:#333;text-transform:uppercase;background-color:#dcdcdc80}.controls .title{margin-bottom:.5rem;font-weight:900;font-size:1.25em;letter-spacing:.03125em}.button{width:100%;padding:.5em 1em;margin:.25rem 0;color:#666;font-family:inherit;text-transform:uppercase;letter-spacing:.0625em;background-color:#fff;border:1px solid #ddd;border-radius:.5em;cursor:pointer;outline:none}.button:hover{color:#000;border-color:#ccc}.button:active{background-color:#ddd}.controls fieldset{border:none;margin:1rem 0}.controls legend{margin-bottom:1rem;font-weight:700;font-size:small;letter-spacing:.03125em}.controls label{display:block;font-size:x-small;letter-spacing:.0625em}.controls input[type=range]{-webkit-appearance:none;appearance:none;position:relative;width:100%;height:2em;padding:.375em;margin:.25rem 0 1rem;color:inherit;background-color:currentColor;border-radius:1em;outline:none}.controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;position:relative;z-index:10;width:1.5em;height:1.5em;background-color:#f2cc0d;border-radius:50%;cursor:pointer}.controls input[type=range]::-moz-range-thumb{position:relative;z-index:10;width:1.5em;height:1.5em;background-color:#333;border-radius:50%;cursor:pointer}.controls input[type=range]::-moz-range-track{background-color:transparent}