body.light .bcard {
  background: hsla(var(--card-hue), 100%, 60%, 50%);
}
body.light .bcard button {
  --col1: hsla(var(--card-hue), 50%, 40%, 90%);
  --col2: hsla(var(--card-hue), 40%, 50%, 90%);
}
.bcard {
  background: hsla(var(--card-hue), 70%, 30%, 50%);
  backdrop-filter: blur(5px);
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 0.5rem;
  cursor: pointer;
  overflow-y: hidden;
}
.bcard.spread.max-width ul {
  width: calc(100% - 3.5rem);
}
.bcard:active .accordion-header {
  scale: 0.98;
  letter-spacing: 0.02rem;
}
.bcard.nobg {
  background: none;
}
.bcard .accordion-header strong {
  width: 85%;
}
.bcard pre {
  box-sizing: border-box;
  overflow-y: scroll;
  font-size: 0.8rem;
  background-color: rgba(0, 0, 0, 0.3333333333);
  padding: 0.5rem;
  border-radius: 0.6rem;
}
.bcard button {
  --col1: hsla(var(--card-hue), 50%, 50%, 50%);
  --col2: hsla(var(--card-hue), 70%, 30%, 50%);
  background: radial-gradient(circle at 20% 20%, var(--col1), var(--col2));
}
@media only screen and (max-width: 767px) {
  .bcard ol, .bcard ul {
    padding-left: 1rem;
  }
}
.bcard.screen-banner {
  width: 100%;
  min-height: calc(100vh - var(--nav-bar-height));
  background: none;
  border-radius: 0;
  cursor: default;
}
.bcard.screen-banner, .bcard.screen-banner * {
  box-sizing: border-box;
}
.bcard.error-notice {
  background: black;
  border: 2px solid crimson;
  opacity: 0;
  animation: 300ms bcard-fade-in forwards;
  transition: 800ms;
  transition-timing-function: cubic-bezier(0.08, 0.47, 0.12, 0.96);
}
.bcard.error-notice svg {
  --lighter: hsl(350, 100%, 69%);
}
.bcard.error-notice.big svg {
  --size: 4rem;
}
@keyframes bcard-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}