/* AdPriva Documentation Dark Theme */
/* Extracted from GitBook index.html */

:root {
    /* Primary colors (light mode - not used but kept for reference) */
    --primary-1: 255 255 255;
    --contrast-primary-1: 29 29 29;
    --primary-9: 52 109 219;
    --contrast-primary-9: 255 255 255;
    --primary-original: 52 109 219;

    /* Tint colors */
    --tint-1: 29 29 29;
    --contrast-tint-1: 255 255 255;
    --tint-9: 127 133 144;
    --tint-12: 254 255 255;

    /* Header colors */
    --header-background: 52 109 219;
    --header-link: 255 255 255;
}

/* Dark theme (default) */
.dark,
html {
    --primary-1: 29 29 29;
    --contrast-primary-1: 255 255 255;
    --primary-2: 32 35 39;
    --contrast-primary-2: 255 255 255;
    --primary-3: 39 44 53;
    --contrast-primary-3: 255 255 255;
    --primary-4: 40 48 62;
    --contrast-primary-4: 255 255 255;
    --primary-5: 43 54 72;
    --contrast-primary-5: 255 255 255;
    --primary-6: 45 58 81;
    --contrast-primary-6: 255 255 255;
    --primary-7: 52 68 96;
    --contrast-primary-7: 255 255 255;
    --primary-8: 59 78 112;
    --contrast-primary-8: 255 255 255;
    --primary-9: 52 109 219;
    --contrast-primary-9: 255 255 255;
    --primary-10: 80 139 252;
    --contrast-primary-10: 255 255 255;
    --primary-11: 167 193 239;
    --contrast-primary-11: 29 29 29;
    --primary-12: 249 255 255;
    --contrast-primary-12: 29 29 29;
    --primary-original: 52 109 219;
    --contrast-primary-original: 255 255 255;

    --tint-1: 29 29 29;
    --contrast-tint-1: 255 255 255;
    --tint-2: 34 34 35;
    --contrast-tint-2: 255 255 255;
    --tint-3: 43 44 45;
    --contrast-tint-3: 255 255 255;
    --tint-4: 47 48 49;
    --contrast-tint-4: 255 255 255;
    --tint-5: 52 54 55;
    --contrast-tint-5: 255 255 255;
    --tint-6: 56 58 60;
    --contrast-tint-6: 255 255 255;
    --tint-7: 66 68 70;
    --contrast-tint-7: 255 255 255;
    --tint-8: 76 78 81;
    --contrast-tint-8: 255 255 255;
    --tint-9: 127 133 144;
    --contrast-tint-9: 255 255 255;
    --tint-10: 138 145 156;
    --contrast-tint-10: 255 255 255;
    --tint-11: 190 192 197;
    --contrast-tint-11: 29 29 29;
    /*--tint-12: 190 192 197;*/
    --contrast-tint-12: 29 29 29;
    --tint-original: 120 120 120;
    --contrast-tint-original: 255 255 255;

    --neutral-1: 29 29 29;
    --contrast-neutral-1: 255 255 255;
    --neutral-12: 255 255 255;
    --contrast-neutral-12: 29 29 29;

    --header-background: 52 109 219;
    --header-link: 255 255 255;

    --spacing: 1rem;
}

/* Base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: rgb(var(--tint-12));
    background-color: rgb(var(--tint-1));
    scroll-behavior: smooth;
}

body {
    background-color: rgb(var(--tint-1));
}

/* Focus styles for accessibility */
*:focus-visible {
    outline: 2px solid rgb(var(--primary-9));
    outline-offset: 2px;
    border-radius: 0.25rem;
}


/* Header styles */
header {
    background-color: rgba(var(--header-background), 0.9);
    color: rgb(var(--header-link));
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 rgba(var(--tint-12), 0.02);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.header-container {
    /*max-width: 1440px;*/
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: rgb(var(--header-link));
    transition: opacity 0.2s;
    gap: 0.75rem;
}

.logo:hover {
    opacity: 0.8;
}

.logo img {
    max-height: 40px;
    max-width: 200px;
    object-fit: contain;
}

.logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: rgb(var(--header-link));
    white-space: nowrap;
}

/* Navigation */
nav {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

nav a {
    color: rgb(var(--header-link));
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s;
}

nav a:hover {
    background-color: rgba(var(--header-link), 0.1);
}

/* Main layout */
.main-container {
    display: flex;
    max-width: 1920px;
    margin: 0 auto;
    min-height: calc(100vh - 64px);
}

/* Sidebar */
.sidebar {
    width: 280px;
    background-color: rgb(var(--tint-2));
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: sticky;
    top: 64px;
    height: calc(100vh - 64px);
    border-right: 1px solid rgb(var(--tint-4));
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--tint-6)) transparent;
}

.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: rgb(var(--tint-6));
    border-radius: 3px;
}

.sidebar > nav {
    padding: 1.5rem 0.5rem 5rem;
    position: relative;
}

.sidebar ul {
    list-style: none;
}

.sidebar li {
    margin-bottom: 0.125rem;
}

.sidebar a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.375rem 0.75rem;
    /*color: rgba(190, 192, 197, 0.45);*/
    color: color-mix(in oklab, rgb(var(--tint-12)) 64%, transparent);
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.2s ease-in-out;
    font-size: 0.875rem;
    font-weight: 400;
    position: relative;
}

.sidebar a .menu-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    opacity: 0.6;
    /* Default icon - circle */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/></svg>');
}

/* Specific icons for menu items */
a[href="/"] .menu-icon {
    /* Hand wave icon for Welcome */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 400L0 464l48 48 64-64c35.3 0 64-28.7 64-64c0-35.3-28.7-64-64-64zm112 96c35.3 0 64-28.7 64-64c0-35.3-28.7-64-64-64l-64 64c0 35.3 28.7 64 64 64zm224-192c35.3 0 64-28.7 64-64c0-35.3-28.7-64-64-64l-64 64c0 35.3 28.7 64 64 64zm-96-96c35.3 0 64-28.7 64-64c0-35.3-28.7-64-64-64L240 144c0 35.3 28.7 64 64 64zM64 272L0 336l48 48 64-64c35.3 0 64-28.7 64-64c0-35.3-28.7-64-64-64zm336-16c35.3 0 64-28.7 64-64c0-35.3-28.7-64-64-64l-64 64c0 35.3 28.7 64 64 64z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 400L0 464l48 48 64-64c35.3 0 64-28.7 64-64c0-35.3-28.7-64-64-64zm112 96c35.3 0 64-28.7 64-64c0-35.3-28.7-64-64-64l-64 64c0 35.3 28.7 64 64 64zm224-192c35.3 0 64-28.7 64-64c0-35.3-28.7-64-64-64l-64 64c0 35.3 28.7 64 64 64zm-96-96c35.3 0 64-28.7 64-64c0-35.3-28.7-64-64-64L240 144c0 35.3 28.7 64 64 64zM64 272L0 336l48 48 64-64c35.3 0 64-28.7 64-64c0-35.3-28.7-64-64-64zm336-16c35.3 0 64-28.7 64-64c0-35.3-28.7-64-64-64l-64 64c0 35.3 28.7 64 64 64z"/></svg>');
}

