body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #ffc5d0 0%, #ff5e99 100%);
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
#kwfadbbgelements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
#kwfadbbgelements img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  image-rendering: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
  position: relative;
  z-index: 5;
}
.kwfadbbgBubbleWrapper {
  position: absolute;
  left: 0;
  will-change: transform;
  pointer-events: none;
  animation-timing-function: linear;
}
.kwfadbbgBubble {
  width: 35vw;
  height: 35vw;
  border-radius: 50%;
  background: radial-gradient(circle at center, #ffffff0d, #ffffff03);
  box-shadow: 0 0 0.8vw #ffddeb99, inset 0.2vw 0.2vw 0.5vw #ffffffe6,
    inset -0.2vw -0.2vw 0.5vw #ff388ecc;
  backdrop-filter: blur(0.1vw);
  will-change: transform;
}
.kwfadbbgRare {
  position: fixed;
  z-index: 25;
}

.kwfadbbgBubble::after {
  content: "";
  position: absolute;
  top: 3%;
  left: 6%;
  width: 80%;
  height: 70%;
  transform: rotate(-20deg);
  border-radius: 50%;
  background: linear-gradient(
    160deg,
    #ffffffe6 0%,
    #ffffff1a 50%,
    #ffffff00 100%
  );
}

@keyframes kwfadbbgMoveX {
  0% { transform: translateX(-50vw); }
  100% { transform: translateX(120vw); }
}

@keyframes kwfadbbgMoveY1 {
  0% { transform: translateY(0); }
  100% { transform: translateY(2vw); }
}

@keyframes kwfadbbgMoveY2 {
  0% { transform: translateY(-1.5vw); }
  100% { transform: translateY(1.5vw); }
}

@keyframes kwfadbbgMoveY3 {
  0% { transform: translateY(0); }
  50% { transform: translateY(-1.5vw); }
  100% { transform: translateY(0); }
}

#kwfadbContainer {
  display: flex;
  width: 90vw;
  height: 85vh;
  gap: 2vw;
  position: relative;
}
#kwfadbLeftPanel {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 10;
}
#kwfadbGalleryTitle {
  font-size: 3vw;
  font-family: "kcontinuumboldfnt", sans-serif;
  color: #ffffff;
  text-align: center;
  margin-bottom: 1vw;
  text-shadow: 0.1vw 0.1vw 0 rgba(0, 0, 0, 0.1);
}
#kwfadbGalleryGrid {
  position: relative;
  flex: 1;
  background-color: rgba(255, 255, 255, 0.15);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.658) 0%, rgba(240, 240, 240, 0.3) 45%, rgba(220, 220, 220, 0.1) 50%, rgba(240, 240, 240, 0.2) 100%);
  border-radius: 1vw;
  overflow-y: auto;
  padding: 1vw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5vw;
  border: 0.2vw solid rgba(255, 255, 255, 0.7);
  border-bottom: 0.2vw solid rgba(200, 200, 200, 0.4);
  border-right: 0.2vw solid rgba(200, 200, 200, 0.3);
  box-shadow: inset 0 0.2vw 0.5vw rgba(255, 255, 255, 1), 0 0.5vw 1vw rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(0.2vw);
  align-content: start;
}
#kwfadbGalleryGrid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 45%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
  border-radius: 0 0 100% 0 / 0 0 50% 0;
  pointer-events: none;
  z-index: 1;
}
.kwfadbGalleryItem {
  height: 15vw;
  border-radius: 0.5vw;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}
