Firefox Styles Snippets guide hides navigation

[UndarkAido]

I followed the guide, and my userChrome.css looks like this:

/* Import your desired components first */

@import url(chrome/hide_tabs_toolbar.css);
@import url(chrome/window_control_placeholder_support.css);

/* Apply your custom modifications after imports */

/**
 * Decrease size of the sidebar header
 */
#sidebar-header {
  font-size: 1.2em !important;
  padding: 2px 6px 2px 3px !important;
}
#sidebar-header #sidebar-close {
  padding: 3px !important;
}
#sidebar-header #sidebar-close .toolbarbutton-icon {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.6 !important;
}

#main-window #titlebar {
  overflow: hidden;
  transition: height 0.3s 0.3s !important;
}
/* Default state: Set initial height to enable animation */
#main-window #titlebar { height: 3em !important; }
#main-window[uidensity="touch"] #titlebar { height: 3.35em !important; }
#main-window[uidensity="compact"] #titlebar { height: 2.7em !important; }
/* Hidden state: Hide native tabs strip */
#main-window[titlepreface*="​"] #titlebar { height: 0 !important; }
/* Hidden state: Fix z-index of active pinned tabs */
#main-window[titlepreface*="​"] #tabbrowser-tabs { z-index: 0 !important; }

But my window looks like this:

When I close Sidebery, the navbar pops up (looking like it doesn't have quite enough vertical space) but no tab bar:

Does anyone know what's going on? It looks like the sidebar header isn't being properly hidden either.

Edit: Oh, I feel silly. You're not supposed to stack the autohide section with hide_tabs_toolbar.css. Now the tab bar is squished when it appears and the sidebar header still isn't hidden, though.

Edit 2: Oh and hiding the tab bar hides the window controls