/* "‹ HOME › MACHINE LEARNING_": a section's path in the top-left corner, where the homepage's wind lands.
   Shared by the homepage (an invisible copy it fades in and out around the animation) and the section pages,
   so the word sits in exactly the same spot on both and the page switch doesn't show. */
#corner-trail {
  position: fixed; top: 26px; left: 24px; z-index: 30; margin: 0; white-space: nowrap;
  font: 700 13px/1 ui-monospace, "IBM Plex Mono", Menlo, monospace;
  letter-spacing: .25em; text-transform: uppercase; color: rgba(233, 228, 215, .85);
}
#corner-trail a { color: inherit; text-decoration: none; transition: color .2s; outline: none; }
#corner-trail a:hover, #corner-trail a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
#corner-trail .sep { color: rgba(233, 228, 215, .45); }
#corner-trail .here, #corner-trail a.here:hover, #corner-trail a.here:focus-visible { color: var(--topic); }
#corner-trail .arrow {
  display: inline-block; font-size: 1.3em; line-height: 0; margin-right: .3em; color: var(--topic);
  animation: trail-nudge 2.4s ease-in-out infinite; transition: transform .2s;
}
#corner-trail .back:hover .arrow, #corner-trail .back:focus-visible .arrow { animation: none; transform: translateX(-5px); }
#corner-trail .cursor { animation: trail-blink 1.1s steps(2) infinite; }
@keyframes trail-nudge { 0%, 55%, 75%, 100% { transform: translateX(0); } 65% { transform: translateX(-5px); } 85% { transform: translateX(-3px); } }
@keyframes trail-blink { 50% { opacity: .2; } }
@media (max-width: 520px) { #corner-trail { top: 20px; left: 16px; font-size: 11px; letter-spacing: .18em; } }
@media (prefers-reduced-motion: reduce) { #corner-trail .arrow, #corner-trail .cursor { animation: none; } }

/* the homepage's copy: invisible until the wind needs it */
#corner-trail.ghost { opacity: 0; pointer-events: none; transition: opacity .35s; }
#corner-trail.ghost.on { opacity: 1; }