a[href*="why-adpriva"] .menu-icon {
    /* Lightbulb for Why AdPriva */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M272 384c9.6-31.9 29.5-59.1 49.2-86.2l0 0c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4l0 0c19.8 27.1 39.7 54.4 49.2 86.2H272zM192 512c44.2 0 80-35.8 80-80V416H112v16c0 44.2 35.8 80 80 80zM112 176c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-61.9 50.1-112 112-112c8.8 0 16 7.2 16 16s-7.2 16-16 16c-44.2 0-80 35.8-80 80z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M272 384c9.6-31.9 29.5-59.1 49.2-86.2l0 0c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4l0 0c19.8 27.1 39.7 54.4 49.2 86.2H272zM192 512c44.2 0 80-35.8 80-80V416H112v16c0 44.2 35.8 80 80 80zM112 176c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-61.9 50.1-112 112-112c8.8 0 16 7.2 16 16s-7.2 16-16 16c-44.2 0-80 35.8-80 80z"/></svg>');
}

a[href*="advertisers"] .menu-icon {
    /* Rectangle ad icon */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM229.5 173.3l72 144c5.9 11.9 1.1 26.3-10.7 32.2s-26.3 1.1-32.2-10.7L253.2 328H162.8l-5.4 10.7c-5.9 11.9-20.3 16.7-32.2 10.7s-16.7-20.3-10.7-32.2l72-144c4.1-8.1 12.4-13.3 21.5-13.3s17.4 5.1 21.5 13.3zM208 237.7L186.8 280h42.3L208 237.7zM392 256a24 24 0 1 0 0 48 24 24 0 1 0 0-48zm24-43.9V184c0-13.3 10.7-24 24-24s24 10.7 24 24v96 48c0 13.3-10.7 24-24 24c-6.6 0-12.6-2.7-17-7c-9.4 4.5-19.9 7-31 7c-39.8 0-72-32.2-72-72s32.2-72 72-72c8.4 0 16.5 1.4 24 4.1z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM229.5 173.3l72 144c5.9 11.9 1.1 26.3-10.7 32.2s-26.3 1.1-32.2-10.7L253.2 328H162.8l-5.4 10.7c-5.9 11.9-20.3 16.7-32.2 10.7s-16.7-20.3-10.7-32.2l72-144c4.1-8.1 12.4-13.3 21.5-13.3s17.4 5.1 21.5 13.3zM208 237.7L186.8 280h42.3L208 237.7zM392 256a24 24 0 1 0 0 48 24 24 0 1 0 0-48zm24-43.9V184c0-13.3 10.7-24 24-24s24 10.7 24 24v96 48c0 13.3-10.7 24-24 24c-6.6 0-12.6-2.7-17-7c-9.4 4.5-19.9 7-31 7c-39.8 0-72-32.2-72-72s32.2-72 72-72c8.4 0 16.5 1.4 24 4.1z"/></svg>');
}

a[href*="publishers"] .menu-icon {
    /* Newspaper icon */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M96 96c0-35.3 28.7-64 64-64H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H80c-44.2 0-80-35.8-80-80V128c0-17.7 14.3-32 32-32s32 14.3 32 32V400c0 8.8 7.2 16 16 16s16-7.2 16-16V96zm64 24v80c0 13.3 10.7 24 24 24H296c13.3 0 24-10.7 24-24V120c0-13.3-10.7-24-24-24H184c-13.3 0-24 10.7-24 24zm208-8c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16s-7.2-16-16-16H384c-8.8 0-16 7.2-16 16zm0 96c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16s-7.2-16-16-16H384c-8.8 0-16 7.2-16 16zM160 304c0 8.8 7.2 16 16 16H432c8.8 0 16-7.2 16-16s-7.2-16-16-16H176c-8.8 0-16 7.2-16 16zm0 96c0 8.8 7.2 16 16 16H432c8.8 0 16-7.2 16-16s-7.2-16-16-16H176c-8.8 0-16 7.2-16 16z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M96 96c0-35.3 28.7-64 64-64H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H80c-44.2 0-80-35.8-80-80V128c0-17.7 14.3-32 32-32s32 14.3 32 32V400c0 8.8 7.2 16 16 16s16-7.2 16-16V96zm64 24v80c0 13.3 10.7 24 24 24H296c13.3 0 24-10.7 24-24V120c0-13.3-10.7-24-24-24H184c-13.3 0-24 10.7-24 24zm208-8c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16s-7.2-16-16-16H384c-8.8 0-16 7.2-16 16zm0 96c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16s-7.2-16-16-16H384c-8.8 0-16 7.2-16 16zM160 304c0 8.8 7.2 16 16 16H432c8.8 0 16-7.2 16-16s-7.2-16-16-16H176c-8.8 0-16 7.2-16 16zm0 96c0 8.8 7.2 16 16 16H432c8.8 0 16-7.2 16-16s-7.2-16-16-16H176c-8.8 0-16 7.2-16 16z"/></svg>');
}

a[href*="users"] .menu-icon,
a[href*="user"] .menu-icon {
    /* User icon */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>');
}

a[href*="developers"] .menu-icon {
    /* Code icon */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"/></svg>');
}

a[href*="faqs"] .menu-icon,
a[href*="faq"] .menu-icon {
    /* Question icon */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M80 160c0-35.3 28.7-64 64-64h32c35.3 0 64 28.7 64 64v3.6c0 21.8-11.1 42.1-29.4 53.8l-42.2 27.1c-25.2 16.2-40.4 44.1-40.4 74V320c0 17.7 14.3 32 32 32s32-14.3 32-32v-1.4c0-8.2 4.2-15.8 11-20.2l42.2-27.1c36.6-23.6 58.8-64.1 58.8-107.7V160c0-70.7-57.3-128-128-128H144C73.3 32 16 89.3 16 160c0 17.7 14.3 32 32 32s32-14.3 32-32zm80 320a40 40 0 1 0 0-80 40 40 0 1 0 0 80z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M80 160c0-35.3 28.7-64 64-64h32c35.3 0 64 28.7 64 64v3.6c0 21.8-11.1 42.1-29.4 53.8l-42.2 27.1c-25.2 16.2-40.4 44.1-40.4 74V320c0 17.7 14.3 32 32 32s32-14.3 32-32v-1.4c0-8.2 4.2-15.8 11-20.2l42.2-27.1c36.6-23.6 58.8-64.1 58.8-107.7V160c0-70.7-57.3-128-128-128H144C73.3 32 16 89.3 16 160c0 17.7 14.3 32 32 32s32-14.3 32-32zm80 320a40 40 0 1 0 0-80 40 40 0 1 0 0 80z"/></svg>');
}

a[href*="core-concepts"] .menu-icon {
    /* Cube icon */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M234.5 5.7c13.9-5 29.1-5 43.1 0l192 68.6C495 83.4 512 107.5 512 134.6V377.4c0 27-17 51.2-42.5 60.3l-192 68.6c-13.9 5-29.1 5-43.1 0l-192-68.6C17 428.6 0 404.5 0 377.4V134.6c0-27 17-51.2 42.5-60.3l192-68.6zM256 66L82.3 128 256 190l173.7-62L256 66zm32 368.6l160-57.1v-188L288 246.6v188z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M234.5 5.7c13.9-5 29.1-5 43.1 0l192 68.6C495 83.4 512 107.5 512 134.6V377.4c0 27-17 51.2-42.5 60.3l-192 68.6c-13.9 5-29.1 5-43.1 0l-192-68.6C17 428.6 0 404.5 0 377.4V134.6c0-27 17-51.2 42.5-60.3l192-68.6zM256 66L82.3 128 256 190l173.7-62L256 66zm32 368.6l160-57.1v-188L288 246.6v188z"/></svg>');
}

