/* One shared navigation: courses / exercises / home wordmark / playground / footprint. */
#site-nav:not(.is-classic) .nav-pill--home {
  display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr) auto minmax(0,1.2fr) minmax(0,.8fr); gap: 0;
  width: min(426px, calc(100vw - 112px)); height: 48px; padding: 4px 10px;
}
#site-nav .nav-pill--home > .top-nav-link { justify-content: center; padding-inline: 12px; font-size: 12.5px; font-weight: 500; height: 38px; }
#site-nav:not(.is-classic) .nav-pill--home .nav-logo-slot {
  width: 92px; height: 38px; --brand-word: 82px; padding: 0 5px; margin: 0;
}
#site-nav:not(.is-classic) .nav-pill--home .nav-glider { transition-duration: 240ms,240ms,160ms; }
/* Never fall back to the small mark, including before brand.js and on phones. */
#site-nav .nav-pill--home .nav-brand-mark { display: none; }
#site-nav .nav-pill--home .nav-brand-word { width: var(--brand-word) !important; opacity: 1 !important; transform: none !important; }
.home-page #site-nav { transition: opacity 280ms ease; }
.home-page #site-nav.is-scroll-muted:not(:hover):not(:focus-within) { opacity: .38; }
@media(prefers-reduced-motion:reduce) { .home-page #site-nav { transition: none; } }
@media(max-width: 767px) {
  #site-nav .nav-pill--home > .top-nav-link { padding-inline: 8px; }
}
@media(max-width: 479px) {
  #site-nav .nav-pill--home > .top-nav-link { padding-inline: 2px; font-size: 9px; }
  #site-nav:not(.is-classic) .nav-pill--home .nav-logo-slot { width: 78px; --brand-word: 70px; }
}