.twpp-player{
  --twpp-bg:linear-gradient(135deg,#07070b 0%,#0f1020 55%,#17122a 100%);
  --twpp-white:#ffffff;
  --twpp-muted-soft:rgba(255,255,255,.72);
  --twpp-orange-1:#ff6a00;
  --twpp-orange-2:#ffb347;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-self:center;
  width:100%;
  min-height:88px;
  max-height:116px;
  padding:10px 12px 11px;
  border-radius:20px;
  box-sizing:border-box;
  background:var(--twpp-bg);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 16px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03);
  overflow:hidden;
}
.twpp-top{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.twpp-cover-wrap{
  position:relative;
  width:64px;
  min-width:64px;
  height:64px;
  border-radius:8px;
  overflow:hidden;
  background:linear-gradient(135deg,#1a1a24 0%,#12121a 100%);
  box-shadow:0 8px 24px rgba(0,0,0,.26);
}
.twpp-cover-wrap.is-empty::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,#2f2b46 0%,#151521 100%);
}
.twpp-cover{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.twpp-play{
  position:relative;
  width:34px;
  min-width:34px;
  height:34px;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  appearance:none;
  box-shadow:none;
  outline:none;
  align-self:center;
}
.twpp-play:focus,
.twpp-play:active{
  outline:none;
  box-shadow:none;
}
.twpp-play:focus-visible{
  outline:2px solid rgba(255,255,255,.35);
  outline-offset:3px;
  border-radius:6px;
}
.twpp-icon{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.twpp-icon-play{
  width:0;
  height:0;
  border-top:14px solid transparent;
  border-bottom:14px solid transparent;
  border-left:22px solid #fff;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.35));
  margin-left:3px;
}
.twpp-icon-pause{
  width:18px;
  height:20px;
  display:none;
}
.twpp-icon-pause::before,
.twpp-icon-pause::after{
  content:"";
  position:absolute;
  top:0;
  width:6px;
  height:20px;
  background:#fff;
  border-radius:4px;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
}
.twpp-icon-pause::before{left:1px}
.twpp-icon-pause::after{right:1px}
.twpp-player.is-playing .twpp-icon-play{display:none}
.twpp-player.is-playing .twpp-icon-pause{display:block}

.twpp-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.twpp-audio{
  display:none;
}
.twpp-wave-shell{
  position:relative;
  flex:1;
  min-width:0;
  height:46px;
  display:flex;
  align-items:center;
}
.twpp-wave{
  width:100%;
  height:46px;
  cursor:pointer;
  outline:none;
}
.twpp-wave-canvas{
  width:100%;
  height:46px;
  display:block;
}
.twpp-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}
.twpp-meta-inline{
  min-width:0;
  flex:1;
  order:1;
}
.twpp-title{
  min-width:0;
  color:var(--twpp-white);
  font-size:12px;
  line-height:1.2;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:left;
  letter-spacing:.01em;
}
.twpp-time{
  color:var(--twpp-muted-soft);
  font-size:12px;
  line-height:1;
  white-space:nowrap;
  flex-shrink:0;
  order:2;
}
.twpp-sep{
  opacity:.55;
  padding:0 2px;
}
.twpp-artist,
.twpp-meta{
  display:none !important;
}
@media (max-width:767px){
  .twpp-player{
    padding:8px 10px 9px;
    min-height:76px;
    max-height:104px;
    gap:7px;
  }
  .twpp-top{
    gap:8px;
  }
  .twpp-cover-wrap{
    width:56px;
    min-width:56px;
    height:56px;
    border-radius:8px;
  }
  .twpp-play{
    width:28px;
    min-width:28px;
    height:28px;
  }
  .twpp-icon-play{
    border-top-width:11px;
    border-bottom-width:11px;
    border-left-width:17px;
  }
  .twpp-icon-pause{
    width:14px;
    height:16px;
  }
  .twpp-icon-pause::before,
  .twpp-icon-pause::after{
    width:5px;
    height:16px;
  }
  .twpp-time,.twpp-title{
    font-size:11px;
  }
  .twpp-wave-shell,
  .twpp-wave,
  .twpp-wave-canvas{
    height:40px;
  }
}