:root {
  --cello-key-w: 18px;
  --cello-key-num: 9;
  --cello-h: 540px;
  --cello-bout-w-gap: 4px;
}


/* ==================================== */
/* Cello */
/* ==================================== */
#cello {
  position: fixed; 
  top: 95px;
  left: 65px;
/*   left: 350px; */
  margin: 0;
  padding: 0;
  width: calc((var(--cello-key-w) * var(--cello-key-num)) + (var(--cello-bout-w-gap) * (var(--cello-key-num) - 1)));
  height: var(--cello-h);
  z-index: 2;
}

.cello-body {
  position: absolute;
  width: calc((var(--cello-key-w) * var(--cello-key-num)) + (var(--cello-bout-w-gap) * (var(--cello-key-num) - 1)));
  height: var(--cello-h);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cello-score {
  position: absolute;
  width: calc((var(--cello-key-w) * var(--cello-key-num)) + (var(--cello-bout-w-gap) * (var(--cello-key-num) - 1)));
  height: var(--cello-h);
  top: 50%;
  left: calc(50% - var(--cello-key-w));
  transform: translate(-50%, -50%);
  pointer-events: none;
}



/* ==================================== */
/* Cello: Keyboard */
/* ==================================== */
.cello-keyboard {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 360px 94px 26px 120px;
  gap: 0px 0px; 
  grid-template-areas: 
    "CK01-1x1 CK02-1x1 CK03-1x1"
    "CK04-3x1 CK04-3x1 CK04-3x1"
    "CK07-3x1 CK07-3x1 CK07-3x1"
    "CK10-1x1 CK11-1x1 CK12-1x1"; 
  width: calc(var(--cello-key-w) * 3);
  position: absolute;
  top: 0;
  left: 50%;
  margin-top: 1px;
  transform: translate(-50%, 0);
  z-index: 3;
}

.CK01-1x1 { grid-area: CK01-1x1; }
.CK02-1x1 { grid-area: CK02-1x1; }
.CK03-1x1 { grid-area: CK03-1x1; }
.CK04-3x1 { grid-area: CK04-3x1; }
.CK07-3x1 { grid-area: CK07-3x1; }
.CK10-1x1 { grid-area: CK10-1x1; }
.CK11-1x1 { grid-area: CK11-1x1; }
.CK12-1x1 { grid-area: CK12-1x1; }


.cello-key {
  width: 16px;
  height: 20px;
/*   height: 14px; */
  padding: 0;
  border: none;
  text-align: center;
  background: #ffffff;
}

.cello-key-touch {
  width: 16px;
  height: 28px;
/*   height: 14px; */
  padding: 0;
  border: none;
  text-align: center;
  background: #ffffff;
}

.cello-key-hover {
/*   background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 25%, rgba(179,215,255,1) 25%, rgba(179,215,255,1) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%); */
  background: #b3d7ff;
}

.cello-key-focus {
/*   background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 25%, rgba(206,206,206,1) 25%, rgba(206,206,206,1) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%); */
  background: #cecece;
}

#cello-key-neck {
  border-width: 1px;
  border-style: solid;
  border-color: #767676;
  border-radius: 2px;
  background: #ffffff;
}

.cello-key-neck-hover {
  border-radius: 4px;
  outline: solid 2px #005fcc;
  outline-offset: -2px;
}    

.cello-key-end {
  margin: 0;
  padding: 0;
  width: var(--cello-key-w);
  height: 120px;
  text-align: center;
  z-index: 2;
}


/* ==================================== */
/* Cello: Bout */
/* ==================================== */
.cello-bout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 60px 60px 60px 60px 60px; 
  gap: 0px var(--cello-bout-w-gap); 
  grid-template-areas:
    "C01-1x2 C02-1x2 C03-1x1 C03-1x2 C04-1x5 C06-1x1 C07-1x1 C08-1x2 C09-1x2"
    "C01-1x2 C02-1x2 C12-1x1 C13-1x1 C04-1x5 C15-1x1 C16-1x1 C08-1x2 C09-1x2"
    "C19-1x3 C20-1x3 C21-1x1 C22-1x1 C04-1x5 C24-1x1 C25-1x1 C26-1x3 C27-1x3"
    "C19-1x3 C20-1x3 C30-1x1 C31-1x1 C04-1x5 C33-1x1 C34-1x1 C26-1x3 C27-1x3"
    "C19-1x3 C20-1x3 C39-1x1 C40-1x1 C04-1x5 C42-1x1 C43-1x1 C26-1x3 C27-1x3";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  padding: 0;
  z-index: 1;
}

.C01-1x2 { grid-area: C01-1x2; }
.C02-1x2 { grid-area: C02-1x2; }
.C03-1x1 { grid-area: C03-1x1; }
.C03-1x2 { grid-area: C03-1x2; }
.C04-1x5 { grid-area: C04-1x5; }
.C06-1x1 { grid-area: C06-1x1; }
.C07-1x1 { grid-area: C07-1x1; }
.C08-1x2 { grid-area: C08-1x2; }
.C09-1x2 { grid-area: C09-1x2; }
.C12-1x1 { grid-area: C12-1x1; }
.C13-1x1 { grid-area: C13-1x1; }
.C15-1x1 { grid-area: C15-1x1; }
.C16-1x1 { grid-area: C16-1x1; }
.C19-1x3 { grid-area: C19-1x3; }
.C20-1x3 { grid-area: C20-1x3; }
.C21-1x1 { grid-area: C21-1x1; }
.C22-1x1 { grid-area: C22-1x1; }
.C24-1x1 { grid-area: C24-1x1; }
.C25-1x1 { grid-area: C25-1x1; }
.C26-1x3 { grid-area: C26-1x3; }
.C27-1x3 { grid-area: C27-1x3; }
.C30-1x1 { grid-area: C30-1x1; }
.C31-1x1 { grid-area: C31-1x1; }
.C33-1x1 { grid-area: C33-1x1; }
.C34-1x1 { grid-area: C34-1x1; }
.C39-1x1 { grid-area: C39-1x1; }
.C40-1x1 { grid-area: C40-1x1; }
.C42-1x1 { grid-area: C42-1x1; }
.C43-1x1 { grid-area: C43-1x1; }

/* .C20-1x3 {
  display: grid; 
  grid-auto-columns: 1fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 0px 0px; 
  grid-area: C20-1x3; 
}
.C-part-1-1x1 { grid-area: 1 / 1 / 2 / 2; }
.C-part-2-1x2 { grid-area: 2 / 1 / 3 / 2; } */



.cello-bout-part {
  margin: 0;
  padding: 0;
  width: var(--cello-key-w);
  height: 61px;
  text-align: center;
  z-index: 2;
}

.cello-bout-hole {
  margin: 0;
  padding: 0;
  width: var(--cello-key-w);
  height: 61px;
  text-align: center;
  z-index: 2;
}