.paper-grain {
    position: relative
    }
.paper-grain::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
    background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuD3MDw27H3fijcGYr64CBTeCKQby-xgNOKLpFNYsl3MgjHnlqnqY33uQUk66XpOPmVqMEqKiimDxnMdg2iOG5JZslMX9Nq5C1mjwrnn0oEUf8ihqGkuyyt2iRvJYURzY9WNomkDyfd-YkMCJeTpZFpJYtOvXGxAU3-J7hzbL2bg3-TK8ND2hPKuR1psxnfbv7fk_pffPRHEbcCl6UcnIbXrmQoYjbS-c443YtiMT7XtugnbK8ZY1j6pSzo2sWPkwbXHyI9JWMBM9Q);
    opacity: 0.04
    }
.clay-edge {
    clip-path: polygon(0 0, 100% 3%, 100% 97%, 0% 100%)
    }
.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24
    }

.paper-grain {
    background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuDay6lOFHGRBD7oPJvDtGftn899SvOb9a0iZV1ItUzD1w4dj16xkjLMlChSjFv-42_BqHwLnhVS8kbOcdMwnyonsCMkHkvZPgeH5QulNnnHZDF9Gq6OFVbeapb94jRrqUTDoh1sZMQH-wZ3SNkn6C7WhKxoqYI42yJFfwo9THrpLIq1cWk742H8qEHSq5ZrmbkeF-Ybj90TKa0rnTJWjNk2fGvfzvk6EszbhmKjKe0TxCU1kFrBXE9yfc602WZQrdfV--IGRaoyVA);
    pointer-events: none
    }
.organic-edge {
    clip-path: polygon(0 0, 100% 2%, 100% 98%, 0 100%)
    }
.clay-stamped {
    border-bottom-width: 2px;
    border-color: #34302c
    }
.pressed-field {
    box-shadow: inset 2px 2px 4px rgba(52, 48, 44, 0.05)
    }

.paper-grain {
    position: relative
    }
.paper-grain::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuC3lG2WKjqvfCUb1QNyr1nh5rDPFAKBc_PCKwiIPHwwqeKcbml5PN1KpfF0ZJ-A1NApSJfzuyTYEaRjhsfxZlnF7VmImzqlYRunwOnZCMGRDLJtYfZ448EThSX5RIswCPqihpTEHKV-l-vnfRyzxvWu78kpyWVY0txcHO6rljfsVWPrHMWNdQSQ-FzVTPZFPE0ZmZogMqrGDW5YihHourS6bJaTu3G8Iaq5YwODl-hd4LLqXQsRat_MhsN3k14Lm1eylEhwco8I9g);
    opacity: 0.05;
    pointer-events: none;
    z-index: 10
    }
.organic-edge {
    clip-path: polygon(0% 0%, 100% 2%, 100% 98%, 0% 100%)
    }
.stamped-button {
    border-bottom-width: 2px
    }
.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24
    }

.paper-texture {
    background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuCJI81aIDpFXstukn1clhbdZfLckDqXN8N0yNLeLEJFdwTiyjmiN-1aHgBgqP1Dw8yKwrAS4T7S5IlrReB2shscxL0PMIaMbOy909vuHk0xBzfT2lvXc0IuzoQb1hSlYQfWS5c0ovjjqNxevZH44HXReoKC5bJk-ZjR0ebtdkspmzGzLTFzI1Czl99MSuRLeQk6LbTKaw9tPh5-ptqeBLmqieUttooT3jDaERg_Kp42oF_EJfTvKv3Z0T_AYWJwD0y4ByXO6NMrgg);
    background-repeat: repeat
    }
.organic-edge {
    clip-path: polygon(0 2%, 5% 0, 10% 2%, 15% 1%, 20% 3%, 25% 1%, 30% 2%, 35% 0, 40% 2%, 45% 1%, 50% 3%, 55% 1%, 60% 2%, 65% 0, 70% 2%, 75% 1%, 80% 3%, 85% 1%, 90% 2%, 95% 0, 100% 2%, 100% 98%, 95% 100%, 90% 98%, 85% 99%, 80% 97%, 75% 99%, 70% 98%, 65% 100%, 60% 98%, 55% 99%, 50% 97%, 45% 99%, 40% 98%, 35% 100%, 30% 98%, 25% 99%, 20% 97%, 15% 99%, 10% 98%, 5% 100%, 0 98%)
    }
.masonry-grid {
    columns: 1
    }
@media (min-width: 640px) {
    .masonry-grid {
        columns: 2
        }
    }
@media (min-width: 1024px) {
    .masonry-grid {
        columns: 4
        }
    }

