https://doks.spiritix.co/

Scan-ID:
e65ff916-ceaa-446e-8e10-5fdd85388564Beendet
Eingereichte URL:
https://doks.spiritix.co/
Bericht beendet:

Die von der Seite ausgehenden identifizierten Links

LinkText
https://spiritix.lemonsqueezy.com/checkout/buy/2bcd8fd7-3b62-465f-b838-3d1cd73c4e90Buy theme
https://spiritix.co/themes/doks/ Documentation
https://spiritix.coGithub
https://ghost.org/Ghost
https://spiritix.co/themes/doksSpiritix
https://hetzner.cloud/?ref=1XPXA90qts4wHetzner

JavaScript-Variablen · 32 gefunden

Globale JavaScript-Variablen, die in das Window Object einer Seite geladen werden, sind Variablen, die außerhalb von Funktionen deklariert werden und von jeder Stelle des Codes innerhalb des aktuellen Bereichs zugänglich sind

NameTyp
onbeforetoggleobject
documentPictureInPictureobject
onscrollendobject
Spiritixobject
lemonSqueezyAffiliateConfigobject
Sentryobject
lazyloadContentImagesfunction
_selfobject
Prismobject
safeReportErrorfunction

Konsolenprotokoll-Meldungen · 0 gefunden

In der Web-Konsole protokollierte Meldungen

HTML

Der HTML-Rohtext der Seite

<!DOCTYPE html><html lang="en" class="group/html min-h-screen has-inline-code-block
        
         
        
        
        
         has-gray-scale-Slate 
    " data-prismjs-copy="Copy" data-prismjs-copy-error="Error" data-prismjs-copy-success="Copied" style="--logo-width: 152; --logo-height: 58; --ghost-accent-color-light-rgb: 230 73 24; --color-contrast-light: #fff;"><head>
        <meta charset="UTF-8">
        <meta name="HandheldFriendly" content="True">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Doks</title>

        <link rel="preload" as="style" href="/assets/built/main.min.css?v=7dc848bbc8">
        <link rel="preload" as="script" href="/assets/built/main.min.js?v=7dc848bbc8">  

        <script>
    // Namespace
    window.Spiritix = window.Spiritix || {};

    // Translations
    window.Spiritix.t = {
        "Toggle menu": 'Toggle menu'
    };

    // Color functions
    window.Spiritix.hexToRgb = (hex) => {
        hex = hex.replace('#', '');
        hex = hex.length === 3 ? hex.split().map(c => c + c).join() : hex;

        return [
            parseInt(hex.substring(0,2), 16),
            parseInt(hex.substring(2,4), 16),
            parseInt(hex.substring(4,6), 16),
        ];
    };

    window.Spiritix.getContrastColor = (hex) => {
        const [r, g, b] = window.Spiritix.hexToRgb(hex);

        const yiq = ((r*299) + (g*587) + (b*114)) / 1000;

        return (yiq >= 128) ? '#000' : '#fff';  
    };
</script>

<script>
    if (localStorage && localStorage.theme) {
        document.documentElement.classList.toggle('dark', localStorage.theme === 'dark');
    } else if ("Light" === "System") {
        document.documentElement.classList.toggle('dark', window.matchMedia('(prefers-color-scheme: dark)').matches);
    }
</script>

    <script>
        (function() {
            var logoAspectRatio = "152:58";
            var logoAspectRatioParts = logoAspectRatio.trim().split(':');

            if (logoAspectRatioParts.length === 2 && Number(logoAspectRatioParts[0]) && Number(logoAspectRatioParts[1])) {
                var logoWidth = Number(logoAspectRatioParts[0]);
                var logoHeight = Number(logoAspectRatioParts[1]);

                document.documentElement.style.setProperty('--logo-width', logoWidth);
                document.documentElement.style.setProperty('--logo-height', logoHeight);
            }
        })();
    </script>

    <script>
        (function() {
            const hex = "#E64918".trim();
            const [r, g, b] = window.Spiritix.hexToRgb(hex);
            const contrastColor = window.Spiritix.getContrastColor(hex);

            document.documentElement.style.setProperty('--ghost-accent-color-light-rgb', `${r} ${g} ${b}`);
            document.documentElement.style.setProperty('--color-contrast-light', contrastColor);

            window.Spiritix.ghostAccentColorLightRgb = `${r} ${g} ${b}`;
        })();
    </script>    
    <style>
        :root {
            --color-contrast: var(--color-contrast-light);
            --ghost-accent-color-rgb: var(--ghost-accent-color-light-rgb);
        }
    </style>  


        












        <link href="/assets/built/main.min.css?v=7dc848bbc8" rel="stylesheet" type="text/css">

        <script src="/assets/built/main.min.js?v=7dc848bbc8" defer="" data-manual=""></script>  

        <link rel="preload" href="https://doks.spiritix.co/content/images/2023/05/Logo---Light-theme.svg" as="image" fetchpriority="high">
        <link rel="preload" href="https://doks.spiritix.co/content/images/2023/07/Logo---Dark-theme.svg" as="image" fetchpriority="high">           
           
              


        <meta name="description" content="A powerful Ghost theme specially designed to create beautiful modern docs, knowledge bases, and help centers.">
    <link rel="icon" href="https://doks.spiritix.co/content/images/size/w256h256/2023/05/Group-6.png" type="image/png">
    <link rel="canonical" href="https://doks.spiritix.co/">
    <meta name="referrer" content="no-referrer-when-downgrade">
    
    <meta property="og:site_name" content="Doks">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Doks">
    <meta property="og:description" content="A powerful Ghost theme specially designed to create beautiful modern docs, knowledge bases, and help centers.">
    <meta property="og:url" content="https://doks.spiritix.co/">
    <meta property="article:modified_time" content="2023-09-18T22:02:07.000Z">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Doks">
    <meta name="twitter:description" content="A powerful Ghost theme specially designed to create beautiful modern docs, knowledge bases, and help centers.">
    <meta name="twitter:url" content="https://doks.spiritix.co/">
    <meta name="twitter:creator" content="@SpiritixHQ">
    
    <script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "publisher": {
        "@type": "Organization",
        "name": "Doks",
        "url": "https://doks.spiritix.co/",
        "logo": {
            "@type": "ImageObject",
            "url": "https://doks.spiritix.co/content/images/2023/05/Logo---Light-theme.svg",
            "width": 152,
            "height": 58
        }
    },
    "author": {
        "@type": "Person",
        "name": "Spiritix HQ",
        "image": {
            "@type": "ImageObject",
            "url": "https://doks.spiritix.co/content/images/2023/07/Twitter-Profile--1-.png",
            "width": 400,
            "height": 400
        },
        "sameAs": [
            "https://spiritix.co",
            "https://twitter.com/SpiritixHQ"
        ]
    },
    "headline": "Doks",
    "url": "https://doks.spiritix.co/",
    "dateModified": "2023-09-18T22:02:07.000Z",
    "mainEntityOfPage": "https://doks.spiritix.co/"
}
    </script>

    <meta name="generator" content="Ghost 5.63">
    <link rel="alternate" type="application/rss+xml" title="Doks" href="https://doks.spiritix.co/rss/">
    <script defer="" src="https://cdn.jsdelivr.net/ghost/portal@~2.36/umd/portal.min.js" data-i18n="false" data-ghost="https://doks.spiritix.co/" data-key="1d31d4b36cdd25745804e8a9e9" data-api="https://doks.spiritix.co/ghost/api/content/" crossorigin="anonymous"></script><style id="gh-members-styles">.gh-post-upgrade-cta-content,
.gh-post-upgrade-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-align: center;
    width: 100%;
    color: #ffffff;
    font-size: 16px;
}

.gh-post-upgrade-cta-content {
    border-radius: 8px;
    padding: 40px 4vw;
}

.gh-post-upgrade-cta h2 {
    color: #ffffff;
    font-size: 28px;
    letter-spacing: -0.2px;
    margin: 0;
    padding: 0;
}

.gh-post-upgrade-cta p {
    margin: 20px 0 0;
    padding: 0;
}

.gh-post-upgrade-cta small {
    font-size: 16px;
    letter-spacing: -0.2px;
}

.gh-post-upgrade-cta a {
    color: #ffffff;
    cursor: pointer;
    font-weight: 500;
    box-shadow: none;
    text-decoration: underline;
}

.gh-post-upgrade-cta a:hover {
    color: #ffffff;
    opacity: 0.8;
    box-shadow: none;
    text-decoration: underline;
}

.gh-post-upgrade-cta a.gh-btn {
    display: block;
    background: #ffffff;
    text-decoration: none;
    margin: 28px 0 0;
    padding: 8px 18px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
}

.gh-post-upgrade-cta a.gh-btn:hover {
    opacity: 0.92;
}</style><script async="" src="https://js.stripe.com/v3/"></script>
    <script defer="" src="https://cdn.jsdelivr.net/ghost/sodo-search@~1.1/umd/sodo-search.min.js" data-key="1d31d4b36cdd25745804e8a9e9" data-styles="https://cdn.jsdelivr.net/ghost/sodo-search@~1.1/umd/main.css" data-sodo-search="https://doks.spiritix.co/" crossorigin="anonymous"></script>
    
    <link href="https://doks.spiritix.co/webmentions/receive/" rel="webmention">
    <script defer="" src="/public/cards.min.js?v=7dc848bbc8"></script>
    <link rel="stylesheet" type="text/css" href="/public/cards.min.css?v=7dc848bbc8">
    <script defer="" src="/public/comment-counts.min.js?v=7dc848bbc8" data-ghost-comments-counts-api="https://doks.spiritix.co/members/api/comments/counts/"></script>
    <script defer="" src="/public/member-attribution.min.js?v=7dc848bbc8"></script>
    <script>
    (function() {
        let url = new URL(location.href);

        if (url.searchParams.has('m')) {
            document.documentElement.classList.add('hide-m');
        }
    })();
</script>

<style>
    html.hide-m a[href^="https://spiritix.lemonsqueezy.com/checkout"] {
        display: none;
    }
</style>


<!-- Demo Widget -->
<style>
    .sp-demo-widget {
        display: flex;
        position: fixed;
        bottom: 32px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 100;
        color-scheme: light;
    }

    .sp-demo-btn {
        flex-shrink: 0;
        position: relative;
        padding: 6px 12px;
        font-weight: 600;
        line-height: 1.5rem;
        color: white;
        background-color: #1e293b;
        font-size: .875rem;
        border-radius: 0.5rem;

        display: inline-flex;
        align-items: center;
        text-align: center;

        box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1), inset 0 0 0 calc(1px) rgba(15,23,42, 0.05);
    }

    .sp-demo-btn:hover {
        opacity: 0.92;
    }

    .dark .sp-demo-btn {
        background-color: rgb(241 245 249);
        color: #1e293b;
    }

    .sp-demo-btn svg {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        margin-right: 4px;
    }

    .sp-demo-btn-primary,
    .dark .sp-demo-btn-primary {
        margin-left: 16px;
        background-color: #e11d48;
        color: white;
        
        position: relative;
    }

    .sp-demo-btn-notif {
        display: none;
        position: absolute;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #ef4444;
        top: -4px;
        right: -4px;
    }

    .sp-demo-changed .sp-demo-btn-notif {
        display: block;
    }
    
    .sp-demo-popover-actions {
        position: absolute;
        top: 4px;
        right: 4px;
        display: flex;
    }

    .sp-demo-popover-clear {
        display: none;
        background: #fee2e2;
        padding: 0px 6px;
        border-radius: 4px;
        cursor: pointer;
        text-align: left;
        margin-left: auto;
        font-size: 13px;
        color: #ef4444;
        margin-right: 4px;
        min-height: 24px;
    }

    .sp-demo-changed .sp-demo-popover-clear {
        display: block;
    }

    .sp-demo-popover-close {
        height: 24px;
        width: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        background: rgb(0 0 0 / 0.05);
    }

    .sp-demo-popover-close:hover {
        background: rgb(0 0 0 / 0.1);
    }

    @keyframes sp-ping {
        75%, 100% {
            transform: scale(1.2, 1.5);
            opacity: 0;
        }
    }

    .sp-demo-btn-ping {
        display: none;
    }

    .sp-demo-btn-primary.is-animated .sp-demo-btn-ping {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 0.5rem;
        background-color: #f43f5e;
        opacity: 0.5;
        animation: sp-ping 1s cubic-bezier(0,0,.2,1);
        animation-delay: 100ms;
        z-index: -1;
        pointer-events: none;
    }

    .sp-demo-btn-primary:hover .sp-demo-btn-ping {
        display: none !important;
    }
    
    @media (prefers-reduced-motion) {
        .sp-demo-btn-primary .sp-demo-btn-ping {
            display: none !important;
        }
    }

    /* Popover */

    .sp-demo-popover {
        display: none;
        position: absolute;
        bottom: calc(100% + 32px);
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
        height: 430px;
        color: #1e293b;
        background-color: white;
        box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1), inset 0 0 0 calc(1px) rgba(15,23,42, 0.05);
        border-radius: 0.5rem;
        padding: 16px;
        overflow-y: auto;

        text-align: left;
        font-weight: 600;
        line-height: 1.5rem;
        font-size: .875rem;        
    }

    .sp-demo-popover.open {
        display: block;
    }

    .dark .sp-demo-popover {
        background-color: #f8fafc;
        /* color: #1e293b;         */
    }

    .sp-demo-popover label {
        display: block;
    }

    .sp-demo-popover-config + .sp-demo-popover-config {
        margin-top: 12px;
    }

    .sp-demo-popover-heading {
        margin-bottom: 4px;
    }

    .sp-demo-popover-color {
        width: 20px;
        height: 20px;
        display: inline-flex;
        border-radius: 4px;
        margin-right: 4px;
        background-color: #eee;
        color: black;
    }

    .sp-demo-popover-color.selected {
        box-shadow: 0 0 0 calc(1px + 1px) rgb(147 197 253);
    }

    .sp-demo-popover-config select {
        width: 100%;
        min-height: 24px;
        border-radius: 4px;
        border: 1px solid rgba(15, 23, 42, 0.1);
        padding: 4px;
    }

    .sp-demo-popover-config select [disabled] {
        opacity: 0.5;
    }
</style>

<template id="sp-demo-template">
    <div id="sp-demo-widget" class="sp-demo-widget">
        <!-- Popover -->
        <div id="sp-demo-popover" class="sp-demo-popover">
            <div class="sp-demo-popover-actions">
                <button id="sp-demo-popover-clear" class="sp-demo-popover-clear">
                    Clear
                </button>
                <button id="sp-demo-popover-close" class="sp-demo-popover-close" title="Close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="10" width="10"><path stroke-linecap="round" stroke-width="0.4" fill="currentColor" stroke="#000000" stroke-linejoin="round" d="M.44,21.44a1.49,1.49,0,0,0,0,2.12,1.5,1.5,0,0,0,2.12,0l9.26-9.26a.25.25,0,0,1,.36,0l9.26,9.26a1.5,1.5,0,0,0,2.12,0,1.49,1.49,0,0,0,0-2.12L14.3,12.18a.25.25,0,0,1,0-.36l9.26-9.26A1.5,1.5,0,0,0,21.44.44L12.18,9.7a.25.25,0,0,1-.36,0L2.56.44A1.5,1.5,0,0,0,.44,2.56L9.7,11.82a.25.25,0,0,1,0,.36Z"></path></svg></button>
            </div>
            <!-- Accent color -->
            <div class="sp-demo-popover-config">
                <div class="sp-demo-popover-heading">Accent color</div>
                <div>
                    <button class="sp-demo-popover-color selected" data-color="#E64918"><span class="sr-only">#E64918</span></button>
                    <button class="sp-demo-popover-color" data-color="#ef4444"><span class="sr-only">#ef4444</span></button>
                    <button class="sp-demo-popover-color" data-color="#f97316"><span class="sr-only">#f97316</span></button>
                    <button class="sp-demo-popover-color" data-color="#f59e0b"><span class="sr-only">#f59e0b</span></button>
                    <button class="sp-demo-popover-color" data-color="#eab308"><span class="sr-only">#eab308</span></button>
                    <button class="sp-demo-popover-color" data-color="#84cc16"><span class="sr-only">#84cc16</span></button>
                    <button class="sp-demo-popover-color" data-color="#22c55e"><span class="sr-only">#22c55e</span></button>
                    <button class="sp-demo-popover-color" data-color="#10b981"><span class="sr-only">#10b981</span></button>
                    <button class="sp-demo-popover-color" data-color="#14b8a6"><span class="sr-only">#14b8a6</span></button>
                    <button class="sp-demo-popover-color" data-color="#06b6d4"><span class="sr-only">#06b6d4</span></button>
                    <button class="sp-demo-popover-color" data-color="#0ea5e9"><span class="sr-only">#0ea5e9</span></button>
                    <button class="sp-demo-popover-color" data-color="#3b82f6"><span class="sr-only">#3b82f6</span></button>
                    <button class="sp-demo-popover-color" data-color="#6366f1"><span class="sr-only">#6366f1</span></button>
                    <button class="sp-demo-popover-color" data-color="#8b5cf6"><span class="sr-only">#8b5cf6</span></button>
                    <button class="sp-demo-popover-color" data-color="#a855f7"><span class="sr-only">#a855f7</span></button>
                    <button class="sp-demo-popover-color" data-color="#d946ef"><span class="sr-only">#d946ef</span></button>
                    <button class="sp-demo-popover-color" data-color="#ec4899"><span class="sr-only">#ec4899</span></button>
                    <button class="sp-demo-popover-color" data-color="#f43f5e"><span class="sr-only">#f43f5e</span></button>
                </div>
                <div style="font-weight: normal; opacity: 0.8;">Current: <span class="sp-demo-popover-current">#E64918</span></div>
            </div>
    
            <!-- Color scheme -->
            <!-- <label class="sp-demo-popover-config">
                <div class="sp-demo-popover-heading">Color scheme</div>
                <select id="sp-demo-popover-select-color-scheme">
                    <option value="Light" selected>Light</option>
                    <option value="Dark">Dark</option>
                </select>
            </label> -->

            <!-- Gray scale -->
            <label class="sp-demo-popover-config">
                <div class="sp-demo-popover-heading">Gray scale <small style="font-weight: normal;">(more visible on dark mode)</small></div>
                <select id="sp-demo-popover-select-gray-scale">
                    <option value="Slate" selected="">Slate</option>
                    <option value="Gray">Gray</option>
                    <option value="Zinc">Zinc</option>
                    <option value="Stone">Stone</option>
                    <option value="Neutral">Neutral</option>
                </select>
            </label>

            <!-- Sidebar style -->
            <label class="sp-demo-popover-config">
                <div class="sp-demo-popover-heading">Docs Sidebar Style</div>
                <select id="sp-demo-popover-select-sidebar-style">
                    <option value="Neutral" selected="">Neutral</option>
                    <option value="Transparent">Transparent</option>
                    <option value="Dark">Dark</option>
                </select>
            </label>                
    
            <!-- Text font -->
            <label class="sp-demo-popover-config">
                <div class="sp-demo-popover-heading">Text font</div>
                <select id="sp-demo-popover-select-text-font">
                    <option value="System sans-serif" selected="">System sans-serif</option>
                    <option value="Inter">Inter</option>
                    <option value="Roboto">Roboto</option>
                    <option value="Raleway">Raleway</option>
                    <option value="Montserrat">Montserrat</option>
                    <option value="Work Sans">Work Sans</option>
                    <option value="Source Sans">Source Sans</option>
                    <option value="Nunito Sans">Nunito Sans</option>
                    
                    <option value="System serif">System serif</option>
                    <option value="Source Serif">Source Serif</option>
                    <option value="Roboto Serif">Roboto Serif</option>
                    <option value="Playfair Display">Playfair Display</option>
                </select>
            </label>
    
            <!-- Headings font -->
            <label class="sp-demo-popover-config">
                <div class="sp-demo-popover-heading">Headings font</div>
                <select id="sp-demo-popover-select-headings-font">
                    <option value="System sans-serif" selected="">System sans-serif</option>
                    <option value="Inter">Inter</option>
                    <option value="Roboto">Roboto</option>
                    <option value="Raleway">Raleway</option>
                    <option value="Montserrat">Montserrat</option>
                    <option value="Work Sans">Work Sans</option>
                    <option value="Source Sans">Source Sans</option>
                    <option value="Nunito Sans">Nunito Sans</option>

                    <option value="System serif">System serif</option>
                    <option value="Source Serif">Source Serif</option>
                    <option value="Roboto Serif">Roboto Serif</option>                    
                    <option value="Playfair Display">Playfair Display</option>
                </select>
            </label>
        
        </div>        
    
        <!-- Btns -->
        <button id="sp-demo-customize" class="sp-demo-btn">
            <span class="sp-demo-btn-notif"></span>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path>
            </svg>
            Customize
        </button>
        <a id="sp-demo-buy" class="sp-demo-btn sp-demo-btn-primary" href="https://spiritix.lemonsqueezy.com/checkout/buy/2bcd8fd7-3b62-465f-b838-3d1cd73c4e90" target="_blank">
            <div class="sp-demo-btn-ping"></div>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
            </svg>
            <span>Buy theme</span>
        </a>
    </div>
