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

.vc-rack { --vc-cream: #fefaf0; --vc-purple: #4c4d88; --vc-navy: #272744; --vc-orange: #e37829; --vc-mustard: #c8ab30; --vc-sage: #a4c0ac; --vc-ink: #000; 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-orange); }
.vc-stage * { box-sizing: border-box; }
.vc-bg { position: absolute; display: block; pointer-events: none; }
.vc-panel { position: absolute; overflow: hidden; pointer-events: none; }
.vc-sprite { position: absolute; background-repeat: no-repeat; }
.vc-drag { cursor: ns-resize; }
.vc-click { cursor: pointer; }
.vc-wetdry { position: absolute; display: block; overflow: visible; }
.vc-wetdry:focus { outline: none; }
.vc-wetdry:focus-visible { outline: 1px solid var(--vc-cream); outline-offset: 2px; border-radius: 9px; }
.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);
}

/* one octave of phrases under the panel, in its colours: orange dotted strip, cream and purple keys */
.vc-drawer {
  position: absolute; display: flex; align-items: center; padding: 6px 8px 7px;
  background: var(--vc-orange) radial-gradient(circle, rgba(254, 250, 240, .3) 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-tag {
  position: absolute; left: 50%; top: calc(100% + 12px); transform: translate(-50%, -4px); padding: .45rem .95rem .4rem; border-radius: 99px; white-space: nowrap;
  background: var(--vc-navy); color: var(--vc-cream); border: 2px solid var(--vc-ink); box-shadow: 2px 3px 0 var(--vc-ink);
  font-family: "VC Compadre", sans-serif; font-size: .78rem; letter-spacing: .05em;
  opacity: 0; transition: opacity .15s ease, transform .15s ease; pointer-events: none;
}
.vc-tag.on { opacity: 1; transform: translate(-50%, 0); }