/* Dread Raven / 9-60E. Small, optional homage; never competes with the music. */
.now-playing .player-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  position:relative;
  z-index:11;
}
.bey-profile {
  position:relative;
  flex:0 0 auto;
  font-family:var(--pixel);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.065em;
}
.bey-profile summary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:80px;
  min-height:32px;
  border:1px solid rgba(85,237,255,.39);
  border-radius:7px;
  padding:7px 9px;
  background:linear-gradient(135deg,rgba(13,34,57,.7),rgba(37,13,54,.68));
  color:#b9e8f9;
  font:400 9px/1.2 var(--pixel);
  letter-spacing:.035em;
  cursor:pointer;
  list-style:none;
  -webkit-user-select:none;
  user-select:none;
  box-shadow:inset 0 1px rgba(153,236,255,.08);
  transition:border-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.bey-profile summary::-webkit-details-marker {display:none}
.bey-profile summary::marker {content:''}
.bey-profile summary span {color:#92ffe2;font:600 15px/1 var(--body)}
.bey-profile summary:hover,.bey-profile[open] summary {
  color:#f2e9ff;
  border-color:rgba(139,246,255,.83);
  box-shadow:0 0 14px rgba(81,210,255,.2),inset 0 1px rgba(153,236,255,.16);
}
.bey-profile summary:focus-visible {
  outline:2px solid #9cffff;
  outline-offset:3px;
}
.bey-profile-panel {
  position:absolute;
  top:calc(100% + 9px);
  right:0;
  z-index:12;
  width:min(302px,calc(100vw - 67px));
  padding:16px 16px 12px;
  border:1px solid rgba(109,226,255,.79);
  border-radius:10px;
  background:linear-gradient(155deg,rgba(9,19,42,.985),rgba(23,11,43,.985) 66%,rgba(39,13,57,.985));
  box-shadow:0 14px 34px rgba(0,0,0,.8),0 0 25px rgba(107,66,236,.34),inset 0 1px rgba(204,231,255,.16);
  color:#eff6ff;
  text-align:left;
  letter-spacing:0;
  text-transform:none;
  cursor:default;
}
.bey-profile-eyebrow {
  margin:0 0 8px;
  color:#8af6ff;
  font:400 8px/1.4 var(--pixel);
  letter-spacing:.16em;
}
.bey-profile-panel h3 {
  margin:0 0 13px;
  color:#f5dcff;
  font:400 15px/1.35 var(--pixel);
  letter-spacing:.02em;
  text-shadow:0 0 12px rgba(234,107,255,.34);
}
.bey-profile-panel h3 span {
  display:block;
  margin-top:4px;
  color:#a5ffdc;
  font:400 11px/1.4 var(--pixel);
  letter-spacing:.14em;
}
.bey-profile-panel dl {margin:0}
.bey-profile-panel dl div {
  display:grid;
  grid-template-columns:minmax(80px,1fr) minmax(0,1.3fr);
  gap:9px;
  align-items:baseline;
  padding:7px 0;
  border-top:1px solid rgba(127,161,240,.2);
}
.bey-profile-panel dt {
  color:#85b9dc;
  font:400 9px/1.4 var(--pixel);
}
.bey-profile-panel dd {
  min-width:0;
  margin:0;
  color:#f4edff;
  font:500 12px/1.4 var(--body);
  overflow-wrap:anywhere;
}
.bey-profile-panel .bey-profile-footer {
  margin:11px 0 0;
  padding-top:8px;
  border-top:1px solid rgba(127,161,240,.22);
  color:#ac9cce;
  font:400 10px/1.4 var(--body);
}
@media(max-width:385px) {
  .bey-profile summary {min-width:72px;padding:6px}
  .bey-profile-panel {width:min(285px,calc(100vw - 51px));padding:13px}
}