#tech-mentor-mobile-menu,
#tech-mentor-mobile-overlay {
  display: none;
}

@media (max-width: 767px) {
  #root > div > aside {
    position: fixed !important;
    inset: 0 auto 0 0;
    width: min(18rem, 84vw) !important;
    transform: translateX(-105%);
    transition: transform 180ms ease-out;
    z-index: 60;
    box-shadow: 12px 0 32px rgb(0 0 0 / 0.22);
  }

  body.tech-mentor-menu-open #root > div > aside {
    transform: translateX(0);
  }

  #root > div > main {
    width: 100%;
    padding-top: 3.5rem;
  }

  #tech-mentor-mobile-menu {
    display: inline-flex;
    position: fixed;
    top: 0.65rem;
    right: 0.65rem;
    z-index: 70;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    background: hsl(var(--card));
    color: hsl(var(--foreground));
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.14);
    font-size: 1.4rem;
    line-height: 1;
  }

  #tech-mentor-mobile-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgb(0 0 0 / 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease-out;
  }

  body.tech-mentor-menu-open #tech-mentor-mobile-overlay {
    opacity: 1;
    pointer-events: auto;
  }
}