</template>

<script>
    (function() {
        // Text font
        var fonts = [
            {configFontName:"Inter", urlFontName:"Inter", cssFontName:"'Inter'"},
            {configFontName:"Roboto", urlFontName:"Roboto+Flex", cssFontName:"'Roboto Flex'"},
            {configFontName:"Work Sans", urlFontName:"Work+Sans", cssFontName:"'Work Sans'"},
            {configFontName:"Source Sans", urlFontName:"Source+Sans+3", cssFontName:"'Source Sans 3'"},
            {configFontName:"Source Serif", urlFontName:"Source+Serif+4", cssFontName:"'Source Serif 4'"},
            {configFontName:"Raleway", urlFontName:"Raleway", cssFontName:"'Raleway'"},
            {configFontName:"Montserrat", urlFontName:"Montserrat", cssFontName:"'Montserrat'"},
            {configFontName:"Nunito Sans", urlFontName:"Nunito+Sans", cssFontName:"'Nunito Sans'"},
            {configFontName:"Playfair Display", urlFontName:"Playfair+Display", cssFontName:"'Playfair Display'"},
            {configFontName:"Roboto Serif", urlFontName:"Roboto+Serif", cssFontName:"'Roboto Serif'"},
        ];

        var loadFont = (configFontName, type="body") => {
            var selectedFont = fonts.find(f => f.configFontName === configFontName);
            if (!selectedFont) return;

            var link = document.createElement('link');
            link.rel = "stylesheet";
            link.href = "https://fonts.googleapis.com/css2?family="+selectedFont.urlFontName+":ital,wght@0,400..900;1,400..900&display=swap";

            document.head.appendChild(link);

            if (type === "body") {
                document.documentElement.style.setProperty('--font-body', selectedFont.cssFontName);
            } else {
                document.documentElement.style.setProperty('--font-headings', selectedFont.cssFontName);
            }
        }        

        // Defaults
        var defaultAccentColor = "#E64918";
        var STORAGE_KEY = "SP_THEME_CONFIG";

        var defaultConfigValues = {
            "accentColor": defaultAccentColor,
            // "colorScheme": "Light",
            "textFont": "System sans-serif",
            "headingsFont": "System sans-serif",
            "sidebarStyle": "Neutral",
            "grayScale": "Slate",
        };

        var configValues = Object.assign({}, defaultConfigValues);

        // Compare current config with default config
        var checkNewChange = () => {
            var configChanged = Object.keys(configValues).some((key) => {
                return configValues[key] && defaultConfigValues[key] && configValues[key].toLowerCase() !== defaultConfigValues[key].toLowerCase();
            });    
            
            if (configChanged) {
                var widget = document.getElementById('sp-demo-widget');
                widget && widget.classList.add('sp-demo-changed');
            }
        }          

        var configActions = {
            "accentColor": (selectedValue) => {
                configValues.accentColor = selectedValue;
                sessionStorage.setItem(STORAGE_KEY, JSON.stringify(configValues));
                checkNewChange();

                var color = selectedValue;

                document.documentElement.style.setProperty('--ghost-accent-color', color);

                const hex = selectedValue;
                if (hex && hex.length === 7) {
                    var r = parseInt(hex.slice(1, 3), 16);
                    var g = parseInt(hex.slice(3, 5), 16);
                    var b = parseInt(hex.slice(5, 7), 16);
                    document.documentElement.style.setProperty('--ghost-accent-color-rgb', `${r} ${g} ${b}`);
                    
                    const yiq = ((r*299) + (g*587) + (b*114)) / 1000;
                    const contrastColor = (yiq >= 128) ? '#000' : '#fff';

                    document.documentElement.style.setProperty('--color-contrast', contrastColor);
                };                  
            },

            // "colorScheme": (selectedValue) => {
            //     configValues.colorScheme = selectedValue;
            //     sessionStorage.setItem(STORAGE_KEY, JSON.stringify(configValues));
            //     localStorage.setItem('theme', selectedValue.toLowerCase());
            //     checkNewChange();

            //     document.documentElement.classList.toggle('dark', selectedValue === "Dark");
            // },

            "grayScale": (selectedValue) => {
                configValues.grayScale = selectedValue;
                sessionStorage.setItem(STORAGE_KEY, JSON.stringify(configValues));
                checkNewChange();

                document.documentElement.classList.forEach(c => {
                    if (c.startsWith("has-gray-scale-")) {
                        document.documentElement.classList.remove(c);
                    }
                });

                document.documentElement.classList.add("has-gray-scale-" + selectedValue);
            },            

            "textFont": (selectedValue) => {
                configValues.textFont = selectedValue;
                sessionStorage.setItem(STORAGE_KEY, JSON.stringify(configValues));
                checkNewChange();

                document.documentElement.style.removeProperty('--font-body');
                document.documentElement.classList.remove('has-serif-body');

                if (selectedValue === "System sans-serif") return;
                if (selectedValue === "System serif") {
                    document.documentElement.classList.add('has-serif-body');
                    return;
                };

                loadFont(selectedValue, "body");                     
            },
            
            "headingsFont": (selectedValue) => {
                configValues.headingsFont = selectedValue;
                sessionStorage.setItem(STORAGE_KEY, JSON.stringify(configValues));
                checkNewChange();

                document.documentElement.style.removeProperty('--font-headings');
                document.documentElement.classList.remove('has-serif-headings');

                if (selectedValue === "System sans-serif") return;
                if (selectedValue === "System serif") {
                    document.documentElement.classList.add('has-serif-headings');
                    return;
                };


                loadFont(selectedValue, "headings");                   
            },

            "sidebarStyle": (selectedValue, sidebarMenu) => {
                configValues.sidebarStyle = selectedValue;
                sessionStorage.setItem(STORAGE_KEY, JSON.stringify(configValues));
                checkNewChange();

                document.documentElement.classList.remove('has-sidebar-transparent');
                document.documentElement.classList.remove('has-sidebar-dark');
                sidebarMenu && sidebarMenu.classList.remove('dark'); 
                
                if (selectedValue === "Transparent") {
                    document.documentElement.classList.add('has-sidebar-transparent');
                } else if (selectedValue === "Dark") {
                    document.documentElement.classList.add('has-sidebar-dark');
                    sidebarMenu && sidebarMenu.classList.add('dark');
                    if (!sidebarMenu) {
                        window.addEventListener("DOMContentLoaded", () => {
                            var sidebarMenu = document.querySelector('[data-docs-menu]');
                            sidebarMenu && sidebarMenu.classList.add('dark');
                        })
                    }
                }            
            },
        }

        // Compare stored config with default config and apply it if changed
        var storedConfig = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || "null");
        var defaultConfigChanged = !!storedConfig && Object.keys(storedConfig).some((key) => {
            return storedConfig[key] && defaultConfigValues[key] && storedConfig[key].toLowerCase() !== defaultConfigValues[key].toLowerCase();
        });
        if (defaultConfigChanged) {
            configActions.accentColor(storedConfig["accentColor"]);
            // configActions.colorScheme(storedConfig["colorScheme"]);
            configActions.grayScale(storedConfig["grayScale"]);           
            configActions.textFont(storedConfig["textFont"]);
            configActions.headingsFont(storedConfig["headingsFont"]);
            configActions.sidebarStyle(storedConfig["sidebarStyle"]);   
        }      

        
        // Wait for DOM
        window.addEventListener("DOMContentLoaded", () => {
            const template = document.getElementById("sp-demo-template");
            document.body.appendChild(template.content.cloneNode(true));

            // DOM Elements
            var widget = document.getElementById('sp-demo-widget');
            var clearBtn = document.getElementById('sp-demo-popover-clear');
            var closeBtn = document.getElementById('sp-demo-popover-close');
            var buyBtn = document.getElementById('sp-demo-buy');
            var customizeBtn = document.getElementById('sp-demo-customize');
            var popover = document.getElementById('sp-demo-popover');
            var colorBtns = Array.from(document.querySelectorAll('.sp-demo-popover-color') || []);
            var currentColorElm = document.querySelector('.sp-demo-popover-current');
            // var colorSchemeSelect = document.getElementById('sp-demo-popover-select-color-scheme');
            var grayScaleSelect = document.getElementById('sp-demo-popover-select-gray-scale');
            var textFontSelect = document.getElementById('sp-demo-popover-select-text-font');
            var headingsFontSelect = document.getElementById('sp-demo-popover-select-headings-font');
            var sidebarStyleSelect = document.getElementById('sp-demo-popover-select-sidebar-style');
            var sidebarMenu = document.querySelector('[data-docs-menu]');
            var brandLinks = Array.from(document.querySelectorAll('[data-brand]') || []);     
                        
            // Open / Close popover
            customizeBtn.addEventListener('click', () => {
                popover.classList.toggle('open');
            });

            closeBtn.addEventListener('click', () => {
                popover.classList.remove('open');
            });
    
    
            // Set ping animation
            const ping = () => {
                setInterval(() => {
                    buyBtn.classList.add('is-animated');
                    setTimeout(() => {
                        buyBtn.classList.remove('is-animated');
                    }, 1500);
                }, 5 * 1000);
            };
            ping();
    
            // Accent color config
            var selectColorBtn = (color) => {
                currentColorElm.textContent = color.toUpperCase();
                colorBtns.forEach(b => b.classList.remove('selected'));
                var selectedBtn = colorBtns.find(b => b.getAttribute('data-color').toLowerCase() === color.toLowerCase());
                selectedBtn && selectedBtn.classList.add('selected');

                // Change logo
                brandLinks.forEach(brandLink => {
                    if (!brandLink.classList.contains('has-svg')) {
                        brandLink.classList.add('has-svg');
                        brandLink.innerHTML = `
                            <svg class="max-h-9 w-auto block dark:hidden" width="152" height="58" viewBox="0 0 76 29" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill="black" d="M40.86 21.252C40.152 21.252 39.486 21.078 38.862 20.73C38.25 20.37 37.758 19.848 37.386 19.164C37.014 18.48 36.828 17.652 36.828 16.68V16.392C36.828 15.42 37.014 14.592 37.386 13.908C37.758 13.224 38.25 12.708 38.862 12.36C39.474 12 40.14 11.82 40.86 11.82C41.4 11.82 41.85 11.886 42.21 12.018C42.582 12.138 42.882 12.294 43.11 12.486C43.338 12.678 43.512 12.882 43.632 13.098H43.956V8.4H46.224V21H43.992V19.92H43.668C43.464 20.256 43.146 20.562 42.714 20.838C42.294 21.114 41.676 21.252 40.86 21.252ZM41.544 19.272C42.24 19.272 42.822 19.05 43.29 18.606C43.758 18.15 43.992 17.49 43.992 16.626V16.446C43.992 15.582 43.758 14.928 43.29 14.484C42.834 14.028 42.252 13.8 41.544 13.8C40.848 13.8 40.266 14.028 39.798 14.484C39.33 14.928 39.096 15.582 39.096 16.446V16.626C39.096 17.49 39.33 18.15 39.798 18.606C40.266 19.05 40.848 19.272 41.544 19.272ZM52.2665 21.252C51.3785 21.252 50.5805 21.072 49.8725 20.712C49.1645 20.352 48.6065 19.83 48.1985 19.146C47.7905 18.462 47.5865 17.64 47.5865 16.68V16.392C47.5865 15.432 47.7905 14.61 48.1985 13.926C48.6065 13.242 49.1645 12.72 49.8725 12.36C50.5805 12 51.3785 11.82 52.2665 11.82C53.1545 11.82 53.9525 12 54.6605 12.36C55.3685 12.72 55.9265 13.242 56.3345 13.926C56.7425 14.61 56.9465 15.432 56.9465 16.392V16.68C56.9465 17.64 56.7425 18.462 56.3345 19.146C55.9265 19.83 55.3685 20.352 54.6605 20.712C53.9525 21.072 53.1545 21.252 52.2665 21.252ZM52.2665 19.236C52.9625 19.236 53.5385 19.014 53.9945 18.57C54.4505 18.114 54.6785 17.466 54.6785 16.626V16.446C54.6785 15.606 54.4505 14.964 53.9945 14.52C53.5505 14.064 52.9745 13.836 52.2665 13.836C51.5705 13.836 50.9945 14.064 50.5385 14.52C50.0825 14.964 49.8545 15.606 49.8545 16.446V16.626C49.8545 17.466 50.0825 18.114 50.5385 18.57C50.9945 19.014 51.5705 19.236 52.2665 19.236ZM58.32 21V8.4H60.588V15.366H60.912L63.864 12.072H66.816L62.694 16.392L66.96 21H64.044L60.912 17.454H60.588V21H58.32ZM71.2221 21.252C70.0581 21.252 69.1041 21 68.3601 20.496C67.6161 19.992 67.1661 19.272 67.0101 18.336L69.0981 17.796C69.1821 18.216 69.3201 18.546 69.5121 18.786C69.7161 19.026 69.9621 19.2 70.2501 19.308C70.5501 19.404 70.8741 19.452 71.2221 19.452C71.7501 19.452 72.1401 19.362 72.3921 19.182C72.6441 18.99 72.7701 18.756 72.7701 18.48C72.7701 18.204 72.6501 17.994 72.4101 17.85C72.1701 17.694 71.7861 17.568 71.2581 17.472L70.7541 17.382C70.1301 17.262 69.5601 17.1 69.0441 16.896C68.5281 16.68 68.1141 16.386 67.8021 16.014C67.4901 15.642 67.3341 15.162 67.3341 14.574C67.3341 13.686 67.6581 13.008 68.3061 12.54C68.9541 12.06 69.8061 11.82 70.8621 11.82C71.8581 11.82 72.6861 12.042 73.3461 12.486C74.0061 12.93 74.4381 13.512 74.6421 14.232L72.5361 14.88C72.4401 14.424 72.2421 14.1 71.9421 13.908C71.6541 13.716 71.2941 13.62 70.8621 13.62C70.4301 13.62 70.1001 13.698 69.8721 13.854C69.6441 13.998 69.5301 14.202 69.5301 14.466C69.5301 14.754 69.6501 14.97 69.8901 15.114C70.1301 15.246 70.4541 15.348 70.8621 15.42L71.3661 15.51C72.0381 15.63 72.6441 15.792 73.1841 15.996C73.7361 16.188 74.1681 16.47 74.4801 16.842C74.8041 17.202 74.9661 17.694 74.9661 18.318C74.9661 19.254 74.6241 19.98 73.9401 20.496C73.2681 21 72.3621 21.252 71.2221 21.252Z"/>
                                <rect fill="var(--ghost-accent-color)" fill-opacity="0.2" width="19.9299" height="19.9299" rx="3.18879" transform="matrix(4.37114e-08 1 1 -4.37114e-08 0.0402832 6.84707)"/>
                                <rect fill="var(--ghost-accent-color)" fill-opacity="0.5" width="19.9299" height="19.9299" rx="3.18879" transform="matrix(-0.34202 0.939693 0.939693 0.34202 6.81641 2.06387)"/>
                                <rect fill="var(--ghost-accent-color)" fill-opacity="0.7" width="19.9299" height="19.9299" rx="3.18879" transform="matrix(-0.642787 0.766044 0.766044 0.642787 14.7328 0)"/>
                            </svg>
                            <svg class="max-h-9 w-auto hidden dark:block" width="152" height="58" viewBox="0 0 76 29" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill="#F8FAFC" d="M40.86 21.252C40.152 21.252 39.486 21.078 38.862 20.73C38.25 20.37 37.758 19.848 37.386 19.164C37.014 18.48 36.828 17.652 36.828 16.68V16.392C36.828 15.42 37.014 14.592 37.386 13.908C37.758 13.224 38.25 12.708 38.862 12.36C39.474 12 40.14 11.82 40.86 11.82C41.4 11.82 41.85 11.886 42.21 12.018C42.582 12.138 42.882 12.294 43.11 12.486C43.338 12.678 43.512 12.882 43.632 13.098H43.956V8.4H46.224V21H43.992V19.92H43.668C43.464 20.256 43.146 20.562 42.714 20.838C42.294 21.114 41.676 21.252 40.86 21.252ZM41.544 19.272C42.24 19.272 42.822 19.05 43.29 18.606C43.758 18.15 43.992 17.49 43.992 16.626V16.446C43.992 15.582 43.758 14.928 43.29 14.484C42.834 14.028 42.252 13.8 41.544 13.8C40.848 13.8 40.266 14.028 39.798 14.484C39.33 14.928 39.096 15.582 39.096 16.446V16.626C39.096 17.49 39.33 18.15 39.798 18.606C40.266 19.05 40.848 19.272 41.544 19.272ZM52.2665 21.252C51.3785 21.252 50.5805 21.072 49.8725 20.712C49.1645 20.352 48.6065 19.83 48.1985 19.146C47.7905 18.462 47.5865 17.64 47.5865 16.68V16.392C47.5865 15.432 47.7905 14.61 48.1985 13.926C48.6065 13.242 49.1645 12.72 49.8725 12.36C50.5805 12 51.3785 11.82 52.2665 11.82C53.1545 11.82 53.9525 12 54.6605 12.36C55.3685 12.72 55.9265 13.242 56.3345 13.926C56.7425 14.61 56.9465 15.432 56.9465 16.392V16.68C56.9465 17.64 56.7425 18.462 56.3345 19.146C55.9265 19.83 55.3685 20.352 54.6605 20.712C53.9525 21.072 53.1545 21.252 52.2665 21.252ZM52.2665 19.236C52.9625 19.236 53.5385 19.014 53.9945 18.57C54.4505 18.114 54.6785 17.466 54.6785 16.626V16.446C54.6785 15.606 54.4505 14.964 53.9945 14.52C53.5505 14.064 52.9745 13.836 52.2665 13.836C51.5705 13.836 50.9945 14.064 50.5385 14.52C50.0825 14.964 49.8545 15.606 49.8545 16.446V16.626C49.8545 17.466 50.0825 18.114 50.5385 18.57C50.9945 19.014 51.5705 19.236 52.2665 19.236ZM58.32 21V8.4H60.588V15.366H60.912L63.864 12.072H66.816L62.694 16.392L66.96 21H64.044L60.912 17.454H60.588V21H58.32ZM71.2221 21.252C70.0581 21.252 69.1041 21 68.3601 20.496C67.6161 19.992 67.1661 19.272 67.0101 18.336L69.0981 17.796C69.1821 18.216 69.3201 18.546 69.5121 18.786C69.7161 19.026 69.9621 19.2 70.2501 19.308C70.5501 19.404 70.8741 19.452 71.2221 19.452C71.7501 19.452 72.1401 19.362 72.3921 19.182C72.6441 18.99 72.7701 18.756 72.7701 18.48C72.7701 18.204 72.6501 17.994 72.4101 17.85C72.1701 17.694 71.7861 17.568 71.2581 17.472L70.7541 17.382C70.1301 17.262 69.5601 17.1 69.0441 16.896C68.5281 16.68 68.1141 16.386 67.8021 16.014C67.4901 15.642 67.3341 15.162 67.3341 14.574C67.3341 13.686 67.6581 13.008 68.3061 12.54C68.9541 12.06 69.8061 11.82 70.8621 11.82C71.8581 11.82 72.6861 12.042 73.3461 12.486C74.0061 12.93 74.4381 13.512 74.6421 14.232L72.5361 14.88C72.4401 14.424 72.2421 14.1 71.9421 13.908C71.6541 13.716 71.2941 13.62 70.8621 13.62C70.4301 13.62 70.1001 13.698 69.8721 13.854C69.6441 13.998 69.5301 14.202 69.5301 14.466C69.5301 14.754 69.6501 14.97 69.8901 15.114C70.1301 15.246 70.4541 15.348 70.8621 15.42L71.3661 15.51C72.0381 15.63 72.6441 15.792 73.1841 15.996C73.7361 16.188 74.1681 16.47 74.4801 16.842C74.8041 17.202 74.9661 17.694 74.9661 18.318C74.9661 19.254 74.6241 19.98 73.9401 20.496C73.2681 21 72.3621 21.252 71.2221 21.252Z"/>
                                <rect fill="var(--ghost-accent-color)" fill-opacity="0.5" width="19.9299" height="19.9299" rx="3.18879" transform="matrix(4.37114e-08 1 1 -4.37114e-08 0.0402832 6.84707)"/>
                                <rect fill="var(--ghost-accent-color)" fill-opacity="0.65" width="19.9299" height="19.9299" rx="3.18879" transform="matrix(-0.34202 0.939693 0.939693 0.34202 6.81641 2.06387)"/>
                                <rect fill="var(--ghost-accent-color)" fill-opacity="0.85" width="19.9299" height="19.9299" rx="3.18879" transform="matrix(-0.642787 0.766044 0.766044 0.642787 14.7328 0)"/>
                            </svg>
                            `;
                    }                
                });
            }

            colorBtns.forEach(btn => {
                var color = btn.getAttribute('data-color');
                btn.style.backgroundColor = color;
    
                btn.addEventListener('click', () => {
                    configActions.accentColor(color);
                    selectColorBtn(color);
                });
            })
                
            // Color Scheme
            // colorSchemeSelect.addEventListener('change', (e) => {            
            //     configActions.colorScheme(e.currentTarget.value);
            // });

            // Gray scale config
            grayScaleSelect.addEventListener('change', (e) => {
                configActions.grayScale(e.currentTarget.value);
            });            
    
            // Text font
            textFontSelect.addEventListener('change', (e) => {
                configActions.textFont(e.currentTarget.value)
            });
            
            // Headings font
            headingsFontSelect.addEventListener('change', (e) => {
                configActions.headingsFont(e.currentTarget.value);
            });
    
            // Sidebar style config
            sidebarStyleSelect.addEventListener('change', (e) => {
                configActions.sidebarStyle(e.currentTarget.value, sidebarMenu);
            });

            // Clear changes
            clearBtn.addEventListener('click', () => {
                configActions.accentColor(defaultConfigValues["accentColor"]);
                // configActions.colorScheme(defaultConfigValues["colorScheme"]);
                configActions.grayScale(defaultConfigValues["grayScale"]);
                configActions.textFont(defaultConfigValues["textFont"]);
                configActions.headingsFont(defaultConfigValues["headingsFont"]);
                configActions.sidebarStyle(defaultConfigValues["sidebarStyle"], sidebarMenu);                

                widget.classList.remove('sp-demo-changed');

                selectColorBtn(defaultConfigValues["accentColor"]);
                // colorSchemeSelect.value = defaultConfigValues['colorScheme'];
                grayScaleSelect.value = defaultConfigValues['grayScale'];
                textFontSelect.value = defaultConfigValues['textFont'];
                headingsFontSelect.value = defaultConfigValues['headingsFont'];
                sidebarStyleSelect.value = defaultConfigValues['sidebarStyle'];                
            });

            // Sync widget UI with stored config
            if (defaultConfigChanged) {
                widget.classList.add('sp-demo-changed');

                if (storedConfig["accentColor"].toLowerCase() !== defaultAccentColor.toLowerCase()) {
                    selectColorBtn(storedConfig["accentColor"]);
                }

                // colorSchemeSelect.value = storedConfig['colorScheme'];
                grayScaleSelect.value = storedConfig['grayScale'];
                textFontSelect.value = storedConfig['textFont'];
                headingsFontSelect.value = storedConfig['headingsFont'];
                sidebarStyleSelect.value = storedConfig['sidebarStyle'];
            }   
        });
    })();
