.site-header {
  position:relative;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
  gap:18px;
  width:100%;
  min-height:76px;
  height:auto;
  padding:12px max(22px,5vw);
  border-bottom:1px solid rgba(255,255,255,.1);
  background:rgba(13,9,17,.94);
  backdrop-filter:blur(16px);
}
.site-header .logo {
  flex:none;
  color:#fff;
  font:900 27px/1 Arial,Helvetica,sans-serif;
  letter-spacing:-1px;
  text-decoration:none;
}
.site-header .logo span { color:#d557ff; }
.site-header .nav {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:nowrap;
  gap:4px;
  margin:0 0 0 auto;
  min-width:0;
}
.site-header .nav a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:9px 13px;
  border-radius:10px;
  color:#cbbfd0;
  font:700 14px/1.2 Arial,Helvetica,sans-serif;
  white-space:nowrap;
  text-decoration:none;
}
.site-header .nav a:hover,.site-header .nav a[aria-current="page"] { color:#fff; background:rgba(255,255,255,.1); }
.site-header .nav a:focus-visible,.site-header .logo:focus-visible { outline:3px solid #e893ff; outline-offset:3px; }
.site-header #user-button { display:flex; align-items:center; flex:none; min-width:32px; min-height:32px; }
.site-header .header-right { display:contents; }
.site-header [hidden] { display:none!important; }
@media(max-width:700px) {
  .site-header { display:grid; grid-template-columns:1fr auto; grid-template-rows:45px 48px; align-items:center; gap:0 10px; min-height:0; padding:7px 15px 0; }
  .site-header .logo { grid-column:1; grid-row:1; font-size:25px; }
  .site-header #user-button,.site-header .header-buttons { grid-column:2; grid-row:1; justify-self:end; margin:0; }
  .site-header .nav { grid-column:1/-1; grid-row:2; justify-content:space-between; width:100%; padding:0 0 3px; margin:0; gap:1px; overflow-x:auto; scrollbar-width:thin; }
  .site-header .nav a { flex:none; min-height:43px; padding:8px 9px; font-size:13px; }
  .site-header .header-right { display:contents; }
  .site-header:has(.nav[hidden]) { grid-template-rows:45px; padding-bottom:7px; }
  .site-header:has(.nav[hidden]) .header-buttons > button { display:none; }
}
@media(max-width:360px) {
  .site-header .nav a { padding-inline:6px; font-size:12px; }
}