@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/schibsted-latin-400-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/v3-efd14204-8dbd-4d55-b8e7-e3373bbb508a.woff2")
    format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/v3-ae8da505-d8a0-4c6d-bd74-a0c422736c12.woff2")
    format("woff2");
}
@font-face {
  font-family: Phosphor;
  src: url("/assets/v4-icons.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.ph {
  font-family: Phosphor !important;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
}
.ph.ph-envelope-simple:before {
  content: "\e218";
}
.ph.ph-textbox:before {
  content: "\eb0a";
}
.ph.ph-table:before {
  content: "\e476";
}
.ph.ph-address-book:before {
  content: "\e6f8";
}
.ph.ph-chart-bar:before {
  content: "\e150";
}
.ph.ph-bell-ringing:before {
  content: "\e5e8";
}
.ph.ph-code:before {
  content: "\e1bc";
}
.ph.ph-calendar-blank:before {
  content: "\e10a";
}
.ph.ph-receipt:before {
  content: "\e3ec";
}
.ph.ph-chat-circle-dots:before {
  content: "\e16c";
}
.ph.ph-files:before {
  content: "\e710";
}
.ph.ph-trend-up:before {
  content: "\e4ae";
}
.ph.ph-arrows-left-right:before {
  content: "\e0a0";
}
.ph.ph-file-text:before {
  content: "\e23a";
}
.ph.ph-chart-line-up:before {
  content: "\e156";
}
.ph.ph-plugs-connected:before {
  content: "\eb5a";
}
.ph.ph-play:before {
  content: "\e3d0";
}
.ph.ph-pause:before {
  content: "\e39e";
}
.ph.ph-arrow-clockwise:before {
  content: "\e036";
}
.ph.ph-user-check:before {
  content: "\eafa";
}
.ph.ph-check:before {
  content: "\e182";
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: #0c0d0f;
  color: #16171a;
  -webkit-font-smoothing: antialiased;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
a {
  color: oklch(0.45 0.11 158);
}
a:hover {
  color: #16171a;
}
:focus-visible {
  outline: 2px solid oklch(0.78 0.16 155);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection {
  background: oklch(0.85 0.12 155);
  color: #0c0d0f;
}
input::placeholder,
textarea::placeholder {
  color: #7d8088;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
@keyframes travel {
  from {
    left: -12%;
  }
  to {
    left: 100%;
  }
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ring {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}
@keyframes blink {
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

.v4-effect-0:focus {
  left: 12px !important;
}
.v4-effect-1:hover {
  color: #fff !important;
}
.v4-effect-2:hover {
  color: #fff !important;
}
.v4-effect-3:hover {
  color: #fff !important;
}
.v4-effect-4:hover {
  color: #fff !important;
}
.v4-effect-5:hover {
  background: oklch(0.86 0.14 155) !important;
  color: #0c0d0f !important;
  transform: translateY(-1px) !important;
}
.v4-effect-6:hover {
  background: oklch(0.86 0.14 155) !important;
  color: #0c0d0f !important;
  transform: translateY(-2px) !important;
}
.v4-effect-7:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
}
.v4-effect-8:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}
.v4-effect-9:hover {
  animation-play-state: paused !important;
}
.v4-effect-10:hover {
  transform: translateY(-4px) !important;
  border-color: oklch(0.75 0.1 158) !important;
  box-shadow: 0 24px 48px -28px rgba(22, 23, 26, 0.35) !important;
}
.v4-effect-11:hover {
  background: oklch(0.86 0.14 155) !important;
  transform: translateY(-1px) !important;
}
.v4-effect-12:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}
.v4-effect-13:hover {
  background: oklch(0.86 0.14 155) !important;
  color: #0c0d0f !important;
}
.v4-effect-14:hover {
  background: #fff !important;
}
.v4-effect-15:hover {
  transform: translateY(-2px) !important;
  color: #fff !important;
}
.v4-effect-16:hover {
  transform: translateY(-2px) !important;
  color: #0c0d0f !important;
}
.v4-effect-17:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}
.v4-effect-18:focus {
  border-color: oklch(0.78 0.16 155) !important;
  box-shadow: 0 0 0 3px oklch(0.78 0.16 155 / 0.2) !important;
}
.v4-effect-19:focus {
  border-color: oklch(0.78 0.16 155) !important;
  box-shadow: 0 0 0 3px oklch(0.78 0.16 155 / 0.2) !important;
}
.v4-effect-20:focus {
  border-color: oklch(0.78 0.16 155) !important;
  box-shadow: 0 0 0 3px oklch(0.78 0.16 155 / 0.2) !important;
}
.v4-effect-21:focus {
  border-color: oklch(0.78 0.16 155) !important;
  box-shadow: 0 0 0 3px oklch(0.78 0.16 155 / 0.2) !important;
}
.v4-effect-22:focus {
  border-color: oklch(0.78 0.16 155) !important;
  box-shadow: 0 0 0 3px oklch(0.78 0.16 155 / 0.2) !important;
}
.v4-effect-23:hover {
  background: oklch(0.86 0.14 155) !important;
  transform: translateY(-1px) !important;
}
.v4-effect-24:hover {
  color: #fff !important;
}
.v4-effect-25:hover {
  color: #fff !important;
}
[hidden] {
  display: none !important;
}
.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
input,
textarea {
  min-width: 0;
  width: 100%;
}
#examples {
  scroll-margin-top: 68px;
}
.footer-links {
  max-width: 1240px;
  margin: auto;
  padding: 0 clamp(20px, 5vw, 40px) 28px;
  display: flex;
  gap: 16px 28px;
  flex-wrap: wrap;
  font-size: 14px;
}
.footer-links a {
  color: #c9cace;
  text-decoration: none;
  padding: 8px 0;
}
.footer-links a:hover {
  color: #fff;
  text-decoration: underline;
}
@media (max-width: 540px) {
  #demo-panel dl > div {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  #demo-panel a {
    white-space: normal !important;
  }
}