:root { --activity-height: 2.625rem; scroll-padding-top: var(--activity-height); }
.activity-banner {
  position: sticky;
  top: 0;
  z-index: 9;
  box-sizing: border-box;
  height: var(--activity-height);
  border-block: 1px solid #29403e;
  background: #101e22;
  color: #d9ece4;
  font: 500 .8125rem/1.2 'DM Sans', system-ui, sans-serif;
}
.activity-banner-inner {
  box-sizing: border-box;
  max-width: 78rem;
  height: 100%;
  margin: auto;
  padding: 0 clamp(.65rem, 3vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
}
.activity-banner-title { display: flex; gap: .55rem; align-items: center; white-space: nowrap; font-weight: 650; }
.activity-banner-title::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: #8de3c5; }
.activity-banner dl {
  border: 0; border-radius: 0; margin: 0; padding: 0; background: transparent;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.75rem, 2vw, 2rem);
}
.activity-banner dl > div { display: flex; align-items: baseline; gap: .45rem; }
.activity-banner dt { font: inherit; color: #c0cfcf; white-space: nowrap; }
.activity-banner dd { font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; margin: 0; color: #b4f0d5; }
.activity-banner-date { margin-left: auto; font-size: .73rem; color: #a9bfbd; white-space: nowrap; }
@media (max-width: 47rem) {
  .activity-banner-date { display: none; }
  .activity-banner-inner { justify-content: space-between; }
}
@media (max-width: 34rem) {
  :root { --activity-height: 3rem; }
  .activity-banner-title { display: none; }
  .activity-banner dl { width: 100%; gap: 0; }
  .activity-banner dl > div { flex-direction: column-reverse; align-items: center; gap: .12rem; min-width: 0; }
  .activity-banner dl > div + div { border-left: 1px solid #314846; }
  .activity-banner dt { font-size: .69rem; }
}
@media print { .activity-banner { display: none; } }