/* Keyboard key colours by finger and finger highlight */
:root {
  --f0:rgba(235,140,140,.30);
  --f1:rgba(245,170,120,.30);
  --f2:rgba(235,205,100,.32);
  --f3:rgba(110,190,150,.32);
  --f4:rgba(110,160,215,.32);
  --f5:rgba(160,130,215,.32);
  --f6:rgba(225,130,185,.30);
  --f7:rgba(170,190,120,.32);
  --f8:rgba(150,140,170,.28);
}

.k.f0 {
  background:var(--f0);
}

.fg.f0 {
  fill:var(--f0);
}

.fd.f0 {
  background:var(--f0);
}

.k.f1 {
  background:var(--f1);
}

.fg.f1 {
  fill:var(--f1);
}

.fd.f1 {
  background:var(--f1);
}

.k.f2 {
  background:var(--f2);
}

.fg.f2 {
  fill:var(--f2);
}

.fd.f2 {
  background:var(--f2);
}

.k.f3 {
  background:var(--f3);
}

.fg.f3 {
  fill:var(--f3);
}

.fd.f3 {
  background:var(--f3);
}

.k.f4 {
  background:var(--f4);
}

.fg.f4 {
  fill:var(--f4);
}

.fd.f4 {
  background:var(--f4);
}

.k.f5 {
  background:var(--f5);
}

.fg.f5 {
  fill:var(--f5);
}

.fd.f5 {
  background:var(--f5);
}

.k.f6 {
  background:var(--f6);
}

.fg.f6 {
  fill:var(--f6);
}

.fd.f6 {
  background:var(--f6);
}

.k.f7 {
  background:var(--f7);
}

.fg.f7 {
  fill:var(--f7);
}

.fd.f7 {
  background:var(--f7);
}

.k.f8 {
  background:var(--f8);
}

.fg.f8 {
  fill:var(--f8);
}

.fd.f8 {
  background:var(--f8);
}

.kb .k.next {
  background:var(--mint);
}

.kb .k.hit {
  background:var(--peach)!important;
}

.fg {
  stroke:var(--line);
  stroke-width:2;
  opacity:.55;
}

.fg.on {
  opacity:1;
  stroke:var(--ok);
  stroke-width:5;
}

.fg.sh {
  opacity:1;
  stroke:var(--mute);
  stroke-width:4;
}

.palm {
  fill:var(--line);
  opacity:.5;
}

#hands {
  display:none;
}

#app.play #hands {
  display:block;
  flex:none;
  margin-top:8px;
  text-align:center;
}

#hs {
  height:clamp(64px,12vh,130px);
  width:auto;
  max-width:100%;
}

#hi {
  height:130px;
  max-width:100%;
}

#hi .fg {
  opacity:1;
}

#fl {
  font-size:13px;
  color:var(--mute);
  min-height:18px;
}

#app.play .k {
  height:clamp(28px,5.6vh,56px);
}

.fd {
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:50%;
  margin-right:8px;
  border:1px solid var(--line);
}

.pg {
  font-family:var(--pf);
  margin:0 8px 0 4px;
  font-size:18px;
}

#st3 table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  margin-top:10px;
}

#st3 td {
  padding:8px;
  border-top:1px solid var(--line);
}

.fg {
  opacity:1;
  stroke:none;
}

.fg.on,.fg.sh {
  stroke:none;
}

.fg .ov {
  fill:var(--ok);
  opacity:0;
  stroke:none;
}

.fg.on .ov {
  opacity:.55;
}

.fg.sh .ov {
  fill:var(--mute);
  opacity:.4;
}

.fg.on {
  filter:drop-shadow(0 0 6px var(--ok));
}

#hs {
  height:clamp(80px,16vh,160px);
}

#hi {
  height:200px;
}