.section-context[hidden] { display: none; }
.section-context {
  position: fixed;
  top: 82px;
  right: 0;
  left: 0;
  z-index: 18;
  min-height: 39px;
  padding: 0 var(--page-end-gutter) 0 var(--page-gutter);
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  background: rgba(39, 39, 39, .72);
  color: #f2f2f2;
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
  animation: section-context-arrive .2s ease-out both;
}
.section-context-content {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.7vw, 40px);
  min-height: 39px;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  font: 400 10px/1.3 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .095em;
  text-transform: uppercase;
}
.section-context-content::-webkit-scrollbar { display: none; }
.section-context-item { display: inline-flex; align-items: baseline; flex: none; gap: 8px; }
.section-context-item strong { color: rgba(255,255,255,.53); font: inherit; }
.section-context-item span { color: #f2f2f2; }
.section-context.is-explorer .section-context-content { mask-image: linear-gradient(to right, #000 0%, #000 95%, transparent 100%); }
@keyframes section-context-arrive { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 980px) { .section-context { top: 68px; } }
@media (max-width: 600px) {
  .section-context, .section-context-content { min-height: 36px; }
  .section-context-content { gap: 20px; font-size: 9px; letter-spacing: .075em; }
  .section-context.is-explorer .section-context-content { mask-image: linear-gradient(to right, #000 0%, #000 91%, transparent 100%); }
}
@media (prefers-reduced-motion: reduce) { .section-context { animation: none; } }