</script>

<!--/ Demo Widget -->

<style>:root {--ghost-accent-color: #E64918;}</style>
    <style>.gh-portal-account-header{display:flex;flex-direction:column;align-items:center;margin:0 0 32px}.gh-portal-account-header .gh-portal-avatar{margin:6px 0 8px!important}.gh-portal-account-data{margin-bottom:40px}footer.gh-portal-account-footer{display:flex}.gh-portal-account-footer.paid{margin-top:12px}.gh-portal-account-footermenu{display:flex;align-items:center;list-style:none;padding:0;margin:0}.gh-portal-account-footerright{display:flex;flex-grow:1;align-items:center;justify-content:flex-end}.gh-portal-account-footermenu li{margin-right:16px}.gh-portal-account-footermenu li:last-of-type{margin-right:0}.gh-portal-freeaccount-newsletter{display:flex;align-items:center;justify-content:space-between;margin-top:24px}.gh-portal-freeaccount-newsletter .label{display:flex;flex-direction:column;flex-grow:1}.gh-portal-free-ctatext{margin-top:-12px}.gh-portal-cancelcontinue-container{margin:24px 0 32px}.gh-portal-list-detail .gh-portal-email-notice{display:flex;align-items:center;gap:5px;margin-top:6px;color:var(--red);font-weight:500;font-size:1.25rem;letter-spacing:.2px}.gh-portal-email-notice-icon{width:20px;height:20px}.gh-portal-billing-button-loader{width:32px;height:32px;margin-right:-3px;opacity:.6}.gh-portal-product-icon{width:52px;margin-right:12px;border-radius:2px}.gh-portal-account-discountcontainer{position:relative;display:flex;align-items:center}.gh-portal-account-old-price{text-decoration:line-through;color:var(--grey9)!important}.gh-portal-account-tagicon{width:16px;height:16px;color:var(--brandcolor);margin-right:5px;z-index:999}@media (max-width: 390px){.gh-portal-account-footer{padding:0!important}}@media (max-width: 340px){.gh-portal-account-footer{padding:0!important;flex-wrap:wrap;gap:12px}.gh-portal-account-footer .gh-portal-account-footerright{justify-content:flex-start}}.gh-email-suppressed-page-title{margin-bottom:14px}.gh-email-suppressed-page-icon{display:block;width:38px;height:38px;margin:0 auto 18px}.gh-email-suppressed-page-text{padding:0 14px;text-align:center;color:var(--grey6)}.gh-email-faq-footer-text{color:var(--grey8)}.gh-portal-list-detail.email-newsletter .gh-email-faq-page-button{display:block;margin-top:3px}.accountEmail .gh-email-faq-page-button{margin-left:4px}.emailReceivingFAQ .gh-portal-btn-back,.emailReceivingFAQ .gh-portal-btn-back:hover{left:calc(6vmin - 14px)}.emailReceivingFAQ .gh-portal-closeicon-container{right:calc(6vmin - 20px)}@media (max-width: 480px){.emailReceivingFAQ .gh-portal-btn-back,.emailReceivingFAQ .gh-portal-btn-back:hover{left:16px}.emailReceivingFAQ .gh-portal-closeicon-container{right:24px}}.gh-email-faq-page-button{color:var(--brandcolor);cursor:pointer;background:none;transition:color linear .1s;font-size:1.45rem}</style><style>.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion: no-preference){.App-logo{animation:App-logo-spin infinite 20s linear}}.App-header{background-color:#282c34;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
</style></head>
    <body class="home-template tag-getting-started tag-users-groups tag-billing-account tag-faq min-h-screen flex flex-col antialiased overflow-x-hidden text-gray-900 bg-white dark:text-gray-400 dark:bg-gray-900 [&amp;.has-modal]:h-screen [&amp;.has-modal]:overflow-hidden sal-disabled">
        
        <div class="absolute right-0 top-0 -z-10 overflow-hidden">
            <div class="relative w-[600px] h-[600px] -translate-y-2/3 translate-x-2/3 lg:-translate-y-1/2 lg:translate-x-1/2 bg-gradient-to-bl from-accent to-transparent rounded-full blur-[100px] opacity-50"></div>
        </div>

        <div id="viewport" class="min-h-screen flex flex-col">
            <a href="#main" class="group sr-only focus:not-sr-only focus-within:not-sr-only outline-none">
                <span class="relative flex items-center justify-center w-full h-12 font-semibold bg-gray-900 text-gray-50 text-sm group-focus-within:ring group-focus:ring ring-1 ring-inset ring-accent dark:bg-gray-800/60">
                    Skip to main content
                </span>
            </a>       

            <header data-header="" class="group sticky z-50 top-0 min-h-20 lg:h-20 flex flex-wrap flex-none items-center backdrop-blur border-b border-gray-900/5 transition-colors duration-300 [&amp;.stuck]:bg-white/90
        dark:border-gray-50/5 dark:bg-transparent dark:[&amp;.stuck]:bg-gray-900/70
         has-breadcrumbs  
        ">
    <nav class="outer xl:outer-xl flex items-center w-full py-4 group-[.has-breadcrumbs]:lg:min-h-0 group-[.has-breadcrumbs]:min-h-20">
        <div class="inner flex items-center min-h-10">
            <a data-brand="" class="flex-shrink mr-8 font-bold text-lg text-gray-900 dark:text-gray-50  has-logo lg:min-w-logo " href="https://doks.spiritix.co" aria-label="Doks">
                        <img class="max-h-9 w-auto hidden dark:block" src="https://doks.spiritix.co/content/images/2023/07/Logo---Dark-theme.svg" alt="Doks">
                        <img class="max-h-9 w-auto block dark:hidden" src="https://doks.spiritix.co/content/images/2023/05/Logo---Light-theme.svg" alt="Doks">
            </a>

                <ul data-navigation-desktop="" class="navigation hidden lg:flex space-x-2 text-gray-700 dark:text-gray-200" role="list">
             
                <li data-slug="docs" class="relative inline-flex 
                        max-3xl:[&amp;:nth-child(n+6)]:hidden
                            [&amp;:nth-child(n+8)]:hidden
                    ">
                     
                        <a href="https://doks.spiritix.co/" class="[&amp;.external>svg]:inline px-3 py-1.5 inline-flex items-center font-semibold text-sm leading-6 whitespace-nowrap rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700  current  ">                            
                            Docs

                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>
                            <script>
                                (function() {
                                    var link = document.currentScript.parentElement;
                            
                                    if (link.protocol !== "javascript:" && link.hostname !== location.hostname) {
                                        link.classList.add('external');
                                        link.target = "_blank";
                                    }                            
                                })();
                            </script>
                        </a>                    
                </li>
             
                <li data-slug="landing" class="relative inline-flex 
                        max-3xl:[&amp;:nth-child(n+6)]:hidden
                            [&amp;:nth-child(n+8)]:hidden
                    ">
                     
                        <a href="https://doks.spiritix.co/landing/" class="[&amp;.external>svg]:inline px-3 py-1.5 inline-flex items-center font-semibold text-sm leading-6 whitespace-nowrap rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700    ">                            
                            Landing

                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>
                            <script>
                                (function() {
                                    var link = document.currentScript.parentElement;
                            
                                    if (link.protocol !== "javascript:" && link.hostname !== location.hostname) {
                                        link.classList.add('external');
                                        link.target = "_blank";
                                    }                            
                                })();
                            </script>
                        </a>                    
                </li>
             
                <li data-slug="blog" class="relative inline-flex 
                        max-3xl:[&amp;:nth-child(n+6)]:hidden
                            [&amp;:nth-child(n+8)]:hidden
                    ">
                     
                        <button data-dropdown-toggle="" aria-label="Toggle menu" class="[&amp;.open>svg]:rotate-180 peer px-3 py-1.5 inline-flex items-center font-semibold text-sm leading-6 whitespace-nowrap rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 [&amp;.open]:bg-gray-100 dark:[&amp;.open]:bg-gray-700">
                            <span>
                                Blog
                            </span>

                            <svg class="inline flex-shrink-0 w-3.5 h-3.5 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" focusable="false" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
</svg>                        </button>

                        <ul data-dropdown="" class="hidden peer-[.open]:block absolute top-16 -left-1/2 w-64 max-h-[calc(100vh-theme(spacing.24))] py-2 px-3 space-y-1 bg-white ring-1 ring-gray-900/5 shadow-sm rounded-md overflow-y-auto dark:bg-gray-800 dark:ring-white/5 dark:ring-inset" role="list">
                                    <li class="peer peer-[.hidden]:hidden ">
                                        <a href="https://doks.spiritix.co/blog/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700    ">                                            
                                            Blog Minimal

                                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                        </a>                                        
                                    </li>
                                    <li class="peer peer-[.hidden]:hidden ">
                                        <a href="https://doks.spiritix.co/blog-grid/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700    ">                                            
                                            Blog Grid

                                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                        </a>                                        
                                    </li>
                                    <li class="peer peer-[.hidden]:hidden  hidden ">
                                        <a href="https://doks.spiritix.co/changelog/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700    ">                                            
                                            hangelog

                                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                        </a>                                        
                                    </li>
                                    <li class="peer peer-[.hidden]:hidden  hidden ">
                                        <a href="https://doks.spiritix.co/roadmap/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700    ">                                            
                                            oadmap

                                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                        </a>                                        
                                    </li>
                                    <li class="peer peer-[.hidden]:hidden  hidden ">
                                        <a href="https://doks.spiritix.co/showcase/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700    ">                                            
                                            howcase

                                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                        </a>                                        
                                    </li>
                                    <li class="peer peer-[.hidden]:hidden  hidden ">
                                        <a href="https://spiritix.lemonsqueezy.com/checkout/buy/2bcd8fd7-3b62-465f-b838-3d1cd73c4e90" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700 external" target="_blank">                                            
                                            uy Theme

                                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                        </a>                                        
                                    </li>
                                    <li class="peer peer-[.hidden]:hidden  hidden ">
                                        <a href="https://doks.spiritix.co/api/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700    ">                                            
                                            ocs 2 (Collapsible sections)

                                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                        </a>                                        
                                    </li>
                                    <li class="peer peer-[.hidden]:hidden  hidden ">
                                        <a href="https://doks.spiritix.co/guides/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700    ">                                            
                                            ocs 3 (Series, no sections)

                                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                        </a>                                        
                                    </li>
                                    <li class="peer peer-[.hidden]:hidden  hidden ">
                                        <a href="https://doks.spiritix.co/blog/setting-up-apps-and-custom-integrations/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700    ">                                            
                                            ost (Membership)

                                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                        </a>                                        
                                    </li>
                                    <li class="peer peer-[.hidden]:hidden  hidden ">
                                        <a href="https://doks.spiritix.co/tag/content-strategy/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700    ">                                            
                                            ag Page

                                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                        </a>                                        
                                    </li>
                        </ul>
                                    </li>
                                     
                <li data-slug="changelog" class="relative inline-flex 
                        max-3xl:[&amp;:nth-child(n+6)]:hidden
                            [&amp;:nth-child(n+8)]:hidden
                    ">
                     
                        <a href="https://doks.spiritix.co/changelog/" class="[&amp;.external>svg]:inline px-3 py-1.5 inline-flex items-center font-semibold text-sm leading-6 whitespace-nowrap rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700    ">                            
                            Changelog

                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>
                            <script>
                                (function() {
                                    var link = document.currentScript.parentElement;
                            
                                    if (link.protocol !== "javascript:" && link.hostname !== location.hostname) {
                                        link.classList.add('external');
                                        link.target = "_blank";
                                    }                            
                                })();
                            </script>
                        </a>                    
                </li>
             
                <li data-slug="roadmap" class="relative inline-flex 
                        max-3xl:[&amp;:nth-child(n+6)]:hidden
                            [&amp;:nth-child(n+8)]:hidden
                    ">
                     
                        <a href="https://doks.spiritix.co/roadmap/" class="[&amp;.external>svg]:inline px-3 py-1.5 inline-flex items-center font-semibold text-sm leading-6 whitespace-nowrap rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700    ">                            
                            Roadmap

                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>
                            <script>
                                (function() {
                                    var link = document.currentScript.parentElement;
                            
                                    if (link.protocol !== "javascript:" && link.hostname !== location.hostname) {
                                        link.classList.add('external');
                                        link.target = "_blank";
                                    }                            
                                })();
                            </script>
                        </a>                    
                </li>
             
                <li data-slug="showcase" class="relative inline-flex 
                        max-3xl:[&amp;:nth-child(n+6)]:hidden
                            [&amp;:nth-child(n+8)]:hidden
                    ">
                     
                        <a href="https://doks.spiritix.co/showcase/" class="[&amp;.external>svg]:inline px-3 py-1.5 inline-flex items-center font-semibold text-sm leading-6 whitespace-nowrap rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700    ">                            
                            Showcase

                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>
                            <script>
                                (function() {
                                    var link = document.currentScript.parentElement;
                            
                                    if (link.protocol !== "javascript:" && link.hostname !== location.hostname) {
                                        link.classList.add('external');
                                        link.target = "_blank";
                                    }                            
                                })();
                            </script>
                        </a>                    
                </li>
             
                <li data-slug="buy-theme" class="relative inline-flex 
                        max-3xl:[&amp;:nth-child(n+6)]:hidden
                            [&amp;:nth-child(n+8)]:hidden
                    ">
                     
                        <a href="https://spiritix.lemonsqueezy.com/checkout/buy/2bcd8fd7-3b62-465f-b838-3d1cd73c4e90" class="[&amp;.external>svg]:inline px-3 py-1.5 inline-flex items-center font-semibold text-sm leading-6 whitespace-nowrap rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700 external" target="_blank">                            
                            Buy Theme

                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>
                            <script>
                                (function() {
                                    var link = document.currentScript.parentElement;
                            
                                    if (link.protocol !== "javascript:" && link.hostname !== location.hostname) {
                                        link.classList.add('external');
                                        link.target = "_blank";
                                    }                            
                                })();
                            </script>
                        </a>                    
                </li>
             
                <li data-slug="docs-2-collapsible-sections" class="relative inline-flex 
                        max-3xl:[&amp;:nth-child(n+6)]:hidden
                            [&amp;:nth-child(n+8)]:hidden
                    ">
                     
                        <a href="https://doks.spiritix.co/api/" class="[&amp;.external>svg]:inline px-3 py-1.5 inline-flex items-center font-semibold text-sm leading-6 whitespace-nowrap rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700    ">                            
                            Docs 2 (Collapsible sections)

                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>
                            <script>
                                (function() {
                                    var link = document.currentScript.parentElement;
                            
                                    if (link.protocol !== "javascript:" && link.hostname !== location.hostname) {
                                        link.classList.add('external');
                                        link.target = "_blank";
                                    }                            
                                })();
                            </script>
                        </a>                    
                </li>
             
                <li data-slug="docs-3-series-no-sections" class="relative inline-flex 
                        max-3xl:[&amp;:nth-child(n+6)]:hidden
                            [&amp;:nth-child(n+8)]:hidden
                    ">
                     
                        <a href="https://doks.spiritix.co/guides/" class="[&amp;.external>svg]:inline px-3 py-1.5 inline-flex items-center font-semibold text-sm leading-6 whitespace-nowrap rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700    ">                            
                            Docs 3 (Series, no sections)

                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>
                            <script>
                                (function() {
                                    var link = document.currentScript.parentElement;
                            
                                    if (link.protocol !== "javascript:" && link.hostname !== location.hostname) {
                                        link.classList.add('external');
                                        link.target = "_blank";
                                    }                            
                                })();
                            </script>
                        </a>                    
                </li>
             
                <li data-slug="post-membership" class="relative inline-flex 
                        max-3xl:[&amp;:nth-child(n+6)]:hidden
                            [&amp;:nth-child(n+8)]:hidden
                    ">
                     
                        <a href="https://doks.spiritix.co/blog/setting-up-apps-and-custom-integrations/" class="[&amp;.external>svg]:inline px-3 py-1.5 inline-flex items-center font-semibold text-sm leading-6 whitespace-nowrap rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700    ">                            
                            Post (Membership)

                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>
                            <script>
                                (function() {
                                    var link = document.currentScript.parentElement;
                            
                                    if (link.protocol !== "javascript:" && link.hostname !== location.hostname) {
                                        link.classList.add('external');
                                        link.target = "_blank";
                                    }                            
                                })();
                            </script>
                        </a>                    
                </li>
             
                <li data-slug="tag-page" class="relative inline-flex 
                        max-3xl:[&amp;:nth-child(n+6)]:hidden
                            [&amp;:nth-child(n+8)]:hidden
                    ">
                     
                        <a href="https://doks.spiritix.co/tag/content-strategy/" class="[&amp;.external>svg]:inline px-3 py-1.5 inline-flex items-center font-semibold text-sm leading-6 whitespace-nowrap rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700    ">                            
                            Tag Page

                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>
                            <script>
                                (function() {
                                    var link = document.currentScript.parentElement;
                            
                                    if (link.protocol !== "javascript:" && link.hostname !== location.hostname) {
                                        link.classList.add('external');
                                        link.target = "_blank";
                                    }                            
                                })();
                            </script>
                        </a>                    
                </li>
             
                <li data-slug="author-page" class="relative inline-flex 
                        max-3xl:[&amp;:nth-child(n+6)]:hidden
                            [&amp;:nth-child(n+8)]:hidden
                    ">
                     
                        <a href="https://doks.spiritix.co/author/john/" class="[&amp;.external>svg]:inline px-3 py-1.5 inline-flex items-center font-semibold text-sm leading-6 whitespace-nowrap rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700    ">                            
                            Author Page

                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>
                            <script>
                                (function() {
                                    var link = document.currentScript.parentElement;
                            
                                    if (link.protocol !== "javascript:" && link.hostname !== location.hostname) {
                                        link.classList.add('external');
                                        link.target = "_blank";
                                    }                            
                                })();
                            </script>
                        </a>                    
                </li>
             
                <li data-slug="faq-example" class="relative inline-flex 
                        max-3xl:[&amp;:nth-child(n+6)]:hidden
                            [&amp;:nth-child(n+8)]:hidden
                    ">
                     
                        <a href="https://doks.spiritix.co/faq/" class="[&amp;.external>svg]:inline px-3 py-1.5 inline-flex items-center font-semibold text-sm leading-6 whitespace-nowrap rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700    ">                            
                            FAQ Example

                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>
                            <script>
                                (function() {
                                    var link = document.currentScript.parentElement;
                            
                                    if (link.protocol !== "javascript:" && link.hostname !== location.hostname) {
                                        link.classList.add('external');
                                        link.target = "_blank";
                                    }                            
                                })();
                            </script>
                        </a>                    
                </li>
             
                <li data-slug="style-guide" class="relative inline-flex 
                        max-3xl:[&amp;:nth-child(n+6)]:hidden
                            [&amp;:nth-child(n+8)]:hidden
                    ">
                     
                        <a href="https://doks.spiritix.co/style-guide/" class="[&amp;.external>svg]:inline px-3 py-1.5 inline-flex items-center font-semibold text-sm leading-6 whitespace-nowrap rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700    ">                            
                            Style Guide

                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>
                            <script>
                                (function() {
                                    var link = document.currentScript.parentElement;
                            
                                    if (link.protocol !== "javascript:" && link.hostname !== location.hostname) {
                                        link.classList.add('external');
                                        link.target = "_blank";
                                    }                            
                                })();
                            </script>
                        </a>                    
                </li>
             
                <li data-slug="documentation" class="relative inline-flex 
                        max-3xl:[&amp;:nth-child(n+6)]:hidden
                            [&amp;:nth-child(n+8)]:hidden
                    ">
                     
                        <a href="https://spiritix.co/themes/doks/" class="[&amp;.external>svg]:inline px-3 py-1.5 inline-flex items-center font-semibold text-sm leading-6 whitespace-nowrap rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700 external" target="_blank">                            
                            Documentation

                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>
                            <script>
                                (function() {
                                    var link = document.currentScript.parentElement;
                            
                                    if (link.protocol !== "javascript:" && link.hostname !== location.hostname) {
                                        link.classList.add('external');
                                        link.target = "_blank";
                                    }                            
                                })();
                            </script>
                        </a>                    
                </li>

        <li class="inline-flex relative 
                    max-3xl:[&amp;:nth-child(-n+6)]:hidden
                        3xl:[&amp;:nth-child(-n+8)]:hidden
                ">
            <button data-dropdown-toggle="" aria-label="Toggle menu" class="peer px-1.5 py-1.5 rounded-lg hover:bg-gray-100 [&amp;.open]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.open]:bg-gray-700">
                <svg class="relative w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" focusable="false" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"></path>
</svg>
            </button>     

            <ul data-dropdown="" class="hidden peer-[.open]:block absolute top-16 -left-1/2 max-xl:-right-1/2 max-xl:left-auto w-64 max-h-[calc(100vh-theme(spacing.24))] py-2 px-3 space-y-1 bg-white ring-1 ring-gray-900/5 shadow-sm rounded-md overflow-y-auto dark:bg-gray-800 dark:ring-white/5 dark:ring-inset" role="list">
                     
                        <li data-slug="docs" class="hidden
                                max-3xl:[&amp;:nth-child(n+6)]:block
                                    [&amp;:nth-child(n+8)]:block
                            ">
                             
                                <a href="https://doks.spiritix.co/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700  current ">                                    
                                    Docs

                                    <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                </a>
                        </li>
                     
                        <li data-slug="landing" class="hidden
                                max-3xl:[&amp;:nth-child(n+6)]:block
                                    [&amp;:nth-child(n+8)]:block
                            ">
                             
                                <a href="https://doks.spiritix.co/landing/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">                                    
                                    Landing

                                    <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                </a>
                        </li>
                     
                        <li data-slug="blog" class="hidden
                                max-3xl:[&amp;:nth-child(n+6)]:block
                                    [&amp;:nth-child(n+8)]:block
                            ">
                             
                                <button data-dropdown-toggle="" aria-label="Toggle menu" class="[&amp;.open>svg]:rotate-180 peer w-full relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700">
                                    <span class="mr-auto">
                                        Blog
                                    </span>

                                    <svg class="inline flex-shrink-0 w-3.5 h-3.5 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" focusable="false" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
</svg>                                </button>        

                                <ul data-dropdown="" class="pl-3 space-y-1 mt-1 hidden peer-[.open]:block" role="list">
                                            <li class="peer peer-[.hidden]:hidden ">
                                                <a href="https://doks.spiritix.co/blog/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">                                                    
                                                    Blog Minimal

                                                    <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                                </a>   
                                            </li>
                                            <li class="peer peer-[.hidden]:hidden ">
                                                <a href="https://doks.spiritix.co/blog-grid/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">                                                    
                                                    Blog Grid

                                                    <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                                </a>   
                                            </li>
                                            <li class="peer peer-[.hidden]:hidden  hidden ">
                                                <a href="https://doks.spiritix.co/changelog/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">                                                    
                                                    hangelog

                                                    <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                                </a>   
                                            </li>
                                            <li class="peer peer-[.hidden]:hidden  hidden ">
                                                <a href="https://doks.spiritix.co/roadmap/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">                                                    
                                                    oadmap

                                                    <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                                </a>   
                                            </li>
                                            <li class="peer peer-[.hidden]:hidden  hidden ">
                                                <a href="https://doks.spiritix.co/showcase/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">                                                    
                                                    howcase

                                                    <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                                </a>   
                                            </li>
                                            <li class="peer peer-[.hidden]:hidden  hidden ">
                                                <a href="https://spiritix.lemonsqueezy.com/checkout/buy/2bcd8fd7-3b62-465f-b838-3d1cd73c4e90" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700 external" target="_blank">                                                    
                                                    uy Theme

                                                    <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                                </a>   
                                            </li>
                                            <li class="peer peer-[.hidden]:hidden  hidden ">
                                                <a href="https://doks.spiritix.co/api/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">                                                    
                                                    ocs 2 (Collapsible sections)

                                                    <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                                </a>   
                                            </li>
                                            <li class="peer peer-[.hidden]:hidden  hidden ">
                                                <a href="https://doks.spiritix.co/guides/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">                                                    
                                                    ocs 3 (Series, no sections)

                                                    <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                                </a>   
                                            </li>
                                            <li class="peer peer-[.hidden]:hidden  hidden ">
                                                <a href="https://doks.spiritix.co/blog/setting-up-apps-and-custom-integrations/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">                                                    
                                                    ost (Membership)

                                                    <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                                </a>   
                                            </li>
                                            <li class="peer peer-[.hidden]:hidden  hidden ">
                                                <a href="https://doks.spiritix.co/tag/content-strategy/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">                                                    
                                                    ag Page

                                                    <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                                </a>   
                                            </li>
                                </ul>                                                    
                                                    </li>
                                                             
                        <li data-slug="changelog" class="hidden
                                max-3xl:[&amp;:nth-child(n+6)]:block
                                    [&amp;:nth-child(n+8)]:block
                            ">
                             
                                <a href="https://doks.spiritix.co/changelog/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">                                    
                                    Changelog

                                    <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                </a>
                        </li>
                     
                        <li data-slug="roadmap" class="hidden
                                max-3xl:[&amp;:nth-child(n+6)]:block
                                    [&amp;:nth-child(n+8)]:block
                            ">
                             
                                <a href="https://doks.spiritix.co/roadmap/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">                                    
                                    Roadmap

                                    <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                </a>
                        </li>
                     
                        <li data-slug="showcase" class="hidden
                                max-3xl:[&amp;:nth-child(n+6)]:block
                                    [&amp;:nth-child(n+8)]:block
                            ">
                             
                                <a href="https://doks.spiritix.co/showcase/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">                                    
                                    Showcase

                                    <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                </a>
                        </li>
                     
                        <li data-slug="buy-theme" class="hidden
                                max-3xl:[&amp;:nth-child(n+6)]:block
                                    [&amp;:nth-child(n+8)]:block
                            ">
                             
                                <a href="https://spiritix.lemonsqueezy.com/checkout/buy/2bcd8fd7-3b62-465f-b838-3d1cd73c4e90" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700 external" target="_blank">                                    
                                    Buy Theme

                                    <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                </a>
                        </li>
                     
                        <li data-slug="docs-2-collapsible-sections" class="hidden
                                max-3xl:[&amp;:nth-child(n+6)]:block
                                    [&amp;:nth-child(n+8)]:block
                            ">
                             
                                <a href="https://doks.spiritix.co/api/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">                                    
                                    Docs 2 (Collapsible sections)

                                    <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                </a>
                        </li>
                     
                        <li data-slug="docs-3-series-no-sections" class="hidden
                                max-3xl:[&amp;:nth-child(n+6)]:block
                                    [&amp;:nth-child(n+8)]:block
                            ">
                             
                                <a href="https://doks.spiritix.co/guides/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">                                    
                                    Docs 3 (Series, no sections)

                                    <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                </a>
                        </li>
                     
                        <li data-slug="post-membership" class="hidden
                                max-3xl:[&amp;:nth-child(n+6)]:block
                                    [&amp;:nth-child(n+8)]:block
                            ">
                             
                                <a href="https://doks.spiritix.co/blog/setting-up-apps-and-custom-integrations/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">                                    
                                    Post (Membership)

                                    <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                </a>
                        </li>
                     
                        <li data-slug="tag-page" class="hidden
                                max-3xl:[&amp;:nth-child(n+6)]:block
                                    [&amp;:nth-child(n+8)]:block
                            ">
                             
                                <a href="https://doks.spiritix.co/tag/content-strategy/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">                                    
                                    Tag Page

                                    <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                </a>
                        </li>
                     
                        <li data-slug="author-page" class="hidden
                                max-3xl:[&amp;:nth-child(n+6)]:block
                                    [&amp;:nth-child(n+8)]:block
                            ">
                             
                                <a href="https://doks.spiritix.co/author/john/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">                                    
                                    Author Page

                                    <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                </a>
                        </li>
                     
                        <li data-slug="faq-example" class="hidden
                                max-3xl:[&amp;:nth-child(n+6)]:block
                                    [&amp;:nth-child(n+8)]:block
                            ">
                             
                                <a href="https://doks.spiritix.co/faq/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">                                    
                                    FAQ Example

                                    <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                </a>
                        </li>
                     
                        <li data-slug="style-guide" class="hidden
                                max-3xl:[&amp;:nth-child(n+6)]:block
                                    [&amp;:nth-child(n+8)]:block
                            ">
                             
                                <a href="https://doks.spiritix.co/style-guide/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">                                    
                                    Style Guide

                                    <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                </a>
                        </li>
                     
                        <li data-slug="documentation" class="hidden
                                max-3xl:[&amp;:nth-child(n+6)]:block
                                    [&amp;:nth-child(n+8)]:block
                            ">
                             
                                <a href="https://spiritix.co/themes/doks/" class="[&amp;.external>svg]:inline relative flex items-center px-3 py-1.5 font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700 external" target="_blank">                                    
                                    Documentation

                                    <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                </a>
                        </li>
            </ul>
        </li>
    </ul>


            <div data-header-buttons="" class="hidden lg:flex items-center mx-5 pl-5 space-x-1 border-l text-gray-400 border-gray-900/10 dark:border-gray-50/10  max-4xl:[&amp;_:nth-child(n_+_6)]:hidden ">
                <button data-theme-toggle="" class="h-9 w-9 flex items-center justify-center flex-shrink-0 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-300" title="Change theme" aria-label="Change theme">
                    <svg class="dark:hidden w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" focusable="false" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
                    <svg class="hidden dark:inline w-6 h-6 relative -top-px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path>
  <path d="M17 4a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2"></path>
</svg>                </button>

                

                <a data-social-link="" class="[&amp;:nth-child(n_+_7)]:hidden h-9 w-9 flex items-center justify-center flex-shrink-0 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="https://spiritix.co" title="Github" aria-label="Github" target="_blank">
                    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" focusable="false" aria-hidden="true">
    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path>
</svg>                </a>
                <a data-social-link="" class="[&amp;:nth-child(n_+_7)]:hidden h-9 w-9 flex items-center justify-center flex-shrink-0 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="https://spiritix.co" title="Discord" aria-label="Discord" target="_blank">
                    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" focusable="false" aria-hidden="true">
    <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"></path>
</svg>                </a>
            </div>

            <button data-ghost-search="" class="hidden lg:max-xl:flex ml-auto h-9 w-9 items-center justify-center flex-shrink-0 rounded-lg text-gray-500 dark:text-gray-400 bg-white/30 dark:bg-transparent hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-300" title="Quick search..." aria-label="Quick search...">
                <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
    <circle cx="11" cy="11" r="8"></circle>
    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>            </button>        
            <button data-ghost-search="" class="flex-shrink hidden xl:flex items-center h-9 w-56 min-w-0 px-4 ml-auto overflow-hidden ring-1 ring-gray-900/10 rounded-md text-gray-600/[0.82] text-sm bg-white/95 hover:bg-gray-50/90 hover:ring-gray-900/20 dark:text-gray-400/90 dark:bg-gray-800 dark:hover:bg-gray-700 dark:ring-inset dark:ring-gray-50/10">
                <svg class="flex-none w-5 h-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
    <circle cx="11" cy="11" r="8"></circle>
    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>                <span class="mx-2 truncate">Quick search...</span>
                <span class="ml-auto">⌘K</span>
            </button>

            <div class="flex lg:hidden items-center ml-auto -mr-1.5 space-x-2 text-gray-400">
                <button data-theme-toggle="" class="w-8 h-8 flex items-center justify-center" title="Change theme" aria-label="Change theme">
                    <svg class="dark:hidden w-6 h-6 hover:text-gray-700 dark:hover:text-gray-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" focusable="false" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
                    <svg class="hidden dark:inline w-5 h-5 hover:text-gray-700 dark:hover:text-gray-100 relative -top-px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path>
  <path d="M17 4a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2"></path>
</svg>                </button>
                <button data-ghost-search="" class="w-8 h-8 flex items-center justify-center" title="Quick search..." aria-label="Quick search...">
                    <svg class="w-5 h-5 hover:text-gray-700 dark:hover:text-gray-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
    <circle cx="11" cy="11" r="8"></circle>
    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>                </button>
                <button data-mobile-menu-toggle="" class="w-8 h-8 flex items-center justify-center" title="Toggle menu" aria-label="Toggle menu">
                    <svg class="w-5 h-5 hover:text-gray-700 dark:hover:text-gray-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" focusable="false" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M4 8h16M4 16h16"></path>
</svg>
                </button>
            </div>        
        </div>
    </nav>

    <div data-breadcrumbs="" class="outer xl:outer-xl hidden group-[.has-breadcrumbs]:lg:hidden group-[.has-breadcrumbs]:flex items-center w-full h-10 text-2xs border-t border-gray-900/5 dark:border-gray-50/5 ">
        <div class="inner flex items-center overflow-hidden">
            <button data-breadcrumbs-button="" class="flex-none flex items-center justify-center h-8 w-8 -ml-1.5 mr-1.5" aria-label="Toggle menu">
                <svg class="flex-none h-5 w-5 text-gray-400 hover:text-gray-700 dark:hover:text-gray-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" focusable="false" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M4 8h16M4 16h16"></path>
</svg>
            </button>

            <span data-breadcrumbs-section="" class="hidden flex-none truncate text-gray-500 dark:text-gray-400">
                <span data-breadcrumbs-section-text=""></span>
                <span class="mx-2">/</span>
            </span>
            <span data-breadcrumbs-current="" class="truncate font-semibold text-gray-900 dark:text-gray-200">Introduction</span>
        </div>
    </div>    
</header>

<nav data-mobile-menu="" class="group invisible flex lg:hidden fixed inset-0 -z-10 [&amp;.open]:visible [&amp;.open]:z-50 ">
    <div data-mobile-menu-close="" class="fixed inset-0 bg-black/20 backdrop-blur-sm"></div>

    <div class="fixed top-0 right-0 bottom-0 w-full max-w-xs bg-white shadow-lg font-semibold text-gray-900 transition ease-out translate-x-full group-[.open]:translate-x-0 dark:bg-gray-800 dark:text-gray-200">
        <div class="relative pl-9 pr-16 pb-6 pt-14 h-full overflow-y-scroll overflow-x-hidden">
            <button data-mobile-menu-close="" aria-label="Close" class="fixed flex items-center justify-center top-4 right-3 p-2 text-gray-400 hover:text-gray-700 dark:hover:text-gray-200">
                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" focusable="false" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
            </button>

            <div class="flex flex-col min-h-full">
                    <ul data-navigation-mobile="" class="navigation space-y-2 -mx-3">
             
                <li data-slug="docs">
                     
                        <a href="https://doks.spiritix.co/" class="[&amp;.external>svg]:inline px-3 py-1.5 w-full flex items-center font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700  current ">
                            Docs

                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                        </a>                    
                </li>
             
                <li data-slug="landing">
                     
                        <a href="https://doks.spiritix.co/landing/" class="[&amp;.external>svg]:inline px-3 py-1.5 w-full flex items-center font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">
                            Landing

                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                        </a>                    
                </li>
             
                <li data-slug="blog">
                     
                        <button data-dropdown-toggle="" aria-label="Toggle menu" class="[&amp;.open>svg]:rotate-180 peer px-3 py-1.5 w-full flex items-center font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700">
                            <span class="mr-auto">
                                Blog
                            </span>

                            <svg class="inline flex-shrink-0 w-3.5 h-3.5 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" focusable="false" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
</svg>                        </button>
                        <ul data-dropdown="" class="pl-3 space-y-1 mt-1 hidden peer-[.open]:block" role="list">
                                    <li class="peer peer-[.hidden]:hidden ">
                                        <a href="https://doks.spiritix.co/blog/" class="[&amp;.external>svg]:inline px-3 py-1.5 w-full flex items-center font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">
                                            Blog Minimal

                                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                        </a>   
                                    </li>
                                    <li class="peer peer-[.hidden]:hidden ">
                                        <a href="https://doks.spiritix.co/blog-grid/" class="[&amp;.external>svg]:inline px-3 py-1.5 w-full flex items-center font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">
                                            Blog Grid

                                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                        </a>   
                                    </li>
                                    <li class="peer peer-[.hidden]:hidden  hidden ">
                                        <a href="https://doks.spiritix.co/changelog/" class="[&amp;.external>svg]:inline px-3 py-1.5 w-full flex items-center font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">
                                            hangelog

                                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                        </a>   
                                    </li>
                                    <li class="peer peer-[.hidden]:hidden  hidden ">
                                        <a href="https://doks.spiritix.co/roadmap/" class="[&amp;.external>svg]:inline px-3 py-1.5 w-full flex items-center font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">
                                            oadmap

                                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                        </a>   
                                    </li>
                                    <li class="peer peer-[.hidden]:hidden  hidden ">
                                        <a href="https://doks.spiritix.co/showcase/" class="[&amp;.external>svg]:inline px-3 py-1.5 w-full flex items-center font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">
                                            howcase

                                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                        </a>   
                                    </li>
                                    <li class="peer peer-[.hidden]:hidden  hidden ">
                                        <a href="https://spiritix.lemonsqueezy.com/checkout/buy/2bcd8fd7-3b62-465f-b838-3d1cd73c4e90" class="[&amp;.external>svg]:inline px-3 py-1.5 w-full flex items-center font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700 external" target="_blank">
                                            uy Theme

                                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                        </a>   
                                    </li>
                                    <li class="peer peer-[.hidden]:hidden  hidden ">
                                        <a href="https://doks.spiritix.co/api/" class="[&amp;.external>svg]:inline px-3 py-1.5 w-full flex items-center font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">
                                            ocs 2 (Collapsible sections)

                                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                        </a>   
                                    </li>
                                    <li class="peer peer-[.hidden]:hidden  hidden ">
                                        <a href="https://doks.spiritix.co/guides/" class="[&amp;.external>svg]:inline px-3 py-1.5 w-full flex items-center font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">
                                            ocs 3 (Series, no sections)

                                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                        </a>   
                                    </li>
                                    <li class="peer peer-[.hidden]:hidden  hidden ">
                                        <a href="https://doks.spiritix.co/blog/setting-up-apps-and-custom-integrations/" class="[&amp;.external>svg]:inline px-3 py-1.5 w-full flex items-center font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">
                                            ost (Membership)

                                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                        </a>   
                                    </li>
                                    <li class="peer peer-[.hidden]:hidden  hidden ">
                                        <a href="https://doks.spiritix.co/tag/content-strategy/" class="[&amp;.external>svg]:inline px-3 py-1.5 w-full flex items-center font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">
                                            ag Page

                                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                                        </a>   
                                    </li>
                        </ul>
                                    </li>
                                     
                <li data-slug="changelog">
                     
                        <a href="https://doks.spiritix.co/changelog/" class="[&amp;.external>svg]:inline px-3 py-1.5 w-full flex items-center font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">
                            Changelog

                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                        </a>                    
                </li>
             
                <li data-slug="roadmap">
                     
                        <a href="https://doks.spiritix.co/roadmap/" class="[&amp;.external>svg]:inline px-3 py-1.5 w-full flex items-center font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">
                            Roadmap

                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                        </a>                    
                </li>
             
                <li data-slug="showcase">
                     
                        <a href="https://doks.spiritix.co/showcase/" class="[&amp;.external>svg]:inline px-3 py-1.5 w-full flex items-center font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">
                            Showcase

                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                        </a>                    
                </li>
             
                <li data-slug="buy-theme">
                     
                        <a href="https://spiritix.lemonsqueezy.com/checkout/buy/2bcd8fd7-3b62-465f-b838-3d1cd73c4e90" class="[&amp;.external>svg]:inline px-3 py-1.5 w-full flex items-center font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700 external" target="_blank">
                            Buy Theme

                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                        </a>                    
                </li>
             
                <li data-slug="docs-2-collapsible-sections">
                     
                        <a href="https://doks.spiritix.co/api/" class="[&amp;.external>svg]:inline px-3 py-1.5 w-full flex items-center font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">
                            Docs 2 (Collapsible sections)

                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                        </a>                    
                </li>
             
                <li data-slug="docs-3-series-no-sections">
                     
                        <a href="https://doks.spiritix.co/guides/" class="[&amp;.external>svg]:inline px-3 py-1.5 w-full flex items-center font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">
                            Docs 3 (Series, no sections)

                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                        </a>                    
                </li>
             
                <li data-slug="post-membership">
                     
                        <a href="https://doks.spiritix.co/blog/setting-up-apps-and-custom-integrations/" class="[&amp;.external>svg]:inline px-3 py-1.5 w-full flex items-center font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">
                            Post (Membership)

                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                        </a>                    
                </li>
             
                <li data-slug="tag-page">
                     
                        <a href="https://doks.spiritix.co/tag/content-strategy/" class="[&amp;.external>svg]:inline px-3 py-1.5 w-full flex items-center font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">
                            Tag Page

                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                        </a>                    
                </li>
             
                <li data-slug="author-page">
                     
                        <a href="https://doks.spiritix.co/author/john/" class="[&amp;.external>svg]:inline px-3 py-1.5 w-full flex items-center font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">
                            Author Page

                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                        </a>                    
                </li>
             
                <li data-slug="faq-example">
                     
                        <a href="https://doks.spiritix.co/faq/" class="[&amp;.external>svg]:inline px-3 py-1.5 w-full flex items-center font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">
                            FAQ Example

                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                        </a>                    
                </li>
             
                <li data-slug="style-guide">
                     
                        <a href="https://doks.spiritix.co/style-guide/" class="[&amp;.external>svg]:inline px-3 py-1.5 w-full flex items-center font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700   ">
                            Style Guide

                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                        </a>                    
                </li>
             
                <li data-slug="documentation">
                     
                        <a href="https://spiritix.co/themes/doks/" class="[&amp;.external>svg]:inline px-3 py-1.5 w-full flex items-center font-semibold text-sm leading-6 rounded-lg hover:bg-gray-100 [&amp;.current]:bg-gray-100 [&amp;.current-parent]:bg-gray-100 dark:hover:bg-gray-700 dark:[&amp;.current]:bg-gray-700 dark:[&amp;.current-parent]:bg-gray-700 external" target="_blank">
                            Documentation

                            <svg class="hidden flex-shrink-0 w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                        </a>                    
                </li>
    </ul>


                <div class="mt-6 pt-4 border-t border-gray-900/10 dark:border-gray-50/5">
                    <div class="flex flex-wrap -ml-2 text-gray-400">
                        

                <a data-social-link="" class="mr-2 h-9 w-9 flex items-center justify-center flex-shrink-0 rounded-lg hover:text-gray-700 dark:hover:text-gray-200" href="https://spiritix.co" title="Github" aria-label="Github" target="_blank">
                    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" focusable="false" aria-hidden="true">
    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path>
</svg>                </a>
                <a data-social-link="" class="mr-2 h-9 w-9 flex items-center justify-center flex-shrink-0 rounded-lg hover:text-gray-700 dark:hover:text-gray-200" href="https://spiritix.co" title="Discord" aria-label="Discord" target="_blank">
                    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" focusable="false" aria-hidden="true">
    <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"></path>
</svg>                </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>
            <main id="main" tabindex="-1" class="flex-none outline-none">
                


    
    
    
    <div class="outer xl:outer-xl">
    <div class="inner">
        <div class="group flex relative     ">
            <div class="hidden lg:block absolute top-0 left-0 h-full w-screen -translate-x-full 
                    group-[.has-sidebar-transparent]/html:hidden">
                <div class="sticky top-20 w-full h-[calc(100vh_-_theme(spacing.20))] bg-gray-50 dark:bg-gray-800 group-[.has-sidebar-dark]/html:bg-gray-900 group-[.has-sidebar-dark]/html:dark:bg-gray-950"></div>
            </div>

            <div data-docs-menu="" class="group fixed -left-full invisible lg:visible lg:h-[calc(100vh_-_theme(spacing.20))] lg:sticky lg:left-0 lg:top-20 flex-none overflow-hidden
                [&amp;.open]:max-lg:visible [&amp;.open]:max-lg:z-50 [&amp;.open]:max-lg:inset-0 ">

                <div data-docs-menu-close="" class="hidden group-[.open]:max-lg:block fixed -z-10 inset-0 bg-black/20 backdrop-blur-sm"></div>   

                    <div class="docs-menu h-full w-full max-w-xs lg:w-72 px-10 lg:pl-0 py-16 relative z-10 bg-gray-50 dark:bg-gray-800 overflow-x-hidden overflow-y-auto 
                        max-lg:pl-8 max-lg:pr-12 max-lg:-translate-x-full group-[.open]:max-lg:translate-x-0 group-[.open]:max-lg:shadow-lg group-[.open]:max-lg:transition group-[.open]:max-lg:ease-out
                        group-[.has-sidebar-transparent]/html:lg:bg-transparent group-[.has-sidebar-transparent]/html:lg:dark:bg-transparent group-[.has-sidebar-transparent]/html:lg:border-r group-[.has-sidebar-transparent]/html:lg:border-gray-900/5 group-[.has-sidebar-transparent]/html:lg:dark:border-gray-50/5
                        group-[.has-sidebar-dark]/html:bg-gray-900 group-[.has-sidebar-dark.dark]/html:bg-gray-950
                        ">
                        <div class="sticky top-0 h-0 w-full z-10">
                            <button data-docs-menu-close="" aria-label="Close" class="-translate-y-12 translate-x-full hidden group-[.open]:max-lg:flex items-center justify-center p-2 ml-auto rounded-md text-gray-400 hover:text-gray-700 dark:hover:text-gray-100 bg-gray-50 dark:bg-gray-800 group-[.has-sidebar-dark]/html:bg-gray-900 group-[.has-sidebar-dark.dark]/html:bg-gray-950">
                                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" focusable="false" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
                            </button>    
                        </div>
                        <ul role="list" class="text-sm space-y-8 group-[.no-sections]:space-y-0">
                            <li data-docs-section="">
                                <ul class="space-y-4 border-l-2 border-gray-900/10 dark:border-gray-50/10" role="list">
                                    <li class="relative">
                                        <a href="https://doks.spiritix.co/docs/" data-title="Introduction" class="group relative flex  current ">
                                            <span class="h-5 flex-none mr-3 group-[.current]:mr-2 flex items-center">
                                                <span class="flex-none w-4 h-0.5 group-[.current]:w-2 bg-gray-900/10 dark:bg-gray-50/10"></span>
                                                <span class="hidden group-[.current]:flex relative flex-none items-center justify-center w-3 h-3 rounded-full overflow-hidden before:block before:opacity-20 before:bg-accent before:absolute before:inset-0 after:block after:bg-accent after:w-1.5 after:h-1.5 after:rounded-full"></span>
                                            </span>
                                            <span class="leading-5 text-gray-500 hover:text-gray-600 group-[.current]:font-semibold group-[.current]:text-accent dark:text-gray-400 dark:hover:text-gray-300 group-[.current]:dark:hover:text-accent">
                                                Introduction
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                            </li>

                                <li data-docs-section="" class="group/ds ">
                                    <h3 data-docs-section-heading="" class="group/dh relative w-full font-semibold dark:text-gray-50 group-[.no-sections]:hidden  ">
                                            Getting Started

                                        <button class=" hidden  absolute top-0 right-0 w-5 h-5 rounded flex-shrink-0 items-center justify-center translate-x-full group-hover/dh:bg-gray-900/5 dark:group-hover/dh:bg-gray-50/10" aria-label="Toggle menu">
                                            <svg class="w-3.5 h-3.5 text-gray-500 dark:text-gray-400 group-[.open]/ds:rotate-90" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" focusable="false" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path>
</svg>                                        </button>
                                    </h3>
                                            <ul class="group-[.open]/ds:block  mt-5 space-y-4 border-l-2 border-gray-900/10 dark:border-gray-50/10 group-[.no-sections]:pt-4 group-[.no-sections]:mt-0" role="list">
                                                    <li class="relative">
                                                        <a href="https://doks.spiritix.co/creating-a-new-conversation/" class="group relative flex scroll-m-10" data-section="Getting Started" data-slug="creating-a-new-conversation" data-title="Creating a new conversation">
                                                            <span class="h-5 flex-none mr-3 group-[.current]:mr-2 flex items-center">
                                                                <span class="flex-none w-4 h-0.5 group-[.current]:w-2 bg-gray-900/10 dark:bg-gray-50/10"></span>
                                                                <span class="hidden group-[.current]:flex relative flex-none items-center justify-center w-3 h-3 rounded-full overflow-hidden before:block before:opacity-20 before:bg-accent before:absolute before:inset-0 after:block after:bg-accent after:w-1.5 after:h-1.5 after:rounded-full"></span>
                                                            </span>
                                                            <span class="leading-5 text-gray-500 hover:text-gray-600 group-[.current]:font-semibold group-[.current]:text-accent dark:text-gray-400 dark:hover:text-gray-300 group-[.current]:dark:hover:text-accent">
                                                                Creating a new conversation
                                                            </span>

                                                        </a>
                                                    </li>
                                                    <li class="relative">
                                                        <a href="https://doks.spiritix.co/adding-internal-notes/" class="group relative flex scroll-m-10" data-section="Getting Started" data-slug="adding-internal-notes" data-title="Adding internal notes">
                                                            <span class="h-5 flex-none mr-3 group-[.current]:mr-2 flex items-center">
                                                                <span class="flex-none w-4 h-0.5 group-[.current]:w-2 bg-gray-900/10 dark:bg-gray-50/10"></span>
                                                                <span class="hidden group-[.current]:flex relative flex-none items-center justify-center w-3 h-3 rounded-full overflow-hidden before:block before:opacity-20 before:bg-accent before:absolute before:inset-0 after:block after:bg-accent after:w-1.5 after:h-1.5 after:rounded-full"></span>
                                                            </span>
                                                            <span class="leading-5 text-gray-500 hover:text-gray-600 group-[.current]:font-semibold group-[.current]:text-accent dark:text-gray-400 dark:hover:text-gray-300 group-[.current]:dark:hover:text-accent">
                                                                Adding internal notes
                                                            </span>

                                                        </a>
                                                    </li>
                                                    <li class="relative">
                                                        <a href="https://doks.spiritix.co/assigning-conversations-and-changing-status/" class="group relative flex scroll-m-10" data-section="Getting Started" data-slug="assigning-conversations-and-changing-status" data-title="Assigning conversations and changing status">
                                                            <span class="h-5 flex-none mr-3 group-[.current]:mr-2 flex items-center">
                                                                <span class="flex-none w-4 h-0.5 group-[.current]:w-2 bg-gray-900/10 dark:bg-gray-50/10"></span>
                                                                <span class="hidden group-[.current]:flex relative flex-none items-center justify-center w-3 h-3 rounded-full overflow-hidden before:block before:opacity-20 before:bg-accent before:absolute before:inset-0 after:block after:bg-accent after:w-1.5 after:h-1.5 after:rounded-full"></span>
                                                            </span>
                                                            <span class="leading-5 text-gray-500 hover:text-gray-600 group-[.current]:font-semibold group-[.current]:text-accent dark:text-gray-400 dark:hover:text-gray-300 group-[.current]:dark:hover:text-accent">
                                                                Assigning conversations and changing status
                                                            </span>

                                                        </a>
                                                    </li>
                                                    <li class="relative">
                                                        <a href="https://doks.spiritix.co/configuring-your-inbox-view/" class="group relative flex scroll-m-10" data-section="Getting Started" data-slug="configuring-your-inbox-view" data-title="Configuring your inbox view">
                                                            <span class="h-5 flex-none mr-3 group-[.current]:mr-2 flex items-center">
                                                                <span class="flex-none w-4 h-0.5 group-[.current]:w-2 bg-gray-900/10 dark:bg-gray-50/10"></span>
                                                                <span class="hidden group-[.current]:flex relative flex-none items-center justify-center w-3 h-3 rounded-full overflow-hidden before:block before:opacity-20 before:bg-accent before:absolute before:inset-0 after:block after:bg-accent after:w-1.5 after:h-1.5 after:rounded-full"></span>
                                                            </span>
                                                            <span class="leading-5 text-gray-500 hover:text-gray-600 group-[.current]:font-semibold group-[.current]:text-accent dark:text-gray-400 dark:hover:text-gray-300 group-[.current]:dark:hover:text-accent">
                                                                Configuring your inbox view
                                                            </span>

                                                        </a>
                                                    </li>
                                                    <li class="relative">
                                                        <a href="https://doks.spiritix.co/snoozing-a-conversation/" class="group relative flex scroll-m-10" data-section="Getting Started" data-slug="snoozing-a-conversation" data-title="Snoozing a conversation">
                                                            <span class="h-5 flex-none mr-3 group-[.current]:mr-2 flex items-center">
                                                                <span class="flex-none w-4 h-0.5 group-[.current]:w-2 bg-gray-900/10 dark:bg-gray-50/10"></span>
                                                                <span class="hidden group-[.current]:flex relative flex-none items-center justify-center w-3 h-3 rounded-full overflow-hidden before:block before:opacity-20 before:bg-accent before:absolute before:inset-0 after:block after:bg-accent after:w-1.5 after:h-1.5 after:rounded-full"></span>
                                                            </span>
                                                            <span class="leading-5 text-gray-500 hover:text-gray-600 group-[.current]:font-semibold group-[.current]:text-accent dark:text-gray-400 dark:hover:text-gray-300 group-[.current]:dark:hover:text-accent">
                                                                Snoozing a conversation
                                                            </span>

                                                        </a>
                                                    </li>
                                                    <li class="relative">
                                                        <a href="https://doks.spiritix.co/creating-and-using-canned-replies/" class="group relative flex scroll-m-10" data-section="Getting Started" data-slug="creating-and-using-canned-replies" data-title="Creating and using canned replies">
                                                            <span class="h-5 flex-none mr-3 group-[.current]:mr-2 flex items-center">
                                                                <span class="flex-none w-4 h-0.5 group-[.current]:w-2 bg-gray-900/10 dark:bg-gray-50/10"></span>
                                                                <span class="hidden group-[.current]:flex relative flex-none items-center justify-center w-3 h-3 rounded-full overflow-hidden before:block before:opacity-20 before:bg-accent before:absolute before:inset-0 after:block after:bg-accent after:w-1.5 after:h-1.5 after:rounded-full"></span>
                                                            </span>
                                                            <span class="leading-5 text-gray-500 hover:text-gray-600 group-[.current]:font-semibold group-[.current]:text-accent dark:text-gray-400 dark:hover:text-gray-300 group-[.current]:dark:hover:text-accent">
                                                                Creating and using canned replies
                                                            </span>

                                                        </a>
                                                    </li>
                                            </ul>
                                </li>
                                <li data-docs-section="" class="group/ds ">
                                    <h3 data-docs-section-heading="" class="group/dh relative w-full font-semibold dark:text-gray-50 group-[.no-sections]:hidden  ">
                                            Users &amp; Groups

                                        <button class=" hidden  absolute top-0 right-0 w-5 h-5 rounded flex-shrink-0 items-center justify-center translate-x-full group-hover/dh:bg-gray-900/5 dark:group-hover/dh:bg-gray-50/10" aria-label="Toggle menu">
                                            <svg class="w-3.5 h-3.5 text-gray-500 dark:text-gray-400 group-[.open]/ds:rotate-90" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" focusable="false" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path>
</svg>                                        </button>
                                    </h3>
                                            <ul class="group-[.open]/ds:block  mt-5 space-y-4 border-l-2 border-gray-900/10 dark:border-gray-50/10 group-[.no-sections]:pt-4 group-[.no-sections]:mt-0" role="list">
                                                    <li class="relative">
                                                        <a href="https://doks.spiritix.co/creating-a-group/" class="group relative flex scroll-m-10" data-section="Users &amp; Groups" data-slug="creating-a-group" data-title="Creating a group">
                                                            <span class="h-5 flex-none mr-3 group-[.current]:mr-2 flex items-center">
                                                                <span class="flex-none w-4 h-0.5 group-[.current]:w-2 bg-gray-900/10 dark:bg-gray-50/10"></span>
                                                                <span class="hidden group-[.current]:flex relative flex-none items-center justify-center w-3 h-3 rounded-full overflow-hidden before:block before:opacity-20 before:bg-accent before:absolute before:inset-0 after:block after:bg-accent after:w-1.5 after:h-1.5 after:rounded-full"></span>
                                                            </span>
                                                            <span class="leading-5 text-gray-500 hover:text-gray-600 group-[.current]:font-semibold group-[.current]:text-accent dark:text-gray-400 dark:hover:text-gray-300 group-[.current]:dark:hover:text-accent">
                                                                Creating a group
                                                            </span>

                                                        </a>
                                                    </li>
                                                    <li class="relative">
                                                        <a href="https://doks.spiritix.co/understanding-user-roles/" class="group relative flex scroll-m-10" data-section="Users &amp; Groups" data-slug="understanding-user-roles" data-title="Understanding user roles">
                                                            <span class="h-5 flex-none mr-3 group-[.current]:mr-2 flex items-center">
                                                                <span class="flex-none w-4 h-0.5 group-[.current]:w-2 bg-gray-900/10 dark:bg-gray-50/10"></span>
                                                                <span class="hidden group-[.current]:flex relative flex-none items-center justify-center w-3 h-3 rounded-full overflow-hidden before:block before:opacity-20 before:bg-accent before:absolute before:inset-0 after:block after:bg-accent after:w-1.5 after:h-1.5 after:rounded-full"></span>
                                                            </span>
                                                            <span class="leading-5 text-gray-500 hover:text-gray-600 group-[.current]:font-semibold group-[.current]:text-accent dark:text-gray-400 dark:hover:text-gray-300 group-[.current]:dark:hover:text-accent">
                                                                Understanding user roles
                                                            </span>

                                                        </a>
                                                    </li>
                                                    <li class="relative">
                                                        <a href="https://doks.spiritix.co/editing-the-role-of-a-user/" class="group relative flex scroll-m-10" data-section="Users &amp; Groups" data-slug="editing-the-role-of-a-user" data-title="Editing a user's role">
                                                            <span class="h-5 flex-none mr-3 group-[.current]:mr-2 flex items-center">
                                                                <span class="flex-none w-4 h-0.5 group-[.current]:w-2 bg-gray-900/10 dark:bg-gray-50/10"></span>
                                                                <span class="hidden group-[.current]:flex relative flex-none items-center justify-center w-3 h-3 rounded-full overflow-hidden before:block before:opacity-20 before:bg-accent before:absolute before:inset-0 after:block after:bg-accent after:w-1.5 after:h-1.5 after:rounded-full"></span>
                                                            </span>
                                                            <span class="leading-5 text-gray-500 hover:text-gray-600 group-[.current]:font-semibold group-[.current]:text-accent dark:text-gray-400 dark:hover:text-gray-300 group-[.current]:dark:hover:text-accent">
                                                                Editing a user's role
                                                            </span>

                                                        </a>
                                                    </li>
                                            </ul>
                                </li>
                                <li data-docs-section="" class="group/ds ">
                                    <h3 data-docs-section-heading="" class="group/dh relative w-full font-semibold dark:text-gray-50 group-[.no-sections]:hidden  ">
                                            Billing &amp; Account

                                        <button class=" hidden  absolute top-0 right-0 w-5 h-5 rounded flex-shrink-0 items-center justify-center translate-x-full group-hover/dh:bg-gray-900/5 dark:group-hover/dh:bg-gray-50/10" aria-label="Toggle menu">
                                            <svg class="w-3.5 h-3.5 text-gray-500 dark:text-gray-400 group-[.open]/ds:rotate-90" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" focusable="false" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path>
</svg>                                        </button>
                                    </h3>
                                            <ul class="group-[.open]/ds:block  mt-5 space-y-4 border-l-2 border-gray-900/10 dark:border-gray-50/10 group-[.no-sections]:pt-4 group-[.no-sections]:mt-0" role="list">
                                                    <li class="relative">
                                                        <a href="https://doks.spiritix.co/downloading-printing-your-invoices/" class="group relative flex scroll-m-10" data-section="Billing &amp; Account" data-slug="downloading-printing-your-invoices" data-title="Downloading/Printing your invoices">
                                                            <span class="h-5 flex-none mr-3 group-[.current]:mr-2 flex items-center">
                                                                <span class="flex-none w-4 h-0.5 group-[.current]:w-2 bg-gray-900/10 dark:bg-gray-50/10"></span>
                                                                <span class="hidden group-[.current]:flex relative flex-none items-center justify-center w-3 h-3 rounded-full overflow-hidden before:block before:opacity-20 before:bg-accent before:absolute before:inset-0 after:block after:bg-accent after:w-1.5 after:h-1.5 after:rounded-full"></span>
                                                            </span>
                                                            <span class="leading-5 text-gray-500 hover:text-gray-600 group-[.current]:font-semibold group-[.current]:text-accent dark:text-gray-400 dark:hover:text-gray-300 group-[.current]:dark:hover:text-accent">
                                                                Downloading/Printing your invoices
                                                            </span>

                                                        </a>
                                                    </li>
                                                    <li class="relative">
                                                        <a href="https://doks.spiritix.co/changing-the-account-owner/" class="group relative flex scroll-m-10" data-section="Billing &amp; Account" data-slug="changing-the-account-owner" data-title="Changing the account owner">
                                                            <span class="h-5 flex-none mr-3 group-[.current]:mr-2 flex items-center">
                                                                <span class="flex-none w-4 h-0.5 group-[.current]:w-2 bg-gray-900/10 dark:bg-gray-50/10"></span>
                                                                <span class="hidden group-[.current]:flex relative flex-none items-center justify-center w-3 h-3 rounded-full overflow-hidden before:block before:opacity-20 before:bg-accent before:absolute before:inset-0 after:block after:bg-accent after:w-1.5 after:h-1.5 after:rounded-full"></span>
                                                            </span>
                                                            <span class="leading-5 text-gray-500 hover:text-gray-600 group-[.current]:font-semibold group-[.current]:text-accent dark:text-gray-400 dark:hover:text-gray-300 group-[.current]:dark:hover:text-accent">
                                                                Changing the account owner
                                                            </span>

                                                        </a>
                                                    </li>
                                                    <li class="relative">
                                                        <a href="https://doks.spiritix.co/general-billing-overview/" class="group relative flex scroll-m-10" data-section="Billing &amp; Account" data-slug="general-billing-overview" data-title="General billing overview">
                                                            <span class="h-5 flex-none mr-3 group-[.current]:mr-2 flex items-center">
                                                                <span class="flex-none w-4 h-0.5 group-[.current]:w-2 bg-gray-900/10 dark:bg-gray-50/10"></span>
                                                                <span class="hidden group-[.current]:flex relative flex-none items-center justify-center w-3 h-3 rounded-full overflow-hidden before:block before:opacity-20 before:bg-accent before:absolute before:inset-0 after:block after:bg-accent after:w-1.5 after:h-1.5 after:rounded-full"></span>
                                                            </span>
                                                            <span class="leading-5 text-gray-500 hover:text-gray-600 group-[.current]:font-semibold group-[.current]:text-accent dark:text-gray-400 dark:hover:text-gray-300 group-[.current]:dark:hover:text-accent">
                                                                General billing overview
                                                            </span>

                                                        </a>
                                                    </li>
                                                    <li class="relative">
                                                        <a href="https://doks.spiritix.co/changing-your-account-subdomain/" class="group relative flex scroll-m-10" data-section="Billing &amp; Account" data-slug="changing-your-account-subdomain" data-title="Changing your account subdomain">
                                                            <span class="h-5 flex-none mr-3 group-[.current]:mr-2 flex items-center">
                                                                <span class="flex-none w-4 h-0.5 group-[.current]:w-2 bg-gray-900/10 dark:bg-gray-50/10"></span>
                                                                <span class="hidden group-[.current]:flex relative flex-none items-center justify-center w-3 h-3 rounded-full overflow-hidden before:block before:opacity-20 before:bg-accent before:absolute before:inset-0 after:block after:bg-accent after:w-1.5 after:h-1.5 after:rounded-full"></span>
                                                            </span>
                                                            <span class="leading-5 text-gray-500 hover:text-gray-600 group-[.current]:font-semibold group-[.current]:text-accent dark:text-gray-400 dark:hover:text-gray-300 group-[.current]:dark:hover:text-accent">
                                                                Changing your account subdomain
                                                            </span>

                                                        </a>
                                                    </li>
                                                    <li class="relative">
                                                        <a href="https://doks.spiritix.co/what-to-do-when-your-card-is-declined/" class="group relative flex scroll-m-10" data-section="Billing &amp; Account" data-slug="what-to-do-when-your-card-is-declined" data-title="What to do when your card is declined">
                                                            <span class="h-5 flex-none mr-3 group-[.current]:mr-2 flex items-center">
                                                                <span class="flex-none w-4 h-0.5 group-[.current]:w-2 bg-gray-900/10 dark:bg-gray-50/10"></span>
                                                                <span class="hidden group-[.current]:flex relative flex-none items-center justify-center w-3 h-3 rounded-full overflow-hidden before:block before:opacity-20 before:bg-accent before:absolute before:inset-0 after:block after:bg-accent after:w-1.5 after:h-1.5 after:rounded-full"></span>
                                                            </span>
                                                            <span class="leading-5 text-gray-500 hover:text-gray-600 group-[.current]:font-semibold group-[.current]:text-accent dark:text-gray-400 dark:hover:text-gray-300 group-[.current]:dark:hover:text-accent">
                                                                What to do when your card is declined
                                                            </span>

                                                        </a>
                                                    </li>
                                            </ul>
                                </li>
                                <li data-docs-section="" class="group/ds ">
                                    <h3 data-docs-section-heading="" class="group/dh relative w-full font-semibold dark:text-gray-50 group-[.no-sections]:hidden  ">
                                            FAQ

                                        <button class=" hidden  absolute top-0 right-0 w-5 h-5 rounded flex-shrink-0 items-center justify-center translate-x-full group-hover/dh:bg-gray-900/5 dark:group-hover/dh:bg-gray-50/10" aria-label="Toggle menu">
                                            <svg class="w-3.5 h-3.5 text-gray-500 dark:text-gray-400 group-[.open]/ds:rotate-90" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" focusable="false" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path>
</svg>                                        </button>
                                    </h3>
                                            <ul class="group-[.open]/ds:block  mt-5 space-y-4 border-l-2 border-gray-900/10 dark:border-gray-50/10 group-[.no-sections]:pt-4 group-[.no-sections]:mt-0" role="list">
                                                    <li class="relative">
                                                        <a href="https://doks.spiritix.co/why-isnt-my-custom-profile-data-showing-on-my-tickets/" class="group relative flex scroll-m-10" data-section="FAQ" data-slug="why-isnt-my-custom-profile-data-showing-on-my-tickets" data-title="Why isn't my custom profile data showing on my tickets?">
                                                            <span class="h-5 flex-none mr-3 group-[.current]:mr-2 flex items-center">
                                                                <span class="flex-none w-4 h-0.5 group-[.current]:w-2 bg-gray-900/10 dark:bg-gray-50/10"></span>
                                                                <span class="hidden group-[.current]:flex relative flex-none items-center justify-center w-3 h-3 rounded-full overflow-hidden before:block before:opacity-20 before:bg-accent before:absolute before:inset-0 after:block after:bg-accent after:w-1.5 after:h-1.5 after:rounded-full"></span>
                                                            </span>
                                                            <span class="leading-5 text-gray-500 hover:text-gray-600 group-[.current]:font-semibold group-[.current]:text-accent dark:text-gray-400 dark:hover:text-gray-300 group-[.current]:dark:hover:text-accent">
                                                                Why isn't my custom profile data showing on my tickets?
                                                            </span>

                                                        </a>
                                                    </li>
                                                    <li class="relative">
                                                        <a href="https://doks.spiritix.co/why-wont-my-gmail-smtp-settings-work/" class="group relative flex scroll-m-10" data-section="FAQ" data-slug="why-wont-my-gmail-smtp-settings-work" data-title="Why won't my Gmail SMTP settings work?">
                                                            <span class="h-5 flex-none mr-3 group-[.current]:mr-2 flex items-center">
                                                                <span class="flex-none w-4 h-0.5 group-[.current]:w-2 bg-gray-900/10 dark:bg-gray-50/10"></span>
                                                                <span class="hidden group-[.current]:flex relative flex-none items-center justify-center w-3 h-3 rounded-full overflow-hidden before:block before:opacity-20 before:bg-accent before:absolute before:inset-0 after:block after:bg-accent after:w-1.5 after:h-1.5 after:rounded-full"></span>
                                                            </span>
                                                            <span class="leading-5 text-gray-500 hover:text-gray-600 group-[.current]:font-semibold group-[.current]:text-accent dark:text-gray-400 dark:hover:text-gray-300 group-[.current]:dark:hover:text-accent">
                                                                Why won't my Gmail SMTP settings work?
                                                            </span>

                                                        </a>
                                                    </li>
                                                    <li class="relative">
                                                        <a href="https://doks.spiritix.co/is-there-a-customer-portal-my-users-can-log-in-to/" class="group relative flex scroll-m-10" data-section="FAQ" data-slug="is-there-a-customer-portal-my-users-can-log-in-to" data-title="Is there a customer portal my users can log in to?">
                                                            <span class="h-5 flex-none mr-3 group-[.current]:mr-2 flex items-center">
                                                                <span class="flex-none w-4 h-0.5 group-[.current]:w-2 bg-gray-900/10 dark:bg-gray-50/10"></span>
                                                                <span class="hidden group-[.current]:flex relative flex-none items-center justify-center w-3 h-3 rounded-full overflow-hidden before:block before:opacity-20 before:bg-accent before:absolute before:inset-0 after:block after:bg-accent after:w-1.5 after:h-1.5 after:rounded-full"></span>
                                                            </span>
                                                            <span class="leading-5 text-gray-500 hover:text-gray-600 group-[.current]:font-semibold group-[.current]:text-accent dark:text-gray-400 dark:hover:text-gray-300 group-[.current]:dark:hover:text-accent">
                                                                Is there a customer portal my users can log in to?
                                                            </span>

                                                        </a>
                                                    </li>
                                                    <li class="relative">
                                                        <a href="https://doks.spiritix.co/how-do-i-export-my-contacts-tickets-reports/" class="group relative flex scroll-m-10" data-section="FAQ" data-slug="how-do-i-export-my-contacts-tickets-reports" data-title="How do I export my contacts, tickets, and reports?">
                                                            <span class="h-5 flex-none mr-3 group-[.current]:mr-2 flex items-center">
                                                                <span class="flex-none w-4 h-0.5 group-[.current]:w-2 bg-gray-900/10 dark:bg-gray-50/10"></span>
                                                                <span class="hidden group-[.current]:flex relative flex-none items-center justify-center w-3 h-3 rounded-full overflow-hidden before:block before:opacity-20 before:bg-accent before:absolute before:inset-0 after:block after:bg-accent after:w-1.5 after:h-1.5 after:rounded-full"></span>
                                                            </span>
                                                            <span class="leading-5 text-gray-500 hover:text-gray-600 group-[.current]:font-semibold group-[.current]:text-accent dark:text-gray-400 dark:hover:text-gray-300 group-[.current]:dark:hover:text-accent">
                                                                How do I export my contacts, tickets, and reports?
                                                            </span>

                                                        </a>
                                                    </li>
                                                    <li class="relative">
                                                        <a href="https://doks.spiritix.co/how-do-i-search-for-a-number/" class="group relative flex scroll-m-10" data-section="FAQ" data-slug="how-do-i-search-for-a-number" data-title="How do I search for a number?">
                                                            <span class="h-5 flex-none mr-3 group-[.current]:mr-2 flex items-center">
                                                                <span class="flex-none w-4 h-0.5 group-[.current]:w-2 bg-gray-900/10 dark:bg-gray-50/10"></span>
                                                                <span class="hidden group-[.current]:flex relative flex-none items-center justify-center w-3 h-3 rounded-full overflow-hidden before:block before:opacity-20 before:bg-accent before:absolute before:inset-0 after:block after:bg-accent after:w-1.5 after:h-1.5 after:rounded-full"></span>
                                                            </span>
                                                            <span class="leading-5 text-gray-500 hover:text-gray-600 group-[.current]:font-semibold group-[.current]:text-accent dark:text-gray-400 dark:hover:text-gray-300 group-[.current]:dark:hover:text-accent">
                                                                How do I search for a number?
                                                            </span>

                                                        </a>
                                                    </li>
                                                    <li class="relative">
                                                        <a href="https://doks.spiritix.co/how-do-i-change-the-order-of-my-mailboxes/" class="group relative flex scroll-m-10" data-section="FAQ" data-slug="how-do-i-change-the-order-of-my-mailboxes" data-title="How do I change the order of my mailboxes?">
                                                            <span class="h-5 flex-none mr-3 group-[.current]:mr-2 flex items-center">
                                                                <span class="flex-none w-4 h-0.5 group-[.current]:w-2 bg-gray-900/10 dark:bg-gray-50/10"></span>
                                                                <span class="hidden group-[.current]:flex relative flex-none items-center justify-center w-3 h-3 rounded-full overflow-hidden before:block before:opacity-20 before:bg-accent before:absolute before:inset-0 after:block after:bg-accent after:w-1.5 after:h-1.5 after:rounded-full"></span>
                                                            </span>
                                                            <span class="leading-5 text-gray-500 hover:text-gray-600 group-[.current]:font-semibold group-[.current]:text-accent dark:text-gray-400 dark:hover:text-gray-300 group-[.current]:dark:hover:text-accent">
                                                                How do I change the order of my mailboxes?
                                                            </span>

                                                        </a>
                                                    </li>
                                                    <li class="relative">
                                                        <a href="https://doks.spiritix.co/why-am-i-not-receiving-noreply-emails/" class="group relative flex scroll-m-10" data-section="FAQ" data-slug="why-am-i-not-receiving-noreply-emails" data-title="Why am I not receiving 'noreply' emails?">
                                                            <span class="h-5 flex-none mr-3 group-[.current]:mr-2 flex items-center">
                                                                <span class="flex-none w-4 h-0.5 group-[.current]:w-2 bg-gray-900/10 dark:bg-gray-50/10"></span>
                                                                <span class="hidden group-[.current]:flex relative flex-none items-center justify-center w-3 h-3 rounded-full overflow-hidden before:block before:opacity-20 before:bg-accent before:absolute before:inset-0 after:block after:bg-accent after:w-1.5 after:h-1.5 after:rounded-full"></span>
                                                            </span>
                                                            <span class="leading-5 text-gray-500 hover:text-gray-600 group-[.current]:font-semibold group-[.current]:text-accent dark:text-gray-400 dark:hover:text-gray-300 group-[.current]:dark:hover:text-accent">
                                                                Why am I not receiving 'noreply' emails?
                                                            </span>

                                                        </a>
                                                    </li>
                                            </ul>
                                </li>
                        </ul>
                    </div>
            </div>

            <div class="relative flex flex-col flex-auto min-w-0 py-16">
                <div class="grid grid-cols-1 xl:grid-cols-[auto_theme(spacing.56)]">
                    <div data-toc-src="" class="flex-auto min-w-0 px-0 lg:pl-8 xl:px-16">
                        <h2 id="___TOCBOT___" class="sr-only m-0">
                            <span aria-hidden="true">Introduction</span>
                        </h2>

                        <article class="overflow-x-hidden max-w-3xl mx-auto">
                            <header>

                                <h1 class="text-4xl leading-tight tracking-tight font-extrabold text-gray-900 dark:text-gray-50 js-toc-ignore">
                                    Introduction
                                </h1>


                            </header>

                            <div class="mt-8 content 4xl:content-lg">
                                <p>Welcome to <strong>Doks</strong>, a powerful Ghost theme specially designed to create beautiful modern docs, knowledge bases, and help centers.</p><p>What you can do with this theme:</p><ul><li>Create one or multiple documentation collections (e.g. <a href="https://doks.spiritix.co/api/">API</a>, <a href="https://doks.spiritix.co/guides/">Guides</a>, <a href="https://doks.spiritix.co/faq/">FAQ</a>, ...)</li><li>Organize each documentation into sections (e.g. Getting Started, Accounts, ...)</li><li>Easily create a <a href="https://doks.spiritix.co/changelog/">changelog</a> timeline to share new updates</li><li>Create a <a href="https://doks.spiritix.co/roadmap/">roadmap</a> to outline your goals, milestones, priorities, and progress.</li><li>Create a <a href="https://doks.spiritix.co/showcase/">showcase</a> to display large and eye-catching visuals, great for external projects and case studies</li><li>Group your regular <a href="https://doks.spiritix.co/blog/">blog</a> posts into a minimal and clean archive</li><li>Optionally, create a <a href="https://doks.spiritix.co/landing/">landing page</a> managed from the admin UI with no coding required</li><li>Create rich content with tables, highlighted code blocks, nested lists, and more</li></ul><hr><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia nam fuga totam, eaque officiis fugiat suscipit, eum voluptatibus excepturi deleniti explicabo tempora cum dolorum sit laudantium reiciendis. Delectus, iusto ipsam?</p><div class="code-toolbar"><pre class="language-javascript" tabindex="0"><code class="language-javascript"><span class="token comment">// The admin API client is the easiest way to use the API</span>
<span class="token keyword">const</span> GhostAdminAPI <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@tryghost/admin-api'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// Configure the client</span>
<span class="token keyword">const</span> api <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">GhostAdminAPI</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'http://localhost:2368/'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'YOUR_ADMIN_API_KEY'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">version</span><span class="token operator">:</span> <span class="token string">'v3'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><div class="toolbar"><div class="toolbar-item"><button class="copy-to-clipboard-button" type="button" data-copy-state="copy"><span>Copy</span></button></div></div></div><p>Maecenas consectetur pharetra nisi, vel congue ligula tempor quis. Sed turpis lorem, tempor varius pharetra pretium, varius at lorem. Nam viverra blandit massa id vehicula. Ut feugiat in erat vitae lacinia. Etiam tincidunt eros vitae neque iaculis elementum.</p><h2 id="dolor-sit-amet-consectetur">Dolor sit amet consectetur</h2><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia nam fuga totam, eaque officiis fugiat suscipit, eum voluptatibus excepturi deleniti explicabo tempora cum dolorum sit laudantium reiciendis. Delectus, iusto ipsam?</p><p>Etiam vestibulum scelerisque nisl in placerat. Curabitur ultrices quam et ligula congue, at bibendum arcu porttitor. Morbi lacinia pretium diam, hendrerit sagittis sem consectetur non. Proin vel nisi a turpis egestas efficitur. In semper velit non justo aliquam euismod.</p><h2 id="sed-id-fermentum-neque">Sed id fermentum neque</h2><p>Proin tempus arcu vulputate pellentesque tempus. Nulla luctus dui id libero mattis luctus. Donec facilisis massa orci, et placerat purus pulvinar vel. Nullam egestas nisi ex, placerat imperdiet odio ullamcorper eu. Donec a aliquet nisl, sed pellentesque purus. Suspendisse eu nibh auctor, commodo elit vel, congue mi. Nulla nec nisl ligula. Pellentesque eleifend nibh nec augue aliquet efficitur.</p><!--kg-card-begin: html--><div class="table-responsive"><table class="gh-table"><thead><tr><th>Verb</th><th>Path</th><th>Method</th></tr></thead><tbody><tr><td>GET</td><td><a href="https://doks.spiritix.co/api/the-user-object/">/users/{id}/</a></td><td>Read a user by ID</td></tr><tr><td>GET</td><td><a href="https://doks.spiritix.co/api/list-all-users/">/users/</a></td><td>Browse users</td></tr><tr><td>GET</td><td><a href="https://doks.spiritix.co/api/the-store-object/">/stores/{id}/</a></td><td>Read a store by ID</td></tr><tr><td>GET</td><td><a href="https://doks.spiritix.co/api/list-all-stores/">/stores/</a></td><td>Browse stores</td></tr><tr><td>GET</td><td><a href="https://doks.spiritix.co/api/the-order-object/">/orders/{id}/</a></td><td>Read an order by ID</td></tr><tr><td>GET</td><td><a href="https://doks.spiritix.co/api/list-all-orders/">/orders/</a></td><td>Browse orders</td></tr></tbody></table></div><!--kg-card-end: html--><p>Sed elementum fermentum diam et suscipit. Quisque a facilisis sem. Nam accumsan lorem vitae elit interdum, vitae porta lorem egestas. Curabitur malesuada non quam vitae eleifend. Aliquam sem elit, rhoncus vel tristique ut, finibus ultrices augue. Suspendisse porta at nisl ac scelerisque. Cras sit amet tristique quam, nec eleifend dolor. Ut consequat purus risus, et pellentesque lectus scelerisque.</p>
                            </div>

                            <div class="mt-16 flex flex-col lg:flex-row max-lg:space-y-4 lg:space-x-4">
                                <a href="#" class="docs-prev invisible flex basis-1/2 items-center p-4 border border-gray-900/10 rounded-md no-underline hover:bg-gray-50 dark:border-gray-50/10 dark:hover:bg-gray-800">
                                    <svg class="w-5 h-5 mr-4 flex-none text-gray-500 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" focusable="false" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M7 16l-4-4m0 0l4-4m-4 4h18"></path>
</svg>
                                    <div class="flex flex-col w-full text-right">
                                        <span class="text-2xs font-normal text-gray-500 dark:text-gray-400">
                                            Previous
                                            <span class="docs-prev-section group-[.no-sections]:hidden"></span>
                                        </span>
                                        <span class="docs-prev-title text-sm font-semibold text-gray-700 dark:text-gray-300"></span>
                                    </div>
                                </a>
                                <a href="https://doks.spiritix.co/creating-a-new-conversation/" class="docs-next flex basis-1/2 items-center p-4 border border-gray-900/10 rounded-md no-underline hover:bg-gray-50 dark:border-gray-50/10 dark:hover:bg-gray-800">
                                    <div class="flex flex-col w-full">
                                        <span class="text-2xs font-normal text-gray-500 dark:text-gray-400">
                                            Next
                                            <span class="docs-next-section group-[.no-sections]:hidden"> - Getting Started</span>
                                        </span>
                                        <span class="docs-next-title text-sm font-semibold text-gray-700 dark:text-gray-300">Creating a new conversation</span>
                                    </div>

                                    <svg class="w-5 h-5 ml-4 flex-none text-gray-500 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" focusable="false" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>                                </a>
                            </div>

                        </article>
                    </div>

                    <div data-toc-container="" class="hidden xl:block sticky top-[theme(spacing.36)] flex-none w-56 max-h-[calc(100vh-theme(spacing.48))]">
                        <h2 class="text-2xs uppercase font-bold tracking-wider mb-3 dark:text-gray-200">
                            On this page
                        </h2>
                        <nav data-toc-target="" class="relative text-xs leading-4 overflow-auto max-h-[calc(100vh-theme(spacing.48))] text-gray-500 dark:text-gray-400 [&amp;_.current]:dark:text-gray-300"><ol class="toc-list "><li class="toc-list-item is-active-li"><a href="#___TOCBOT___" class="toc-link node-name--H2 flex py-1.5 hover:text-gray-700 dark:hover:text-gray-300 [&amp;.node-name--H3]:py-1 [&amp;.node-name--H3]:before:content-['—'] [&amp;.node-name--H3]:before:inline [&amp;.node-name--H3]:before:mr-1 [&amp;.node-name--H3]:before:opacity-50 current text-gray-700 font-medium -tracking-xs">Introduction</a></li><li class="toc-list-item"><a href="#dolor-sit-amet-consectetur" class="toc-link node-name--H2 flex py-1.5 hover:text-gray-700 dark:hover:text-gray-300 [&amp;.node-name--H3]:py-1 [&amp;.node-name--H3]:before:content-['—'] [&amp;.node-name--H3]:before:inline [&amp;.node-name--H3]:before:mr-1 [&amp;.node-name--H3]:before:opacity-50">Dolor sit amet consectetur</a></li><li class="toc-list-item"><a href="#sed-id-fermentum-neque" class="toc-link node-name--H2 flex py-1.5 hover:text-gray-700 dark:hover:text-gray-300 [&amp;.node-name--H3]:py-1 [&amp;.node-name--H3]:before:content-['—'] [&amp;.node-name--H3]:before:inline [&amp;.node-name--H3]:before:mr-1 [&amp;.node-name--H3]:before:opacity-50">Sed id fermentum neque</a></li></ol></nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
            </main>

            <footer data-footer="" class=" no-space-top  group flex-none mt-auto text-sm text-gray-500 dark:text-gray-400 [&amp;.no-space-top]:mt-0">
    <div class="outer xl:outer-xl mt-24 pb-28 border-t border-gray-900/10 dark:border-gray-50/5 group-[.no-space-top]:mt-0">
        <div class="inner">
            <div class="flex flex-col lg:flex-row lg:items-center py-10">
                <div>
                    <a data-brand="" class="flex-none inline-flex font-bold text-lg text-gray-900 dark:text-gray-50" href="https://doks.spiritix.co" aria-label="Doks">
                                <img class="max-h-9 w-auto hidden dark:block" src="https://doks.spiritix.co/content/images/2023/07/Logo---Dark-theme.svg" alt="Doks" loading="lazy">
                                <img class="max-h-9 w-auto block dark:hidden" src="https://doks.spiritix.co/content/images/2023/05/Logo---Light-theme.svg" alt="Doks" loading="lazy">
                    </a>
                        <div class="mt-2 text-base max-w-md">
                            A powerful Ghost theme specially designed to create beautiful modern docs, knowledge bases, and help centers.
                        </div>
                </div>

                    <div data-membership="" class="flex-none lg:max-w-sm lg:ml-auto mt-10 lg:mt-0 pt-10 lg:pt-0 border-t border-gray-900/5 dark:border-gray-50/5 lg:border-none">
                        <div class="">
                            <h2 class="font-bold text-base text-gray-900 dark:text-gray-200">
                                Subscribe to our newsletter
                            </h2>
                            <p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
                                Get the latest posts and updates delivered to your inbox. <br> No spam. Unsubscribe anytime.
                            </p>
                        </div>
                        <button data-portal="signup" class="flex items-center h-9 px-4 mt-4 w-full max-w-md lg:min-w-80 ring-1 ring-gray-900/10 rounded-md text-gray-500 text-sm bg-white/90 hover:bg-gray-50/90 hover:ring-gray-900/20 dark:text-gray-400/90 dark:bg-gray-800 dark:hover:bg-gray-700 dark:ring-inset dark:ring-gray-50/10 gh-portal-close">
                            <span aria-hidden="true">Enter your email</span>
                            <span class="ml-auto font-bold text-gray-900 dark:text-gray-200">
                                Subscribe
                            </span>
                        </button>
                    </div>
            </div>

            <div class="pt-10 border-t border-gray-900/5 dark:border-gray-50/5">
                    <ul data-navigation-footer="" class="navigation flex flex-wrap text-sm text-gray-500 dark:text-gray-400" role="list">
            <li data-slug="portal" class="mr-8 mb-3">
                <a href="#/portal/signup" class="[&amp;.external>svg]:inline inline-flex items-center hover:opacity-80">
                    Portal

                    <svg class="relative top-px hidden flex-shrink-0 w-3.5 h-3.5 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                </a>
            </li>
            <li data-slug="documentation" class="mr-8 mb-3">
                <a href="https://spiritix.co/themes/doks/" class="[&amp;.external>svg]:inline inline-flex items-center hover:opacity-80 external" target="_blank">
                    Documentation

                    <svg class="relative top-px hidden flex-shrink-0 w-3.5 h-3.5 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                </a>
            </li>
            <li data-slug="buy-theme" class="mr-8 mb-3">
                <a href="https://spiritix.lemonsqueezy.com/checkout/buy/2bcd8fd7-3b62-465f-b838-3d1cd73c4e90" class="[&amp;.external>svg]:inline inline-flex items-center hover:opacity-80 external" target="_blank">
                    Buy Theme

                    <svg class="relative top-px hidden flex-shrink-0 w-3.5 h-3.5 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M17 7l-10 10"></path>
   <path d="M8 7l9 0l0 9"></path>
</svg>                </a>
            </li>
    </ul>

            </div>

            <div class="flex flex-col-reverse lg:flex-row lg:items-center mt-6 lg:mt-3">
                <div class="text-xs mb-3 mr-5">
                    <a href="https://doks.spiritix.co">Doks</a> © 2024 
                    <span data-published-with="">
                        <span class="">•</span>
                        Published with <a class="font-semibold hover:opacity-80" href="https://ghost.org/" target="_blank" rel="noopener">Ghost</a> and <a class="font-semibold hover:opacity-80" href="https://spiritix.co/themes/doks" target="_blank" rel="noopener">Spiritix</a>
                    <span><span class="">•</span>
            <span>Hosted on <a class="font-semibold hover:opacity-80" target="_blank" rel="noopener" href="https://hetzner.cloud/?ref=1XPXA90qts4w">Hetzner</a></span></span></span>
                </div>

                <div class="mb-6 lg:mb-0 lg:ml-auto flex flex-wrap items-center text-gray-400">
                    <button data-theme-toggle="" class="mb-3 mr-5 last:mr-0 inline-flex flex-shrink-0" title="Change theme" aria-label="Change theme">
                        <svg class="dark:hidden w-5 h-5 lg:w-5 lg:h-5 hover:opacity-80" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" focusable="false" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
                        <svg class="hidden dark:inline w-5 h-5 lg:w-4 lg:h-4 relative -top-px hover:opacity-80" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path>
  <path d="M17 4a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2"></path>
</svg>                    </button>                    
                    

                <a data-social-link="" class="mb-3 mr-5 last:mr-0" href="https://spiritix.co" title="Github" aria-label="Github" target="_blank">
                    <svg class="w-5 h-5 lg:w-4 lg:h-4 hover:opacity-80" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" focusable="false" aria-hidden="true">
    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path>
</svg>                </a>
                <a data-social-link="" class="mb-3 mr-5 last:mr-0" href="https://spiritix.co" title="Discord" aria-label="Discord" target="_blank">
                    <svg class="w-5 h-5 lg:w-4 lg:h-4 hover:opacity-80" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" focusable="false" aria-hidden="true">
    <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"></path>
</svg>                </a>
                </div>
            </div>
        </div>
    </div>
</footer>        </div>

        <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true" data-error-msg="The image could not be loaded.">
    <div class="pswp__bg"></div>

    <div class="pswp__scroll-wrap">
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <!-- Preloader -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader" aria-label="Loading">
                    <svg class="m-1.5 text-white opacity-100 w-8 h-8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve" focusable="false" aria-hidden="true">
    <path opacity="0.2" fill="currentColor" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"></path>
    <path fill="currentColor" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
C22.32,8.481,24.301,9.057,26.013,10.047z">
        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.5s" repeatCount="indefinite"></animateTransform>
    </path>
</svg>                </div>                
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>
              
    

        <div id="sx-lazy-script" data-src="/assets/built/lazy.min.js?v=7dc848bbc8"></div>

        <!-- Hetzner Link -->
<script>
    (function() {
        const publishedWith = document.querySelector('[data-published-with]');
        const span = document.createElement('span');
        span.innerHTML = `
            <span class="">•</span>
            <span>Hosted on <a class='font-semibold hover:opacity-80' target='_blank' rel='noopener' href="https://hetzner.cloud/?ref=1XPXA90qts4w">Hetzner</a></span>
        `.trim();

        publishedWith.appendChild(span);
    })();
</script>

<!-- Cloudflare Web Analytics -->
<script defer="" src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon="{&quot;token&quot;: &quot;5406f2b6583f4633b93b6e9e82254c2a&quot;}"></script>
<!-- End Cloudflare Web Analytics -->

<!-- LMS Affiliate Tracking -->
<script>window.lemonSqueezyAffiliateConfig = { store: "spiritix" };</script>
<script src="https://lmsqueezy.com/affiliate.js" defer=""></script>

<!-- Sentry -->
<script src="https://js.sentry-cdn.com/9627cac5840242be8587e0976dcc90d6.min.js" crossorigin="anonymous"></script>
<script>
  Sentry.onLoad(function() {
    Sentry.init({
      denyUrls: [
          // Ghost admin
          /spiritix\.co\/ghost/,
          
          // Chrome extensions
          /extensions\//i,
          /^chrome:\/\//i,
          /^chrome-extension:\/\//i,          
      ],
    });
  });
</script>
<!-- /Sentry -->
    <script defer="" src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon="{&quot;rayId&quot;:&quot;8e2eae441fe42fb7&quot;,&quot;version&quot;:&quot;2024.10.5&quot;,&quot;r&quot;:1,&quot;serverTiming&quot;:{&quot;name&quot;:{&quot;cfExtPri&quot;:true,&quot;cfL4&quot;:true,&quot;cfSpeedBrain&quot;:true,&quot;cfCacheStatus&quot;:true}},&quot;token&quot;:&quot;907b789a3f3d4123918b4f24df5a9835&quot;,&quot;b&quot;:1}" crossorigin="anonymous"></script>

<div id="ghost-portal-root"></div><div id="sodo-search-root"></div>
    <div id="sp-demo-widget" class="sp-demo-widget">
        <!-- Popover -->
        <div id="sp-demo-popover" class="sp-demo-popover">
            <div class="sp-demo-popover-actions">
                <button id="sp-demo-popover-clear" class="sp-demo-popover-clear">
                    Clear
                </button>
                <button id="sp-demo-popover-close" class="sp-demo-popover-close" title="Close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="10" width="10"><path stroke-linecap="round" stroke-width="0.4" fill="currentColor" stroke="#000000" stroke-linejoin="round" d="M.44,21.44a1.49,1.49,0,0,0,0,2.12,1.5,1.5,0,0,0,2.12,0l9.26-9.26a.25.25,0,0,1,.36,0l9.26,9.26a1.5,1.5,0,0,0,2.12,0,1.49,1.49,0,0,0,0-2.12L14.3,12.18a.25.25,0,0,1,0-.36l9.26-9.26A1.5,1.5,0,0,0,21.44.44L12.18,9.7a.25.25,0,0,1-.36,0L2.56.44A1.5,1.5,0,0,0,.44,2.56L9.7,11.82a.25.25,0,0,1,0,.36Z"></path></svg></button>
            </div>
            <!-- Accent color -->
            <div class="sp-demo-popover-config">
                <div class="sp-demo-popover-heading">Accent color</div>
                <div>
                    <button class="sp-demo-popover-color selected" data-color="#E64918" style="background-color: rgb(230, 73, 24);"><span class="sr-only">#E64918</span></button>
                    <button class="sp-demo-popover-color" data-color="#ef4444" style="background-color: rgb(239, 68, 68);"><span class="sr-only">#ef4444</span></button>
                    <button class="sp-demo-popover-color" data-color="#f97316" style="background-color: rgb(249, 115, 22);"><span class="sr-only">#f97316</span></button>
                    <button class="sp-demo-popover-color" data-color="#f59e0b" style="background-color: rgb(245, 158, 11);"><span class="sr-only">#f59e0b</span></button>
                    <button class="sp-demo-popover-color" data-color="#eab308" style="background-color: rgb(234, 179, 8);"><span class="sr-only">#eab308</span></button>
                    <button class="sp-demo-popover-color" data-color="#84cc16" style="background-color: rgb(132, 204, 22);"><span class="sr-only">#84cc16</span></button>
                    <button class="sp-demo-popover-color" data-color="#22c55e" style="background-color: rgb(34, 197, 94);"><span class="sr-only">#22c55e</span></button>
                    <button class="sp-demo-popover-color" data-color="#10b981" style="background-color: rgb(16, 185, 129);"><span class="sr-only">#10b981</span></button>
                    <button class="sp-demo-popover-color" data-color="#14b8a6" style="background-color: rgb(20, 184, 166);"><span class="sr-only">#14b8a6</span></button>
                    <button class="sp-demo-popover-color" data-color="#06b6d4" style="background-color: rgb(6, 182, 212);"><span class="sr-only">#06b6d4</span></button>
                    <button class="sp-demo-popover-color" data-color="#0ea5e9" style="background-color: rgb(14, 165, 233);"><span class="sr-only">#0ea5e9</span></button>
                    <button class="sp-demo-popover-color" data-color="#3b82f6" style="background-color: rgb(59, 130, 246);"><span class="sr-only">#3b82f6</span></button>
                    <button class="sp-demo-popover-color" data-color="#6366f1" style="background-color: rgb(99, 102, 241);"><span class="sr-only">#6366f1</span></button>
                    <button class="sp-demo-popover-color" data-color="#8b5cf6" style="background-color: rgb(139, 92, 246);"><span class="sr-only">#8b5cf6</span></button>
                    <button class="sp-demo-popover-color" data-color="#a855f7" style="background-color: rgb(168, 85, 247);"><span class="sr-only">#a855f7</span></button>
                    <button class="sp-demo-popover-color" data-color="#d946ef" style="background-color: rgb(217, 70, 239);"><span class="sr-only">#d946ef</span></button>
                    <button class="sp-demo-popover-color" data-color="#ec4899" style="background-color: rgb(236, 72, 153);"><span class="sr-only">#ec4899</span></button>
                    <button class="sp-demo-popover-color" data-color="#f43f5e" style="background-color: rgb(244, 63, 94);"><span class="sr-only">#f43f5e</span></button>
                </div>
                <div style="font-weight: normal; opacity: 0.8;">Current: <span class="sp-demo-popover-current">#E64918</span></div>
            </div>
    
            <!-- Color scheme -->
            <!-- <label class="sp-demo-popover-config">
                <div class="sp-demo-popover-heading">Color scheme</div>
                <select id="sp-demo-popover-select-color-scheme">
                    <option value="Light" selected>Light</option>
                    <option value="Dark">Dark</option>
                </select>
            </label> -->

            <!-- Gray scale -->
            <label class="sp-demo-popover-config">
                <div class="sp-demo-popover-heading">Gray scale <small style="font-weight: normal;">(more visible on dark mode)</small></div>
                <select id="sp-demo-popover-select-gray-scale">
                    <option value="Slate" selected="">Slate</option>
                    <option value="Gray">Gray</option>
                    <option value="Zinc">Zinc</option>
                    <option value="Stone">Stone</option>
                    <option value="Neutral">Neutral</option>
                </select>
            </label>

            <!-- Sidebar style -->
            <label class="sp-demo-popover-config">
                <div class="sp-demo-popover-heading">Docs Sidebar Style</div>
                <select id="sp-demo-popover-select-sidebar-style">
                    <option value="Neutral" selected="">Neutral</option>
                    <option value="Transparent">Transparent</option>
                    <option value="Dark">Dark</option>
                </select>
            </label>                
    
            <!-- Text font -->
            <label class="sp-demo-popover-config">
                <div class="sp-demo-popover-heading">Text font</div>
                <select id="sp-demo-popover-select-text-font">
                    <option value="System sans-serif" selected="">System sans-serif</option>
                    <option value="Inter">Inter</option>
                    <option value="Roboto">Roboto</option>
                    <option value="Raleway">Raleway</option>
                    <option value="Montserrat">Montserrat</option>
                    <option value="Work Sans">Work Sans</option>
                    <option value="Source Sans">Source Sans</option>
                    <option value="Nunito Sans">Nunito Sans</option>
                    
                    <option value="System serif">System serif</option>
                    <option value="Source Serif">Source Serif</option>
                    <option value="Roboto Serif">Roboto Serif</option>
                    <option value="Playfair Display">Playfair Display</option>
                </select>
            </label>
    
            <!-- Headings font -->
            <label class="sp-demo-popover-config">
                <div class="sp-demo-popover-heading">Headings font</div>
                <select id="sp-demo-popover-select-headings-font">
                    <option value="System sans-serif" selected="">System sans-serif</option>
                    <option value="Inter">Inter</option>
                    <option value="Roboto">Roboto</option>
                    <option value="Raleway">Raleway</option>
                    <option value="Montserrat">Montserrat</option>
                    <option value="Work Sans">Work Sans</option>
                    <option value="Source Sans">Source Sans</option>
                    <option value="Nunito Sans">Nunito Sans</option>

                    <option value="System serif">System serif</option>
                    <option value="Source Serif">Source Serif</option>
                    <option value="Roboto Serif">Roboto Serif</option>                    
                    <option value="Playfair Display">Playfair Display</option>
                </select>
            </label>
        
        </div>        
    
        <!-- Btns -->
        <button id="sp-demo-customize" class="sp-demo-btn">
            <span class="sp-demo-btn-notif"></span>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path>
            </svg>
            Customize
        </button>
        <a id="sp-demo-buy" class="sp-demo-btn sp-demo-btn-primary" href="https://spiritix.lemonsqueezy.com/checkout/buy/2bcd8fd7-3b62-465f-b838-3d1cd73c4e90" target="_blank">
            <div class="sp-demo-btn-ping"></div>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
            </svg>
            <span>Buy theme</span>
        </a>
    </div>
</body></html>