.fib-selected {
    background: var(--color-ok) !important;
    color: black;
    border-color: black;
}
.fib-forbidden {
    background: var(--color-not) !important;
    color: black;
    border-color: black;

}
.fibowrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;

  color: var(--color-terminal) !important;
  background: var(--color-terminalbg) !important;
  border: var(--color-terminalhi) solid 1px;
  max-width: 80%;
  max-height: 80%;
  margin: auto;
  border-radius: 0.5em;
}
.fibonacci-squares {
  position: relative;
  display: inline-block;
  transform: translate(-5em, 3em);

}
.fibonacci-squares .square {
  box-sizing: border-box;
  position: absolute;
  outline: 0.5px solid var(--color-link-external);
  outline-offset: -0.25px;
  background-color: var(--color-link-external-10);
}
.fibonacci-squares .square.square-1 {
  width: 12.6ex;
  height: 12.6ex;
  bottom: 0;
      animation: rotation-0 12s infinite;
}
.fibonacci-squares .square.square-2 {
  width: 7.8ex;
  height: 7.8ex;
  transform-origin: right bottom;
  top: -7.8ex;
  right: 0;
      animation: rotation-A 12s infinite;
}
.fibonacci-squares .square.square-3 {
  width: 4.8ex;
  height: 4.8ex;
  transform-origin: top right;
  top: 0;
  left: -4.8ex;
      animation: rotation-B 12s infinite;
}
.fibonacci-squares .square.square-4 {
  width: 3.0ex;
  height: 3.0ex;
  transform-origin: top left;
  bottom: -3.0ex;
  left: 0;
        animation: rotation-A 12s infinite;
}
.fibonacci-squares .square.square-5 {
  width: 1.8ex;
  height: 1.8ex;
  transform-origin: bottom left;
  bottom: 0;
  right: -1.8ex;
        animation: rotation-B 12s infinite;
}
.fibonacci-squares .square.square-6 {
  width: 1.2ex;
  height: 1.2ex;
  transform-origin: bottom right;
  top: -1.2ex;
  right: 0;
  animation: rotation-A 12s infinite;
}
.fibonacci-squares .square.square-7 {
  width: 0.6ex;
  height: 0.6ex;
  transform-origin: top right;
  top: 0;
  left: -0.6ex;
        animation: rotation-B 12s infinite;
}
.fibonacci-squares .square.square-8 {
  width: 0.6ex;
  height: 0.6ex;
  transform-origin: top left;
  bottom: -0.6ex;
  left: 0;
  animation: rotation-A 12s infinite;
}
@keyframes rotation-0 {
    0% {transform: translate(0rem, 0) rotate(90deg);}
    25% {transform: translate(2rem, 0) rotate(-90deg);}
    50% {transform: translate(2rem,0) rotate(-90deg);}
    75% {transform: translate(0rem, 0) rotate(0deg);}
    100% {transform: translate(0rem, 0) rotate(90deg);}
} 
@keyframes rotation-A { 
    0% {transform: rotate(0deg); animation-timing-function: linear;}
    25% {transform: rotate(-180deg); animation-timing-function: linear;}
    50% {transform: rotate(-360deg);animation-timing-function: linear;}
    75% {transform: rotate(-540deg);animation-timing-function: linear;}
    100% {transform: rotate(-720deg);/*border-color: red;*/}
}
@keyframes rotation-B { 
    0% {transform: rotate(0deg);animation-timing-function: linear;}
    25% {transform: rotate(-180deg);animation-timing-function: linear;}
    50% {transform: rotate(-360deg);animation-timing-function: linear;}
    75% {transform: rotate(-180deg); animation-timing-function: linear;}
    100% {transform: rotate(0deg); /*border-color: red;*/}
}
.pairing-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.warning-bad { color: var(--colorwarning); }
.warning-ok  { color: var(--colorgrey); }