a[href*="architecture"] .menu-icon {
    /* Diagram icon */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64V400c0 44.2 35.8 80 80 80H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H80c-8.8 0-16-7.2-16-16V64zm406.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L320 210.7l-57.4-57.4c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L240 221.3l57.4 57.4c12.5 12.5 32.8 12.5 45.3 0l128-128z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64V400c0 44.2 35.8 80 80 80H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H80c-8.8 0-16-7.2-16-16V64zm406.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L320 210.7l-57.4-57.4c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L240 221.3l57.4 57.4c12.5 12.5 32.8 12.5 45.3 0l128-128z"/></svg>');
}

a[href*="developer-docs"] .menu-icon {
    /* Book code icon */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16h48c8.8 0 16 7.2 16 16v48h48c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H208v48c0 8.8-7.2 16-16 16H144c-8.8 0-16-7.2-16-16V256H80c-8.8 0-16-7.2-16-16V208c0-8.8 7.2-16 16-16h48V144z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16h48c8.8 0 16 7.2 16 16v48h48c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H208v48c0 8.8-7.2 16-16 16H144c-8.8 0-16-7.2-16-16V256H80c-8.8 0-16-7.2-16-16V208c0-8.8 7.2-16 16-16h48V144z"/></svg>');
}

a[href*="compliance"] .menu-icon {
    /* Shield icon */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 0c4.6 0 9.2 1 13.4 2.9L457.7 82.8c22 9.3 38.4 31 38.3 57.2c-.5 99.2-41.3 280.7-213.6 363.2c-16.7 8-36.1 8-52.8 0C57.3 420.7 16.5 239.2 16 140c-.1-26.2 16.3-47.9 38.3-57.2L242.7 2.9C246.8 1 251.4 0 256 0z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 0c4.6 0 9.2 1 13.4 2.9L457.7 82.8c22 9.3 38.4 31 38.3 57.2c-.5 99.2-41.3 280.7-213.6 363.2c-16.7 8-36.1 8-52.8 0C57.3 420.7 16.5 239.2 16 140c-.1-26.2 16.3-47.9 38.3-57.2L242.7 2.9C246.8 1 251.4 0 256 0z"/></svg>');
}

a[href*="economics"] .menu-icon,
a[href*="rewards"] .menu-icon {
    /* Coins icon */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M512 80c0 18-14.3 34.6-38.4 48c-29.1 16.1-72.5 27.5-122.3 30.9c-3.7-1.8-7.4-3.5-11.3-5C300.6 137.4 248.2 128 192 128c-8.3 0-16.4 .2-24.5 .6l-1.1-.6C142.3 114.6 128 98 128 80c0-44.2 86-80 192-80S512 35.8 512 80zM160.7 161.1c10.2-.7 20.7-1.1 31.3-1.1c62.2 0 117.4 12.3 152.5 31.4C369.3 204.9 384 221.7 384 240c0 4-.7 7.9-2.1 11.7c-4.6 13.2-17 25.3-35 35.5c0 0 0 0 0 0c-.1 .1-.3 .1-.4 .2l0 0 0 0c-.3 .2-.6 .3-.9 .5c-35 19.4-90.8 32-153.6 32c-59.6 0-112.9-11.3-148.2-29.1c-1.9-.9-3.7-1.9-5.5-2.9C14.3 274.6 0 258 0 240c0-34.8 53.4-64.5 128-75.4c10.5-1.5 21.4-2.7 32.7-3.5zM416 240c0-21.9-10.6-39.9-24.1-53.4c28.3-4.4 54.2-11.4 76.2-20.5c16.3-6.8 31.5-15.2 43.9-25.5V176c0 19.3-16.5 37.1-43.8 50.9c-14.6 7.4-32.4 13.7-52.4 18.5c.1-1.8 .2-3.5 .2-5.3zm-32 96c0 18-14.3 34.6-38.4 48c-1.8 1-3.6 1.9-5.5 2.9C304.9 404.7 251.6 416 192 416c-62.8 0-118.6-12.6-153.6-32C14.3 370.6 0 354 0 336V300.6c12.5 10.3 27.6 18.7 43.9 25.5C83.4 342.6 135.8 352 192 352s108.6-9.4 148.1-25.9c7.8-3.2 15.3-6.9 22.4-10.9c6.1-3.4 11.8-7.2 17.2-11.2c1.5-1.1 2.9-2.3 4.3-3.4V304v5.7V336zm32 0V304 278.1c19-4.2 36.5-9.5 52.1-16c16.3-6.8 31.5-15.2 43.9-25.5V272c0 10.5-5 21-14.9 30.9c-16.3 16.3-45 29.7-81.3 38.4c.1-1.7 .2-3.5 .2-5.3zM192 448c56.2 0 108.6-9.4 148.1-25.9c16.3-6.8 31.5-15.2 43.9-25.5V432c0 44.2-86 80-192 80S0 476.2 0 432V396.6c12.5 10.3 27.6 18.7 43.9 25.5C83.4 438.6 135.8 448 192 448z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M512 80c0 18-14.3 34.6-38.4 48c-29.1 16.1-72.5 27.5-122.3 30.9c-3.7-1.8-7.4-3.5-11.3-5C300.6 137.4 248.2 128 192 128c-8.3 0-16.4 .2-24.5 .6l-1.1-.6C142.3 114.6 128 98 128 80c0-44.2 86-80 192-80S512 35.8 512 80zM160.7 161.1c10.2-.7 20.7-1.1 31.3-1.1c62.2 0 117.4 12.3 152.5 31.4C369.3 204.9 384 221.7 384 240c0 4-.7 7.9-2.1 11.7c-4.6 13.2-17 25.3-35 35.5c0 0 0 0 0 0c-.1 .1-.3 .1-.4 .2l0 0 0 0c-.3 .2-.6 .3-.9 .5c-35 19.4-90.8 32-153.6 32c-59.6 0-112.9-11.3-148.2-29.1c-1.9-.9-3.7-1.9-5.5-2.9C14.3 274.6 0 258 0 240c0-34.8 53.4-64.5 128-75.4c10.5-1.5 21.4-2.7 32.7-3.5zM416 240c0-21.9-10.6-39.9-24.1-53.4c28.3-4.4 54.2-11.4 76.2-20.5c16.3-6.8 31.5-15.2 43.9-25.5V176c0 19.3-16.5 37.1-43.8 50.9c-14.6 7.4-32.4 13.7-52.4 18.5c.1-1.8 .2-3.5 .2-5.3zm-32 96c0 18-14.3 34.6-38.4 48c-1.8 1-3.6 1.9-5.5 2.9C304.9 404.7 251.6 416 192 416c-62.8 0-118.6-12.6-153.6-32C14.3 370.6 0 354 0 336V300.6c12.5 10.3 27.6 18.7 43.9 25.5C83.4 342.6 135.8 352 192 352s108.6-9.4 148.1-25.9c7.8-3.2 15.3-6.9 22.4-10.9c6.1-3.4 11.8-7.2 17.2-11.2c1.5-1.1 2.9-2.3 4.3-3.4V304v5.7V336zm32 0V304 278.1c19-4.2 36.5-9.5 52.1-16c16.3-6.8 31.5-15.2 43.9-25.5V272c0 10.5-5 21-14.9 30.9c-16.3 16.3-45 29.7-81.3 38.4c.1-1.7 .2-3.5 .2-5.3zM192 448c56.2 0 108.6-9.4 148.1-25.9c16.3-6.8 31.5-15.2 43.9-25.5V432c0 44.2-86 80-192 80S0 476.2 0 432V396.6c12.5 10.3 27.6 18.7 43.9 25.5C83.4 438.6 135.8 448 192 448z"/></svg>');
}

