.timeline-label {
    display: block;
    margin: 4px 0 8px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

.player-controls .timeline {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    height: 16px;
    min-height: 16px;
    margin: 10px 0 12px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .34);
    cursor: pointer;
}

.timeline::-webkit-slider-runnable-track {
    height: 16px;
    border-radius: 8px;
    background: transparent;
}

.timeline::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 31px;
    height: 31px;
    margin-top: -7px;
    border: 4px solid #111;
    border-radius: 50%;
    background: #8065ff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .72);
}

.timeline::-moz-range-track {
    height: 16px;
    border: 0;
    border-radius: 8px;
    background: transparent;
}

.timeline::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border: 4px solid #111;
    border-radius: 50%;
    background: #8065ff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .72);
}

.player-controls .timeline:focus {
    outline: 4px solid #fff;
    outline-offset: 7px;
    border: 0;
}

.player-controls .timeline:disabled { opacity: .4; cursor: default; }
.timeline:disabled::-webkit-slider-thumb { display: none; }
#playback-time { margin: 8px 0 18px; }

body.playing.web-playback { overflow: hidden; background: #080808; }

body.playing.web-playback:not(.fullscreen-active):not(.player-large) #web-player {
    top: 4vh;
    left: 12vw;
    width: 76vw;
    height: 54vh;
    border-radius: 8px 8px 0 0;
    background: #000;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .68);
}

body.playing.web-playback:not(.fullscreen-active):not(.player-large) .player-heading {
    position: absolute;
    top: 4vh;
    left: 12vw;
    width: 76vw;
    border-radius: 8px 8px 0 0;
}

body.playing.web-playback:not(.fullscreen-active):not(.player-large) .player-controls {
    right: 12vw;
    bottom: 2vh;
    left: 12vw;
    width: auto;
    max-height: 40vh;
    overflow-y: auto;
    border-radius: 0 0 8px 8px;
}

body.playing.web-playback.player-large:not(.fullscreen-active) #web-player,
body.playing.web-playback.fullscreen-active #web-player {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
}

body.playing.web-playback.player-large:not(.fullscreen-active) .player-controls,
body.playing.web-playback.fullscreen-active .player-controls { bottom: 44px; }

#web-player { object-fit: contain; background: #000; }

.display-mode[aria-pressed="true"] {
    color: #fff;
    background: #8065ff;
    border-color: #8065ff;
}

.display-controls {
    position: absolute;
    z-index: 6;
    top: 82px;
    right: 28px;
    display: flex;
    gap: 8px;
    pointer-events: auto;
}

.display-controls button {
    min-height: 46px;
    padding: 8px 14px;
    background: rgba(24, 24, 24, .9);
    font-size: 16px;
}

.display-controls button:hover,
.display-controls button:focus-visible { background: #3b3b3b; }
.display-controls .display-mode[aria-pressed="true"] { background: #8065ff; }

@media (max-width: 760px) {
    body.playing.web-playback:not(.fullscreen-active):not(.player-large) #web-player {
        top: 0;
        left: 0;
        width: 100vw;
        height: 50vh;
        border-radius: 0;
    }

    body.playing.web-playback:not(.fullscreen-active):not(.player-large) .player-heading {
        top: 0;
        left: 0;
        width: 100vw;
        border-radius: 0;
    }

    body.playing.web-playback:not(.fullscreen-active):not(.player-large) .player-controls {
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 50vh;
        border-radius: 0;
    }

    .display-controls { top: 54px; right: 8px; gap: 4px; }
    .display-controls button { min-height: 39px; padding: 5px 8px; font-size: 12px; }
}