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

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

.vj {
  position: relative;
  width: min(92vw, 160vh - 12.8vw);
  aspect-ratio: 480/300;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
  background: rgb(95.0588235294%, 90.7215686275%, 91.9607843137%);
  container-type: inline-size;
}

.vj__scene {
  position: absolute;
  inset: 0;
}

.cap {
  position: absolute;
  left: 0;
  right: 0;
  padding: 0 4cqw;
  font-size: max(10px, 3.1cqw);
  font-weight: 700;
  line-height: 1.3;
  color: #17141a;
  text-align: center;
}

.cap--bad {
  color: #c2361a;
}

.cap--note {
  font-size: max(10px, 2.9cqw);
  font-weight: 600;
}

.sl {
  position: absolute;
  height: 15cqw;
}

.sl--mini {
  pointer-events: none;
}

.sl__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 0.6cqw 1.4cqw rgba(23, 20, 26, 0.12);
}

.sl__fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(76, 212, 166, 0.72);
  transform: translateX(-100%);
}

.sl--bad .sl__fill {
  background: rgba(255, 158, 187, 0.85);
}

.sl__label {
  position: absolute;
  left: 15cqw;
  right: 2cqw;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4.2cqw;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  color: #17141a;
}

.sl__handle {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 6px 12px rgba(23, 20, 26, 0.32);
  color: #17141a;
  font-size: 7cqw;
  cursor: grab;
  touch-action: none;
}

.sl__handle:active {
  cursor: grabbing;
}

.sl__handle:focus-visible {
  outline: 3px solid #17141a;
  outline-offset: 3px;
}

.sl__handle--arc {
  left: 0;
  top: 0;
}

.ico {
  display: grid;
  place-items: center;
  line-height: 0;
}

.ico svg {
  display: block;
  width: 1em;
  height: 1em;
}

.sl__handle .ico--check-circle {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.sl__mark {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.5cqw;
  margin-left: -0.25cqw;
  border-radius: 4px;
  background: rgba(23, 20, 26, 0.38);
}

.sl > .sl__mark {
  top: -1.6cqw;
  bottom: -1.6cqw;
}

.rub {
  position: absolute;
  top: 1.25cqw;
  height: 12.5cqw;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 158, 187, 0.95), rgba(255, 158, 187, 0.55));
  transform-origin: 0 50%;
  transform: scaleX(0);
  opacity: 0;
}

.fing {
  position: absolute;
  left: 0;
  top: 4.5cqw;
  width: 6cqw;
  height: 6cqw;
  box-sizing: border-box;
  border: 0.6cqw dashed #17141a;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.ghost {
  position: absolute;
  box-sizing: border-box;
  border: 0.6cqw dashed #17141a;
  border-radius: 50%;
  background: rgba(255, 158, 187, 0.4);
  opacity: 0;
  pointer-events: none;
}

.ghost.is-hit {
  background: rgba(76, 212, 166, 0.5);
}

.pulse {
  position: absolute;
  border-radius: 50%;
  background: #4cd4a6;
  opacity: 0;
  pointer-events: none;
}

.sl--shimmer .sl__bg {
  background: rgb(87.6470588235%, 83.2352941176%, 100%);
}

.sl--shimmer .sl__label {
  white-space: pre;
}

.ch {
  display: inline-block;
}

.sheen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 20cqw;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
  opacity: 0;
  pointer-events: none;
}

.spin {
  position: absolute;
  inset: 20%;
  box-sizing: border-box;
  border: 0.9cqw solid rgba(23, 20, 26, 0.15);
  border-top-color: #17141a;
  border-radius: 50%;
  opacity: 0;
}

.sl--hint .ico--caret-right {
  position: absolute;
  top: 50%;
  margin-top: -3.5cqw;
  font-size: 7cqw;
  color: #17141a;
}

.sl--hint .sl__label {
  justify-content: flex-end;
  padding-right: 1cqw;
  font-size: 3.8cqw;
}

.arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.arc__track,
.arc__fill,
.arc__flash {
  fill: none;
  stroke-linecap: round;
}

.arc__track {
  stroke: rgba(255, 255, 255, 0.88);
  stroke-width: 7;
}

.arc__fill {
  stroke: #4cd4a6;
  stroke-width: 7;
  stroke-dasharray: 0 95;
}

.arc__fill.is-off {
  stroke: #ff9ebb;
}

.arc__flash {
  stroke: #ffffff;
  stroke-width: 11;
  opacity: 0;
}

.arc__mark {
  stroke: #17141a;
  stroke-width: 0.7;
  opacity: 0.5;
}

.pw {
  position: absolute;
  left: 50%;
  top: 31cqw;
  margin-left: -7.5cqw;
  font-size: 15cqw;
  line-height: 0;
  color: #17141a;
}

.pw__label {
  position: absolute;
  left: 0;
  right: 0;
  top: 47cqw;
  text-align: center;
  font-size: 3.6cqw;
  font-weight: 800;
  color: #17141a;
}

.lock {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.lock__img {
  position: absolute;
  inset: -3cqw;
  background: linear-gradient(180deg, rgb(68.7254901961%, 88.137254902%, 100%), rgb(100%, 83.6%, 83.7882352941%));
}

.lock__sun {
  position: absolute;
  left: 66%;
  top: 26%;
  width: 14cqw;
  height: 14cqw;
  border-radius: 50%;
  background: rgb(100%, 79.4117647059%, 81.7647058824%);
}

.lock__hill {
  position: absolute;
  left: -10%;
  right: -10%;
  border-radius: 50%;
}

.lock__hill--far {
  top: 58%;
  bottom: -60%;
  background: rgb(61.3921568627%, 90.7254901961%, 80.8039215686%);
}

.lock__hill--near {
  top: 72%;
  bottom: -60%;
  background: rgb(42.6274509804%, 77.0196078431%, 75.568627451%);
}

.lock__clock {
  position: absolute;
  left: 0;
  right: 0;
  top: 13cqw;
  text-align: center;
  font-size: 17cqw;
  font-weight: 800;
  line-height: 1;
  color: #17141a;
  text-shadow: 0 0 2cqw rgba(255, 255, 255, 0.85);
  transform-origin: 50% 0;
}

.lock__card {
  position: absolute;
  left: 22cqw;
  right: 22cqw;
  height: 7cqw;
  display: flex;
  align-items: center;
  padding: 0 3cqw;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 6px 12px rgba(23, 20, 26, 0.32);
  color: #17141a;
  font-size: 3.2cqw;
  font-weight: 700;
}

.sl--lock .sl__bg {
  background: rgba(255, 255, 255, 0.8);
}

.vj__pause {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
  padding: 4px 12px;
  border: 2px solid #17141a;
  border-radius: 999px;
  background: #17141a;
  color: #fff7e6;
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.6;
  cursor: pointer;
  box-shadow: 0 6px 12px rgba(23, 20, 26, 0.32);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vj__pause[aria-pressed=true] {
  background: #fff7e6;
  color: #17141a;
}

.vj__pause:hover {
  transform: translateY(-2px);
}

.vj__pause:active {
  transform: translateY(1px);
}

.vj__pause:focus-visible {
  outline: 3px solid #17141a;
  outline-offset: 3px;
}

.vj__status {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  max-width: calc(100% - 120px);
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: #17141a;
  color: #fff7e6;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.vj__live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 340px) {
  .vj__pause,
  .vj__status {
    font-size: 10px;
    padding: 0 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vj__pause {
    transition: none !important;
  }
  .vj__pause:hover,
  .vj__pause:active {
    transform: none !important;
  }
}