.paw-button {  --background: #fff;  --background-active: #FEE8F4;  --border: #F1ECEB;  --border-active: #EEC2DB;  --text: #000;  --number: #9C9496;  --number-active: #000;  --heart-background: #fff;  --heart-background-active: #FEA5D7;  --heart-border: #C3C2C0;  --heart-border-active: #2B2926;  --heart-shadow-light: #FEE0F2;  --heart-shadow-dark: #EA5DAF;  --paw-background: #fff;  --paw-border: #201E1B;  --paw-shadow: #EEEDED;  --paw-inner: var(--heart-background-active);  --paw-shadow-light: var(--heart-shadow-light);  --paw-shadow-dark: var(--heart-shadow-dark);  --paw-clap-background: #FEF0A5;  --paw-clap-border: var(--paw-border);  --paw-clap-shadow: #FED75C;  --circle: #df3dce;  --circle-line: #000;  display: inline-flex;  text-decoration: none;  font-weight: bold;  position: relative;  line-height: 19px;  padding: 12px 16px;}.paw-button:before {  content: '';  position: absolute;  display: block;  left: -2px;  top: -2px;  bottom: -2px;  right: -2px;  z-index: 1;  border-radius: 5px;  transition: background .45s, border-color .45s;  background: var(--background);  border: 2px solid var(--border);}.paw-button svg {  display: block;}.paw-button .text {  position: relative;  -webkit-backface-visibility: hidden;          backface-visibility: hidden;  -webkit-transform: translateZ(0);          transform: translateZ(0);  z-index: 3;  margin-right: 8px;  transition: width .25s;  width: var(--w, 60px);}.paw-button .text span,.paw-button .text svg {  transition: opacity .2s, -webkit-transform .15s ease-out;  transition: transform .15s ease-out, opacity .2s;  transition: transform .15s ease-out, opacity .2s, -webkit-transform .15s ease-out;  opacity: var(--o, 1);}.paw-button .text span {  display: block;  position: absolute;  left: 30px;  top: 0;  -webkit-transform: translateY(var(--y, 0));          transform: translateY(var(--y, 0));  color: var(--text);}.paw-button .text svg {  --background: var(--heart-background);  --border: var(--heart-border);  --shadow-light: transparent;  --shadow-dark: transparent;  width: 21px;  height: 19px;  -webkit-transform: translateX(var(--x));          transform: translateX(var(--x));}.paw-button >span {  display: block;  position: relative;  -webkit-backface-visibility: hidden;          backface-visibility: hidden;  -webkit-transform: translateZ(0);          transform: translateZ(0);  z-index: 2;  color: var(--number);}.paw-button .paws {  overflow: hidden;  position: absolute;  left: 0;  right: 0;  bottom: 0;  height: 60px;  z-index: 2;}.paw-button .paws svg {  position: absolute;  bottom: 0;  transition: opacity .2s, -webkit-transform .3s ease-out;  transition: transform .3s ease-out, opacity .2s;  transition: transform .3s ease-out, opacity .2s, -webkit-transform .3s ease-out;  opacity: var(--o, 0);  -webkit-transform: translate(var(--x, 0), var(--y, 0));          transform: translate(var(--x, 0), var(--y, 0));}.paw-button .paws svg.paw {  --x: -24px;  width: 30px;  height: 37px;  left: 32px;}.paw-button .paws svg.paw-clap {  --x: 16px;  --y: 34px;  --o: 1;  width: 29px;  height: 34px;  left: 34px;}.paw-button .paws .paw-effect {  left: 26px;  top: 12px;  width: 44px;  height: 44px;  position: absolute;}.paw-button .paws .paw-effect:before {  content: '';  display: block;  width: 100%;  height: 100%;  border-radius: 50%;  background: var(--circle);  -webkit-transform: scale(var(--s, 0));          transform: scale(var(--s, 0));  opacity: var(--o, 1);  transition: opacity .2s linear .25s, -webkit-transform .15s ease .16s;  transition: transform .15s ease .16s, opacity .2s linear .25s;  transition: transform .15s ease .16s, opacity .2s linear .25s, -webkit-transform .15s ease .16s;}.paw-button .paws .paw-effect div {  width: 2px;  height: 6px;  border-radius: 1px;  left: 50%;  bottom: 50%;  margin-left: -1px;  position: absolute;  background: var(--circle-line);  -webkit-transform: translateY(-24px) scaleX(0.7) scaleY(var(--s, 0));          transform: translateY(-24px) scaleX(0.7) scaleY(var(--s, 0));}.paw-button .paws .paw-effect div:before, .paw-button .paws .paw-effect div:after {  content: '';  display: block;  position: absolute;  width: 100%;  height: 100%;  background: inherit;  border-radius: inherit;  -webkit-transform: translate(var(--x, -22px), var(--y, 4px)) rotate(var(--r, -45deg)) scaleX(0.8) scaleY(var(--s, 0));          transform: translate(var(--x, -22px), var(--y, 4px)) rotate(var(--r, -45deg)) scaleX(0.8) scaleY(var(--s, 0));}.paw-button .paws .paw-effect div:after {  --x: 22px;  --r: 45deg;}.paw-button .paws .paw-effect div,.paw-button .paws .paw-effect div:before,.paw-button .paws .paw-effect div:after {  opacity: var(--o, 1);  -webkit-transform-origin: 50% 100%;          transform-origin: 50% 100%;  transition: opacity .18s linear .21s, -webkit-transform .12s ease .17s;  transition: transform .12s ease .17s, opacity .18s linear .21s;  transition: transform .12s ease .17s, opacity .18s linear .21s, -webkit-transform .12s ease .17s;}.paw-button i {  position: absolute;  display: block;  width: 4px;  height: 4px;  top: 50%;  left: 50%;  margin: -2px 0 0 -2px;  opacity: var(--o, 0);  background: var(--b);  -webkit-transform: translate(var(--x), var(--y)) scale(var(--s, 1));          transform: translate(var(--x), var(--y)) scale(var(--s, 1));}.paw-button:not(.confetti):hover .text {  --o: 0;  --x: 12px;  --y: 8px;}.paw-button:not(.confetti):hover .paws svg.paw {  --o: 1;  --x: 0;}.paw-button.animation .text {  --o: 0;}.paw-button.animation .text svg {  --background: var(--heart-background-active);  --border: var(--heart-border-active);  --shadow-light: var(--heart-shadow-light);  --shadow-dark: var(--heart-shadow-dark);}.paw-button.animation .paws svg.paw {  --x: 0;  --o: 1;  transition-delay: 0s;  -webkit-animation: paw .45s ease forwards;          animation: paw .45s ease forwards;}.paw-button.animation .paws svg.paw-clap {  -webkit-animation: paw-clap .5s ease-in forwards;          animation: paw-clap .5s ease-in forwards;}.paw-button.animation .paws .paw-effect {  --s: 1;  --o: 0;}.paw-button.confetti i {  -webkit-animation: confetti .6s ease-out forwards;          animation: confetti .6s ease-out forwards;}.paw-button.confetti .paws svg.paw {  --o: 0;  transition: opacity .15s linear .2s;}.paw-button.liked {  --background: var(--background-active);  --border: var(--border-active);}.paw-button.liked .text {  --w: 21px;}.paw-button.liked .text svg {  --o: 1;}.paw-button.liked >span {  --number: var(--number-active);}@-webkit-keyframes confetti {  from {    -webkit-transform: translate(0, 0);            transform: translate(0, 0);    opacity: 1;  }}@keyframes confetti {  from {    -webkit-transform: translate(0, 0);            transform: translate(0, 0);    opacity: 1;  }}@-webkit-keyframes paw {  0% {    -webkit-transform: translateX(var(--x));            transform: translateX(var(--x));  }  35% {    -webkit-transform: translateX(-16px);            transform: translateX(-16px);  }  55%,    70% {    -webkit-transform: translateX(0);            transform: translateX(0);  }  100% {    -webkit-transform: translateX(-12px);            transform: translateX(-12px);  }}@keyframes paw {  0% {    -webkit-transform: translateX(var(--x));            transform: translateX(var(--x));  }  35% {    -webkit-transform: translateX(-16px);            transform: translateX(-16px);  }  55%,    70% {    -webkit-transform: translateX(0);            transform: translateX(0);  }  100% {    -webkit-transform: translateX(-12px);            transform: translateX(-12px);  }}@-webkit-keyframes paw-clap {  50%,    70% {    -webkit-transform: translate(0, 0);            transform: translate(0, 0);  }}@keyframes paw-clap {  50%,    70% {    -webkit-transform: translate(0, 0);            transform: translate(0, 0);  }}html {  box-sizing: border-box;  -webkit-font-smoothing: antialiased;}* {  box-sizing: inherit;}*:before, *:after {  box-sizing: inherit;}body {  min-height: 100vh;  display: flex;  font-family: 'Roboto', Arial;  justify-content: center;  align-items: center;  background: #fff;}body .dribbble {  position: fixed;  display: block;  right: 20px;  bottom: 20px;}body .dribbble img {  display: block;  height: 28px;}