/* the shared top bar for every page of the site: brand left, the three phases right */
nav.phase-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
nav.phase-nav a { position: relative; display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 14px; border-radius: 999px;
  font: 400 13px/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(170, 174, 188); text-decoration: none;
  transition: color .2s cubic-bezier(.2,.7,.2,1), background .2s cubic-bezier(.2,.7,.2,1); }
nav.phase-nav a b { font: 900 15px/1 "Doto", ui-monospace, monospace; letter-spacing: 0.04em; color: rgb(112, 118, 134); transition: color .2s; }
nav.phase-nav a:hover { color: rgb(236, 236, 240); background: rgba(255, 255, 255, 0.05); }
nav.phase-nav a:hover b { color: rgb(170, 174, 188); }
nav.phase-nav a[aria-current="page"] { color: rgb(236, 236, 240); background: rgba(60, 255, 230, 0.08); box-shadow: 0 0 0 1px rgba(60, 255, 230, 0.35) inset, 0 0 18px -4px rgba(60, 255, 230, 0.45); }
nav.phase-nav a[aria-current="page"] b { color: rgb(60, 255, 230); text-shadow: 0 0 8px rgba(60, 255, 230, 0.7); }
@media (max-width: 680px) { nav.phase-nav { gap: 2px; } nav.phase-nav a { padding: 8px 8px; font-size: 11px; letter-spacing: 0.06em; } nav.phase-nav a span { display: none; } nav.phase-nav a b { font-size: 16px; } }

/* the cube: transparent webm where supported; the mp4 fallback's black frame is faded out at the edges */
header .mark { mix-blend-mode: normal !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); }

/* the repo link at the end of the phase nav */
nav.phase-nav a.gh { align-items: center; margin-left: 10px; }
nav.phase-nav a.gh svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
@media (max-width: 680px) { nav.phase-nav a.gh { margin-left: 2px; } }