.feedback{--normal:#414052;--normal-shadow:#313140;--normal-shadow-top:#4c4b60;--normal-mouth:#2e2e3d;--normal-eye:#282734;--active:#f8da69;--active-shadow:#f4b555;--active-shadow-top:#fff6d3;--active-mouth:#f05136;--active-eye:#313036;--active-tear:#76b5e7;--active-shadow-angry:#e94f1d;--hover:#454456;--hover-shadow-top:#59586b;margin:20px 0 0 14%;padding:0;list-style:none;display:flex}.feedback label{position:relative;transition:transform .3s;cursor:pointer}.feedback label:not(:last-child){margin-right:20px}.feedback label input{appearance:none;outline:0;border:none;display:block;position:absolute;width:40px;height:40px;left:0;top:0;margin:0;padding:0;border-radius:50%;background:var(--sb,var(--normal));box-shadow:inset 3px -3px 4px var(--sh,var(--normal-shadow)),inset -1px 1px 2px var(--sht,var(--normal-shadow-top));transition:background .4s,box-shadow .4s,transform .3s;-webkit-tap-highlight-color:transparent}.feedback label div{width:40px;height:40px;position:relative;transform:perspective(240px) translateZ(4px)}.feedback label div svg,.feedback label div:after,.feedback label div:before{display:block;position:absolute;left:var(--l,9px);top:var(--t,13px);width:var(--w,8px);height:var(--h,1px);transform:rotate(var(--r,0deg)) scale(var(--sc,1)) translateZ(0)}.feedback label div svg{fill:none;stroke:var(--s);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s}.feedback label div svg.eye{--s:var(--e, var(--normal-eye));--t:17px;--w:7px;--h:4px}.feedback label div svg.eye.right{--l:23px}.feedback label div svg.mouth{--s:var(--m, var(--normal-mouth));--l:11px;--t:23px;--w:18px;--h:7px}.feedback label div:after,.feedback label div:before{content:"";z-index:var(--zi,1);border-radius:var(--br,1px);background:var(--b,var(--e,var(--normal-eye)));transition:background .4s}.feedback label.angry{--step-1-rx:-24deg;--step-1-ry:20deg;--step-2-rx:-24deg;--step-2-ry:-20deg}.feedback label.angry div:before{--r:20deg}.feedback label.angry div:after{--l:23px;--r:-20deg}.feedback label.angry div svg.eye{stroke-dasharray:4.55;stroke-dashoffset:8.15}.feedback label.angry input:checked{animation:angry 1s linear}.feedback label.angry input:checked+div:before{--middle-y:-2px;--middle-r:22deg;animation:toggle .8s linear forwards}.feedback label.angry input:checked+div:after{--middle-y:1px;--middle-r:-18deg;animation:toggle .8s linear forwards}.feedback label.sad{--step-1-rx:20deg;--step-1-ry:-12deg;--step-2-rx:-18deg;--step-2-ry:14deg}.feedback label.sad div:after,.feedback label.sad div:before{--b:var(--active-tear);--sc:0;--w:5px;--h:5px;--t:15px;--br:50%}.feedback label.sad div:after{--l:25px}.feedback label.sad div svg.eye{--t:16px}.feedback label.sad div svg.mouth{--t:24px;stroke-dasharray:9.5;stroke-dashoffset:33.25}.feedback label.sad input:checked+div:after,.feedback label.sad input:checked+div:before{animation:tear .6s linear forwards}.feedback label.ok{--step-1-rx:4deg;--step-1-ry:-22deg;--step-1-rz:6deg;--step-2-rx:4deg;--step-2-ry:22deg;--step-2-rz:-6deg}.feedback label.ok div:before{--l:12px;--t:17px;--h:4px;--w:4px;--br:50%;box-shadow:12px 0 0 var(--e,var(--normal-eye))}.feedback label.ok div:after{--l:13px;--t:26px;--w:14px;--h:2px;--br:1px;--b:var(--m, var(--normal-mouth))}.feedback label.ok input:checked+div:before{--middle-s-y:0.35;animation:toggle .2s linear forwards}.feedback label.ok input:checked+div:after{--middle-s-x:0.5;animation:toggle .7s linear forwards}.feedback label.good{--step-1-rx:-14deg;--step-1-rz:10deg;--step-2-rx:10deg;--step-2-rz:-8deg}.feedback label.good div:before{--b:var(--m, var(--normal-mouth));--w:5px;--h:5px;--br:50%;--t:22px;--zi:0;opacity:.5;box-shadow:16px 0 0 var(--b);filter:blur(2px)}.feedback label.good div:after{--sc:0}.feedback label.good div svg.eye{--t:15px;--sc:-1;stroke-dasharray:4.55;stroke-dashoffset:8.15}.feedback label.good div svg.mouth{--t:22px;--sc:-1;stroke-dasharray:13.3;stroke-dashoffset:23.75}.feedback label.good input:checked+div svg.mouth{--middle-y:1px;--middle-s:-1;animation:toggle .8s linear forwards}.feedback label.happy div{--step-1-rx:18deg;--step-1-ry:24deg;--step-2-rx:18deg;--step-2-ry:-24deg}.feedback label.happy div:before{--sc:0}.feedback label.happy div:after{--b:var(--m, var(--normal-mouth));--l:11px;--t:23px;--w:18px;--h:8px;--br:0 0 8px 8px}.feedback label.happy div svg.eye{--t:14px;--sc:-1}.feedback label.happy input:checked+div:after{--middle-s-x:0.95;--middle-s-y:0.75;animation:toggle .8s linear forwards}.feedback label input:checked{--sb:var(--active);--sh:var(--active-shadow);--sht:var(--active-shadow-top)}.feedback label input:checked+div{--m:var(--active-mouth);--e:var(--active-eye);animation:shake .8s linear forwards}.feedback label input:not(:checked):hover{--sb:var(--hover);--sht:var(--hover-shadow-top)}.feedback label input:not(:checked):active{transform:scale(.925)}.feedback label input:not(:checked):active+div{transform:scale(.925)}.feedback label:hover{transform:scale(1.08)}@keyframes shake{30%{transform:perspective(240px) rotateX(var(--step-1-rx,0deg)) rotateY(var(--step-1-ry,0deg)) rotateZ(var(--step-1-rz,0deg)) translateZ(10px)}60%{transform:perspective(240px) rotateX(var(--step-2-rx,0deg)) rotateY(var(--step-2-ry,0deg)) rotateZ(var(--step-2-rz,0deg)) translateZ(10px)}100%{transform:perspective(240px) translateZ(4px)}}@keyframes tear{0%{opacity:0;transform:translateY(-2px) scale(0) translateZ(0)}50%{transform:translateY(12px) scale(.6,1.2) translateZ(0)}20%,80%{opacity:1}100%{opacity:0;transform:translateY(24px) translateX(4px) rotateZ(-30deg) scale(.7,1.1) translateZ(0)}}@keyframes toggle{50%{transform:translateY(var(--middle-y,0)) scale(var(--middle-s-x,var(--middle-s,1)),var(--middle-s-y,var(--middle-s,1))) rotate(var(--middle-r,0deg))}}@keyframes angry{40%{background:var(--active)}45%{box-shadow:inset 3px -3px 4px var(--active-shadow),inset 0 8px 10px var(--active-shadow-angry)}}@media (max-width:640px){.feedback{margin:20px 0 0 0}}.feedback-home{margin:20px 0 20px 0}