• OS: Pop!_OS 22.04 LTS
• hugo: v0.151.0
• hugo-book: v12.0.0-20-g62e9e07

I have successfully swapped out the original search with pagefind by doing the following in /hugo-book/layouts/_partials/docs/search.html:

{{ if default true .Site.Params.BookSearch }}
<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-ui.js"></script>
<div id="search"></div>
<script>
    window.addEventListener('DOMContentLoaded', (event) => {
        new PagefindUI({ element: "#search", showSubResults: true });
    });
</script>
{{ end }}

I am interested in changing the styling of the search within the hugo-book theme following their default ui. However, I am unsure of the best way to do this. Can you offer any guidance? I'm new to web development so I apologize if this question is pretty basic.

Thank you in advance for your help!