.ukb {
  cursor: pointer;
  margin: 10px;
  padding: 10px 20px;
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
  text-decoration: none !important;
  border: 5px solid;
  border-image-slice: 1;
  z-index: 100;
  border-image-source: linear-gradient(0deg, rgb(255, 213, 0) 0%, rgb(255, 213, 0) 47%, rgb(0, 91, 187) 47%, rgb(0, 91, 187) 100%);
  opacity: 1;
  transition: opacity 1s ease;
}
.ukb-light { color: #0f172a; background: #f1f5f9; }
.ukb-dark { background: #0f172a; color: #f1f5f9; }
.ukb-bottom-right { position: fixed; bottom: 0; right: 0; }
.ukb-bottom-left { position: fixed; bottom: 0; left: 0; }
.ukb-top-right { position: fixed; top: 0; right: 0; }
.ukb-top-left { position: fixed; top: 0; left: 0; }
a.ukb,
a.ukb:visited,
a.ukb:hover,
a.ukb:focus-visible {
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
  text-decoration: none !important;
}
a.ukb-dark,
a.ukb-dark:visited,
a.ukb-dark:hover,
a.ukb-dark:focus-visible { color: #f1f5f9; }
a.ukb-light,
a.ukb-light:visited,
a.ukb-light:hover,
a.ukb-light:focus-visible { color: #0f172a; }
.ukb-fade-out { opacity: 0; pointer-events: none; }

@media (max-width: 767px) {
  .ukb {
    box-sizing: border-box;
    width: min(30rem, calc(100vw - 2rem));
    max-width: none;
    margin: 1rem;
    padding: .75rem 1rem;
    border-width: 4px;
    font-size: .95rem;
    line-height: 1.35;
    text-align: center;
  }
  .ukb-bottom-right,
  .ukb-bottom-left {
    right: auto;
    left: 50%;
    margin-left: 0;
    margin-right: 0;
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ukb { transition: none; }
}