/* <mk-navbar>: the bar along the top of every page. The site's icon and name,
   its links, and the one thing to do. Dark glass by default, for a page that
   opens dark; `is-light` (variant="light", or a page's script as the page
   turns light under it) makes it light. Each site sets its look with the
   --mk-* custom properties; none of them is needed. */

.mk-nav, .mk-nav *{box-sizing:border-box}
.mk-nav{
  position:var(--mk-nav-position, sticky); top:0; left:0; right:0; z-index:50;
  height:var(--mk-nav-h, 48px);
  color:var(--mk-nav-fg, #f5f5f7);
  background:var(--mk-nav-bg, rgba(8,8,11,.66));
  -webkit-backdrop-filter:saturate(var(--mk-nav-saturate, 150%)) blur(20px);
  backdrop-filter:saturate(var(--mk-nav-saturate, 150%)) blur(20px);
  border-bottom:1px solid var(--mk-nav-line, rgba(255,255,255,.08));
  font-family:var(--mk-font, inherit);
  transition:background .4s var(--mk-ease, ease), border-color .4s var(--mk-ease, ease), color .4s var(--mk-ease, ease);
}
.mk-nav.is-light{
  color:var(--mk-nav-light-fg, #1d1d1f);
  background:var(--mk-nav-light-bg, rgba(250,250,252,.74));
  border-bottom-color:var(--mk-nav-light-line, rgba(0,0,0,.08));
}
.mk-nav-inner{
  max-width:var(--mk-maxw, 1120px); height:100%; margin:0 auto;
  padding:0 var(--mk-pad, max(22px, env(safe-area-inset-left)));
  display:flex; align-items:center; gap:28px;
  font-size:13px; letter-spacing:var(--mk-nav-tracking, -.005em);
}

/* Two classes deep, so a page's own `a` rules (a policy's underlined links)
   never reach in. */
.mk-nav .mk-nav-brand{
  display:flex; align-items:center; gap:8px; margin-right:auto;
  color:inherit; text-decoration:none;
  font-weight:650; font-size:15px; letter-spacing:-.01em;
}
.mk-nav .mk-nav-mark{width:22px; height:22px; display:block; border-radius:var(--mk-nav-mark-r, 0)}

.mk-nav .mk-nav-links{display:flex; gap:26px; opacity:.82}
.mk-nav.is-light .mk-nav-links{opacity:.9}
.mk-nav .mk-nav-links a{color:inherit; text-decoration:none; transition:opacity .2s}
.mk-nav .mk-nav-links a:hover{opacity:.6}
.mk-nav .mk-nav-links a[aria-current="page"]{opacity:1; font-weight:650}

/* The one thing to do, in the site's colour. With --mk-lip it is the apps'
   toy button, a lip under it that it sinks onto; without, a flat pill. */
.mk-nav .mk-nav-cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:var(--mk-cta-pad, 7px 15px); border-radius:999px;
  font-size:13px; font-weight:var(--mk-cta-weight, 600); letter-spacing:var(--mk-cta-tracking, -.01em);
  color:var(--mk-cta-fg, #fff); text-decoration:none;
  background:var(--mk-accent, #2f5fe0);
  box-shadow:0 var(--mk-lip, 0px) 0 var(--mk-accent-deep, #2049c2);
  transition:transform .14s var(--mk-ease, ease), box-shadow .14s var(--mk-ease, ease), background .25s var(--mk-ease, ease);
}
.mk-nav .mk-nav-cta:hover{
  background:var(--mk-cta-hover, var(--mk-accent-deep, #2049c2));
  transform:translateY(calc(var(--mk-lip, 0px) / 2));
  box-shadow:0 calc(var(--mk-lip, 0px) / 2) 0 var(--mk-accent-deep, #2049c2);
}
.mk-nav .mk-nav-cta:active{
  transform:translateY(var(--mk-lip, 0px)) scale(var(--mk-cta-press, .97));
  box-shadow:0 0 0 var(--mk-accent-deep, #2049c2);
}

@media (max-width:900px){
  .mk-nav .mk-nav-links{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mk-nav, .mk-nav .mk-nav-cta{transition:none}
}