.github-header {
  position: fixed;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 100vw;
  height: var(--org-header-height);
  background-color: hsla(216, 28%, 7%, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.github-header .width-constraint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
}
.github-header .left-links {
  display: flex;
  align-items: center;
  gap: 41px;
}
.github-header .left-links .header-logo-link-1 {
  position: relative;
  width: 36px;
  height: 36px;
  transform: translate(-2px, -2px);
}
.github-header .left-links .header-logo-link-1 svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
}
.github-header .left-links .header-logo-link-1 .left-angle-arrow {
  transform: translate(-140%, -50%);
  width: 24px;
  height: 24px;
  opacity: 0;
  transition: var(--smooth-transition);
}
.github-header .left-links .header-logo-link-1:hover .left-angle-arrow, .github-header .left-links .header-logo-link-1:focus .left-angle-arrow {
  opacity: 1;
  transform: translate(-164%, -50%);
}
.github-header .left-links .header-logo-link-1:focus {
  outline: 2px solid var(--focus-color) !important;
  border-radius: 3px;
}
.github-header .left-links .link-divider {
  color: var(--gray6);
  font-size: 32px;
  font-weight: var(--weight-semibold);
  transform: translate(-2px, 1px);
}
.github-header .left-links .header-logo-link-2 {
  font-family: var(--org-font-family-heading);
  font-weight: var(--weight-semibold);
  color: var(--white);
  line-height: 130%;
  letter-spacing: -0.24px;
  font-size: var(--header-4);
  letter-spacing: -0.04px;
}
.github-header .left-links .header-logo-link-2:focus {
  outline: 2px solid var(--focus-color) !important;
  border-radius: 3px;
}
.github-header .left-links .headerLinksPrimary {
  display: flex;
  gap: 48px;
  margin-bottom: -2px;
}
.github-header .left-links .headerLinksPrimary .nav-link {
  position: relative;
  font-family: var(--org-font-family);
  color: var(--white);
  font-weight: var(--weight-semibold);
}
.github-header .left-links .headerLinksPrimary .nav-link::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0;
  height: 2px;
  background-color: var(--gray4);
  transition: var(--smooth-transition);
}
.github-header .left-links .headerLinksPrimary .nav-link:hover::after, .github-header .left-links .headerLinksPrimary .nav-link:focus::after {
  width: 65%;
}
.github-header .left-links .headerLinksPrimary .nav-link:focus {
  outline: 2px solid var(--focus-color) !important;
  border-radius: 3px;
}
.github-header .logo-links {
  display: flex;
  align-items: center;
  gap: 14px;
}
.github-header .right-links {
  display: flex;
  align-items: center;
  gap: 16px;
}
.github-header .right-links .gh-button {
  /* Styles below are duplicated for branding profile preview*/
  border-radius: 6px;
  padding: 14px 23px;
  gap: 8px;
  display: flex;
  align-items: center;
  background-color: var(--white);
}
.github-header .right-links .gh-button span {
  color: var(--gray1);
  font-weight: var(--weight-semibold);
}
.github-header .right-links .gh-button svg path {
  transition: var(--smooth-transition);
  fill: var(--gray1);
}
.github-header .right-links .gh-button:hover, .github-header .right-links .gh-button:focus {
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px hsla(0, 0%, 100%, 0.02), 0 42px 33px hsla(0, 0%, 100%, 0.024), 0 22px 18px hsla(0, 0%, 100%, 0.028), 0 12px 10px hsla(0, 0%, 100%, 0.034), 0 7px 5px hsla(0, 0%, 100%, 0.04), 0 3px 2px hsla(0, 0%, 100%, 0.07);
}
.github-header .right-links .gh-button:focus {
  outline: 2px solid var(--focus-color) !important;
}
.github-header .right-links .gh-button-outline {
  background-color: transparent;
  border: 1px solid var(--gray4);
}
.github-header .right-links .gh-button-outline span {
  color: var(--white);
}
.github-header .right-links .gh-button-outline span::before {
  background: var(--white);
}
.github-header .right-links .gh-button-outline svg path {
  fill: var(--white);
}
.github-header .right-links .gh-button-outline:hover, .github-header .right-links .gh-button-outline:focus {
  border: 1px solid var(--white);
  box-shadow: 0 0 0 1px var(--white) inset;
  -webkit-box-shadow: 0 0 0 1px var(--white) inset;
  -moz-box-shadow: 0 0 0 1px var(--white) inset;
}
.github-header .right-links .gh-button-outline:focus {
  outline: 2px solid var(--focus-color) !important;
}
.github-header .burger,
.github-header .mobile-nav {
  display: none;
}

