:root{--nav-ink:#2b2a28;--nav-muted:#5c554c;--nav-line:#e3ded7;--nav-surface:#f1efea;--nav-indigo:#006e96}
.topnav,.topnav *{box-sizing:border-box}
.topnav a:focus-visible,.home a:focus-visible{outline:3px solid var(--nav-indigo);outline-offset:2px}
.topnav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding:4px 24px;border-bottom:1px solid var(--nav-line);background:#fff}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--nav-ink);font-size:16px;font-weight:800;text-decoration:none}
.brand small{font-size:14px;font-weight:600;color:var(--nav-muted)}
.tabs{display:flex;gap:4px;padding:4px;border-radius:10px;background:var(--nav-surface)}
.tabs a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:8px;box-sizing:border-box;color:var(--nav-ink);font-size:15px;font-weight:600;line-height:1.15;text-align:center;text-decoration:none;transition:background-color .2s ease}
.tabs a:hover{background:#e5e1d9}
.tabs a[aria-current=page]{background:var(--nav-indigo);color:#fff;font-weight:700}

.zoom-hint{display:none;align-items:center;gap:8px;margin:0;color:var(--nav-muted);font-size:14px;line-height:1.3}
.zoom-hint svg{flex:none}
.s-zoom{padding:8px 16px}
@media (max-width:599px){
  .topnav{padding:8px 16px}
  .tabs{width:100%}
  .tabs a{flex:1 1 0;padding:4px 8px}
  .zoom-hint{display:flex}
}