a[href*="metrics"] .menu-icon,
a[href*="measurement"] .menu-icon {
    /* Chart icon */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64V400c0 44.2 35.8 80 80 80H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H80c-8.8 0-16-7.2-16-16V64zm406.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L320 210.7l-57.4-57.4c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L240 221.3l57.4 57.4c12.5 12.5 32.8 12.5 45.3 0l128-128z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64V400c0 44.2 35.8 80 80 80H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H80c-8.8 0-16-7.2-16-16V64zm406.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L320 210.7l-57.4-57.4c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L240 221.3l57.4 57.4c12.5 12.5 32.8 12.5 45.3 0l128-128z"/></svg>');
}

a[href*="operations"] .menu-icon,
a[href*="upgrades"] .menu-icon {
    /* Gears icon */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M308.5 135.3c7.1-6.3 9.9-16.2 6.2-25c-2.3-5.3-4.8-10.5-7.6-15.5L304 89.4c-3-5-6.3-9.9-9.8-14.6c-5.7-7.6-15.7-10.1-24.7-7.1l-28.2 9.3c-10.7-8.8-23-16-36.2-20.9L199 27.1c-1.9-9.3-9.1-16.7-18.5-17.8C173.9 8.4 167.2 8 160.4 8h-.7c-6.8 0-13.5 .4-20.1 1.2c-9.4 1.1-16.6 8.6-18.5 17.8L115 56.1c-13.3 5-25.5 12.1-36.2 20.9L50.5 67.8c-9-3-19-.5-24.7 7.1c-3.5 4.7-6.8 9.6-9.9 14.6l-3 5.3c-2.8 5-5.3 10.2-7.6 15.6c-3.7 8.7-.9 18.6 6.2 25l22.2 19.8C32.6 161.9 32 168.9 32 176s.6 14.1 1.7 20.9L11.5 216.7c-7.1 6.3-9.9 16.2-6.2 25c2.3 5.3 4.8 10.5 7.6 15.6l3 5.2c3 5.1 6.3 9.9 9.9 14.6c5.7 7.6 15.7 10.1 24.7 7.1l28.2-9.3c10.7 8.8 23 16 36.2 20.9l6.1 29.1c1.9 9.3 9.1 16.7 18.5 17.8c6.7 .8 13.5 1.2 20.4 1.2s13.7-.4 20.4-1.2c9.4-1.1 16.6-8.6 18.5-17.8l6.1-29.1c13.3-5 25.5-12.1 36.2-20.9l28.2 9.3c9 3 19 .5 24.7-7.1c3.5-4.7 6.8-9.5 9.8-14.6l3.1-5.4c2.8-5 5.3-10.2 7.6-15.5c3.7-8.7 .9-18.6-6.2-25l-22.2-19.8c1.1-6.8 1.7-13.8 1.7-20.9s-.6-14.1-1.7-20.9l22.2-19.8zM112 176a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zM504.7 500.5c6.3 7.1 16.2 9.9 25 6.2c5.3-2.3 10.5-4.8 15.5-7.6l5.4-3.1c5-3 9.9-6.3 14.6-9.8c7.6-5.7 10.1-15.7 7.1-24.7l-9.3-28.2c8.8-10.7 16-23 20.9-36.2l29.1-6.1c9.3-1.9 16.7-9.1 17.8-18.5c.8-6.7 1.2-13.5 1.2-20.4s-.4-13.7-1.2-20.4c-1.1-9.4-8.6-16.6-17.8-18.5L583.9 307c-5-13.3-12.1-25.5-20.9-36.2l9.3-28.2c3-9 .5-19-7.1-24.7c-4.7-3.5-9.6-6.8-14.6-9.9l-5.3-3c-5-2.8-10.2-5.3-15.6-7.6c-8.7-3.7-18.6-.9-25 6.2l-19.8 22.2c-6.8-1.1-13.8-1.7-20.9-1.7s-14.1 .6-20.9 1.7l-19.8-22.2c-6.3-7.1-16.2-9.9-25-6.2c-5.3 2.3-10.5 4.8-15.6 7.6l-5.2 3c-5.1 3-9.9 6.3-14.6 9.9c-7.6 5.7-10.1 15.7-7.1 24.7l9.3 28.2c-8.8 10.7-16 23-20.9 36.2L315.1 313c-9.3 1.9-16.7 9.1-17.8 18.5c-.8 6.7-1.2 13.5-1.2 20.4s.4 13.7 1.2 20.4c1.1 9.4 8.6 16.6 17.8 18.5l29.1 6.1c5 13.3 12.1 25.5 20.9 36.2l-9.3 28.2c-3 9-.5 19 7.1 24.7c4.7 3.5 9.5 6.8 14.6 9.8l5.4 3.1c5 2.8 10.2 5.3 15.5 7.6c8.7 3.7 18.6 .9 25-6.2l19.8-22.2c6.8 1.1 13.8 1.7 20.9 1.7s14.1-.6 20.9-1.7l19.8 22.2zM464 400a48 48 0 1 1 0-96 48 48 0 1 1 0 96z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M308.5 135.3c7.1-6.3 9.9-16.2 6.2-25c-2.3-5.3-4.8-10.5-7.6-15.5L304 89.4c-3-5-6.3-9.9-9.8-14.6c-5.7-7.6-15.7-10.1-24.7-7.1l-28.2 9.3c-10.7-8.8-23-16-36.2-20.9L199 27.1c-1.9-9.3-9.1-16.7-18.5-17.8C173.9 8.4 167.2 8 160.4 8h-.7c-6.8 0-13.5 .4-20.1 1.2c-9.4 1.1-16.6 8.6-18.5 17.8L115 56.1c-13.3 5-25.5 12.1-36.2 20.9L50.5 67.8c-9-3-19-.5-24.7 7.1c-3.5 4.7-6.8 9.6-9.9 14.6l-3 5.3c-2.8 5-5.3 10.2-7.6 15.6c-3.7 8.7-.9 18.6 6.2 25l22.2 19.8C32.6 161.9 32 168.9 32 176s.6 14.1 1.7 20.9L11.5 216.7c-7.1 6.3-9.9 16.2-6.2 25c2.3 5.3 4.8 10.5 7.6 15.6l3 5.2c3 5.1 6.3 9.9 9.9 14.6c5.7 7.6 15.7 10.1 24.7 7.1l28.2-9.3c10.7 8.8 23 16 36.2 20.9l6.1 29.1c1.9 9.3 9.1 16.7 18.5 17.8c6.7 .8 13.5 1.2 20.4 1.2s13.7-.4 20.4-1.2c9.4-1.1 16.6-8.6 18.5-17.8l6.1-29.1c13.3-5 25.5-12.1 36.2-20.9l28.2 9.3c9 3 19 .5 24.7-7.1c3.5-4.7 6.8-9.5 9.8-14.6l3.1-5.4c2.8-5 5.3-10.2 7.6-15.5c3.7-8.7 .9-18.6-6.2-25l-22.2-19.8c1.1-6.8 1.7-13.8 1.7-20.9s-.6-14.1-1.7-20.9l22.2-19.8zM112 176a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zM504.7 500.5c6.3 7.1 16.2 9.9 25 6.2c5.3-2.3 10.5-4.8 15.5-7.6l5.4-3.1c5-3 9.9-6.3 14.6-9.8c7.6-5.7 10.1-15.7 7.1-24.7l-9.3-28.2c8.8-10.7 16-23 20.9-36.2l29.1-6.1c9.3-1.9 16.7-9.1 17.8-18.5c.8-6.7 1.2-13.5 1.2-20.4s-.4-13.7-1.2-20.4c-1.1-9.4-8.6-16.6-17.8-18.5L583.9 307c-5-13.3-12.1-25.5-20.9-36.2l9.3-28.2c3-9 .5-19-7.1-24.7c-4.7-3.5-9.6-6.8-14.6-9.9l-5.3-3c-5-2.8-10.2-5.3-15.6-7.6c-8.7-3.7-18.6-.9-25 6.2l-19.8 22.2c-6.8-1.1-13.8-1.7-20.9-1.7s-14.1 .6-20.9 1.7l-19.8-22.2c-6.3-7.1-16.2-9.9-25-6.2c-5.3 2.3-10.5 4.8-15.6 7.6l-5.2 3c-5.1 3-9.9 6.3-14.6 9.9c-7.6 5.7-10.1 15.7-7.1 24.7l9.3 28.2c-8.8 10.7-16 23-20.9 36.2L315.1 313c-9.3 1.9-16.7 9.1-17.8 18.5c-.8 6.7-1.2 13.5-1.2 20.4s.4 13.7 1.2 20.4c1.1 9.4 8.6 16.6 17.8 18.5l29.1 6.1c5 13.3 12.1 25.5 20.9 36.2l-9.3 28.2c-3 9-.5 19 7.1 24.7c4.7 3.5 9.5 6.8 14.6 9.8l5.4 3.1c5 2.8 10.2 5.3 15.5 7.6c8.7 3.7 18.6 .9 25-6.2l19.8-22.2c6.8 1.1 13.8 1.7 20.9 1.7s14.1-.6 20.9-1.7l19.8 22.2zM464 400a48 48 0 1 1 0-96 48 48 0 1 1 0 96z"/></svg>');
}

