.hh-help { max-width: 56rem; margin: 0 auto; padding: 24px 16px 48px; }
.hh-help-tabs { display: flex; gap: 24px; border-bottom: 1px solid #3f3f3f; }
.hh-help-tabs a {
  position: relative;
  padding: 0 0 12px;
  font-size: 14px;
  font-weight: 500;
  color: #aaa;
  text-decoration: none;
}
.hh-help-tabs a:hover { color: inherit; }
.hh-help-tabs a.on { font-weight: 700; color: inherit; }
.hh-help-tabs a.on::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: currentColor;
}
.hh-help-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.hh-help-cats button {
  border: 0;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: #2a2a2a;
  color: #eee;
}
html:not(.dark) .hh-help-cats button { background: #ececec; color: #222; }
.hh-help-cats button.on { background: #fff; color: #000; }
html:not(.dark) .hh-help-cats button.on { background: #111; color: #fff; }
.hh-help-list { margin-top: 24px; border-top: 1px solid #3f3f3f; }
.hh-help-item { border-bottom: 1px solid #3f3f3f; padding: 16px 0; }
.hh-help-q {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: none;
  border: 0;
  padding: 4px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.hh-help-q:hover { background: rgba(127,127,127,.12); }
.hh-help-q-left { display: flex; min-width: 0; flex: 1; align-items: center; gap: 12px; }
.hh-help-q .mark { flex-shrink: 0; font-size: 14px; font-weight: 700; color: #3ea6ff; }
.hh-help-q .ttl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.hh-help-chev { flex-shrink: 0; width: 20px; height: 20px; color: #aaa; transition: transform .15s; }
.hh-help-item.is-open .hh-help-chev { transform: rotate(180deg); }
.hh-help-a {
  margin-top: 12px;
  border-radius: 12px;
  padding: 16px;
  background: rgba(127,127,127,.12);
  font-size: 14px;
  line-height: 1.7;
  color: #aaa;
}
html:not(.dark) .hh-help-a { color: #555; }
.hh-help-a-row { display: flex; gap: 8px; }
.hh-help-a .mark { flex-shrink: 0; font-weight: 700; color: inherit; }
.hh-help-a a { color: #3ea6ff; text-decoration: underline; }
.hh-help-a p { margin: 0 0 8px; }
.hh-help-a p:last-child { margin-bottom: 0; }
.hh-help-notice { margin-top: 24px; }