@keyframes spin-slow {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .animate-spin-slow {
            animation: spin-slow 8s linear infinite;
        }

.clay-texture {
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
            opacity: 0.04;
            pointer-events: none;
        }
        .organic-edge-bottom {
            clip-path: polygon(0 0, 100% 0, 100% 95%, 95% 98%, 85% 94%, 75% 97%, 60% 93%, 45% 98%, 30% 94%, 15% 97%, 0 92%);
        }
        .organic-edge-top {
            clip-path: polygon(0 8%, 15% 3%, 30% 6%, 45% 2%, 60% 7%, 75% 4%, 85% 6%, 100% 2%, 100% 100%, 0 100%);
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        }

body {
            background-image: radial-gradient(#d9c2b7 0.5px, transparent 0.5px);
            background-size: 24px 24px;
            background-color: #fff8f4;
        }
        .clay-edge {
            clip-path: polygon(0 0, 100% 2%, 100% 98%, 0% 100%);
        }
        .pressed-field {
            box-shadow: inset 2px 2px 4px rgba(52, 48, 44, 0.05);
        }

.paper-grain {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            pointer-events: none;
            z-index: 9999;
            opacity: 0.04;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        }
        .hand-drawn-border {
            border-style: solid;
            border-width: 1.5px;
            border-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1C25 0.5 75 1.5 99 1C98.5 25 99.5 75 99 99C75 98.5 25 99.5 1 99C1.5 75 0.5 25 1 1Z' stroke='%2386736a' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 1;
        }
        .organic-edge {
            clip-path: polygon(0% 0%, 100% 2%, 100% 98%, 0% 100%, 2% 50%);
        }
        .pressed-shadow {
            box-shadow: inset 2px 2px 8px rgba(52, 48, 44, 0.08);
        }

@keyframes spin-slow {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .animate-spin-slow {
            animation: spin-slow 8s linear infinite;
        }
        
        /* Clay-inspired slide animation for accordion */
        details[open] summary ~ * {
            animation: slideDown 0.4s ease-out;
        }

        @keyframes slideDown {
            0% { opacity: 0; transform: translateY(-10px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        summary::-webkit-details-marker {
            display: none;
        }

.paper-texture {
    background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuDZGBTUWBdQEdlTLE96tAAz1DRGji28llofuVGgcW8q2QkZHbQrlu8Sv9bbkxlo0AjvmZqhbrBfnhBldYj2903HEmlZ-qmMH8IKPCuamlCI1nSREbMIuAPC_OTSrhD_ayjy4_4StecVx6gJ2AqDp70oOCENjhFl88B6k1KHd6QnfEEYtdSVqX9Uwb_EXS8_tcn8q90IkOs_3TnBgblynbTvYQIjX4zrZOWFqb-r7KbSdCotq1t4eDSeqZeYBXQNhVH7SP6vy8266A);
    opacity: 0.05;
    pointer-events: none
    }
.organic-divider {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 95% 88%, 85% 85%, 75% 92%, 60% 88%, 45% 95%, 30% 87%, 15% 93%, 0 85%)
    }
.stamped-button {
    border-bottom-width: 3px
    }
details > summary {
    list-style: none
    }
details > summary::-webkit-details-marker {
    display: none
    }
details[open] summary .expand-icon {
    transform: rotate(180deg)
    }

.paper-grain {
    background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuCBjyeXKw2IgsxZdee7DO79Lk2qeR45qt4GxecV__FK7Jh6V0HzPoRj_O3UK6y1-LxssRvjl6D5gT1NmRVcm_vQfVDqe6LXbcXPAK0EmAX54iAfVX10llmMxWoH88s1nQZXDZL4yqYvdX9NVJHwevxv4EahSBMupukuJvqrYNOMo0XEAFoCE9H7s4IujDmTkxMvboGxif1XoJ98XqyTezDdKAsVfbzD2ew48JlxoYzwsoV11jwVnMmXCigNyNSmq2agUOzV60VtDA);
    background-repeat: repeat
    }
.clay-edge {
    mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='40' viewBox='0 0 1200 40' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 40h1200V15.5s-45.5-12-115-12-143.5 13.5-224 13.5-163.5-18-285.5-18-204 21-318 21S0 5.5 0 5.5V40z' fill='%23000'/%3E%3C/svg%3E");
    mask-position: bottom;
    mask-repeat: no-repeat
    }
.clay-border-bottom {
    border-bottom: 2px solid #2E2A26;
    box-shadow: 0 2px 0 0 rgba(46, 42, 38, 0.1)
    }
.hand-drawn-border {
    border: 1.5px solid #2E2A26;
    border-radius: 2% 98% 3% 97%/96% 3% 97% 4%
    }
details > summary {
    list-style: none
    }
details > summary::-webkit-details-marker {
    display: none
    }
.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24
    }

.paper-grain {
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
            opacity: 0.04;
            pointer-events: none;
        }
        .organic-divider {
            mask-image: url("data:image/svg+xml,%3Csvg width='1200' height='40' viewBox='0 0 1200 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20C150 5 300 35 450 20C600 5 750 35 900 20C1050 5 1200 20 1200 20V40H0V20Z' fill='black'/%3E%3C/svg%3E");
            mask-size: cover;
        }

body.paper-grain {
    position: static;
    width: auto;
    height: auto;
    pointer-events: auto;
    z-index: auto;
    opacity: 1;
}

body:has(.template-demo-banner) {
    --demo-banner-height: 44px;
}

.template-demo-banner {
    position: sticky;
    top: 0;
    z-index: 9999;
    min-height: var(--demo-banner-height);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 20px;
    background: #111111;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    font-family: Inter, Manrope, "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: 0;
    text-align: center;
}

.template-demo-banner a {
    color: #ffffff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

body:has(.template-demo-banner) > .fixed.top-0,
body:has(.template-demo-banner) > .sticky.top-0,
body:has(.template-demo-banner) > header.fixed.top-0,
body:has(.template-demo-banner) > header.sticky.top-0,
body:has(.template-demo-banner) > nav.fixed.top-0,
body:has(.template-demo-banner) > nav.sticky.top-0 {
    top: var(--demo-banner-height) !important;
}

@media (max-width: 640px) {
    body:has(.template-demo-banner) {
        --demo-banner-height: 58px;
    }

    .template-demo-banner {
        flex-direction: column;
        gap: 4px;
        padding: 8px 16px;
        font-size: 12px;
    }
}