/*
User-supplied component adaptation, received 2026-10-13.
Original author, source URL, and license were not supplied.
No MIT license or redistribution permission is asserted for the supplied code.
Retain this notice and establish original license terms before redistributing.
Changes: portable React/TypeScript and scoped CSS, focus and reduced-motion support.

*/
  .banter-loader {
    position: relative;
    left: auto;
    top: auto;
    width: 72px;
    height: 72px;
    margin: 1rem 0 0;
  }

  .banter-loader__box {
    float: left;
    position: relative;
    width: 20px;
    height: 20px;
    margin-right: 6px;
  }

  .banter-loader__box:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: currentColor;
  }

  .banter-loader__box:nth-child(3n) {
    margin-right: 0;
    margin-bottom: 6px;
  }

  .banter-loader__box:nth-child(1):before, .banter-loader__box:nth-child(4):before {
    margin-left: 26px;
  }

  .banter-loader__box:nth-child(3):before {
    margin-top: 52px;
  }

  .banter-loader__box:last-child {
    margin-bottom: 0;
  }

  @keyframes moveBox-1 {
    9.0909090909% {
      transform: translate(-26px, 0);
    }

    18.1818181818% {
      transform: translate(0px, 0);
    }

    27.2727272727% {
      transform: translate(0px, 0);
    }

    36.3636363636% {
      transform: translate(26px, 0);
    }

    45.4545454545% {
      transform: translate(26px, 26px);
    }

    54.5454545455% {
      transform: translate(26px, 26px);
    }

    63.6363636364% {
      transform: translate(26px, 26px);
    }

    72.7272727273% {
      transform: translate(26px, 0px);
    }

    81.8181818182% {
      transform: translate(0px, 0px);
    }

    90.9090909091% {
      transform: translate(-26px, 0px);
    }

    100% {
      transform: translate(0px, 0px);
    }
  }

  .banter-loader__box:nth-child(1) {
    animation: moveBox-1 4s infinite;
  }

  @keyframes moveBox-2 {
    9.0909090909% {
      transform: translate(0, 0);
    }

    18.1818181818% {
      transform: translate(26px, 0);
    }

    27.2727272727% {
      transform: translate(0px, 0);
    }

    36.3636363636% {
      transform: translate(26px, 0);
    }

    45.4545454545% {
      transform: translate(26px, 26px);
    }

    54.5454545455% {
      transform: translate(26px, 26px);
    }

    63.6363636364% {
      transform: translate(26px, 26px);
    }

    72.7272727273% {
      transform: translate(26px, 26px);
    }

    81.8181818182% {
      transform: translate(0px, 26px);
    }

    90.9090909091% {
      transform: translate(0px, 26px);
    }

    100% {
      transform: translate(0px, 0px);
    }
  }

  .banter-loader__box:nth-child(2) {
    animation: moveBox-2 4s infinite;
  }

  @keyframes moveBox-3 {
    9.0909090909% {
      transform: translate(-26px, 0);
    }

    18.1818181818% {
      transform: translate(-26px, 0);
    }

    27.2727272727% {
      transform: translate(0px, 0);
    }

    36.3636363636% {
      transform: translate(-26px, 0);
    }

    45.4545454545% {
      transform: translate(-26px, 0);
    }

    54.5454545455% {
      transform: translate(-26px, 0);
    }

    63.6363636364% {
      transform: translate(-26px, 0);
    }

    72.7272727273% {
      transform: translate(-26px, 0);
    }

    81.8181818182% {
      transform: translate(-26px, -26px);
    }

    90.9090909091% {
      transform: translate(0px, -26px);
    }

    100% {
      transform: translate(0px, 0px);
    }
  }

  .banter-loader__box:nth-child(3) {
    animation: moveBox-3 4s infinite;
  }

  @keyframes moveBox-4 {
    9.0909090909% {
      transform: translate(-26px, 0);
    }

    18.1818181818% {
      transform: translate(-26px, 0);
    }

    27.2727272727% {
      transform: translate(-26px, -26px);
    }

    36.3636363636% {
      transform: translate(0px, -26px);
    }

    45.4545454545% {
      transform: translate(0px, 0px);
    }

    54.5454545455% {
      transform: translate(0px, -26px);
    }

    63.6363636364% {
      transform: translate(0px, -26px);
    }

    72.7272727273% {
      transform: translate(0px, -26px);
    }

    81.8181818182% {
      transform: translate(-26px, -26px);
    }

    90.9090909091% {
      transform: translate(-26px, 0px);
    }

    100% {
      transform: translate(0px, 0px);
    }
  }

  .banter-loader__box:nth-child(4) {
    animation: moveBox-4 4s infinite;
  }

  @keyframes moveBox-5 {
    9.0909090909% {
      transform: translate(0, 0);
    }

    18.1818181818% {
      transform: translate(0, 0);
    }

    27.2727272727% {
      transform: translate(0, 0);
    }

    36.3636363636% {
      transform: translate(26px, 0);
    }

    45.4545454545% {
      transform: translate(26px, 0);
    }

    54.5454545455% {
      transform: translate(26px, 0);
    }

    63.6363636364% {
      transform: translate(26px, 0);
    }

    72.7272727273% {
      transform: translate(26px, 0);
    }

    81.8181818182% {
      transform: translate(26px, -26px);
    }

    90.9090909091% {
      transform: translate(0px, -26px);
    }

    100% {
      transform: translate(0px, 0px);
    }
  }

  .banter-loader__box:nth-child(5) {
    animation: moveBox-5 4s infinite;
  }

  @keyframes moveBox-6 {
    9.0909090909% {
      transform: translate(0, 0);
    }

    18.1818181818% {
      transform: translate(-26px, 0);
    }

    27.2727272727% {
      transform: translate(-26px, 0);
    }

    36.3636363636% {
      transform: translate(0px, 0);
    }

    45.4545454545% {
      transform: translate(0px, 0);
    }

    54.5454545455% {
      transform: translate(0px, 0);
    }

    63.6363636364% {
      transform: translate(0px, 0);
    }

    72.7272727273% {
      transform: translate(0px, 26px);
    }

    81.8181818182% {
      transform: translate(-26px, 26px);
    }

    90.9090909091% {
      transform: translate(-26px, 0px);
    }

    100% {
      transform: translate(0px, 0px);
    }
  }

  .banter-loader__box:nth-child(6) {
    animation: moveBox-6 4s infinite;
  }

  @keyframes moveBox-7 {
    9.0909090909% {
      transform: translate(26px, 0);
    }

    18.1818181818% {
      transform: translate(26px, 0);
    }

    27.2727272727% {
      transform: translate(26px, 0);
    }

    36.3636363636% {
      transform: translate(0px, 0);
    }

    45.4545454545% {
      transform: translate(0px, -26px);
    }

    54.5454545455% {
      transform: translate(26px, -26px);
    }

    63.6363636364% {
      transform: translate(0px, -26px);
    }

    72.7272727273% {
      transform: translate(0px, -26px);
    }

    81.8181818182% {
      transform: translate(0px, 0px);
    }

    90.9090909091% {
      transform: translate(26px, 0px);
    }

    100% {
      transform: translate(0px, 0px);
    }
  }

  .banter-loader__box:nth-child(7) {
    animation: moveBox-7 4s infinite;
  }

  @keyframes moveBox-8 {
    9.0909090909% {
      transform: translate(0, 0);
    }

    18.1818181818% {
      transform: translate(-26px, 0);
    }

    27.2727272727% {
      transform: translate(-26px, -26px);
    }

    36.3636363636% {
      transform: translate(0px, -26px);
    }

    45.4545454545% {
      transform: translate(0px, -26px);
    }

    54.5454545455% {
      transform: translate(0px, -26px);
    }

    63.6363636364% {
      transform: translate(0px, -26px);
    }

    72.7272727273% {
      transform: translate(0px, -26px);
    }

    81.8181818182% {
      transform: translate(26px, -26px);
    }

    90.9090909091% {
      transform: translate(26px, 0px);
    }

    100% {
      transform: translate(0px, 0px);
    }
  }

  .banter-loader__box:nth-child(8) {
    animation: moveBox-8 4s infinite;
  }

  @keyframes moveBox-9 {
    9.0909090909% {
      transform: translate(-26px, 0);
    }

    18.1818181818% {
      transform: translate(-26px, 0);
    }

    27.2727272727% {
      transform: translate(0px, 0);
    }

    36.3636363636% {
      transform: translate(-26px, 0);
    }

    45.4545454545% {
      transform: translate(0px, 0);
    }

    54.5454545455% {
      transform: translate(0px, 0);
    }

    63.6363636364% {
      transform: translate(-26px, 0);
    }

    72.7272727273% {
      transform: translate(-26px, 0);
    }

    81.8181818182% {
      transform: translate(-52px, 0);
    }

    90.9090909091% {
      transform: translate(-26px, 0);
    }

    100% {
      transform: translate(0px, 0);
    }
  }

  .banter-loader__box:nth-child(9) {
    animation: moveBox-9 4s infinite;
  }

