/* Keep both macOS menu-bar icon tiles optically and geometrically identical. */
.hero-demo .menu-bar-cluster {
  --menu-bar-icon-width: 38px;
  --menu-bar-icon-height: 24px;
  --menu-bar-icon-radius: 7px;
  --menu-bar-icon-background: #595a5f;
}

.hero-demo .menu-bar-item:not(.menu-bar-volumekeys) > svg,
.hero-demo .menu-bars {
  box-sizing: border-box;
  flex: 0 0 var(--menu-bar-icon-width);
  width: var(--menu-bar-icon-width);
  height: var(--menu-bar-icon-height);
  border: 0;
  border-radius: var(--menu-bar-icon-radius);
  background: var(--menu-bar-icon-background);
  box-shadow: none;
}

.hero-demo .menu-bar-item:not(.menu-bar-volumekeys) > svg {
  display: block;
  padding: 4px 7px;
  color: #fff;
}

.hero-demo .menu-bar-item:not(.menu-bar-volumekeys) > svg path:first-child {
  fill: #fff;
}

.hero-demo .menu-bar-item:not(.menu-bar-volumekeys) > svg path:not(:first-child) {
  stroke: #fff;
}

.hero-demo .menu-bars {
  gap: 2px;
  padding: 0;
}

.hero-demo .menu-bars i {
  width: 2.6px;
  background: #fff;
  transform: translateY(-1px);
}

.hero-demo .menu-bars i:nth-child(1) { height: 5px; opacity: 0.52; }
.hero-demo .menu-bars i:nth-child(2) { height: 8px; opacity: 0.76; }
.hero-demo .menu-bars i:nth-child(3) { height: 12px; opacity: 1; }

.hero-demo .menu-bar-divider {
  height: 22px;
}