a[href*="roadmap"] .menu-icon {
    /* Map icon */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M384 476.1L192 421.2V35.9L384 90.8V476.1zm32-1.2V89.5L543.1 37.5c15.8-6.3 32.9 5.3 32.9 22.3V396.6c0 9.8-6 18.6-15.1 22.3L416 474.8zM15.1 95.1L160 37.2V423.6L32.9 474.5C17.1 480.8 0 469.2 0 452.2V115.4c0-9.8 6-18.6 15.1-22.3z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M384 476.1L192 421.2V35.9L384 90.8V476.1zm32-1.2V89.5L543.1 37.5c15.8-6.3 32.9 5.3 32.9 22.3V396.6c0 9.8-6 18.6-15.1 22.3L416 474.8zM15.1 95.1L160 37.2V423.6L32.9 474.5C17.1 480.8 0 469.2 0 452.2V115.4c0-9.8 6-18.6 15.1-22.3z"/></svg>');
}

a[href*="glossary"] .menu-icon {
    /* Book icon */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/></svg>');
}

a[href*="comparisons"] .menu-icon,
a[href*="ecosystem"] .menu-icon {
    /* Network icon */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M256 64H384v64H256V64zM240 0c-26.5 0-48 21.5-48 48v96c0 26.5 21.5 48 48 48h48v32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96v32H80c-26.5 0-48 21.5-48 48v96c0 26.5 21.5 48 48 48H240c26.5 0 48-21.5 48-48V368c0-26.5-21.5-48-48-48H192V288H448v32H400c-26.5 0-48 21.5-48 48v96c0 26.5 21.5 48 48 48H560c26.5 0 48-21.5 48-48V368c0-26.5-21.5-48-48-48H512V288h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V192h48c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48H240zM96 448V384H224v64H96zm320-64H544v64H416V384z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M256 64H384v64H256V64zM240 0c-26.5 0-48 21.5-48 48v96c0 26.5 21.5 48 48 48h48v32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96v32H80c-26.5 0-48 21.5-48 48v96c0 26.5 21.5 48 48 48H240c26.5 0 48-21.5 48-48V368c0-26.5-21.5-48-48-48H192V288H448v32H400c-26.5 0-48 21.5-48 48v96c0 26.5 21.5 48 48 48H560c26.5 0 48-21.5 48-48V368c0-26.5-21.5-48-48-48H512V288h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V192h48c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48H240zM96 448V384H224v64H96zm320-64H544v64H416V384z"/></svg>');
}

.sidebar a:hover {
    background-color: rgb(var(--tint-3));
    color: rgb(190, 192, 197);
}

.sidebar a.active {
    background-color: rgba(52, 109, 219, 0.15);
    color: rgb(52, 109, 219);
    font-weight: 500;
}


.sidebar .group-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(127, 133, 144, 0.64);
    padding: 1.5rem 0.75rem 0.75rem;
    margin-top: 1.5rem;
    position: sticky;
    top: -1.5rem;
    background: linear-gradient(
        to bottom,
        rgb(var(--tint-2)) 0%,
        rgb(var(--tint-2)) 70%,
        rgba(var(--tint-2), 0) 100%
    );
    z-index: 10;
    -webkit-mask-image: linear-gradient(
        rgba(0, 0, 0, 1) 70%,
        rgba(0, 0, 0, 0) 100%
    );
    mask-image: linear-gradient(
        rgba(0, 0, 0, 1) 70%,
        rgba(0, 0, 0, 0) 100%
    );
}

.sidebar .group-title:first-child {
    margin-top: 0;
}


/* Main content */
.content {
    flex: 1;
    padding: 2rem;
    max-width: 48rem;
    margin: 0 auto;
}

.content h1 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: rgb(var(--tint-12));
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.content h2 {
    font-size: 1.875rem;
    font-weight: 600;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: rgb(var(--tint-12));
    padding-top: 0.75rem;
    border-top: 1px solid rgb(var(--tint-4));
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.content h2:first-child {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

.content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: rgb(var(--tint-12));
    line-height: 1.4;
    letter-spacing: -0.015em;
}

.content h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: rgb(var(--tint-11));
    line-height: 1.5;
}

