#finger {
    --fingerfg:#fff;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    color:var(--fingerfg);
    letter-spacing:-0.05em;
    font-size: 20px;
    user-select: none;
}

.finger-pres {
    display: flex;
    align-items: center;
    padding: 0;
    cursor: copy;
}

.finger-line {
    flex: 1;
    border-top: solid 1px #fff3;
    position: relative;
    overflow: visible;
    margin: 1em;
}

.finger-c {
    width: 5em;
    height: 5em;
    display: inline-block;
    position: relative;
}
.fingering {
    scale:0.95;
}

.finger-c-target,.finger-c-current {
    position: absolute;
    width: 80%;
    height: 80%;
    border-radius: 5em;
    left: 10%;
    top: 10%;
}
.finger-c-target {
    outline: solid 1px;
    opacity:0.2;
}
.finger-c:hover .finger-c-target,
.finger-c.fingering .finger-c-target{
    opacity:1;
}

.finger-c-current {
    display:none;
}
.finger-c.gliding .finger-c-current {
    display:block;
}

.finger-c-target:before, .finger-c-current:before {
    content:"";
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 1em;
    background: var(--fingerfg);
    top: 50%;
    right: -0.05em;
    margin: -3px;
}

.finger-c-label {
    pointer-events: none;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    position: absolute;
    font-weight: bold;
}

.finger-mod {
    display: inline-block;
    /* border: solid; */
    padding: 0;
    line-height: 0;
    margin: 0.1em;
}

.finger-mods {
    display: flex;
    align-items: center;
    justify-content: center;
    gap:2em;
}
.finger-c-value {
    pointer-events: none;
    position: absolute;
    height: 80%;
    width: 80%;
    margin: 10%;
    display:none;
}
.finger-c-value label {
    position: absolute;
    height: 100%; width: 100%; top: 0; left:0;
    text-align: center;
    font-size:0;
}
.finger-c-value label:before {
    content:"";display:inline-block;width:2px;height:5px;background:#999;
}
.finger-c.finger-mini {font-size: 50%;margin-left: -1em;}
.finger-mini+.finger-mini {
    position: absolute;
    margin-left: -5em;
}

.finger-line button {
    position: absolute;
    height: 1em;
    margin: -0.5em 0 0 -0.5em;
    width: 1em;
    border: none;
    background: var(--fingerfg);
    border-radius: 1em;
    font-weight: bold;
    padding: 0;
    text-align: center;
    letter-spacing: -0.1em;
    cursor:pointer;
    opacity: 0.25;
}
.finger-selpres {
    color:transparent;
}
.pres-on {
    animation: fingeron 0.5s ease-in-out infinite;
}
.pres-ok {
    animation:fingerok 0.5s ease-in-out;
}
@keyframes fingeron {
    0%{opacity:1;}
    50%{opacity:0.5;}
    100%{opacity:1;}
}
@keyframes fingerok {
    0%{scale:1;opacity:1;}
    20%{scale:0.7;opacity:0.5;}
    80%{scale:0.7;opacity:0.5;}
    100%{scale:1;opacity:1;}
}