.banter-loader, .banter-loader * { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { .banter-loader__box { animation: none !important; } }


/* Startup keeps its backdrop opaque; page transitions fade the whole overlay. */
#startup-loader .full-screen-loader__content,
.full-screen-loader[data-phase="entering"] .full-screen-loader__content {
  animation: loader-content-enter 200ms cubic-bezier(.2, .65, .3, 1) both;
}
.full-screen-loader[data-phase="entering"] { animation: loader-overlay-enter 200ms ease-out both; }
.full-screen-loader[data-phase="leaving"] { animation: loader-overlay-exit 350ms ease-in-out both; }
@keyframes loader-content-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes loader-overlay-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes loader-overlay-exit { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #startup-loader .full-screen-loader__content,
  .full-screen-loader[data-phase="entering"] .full-screen-loader__content { animation: loader-overlay-enter 80ms ease-out both; animation-duration: 80ms !important; }
  .full-screen-loader[data-phase="entering"],
  .full-screen-loader[data-phase="leaving"] { animation-duration: 80ms !important; }
}

.full-screen-loader { will-change: opacity; }
.full-screen-loader[data-phase="entering"] .full-screen-loader__content { will-change: transform, opacity; }
.full-screen-loader[data-phase="hidden"] { opacity: 0; visibility: hidden; pointer-events: none; will-change: auto; }
.full-screen-loader[data-phase="hidden"] .banter-loader__box { animation-play-state: paused; }
