styles.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.bg-gray-40 {
  background-color: rgb(77, 77, 77);
}

.bg-gray-80 {
  background-color: rgb(46, 46, 46);
}

.bg-gray-90 {
  background-color: rgb(20, 20, 20);
}

.bg-blue-0 {
  background-color: rgb(65, 153, 235);
}

.bg-pink {
  background-color: rgb(247, 48, 144);
}

.border-gray-40 {
  border-color: rgb(77, 77, 77);
}

.text-gray-0 {
  color: rgb(128, 128, 128);
}

.text-blue-40 {
  color: rgb(131, 190, 246);
}

.text-gray-40 {
  color: rgb(179, 179, 179);
}

.text-gray-70 {
  color: rgb(217, 217, 217);
}

.text-orange-0 {
  color: rgb(248, 174, 97);
}

.text-pink {
  color: rgb(247, 48, 144);
}

.bg-share-button {
  background: linear-gradient(131.15deg, #F7CCFE -8.51%, #660FF7 82.79%);
  box-shadow: 0px 0px 4px #660FF7;
}

.output-item {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
}

.bg-warning-gradient {
  background: linear-gradient(180deg, rgba(248, 174, 97, 1) 0%, rgba(248, 174, 97, 0) 100%);
}

.bg-error-gradient {
  background: linear-gradient(180deg, rgba(247, 48, 144, 1) 0%, rgba(247, 48, 144, 0) 100%);
}

pre.test-trace { --color-trace: rgb(247, 48, 144); }
pre.test-trace.success { --color-trace: rgb(131, 190, 246); }
pre.test-trace::before {
  content: 'Trace';
  font-variant: small-caps;
  color: var(--color-trace);
  font-size: 0.9em;
  padding-right: 0.65rem;
  font-weight: bold;
}