.bio-mini-player{
  position:fixed;
  left:50%;
  bottom:calc(.75rem + env(safe-area-inset-bottom));
  z-index:80;
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 48px;
  align-items:center;
  gap:.75rem;
  width:min(calc(100% - 1rem),520px);
  min-height:68px;
  padding:.5rem;
  border:1px solid #f4772188;
  border-radius:16px;
  background:#17110eef;
  color:#fff;
  box-shadow:0 12px 36px #000c;
  backdrop-filter:blur(14px);
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,calc(100% + 2rem));
  transition:opacity .2s ease,transform .25s ease,visibility .25s;
}
.bio-mini-player.is-visible{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}
.bio-mini-art{
  width:52px;
  height:52px;
  object-fit:cover;
  border-radius:9px;
}
.bio-mini-return{
  min-width:0;
  padding:.15rem 0;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.bio-mini-return strong,.bio-mini-return span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bio-mini-return strong{font:800 1rem/1.12 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.02em}
.bio-mini-return span{margin-top:.2rem;color:#d5cbc1;font-size:.82rem}
.bio-mini-toggle{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  padding:0;
  border:1px solid #fff8;
  border-radius:50%;
  background:#f47721;
  color:#160d08;
  cursor:pointer;
}
.bio-mini-toggle:active{transform:scale(.95)}
.bio-mini-toggle svg{width:25px;height:25px}
.bio-mini-return:focus-visible,.bio-mini-toggle:focus-visible{outline:3px solid #f6a568;outline-offset:3px}
@media(min-width:701px){
  .bio-mini-player{
    left:auto;
    right:1.25rem;
    bottom:1.25rem;
    width:360px;
    transform:translateY(calc(100% + 2rem));
  }
  .bio-mini-player.is-visible{transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){.bio-mini-player{transition:none}}

body:has(.bio-mini-player.is-visible){padding-bottom:calc(88px + env(safe-area-inset-bottom))}