#player { container-type: inline-size; height: auto; min-height: 80px; }
.player-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 1.4fr) minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    width: 100%;
}
.player-track-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.player-track-info > img { flex-shrink: 0; object-fit: cover; }
.player-transport { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.player-transport-buttons { display: flex; align-items: center; justify-content: center; gap: 12px; }
.player-timeline { display: flex; align-items: center; gap: 10px; }
.player-timeline > span { min-width: 4ch; font-variant-numeric: tabular-nums; white-space: nowrap; }
.player-timeline > span:last-child { text-align: right; }
.player-tools { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.player-volume { display: flex; align-items: center; gap: 6px; width: clamp(100px, 12vw, 160px); }
#player .player-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    color: rgb(0 0 0 / .65);
    transition: color .15s, background-color .15s;
}
.dark #player .player-icon-button { color: rgb(255 255 255 / .65); }
#player .player-icon-button:hover:not(:disabled) { color: #2563eb; background: rgb(37 99 235 / .1); }
#player .player-icon-button:disabled { opacity: .35; cursor: default; }
#player #player-repeat-btn[aria-pressed="true"] { color: #3b82f6; background: rgb(37 99 235 / .12); }
#player button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 3px; }
#player [hidden] { display: none !important; }
.player-slider {
    --range-fill: 0%;
    --range-track: rgb(0 0 0 / .12);
    --range-color: #2563eb;
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    min-width: 0;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    touch-action: pan-y;
}
.dark .player-slider { --range-track: rgb(255 255 255 / .16); --range-color: #3b82f6; }
.player-slider::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(to right, var(--range-color) var(--range-fill), var(--range-track) var(--range-fill));
}
.player-slider::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(to right, var(--range-color) var(--range-fill), var(--range-track) var(--range-fill));
}
.player-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    margin-top: -4px;
    border: 2px solid var(--range-color);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgb(0 0 0 / .18);
    transition: box-shadow .15s;
}
.player-slider::-moz-range-thumb {
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    border: 2px solid var(--range-color);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgb(0 0 0 / .18);
    transition: box-shadow .15s;
}
.player-slider:hover::-webkit-slider-thumb,
.player-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgb(37 99 235 / .18); }
.player-slider:hover::-moz-range-thumb,
.player-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgb(37 99 235 / .18); }
.player-slider:focus-visible { outline: 2px solid #3b82f6; outline-offset: 3px; border-radius: 999px; }
@container (max-width: 800px) {
    .player-content { gap: 12px; }
    .player-tools { gap: 6px; }
    .player-volume { width: 106px; }
}
@container (max-width: 620px) {
    .player-content { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
    .player-transport { grid-column: 1 / -1; grid-row: 2; }
    .player-tools { grid-column: 2; grid-row: 1; }
}