/* The header: Memoir's clock and MEMOIR at the top left (the first screen's own, docked there once it scrolls away:
   site.css), and at the top right the way to the demo and the download, always in reach (the download pill only
   while the first screen's buttons are out of view). Behind it, a black fade that comes up once the page scrolls
   under it (only its opacity changes). */
.top-fade {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  height: 100px;
  background: linear-gradient(#000 64%, rgba(0, 0, 0, 0.7) 82%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.scrolled .top-fade { opacity: 1; }
.top-nav {
  position: fixed;
  top: 18px;
  right: var(--gutter);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
}
.top-nav a:not(.pill) {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 550;
  text-decoration: none;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.top-nav a:not(.pill):hover { color: var(--ink); background: rgba(255, 255, 255, 0.07); }
.top-nav a:focus-visible { outline: none; box-shadow: var(--ring); }
.top-get { transition: transform 0.4s var(--ease-out), opacity 0.3s var(--ease), background-color 0.2s var(--ease); }
.dl-near .top-get { opacity: 0; transform: translateY(-8px) scale(0.96); pointer-events: none; visibility: hidden; transition: transform 0.4s var(--ease-out), opacity 0.3s var(--ease), visibility 0s 0.4s; }
@media (max-width: 560px) {
  .top-nav a.top-demo { display: none; }
}