.button{--background:#1e2235;--color:#f6f8ff;--shadow:rgba(0,9,61,0.24);--cannon-dark:#a6accd;--cannon-light:#f6f8ff;--cannon-shadow:rgba(13,15,24,0.9);--confetti-1:#892ab8;--confetti-2:#ea4c89;--confetti-3:#ffff04;--confetti-4:#4af2fd;--z-before:-6;display:block;outline:none;cursor:pointer;position:relative;border:0;background:none;padding:9px 22px 9px 16px;line-height:26px;font-family:inherit;font-weight:600;font-size:14px;color:var(--color);-webkit-appearance:none;-webkit-tap-highlight-color:transparent;transition:-webkit-transform .4s;transition:transform .4s;transition:transform .4s,-webkit-transform .4s;transition:-webkit-transform var(--transform-duration,.4s);transition:transform var(--transform-duration,.4s);transition:transform var(--transform-duration,.4s),-webkit-transform var(--transform-duration,.4s);will-change:transform;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:perspective(440px) rotateX(0deg) rotateY(0deg) translateZ(0);transform:perspective(440px) rotateX(0deg) rotateY(0deg) translateZ(0);-webkit-transform:perspective(440px) rotateX(calc(var(--rx, 0)*1deg)) rotateY(calc(var(--ry, 0)*1deg)) translateZ(0);transform:perspective(440px) rotateX(calc(var(--rx, 0)*1deg)) rotateY(calc(var(--ry, 0)*1deg)) translateZ(0)}.button:hover{--transform-duration:0.16s}.button.success{--confetti-scale:0;--stroke-dashoffset:15}.button:before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;border:1px solid rgba(0,0,0,.5);border-radius:25px;-webkit-transform:translateZ(calc(var(--z-before)*1px));transform:translateZ(calc(var(--z-before)*1px));background:var(--background);box-shadow:0 4px 8px var(--shadow)}.button .icon,.button span{display:inline-block;vertical-align:top;position:relative;z-index:1}.button .icon{--z:2px;width:24px;height:14px;margin:8px 16px 0 0;-webkit-transform:translate(0,0) translateZ(2px);transform:translate(0,0) translateZ(2px);-webkit-transform:translate(calc(var(--icon-x, 0)*1px),calc(var(--icon-y, 0)*1px)) translateZ(2px);transform:translate(calc(var(--icon-x, 0)*1px),calc(var(--icon-y, 0)*1px)) translateZ(2px)}.button .icon .confetti{position:absolute;left:17px;bottom:9px}.button .icon .confetti svg{width:18px;height:16px;display:block;stroke-width:1px;fill:none;stroke-linejoin:round;stroke-linecap:round}.button .icon .confetti svg *{transition:stroke-dashoffset .2s;stroke-dasharray:15 20;stroke-dashoffset:0;stroke-dashoffset:var(--stroke-dashoffset,0);stroke:var(--confetti-2);stroke:var(--stroke-all,var(--stroke,var(--confetti-2)))}.button .icon .confetti svg :nth-child(2){--stroke:var(--confetti-3)}.button .icon .confetti svg :nth-child(3){--stroke:var(--confetti-1)}.button .icon .confetti .emitter{position:absolute;left:4px;bottom:4px;pointer-events:none}.button .icon .confetti .emitter div{width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:1px;position:absolute;left:0;top:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;background:none;background:var(--confetti-all,var(--b,none))}.button .icon .confetti i{width:4px;height:4px;display:block;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform:scale(var(--confetti-scale,.5));transform:scale(var(--confetti-scale,.5));position:absolute;transition:-webkit-transform .25s;transition:transform .25s;transition:transform .25s,-webkit-transform .25s;left:-1px;left:var(--left,-1px);top:3px;top:var(--top,3px);border-radius:1px;border-radius:var(--border-radius,1px);background:var(--confetti-3);background:var(--confetti-background,var(--confetti-3))}.button .icon .confetti i:nth-child(2){--left:9px;--top:-1px;--border-radius:2px;--confetti-background:var(--confetti-4)}.button .icon .confetti i:nth-child(3){--left:5px;--top:3px;--confetti-background:var(--confetti-1)}.button .icon .confetti i:nth-child(4){--left:10px;--top:14px;--confetti-background:var(--confetti-2)}.button .icon .confetti i:nth-child(5){--left:9px;--top:7px;--confetti-background:var(--confetti-4)}.button .icon .confetti i:nth-child(6){--left:6px;--top:8px;--border-radius:2px;--confetti-background:var(--confetti-2)}.button .icon .cannon{position:relative;width:24px;height:14px;-webkit-transform:translateY(3px) rotate(-45deg);transform:translateY(3px) rotate(-45deg);-webkit-filter:drop-shadow(-2px 2px 2px var(--cannon-shadow));filter:drop-shadow(-2px 2px 2px var(--cannon-shadow))}.button .icon .cannon:after,.button .icon .cannon:before{content:"";display:block;height:14px}.button .icon .cannon:before{background:linear-gradient(var(--cannon-dark),var(--cannon-light) 50%,var(--cannon-dark));width:100%;-webkit-clip-path:polygon(25px -1px,0 52%,25px 15px);clip-path:polygon(25px -1px,0 52%,25px 15px)}.button .icon .cannon:after{width:6px;position:absolute;right:-3px;top:0;border-radius:50%;box-shadow:inset 0 0 0 .5px var(--cannon-light);background:linear-gradient(90deg,var(--cannon-dark),var(--cannon-light))}.button.white{--background:#fff;--color:#1e2235;--border:#e1e6f9;--shadow:none;--cannon-dark:#103fc5;--cannon-light:#275efe;--cannon-shadow:rgba(0,9,61,0.2)}.button.white:before{box-shadow:inset 0 0 0 1px var(--border)}.button.grey{--background:#404660;--cannon-shadow:rgba(13,15,24,0.2);--cannon-dark:#d1d6ee;--cannon-light:#fff}html{box-sizing:border-box;-webkit-font-smoothing:antialiased}*,:after,:before{box-sizing:inherit}body .button{margin:0 12px}body .dribbble{position:fixed;display:block;right:20px;bottom:20px}body .dribbble img{display:block;height:28px}body .twitter{position:fixed;display:block;right:64px;bottom:14px}body .twitter svg{width:32px;height:32px;fill:#1da1f2}.custom-confetti{width:100px;height:100px;top:-110px;z-index:100;left:-50px}.custom-confetti i,.custom-confetti svg{width:0!important;height:0!important}.custom-confetti:before{content:none!important}
/*# sourceMappingURL=main.c7ba4f2a.chunk.css.map */
.rangeslider{margin:20px 0;position:relative;background:#e6e6e6;touch-action:none}.rangeslider,.rangeslider .rangeslider__fill{display:block;box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}.rangeslider .rangeslider__handle{background:#fff;border:1px solid #ccc;cursor:pointer;display:inline-block;position:absolute;box-shadow:0 1px 3px rgba(0,0,0,.4),0 -1px 3px rgba(0,0,0,.4)}.rangeslider .rangeslider__handle .rangeslider__active{opacity:1}.rangeslider .rangeslider__handle-tooltip{width:40px;height:40px;text-align:center;position:absolute;background-color:rgba(0,0,0,.8);font-weight:400;font-size:14px;transition:all .1s ease-in;border-radius:4px;display:inline-block;color:#fff;left:50%;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.rangeslider .rangeslider__handle-tooltip span{margin-top:12px;display:inline-block;line-height:100%}.rangeslider .rangeslider__handle-tooltip:after{content:" ";position:absolute;width:0;height:0}.rangeslider-horizontal{height:12px;border-radius:10px}.rangeslider-horizontal .rangeslider__fill{height:100%;background-color:#7cb342;border-radius:10px;top:0}.rangeslider-horizontal .rangeslider__handle{width:30px;height:30px;border-radius:30px;top:50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.rangeslider-horizontal .rangeslider__handle:after{content:" ";position:absolute;width:16px;height:16px;top:6px;left:6px;border-radius:50%;background-color:#dadada;box-shadow:inset 0 1px 3px rgba(0,0,0,.4),inset 0 -1px 3px rgba(0,0,0,.4)}.rangeslider-horizontal .rangeslider__handle-tooltip{top:-55px}.rangeslider-horizontal .rangeslider__handle-tooltip:after{border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid rgba(0,0,0,.8);left:50%;bottom:-8px;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.rangeslider-vertical{margin:20px auto;height:150px;max-width:10px;background-color:transparent}.rangeslider-vertical .rangeslider__fill,.rangeslider-vertical .rangeslider__handle{position:absolute}.rangeslider-vertical .rangeslider__fill{width:100%;background-color:#7cb342;box-shadow:none;bottom:0}.rangeslider-vertical .rangeslider__handle{width:30px;height:10px;left:-10px;box-shadow:none}.rangeslider-vertical .rangeslider__handle-tooltip{left:-100%;top:50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.rangeslider-vertical .rangeslider__handle-tooltip:after{border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid rgba(0,0,0,.8);left:100%;top:12px}.rangeslider-reverse.rangeslider-horizontal .rangeslider__fill{right:0}.rangeslider-reverse.rangeslider-vertical .rangeslider__fill{top:0;bottom:inherit}.rangeslider__labels{position:relative}.rangeslider-vertical .rangeslider__labels{position:relative;list-style-type:none;margin:0 0 0 24px;padding:0;text-align:left;width:250px;height:100%;left:10px}.rangeslider-vertical .rangeslider__labels .rangeslider__label-item{position:absolute;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.rangeslider-vertical .rangeslider__labels .rangeslider__label-item:before{content:"";width:10px;height:2px;background:#000;position:absolute;left:-14px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:-1}.rangeslider__labels .rangeslider__label-item{position:absolute;font-size:14px;cursor:pointer;display:inline-block;top:10px;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}
/*# sourceMappingURL=2.20aed3d1.chunk.css.map */



.my-custom-switch {
  height: fit-content;
}
.my-custom-switch input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
}
.my-custom-switch label {
  cursor: pointer;
  width: 40px;
  height: 24px;
  background: rgba(145, 145, 145, 0.27);
  display: block;
  border-radius: 50px;
  position: relative;
  user-select: none;
}
.my-custom-switch label:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 19px;
  height: 19px;
  background: #fff;
  border-radius: 12.5px;
  transition: 0.3s;
}
.my-custom-switch input:checked + label {
  background: #34a3d4;
}
.my-custom-switch input:checked + label:after {
  left: calc(100% - 2px);
  transform: translateX(-100%);
}
.my-custom-switch label:active:after {
  width: 25px;
}
.my-custom-switch label:active {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.custom-range {
  display: flex;
  width: 250px;
  align-items: center;
}
.custom-range .text {
  margin: 10px;
  font-size: 12px;
}
.custom-range input {
  background: linear-gradient(to right, #34a3d4 0%, #30d827 50%, #fff 50%, #fff 100%);
}
.custom-range input[type="range"] {
  display: block;
  -webkit-appearance: none;
  background-color: #bdc3c7;
  max-width: 300px;
  height: 5px;
  border-radius: 5px;
  margin: 0 auto;
  outline: 0;
}
.custom-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: 0.3s ease-in-out;
}
.custom-range input[type="range"]::-webkit-slider-thumb:hover {
  background-color: white;
}
.paw-button{
  cursor: pointer;
}
.cmpt-heart-interactions{
  height: 90px;
}
.cmpt-volume{
  height: 32px;
  display: flex;
  align-items: center;
}
.cmtp-card{
  border: 1px solid #2185d0;
  width: max-content;
}
.cmtp-card .card-image img{
  width: 300px;
  height: 200px;
  object-fit: cover;
}

/* paw clap */

.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 0.45s, border-color 0.45s;
  background: var(--background);
  border: 2px solid var(--border);
}
.paw-button svg {
  display: block;
}
.paw-button .text {
  position: relative;
  backface-visibility: hidden;
  transform: translateZ(0);
  z-index: 3;
  margin-right: 8px;
  transition: width 0.25s;
  width: var(--w, 60px);
}
.paw-button .text span, .paw-button .text svg {
  transition: transform 0.15s ease-out, opacity 0.2s;
  opacity: var(--o, 1);
}
.paw-button .text span {
  display: block;
  position: absolute;
  left: 30px;
  top: 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;
  transform: translateX(var(--x));
}
.paw-button > span {
  display: block;
  position: relative;
  backface-visibility: hidden;
  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: transform 0.3s ease-out, opacity 0.2s;
  opacity: var(--o, 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);
  transform: scale(var(--s, 0));
  opacity: var(--o, 1);
  transition: transform 0.15s ease 0.16s, opacity 0.2s linear 0.25s;
}
.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);
  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;
  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);
  transform-origin: 50% 100%;
  transition: transform 0.12s ease 0.17s, opacity 0.18s linear 0.21s;
}
.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);
  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;
  animation: paw 0.45s ease forwards;
}
.paw-button.animation .paws svg.paw-clap {
  animation: paw-clap 0.5s ease-in forwards;
}
.paw-button.animation .paws .paw-effect {
  --s: 1;
  --o: 0;
}
.paw-button.confetti i {
  animation: confetti 0.6s ease-out forwards;
}
.paw-button.confetti .paws svg.paw {
  --o: 0;
  transition: opacity 0.15s linear 0.2s;
}
.paw-button.liked {
  --background: var(--background-active);
  --border: var(--border-active);
  width: 75px;
}
.paw-button.liked .text {
  --w: 21px;
  --o: 0;
  margin-right: 15px;
}
.paw-button.liked .text svg {
  --o: 0;
  --background: var(--heart-background-active);
  --border: var(--heart-border-active);
  --shadow-light: var(--heart-shadow-light);
  --shadow-dark: var(--heart-shadow-dark);
}
.paw-button.liked .paws svg.paw {
  left: 14px;
  --o: 1;
  --x: 0;
}
.paw-button.liked.animation .text svg {
  --o: 0;
}
.paw-button.liked.animation .paws svg.paw {
  animation: paw-like 0.45s ease forwards;
}
.paw-button.liked.animation .paws svg.paw-clap {
  animation: paw-clap-like 0.5s ease-in forwards;
}
.paw-button.liked > span {
  --number: var(--number-active);
}
.paw-button.liked:hover .text svg {
  --o: 0;
}
@keyframes confetti {
  from {
    transform: translate(0, 0);
    opacity: 1;
 }
}
@keyframes paw-like {
  0% {
    transform: translateX(var(--x));
 }
  35% {
    transform: translateX(-10px);
 }
  55%, 70% {
    transform: translateX(0);
 }
  100% {
    transform: translateX(-6px);
 }
}
@keyframes paw {
  0% {
    transform: translateX(var(--x));
 }
  35% {
    transform: translateX(-16px);
 }
  55%, 70% {
    transform: translateX(0);
 }
  100% {
    transform: translateX(-12px);
 }
}
@keyframes paw-clap {
  50%, 70% {
    transform: translate(0, 0);
 }
}
@keyframes paw-clap-like {
  50%, 70% {
    transform: translate(-20px, 0);
 }
}
html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}