.moac-pagefind {
  --pf-font: var(--f-grotesk, var(--sl-font, system-ui, sans-serif));
  --pf-text: var(--ink, var(--mo-ink, #171612));
  --pf-text-secondary: var(--muted, var(--sl-color-gray-3, #666));
  --pf-text-muted: var(--faint, var(--sl-color-gray-3, #777));
  --pf-background: var(--panel, var(--mo-bg, #fff));
  --pf-border: var(--line, var(--mo-line, rgba(20, 20, 18, .14)));
  --pf-border-focus: var(--accent, var(--mo-accent, #e42f23));
  --pf-hover: color-mix(in srgb, var(--pf-text) 7%, transparent);
  --pf-mark: var(--accent, var(--mo-accent, #e42f23));
  --pf-outline-focus: var(--accent, var(--mo-accent, #e42f23));
  --pf-modal-backdrop: rgba(10, 9, 8, .48);
  --pf-modal-max-width: 680px;
  --pf-modal-max-height: min(78dvh, 720px);
  --pf-modal-top: 8dvh;
  --pf-border-radius: 12px;
  display: inline-flex;
}

.moac-pagefind .pf-trigger-btn,
.moac-pagefind .moac-search-fallback {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-width: 38px;
  min-height: 38px;
  justify-content: center;
  border: 1px solid var(--pf-border);
  border-radius: 999px;
  padding: .55rem .78rem;
  background: transparent;
  color: var(--pf-text);
  cursor: pointer;
  font: 500 12.5px/1 var(--pf-font);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.moac-pagefind .pf-trigger-btn:hover,
.moac-pagefind .moac-search-fallback:hover {
  border-color: var(--pf-border-focus);
  color: var(--pf-border-focus);
  background: color-mix(in srgb, var(--pf-text) 5%, transparent);
}

.moac-pagefind .pf-modal {
  border: 1px solid var(--pf-border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--pf-background) 94%, transparent);
  color: var(--pf-text);
  backdrop-filter: blur(30px) saturate(1.5);
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
  box-shadow: 0 46px 110px -32px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255,255,255,.36);
}

.moac-pagefind .pf-input {
  border-radius: 11px;
  font-size: 16px;
}

.moac-pagefind .pf-result-link,
.moac-pagefind .pf-heading-link {
  text-decoration: none;
}

.moac-pagefind mark {
  color: var(--pf-mark);
  background: transparent;
}

:root[data-theme="dark"] .moac-pagefind {
  --pf-background: var(--panel, var(--mo-bg, #171612));
  --pf-modal-backdrop: rgba(0, 0, 0, .68);
}

@media (max-width: 900px) {
  .moac-pagefind .pf-trigger-text { display: none; }
  .moac-pagefind .pf-trigger-btn,
  .moac-pagefind .moac-search-fallback { width: 38px; padding-inline: 0; }
  .moac-pagefind { --pf-modal-top: 2dvh; --pf-modal-max-height: 94dvh; }
}