:root {
  --kkbm-balloon-yellow: #ffeb4b;
  --kkbm-balloon-blue: #1b93f5;
  --kkbm-balloon-blush: #fff0f0;
  --kkbm-balloon-cocoa: #572114;
}

.kkbm-animation-layer {
  contain: strict;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  z-index: 35;
}

.kkbm-balloon {
  --kkbm-balloon-color: var(--kkbm-balloon-yellow);
  height: calc(var(--kkbm-balloon-size) * 2.55);
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform-origin: 50% 42%;
  width: var(--kkbm-balloon-size);
  will-change: transform;
}

.kkbm-balloon--blue {
  --kkbm-balloon-color: var(--kkbm-balloon-blue);
}

.kkbm-balloon--blush {
  --kkbm-balloon-color: var(--kkbm-balloon-blush);
}

.kkbm-balloon--cocoa {
  --kkbm-balloon-color: var(--kkbm-balloon-cocoa);
}

.kkbm-balloon__body {
  aspect-ratio: 0.82;
  background:
    radial-gradient(circle at 29% 24%, rgb(255 255 255 / 78%) 0 5%, transparent 6%),
    linear-gradient(145deg, rgb(255 255 255 / 24%), transparent 42%),
    var(--kkbm-balloon-color);
  border: 2px solid rgb(87 33 20 / 28%);
  border-radius: 49% 51% 48% 52% / 43% 43% 57% 57%;
  box-shadow:
    inset -12px -15px 22px rgb(87 33 20 / 18%),
    0 12px 22px rgb(87 33 20 / 17%);
  position: relative;
  width: 100%;
}

.kkbm-balloon__knot {
  background: var(--kkbm-balloon-color);
  border-bottom: 1px solid rgb(87 33 20 / 35%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  display: block;
  height: calc(var(--kkbm-balloon-size) * 0.14);
  left: 50%;
  position: absolute;
  top: calc(var(--kkbm-balloon-size) * 1.18);
  transform: translateX(-50%);
  width: calc(var(--kkbm-balloon-size) * 0.19);
}

.kkbm-balloon__string {
  fill: none;
  height: calc(var(--kkbm-balloon-size) * 1.3);
  left: 50%;
  overflow: visible;
  position: absolute;
  stroke: rgb(87 33 20 / 72%);
  stroke-linecap: round;
  stroke-width: 1.7;
  top: calc(var(--kkbm-balloon-size) * 1.29);
  transform: translateX(-50%);
  width: calc(var(--kkbm-balloon-size) * 0.32);
}

@media (prefers-reduced-motion: reduce) {
  .kkbm-animation-layer {
    display: none !important;
  }
}