.kwfadbGalleryItem:hover {
  transform: scale(1.05);
  border-color: #ffd1dc;
}
.kwfadbGalleryImg {
  width: 100%;
  height: 12.5vw;
  object-fit: contain;
  display: block;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 0.5vw;
  box-shadow: 0 0.2vw 0.4vw rgba(0,0,0,0.1);
  background-color: rgba(255, 255, 255, 0.5);
}
.kwfadbGalleryDate {
  height: 2.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "kcontinuummediumfnt", sans-serif;
  font-size: 0.7vw;
  color: #3f3f3f;
  text-shadow: 0 0.05vw 0 rgba(255,255,255,0.5);
}
#kwfadbRightPanel {
  flex: 0 0 35vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vw;
  position: relative;
  z-index: 50;
}
#kwfadbCanvasWrapper {
  position: relative;
  width: 35vw;
  height: 35vw;
  padding: 1.5vw;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.15);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.658) 0%, rgba(240, 240, 240, 0.3) 45%, rgba(220, 220, 220, 0.1) 50%, rgba(240, 240, 240, 0.2) 100%);
  border-radius: 1vw;
  border: 0.2vw solid rgba(255, 255, 255, 0.7);
  border-bottom: 0.2vw solid rgba(200, 200, 200, 0.4);
  border-right: 0.2vw solid rgba(200, 200, 200, 0.3);
  box-shadow: inset 0 0.2vw 0.5vw rgba(255, 255, 255, 1), 0 0.5vw 1vw rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(0.2vw);
  overflow: hidden;
}
#kwfadbCanvasWrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 45%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
  border-radius: 0 0 100% 0 / 0 0 50% 0;
  pointer-events: none;
  z-index: 1;
}
#kwfadbCanvas {
  width: 100%;
  height: 100%;
  background: #fff;
  cursor: crosshair;
  border: 0.1vw solid #eee;
  touch-action: none;
  display: block;
  position: relative;
  z-index: 2;
  border-radius: 0.5vw;
}
#kwfadbIntroOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
#kwfadbIntroBox {
  width: 50%;
  height: auto;
  background-color: #3b8ced;
  background-image: linear-gradient(to bottom, #6bcaff 0%, #147eff 100%);
  color: white;
  padding: 1.2vw;
  font-family: "kcontinuummediumfnt", sans-serif;
  border-radius: 1vw;
  position: relative;
  text-align: center;
  box-shadow: inset 0 0.1vw 0.4vw rgba(255, 255, 255, 0.6), 0 0.5vw 1vw rgba(0, 0, 0, 0.3);
  border: 0.15vw solid #91c4ff;
}
#kwfadbIntroBox::after {
  content: "";
  position: absolute;
  top: 0.2vw;
  left: 0.2vw;
  width: calc(100% - 0.4vw);
  height: 45%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.1) 100%);
  border-radius: 0.8vw 0.8vw 2vw 2vw;
  pointer-events: none;
}
#kwfadbIntroBox h1 {
  margin: 0 0 0.5vw 0;
  font-size: 2vw;
}
#kwfadbIntroBox p {
  font-size: 0.9vw;
  line-height: 1.4;
  margin-bottom: 0.5vw;
  font-weight: normal;
}
#kwfadbIntroBox b {
  color: #ffcccc;
}
#kwfadbIntroClose {
  position: absolute;
  top: -6%;
  left: -4%;
  width: 2.5vw;
  height: 2.5vw;
  cursor: pointer;
  object-fit: contain;
  filter: drop-shadow(0 0.2vw 0.2vw rgba(0, 0, 0, 0.2));
  transition: transform 0.1s;
  user-select: none;
  -webkit-user-select: none;
  z-index: 20;
}
#kwfadbIntroClose:active {
  transform: scale(0.9);
}
#kwfadbToolsRow {
  display: flex;
  gap: 0.8vw;
  align-items: center;
  padding: 0.5vw 1.5vw;
  position: relative;
  width: fit-content;
  height: auto;
  border: 0.2vw solid #b9b9b9;
  border-radius: 15vw;
  background-color: #e0e0e0;
  background-image: radial-gradient(75% 50% at 50% 0%, #ffffff, transparent),
    radial-gradient(75% 35% at 50% 85%, #353535, transparent);
  box-shadow: inset 0 -0.6vw 1.2vw 0.3vw rgba(0, 0, 0, 0.15),
    inset 0 -1.2vw 1.2vw 0.3vw #ffffff,
    inset 0 0 0.6vw 0.3vw rgba(255, 255, 255, 0.8),
    0 0.3vw 1.2vw 0.3vw rgba(0, 0, 0, 0.2),
    0 0.3vw 1.2vw 0.3vw rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}
#kwfadbToolsRow::after {
  content: "";
  position: absolute;
  top: 0.3vw;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 15vw;
  width: 90%;
  height: 40%;
  background-image: linear-gradient(to bottom, #ffffff, transparent);
  opacity: 0.9;
  pointer-events: none;
}
#kwfadbToolBrush,
#kwfadbToolFill,
#kwfadbUndoBtn,
#kwfadbRedoBtn,
#kwfadbClearBtn {
  width: 2.5vw;
  height: 2.5vw;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.1s;
  z-index: 2;
  user-select: none;
  -webkit-user-select: none;
}
#kwfadbToolBrush:active,
#kwfadbToolFill:active,
#kwfadbUndoBtn:active,
#kwfadbRedoBtn:active,
#kwfadbClearBtn:active {
  transform: scale(0.9);
  filter: brightness(0.8);
}
#kwfadbToolBrush:hover,
#kwfadbToolFill:hover,
#kwfadbUndoBtn:hover,
#kwfadbRedoBtn:hover,
#kwfadbClearBtn:hover {
  transform: scale(1.1);
}
#kwfadbColorCont {
  position: relative;
  width: 3vw;
  height: 3vw;
  cursor: pointer;
  z-index: 2;
}
#kwfadbColorCont img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
}
#kwfadbColorPicker {
  position: absolute;
  visibility: hidden;
  width: 0;
  height: 0;
  border: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
