.logo {
  width: 30px;
  height: 30px;
}

*:focus,
*:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.apnd {
  opacity: 0;
  transform: translateY(20px);
}

.ap_slow {
  animation-duration: 1.8s;
}

.ap_fast {
  animation-duration: 0.28s;
}

@property --rb-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.running-border {
  --rb-angle: 0deg;
  --rb-color: 80 190 255;
  --rb-text: 218 244 255;
  --rb-speed: 2.4s;
  --rb-width: 1px;
  --rb-border-gradient:
    conic-gradient(
      from var(--rb-angle),
      transparent 0 60%,
      rgb(var(--rb-color) / 0.10) 75%,
      rgb(var(--rb-color) / 0.62) 80%,
      rgb(var(--rb-color)) 86%,
      rgb(var(--rb-color) / 0.62) 92%,
      rgb(var(--rb-color) / 0.10) 96%,
      transparent 100%
    );
  --rb-blur-gradient:
    conic-gradient(
      from var(--rb-angle),
      transparent 0 56%,
      rgb(var(--rb-color) / 0) 64%,
      rgb(var(--rb-color) / 0.11) 72%,
      rgb(var(--rb-color) / 0.35) 82%,
      rgb(var(--rb-color) / 0.55) 86%,
      rgb(var(--rb-color) / 0.32) 91%,
      rgb(var(--rb-color) / 0.09) 96%,
      transparent 100%
    );
  position: relative;
  isolation: isolate;
  display: inline-flex;
  padding: var(--rb-width);
  color: rgb(var(--rb-text));
  border-radius: inherit;
  background: var(--rb-border-gradient);
  box-shadow: 0 0 0 1px #ffffff08, 0 12px 36px #000000a6;
  animation: var(--apnd-enter, none), rb-spin var(--rb-speed) linear infinite;
}

.apnd.is-visible {
  opacity: 1;
  transform: translateY(0);
  animation: apnd-enter 0.6s ease-out both;
}

.apnd.is-visible.running-border {
  animation:
    apnd-enter 0.6s ease-out both,
    rb-spin var(--rb-speed) linear infinite;
}

.running-border::before,
.running-border-wrap::before {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
  background: var(--rb-blur-gradient);
  animation: rb-spin var(--rb-speed) linear infinite;
}

.running-border::before {
  z-index: -1;
  inset: -18px;
  filter: blur(14px);
  opacity: 0;
}

.running-border-wrap {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  display: block;
  width: 100%;
  color: inherit;
  box-shadow: inset 0 1px 0 #ffffff0f;
}

.running-border-wrap::before {
  z-index: -1;
  inset: -24px;
  filter: blur(18px);
  opacity: 0;
}

.running-border-wrap::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at center, rgb(var(--rb-color) / 0.07), rgb(var(--rb-color) / 0.025) 34%, transparent 58%),
    linear-gradient(180deg, #ffffff0d, #ffffff03);
}

.running-border.inner {
  overflow: hidden;
}

.running-border.inner .running-border-wrap::before {
  opacity: 0.62;
}

.running-border.out {
  overflow: visible;
}

.running-border.out::before {
  opacity: 0.42;
}

.running-border.out .running-border-wrap::before {
  display: none;
}

.running-border-content {
  position: relative;
  z-index: 2;
}

.running-border.blue {
  --rb-color: 80 190 255;
  --rb-text: 218 244 255;
}

.running-border.emerald {
  --rb-color: 244 217 187;
  --rb-text: 244 217 187;
}

.running-border.slow {
  --rb-speed: 4.8s;
}

.running-border.fast {
  --rb-speed: 1.2s;
}

.running-border.rb-border-1 {
  --rb-width: 1px;
}

.running-border.rb-border-2 {
  --rb-width: 2px;
}

.running-border.rb-border-3 {
  --rb-width: 3px;
}

.running-border.rb-border-4 {
  --rb-width: 4px;
}

@keyframes rb-spin {
  to {
    --rb-angle: 360deg;
  }
}

@keyframes apnd-enter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.1);
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  border: 2px solid rgba(0, 0, 0, 0.1);
}

