:root {
  color-scheme: light;
  --canvas: #9f9f9d;
  --blue: #0800f8;
  --black: #030303;
  --red: #a82348;
  --silver: #9b9c9a;
  --pale: #d7ddd8;
  --menu-bg: rgba(255, 255, 255, 0.72);
  --menu-border: rgba(0, 0, 0, 0.1);
  --menu-text: rgba(0, 0, 0, 0.56);
  --menu-active: #050505;
  --menu-active-text: #ffffff;
  --ease: cubic-bezier(0.77, 0, 0.175, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--canvas);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button {
  font: inherit;
}

.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--canvas);
}

.scene {
  position: relative;
  width: min(100vw, calc(100vh * 1.5015));
  height: min(100vh, calc(100vw / 1.5015));
  overflow: visible;
  transform-origin: center;
}

.white-frame {
  position: absolute;
  overflow: hidden;
  background: #fff;
}

.stack,
.rail,
.hero-stack {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--card-w, 18%);
  height: var(--card-h, 31%);
  border-radius: clamp(7px, 1.25vw, 18px);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--card-bg, #000);
  box-shadow: 0 9px 18px rgba(0, 0, 0, 0.1);
  transform-origin: center;
  will-change: transform, opacity;
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.card[data-tone="black"] {
  --card-bg: var(--black);
}

.card[data-tone="blue"] {
  --card-bg: var(--blue);
}

.card[data-tone="red"] {
  --card-bg: var(--red);
}

.card[data-tone="silver"] {
  --card-bg: linear-gradient(125deg, #c8c9c6 0%, #777876 50%, #eeeeeb 100%);
}

.card[data-tone="pale"] {
  --card-bg: var(--pale);
}

.card[data-type="image"] {
  background-image: var(--image);
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

.word,
.store-mark {
  cursor: text;
}

.word:focus,
.store-mark:focus,
.card[data-type="image"]:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 4px;
}

.word {
  position: relative;
  z-index: 1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 2.65vw, 54px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
}

.card.is-small-word .word {
  font-size: clamp(16px, 2.1vw, 42px);
}

.store-mark {
  position: relative;
  z-index: 1;
  width: 62%;
  height: 22%;
  border: clamp(2px, 0.2vw, 4px) solid #fff;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: clamp(14px, 2.1vw, 38px);
  font-weight: 500;
  letter-spacing: 0;
}

.dots {
  position: relative;
  z-index: 1;
  width: 44%;
  aspect-ratio: 1;
}

.dots span,
.splash span {
  position: absolute;
  display: block;
  background: #fff;
}

.dots span {
  width: 23%;
  aspect-ratio: 1;
  border-radius: 50%;
}

.dots span:nth-child(1) {
  left: 39%;
  top: 0;
}

.dots span:nth-child(2) {
  left: 68%;
  top: 20%;
}

.dots span:nth-child(3) {
  left: 68%;
  top: 56%;
}

.dots span:nth-child(4) {
  left: 39%;
  bottom: 0;
}

.dots span:nth-child(5) {
  left: 9%;
  top: 56%;
}

.dots span:nth-child(6) {
  left: 9%;
  top: 20%;
}

.dots span:nth-child(7) {
  left: 36%;
  top: 36%;
  width: 31%;
}

.splash {
  position: relative;
  z-index: 1;
  width: 56%;
  height: 44%;
  transform: rotate(-16deg);
}

.splash span {
  left: 50%;
  top: 50%;
  width: 82%;
  height: 21%;
  border-radius: 999px;
  transform-origin: center;
}

.splash span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(0deg);
}

.splash span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(54deg);
}

.splash span:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-54deg);
}

.star {
  position: relative;
  z-index: 1;
  width: 42%;
  aspect-ratio: 1;
}

.star::before,
.star::after,
.star span {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 20%;
  border-radius: 2px;
  background: #000;
  transform-origin: center;
}

.star::before {
  transform: translate(-50%, -50%) rotate(0deg);
}

