.site-navigation {
  --site-navigation-bg: var(--paper, var(--panel, #d4d0c8));
  --site-navigation-panel: var(--paper, var(--panel, #efefef));
  --site-navigation-text: var(--ink, var(--text, #000));
  --site-navigation-muted: #555;
  --site-navigation-border: #777;
  --site-navigation-current: #fff;
  position: relative;
  z-index: 45;
  display: flex;
  min-height: 42px;
  align-items: stretch;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--site-navigation-border);
  color: var(--site-navigation-text);
  font: 700 12px/1.2 Arial, sans-serif;
  background: var(--site-navigation-bg);
}

.site-navigation a,
.site-navigation summary {
  color: var(--site-navigation-text);
  text-decoration: none;
}

.site-navigation__brand,
.site-navigation__link,
.site-navigation__menu summary,
.site-navigation__menu-link {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;
  border: 1px solid var(--site-navigation-border);
  background: var(--site-navigation-panel);
}

.site-navigation__brand {
  flex: 0 0 auto;
  letter-spacing: 0.06em;
}

.site-navigation__links {
  display: flex;
  min-width: 0;
  flex: 1;
  gap: 4px;
}

.site-navigation__link { min-width: 0; flex: 1 1 auto; }
.site-navigation__external { margin-left: 3px; font-size: 0.85em; }

.site-navigation a:hover,
.site-navigation summary:hover,
.site-navigation a:focus-visible,
.site-navigation summary:focus-visible {
  color: var(--site-navigation-text);
  background: var(--site-navigation-current);
}

.site-navigation a:focus-visible,
.site-navigation summary:focus-visible {
  outline: 3px solid #f0f;
  outline-offset: 1px;
}

.site-navigation [aria-current="page"] {
  border-style: inset;
  background: var(--site-navigation-current);
}

.site-navigation__menu { display: none; margin-left: auto; }
.site-navigation__menu summary { min-width: 138px; cursor: pointer; list-style: none; }
.site-navigation__menu summary::-webkit-details-marker { display: none; }
.site-navigation__current { margin-left: 8px; color: var(--site-navigation-muted); font-weight: 400; }

.site-navigation__menu-panel {
  position: absolute;
  top: calc(100% + 3px);
  right: 0;
  display: grid;
  width: min(300px, calc(100vw - 28px));
  gap: 9px;
  padding: 6px;
  border: 1px solid var(--site-navigation-border);
  background: var(--site-navigation-bg);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.site-navigation__menu-group { display: grid; gap: 4px; }

.site-navigation__menu-heading {
  padding: 0 3px;
  color: var(--site-navigation-muted);
  font: 700 9px/1.2 "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-navigation__menu-link { justify-content: space-between; gap: 14px; }
.site-navigation__menu-link > span { display: inline-flex; align-items: center; }
.site-navigation__menu-link small { color: var(--site-navigation-muted); font: 9px/1.2 "Courier New", monospace; text-transform: uppercase; }

.account-shell > .site-navigation { margin-bottom: 20px; }

.site-navigation__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dark-mode .site-navigation,
:root[data-theme="dark"] .site-navigation {
  --site-navigation-bg: #111;
  --site-navigation-panel: #282a2e;
  --site-navigation-text: #c5c8c6;
  --site-navigation-muted: #969896;
  --site-navigation-border: #111;
  --site-navigation-current: #3b5263;
}

@media (max-width: 860px) {
  .site-navigation__links { display: none; }
  .site-navigation__menu { display: block; }
}

@media (max-width: 430px) {
  .site-navigation__brand { font-size: 11px; }
  .site-navigation__menu summary { min-width: 0; }
  .site-navigation__current { display: none; }
}