/* Vocal Chops Prelude web UI (vc-ui.js): the plug-in's panel at its 362x232 layout, sized with zoom */
@font-face { font-family: "VC Compadre"; src: url(/vc/compadre.woff2) format("woff2"); font-display: block; }

.vc-rack { --vc-cream: #fefaef; --vc-purple: #8368ef; --vc-red: #ff5747; --vc-sky: #8fd3ec; --vc-ink: #1b1a22; --vc-mustard: #eab308; position: relative; width: 100%; }
.vc-frame { position: relative; width: 100%; overflow: hidden; }
.vc-stage { position: absolute; left: 0; top: 0; user-select: none; -webkit-user-select: none; touch-action: none; background: var(--vc-red); }
.vc-stage * { box-sizing: border-box; }
.vc-bg { position: absolute; display: block; pointer-events: none; }
.vc-sprite { position: absolute; background-repeat: no-repeat; }
.vc-drag { cursor: ns-resize; }
.vc-click { cursor: pointer; }
.vc-label {
  position: absolute; display: flex; align-items: center; justify-content: center; white-space: nowrap; pointer-events: none;
  font-family: "VC Compadre", sans-serif; font-size: 12px; line-height: 1; color: var(--vc-cream); letter-spacing: .02em;
}

/* one octave of phrases under the panel, in its colours: red dotted strip, cream and ink keys */
.vc-drawer {
  position: absolute; display: flex; align-items: center; gap: 5px; padding: 6px 8px 7px;
  background: var(--vc-red) radial-gradient(circle, rgba(255, 255, 255, .28) 0 .9px, transparent 1.2px) 0 0 / 5px 5px;
}
.vc-keys { flex: 1; display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; height: 100%; }
.vc-key {
  position: relative; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 4px; cursor: pointer;
  background: var(--vc-cream); color: var(--vc-ink); border: 1.5px solid var(--vc-ink); border-radius: 3px;
  box-shadow: -1.5px 1.5px 0 var(--vc-ink); transition: transform .06s ease, background .06s ease;
}
.vc-key--black { background: var(--vc-purple); color: var(--vc-cream); }
.vc-key b { font-family: "VC Compadre", sans-serif; font-weight: 400; font-size: 8.5px; line-height: 1; pointer-events: none; }
.vc-key.down, .vc-key:active { background: var(--vc-mustard); color: var(--vc-ink); transform: translate(-1.5px, 1.5px); box-shadow: none; }
.vc-key:disabled { opacity: .35; cursor: default; }
.vc-oct {
  width: 18px; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  background: var(--vc-sky); color: var(--vc-ink); border: 1.5px solid var(--vc-ink); border-radius: 3px; font-size: 14px; line-height: 1;
}
.vc-octlabel {
  position: absolute; left: 8px; top: -11px; padding: 1px 6px 0; border-radius: 99px;
  background: var(--vc-ink); color: var(--vc-cream); font-family: "VC Compadre", sans-serif; font-size: 7px; letter-spacing: .06em;
}
.vc-tag {
  position: absolute; left: 50%; top: 186px; transform: translateX(-50%); padding: 3px 8px 2px; border-radius: 99px; white-space: nowrap;
  background: var(--vc-ink); color: var(--vc-cream); font-family: "VC Compadre", sans-serif; font-size: 8px; letter-spacing: .04em;
  opacity: 0; transition: opacity .15s ease; pointer-events: none;
}
.vc-tag.on { opacity: 1; }