:root {
  --accent: #ff8a00;
}

body {
  --page-enter-y: 12px;
}

body.has-site-nav {
  position: relative;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body.has-site-nav :where(button, a, img, svg, canvas) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

body.has-site-nav :where(textarea, input:not([type="range"]), [contenteditable]:not([contenteditable="false"]), [data-native-interaction]) {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

body.has-site-nav::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(118deg, transparent 0 36%, rgba(255, 138, 0, 0.035) 42%, transparent 49% 100%);
  background-position:
    center,
    center,
    center;
  background-size:
    72px 72px,
    72px 72px,
    100% 100%;
  opacity: 0.72;
  mask-image: linear-gradient(180deg, black, rgba(0, 0, 0, 0.78) 44%, transparent 100%);
}

body.has-site-nav > main {
  position: relative;
  z-index: 1;
  animation: pageEnter 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.has-site-nav .topbar {
  margin-top: 36px;
}

body.is-page-leaving > main {
  pointer-events: none;
  animation: pageLeave 180ms ease both;
}

.site-nav {
  position: fixed;
  top: 12px;
  right: 14px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(3, 3, 4, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 44px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px);
}

.site-nav a {
  min-width: 48px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  transition:
    background 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover {
    color: #fff;
    transform: translateY(-1px);
  }
}

.site-nav a[aria-current="page"] {
  background: var(--accent);
  color: #050506;
}

.site-nav a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(var(--page-enter-y));
    filter: blur(5px);
  }

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

@keyframes pageLeave {
  from {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }

  to {
    opacity: 0;
    transform: translateY(-8px);
    filter: blur(4px);
  }
}

@media (max-width: 680px) {
  body.has-site-nav::before {
    background-size:
      56px 56px,
      56px 56px,
      100% 100%;
    opacity: 0.58;
  }

  body.has-site-nav .topbar {
    margin-top: 42px;
  }

  .site-nav {
    top: 10px;
    right: 10px;
    padding: 3px;
  }

  .site-nav a {
    min-width: 42px;
    height: 25px;
    font-size: 0.64rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.has-site-nav > main,
  body.is-page-leaving > main,
  .site-nav a {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}