.site-nav { width: calc(100vw - var(--scrollbar-width, 0px)); margin-left: calc(50% - (100vw - var(--scrollbar-width, 0px)) / 2); position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 32px; background: #fffdfa; border-bottom: 2px solid #111; color: #111; font: 700 14px/1.5 Inter, "Microsoft JhengHei", system-ui, sans-serif; }
.site-nav .nav-label { font-size: 12px; font-weight: 900; letter-spacing: .12em; white-space: nowrap; }
.site-nav details { margin-left: auto; }
.site-nav summary { display: none; }
.site-nav .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.site-nav a, .site-nav [aria-current="page"] { display: inline-block; padding: 7px 14px; border: 2px solid transparent; border-radius: 999px; text-decoration: none; }
.site-nav a:hover { background: #f9dff3; border-color: #111; }
.site-nav a:focus-visible, .site-nav summary:focus-visible { outline: 3px solid #078afa; outline-offset: 2px; }
.site-nav [aria-current="page"] { background: #ffec53; border-color: #111; }
.site-nav .separator { color: #999; font-weight: 400; }
@media (max-width: 600px) {
  .site-nav { padding: 10px 16px; align-items: start; }
  .site-nav .nav-label { padding-top: 8px; }
  .site-nav summary { display: block; cursor: pointer; padding: 6px 13px; border: 2px solid #111; border-radius: 999px; background: #ffec53; list-style: none; }
  .site-nav summary::-webkit-details-marker { display: none; }
  .site-nav .nav-links { display: none; padding: 10px 0 2px; flex-direction: column; align-items: stretch; text-align: right; }
  .site-nav details[open] .nav-links { display: flex; }
  .site-nav .separator { display: none; }
}

@media (min-width: 601px) {
  .site-nav { padding-left: max(32px, calc((100vw - 1216px) / 2)); padding-right: max(32px, calc((100vw - 1216px) / 2)); }
}