.content p {
    margin-bottom: 1rem;
    color: rgb(var(--tint-11));
    line-height: 1.7;
    font-size: 1rem;
}

.content a {
    color: rgb(var(--primary-9));
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.2s;
}

.content a:hover {
    color: rgb(var(--primary-10));
    border-bottom-color: rgb(var(--primary-10));
}

.content ul,
.content ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
    color: rgb(var(--tint-11));
    line-height: 1.7;
}

.content li {
    margin-bottom: 0.5rem;
}

.content li::marker {
    color: rgb(var(--tint-9));
}

.content code {
    background-color: rgb(var(--tint-3));
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
    color: rgb(var(--tint-12));
    border: 1px solid rgb(var(--tint-4));
}

.content pre {
    background-color: rgb(var(--tint-2));
    padding: 1.25rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
    border: 1px solid rgb(var(--tint-4));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.content pre code {
    background: none;
    padding: 0;
    border: none;
    font-size: 0.875rem;
    line-height: 1.5;
}

.content blockquote {
    border-left: 4px solid rgb(var(--primary-9));
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    color: rgb(var(--tint-10));
    font-style: italic;
    background-color: rgba(var(--primary-9), 0.05);
    padding: 1rem 1rem 1rem 1.5rem;
    border-radius: 0 0.375rem 0.375rem 0;
}

.content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1.5rem 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid rgb(var(--tint-4));
}

.content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.9375rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border-radius: 0.5rem;
    overflow: hidden;
}

.content table th,
.content table td {
    padding: 0.875rem 1rem;
    border: 1px solid rgb(var(--tint-4));
    text-align: left;
}

.content table th {
    background-color: rgb(var(--tint-2));
    font-weight: 600;
    color: rgb(var(--tint-12));
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.content table td {
    color: rgb(var(--tint-11));
    background-color: rgb(var(--tint-1));
}

.content table tr:hover td {
    background-color: rgb(var(--tint-2));
}

/* Table of contents */
.toc {
    width: 240px;
    padding: 2rem 1rem 2rem 0;
    position: sticky;
    top: 64px;
    height: calc(100vh - 64px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--tint-6)) transparent;
}

.toc::-webkit-scrollbar {
    width: 4px;
}

.toc::-webkit-scrollbar-track {
    background: transparent;
}

.toc::-webkit-scrollbar-thumb {
    background-color: rgb(var(--tint-6));
    border-radius: 2px;
}

.toc h4 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(var(--tint-9));
    margin-bottom: 1rem;
    padding-left: 0.5rem;
}

.toc ul {
    list-style: none;
    border-left: 1px solid rgb(var(--tint-4));
}

.toc li {
    margin-bottom: 0;
}

.toc a {
    display: block;
    color: rgb(var(--tint-10));
    text-decoration: none;
    font-size: 0.875rem;
    padding: 0.375rem 0.5rem;
    margin-left: -1px;
    border-left: 2px solid transparent;
    transition: all 0.2s;
    line-height: 1.5;
}

.toc a:hover {
    color: rgb(var(--tint-12));
    background-color: rgb(var(--tint-2));
    border-left-color: rgb(var(--tint-6));
}

.toc a.active {
    color: rgb(var(--primary-9));
    font-weight: 500;
    border-left-color: rgb(var(--primary-9));
    background-color: rgba(var(--primary-9), 0.05);
}

.toc li li a {
    padding-left: 1.5rem;
    font-size: 0.8125rem;
}

.toc li li li a {
    padding-left: 2.5rem;
    font-size: 0.75rem;
}

/* Footer */
footer {
    border-top: 1px solid rgb(var(--tint-4));
    padding: 2rem;
    text-align: center;
    color: rgb(var(--tint-9));
    font-size: 0.875rem;
}

/* Page navigation */
.page-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgb(var(--tint-4));
}

.page-nav a {
    flex: 1;
    padding: 1.25rem;
    border: 1px solid rgb(var(--tint-4));
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.2s;
    background-color: rgb(var(--tint-1));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.page-nav a:hover {
    border-color: rgb(var(--primary-9));
    background-color: rgb(var(--tint-2));
    box-shadow: 0 4px 6px rgba(var(--primary-9), 0.1);
    transform: translateY(-2px);
}

.page-nav .nav-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(var(--tint-9));
    margin-bottom: 0.375rem;
    font-weight: 600;
}

.page-nav .nav-title {
    display: block;
    color: rgb(var(--tint-12));
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.4;
}

.page-nav a:hover .nav-title {
    color: rgb(var(--primary-9));
}

/* Responsive */
@media (max-width: 1024px) {
    .toc {
        display: none;
    }
}

@media (max-width: 768px) {
    .sidebar {
        display: none;
    }

    .content {
        padding: 1rem;
    }

    .header-container {
        padding: 0 1rem;
    }
}

/* Utility classes */
.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 2rem;
}

.text-center {
    text-align: center;
}

