label {
    display: block;
    margin: .4rem;
    font-size: 0;
}

.controls {
    position: absolute;
    width: 100%;
    bottom: 0;
    right: 0;
    text-align: right;
    margin: 0.4rem;
}

.offsets {
    /* position: absolute;
    bottom: 0;
    right: 0; */
    display: inline-block;
    color: #fff;
    text-align: right;
    /* transform-origin: bottom right;
    transform: rotate(-90deg); */
}

.offsets input {
    width: 250px;
}

.offset-label {
    display: none;
    background-color: oklch(25.7% 0.09 281.288);
    border: 1px solid oklch(51.1% 0.262 276.966);
    border-radius: 9999px;
    padding: 0.2rem;
}

.offset-label.show {
    display: inline-block;
}

#play-btn {
    margin: 0.5rem;
    padding: 0.4rem;
    color: #fff;       
    line-height: 0;
    background-color: oklch(25.7% 0.09 281.288);
    border: 1px solid oklch(51.1% 0.262 276.966);
    border-radius: .4rem;
    transition: border-radius .3s;
    /* transform: rotate(90deg); */
}

#play-btn.paused {
    border-radius: 100%;
}

#play-btn svg {
    width: 1.4rem;
    height: 1.4rem;
}

#play-btn .play {
    display: none;
}

#play-btn.paused .play {
    display: block;
}

#play-btn.paused .pause {
    display: none;
}