:root {
  --accent-light:   #FFA655;
  --accent-mid:     #FF9027;
  --accent-mid-80:  #FF902780;
  --accent-dark:    #FF5B00;
  --accent-dark-80: #FF5B0080;

  --selected:       #FFA655;
  --backdrop-80:    #42302080;

  --prog-shadow:       var(--accent-dark);
  --prog-base-outline: var(--accent-light);
  --prog-fill-outline: #EEE;
  --prog-fill:         #EEE;
}

.visible.q-large .background {
  background-image: url(../img/btc/q-large.webp);
}

.q-large .backdrop {
  -webkit-mask-image: url(../img/btc/q-large-matte.png);
  mask-image: url(../img/btc/q-large-matte.png);
}

.visible.q-mid .background {
  background-image: url(../img/btc/q-mid.webp);
}

.q-mid .backdrop {
  -webkit-mask-image: url(../img/btc/q-mid-matte.png);
  mask-image: url(../img/btc/q-mid-matte.png);
}

.visible.q-small .background {
  background-image: url(../img/btc/q-small.webp);
}

.q-small .backdrop {
  -webkit-mask-image: url(../img/btc/q-small-matte.png);
  mask-image: url(../img/btc/q-small-matte.png);
}

.visible.o-large .background {
  background-image: url(../img/btc/o-large.webp);
}

.visible.o-mid .background {
  background-image: url(../img/btc/o-mid.webp);
}

.visible.o-small .background {
  background-image: url(../img/btc/o-small.webp);
}

.visible.o-xsmall .background {
  background-image: url(../img/btc/o-xsmall.webp);
}

.ui form .background {
  background-image: url(../img/btc/form-input.webp);
}

.btn .background {
  background-image: url(../img/btc/c.png);
}