.star::after {
  transform: translate(-50%, -50%) rotate(60deg);
}

.star span {
  transform: translate(-50%, -50%) rotate(120deg);
}

.menu {
  position: fixed;
  z-index: 20;
  top: max(16px, env(safe-area-inset-top));
  left: 50%;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px;
  border: 1px solid var(--menu-border);
  border-radius: 999px;
  background: var(--menu-bg);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
  transform: translateX(-50%);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

.menu.is-hidden {
  display: none;
}

.switcher {
  display: flex;
  align-items: center;
  gap: 2px;
}

.menu-button {
  min-width: 34px;
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  appearance: none;
  background: transparent;
  color: var(--menu-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 26px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.menu-button:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.35);
  outline-offset: 2px;
}

.menu-button.is-active {
  background: var(--menu-active);
  color: var(--menu-active-text);
}

.export-link {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0 999px 999px 0;
  min-width: 58px;
}

.template-1 .white-frame {
  width: 28.5%;
  height: 57.2%;
  top: 21.4%;
}

.template-1 .white-frame:nth-child(1) {
  left: 4%;
}

.template-1 .white-frame:nth-child(2) {
  left: 35.8%;
}

.template-1 .white-frame:nth-child(3) {
  right: 4%;
}

.template-1 .card {
  --card-w: 50%;
  --card-h: 58%;
  animation: template1-card 9.23s var(--ease) infinite;
  animation-delay: calc(var(--i) * -1.18s + var(--panel) * -0.55s);
  z-index: calc(20 - var(--i));
}

.template-1 .white-frame:nth-child(2) .card,
.template-1 .white-frame:nth-child(3) .card {
  --card-w: 48%;
  --card-h: 48%;
}

.template-1 .white-frame:nth-child(3) .card {
  animation-name: template1-horizontal-card;
}

@keyframes template1-card {
  0%,
  100% {
    transform: translate(-50%, -50%) translate3d(0, calc(var(--i) * -7%), 0) rotate(0deg);
  }

  24% {
    transform: translate(-50%, -50%) translate3d(calc(var(--i) * -6%), calc(var(--i) * 6%), 0)
      rotate(-1deg);
  }

  49% {
    transform: translate(-50%, -50%) translate3d(calc(var(--i) * 7%), calc(var(--i) * 1%), 0)
      rotate(0.4deg);
  }

  74% {
    transform: translate(-50%, -50%) translate3d(calc(var(--i) * 3%), calc(var(--i) * -5%), 0)
      rotate(0deg);
  }
}

@keyframes template1-horizontal-card {
  0%,
  100% {
    transform: translate(-50%, -50%) translate3d(calc(var(--i) * -6%), 0, 0) rotate(0deg);
  }

  32% {
    transform: translate(-50%, -50%) translate3d(calc(var(--i) * 6%), calc(var(--i) * -1%), 0)
      rotate(0deg);
  }

  62% {
    transform: translate(-50%, -50%) translate3d(calc(var(--i) * 5%), calc(var(--i) * 4%), 0)
      rotate(0.5deg);
  }
}

.template-2 .white-frame,
.template-3 .white-frame {
  width: 41.7%;
  height: 83.2%;
  left: 29.15%;
  top: 8.4%;
}

.template-2 .rail {
  perspective: 900px;
}

.template-2 .card {
  --card-w: 31%;
  --card-h: 48%;
  animation: rail-card 7.6s var(--ease) infinite;
  animation-delay: calc(var(--i) * -0.49s);
  z-index: calc(50 - var(--i));
}

@keyframes rail-card {
  0%,
  100% {
    opacity: 0.46;
    transform: translate(-50%, -50%) translate3d(245%, -92%, -650px) rotateY(-68deg) scale(0.66);
  }

  18% {
    opacity: 0.78;
    transform: translate(-50%, -50%) translate3d(142%, -52%, -360px) rotateY(-50deg) scale(0.86);
  }

  42% {
    opacity: 1;
    transform: translate(-50%, -50%) translate3d(16%, 3%, 95px) rotateY(-8deg) scale(1.32);
  }

  64% {
    opacity: 0.82;
    transform: translate(-50%, -50%) translate3d(-108%, 58%, -250px) rotateY(55deg) scale(0.85);
  }

  82% {
    opacity: 0.5;
    transform: translate(-50%, -50%) translate3d(-190%, 96%, -520px) rotateY(66deg) scale(0.68);
  }
}

.template-3 .hero-stack {
  perspective: 900px;
}

.template-3 .card {
  --card-w: 34%;
  --card-h: 46%;
  animation: hero-card 5s var(--ease) infinite;
  animation-delay: calc(var(--i) * -0.84s);
  z-index: calc(30 - var(--i));
}

@keyframes hero-card {
  0%,
  100% {
    opacity: 0.76;
    transform: translate(-50%, -50%) translate3d(25%, 0, -170px) rotate(-2deg) scale(0.92);
  }

  28% {
    opacity: 1;
    transform: translate(-50%, -50%) translate3d(-1%, -1%, 40px) rotate(-13deg) scale(1.18);
  }

  58% {
    opacity: 0.9;
    transform: translate(-50%, -50%) translate3d(-18%, -3%, -55px) rotate(8deg) scale(1.02);
  }

  79% {
    opacity: 0.62;
    transform: translate(-50%, -50%) translate3d(-35%, 2%, -210px) rotate(13deg) scale(0.86);
  }
}

.template-4 .white-frame {
  width: 41.7%;
  height: 83.2%;
  left: 29.15%;
  top: 8.4%;
}

.template-4 .card {
  --card-w: 42%;
  --card-h: 62%;
  animation: template4-card 9.3s var(--ease) infinite;
  animation-delay: calc(var(--i) * -0.92s + var(--panel) * -0.36s);
  z-index: calc(25 - var(--i));
}

@keyframes template4-card {
  0%,
  100% {
    transform: translate(-50%, -50%) translate3d(0, calc(var(--i) * -6.5%), 0) rotate(0deg);
  }

  24% {
    transform: translate(-50%, -50%) translate3d(calc(var(--i) * 2.5%), calc(var(--i) * 4.5%), 0)
      rotate(0deg);
  }

  49% {
    transform: translate(-50%, -50%) translate3d(calc(var(--i) * -2.5%), calc(var(--i) * -3%), 0)
      rotate(0deg);
  }

  73% {
    transform: translate(-50%, -50%) translate3d(calc(var(--i) * 3.5%), calc(var(--i) * 1%), 0)
      rotate(0deg);
  }
}

@media (max-width: 720px) {
  .scene {
    width: min(100vw, calc(100vh * 0.72));
    height: min(100vh, calc(100vw / 0.72));
  }

  .template-1 .white-frame {
    width: 92%;
    height: 62%;
    left: 4%;
    top: 20%;
  }

  .template-1 .white-frame:nth-child(2),
  .template-1 .white-frame:nth-child(3) {
    display: none;
  }

  .template-1 .card {
    --card-w: 56%;
    --card-h: 58%;
  }

  .template-2 .white-frame,
  .template-3 .white-frame {
    width: 100%;
    height: 84%;
    left: 0;
    top: 8%;
  }

  .template-2 .card {
    --card-w: 50%;
    --card-h: 43%;
  }

  .template-3 .card {
    --card-w: 70%;
    --card-h: 45%;
  }

  .template-4 .white-frame {
    width: 100%;
    height: 84%;
    left: 0;
    top: 8%;
  }

  .template-4 .card {
    --card-w: 68%;
    --card-h: 72%;
  }

  .menu {
    top: max(10px, env(safe-area-inset-top));
  }

  .menu-button {
    min-width: 31px;
    padding: 0 8px;
  }

  .export-link {
    min-width: 52px;
  }
}