.logo .el {
  opacity: 0.9;
}

.logo .id-01 {
  clip-path: polygon(2.25px 6.75px, 6.75px 4.425px, 6.75px 19.8px, 2.25px 17.25px);
  background-color: #1b6d88;
}

.logo .id-02 {
  clip-path: polygon(2.25px 6.75px, 15px 0, 20.1px 2.775px, 2.25px 12px);
  background-color: #6ab8d4;
}

.logo .id-03 {
  clip-path: polygon(15px 0, 27.75px 6.75px, 27.75px 12px, 10.05px 2.625px);
  background-color: #2888aa;
}

.logo .id-04 {
  clip-path: polygon(27.75px 6.75px, 27.75px 22.5px, 23.25px 25.125px, 23.25px 4.425px);
  background-color: #1b6d88;
}

.logo .id-05 {
  clip-path: polygon(9.975px 27px, 27.75px 17.25px, 27.75px 22.5px, 15px 30px);
  background-color: #3498bc;
}

.logo .id-06 {
  clip-path: polygon(2.25px 17.25px, 20.1px 27px, 15px 30px, 2.25px 22.5px);
  background-color: #7bc4de;
}

.logo .id-07 {
  clip-path: polygon(15px 9.75px, 19.5px 12px, 15px 14.25px, 10.5px 12px);
  background-color: #6ab8d4;
}

.logo .id-08 {
  clip-path: polygon(19.5px 12px, 19.5px 17.625px, 15px 20.25px, 15px 14.25px);
  background-color: #2888aa;
}

.logo .id-09 {
  clip-path: polygon(15px 14.25px, 15px 20.25px, 10.5px 17.625px, 10.5px 12px);
  background-color: #1b6d88;
}

.logo-wrap:hover .id-01 {
  animation: blinker 1s ease-out 0.6s infinite;
}

.logo-wrap:hover .id-02 {
  animation: blinker 1s ease-out 0.7s infinite;
}

.logo-wrap:hover .id-03 {
  animation: blinker 1s ease-out 0.8s infinite;
}

.logo-wrap:hover .id-04 {
  animation: blinker 1s ease-out 0.9s infinite;
}

.logo-wrap:hover .id-05 {
  animation: blinker 1s ease-out 1s infinite;
}

.logo-wrap:hover .id-06 {
  animation: blinker 1s ease-out 1.1s infinite;
}

.logo-wrap:hover .id-07 {
  animation: blinker 1s ease-out 0.1s infinite;
}

.logo-wrap:hover .id-08 {
  animation: blinker 1s ease-out 0.2s infinite;
}

.logo-wrap:hover .id-09 {
  animation: blinker 1s ease-out 0.3s infinite;
}

.logo-auto-5s .id-01 { animation: blinker-auto-5s 5s ease-out 0.6s infinite; }
.logo-auto-5s .id-02 { animation: blinker-auto-5s 5s ease-out 0.7s infinite; }
.logo-auto-5s .id-03 { animation: blinker-auto-5s 5s ease-out 0.8s infinite; }
.logo-auto-5s .id-04 { animation: blinker-auto-5s 5s ease-out 0.9s infinite; }
.logo-auto-5s .id-05 { animation: blinker-auto-5s 5s ease-out 1s infinite; }
.logo-auto-5s .id-06 { animation: blinker-auto-5s 5s ease-out 1.1s infinite; }
.logo-auto-5s .id-07 { animation: blinker-auto-5s 5s ease-out 0.1s infinite; }
.logo-auto-5s .id-08 { animation: blinker-auto-5s 5s ease-out 0.2s infinite; }
.logo-auto-5s .id-09 { animation: blinker-auto-5s 5s ease-out 0.3s infinite; }

@keyframes blinker {
  20% {
    opacity: 1;
  }

  40% {
    opacity: 0.3;
  }

  60% {
    opacity: 1;
  }
}

@keyframes blinker-auto-5s {
  0% { opacity: 0.9; }
  4% { opacity: 1; }
  8% { opacity: 0.3; }
  12% { opacity: 1; }
  16% { opacity: 0.9; }
  100% { opacity: 0.9; }
}