/* Site bar shared by every page. Self-contained (own tokens), so pages with their own stylesheet
   (the playground and the worksheet) show the same bar as pages on site.css. */
.mtb-nav {
  --n-bg: #ffffff; --n-ink: #18212b; --n-muted: #5a6876; --n-rule: #d5dce3; --n-accent: #1f6fb2;
  background: var(--n-bg); border-bottom: 1px solid var(--n-rule);
  font: 15px/1.3 "Source Sans 3", "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mtb-nav { --n-bg: #18222d; --n-ink: #e6ecf2; --n-muted: #9aa8b6; --n-rule: #2c3a48; --n-accent: #5aa9e6; }
}
:root[data-theme="dark"] .mtb-nav { --n-bg: #18222d; --n-ink: #e6ecf2; --n-muted: #9aa8b6; --n-rule: #2c3a48; --n-accent: #5aa9e6; }
.mtb-nav .mtb-in {
  max-width: 1180px; margin: 0 auto; padding-block: 8px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px;
}
.mtb-nav .mtb-brand {
  font: 700 1.15rem/1.2 "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif; letter-spacing: 0.02em;
  color: var(--n-ink); text-decoration: none; margin-right: auto; padding-block: 4px;
}
.mtb-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 16px; }
.mtb-nav li a { display: inline-block; padding-block: 6px; color: var(--n-muted); text-decoration: none; border-bottom: 2px solid transparent; }
.mtb-nav li a:hover { color: var(--n-ink); }
.mtb-nav li a[aria-current="page"] { color: var(--n-ink); font-weight: 600; border-bottom-color: var(--n-accent); }
.mtb-nav a:focus-visible { outline: 2px solid var(--n-accent); outline-offset: 2px; }
@media print { .mtb-nav { display: none; } }
@media (max-width: 480px) {
  .mtb-nav { font-size: 14px; }
  .mtb-nav .mtb-in { padding-block: 6px 2px; }
  .mtb-nav ul { gap: 0 14px; }
  .mtb-nav .mtb-brand { width: 100%; padding-block: 2px 0; }
}