.tool-menu-button {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #d9dcd3;
  border-radius: 12px;
  background: #fff;
  color: #20231e;
  cursor: pointer;
  font: inherit;
  font-size: 20px;
}
.tool-menu-button:hover { background: #f0f1eb; }
.tool-menu-button:focus-visible,
.tool-menu-drawer button:focus-visible,
.tool-menu-drawer a:focus-visible,
.tool-menu-drawer input:focus-visible { outline: 3px solid #7d54e8; outline-offset: 2px; }
.tool-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(25, 27, 23, .42);
  cursor: default;
}
.tool-menu-backdrop[hidden] { display: none; }
.tool-menu-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1001;
  width: min(330px, 90vw);
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid #d9dcd3;
  background: #f7f7f2;
  color: #20231e;
  box-shadow: 18px 0 60px rgba(32, 35, 30, .2);
  transform: translateX(-105%);
  transition: transform .2s ease;
}
.tool-menu-drawer[aria-hidden="false"] { transform: translateX(0); }
.tool-menu-open { overflow: hidden !important; }
.tool-menu-header {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid #d9dcd3;
}
.tool-menu-header div { display: grid; gap: 3px; }
.tool-menu-header small { color: #7051c8; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.tool-menu-header strong { font-size: 19px; }
.tool-menu-close {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #d9dcd3;
  border-radius: 11px;
  background: #fff;
  color: #20231e;
  cursor: pointer;
  font: inherit;
  font-size: 25px;
}
.tool-menu-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 16px 8px;
  padding: 0 12px;
  border: 1px solid #d4d8ce;
  border-radius: 12px;
  background: #fff;
}
.tool-menu-search span { color: #777d73; }
.tool-menu-search input { min-width: 0; width: 100%; min-height: 46px; border: 0; outline: 0; background: transparent; color: #20231e; font: inherit; font-size: 14px; }
.tool-menu-view { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px 26px; }
.tool-menu-subhead { display: grid; gap: 5px; padding: 10px 2px 12px; }
.tool-menu-subhead > button { width: fit-content; margin: 0 0 7px; padding: 0; border: 0; background: transparent; color: #7051c8; cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; }
.tool-menu-subhead strong { font-size: 17px; }
.tool-menu-subhead small { color: #747a70; font-size: 10px; }
.tool-menu-categories,
.tool-menu-tools { display: grid; gap: 7px; }
.tool-menu-categories button,
.tool-menu-tool {
  min-height: 52px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid #dfe2d9;
  border-radius: 12px;
  background: #fff;
  color: #20231e;
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
}
.tool-menu-categories button:hover,
.tool-menu-tool:hover { border-color: #bdb6d6; background: #f4f1ff; }
.tool-menu-categories button > span { min-width: 0; display: flex; align-items: center; gap: 10px; }
.tool-menu-categories i,
.tool-menu-tool > span { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: #e9ffac; color: #20231e; font-size: 9px; font-style: normal; font-weight: 900; }
.tool-menu-categories b,
.tool-menu-tool b { min-width: 0; font-size: 12px; line-height: 1.3; }
.tool-menu-categories small { color: #6f756b; font-size: 10px; font-weight: 800; }
.tool-menu-tool { justify-content: flex-start; }
.tool-menu-empty { margin: 18px 0; color: #747a70; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .tool-menu-drawer { transition: none; } }
@media (max-width: 580px) {
  .site-header { align-items: center; flex-direction: row; flex-wrap: wrap; }
  .site-header .brand { margin-right: auto; }
  .site-header .site-nav { width: 100%; }
  .tool-menu-button { width: 46px; height: 46px; }
}