/* Lab header: fixed, transparent over the first screen, glass once the page scrolls (site.js adds .scrolled) */
.mf-nav { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.mf-nav.scrolled, .mf-nav.open { background: var(--nav-bg); backdrop-filter: blur(12px) saturate(1.4); border-color: var(--line); }
.mf-nav .wrap { display: flex; align-items: center; height: 60px; gap: 1rem; }
.mf-nav nav { margin-left: auto; }
.lang-btn { flex: none; margin-left: .4rem; height: 36px; padding: 0 .8rem; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; font: 500 .8rem/1 var(--font-body); color: var(--text); background: color-mix(in srgb, var(--surface) 70%, transparent); transition: border-color .15s, background .15s; }
.lang-btn:hover { border-color: var(--line-2); background: var(--surface-2); color: var(--text); }
.style-btn { flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; margin-left: .4rem; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; }
.style-btn:hover { border-color: var(--line-2); background: var(--surface-2); }
:root[data-theme="bright"] .style-btn .sun, :root:not([data-theme="bright"]) .style-btn .moon { display: none; }
.mf-nav .brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--text); }
.mf-nav .brand svg { flex: none; }
.mf-nav .b0 { stroke: var(--dim); } .mf-nav .b1 { fill: var(--phys); } .mf-nav .b2 { fill: var(--neuro); } .mf-nav .b3 { fill: var(--ai); } .mf-nav .b4 { fill: var(--text); }
.mf-nav .brand b { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.25rem; letter-spacing: .005em; }
.mf-nav ul { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; font-size: .88rem; color: var(--muted); }
.mf-nav ul a:not(.btn):hover, .mf-nav ul a[aria-current] { color: var(--text); }
.mf-nav ul a[aria-current]:not(.btn) { box-shadow: 0 1px 0 var(--accent); }
.mf-nav .cta .btn { padding: .42rem .9rem; font-size: .84rem; }
.menu-btn { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface) 70%, transparent); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.menu-btn span { width: 16px; height: 1.5px; background: var(--text); transition: transform .2s; }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
@media (max-width: 760px) {
  .menu-btn { display: inline-flex; }
  .lang-btn { margin-left: auto; }
  .lang-btn + .style-btn { margin-left: .4rem; }
  .style-btn { margin-left: auto; }
  .mf-nav nav { display: none; position: absolute; top: 60px; left: 0; right: 0; background: var(--nav-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
  .mf-nav nav.open { display: block; }
  .mf-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: .4rem 1.5rem 1rem; font-size: 1rem; }
  .mf-nav ul li a:not(.btn) { display: block; padding: .7rem 0; border-top: 1px solid var(--line); }
  .mf-nav ul a[aria-current]:not(.btn) { box-shadow: none; color: var(--accent-ink); }
  .mf-nav .cta { padding-top: .8rem; }
}