.ucp-signoff{
  position:relative;
  inset:auto;
  display:block;
  width:100%;
  margin:0;
  isolation:isolate;
  min-height:0;
  padding:0;
  overflow:hidden;
  background:radial-gradient(circle at 18% 50%,rgba(39,95,161,.2),transparent 32%),linear-gradient(135deg,#08101a,#101b2b 58%,#090d14);
  color:#f2efe5;
  text-align:left
}

.ucp-signoff::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:auto -10vw -60% 40%;
  height:120px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(82,141,211,.13),transparent 68%);
  pointer-events:none
}

.ucp-details{
  padding:0 8vw
}

.ucp-emblem{
  display:block;
  width:38px;
  height:auto;
  justify-self:start;
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.34))
}

.ucp-copy{
  width:min(1120px,100%);
  margin:0 auto;
  padding:18px 0 25px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:14px 28px;
  border-top:1px solid rgba(213,226,238,.14)
}

.ucp-kicker{
  display:block;
  margin:0 0 4px;
  color:#c7a46e;
  font:8px var(--mono);
  letter-spacing:.17em
}

.ucp-summary-copy strong{
  display:block;
  color:#f4f0e6;
  font:clamp(17px,2vw,24px)/1.05 var(--serif);
  font-weight:400;
  letter-spacing:-.025em
}

.ucp-details summary{
  width:min(1120px,100%);
  min-height:58px;
  margin:0 auto;
  padding:10px 0;
  display:flex;
  align-items:center;
  gap:14px;
  cursor:pointer;
  list-style:none
}

.ucp-summary-copy{
  flex:1 1 auto;
  min-width:0
}

.ucp-details summary::-webkit-details-marker{
  display:none
}

.ucp-summary-action{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#b9c8d4;
  font:8px var(--mono);
  letter-spacing:.12em
}

.ucp-summary-action b{
  display:grid;
  width:24px;
  height:24px;
  place-items:center;
  border:1px solid rgba(210,180,128,.48);
  border-radius:50%;
  color:#d9b477;
  font:16px/1 var(--sans);
  transition:transform .2s ease,background-color .2s ease,color .2s ease
}

.ucp-details[open] .ucp-summary-action b{
  background:#d2a36d;
  color:#17130e;
  transform:rotate(45deg)
}

.ucp-names{
  margin:0;
  color:#d7dce3;
  font:10px/1.8 var(--mono);
  letter-spacing:.025em
}

.ucp-order{
  margin:0;
  grid-column:1;
  color:#9db8cf;
  font:9px/1.7 var(--mono);
  letter-spacing:.08em;
  text-transform:lowercase
}

.playlist-link{
  display:inline-flex;
  align-items:center;
  gap:20px;
  grid-column:2;
  grid-row:1/3;
  align-self:center;
  padding:9px 13px;
  border:1px solid rgba(210,180,128,.55);
  border-radius:999px;
  color:#f4ead8;
  font:9px var(--mono);
  transition:background-color .2s ease,border-color .2s ease,color .2s ease
}

.playlist-link span{
  color:#d9b477;
  font-size:9px;
  letter-spacing:.08em
}

.playlist-link:is(:hover,:focus-visible){
  background:#d2a36d;
  border-color:#d2a36d;
  color:#17130e
}

.playlist-link:is(:hover,:focus-visible) span{
  color:inherit
}

.playlist-note{
  grid-column:1/-1;
  max-width:680px;
  margin:0;
  color:#aab5bf;
  font:9px/1.65 var(--sans)
}

@media(max-width:700px){
  .ucp-signoff{
    text-align:left
  }

  .ucp-emblem{
    width:32px;
    justify-self:start
  }

  .ucp-details summary{
    min-height:54px;
    gap:10px
  }

  .ucp-details{
    padding:0 7vw
  }

  .ucp-summary-copy strong{
    font-size:16px
  }

  .ucp-summary-action>span{
    display:none
  }

  .ucp-copy{
    width:auto;
    padding:16px 0 22px;
    grid-template-columns:1fr
  }

  .playlist-link{
    grid-column:1;
    grid-row:auto;
    align-items:flex-start;
    flex-direction:column;
    gap:7px;
    text-align:left
  }

  .playlist-note{
    grid-column:1
  }
}

@media(max-width:620px){
  .social-footer-bottom{
    flex-wrap:wrap
  }

  .social-footer-bottom>.footer-themes{
    flex-wrap:nowrap;
    justify-content:center;
    gap:7px
  }
}

@media(prefers-reduced-motion:reduce){
  .playlist-link{
    transition:none
  }
}