html, body {
  overflow-x: hidden;
}

/* Sidebar is a fixed overlay drawer: sliding it via `left` (rather than the
   original template's `margin-left`) means #main no longer sits in the same
   flex flow and never needs to reflow/repaint on every animation frame. That
   flex-driven repaint (full-page gradient + shadowed cards) was the cause of
   the toggle animation freezing/stuttering on real hardware. */
#sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  width: 26em;
  max-width: 85vw;
  background-color: #fff;
  border-left: 5px solid black;
  border-radius: 0 28px 28px 0;
  font-family: "IBM Plex Mono", monospace;
  color: black;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.25) !important;
  z-index: 5000 !important;
  transition: left 0.4s ease !important;
}

#sidebar.inactive {
  left: -26em !important;
}

#sidebar > .inner {
  padding: 4.5em 1.8em 2.2em 1.8em !important;
  position: relative !important;
  height: 100% !important;
  max-height: 100vh;
  width: auto !important;
  overflow-x: visible !important;
  overflow-y: auto !important;
}

@media (min-width: 1281px) {
  #main {
    margin-left: 26em;
  }
  #wrapper:has(#sidebar.inactive) #main {
    margin-left: 0;
  }
}

#sidebar .toggle:before {
  font-family: inherit !important;
  content: '☰' !important;
  color: black;
  position: static !important;
  font-size: 1.3rem !important;
  margin: 0 !important;
  text-indent: 0 !important;
}

#sidebar .toggle {
  position: absolute !important;
  top: 1.2em !important;
  left: 1.2em !important;
  right: auto !important;
  bottom: auto !important;
  width: 2.5em !important;
  height: 2.5em !important;
  line-height: 2.5em !important;
  text-indent: 0 !important;
  text-align: center !important;
  background: #eaeaea;
  border: 3px solid black;
  border-radius: 10px;
  color: black;
  z-index: 10000 !important;
}

#sidebar.inactive .toggle {
  position: fixed !important;
  left: 1em !important;
  top: 1em !important;
  right: auto !important;
  transform: none !important;
  width: 3em !important;
  height: 3em !important;
  line-height: 3em !important;
}

#sidebar > .inner > * {
  border-bottom: 3px solid black;
  margin: 0 0 1.5em 0;
  padding: 0 0 1.5em 0;
}

#sidebar > .inner > *:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

#menu ul {
  color: black;
  letter-spacing: 0.05em;
}

#menu ul a,
#menu ul span {
  font-size: 1.1em;
  padding: 0.4em 0;
  color: black;
  border-bottom: none;
}

#menu ul a:hover,
#menu ul span:hover {
  color: black !important;
  background: yellow;
  padding-left: 4px;
}

#menu ul span.opener {
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 2px solid black;
  padding-bottom: 0.3em;
  margin-bottom: 0.2em;
}

#menu ul span.opener:before {
  color: black !important;
}

#menu ul span.opener:hover:before {
  color: black !important;
}

#menu > ul > li {
  border-top: 2px solid black;
  margin: 0.6em 0 0 0;
  padding: 0.6em 0 0 0;
}

#menu > ul > li:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

#menu > ul > li > ul {
  color: #333;
  margin: 0.4em 0 0.8em 0;
  padding-left: 0.8em;
  border-left: 3px solid black;
}

#menu > ul > li > ul a {
  font-size: 0.9em;
}