@font-face {
  font-family: 'Roobert';
  src: url("/static/fonts/RoobertTRIAL-Light.59eb04ea4cac.otf") format('opentype'),
    url("/static/fonts/RoobertTRIAL-Light.e09b47ba2888.ttf") format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Roobert';
  src: url("/static/fonts/RoobertTRIAL-Regular.b8fdf021db37.otf") format('opentype'),
    url("/static/fonts/RoobertTRIAL-Regular.16623f174dba.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Roobert';
  src: url("/static/fonts/RoobertTRIAL-SemiBold.5f0528f8e930.otf") format('opentype'),
    url("/static/fonts/RoobertTRIAL-SemiBold.1365286d781f.ttf") format('truetype');
  font-weight: 600;
  font-style: normal;
}

up-modal-box,
up-cover-box {
  background-color: #fff;
  border-radius: 8px;
}

up-modal.center up-modal-viewport {
  justify-content: center;
  align-items: center;
}

up-progress-bar {
  background: linear-gradient(to right, rgb(90, 190, 40), rgb(130, 230, 60));
}

:focus:not(:focus-visible, .up-focus-visible),
.up-focus-hidden,
:focus[tabindex='-1'],
:focus-visible[tabindex='-1'] {
  outline: none !important;
}

[id]:target {
  animation: highlight 2s ease-out forwards;
}
@keyframes highlight {
  from {
    background-color: oklch(var(--wa));
  }
  to {
    background-color: oklch(var(--wa) / 0.2);
  }
}

header nav a.up-current {
  background-color: oklch(var(--n));
  color: oklch(var(--nc));
}

a.badge.up-current {
  background-color: oklch(var(--p));
  color: oklch(var(--pc));
}

.chat-start .anchor-link {
  left: 100%;
  padding-left: 0.5rem;
}
.chat-end .anchor-link {
  right: 100%;
  padding-right: 0.5rem;
}

@keyframes slide-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slide-out {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

.drop-area.active {
  border-color: var(--color-mavenavy);
}

.new-card-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  width: 10em;
  height: 10em;
  background: #fb5607;
  border-radius: 50%;
  box-shadow: -5rem -6rem 0 0 #ffbe0b, 2rem -4rem 0 0 #8338ec,
    -1rem 6rem 0 0 #ff006e, 1rem 1rem 0 0 #8338ec, 8rem 4rem #3a86ff,
    -8rem 0 0 0 #3a86ff;
  transform-origin: 56% 37%;
  animation: rotate 30s linear infinite;
  filter: blur(48px);
}

@keyframes rotate {
  0% {
    rotate: 0deg;
    scale: 1;
    skew: 0deg 0deg;
  }
  50% {
    rotate: 270deg;
    scale: 1.75;
    skew: 10deg -30deg;
  }
  100% {
    rotate: 360deg;
    scale: 1.25;
    skew: -10deg 30deg;
  }
}
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.shake-element {
  animation: shake 0.5s ease-in-out;
  animation-iteration-count: 2;
}