.reg-sub-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 264px;
  padding-top: 180px;
  gap: 40px;
  background-color: transparent;
}
.reg-sub-header .pill {
  position: relative;
}
.reg-sub-header .pill p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--org-font-family-heading);
  font-weight: var(--weight-semibold);
  color: var(--white);
  line-height: 20px;
  letter-spacing: 0px;
  font-size: var(--org-base-font-size-reg);
  font-size: var(--org-base-font-size);
}
.reg-sub-header .pill svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform: translate(-50%, -50%) scale(1.1);
}
.reg-sub-header h1,
.reg-sub-header .gh-reg-title {
  font-family: var(--org-font-family-heading);
  font-weight: var(--weight-semibold);
  color: var(--white);
  line-height: 56px;
  letter-spacing: -0.48px;
  font-size: var(--header-1);
  text-align: center;
}

@media (max-width: 1024px) {
  .github-header .left-links > .nav-link,
  .github-header .left-links .headerLinksPrimary {
    display: none;
  }
  .github-header .right-links {
    display: none;
  }
  .github-header .burger {
    display: block;
    position: relative;
    width: 36px;
    height: 36px;
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 8px;
    transform: rotate(180deg);
  }
  .github-header .burger-line {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 2px;
    border-radius: 4px;
    background: var(--white);
    transition: transform var(--smooth-transition), width var(--smooth-transition);
  }
  .github-header .burger-line:first-of-type {
    transform: translate(-50%, calc(-50% - 6px));
  }
  .github-header .burger-line:last-of-type {
    transform: translate(-50%, calc(-50% + 6px));
  }
  .github-header .burger.active .burger-line:first-of-type {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .github-header .burger.active .burger-line:nth-of-type(2) {
    width: 0;
  }
  .github-header .burger.active .burger-line:last-of-type {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .github-header .burger:focus {
    outline: 2px solid var(--focus-color) !important;
  }
  .github-header .mobile-nav {
    position: absolute;
    top: var(--org-header-height);
    opacity: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    width: 100vw;
    height: calc(100vh - var(--org-header-height));
    height: calc(100dvh - var(--org-header-height));
    padding: 24px;
    background-color: var(--gray2);
  }
  .github-header .mobile-nav .headerLinksPrimary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    transform: translate(0, -24px);
    width: 100%;
  }
  .github-header .mobile-nav .headerLinksPrimary li {
    opacity: 0;
    transform: translate(5%, 0);
    width: 100%;
  }
  .github-header .mobile-nav .headerLinksPrimary .nav-link {
    color: var(--white);
    font-size: 20px;
    width: 100%;
    display: block;
    padding: 12px 0;
  }
  .github-header .mobile-nav .headerLinksPrimary .nav-link:hover {
    text-decoration: underline;
  }
  .github-header .mobile-nav .right-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    transform: scale(0.5);
    opacity: 0;
  }
  .github-header .mobile-nav .right-links li {
    width: 100%;
  }
  .github-header .mobile-nav .gh-button {
    width: 100%;
    justify-content: center;
  }
  .github-header .mobile-nav.active {
    opacity: 1;
    pointer-events: all;
    transition: opacity var(--smooth-transition);
  }
  .github-header .mobile-nav.active .headerLinksPrimary {
    transform: translate(0, 0);
    transition: transform var(--smooth-transition) 0.06s;
  }
  .github-header .mobile-nav.active .headerLinksPrimary li {
    opacity: 1;
    transform: translate(0, 0);
  }
  .github-header .mobile-nav.active .headerLinksPrimary li:nth-of-type(1) {
    transition: var(--smooth-transition) 0.08s;
  }
  .github-header .mobile-nav.active .headerLinksPrimary li:nth-of-type(2) {
    transition: var(--smooth-transition) 0.16s;
  }
  .github-header .mobile-nav.active .headerLinksPrimary li:nth-of-type(3) {
    transition: var(--smooth-transition) 0.24s;
  }
  .github-header .mobile-nav.active .headerLinksPrimary li:nth-of-type(4) {
    transition: var(--smooth-transition) 0.32s;
  }
  .github-header .mobile-nav.active .right-links {
    transform: scale(1);
    opacity: 1;
    transition: 0.4s ease 0.8s, width 0s;
  }
}
@media (max-width: 390px) {
  .github-header .left-links .header-logo-link-2 {
    font-size: var(--org-base-font-size);
  }
}
