.rig {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  

  gap: 0;
  min-width: 0;
  



  --rig-w: min(calc(316 * var(--cv-px)), calc(100vw - 2 * var(--cv-sp-6)));
  width: var(--rig-w);
  margin: calc(3 * var(--cv-px)) 0 calc(3 * var(--cv-px)) calc(50% - var(--rig-w) / 2);
}








.stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-width: 0;
  margin-bottom: calc(3 * var(--cv-px));
  


}
.stage .shot {
  max-width: none;
}


.stage .float,
.stage .float > * {
  position: absolute;
  --k-cell: var(--cv-px);
}
.stage .float {
  left: 0;
  top: 0;
  pointer-events: none;
}
.stage .shot[hidden] {
  display: none;
}

 
.k-card {
  min-width: 0;
}
.carousel-slide {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.carousel-slide[hidden] {
  display: none;
}




.panel .k-sec {
  flex-shrink: 0;
}
.panel .midi {
  flex-grow: 1;
}
.panel .midi[hidden] {
  display: none;
}


.panel .osc {
  width: calc(73 * var(--cv-px));
}
.controls {
  display: flex;
  align-items: flex-start;
  gap: calc(6 * var(--cv-px));
}
.controls.col {
  flex-direction: column;
  align-items: center;
  gap: calc(3 * var(--cv-px));
}


.panel .stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cv-px);
}
 
.k-radio .stack {
  width: calc(14 * var(--cv-px));
}




.panel .k-fader.k-vert::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - var(--cv-ctrl-h) / 2);
  width: var(--cv-ctrl-h);
}


.k-cardtabs .k-cardtab {
  flex: none;
  min-width: var(--cv-ctrl-h);
}
.lamp {
  align-self: flex-start;
}

 
.patch {
  display: grid;
  grid-template-columns: calc(14 * var(--cv-px)) repeat(3, calc(16 * var(--cv-px)));
  grid-auto-rows: auto;
  align-items: center;
  justify-items: center;
  row-gap: var(--cv-px);
}
.patch .row {
  justify-self: end;
  padding-right: calc(2 * var(--cv-px));
}







.scope,
.env,
.sheet {
  width: fit-content;
}
.scope {
  min-height: calc(20 * var(--cv-px) + 2 * var(--cv-px));
}
.env {
  min-height: calc(12 * var(--cv-px) + 2 * var(--cv-px));
}
.sheet {
  min-height: calc(36 * var(--cv-px) + 2 * var(--cv-px));
}




.surface {
  padding: var(--cv-px);
  min-width: 0;
}
.surface .scroll {
  overflow-x: auto;
  overflow-y: hidden;
  


  touch-action: pan-x;
  overscroll-behavior-x: contain;
}
.surface .deck {
  position: relative;
  margin: 0 auto;
  

  padding-bottom: var(--cv-px);
}
.surface .deck > * {
  position: absolute;
}


.surface .k-piano {
  display: flex;
}
.surface .k-piano > .k-white {
  position: static;
}
.fret {
  display: flex;
  align-items: center;
  justify-content: center;
}
.fret .string {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: calc(-0.5 * var(--cv-px));
}
 
.fret:not(.k-rl) .string {
  left: calc(6 * var(--cv-px));
}
.fret .open {
  position: absolute;
  left: var(--cv-px);
}
 
.surface .spark {
  position: absolute;
  --k-cell: var(--cv-px);
  display: none;
}
.surface .is-down > .spark {
  display: block;
}




.surface .peer {
  --k-cell: var(--cv-px);
  pointer-events: none;
}
.fret .k-lamp {
  position: relative;
}
.fret .k-lamp[hidden] {
  display: none;
}
.fret-no {
  width: var(--cv-ctrl-h);
  text-align: center;
}





.surface .cname {
  position: absolute;
  bottom: calc(8 * var(--cv-px));
  text-align: center;
  pointer-events: none;
}




@media (max-width: 1007.98px), (max-height: 271.98px) {
  .carousel-slide .surface {
    order: -1;
    margin-top: calc(-1 * var(--cv-px));
  }
  .carousel-slide .k-strip {
    padding-top: var(--cv-px);
  }
  


  .panel {
    flex-wrap: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .panel::-webkit-scrollbar {
    display: none;
  }
  



  .k-cardtabs {
    gap: var(--cv-px);
    padding: 0 0 var(--cv-px) calc(2 * var(--cv-px));
    margin-bottom: calc(-1 * var(--cv-px));
    overflow-y: hidden;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .k-cardtabs::-webkit-scrollbar {
    display: none;
  }
  .k-cardtabs .k-cardtab {
    padding: 0 calc(2 * var(--cv-px));
  }
   
  .rig {
    margin-top: calc(2 * var(--cv-px));
  }
  .stage {
    margin-bottom: calc(2 * var(--cv-px));
  }
}



.panel-bar {
  margin: 0 calc(-1 * var(--cv-px)) calc(-1 * var(--cv-px));
}





.panel-bar > .k-scroll {
  --k-step: calc(var(--cv-ctrl-h) + 2 * var(--cv-px));
  display: flex;
}
.panel-bar > .k-scroll > .k-step {
  width: var(--cv-ctrl-h);
}




.sheet {
  position: relative;
}
.sheet .staff,
.sheet .glyph,
.sheet .glyph > *,
.sheet .clef,
.sheet .clef > * {
  position: absolute;
}
.sheet .staff {
  left: 0;
  right: 0;
}
.sheet .glyph,
.sheet .clef {
  inset: 0;
}
.sheet .ledger {
  width: calc(6 * var(--cv-px));
}