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);
}

.ss-wrap {
  width: min(200px, 78vw);
}

.ss-viewport {
  overflow: hidden;
  border-radius: 16px;
  outline: none;
}

.ss-viewport:focus-visible {
  outline: 2px solid #6ec8ff;
  outline-offset: 2px;
}

.ss-track {
  display: flex;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  width: 500%;
}

.ss-slide {
  flex: 0 0 20%;
  aspect-ratio: 8/5;
  border-radius: 16px;
}

.ss-slide--a {
  background: linear-gradient(155deg, #6ec8ff 0%, #17141a 100%);
}

.ss-slide--b {
  background: linear-gradient(205deg, #b9a0ff 0%, #6ec8ff 100%);
}

.ss-slide--c {
  background: linear-gradient(115deg, #6ec8ff 0%, #fff7e6 55%);
}

.ss-slide--d {
  background: linear-gradient(250deg, #ff9ebb 0%, #6ec8ff 100%);
}

.ss-track.is-demo {
  animation: slide-loop 2s linear infinite;
}

@keyframes slide-loop {
  0%, 18% {
    transform: translateX(0%);
  }
  20%, 38% {
    transform: translateX(-20%);
  }
  40%, 58% {
    transform: translateX(-40%);
  }
  60%, 78% {
    transform: translateX(-60%);
  }
  80%, 100% {
    transform: translateX(-80%);
  }
}
.ss-thumbs {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ss-thumb {
  flex: 1 1 0;
  aspect-ratio: 8/5;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 2s linear, border-color 2s linear;
}

.ss-thumb--a {
  background: linear-gradient(155deg, #6ec8ff 0%, #17141a 100%);
}

.ss-thumb--b {
  background: linear-gradient(205deg, #b9a0ff 0%, #6ec8ff 100%);
}

.ss-thumb--c {
  background: linear-gradient(115deg, #6ec8ff 0%, #fff7e6 55%);
}

.ss-thumb--d {
  background: linear-gradient(250deg, #ff9ebb 0%, #6ec8ff 100%);
}

.ss-thumb.is-active, .ss-thumb:focus-visible {
  opacity: 1;
  border-color: #6ec8ff;
}

.ss-thumbs.is-demo .ss-thumb--a {
  animation: thumb-a 2s linear infinite;
}

.ss-thumbs.is-demo .ss-thumb--b {
  animation: thumb-b 2s linear infinite;
}

.ss-thumbs.is-demo .ss-thumb--c {
  animation: thumb-c 2s linear infinite;
}

.ss-thumbs.is-demo .ss-thumb--d {
  animation: thumb-d 2s linear infinite;
}

@keyframes thumb-a {
  0%, 18%, 80%, 100% {
    opacity: 1;
    border-color: #6ec8ff;
  }
  20%, 78% {
    opacity: 0.5;
    border-color: transparent;
  }
}
@keyframes thumb-b {
  20%, 38% {
    opacity: 1;
    border-color: #6ec8ff;
  }
  0%, 18%, 40%, 100% {
    opacity: 0.5;
    border-color: transparent;
  }
}
@keyframes thumb-c {
  40%, 58% {
    opacity: 1;
    border-color: #6ec8ff;
  }
  0%, 38%, 60%, 100% {
    opacity: 0.5;
    border-color: transparent;
  }
}
@keyframes thumb-d {
  60%, 78% {
    opacity: 1;
    border-color: #6ec8ff;
  }
  0%, 58%, 80%, 100% {
    opacity: 0.5;
    border-color: transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ss-thumb {
    transition: none;
  }
  .ss-track.is-demo, .ss-thumbs.is-demo .ss-thumb {
    animation: none;
  }
}