.mini-player,
.mini-player * {
   box-sizing: border-box;
}
.mini-player {
   width: 100%;
   height: 100%;
   min-height: min(320px, 100%);
   overflow: visible;
   position: relative;
   color: #fff;
   background: #151515;
   font: 400 16px/1.25 Lato, Arial, sans-serif;
}
.mini-background,
.mini-background:after,
.mini-cover,
.mini-cover img {
   position: absolute;
   inset: 0;
}
.mini-background {
   z-index: 0;
   overflow: hidden;
}
.mini-background img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
   filter: blur(7px);
   transform: scale(1.08);
}
.mini-background:after {
   content: "";
   background: rgba(0,0,0,.2);
}
.mini-card {
   width: min(325px, calc(100% - 40px));
   height: min(400px, calc(100% - 40px));
   min-height: 280px;
   left: 50%;
   top: 50%;
   z-index: 2;
   overflow: hidden;
   position: absolute;
   border-radius: 10px;
   transform: translate(-50%, -50%);
   background: #151515;
   box-shadow: none;
}
.mini-card-shadow {
   width: min(325px, calc(100% - 40px));
   height: min(400px, calc(100% - 40px));
   left: 50%;
   top: 50%;
   z-index: 1;
   pointer-events: none;
   position: absolute;
   border-radius: 10px;
   transform: translate(-50%, -50%);
   background: #f94c57;
   filter: blur(30px);
}
.mini-cover {
   z-index: 1;
   overflow: hidden;
   transition: transform .8s ease;
}
.mini-cover:empty {
   background: linear-gradient(135deg, #333, #111);
}
.mini-cover img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
}
.mini-player.is-playing .mini-cover {
   transform: scale(1.08);
}
.mini-panel {
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 3;
   display: grid;
   grid-template-columns: minmax(0,1fr);
   grid-template-areas:
      "info"
      "transport"
      "progress"
      "time"
      "volume";
   gap: .45rem;
   position: absolute;
   min-height: 45%;
   padding: 1rem;
   background: linear-gradient(90deg, rgba(145,145,145,.94), rgba(220,220,220,.94));
}
.mini-button {
   border: 0;
   padding: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   color: #111;
   background: transparent;
   line-height: 1;
}
.mini-button svg,
.mini-volume-icon {
   width: 1em;
   height: 1em;
   display: inline-block;
   fill: currentColor;
   pointer-events: none;
}
.mini-button svg {
   vertical-align: middle;
}
.mini-volume-icon {
   font-size: 1rem;
}
.mini-play-pause {
   width: 3.1rem;
   height: 3.1rem;
}
.mini-play-pause .mini-pause-icon,
.mini-player.is-playing .mini-play-icon {
   display: none;
}
.mini-player.is-playing .mini-pause-icon {
   display: inline-block;
}
.mini-info {
   grid-area: info;
   min-width: 0;
   text-align: center;
}
.mini-artist,
.mini-title {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.mini-artist {
   color: #f94c57;
   font-weight: 700;
   text-shadow: 0 0 15px rgba(255,255,255,.85);
}
.mini-title {
   color: #fff;
   margin-top: .2rem;
}
.mini-transport {
   grid-area: transport;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: .75rem;
}
.mini-nav {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: .75rem;
}
.mini-progress-row {
   grid-area: progress;
   display: flex;
   align-items: center;
   justify-content: center;
}
.mini-progress,
.mini-volume {
   appearance: none;
   border-radius: 30px;
   background: transparent;
   cursor: pointer;
   outline: none;
}
.mini-progress {
   width: min(78%, 13rem);
}
.mini-progress::-webkit-slider-runnable-track,
.mini-volume::-webkit-slider-runnable-track {
   height: 5px;
   border-radius: 30px;
   background: #fff;
}
.mini-volume::-webkit-slider-runnable-track {
   height: 4px;
}
.mini-progress::-moz-range-track,
.mini-volume::-moz-range-track {
   height: 5px;
   border-radius: 30px;
   background: #fff;
}
.mini-volume::-moz-range-track {
   height: 4px;
}
.mini-progress::-webkit-slider-thumb,
.mini-volume::-webkit-slider-thumb {
   width: 11px;
   height: 11px;
   margin-top: -3px;
   border: 0;
   border-radius: 30px;
   appearance: none;
   background: #f94c57;
}
.mini-volume::-webkit-slider-thumb {
   width: 9px;
   height: 9px;
   margin-top: -2.5px;
}
.mini-progress::-moz-range-thumb,
.mini-volume::-moz-range-thumb {
   width: 11px;
   height: 11px;
   border: 0;
   border-radius: 30px;
   background: #f94c57;
}
.mini-volume::-moz-range-thumb {
   width: 9px;
   height: 9px;
}
.mini-time {
   grid-area: time;
   display: flex;
   justify-content: space-between;
   width: min(78%, 13rem);
   margin: 0 auto;
   color: #fff;
   font-size: .9em;
}
.mini-total-time {
   color: #f94c57;
   text-shadow: 0 0 15px rgba(255,255,255,.85);
}
.mini-volume-row {
   grid-area: volume;
   width: min(58%, 9rem);
   display: grid;
   grid-template-columns: auto minmax(0,1fr);
   align-items: center;
   justify-self: center;
   gap: .5rem;
   opacity: .86;
   font-size: .82em;
}
.mini-volume {
   width: 100%;
}
.mini-toggle-list {
   top: .75rem;
   right: .75rem;
   z-index: 5;
   position: absolute;
}
.mini-playlist {
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 4;
   max-height: 52%;
   overflow-y: auto;
   position: absolute;
   transform: translateY(101%);
   transition: transform .25s ease;
   background: rgba(20,20,20,.92);
}
.mini-player.playlist-open .mini-playlist {
   transform: translateY(0);
}
.mini-track {
   width: 100%;
   display: grid;
   grid-template-columns: 2.25rem minmax(0,1fr);
   gap: .65rem;
   align-items: center;
   border: 0;
   padding: .55rem .75rem;
   cursor: pointer;
   color: inherit;
   text-align: left;
   background: transparent;
}
.mini-track:hover,
.mini-track.active {
   background: rgba(249,76,87,.38);
}
.mini-track-cover {
   width: 2.25rem;
   height: 2.25rem;
   overflow: hidden;
   background: rgba(255,255,255,.16);
}
.mini-track-cover img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
}
.mini-track-title,
.mini-track-artist {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.mini-track-title {
   font-weight: 700;
}
.mini-track-artist {
   font-size: .82em;
   opacity: .75;
}
.mini-audio {
   display: none;
}
@media (max-height: 420px) {
   .mini-card,
   .mini-card-shadow {
      min-height: 240px;
      height: calc(100% - 24px);
   }
   .mini-panel {
      gap: .25rem;
      min-height: 52%;
      padding: .65rem;
   }
   .mini-transport {
      gap: .4rem;
   }
}