html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.lb {
  display: grid;
  justify-items: center;
  gap: 16px;
  width: 100%;
}

.lb__field {
  position: relative;
  width: 100%;
  height: clamp(120px, 34vh, 180px);
}

.lb__cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 3px solid #fff7e6;
  border-radius: 50%;
  will-change: transform;
}

.lb__dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  background: #5b8cf8;
  border-radius: 50%;
  will-change: transform;
}

.lb__ghost {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff7e6;
  will-change: transform;
}

.lb__ghost--1 {
  opacity: 0.55;
}

.lb__ghost--2 {
  opacity: 0.38;
}

.lb__ghost--3 {
  opacity: 0.24;
}

.lb__hint {
  margin: 0;
  color: #fff7e6;
  font-weight: 700;
  font-size: clamp(9px, 2.4vw, 11px);
}

.lb.is-demo .lb__cursor,
.lb.is-demo .lb__dot,
.lb.is-demo .lb__ghost {
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-iteration-count: infinite;
}

.lb.is-demo .lb__cursor {
  animation-name: lbCursor;
}

.lb.is-demo .lb__dot {
  animation-name: lbDot;
}

.lb.is-demo .lb__ghost--1 {
  animation-name: lbG1;
}

.lb.is-demo .lb__ghost--2 {
  animation-name: lbG2;
}

.lb.is-demo .lb__ghost--3 {
  animation-name: lbG3;
}

@keyframes lbCursor {
  0%, 4% {
    transform: translate3d(24px, 20px, 0);
  }
  40%, 48% {
    transform: translate3d(240px, 26px, 0);
  }
  58%, 64% {
    transform: translate3d(236px, 86px, 0);
  }
  90%, 100% {
    transform: translate3d(24px, 20px, 0);
  }
}
@keyframes lbDot {
  0%, 12% {
    transform: translate3d(24px, 20px, 0);
  }
  46%, 54% {
    transform: translate3d(206px, 40px, 0);
  }
  64%, 72% {
    transform: translate3d(192px, 72px, 0);
  }
  94%, 100% {
    transform: translate3d(24px, 20px, 0);
  }
}
@keyframes lbG1 {
  0%, 20% {
    transform: translate3d(24px, 20px, 0);
  }
  52%, 60% {
    transform: translate3d(172px, 52px, 0);
  }
  72%, 80% {
    transform: translate3d(156px, 60px, 0);
  }
  96%, 100% {
    transform: translate3d(24px, 20px, 0);
  }
}
@keyframes lbG2 {
  0%, 28% {
    transform: translate3d(24px, 20px, 0);
  }
  58%, 66% {
    transform: translate3d(138px, 62px, 0);
  }
  78%, 84% {
    transform: translate3d(126px, 46px, 0);
  }
  98%, 100% {
    transform: translate3d(24px, 20px, 0);
  }
}
@keyframes lbG3 {
  0%, 36% {
    transform: translate3d(24px, 20px, 0);
  }
  64%, 72% {
    transform: translate3d(104px, 70px, 0);
  }
  82%, 88% {
    transform: translate3d(96px, 34px, 0);
  }
  98%, 100% {
    transform: translate3d(24px, 20px, 0);
  }
}
@media (max-width: 340px) {
  .lb {
    gap: 8px;
  }
  .lb__field {
    height: clamp(100px, 30vh, 140px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lb.is-demo .lb__cursor,
  .lb.is-demo .lb__dot,
  .lb.is-demo .lb__ghost {
    animation: none !important;
  }
  .lb.is-demo .lb__cursor {
    transform: translate3d(60px, 20px, 0) !important;
  }
  .lb.is-demo .lb__dot {
    transform: translate3d(96px, 24px, 0) !important;
  }
  .lb.is-demo .lb__ghost--1 {
    transform: translate3d(132px, 28px, 0) !important;
  }
  .lb.is-demo .lb__ghost--2 {
    transform: translate3d(168px, 32px, 0) !important;
  }
  .lb.is-demo .lb__ghost--3 {
    transform: translate3d(204px, 36px, 0) !important;
  }
}