/* Ukulele Safari palette sampled from the live site. */
.mtpb-app {
  --mtpb-ink: #565656;
  --mtpb-paper: #f4f1ec;
  --mtpb-cream: #ffffff;
  --mtpb-orange: #c47a44;
  --mtpb-line: #a4a4a4;
  color: #565656;
  background: #f4f1ec;
  border-color: #a4a4a4;
}

.mtpb-app .mtpb-intro > p:last-child,
.mtpb-app .mtpb-help {
  color: #565656;
}

.mtpb-app .mtpb-form {
  background: #ffffff;
  border-color: #a4a4a4;
  box-shadow: 6px 6px 0 #a97142;
}

.mtpb-app .mtpb-input-row {
  border-color: #565656;
}

.mtpb-app .mtpb-input-row button {
  background: #c47a44 !important;
}

.mtpb-app .mtpb-input-row button:hover,
.mtpb-app .mtpb-input-row button:focus {
  background: #a97142 !important;
}

.mtpb-app .mtpb-output {
  background: #f4f1ec;
  border-color: #a4a4a4;
}

.mtpb-app .mtpb-key {
  border-left-color: #c47a44;
}

.mtpb-app .mtpb-results-heading em,
.mtpb-app .mtpb-why span {
  color: #c47a44;
}

.mtpb-app .mtpb-card {
  color: #565656;
  border-color: #a4a4a4;
}

.mtpb-app .mtpb-tone-1,
.mtpb-app .mtpb-tone-4 {
  background: #ffffff;
}

.mtpb-app .mtpb-tone-2,
.mtpb-app .mtpb-tone-5 {
  background: #efe1d4;
}

.mtpb-app .mtpb-tone-3 {
  background: #f4f1ec;
}

.mtpb-app .mtpb-tone-6 {
  color: #ffffff;
  background: #a97142;
}

.mtpb-app .mtpb-diagram {
  color: #565656;
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(86, 86, 86, 0.38);
}

.mtpb-app .mtpb-string b {
  background: #565656;
}

.mtpb-app .mtpb-tone-6 .mtpb-diagram {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
}

.mtpb-app .mtpb-tone-6 .mtpb-string b {
  color: #a97142;
  background: #ffffff;
}

.mtpb-app .mtpb-error {
  color: #565656;
  background: #efe1d4;
  border-color: #c47a44;
}