#kwfadbSizeSlider {
  width: 6vw;
  height: 2vw;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  margin: 0;
}
#kwfadbSizeSlider:focus {
  outline: none;
}
#kwfadbSizeSlider::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.6vw;
  cursor: pointer;
  background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(255, 255, 255, 0.2) 45%,
      transparent 45%,
      transparent 100%
    ),
    linear-gradient(to bottom, #b866ff, #5e00a3);
  border-radius: 0.3vw;
  border: 0.1vw solid #b55bf5;
  box-shadow: inset 0 0.1vw 0.2vw rgba(255, 255, 255, 0.4),
    0 0.2vw 0.3vw rgba(0, 0, 0, 0.2);
}
#kwfadbSizeSlider::-webkit-slider-thumb {
  box-shadow: 0 0.2vw 0.4vw rgba(0, 0, 0, 0.4);
  border: 0.1vw solid #ead4ff;
  height: 1.6vw;
  width: 1.6vw;
  border-radius: 50%;
  background: radial-gradient(
    farthest-corner at 30% 30%,
    #ffffff 0%,
    #d399ff 30%,
    #6a00b8 100%
  );
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -0.55vw;
}
#kwfadbSizeSlider::-moz-range-track {
  width: 100%;
  height: 0.6vw;
  cursor: pointer;
  background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(255, 255, 255, 0.2) 45%,
      transparent 45%,
      transparent 100%
    ),
    linear-gradient(to bottom, #b866ff, #5e00a3);
  border-radius: 0.3vw;
  border: 0.1vw solid #9750c9;
  box-shadow: inset 0 0.1vw 0.2vw rgba(255, 255, 255, 0.4),
    0 0.2vw 0.3vw rgba(0, 0, 0, 0.2);
}
#kwfadbSizeSlider::-moz-range-thumb {
  box-shadow: 0 0.2vw 0.4vw rgba(0, 0, 0, 0.4);
  border: 0.1vw solid #ead4ff;
  height: 1.6vw;
  width: 1.6vw;
  border-radius: 50%;
  background: radial-gradient(
    farthest-corner at 30% 30%,
    #ffffff 0%,
    #d399ff 30%,
    #6a00b8 100%
  );
  cursor: pointer;
  border: none;
}
.kwfadbShapeCont {
  width: fit-content;
  position: relative;
  display: flex;
  align-items: center;
  z-index: 2;
}
.kwfadbShapeCont::before {
  content: "";
  position: absolute;
  top: 0.2vw;
  left: 0.2vw;
  width: calc(100% - 0.4vw);
  height: 40%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.1)
  );
  border-radius: 0.4vw;
  pointer-events: none;
  z-index: 3;
}
.kwfadbShapeCont::after {
  content: "";
  display: block;
  position: absolute;
  right: 0.4vw;
  top: 50%;
  transform: translateY(-50%);
  height: 1.5vw;
  width: 1.5vw;
  background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234d8085'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e"),
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.5),
      transparent,
      #80dae2
    );
  background-size: 100% 100%, cover;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0.1vw 0.2vw 0px #4da8af;
  z-index: 3;
}
#kwfadbShapeSelect {
  margin: 0;
  background: radial-gradient(
      farthest-corner at bottom center,
      rgba(255, 255, 255, 0.7),
      transparent
    ),
    linear-gradient(to bottom, rgba(104, 0, 235, 0.2), rgba(80, 118, 255, 0.1));
  background-color: #80dae2;
  color: #4d8085;
  font-family: "kcontinuummediumfnt", sans-serif;
  font-size: 0.9vw;
  border-radius: 0.5vw;
  padding: 0.4vw 2.5vw 0.4vw 0.6vw;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  border: none;
  box-shadow: 0 0.2vw 0.3vw 0px #4da8af;
  transition: background-color 300ms ease, box-shadow 300ms ease,
    transform 100ms ease;
  height: auto;
}
#kwfadbShapeSelect:focus {
  outline: none;
}
#kwfadbShapeSelect:hover {
  filter: saturate(1.2);
  box-shadow: 0 0.2vw 0.3vw 0px rgba(0, 0, 0, 0.3);
}
#kwfadbActionRow {
  display: flex;
  gap: 1vw;
  align-items: center;
}
#kwfadbSubmitBtn {
  position: relative;
  background-color: hwb(110 38% 2%);
  background-image: radial-gradient(
      farthest-corner at bottom center,
      rgba(255, 255, 255, 0.7),
      transparent
    ),
    linear-gradient(to bottom, rgba(104, 0, 235, 0.2), rgba(80, 118, 255, 0.1));
  color: hwb(110 18% 40%);
  font-family: "kcontinuummediumfnt", sans-serif;
  font-size: 1.5vw;
  padding: 0.5vw 2vw;
  border-radius: 1vw;
  cursor: pointer;
  border: 0.2vw solid hwb(110 62% 7%);
  box-shadow: 0 0.2vw 0.3vw 0 hwb(110 30% 21%);
  transition: background-color 300ms ease, box-shadow 300ms ease, transform 100ms ease;
}
#kwfadbSubmitBtn::after {
  content: "";
  position: absolute;
  top: 0.3vw;
  left: 0.2vw;
  width: calc(100% - 0.4vw);
  height: 40%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.1)
  );
  border-radius: 0.8vw;
  transition: 200ms;
  pointer-events: none;
}
#kwfadbSubmitBtn:hover {
  background-color: hwb(110 60% 2%);
  box-shadow: 0 0.2vw 0.3vw 0 rgba(0, 0, 0, 0.3);
}
#kwfadbSubmitBtn:hover::after {
  height: 30%;
}
#kwfadbSubmitBtn:active {
  transform: scale(0.96);
  transition: transform 0ms;
}
#kwfadbSubmitBtn:active::after {
  height: 40%;
  transition: 0ms;
}
#kwfadbDownloadBtn,
#kwfadbWarnBtn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 3vw;
  height: 3vw;
  transition: transform 0.1s;
}
#kwfadbDownloadBtn img,
#kwfadbWarnBtn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
}
#kwfadbDownloadBtn:hover,
#kwfadbWarnBtn:hover {
  transform: scale(1.1);
}
#kwfadbBackLink {
  position: absolute;
  top: 1vw;
  left: 1vw;
  width: 5vw;
  height: 5vw;
  padding: 0;
  background: none;
  border: none;
  display: block;
  transition: transform 0.1s;
  z-index: 100;
}
#kwfadbBackLink:hover {
  transform: scale(1.1);
}
#kwfadbBackLink img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0.1vw 0.1vw rgba(0,0,0,0.2));
  user-select: none;
  -webkit-user-select: none;
}
#kwfadbStatusMsg {
  color: white;
  font-size: 0.8vw;
  margin-left: 0.5vw;
  font-family: "kcontinuummediumfnt", sans-serif;
  text-shadow: 0 0.1vw 0 rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar {
  width: 0.5vw;
}
::-webkit-scrollbar-thumb {
  background: #fff;
  border-radius: 0.25vw;
}
#kwfadbFocusModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 100;
  backdrop-filter: blur(0.2vw);
}
#kwfadbFocusInner {
  position: relative;
  max-width: 60vw;
  max-height: 80vh;
  background: #fff;
  padding: 1vw;
  border-radius: 1vw;
  box-shadow: 0 0.5vw 2vw rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}
#kwfadbFocusImg {
  width: 30vw;
  height: 30vw;
  object-fit: contain;
  display: block;
  border: 0.2vw solid #ddd;
  background-color: #ffffff;
}
#kwfadbFocusCloseBtn {
  position: absolute;
  top: -1.5vw;
  right: -1.5vw;
  width: 3vw;
  height: 3vw;
  cursor: pointer;
  filter: drop-shadow(0 0.2vw 0.2vw rgba(0, 0, 0, 0.5));
  transition: transform 0.1s;
  user-select: none;
}
#kwfadbFocusCloseBtn:active {
  transform: scale(0.9);
}

.kwfadbToolActive {
  transform: scale(1.15);
  filter: drop-shadow(0 0 0.4vw #ffffff) drop-shadow(0 0 0.2vw #ffffff);
}