.mt-4 {
    margin-top: 1rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

/* Lead paragraph style */
.lead {
    font-size: 1.25rem;
    line-height: 1.6;
    color: rgb(var(--tint-11));
    margin-bottom: 1.5rem;
    font-weight: 300;
}

/* Enhanced content styles */
.content strong {
    font-weight: 600;
    color: rgb(var(--tint-12));
}

.content em {
    font-style: italic;
    color: rgb(var(--tint-11));
}

.content hr {
    border: none;
    border-top: 1px solid rgb(var(--tint-4));
    margin: 2rem 0;
}

/* Code highlighting improvements */
.content pre[class*="language-"] {
    background-color: rgb(var(--tint-2));
    border: 1px solid rgb(var(--tint-4));
}

/* Smooth transitions */
.content a,
.sidebar a,
.toc a,
.page-nav a,
button,
.logo {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Loading animation for images */
.content img {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Print styles */
@media print {
    header,
    .sidebar,
    .toc,
    .page-nav,
    footer {
        display: none;
    }

    .content {
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
}

/* ===== Mermaid Diagram Styles ===== */

/* Mermaid container */
.mermaid {
    background-color: rgb(var(--tint-2));
    border: 1px solid rgb(var(--tint-4));
    border-radius: 0.5rem;
    padding: 2rem;
    margin: 2rem 0;
    overflow-x: auto;
    text-align: center;
}

/* Mermaid dark theme overrides */
.mermaid svg {
    max-width: 100%;
    height: auto;
    background-color: transparent;
}

/* Ensure text is readable in dark theme */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon {
    fill: rgb(var(--tint-3));
    stroke: rgb(var(--primary-9));
    stroke-width: 2px;
}

.mermaid .node .label,
.mermaid .nodeLabel {
    color: rgb(var(--tint-12));
    fill: rgb(var(--tint-12));
}

.mermaid .edgePath .path {
    stroke: rgb(var(--tint-9));
    stroke-width: 2px;
}

.mermaid .edgeLabel {
    background-color: rgb(var(--tint-2));
    color: rgb(var(--tint-11));
    fill: rgb(var(--tint-11));
}

.mermaid .marker {
    fill: rgb(var(--tint-9));
    stroke: rgb(var(--tint-9));
}

/* Flowchart specific */
.mermaid .flowchart-link {
    stroke: rgb(var(--tint-9));
}

/* Cluster/subgraph styling */
.mermaid .cluster rect {
    fill: rgb(var(--tint-2));
    stroke: rgb(var(--tint-5));
    stroke-width: 1px;
}

.mermaid .cluster .label {
    color: rgb(var(--tint-11));
    fill: rgb(var(--tint-11));
}

/* ===== Pagefind Search Styles ===== */

/* Search Button in Header */
.search-button {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1.125rem;
    background-color: rgba(var(--header-link), 0.12);
    border: 1px solid rgba(var(--header-link), 0.25);
    border-radius: 0.5rem;
    color: rgb(var(--header-link));
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.875rem;
    font-weight: 500;
    min-width: 200px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.search-button:hover {
    background-color: rgba(var(--header-link), 0.18);
    border-color: rgba(var(--header-link), 0.35);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.search-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.search-hint {
    flex: 1;
    text-align: left;
    opacity: 0.9;
}

.search-kbd {
    padding: 0.25rem 0.5rem;
    background-color: rgba(var(--header-link), 0.15);
    border: 1px solid rgba(var(--header-link), 0.25);
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-family: 'Monaco', 'Menlo', monospace;
    opacity: 0.85;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Search Modal */
.search-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh 1rem 1rem;
    animation: fadeIn 0.2s ease-out;
}

.search-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.75) 100%
    );
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
}

.search-modal-content {
    position: relative;
    width: 100%;
    max-width: 680px;
    max-height: calc(100vh - 12vh);
    background: linear-gradient(
        135deg,
        rgb(var(--tint-2)) 0%,
        rgb(var(--tint-1)) 100%
    );
    border-radius: 1rem;
    box-shadow:
        0 32px 64px -12px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(var(--primary-9), 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
    animation: slideDown 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid rgb(var(--tint-5));
}

.search-modal-header {
    position: relative;
    background-color: transparent;
    padding-top: 0.5rem;
}

.search-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: rgb(var(--tint-3));
    border: 1px solid rgb(var(--tint-5));
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    color: rgb(var(--tint-11));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    font-size: 1rem;
}

.search-close:hover {
    background: rgb(var(--tint-4));
    border-color: rgb(var(--tint-6));
    color: rgb(var(--tint-12));
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.search-close:active {
    transform: scale(0.95);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-3rem) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Pagefind UI Customization */
#pagefind-search,
.pagefind-ui {
    --pagefind-ui-scale: 1 !important;
    --pagefind-ui-primary: rgb(var(--primary-9)) !important;
    --pagefind-ui-text: rgb(var(--tint-12)) !important;
    --pagefind-ui-background: transparent !important;
    --pagefind-ui-border: rgb(var(--tint-5)) !important;
    --pagefind-ui-tag: rgb(var(--tint-3)) !important;
    --pagefind-ui-border-width: 1px !important;
    --pagefind-ui-border-radius: 0.625rem !important;
    --pagefind-ui-image-border-radius: 0.5rem !important;
    --pagefind-ui-image-box-ratio: 3 / 2 !important;
    --pagefind-ui-font: inherit !important;
}

.pagefind-ui__form,
.pagefind-ui .pagefind-ui__form {
    padding: 1.5rem 1.5rem 1rem !important;
    background-color: transparent !important;
    position: relative !important;
}

.pagefind-ui__search-input,
.pagefind-ui .pagefind-ui__search-input {
    background: rgb(var(--tint-1)) !important;
    border: 2px solid rgb(var(--tint-5)) !important;
    color: rgb(var(--tint-12)) !important;
    font-size: 1.125rem !important;
    padding: 1rem 1.25rem !important;
    border-radius: 0.75rem !important;
    width: 100% !important;
    outline: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 400 !important;
    font-family: inherit !important;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.pagefind-ui__search-input:focus,
.pagefind-ui .pagefind-ui__search-input:focus {
    border-color: rgb(var(--primary-9)) !important;
    box-shadow:
        0 0 0 4px rgba(var(--primary-9), 0.15),
        inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    background: rgb(var(--tint-2)) !important;
}

.pagefind-ui__search-input::placeholder,
.pagefind-ui .pagefind-ui__search-input::placeholder {
    color: rgb(var(--tint-9)) !important;
    opacity: 0.6 !important;
}

.pagefind-ui__search-clear,
.pagefind-ui .pagefind-ui__search-clear {
    background: rgb(var(--tint-4)) !important;
    border-radius: 0.375rem !important;
    padding: 0.25rem 0.5rem !important;
    right: 2rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.pagefind-ui__results-area,
.pagefind-ui .pagefind-ui__results-area {
    max-height: calc(80vh - 180px) !important;
    overflow-y: auto !important;
    padding: 0 1.5rem 1.5rem !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgb(var(--tint-6)) transparent !important;
}

.pagefind-ui__results-area::-webkit-scrollbar,
.pagefind-ui .pagefind-ui__results-area::-webkit-scrollbar {
    width: 10px !important;
}

.pagefind-ui__results-area::-webkit-scrollbar-track,
.pagefind-ui .pagefind-ui__results-area::-webkit-scrollbar-track {
    background: transparent !important;
    border-radius: 10px !important;
}

.pagefind-ui__results-area::-webkit-scrollbar-thumb,
.pagefind-ui .pagefind-ui__results-area::-webkit-scrollbar-thumb {
    background-color: rgb(var(--tint-5)) !important;
    border-radius: 10px !important;
    border: 2px solid rgb(var(--tint-2)) !important;
}

.pagefind-ui__results-area::-webkit-scrollbar-thumb:hover,
.pagefind-ui .pagefind-ui__results-area::-webkit-scrollbar-thumb:hover {
    background-color: rgb(var(--tint-6)) !important;
}

.pagefind-ui__result,
.pagefind-ui .pagefind-ui__result {
    background: rgb(var(--tint-1)) !important;
    border: 1px solid rgb(var(--tint-4)) !important;
    border-radius: 0.625rem !important;
    padding: 1.125rem 1.25rem !important;
    margin-bottom: 0.875rem !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    cursor: pointer !important;
}

.pagefind-ui__result:hover,
.pagefind-ui .pagefind-ui__result:hover {
    border-color: rgb(var(--primary-9)) !important;
    background: rgb(var(--tint-2)) !important;
    transform: translateX(6px) !important;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15),
        -4px 0 0 0 rgb(var(--primary-9)) !important;
}

.pagefind-ui__result-link,
.pagefind-ui .pagefind-ui__result-link {
    color: rgb(var(--tint-12)) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 1.0625rem !important;
    line-height: 1.4 !important;
    display: block !important;
    margin-bottom: 0.5rem !important;
}

.pagefind-ui__result-link:hover,
.pagefind-ui .pagefind-ui__result-link:hover {
    color: rgb(var(--primary-9)) !important;
}

.pagefind-ui__result-excerpt,
.pagefind-ui .pagefind-ui__result-excerpt {
    color: rgb(var(--tint-11)) !important;
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
    margin-top: 0.625rem !important;
}

.pagefind-ui__result-excerpt mark,
.pagefind-ui .pagefind-ui__result-excerpt mark {
    background-color: rgba(var(--primary-9), 0.25) !important;
    color: rgb(var(--primary-10)) !important;
    padding: 0.125rem 0.375rem !important;
    border-radius: 0.3125rem !important;
    font-weight: 600 !important;
    box-shadow: 0 0 0 1px rgba(var(--primary-9), 0.3) !important;
}

.pagefind-ui__result-title,
.pagefind-ui .pagefind-ui__result-title {
    font-weight: 600 !important;
    color: rgb(var(--tint-12)) !important;
}

.pagefind-ui__result-title mark,
.pagefind-ui .pagefind-ui__result-title mark {
    background-color: rgba(var(--primary-9), 0.25) !important;
    color: rgb(var(--primary-9)) !important;
    padding: 0.125rem 0.375rem !important;
    border-radius: 0.3125rem !important;
    font-weight: 700 !important;
}

.pagefind-ui__message,
.pagefind-ui .pagefind-ui__message {
    color: rgb(var(--tint-10)) !important;
    padding: 3rem 1.5rem !important;
    text-align: center !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
}

.pagefind-ui__button,
.pagefind-ui .pagefind-ui__button {
    background: linear-gradient(135deg, rgb(var(--primary-9)) 0%, rgb(var(--primary-10)) 100%) !important;
    color: white !important;
    border: none !important;
    padding: 0.625rem 1.25rem !important;
    border-radius: 0.5rem !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 6px rgba(var(--primary-9), 0.3) !important;
    font-size: 0.9375rem !important;
}

.pagefind-ui__button:hover,
.pagefind-ui .pagefind-ui__button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(var(--primary-9), 0.4) !important;
}

.pagefind-ui__button:active,
.pagefind-ui .pagefind-ui__button:active {
    transform: translateY(0) !important;
}

/* Reset any default Pagefind UI margins/paddings that might interfere */
.pagefind-ui__drawer,
.pagefind-ui .pagefind-ui__drawer {
    margin: 0 !important;
    padding: 0 !important;
}

.pagefind-ui__results,
.pagefind-ui .pagefind-ui__results {
    margin: 0 !important;
    padding: 0 !important;
}

/* Loading state */
.pagefind-ui--loading .pagefind-ui__search-input {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .search-kbd {
        display: none;
    }

    .search-button {
        min-width: auto;
        padding: 0.625rem 0.875rem;
    }

    .search-hint {
        display: none;
    }

    .search-modal {
        padding: 1rem;
        padding-top: 2rem;
    }

    .search-modal-content {
        width: 100%;
        max-height: calc(100vh - 2rem);
        border-radius: 0.75rem;
    }

    .search-close {
        top: 1rem;
        right: 1rem;
        width: 2rem;
        height: 2rem;
    }

    .pagefind-ui__form {
        padding: 1.25rem 1.25rem 0.875rem;
    }

    .pagefind-ui__search-input {
        font-size: 1rem;
        padding: 0.875rem 1rem;
    }

    .pagefind-ui__results-area {
        padding: 0 1.25rem 1.25rem;
        max-height: calc(100vh - 180px);
    }

    .pagefind-ui__result {
        padding: 1rem;
    }

    .pagefind-ui__result:hover {
        transform: translateX(4px);
    }
}

/* Dark mode enhancements */
@media (prefers-color-scheme: dark) {
    .search-modal-backdrop {
        background: linear-gradient(
            135deg,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(0, 0, 0, 0.8) 100%
        );
    }
}


.search-modal-header {
    position: relative;
}

.search-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(var(--tint-4), 0.5);
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    color: rgb(var(--tint-11));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 10;
}

.search-close:hover {
    background: rgba(var(--tint-5), 0.8);
    color: rgb(var(--tint-12));
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-2rem) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Pagefind UI Customization */
#pagefind-search {
    --pagefind-ui-scale: 1;
    --pagefind-ui-primary: rgb(var(--primary-9));
    --pagefind-ui-text: rgb(var(--tint-12));
    --pagefind-ui-background: rgb(var(--tint-2));
    --pagefind-ui-border: rgb(var(--tint-4));
    --pagefind-ui-tag: rgb(var(--tint-3));
    --pagefind-ui-border-width: 1px;
    --pagefind-ui-border-radius: 0.5rem;
    --pagefind-ui-image-border-radius: 0.5rem;
    --pagefind-ui-image-box-ratio: 3 / 2;
    --pagefind-ui-font: inherit;
}

.pagefind-ui__form {
    padding: 1.5rem;
    background-color: rgb(var(--tint-2));
}

.pagefind-ui__search-input {
    background-color: rgb(var(--tint-1));
    border: 2px solid rgb(var(--tint-4));
    color: rgb(var(--tint-12));
    font-size: 1.125rem;
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    width: 100%;
    outline: none;
    transition: all 0.2s;
}

.pagefind-ui__search-input:focus {
    border-color: rgb(var(--primary-9));
    box-shadow: 0 0 0 3px rgba(var(--primary-9), 0.1);
}

.pagefind-ui__search-input::placeholder {
    color: rgb(var(--tint-9));
}

.pagefind-ui__results-area {
    max-height: calc(80vh - 120px);
    overflow-y: auto;
    padding: 0 1.5rem 1.5rem;
}

.pagefind-ui__results-area::-webkit-scrollbar {
    width: 8px;
}

.pagefind-ui__results-area::-webkit-scrollbar-track {
    background: rgb(var(--tint-2));
}

.pagefind-ui__results-area::-webkit-scrollbar-thumb {
    background-color: rgb(var(--tint-6));
    border-radius: 4px;
}

.pagefind-ui__result {
    background-color: rgb(var(--tint-1));
    border: 1px solid rgb(var(--tint-4));
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    transition: all 0.2s;
}

.pagefind-ui__result:hover {
    border-color: rgb(var(--primary-9));
    background-color: rgb(var(--tint-2));
    transform: translateX(4px);
}

.pagefind-ui__result-link {
    color: rgb(var(--tint-12));
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
}

.pagefind-ui__result-link:hover {
    color: rgb(var(--primary-9));
}

.pagefind-ui__result-excerpt {
    color: rgb(var(--tint-11));
    font-size: 0.875rem;
    line-height: 1.6;
    margin-top: 0.5rem;
}

.pagefind-ui__result-excerpt mark {
    background-color: rgba(var(--primary-9), 0.2);
    color: rgb(var(--primary-10));
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-weight: 500;
}

.pagefind-ui__message {
    color: rgb(var(--tint-10));
    padding: 2rem 1.5rem;
    text-align: center;
    font-size: 0.9375rem;
}

.pagefind-ui__button {
    background-color: rgb(var(--primary-9));
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.pagefind-ui__button:hover {
    background-color: rgb(var(--primary-10));
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .search-kbd {
        display: none;
    }

    .search-button {
        min-width: auto;
        padding: 0.5rem 0.75rem;
    }

    .search-hint {
        display: none;
    }

    .search-modal {
        padding-top: 2rem;
    }

    .search-modal-content {
        width: 95%;
        max-height: 90vh;
    }

    .pagefind-ui__form {
        padding: 1rem;
    }

    .pagefind-ui__results-area {
        padding: 0 1rem 1rem;
    }
}