.site-help {
  position: fixed; z-index: 90; right: max(14px, env(safe-area-inset-right));
  bottom: calc(14px + env(safe-area-inset-bottom)); color: var(--text-primary, CanvasText);
  font: 14px/1.55 system-ui, sans-serif; text-align: left;
}
body:has(#tabbar) .site-help { bottom: calc(14px + var(--tabbar-h, 62px) + env(safe-area-inset-bottom)); }
@media (max-width: 720px) {
  body:has(#tabbar) .site-help { top: 64px; right: auto; bottom: auto; left: 8px; }
  .site-help .site-help-launch { padding: 4px 10px; font-size: 12px; }
  .site-help-panel { top: calc(100% + 8px); right: auto; bottom: auto; left: 0; max-height: min(420px, calc(100dvh - 140px)); }
}
.site-help *, .site-help *::before { box-sizing: border-box; }
.site-help button {
  font: inherit; cursor: pointer; border: 1px solid var(--border, GrayText); border-radius: 8px;
  padding: 6px 10px; color: inherit; background: var(--bg-light, Canvas);
}
.site-help .site-help-launch {
  display: block; margin-left: auto; border-radius: 22px; padding: 8px 15px;
  background: var(--text-primary, CanvasText); color: var(--bg-dark, Canvas); font-weight: 650;
}
.site-help-panel {
  position: absolute; right: 0; bottom: calc(100% + 10px);
  width: min(360px, calc(100vw - 28px)); max-height: min(490px, calc(100dvh - 125px));
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  border: 1px solid var(--border, GrayText); border-radius: 16px; background: var(--bg-dark, Canvas);
}
.site-help-panel[hidden] { display: none; }
.site-help-panel header, .site-help-form, .site-help-shortcuts { display: flex; align-items: center; gap: 6px; }
.site-help-panel header { justify-content: space-between; }
.site-help-panel h2, .site-help-panel p { margin: 0; }
.site-help-panel h2 { font-size: 16px; font-weight: 680; }
.site-help-hint { color: var(--text-secondary, GrayText); font-size: 12px; }
.site-help-log { min-height: 64px; overflow: auto; overscroll-behavior: contain; }
.site-help-entry {
  background: var(--bg-light, Canvas); border: 1px solid var(--border, GrayText);
  padding: 8px; margin-bottom: 6px; border-radius: 8px; overflow-wrap: anywhere;
}
.site-help-entry strong { font-size: 12px; }
.site-help-entry a { color: inherit; text-decoration: underline; display: inline-block; margin-right: 8px; }
.site-help-shortcuts { flex-wrap: wrap; }
.site-help-form input {
  min-width: 0; flex: 1; padding: 6px 8px; font: inherit; font-size: 16px; color: inherit;
  background: var(--bg-light, Canvas); border: 1px solid var(--border, GrayText); border-radius: 8px;
}