/*klutzyplayer*/
*, *::before, *::after { box-sizing: border-box }
/*
body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    //background: #181721;
    font-family: Roboto Flex, system-ui, sans-serif
}
*/
.mp {
    --silver: linear-gradient(180deg, #e6e6e6, #a9a9a9);
    --knob: conic-gradient(from 0deg, #cfcfcf, #fff, #9a9a9a, #f0f0f0, #b5b5b5, #fff, #8e8e8e, #e4e4e4, #cfcfcf);
    position: relative;
    display: block;
    width: 240px;
    height: 240px;
    margin: 0 auto 16px;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    color: #fff
}

.cover { position: absolute; inset: 0; background: #2b2a38 center/cover no-repeat }

.overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 1;
    transition: opacity .2s linear
}
.playing .overlay { opacity: 0 }

button { border: 0; padding: 0; background: none; color: inherit; cursor: pointer; font: inherit }
button:focus-visible { outline: 2px solid #fff; outline-offset: 4px }

/* ---- metal transport buttons ---- */
.play, .nav { position: absolute; transition: transform .1s, filter .1s, opacity .2s }
.play:hover, .nav:hover { transform: scale(1.1) }
.play:active, .nav:active { transform: scale(.93); filter: brightness(.8) }

.play::before, .play::after,
.nav::before, .nav::after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--silver)
}

/* play / pause */
/*.play { left: 96px; top: 96px; width: 48px; height: 48px }*/
.play { inset: 0; margin: auto; top: 17.5px; width: 48px; height: 48px }
.play::before, .play::after { width: 32% }
.play::before { left: 0 }
.play::after { right: 0 }
.play.is-play::before { left: 8%; width: 92%; clip-path: polygon(0 0, 100% 50%, 0 100%) }
.play.is-play::after { display: none }

/* prev / next */
.nav { top: 105px; width: 44px; height: 30px; opacity: 0; pointer-events: none }
.started .nav { opacity: 1; pointer-events: auto }
.nav::before, .nav::after { width: 50% }
.nav::before { left: 0 }
.nav::after { left: 46% }
.prev { left: 14px }
.next { right: 14px }
.prev::before, .prev::after { clip-path: polygon(100% 0, 100% 100%, 0 50%) }
.next::before, .next::after { clip-path: polygon(0 0, 100% 50%, 0 100%) }

/* ---- metal seek bar ---- */
.seek {
    --pn: 0;
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    height: 14px;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s
}
.started .seek { opacity: 1; pointer-events: auto }

.seek-track {
    position: absolute;
    inset: 0;
    border-radius: 7px;
    background: linear-gradient(180deg, #050505, #121212);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .9), 0 1px 0 rgba(150, 160, 190, .5)
}

.seek-fill {
    position: absolute;
    left: 2px;
    top: 2px;
    height: 10px;
    border-radius: 5px;
    width: calc(13px + (100% - 30px) * var(--pn));
    background: linear-gradient(180deg, #e9e9eb 0%, #dbdbdb 35%, #898a8c 100%);
    box-shadow: 0 0 0 1px rgba(28, 28, 28, .95), 0 1px 3px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .5)
}

.seek-input {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 14px;
    margin: 0;
    background: none;
    cursor: pointer
}
.seek-input:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 7px }
.seek-input::-webkit-slider-runnable-track { height: 14px; background: transparent }
.seek-input::-moz-range-track { height: 14px; background: transparent }
.seek-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 30px;
    height: 30px;
    margin-top: -8px;
    border-radius: 50%;
    border: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, .35), transparent 60%), var(--knob);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .4)
}
.seek-input::-moz-range-thumb {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, .35), transparent 60%), var(--knob);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .4)
}

/* ---- info chips and track list ---- */
.info, .time {
    position: absolute;
    top: 4px;
    background: rgba(24, 23, 33, .8);
    border-radius: 6px;
    padding: 6px;
    font-size: 12px;
    opacity: 0;
    transition: opacity .2s;
    z-index: 4
}
.info { left: 4px; width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.time { right: 4px; color: #cdd1db }
.playing .info, .playing .time { opacity: 1 }

.list { position: absolute; left: 15px; right: 15px; bottom: 10px; height: 90px; overflow-y: auto }
.started .list { display: none }

.row {
    display: block;
    width: 100%;
    height: 30px;
    line-height: 27px;
    padding-left: 5px;
    font-size: 12px;
    font-weight: 300;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}
.row.active { color: #ff3000 }

@media (prefers-reduced-motion: reduce) { * { transition: none !important } }