html{

}
body{
    background-color: #000;
}

.logo #arc {
    fill: transparent;
}
.logo textPath {
    fill: #fff;
    font-size: 25px;
    text-anchor: middle;
}
.logo .controlNode {
    fill: #dd00ff;
}
.logo .endNode {
    fill: #00ddff;
}

.controls {
    color: #fff;
    position: absolute;
    top: 10px;
    left: 15px;
    border: 1px solid #999;
    border-radius: 5px;
    background-color: rgba(200, 200, 200, 0.1);
}
.controls .dragHandle{
    height: 15px;
    background-color: rgb(153 115 255 / 50%);
    border-bottom: #999;
    cursor: move;
}
.controls .controlArea{
    display: grid;
    grid-template-columns: auto auto;
    padding: 5px 16px;
    grid-gap: 5px 25px
}
.controls .controlArea i[data-button="play"]{
    grid-column: 1 / -1;
    font-size: 35px;
    display: flex;
    justify-content: center;
    cursor: pointer;
    transition: color .25s;
}
.controls .controlArea i[data-button="play"]:hover{
    color: #6666dd
}
.controls .controlArea i[data-button="play"].animating{
    color: #00dd00;
}