/* A shallow glass surface; only the small navigation area blurs the backdrop. */
html body .topbar[data-navigation-ready][data-surface] {
  --glass-fill: rgba(250, 253, 255, .44);
  --glass-sheen: linear-gradient(115deg, #ffffff80, #ffffff12 42%, #ffffff08 65%, #ffffff50);
  --glass-edge: rgba(255, 255, 255, .78);
  --glass-shadow: 0 4px 18px #243a4910, inset 0 1px 0 #ffffffd9, inset 0 -1px 0 #8cabb024;
  height: 50px;
  min-height: 50px;
  margin-top: 8px;
  padding: 4px 16px;
  gap: 24px;
  border: 1px solid var(--glass-edge);
  border-radius: 14px;
  background: var(--glass-sheen), var(--glass-fill);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  backdrop-filter: blur(18px) saturate(155%);
  transition: background-color .24s, border-color .24s, box-shadow .24s;
}
html body .topbar[data-navigation-ready][data-surface=dark] {
  --glass-fill: rgba(24, 34, 35, .68);
  --glass-sheen: linear-gradient(115deg, #d2e2de18, #d2e2de03 42%, #d2e2de00 65%, #d2e2de0d);
  --glass-edge: rgba(197, 219, 207, .26);
  --glass-shadow: 0 4px 18px #00000020, inset 0 1px 0 #e6f2ea36, inset 0 -1px 0 #09121140;
}
html body .topbar[data-navigation-ready] .brand {
  font-size: 18px;
  line-height: 1.15;
  gap: 9px;
  letter-spacing: .045em;
}
html body .topbar[data-navigation-ready] .brand small {
  font-size: 8px;
  line-height: 1.4;
  margin-top: 3px;
}
html body .topbar[data-navigation-ready] .brand-mark.brand-logo {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
}
html body .topbar[data-navigation-ready] .topnav a {
  padding: 7px 11px;
  border-radius: 8px;
  transition: background-color .2s, color .2s, box-shadow .2s;
}
html body .topbar[data-navigation-ready] .topnav a::after { display: none; }
html body .topbar[data-navigation-ready][data-surface=light] .topnav a:is(:hover, :focus-visible, .active),
html body .topbar[data-navigation-ready][data-surface=light] .search-trigger:hover {
  color: #263d47;
  background: #ffffff94;
  box-shadow: inset 0 1px 0 #ffffffcc, 0 1px 5px #263d4709;
}
html body .topbar[data-navigation-ready][data-surface=dark] .topnav a:is(:hover, :focus-visible, .active),
html body .topbar[data-navigation-ready][data-surface=dark] .search-trigger:hover {
  color: #f2f2e7;
  background: #dcebe51a;
  box-shadow: inset 0 1px 0 #e5f2ea26;
}
html body .topbar[data-navigation-ready] .search-trigger { border-radius: 8px; }
@media (max-width: 760px) {
  html body .topbar[data-navigation-ready][data-surface] { padding: 4px 10px; gap: 8px; }
  html body .topbar[data-navigation-ready] .brand { font-size: 16px; gap: 7px; }
  html body .topbar[data-navigation-ready] .brand small { font-size: 7px; margin-top: 2px; }
  html body .topbar[data-navigation-ready] .nav-toggle {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border-color: var(--glass-edge);
    background: #ffffff0d;
  }
  html body .topbar[data-navigation-ready][data-surface] .topnav {
    top: calc(100% + 8px);
    background: var(--glass-sheen), var(--glass-fill);
    border-color: var(--glass-edge);
    border-radius: 12px;
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: blur(24px) saturate(155%);
    backdrop-filter: blur(24px) saturate(155%);
    padding: 8px;
  }
  html body .topbar[data-nav-open=true] .topnav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html body .topbar[data-navigation-ready] .topnav a { padding: 12px 4px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body .topbar[data-navigation-ready][data-surface=light] { --glass-fill: #f7fafcf5; }
  html body .topbar[data-navigation-ready][data-surface=dark] { --glass-fill: #202a2bf5; }
}
@media (prefers-reduced-motion: reduce) {
  html body .topbar[data-navigation-ready], html body .topbar[data-navigation-ready] .topnav a { transition: none; }
}