:root{
  --ink: #242934;
  --muted: #69717f;
  --accent: #bb5435;
  --line: #e1e5ed;
  --glass: rgba(255, 255, 255, 0.64);
  font-family: "Onest", sans-serif;
  color: var(--ink);
  background: #f5f6f9;
  font-synthesis: none;
  color-scheme: light;
  scroll-behavior: smooth;
}
.navigation{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  width: min(100%, 1050px);
  margin: auto;
  padding: 10px 12px 10px 22px;
  background: var(--glass);
  border: 1px solid #ffffff;
  border-radius: 22px;
  box-shadow:
    inset 0 0 0 1px #e2e7f180,
    0 8px 30px #334c7110;
  backdrop-filter: blur(22px) saturate(1.35);
}
.brand{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -1px;
  white-space: nowrap;
}
.brand-c{
  font-family: "Unbounded", sans-serif;
  font-size: 24px;
  letter-spacing: -1.8px;
  line-height: 1;
}
.navigation nav{
  display: flex;
  gap: 27px;
  font-size: 13px;
  color: #4a515e;
}
.navigation a:hover{
  color: var(--accent);
}
.nav-cta{
  padding: 13px 19px;
  border: 1px solid #d8dce5;
  border-radius: 13px;
  font-size: 12px;
  background: linear-gradient(#fff9, #e7ebf25e);
  box-shadow: inset 0 1px #fff;
  white-space: nowrap;
}
.nav-cta span{
  margin-left: 8px;
}
@media (max-width: 1100px){.navigation nav{
    gap: 18px;
    font-size: 12px;
  }
.navigation{
    gap: 22px;
  }
.brand{
    font-size: 20px;
  }
}
@media (max-width: 767px){.navigation{
    padding: 11px 12px 11px 15px;
    border-radius: 18px;
    gap: 12px;
  }
.navigation nav{
    display: none;
  }
.brand{
    font-size: 18px;
    gap: 6px;
  }
.brand-c{
    font-size: 21px;
  }
.nav-cta{
    font-size: 10px;
    padding: 10px 11px;
    border-radius: 11px;
  }
.nav-cta span{
    display: none;
  }
}
@media (prefers-reduced-motion: reduce){:root{
    scroll-behavior: auto;
  }
}
@media (prefers-reduced-transparency: reduce){.navigation{
    background: #f6f8fc;
    backdrop-filter: none;
  }
}

:root{
  --surface-sheet: #fdfdfe;
  --surface-inset: #f0f2f6;
  --surface-edge: rgb(255 255 255 / 0.9);
  --glass-fill: rgb(250 251 255 / 0.5);
  --glass-rim:
    inset 0 1px 1px rgb(255 255 255 / 0.96),
    inset 1px 0 1px rgb(255 255 255 / 0.56),
    inset -1px -1px 1px rgb(120 132 155 / 0.16);
  --glass-shadow:
    0 2px 5px rgb(39 55 85 / 0.06), 0 12px 24px rgb(39 55 85 / 0.1);
  --spring: cubic-bezier(0.22, 1.12, 0.3, 1);
}
.navigation{
  background: var(--glass-fill);
  border: 1px solid rgb(255 255 255 / 0.85);
  border-radius: 999px;
  box-shadow: var(--glass-rim), var(--glass-shadow);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  padding: 10px 13px 10px 26px;
}
.navigation::after{
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border-top: 1px solid rgb(255 255 255 / 0.8);
  border-bottom: 1px solid rgb(255 255 255 / 0.35);
}
.nav-cta{
  background: rgb(74 87 110 / 0.055);
  border-color: transparent;
  border-radius: 999px;
  box-shadow: none;
  padding-inline: 20px;
  transition: background 0.2s;
}
.nav-cta:hover{
  background: rgb(74 87 110 / 0.1);
}
@media (max-width: 767px){.navigation{
    padding: 10px 9px 10px 16px;
  }
.nav-cta{
    padding: 11px 13px;
  }
}
@media (prefers-reduced-transparency: reduce){.navigation{
    background: #edf1f7;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
@media (prefers-contrast: more){:root{
    --muted: #3b475a;
    --line: #8996a9;
  }
.navigation{
    background: #fff;
    border-color: #788599;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
:root{
  --ink: #202d42;
  --muted: #485970;
  background: #e6edf6;
}
.glass-surface:not(.selection-lens){
  position: relative;
}
.glass-surface{
  background: linear-gradient(
    132deg,
    rgb(255 255 255 / 0.37),
    rgb(255 255 255 / 0.09) 42%,
    rgb(243 249 255 / 0.2)
  );
  border: 1px solid rgb(255 255 255 / 0.68);
  box-shadow:
    inset 0 2px 3px rgb(255 255 255 / 0.91),
    inset 2px 0 3px rgb(255 255 255 / 0.58),
    inset -1px -2px 3px rgb(70 93 125 / 0.2),
    inset 0 -7px 16px rgb(255 255 255 / 0.24),
    0 4px 8px rgb(48 72 109 / 0.045),
    0 23px 42px -13px rgb(44 66 103 / 0.21);
  backdrop-filter: blur(18px) saturate(1.38);
  -webkit-backdrop-filter: blur(18px) saturate(1.38);
}
.glass-surface::before{
  content: "";
  position: absolute;
  z-index: 3;
  inset: 2px;
  padding: 1px;
  border-radius: inherit;
  corner-shape: inherit;
  pointer-events: none;
  background: linear-gradient(
    132deg,
    #fff 4%,
    rgb(255 255 255 / 0.12) 29%,
    rgb(110 140 177 / 0.28) 46%,
    rgb(255 255 255 / 0.93) 70%,
    rgb(255 255 255 / 0.15) 86%,
    #fff
  );
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
}
.glass-surface::after{
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 0;
  border-radius: inherit;
  corner-shape: inherit;
  pointer-events: none;
  background: radial-gradient(
    ellipse 65% 100% at var(--light-x, 25%) var(--light-y, 0%),
    rgb(255 255 255 / 0.14),
    transparent 65%
  );
}
.navigation.glass-surface{
  background: linear-gradient(
    135deg,
    rgb(255 255 255 / 0.35),
    rgb(222 234 248 / 0.13)
  );
}
.navigation.glass-surface{
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
}
.nav-cta.glass-surface{
  box-shadow:
    inset 0 1px 2px #fff,
    inset 0 -1px 2px rgb(90 110 140 / 0.18),
    0 3px 8px rgb(55 75 104 / 0.07);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more){.glass-surface.glass-surface{
    background: #f4f7fc;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: #74869d;
  }
.glass-surface::after{
    display: none;
  }
}

:root{
  --type-body: 18px;
  --type-ui: 16px;
  --type-meta: 14px;
  --type-fine: 13px;
}
.navigation nav{
  font-size: 15px;
  gap: 24px;
}
.nav-cta{
  font-size: var(--type-meta);
}
@media (min-width: 768px) and (max-width: 1100px){.navigation{
    gap: 18px;
  }
.navigation nav{
    font-size: 14px;
    gap: 16px;
  }
.navigation .nav-cta{
    padding-inline: 14px;
  }
}
@media (max-width: 767px){:root{
    --type-body: 16px;
    --type-ui: 15px;
    --type-meta: 14px;
    --type-fine: 12px;
  }
.navigation{
    gap: 9px;
    padding-left: 13px;
  }
.nav-cta{
    font-size: 13px;
    padding-inline: 11px;
  }
}
@media (max-width: 359px){.navigation .brand{
    font-size: 16px;
  }
.navigation .brand-c{
    font-size: 19px;
  }
.nav-cta{
    padding-inline: 9px;
  }
}
@media (max-width: 960px){.navigation nav{
    display: none;
  }
}

.runs-page header.navigation{width:min(1050px,calc(100% - 32px));margin:26px auto 0}.runs-page header .brand{font-family:Onest,sans-serif}.runs-page header a{text-decoration:none}