.creator-hint a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .65rem 1rem;
  border: 2px solid #ffd3e5;
  border-radius: .75rem;
  background: rgba(217, 45, 112, .92);
  box-shadow: 0 .35rem 0 #6c173e, 0 .7rem 1.5rem rgba(4, 8, 20, .32);
  color: #fff;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  transition: transform .18s ease, background-color .18s ease;
}

.creator-hint a:hover {
  transform: translateY(-2px);
  background: #ef4a92;
  text-decoration: none;
}

.creator-hint {
  width: 100%;
  max-width: 27rem;
  padding: 1rem;
  border: 1px solid rgba(255, 211, 229, .42);
  border-radius: .9rem;
  background: rgba(9, 14, 28, .3);
}

.creator-hint p {
  margin-bottom: .85rem;
  text-wrap: balance;
}

.creator-hint p strong {
  display: block;
  margin-bottom: .25rem;
}

.creator-hint p br {
  display: none;
}

.creator-hint a {
  width: 100%;
}

@media (min-width: 761px) {
  .hero {
    align-items: flex-start;
  }

  .hero .content {
    margin-top: clamp(14.5rem, 25vh, 18rem);
    padding-top: 0;
  }

  .hero .radio-banner {
    top: clamp(1rem, 3vh, 2rem);
    right: auto;
    bottom: auto;
    left: clamp(1.5rem, 4vw, 5rem);
    width: min(34vw, 30rem);
    z-index: 2;
  }
}

.creator-message::before {
  content: "DEMASU  //  CREATE YOUR WORLD";
  position: absolute;
  top: 5rem;
  left: max(1rem, calc(50% - 34rem));
  color: rgba(156, 37, 85, .2);
  font: 900 .7rem/1 Arial, sans-serif;
  letter-spacing: .22em;
  writing-mode: vertical-rl;
}

.message-heading {
  position: relative;
}

.message-heading::after {
  content: "";
  display: block;
  width: min(12rem, 38vw);
  height: .45rem;
  margin-top: 2rem;
  background: repeating-linear-gradient(90deg, #ef4a92 0 1.8rem, #171a28 1.8rem 2.15rem);
  transform: skewX(-22deg);
}

.music-transition .music-play-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.8rem;
  font-weight: 800;
}

.music-transition {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.music-transition > * {
  width: min(100%, 48rem);
  text-align: center;
}

.music-transition .music-play-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-width: 9rem;
  min-height: 3.5rem;
  margin-top: 0;
  padding: .75rem 1.35rem;
  border: 2px solid #ffd3e5;
  border-radius: 999px;
  background: #d92d70;
  box-shadow: 0 .45rem 0 #6c173e, 0 1rem 2rem rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 1.1rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.music-transition .music-play-button:hover {
  transform: translateY(-2px);
  background: #ef4a92;
  box-shadow: 0 .6rem 0 #6c173e, 0 1.1rem 2rem rgba(0, 0, 0, .4);
  text-decoration: none;
}

.music-transition .music-play-button:active {
  transform: translateY(5px);
  box-shadow: 0 0 0 #6c173e;
}

@media (max-width: 760px) {
  .hero {
    justify-content: flex-start;
  }

  .hero .content {
    margin-top: clamp(10rem, 43vw, 14.5rem);
  }

  .creator-hint a { width: 100%; font-size: .9rem; }
  .content h1,
  .message-heading h2,
  .submission-cta h2,
  .music-transition h2,
  .closing-line { overflow-wrap: anywhere; }
  .hero .radio-banner {
    position: absolute;
    top: .75rem;
    right: auto;
    bottom: auto;
    left: 1rem;
    width: min(calc(100% - 2rem), 32rem);
    margin: 0;
    overflow: hidden;
  }

  .hero .radio-banner-display {
    padding-right: 1.55rem;
  }

  .hero .radio-banner-volume {
    position: absolute;
    top: 5%;
    right: 0;
    width: 1.25rem;
    min-width: 1.25rem;
    height: 90%;
    margin: 0;
    writing-mode: vertical-lr;
    direction: rtl;
  }
}

@media (prefers-reduced-motion: reduce) {
  .creator-hint a,
  .music-transition .music-play-button { transition: none; }
}