.neumorphic-player,
.neumorphic-player * {
   box-sizing: border-box;
}
.neumorphic-player {
   width: 100%;
   height: 100%;
   min-height: 320px;
   display: flex;
   align-items: stretch;
   justify-content: center;
   color: #5881f3;
   font: 600 16px/1.35 Acme, Arial, sans-serif;
}
.neo-player {
   width: 100%;
   min-height: 350px;
   padding: 34px 44px;
   border-radius: 110px;
   background: #e5f3fe;
   box-shadow: 5px 5px 10px #cee3f2, -5px -5px 10px #faffff;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
   gap: 18px;
}
.neo-heading {
   text-align: center;
}
.neo-cover {
   flex: 0 0 auto;
   overflow: hidden;
   background: #cee3f2;
   box-shadow: inset 5px 5px 10px #c7dcec, inset -5px -5px 10px #faffff;
}
.neo-cover img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.neo-title {
   color: #5881f3;
   font-size: 1.45em;
   letter-spacing: .4px;
}
.neo-artist {
   margin-top: .6rem;
   color: #858b90;
   font-size: 1.05em;
}
.neo-controls {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-evenly;
   gap: 18px;
}
.neo-button {
   border: none;
   background: transparent;
   color: #5c87fe;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
}
.neo-repeat,
.neo-randomize {
   width: 36px;
   height: 36px;
}
.neo-repeat svg {
   transform: rotate(45deg);
}
.neo-repeat.active svg path,
.neo-randomize.active svg path {
   fill: #5c87fe;
}
.neo-round {
   width: 64px;
   height: 64px;
   padding: 16px;
   border-radius: 50%;
   background: #e5f3fe;
   box-shadow: 5px 5px 10px #cee3f2, -5px -5px 10px #faffff;
}
.neo-round.pressed {
   box-shadow: inset 5px 5px 10px #cee3f2, inset -5px -5px 10px #faffff;
}
.neo-play {
   width: 80px;
   height: 80px;
   padding: 22px;
   border-radius: 50%;
   background: #5c87fe;
   box-shadow: 6px 5px 9px #a5c6ec;
}
.neo-play.pressed {
   box-shadow: none;
}
.neo-button svg {
   width: 100%;
   height: 100%;
}
.neo-button svg path,
.neo-button svg rect {
   fill: currentColor;
}
.neo-play svg path {
   fill: #fff;
}
.neo-audio-control {
   width: 85%;
   height: 6px;
   border-radius: 999px;
   background: #e5f3fe;
   box-shadow: 5px 5px 7px #c7dcec, -7px -7px 8px #f2ffff;
   cursor: pointer;
}
.neo-audio-progress {
   width: 0;
   height: 100%;
   border-radius: 999px;
   position: relative;
   background: #5c87fe;
}
.neo-audio-progress::after {
   content: "";
   width: 7px;
   height: 7px;
   border-radius: 50%;
   border: 3px solid #5c87fe;
   background: #fff;
   position: absolute;
   top: -4px;
   right: -5px;
}
.neo-duration-row {
   display: flex;
   justify-content: space-between;
   width: 84%;
   margin-top: -10px;
   color: #858b90;
   font-size: .95em;
   letter-spacing: 1px;
}
.neo-volume-row {
   display: flex;
   align-items: center;
   gap: 12px;
   width: min(70%, 280px);
   color: #858b90;
}
.neo-volume {
   width: 100%;
}
.neo-playlist {
   width: 86%;
   max-height: 126px;
   overflow: auto;
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding: 2px;
}
.neo-playlist-item {
   width: 100%;
   min-height: 38px;
   border: 0;
   border-radius: 18px;
   padding: 8px 14px;
   background: transparent;
   color: #858b90;
   cursor: pointer;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   gap: 12px;
   text-align: left;
   font: inherit;
}
.neo-playlist-item.active,
.neo-playlist-item:hover {
   color: #5881f3;
   background: #cee3f2;
}

.neo-button:focus-visible,
.neo-audio-control:focus-visible,
.neo-volume:focus-visible,
.neo-playlist-item:focus-visible {
   outline: 2px solid currentColor;
   outline-offset: 4px;
}
.neo-track-title,
.neo-track-artist {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.neo-track-artist {
   opacity: .74;
   font-size: .86em;
}
.neo-edge {
   width: 100px;
   height: 7px;
   border-radius: 10px;
   background: #e5f3fe;
   box-shadow: 5px 5px 7px #c7dcec, -7px -7px 8px #f2ffff;
}
.hide {
   display: none !important;
}