.hub-variant .central-system rect {
  fill:#142737;
  stroke:#8aacbf;
  stroke-width:4;
}
.hub-system-overline { fill:#a9c3d3; font-size:15px; letter-spacing:2px; }
.hub-system-title { fill:#e4f2fc; font-size:39px; font-weight:750; }
.hub-system-subtitle { fill:#9cb5c7; font-size:16px; }
.hub-group-title { fill:#d0e0ec; font-size:16px; font-weight:600; }
.hub-workspace-title { font-size:24px; font-weight:650; }
.hub-work-group { cursor:pointer; }
.hub-work-group:hover rect,.hub-work-group:hover circle { stroke-width:3; }
.hub-variant .reference-satellite-label { font-size:16px; }
.hub-variant .reference-action-title { font-size:16px; }
.hub-variant .hub-navigator {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  max-width:min(280px,calc(100% - 32px));
  right:12px;
  left:auto;
  gap:7px;
  background:#101b29f2;
  border:1px solid #3b5067;
  padding:10px;
  border-radius:12px;
}
.hub-nav-heading { display:flex; align-items:center; gap:10px; font-size:11px; color:#a4bad0; }
.hub-nav-heading span { flex:1; }
.hub-nav-groups { display:flex; flex-wrap:wrap; gap:5px; }
.hub-nav-groups button { font-size:11px; padding:6px 8px; border:1px solid transparent; }
.hub-nav-groups button[aria-pressed=true] { border-color:#769fb7; background:#21394d; color:#e2f0fa; }
.hub-nav-groups b { margin-right:4px; color:#8cbdce; }
.segmented { flex-shrink:0; }
@media(max-width:680px) {
  .map-toolbar { flex-wrap:wrap; gap:8px; }
  .hub-nav-heading { gap:5px; }
}

.hub-variant .bubble-title { font-size:44px; }
.hub-variant .bubble-status { font-size:23px; }