.uk-mark {
  background-color: #fff0
}

  .uk-mark svg #bg {
    fill: oklch(51.1% .262 276.966);
    fill: oklch(62% .22 276.966)
  }

  .uk-mark svg #letters {
    fill: #fff
  }

.uk-logo__svg #bg path {
  fill: oklch(62% .22 276.966)
}

.uk-logo__svg #letters path {
  fill: #fff
}

.uk-logo__svg > g:not(#bg):not(#letters) path {
  fill: #0f172a
}

.uk-brandmark #bg path {
  fill: oklch(62% .22 276.966)
}

.uk-brandmark #letters path {
  fill: #fff
}

.uk-header {
  transition: box-shadow 180ms ease,background-color 180ms ease,border-color 180ms ease,transform 180ms ease
}

  .uk-header.uk-scrolled {
    box-shadow: 0 10px 28px rgb(15 23 42 / .1)
  }

@keyframes ukFadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes ukSlideInRight {
  from {
    transform: translateX(14px);
    opacity: .92
  }

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

dialog[open]::backdrop {
  animation: ukFadeIn 160ms ease-out both
}

.uk-mobile-panel {
  animation: ukSlideInRight 180ms ease-out both
}

@media (prefers-reduced-motion:reduce) {
  .uk-header {
    transition: none
  }

  dialog[open]::backdrop {
    animation: none
  }

  .uk-mobile-panel {
    animation: none
  }
}