.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
        }
        .squishy-button {
            transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 6px 0 0 rgba(0,0,0,0.1);
        }
        .squishy-button:active {
            transform: translateY(4px);
            box-shadow: 0 2px 0 0 rgba(0,0,0,0.1);
        }
        .cloud-divider {
            fill: #fff8f0;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
        }

.pressable-button {
            box-shadow: 0 4px 0 0 #b49100;
            transition: all 0.1s ease;
        }
        .pressable-button:active {
            transform: translateY(4px);
            box-shadow: 0 0px 0 0 #b49100;
        }
        .wavy-divider {
            aspect-ratio: 900/100;
            width: 100%;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23fff8f0' fill-opacity='1' d='M0,160L48,176C96,192,192,224,288,213.3C384,203,480,149,576,149.3C672,149,768,203,864,218.7C960,235,1056,213,1152,186.7C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
        }

.squishy-button {
      box-shadow: 0 4px 0 0 #564500;
      transition: all 0.1s ease-in-out;
    }
    .squishy-button:active {
      transform: translateY(4px);
      box-shadow: 0 0px 0 0 #564500;
    }
    .cloud-divider {
      filter: drop-shadow(0 -10px 15px rgba(27, 45, 91, 0.05));
    }
    .material-symbols-outlined {
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .squishy-button {
            box-shadow: 0 4px 0 0 #564500;
            transition: all 0.1s ease;
        }
        .squishy-button:active {
            transform: translateY(4px);
            box-shadow: 0 0 0 0 #564500;
        }
        .cloud-divider {
            aspect-ratio: 900/100;
            width: 100%;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }

.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
            vertical-align: middle;
        }
        .squishy-button {
            transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 4px 0 0 #d97706;
        }
        .squishy-button:active {
            transform: translateY(4px);
            box-shadow: 0 0px 0 0 #d97706;
        }
        .cloud-divider {
            fill: #fff8f0;
        }

.material-symbols-outlined {
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }
    .wavy-divider {
      mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg"><path d="M0,160L48,176C96,192,192,224,288,213.3C384,203,480,149,576,144C672,139,768,181,864,181.3C960,181,1056,139,1152,122.7C1248,107,1344,117,1392,122.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z" fill="black"></path></svg>');
      mask-size: cover;
    }
    .cloud-divider {
      mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 100" xmlns="http://www.w3.org/2000/svg"><path d="M0,50 C150,0 300,100 450,50 C600,0 750,100 900,50 C1050,0 1200,100 1350,50 L1440,50 L1440,100 L0,100 Z" fill="black"></path></svg>');
      mask-size: cover;
    }
    .btn-squishy {
      box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.1);
      transition: all 0.2s ease;
    }
    .btn-squishy:active {
      transform: translateY(4px);
      box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1);
    }

.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .wavy-divider {
            aspect-ratio: 960/100;
            width: 100%;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
        .pressable-shadow {
            box-shadow: 0 4px 0 0 #d4b000;
        }
        .pressable-shadow:active {
            box-shadow: 0 0 0 0 #d4b000;
            transform: translateY(4px);
        }

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;
    }
}