.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
        }
        .watercolor-bg {
            background: radial-gradient(circle at 20% 30%, #e7dff4 0%, transparent 50%),
                        radial-gradient(circle at 80% 70%, #f3ded6 0%, transparent 50%),
                        #faf9fc;
        }
        @keyframes breathe {
            0%, 100% { transform: scale(1); opacity: 0.3; }
            50% { transform: scale(1.4); opacity: 0.6; }
        }
        .breathing-circle {
            animation: breathe 8s ease-in-out infinite;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(16px);
            border: 0.5px solid rgba(121, 118, 124, 0.2);
        }

.watercolor-bg {
            background: radial-gradient(circle at 10% 20%, rgba(231, 223, 244, 0.4) 0%, transparent 40%),
                        radial-gradient(circle at 90% 80%, rgba(211, 234, 210, 0.4) 0%, transparent 40%),
                        radial-gradient(circle at 50% 50%, rgba(243, 222, 214, 0.3) 0%, transparent 60%);
        }
        .frosted-glass {
            backdrop-filter: blur(16px);
            background-color: rgba(255, 255, 255, 0.6);
            border: 0.5px solid rgba(121, 118, 124, 0.1);
        }
        .breathing-circle {
            animation: breathe 8s ease-in-out infinite;
        }
        @keyframes breathe {
            0%, 100% { transform: scale(1); opacity: 0.3; }
            50% { transform: scale(1.5); opacity: 0.1; }
        }
        .petal-mask {
            clip-path: ellipse(100% 50% at 50% 100%);
        }

.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
        }
        .watercolor-blob {
            filter: blur(80px);
            opacity: 0.15;
            z-index: -1;
        }
        .organic-mask {
            mask-image: radial-gradient(circle at center, black 60%, transparent 100%);
        }

.watercolor-bg {
        background: radial-gradient(circle at 10% 20%, rgba(231, 223, 244, 0.4) 0%, transparent 40%),
                    radial-gradient(circle at 90% 80%, rgba(211, 234, 210, 0.3) 0%, transparent 40%);
      }
      .petal-mask {
        clip-path: ellipse(100% 50% at 50% 0%);
      }
      .glass-card {
        background: rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(16px);
        border: 0.5px solid rgba(136, 136, 170, 0.2);
      }
      .breathing-circle {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #cbc3d8;
        animation: breathe 8s ease-in-out infinite;
      }
      @keyframes breathe {
        0%, 100% { transform: scale(1); opacity: 0.5; }
        50% { transform: scale(1.8); opacity: 0.2; }
      }
      .material-symbols-outlined {
        font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
      }

.watercolor-blob {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            z-index: -1;
            opacity: 0.4;
        }
        .organic-mask {
            mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path d="M44.7,-76.4C58.2,-69.2,70,-58.5,78.3,-45.5C86.7,-32.5,91.6,-17.2,90.4,-2.3C89.2,12.5,81.9,26.9,73.1,40.1C64.3,53.3,54.1,65.3,41.2,72.4C28.3,79.5,12.7,81.7,-2.4,85.8C-17.5,90,-32.1,96.1,-45.4,91.8C-58.7,87.5,-70.8,72.8,-78.9,57.7C-87,42.6,-91.1,27.1,-90.8,12C-90.5,-3.1,-85.8,-17.7,-78.7,-31.2C-71.6,-44.7,-62.1,-57.1,-49.8,-65.1C-37.5,-73.1,-22.4,-76.7,-7,-74.6C8.5,-72.5,17,-64.8,44.7,-76.4Z" transform="translate(100 100)" /></svg>');
            mask-size: contain;
            mask-repeat: no-repeat;
            mask-position: center;
        }
        .glass-panel {
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(16px);
            border: 0.5px solid rgba(121, 118, 124, 0.15);
        }

.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24; }
    .watercolor-bg {
      background: radial-gradient(circle at 10% 20%, rgba(231, 223, 244, 0.4) 0%, transparent 40%),
                  radial-gradient(circle at 90% 80%, rgba(211, 234, 210, 0.3) 0%, transparent 40%),
                  radial-gradient(circle at 50% 50%, rgba(243, 222, 214, 0.2) 0%, transparent 60%);
    }
    .breathing-circle {
      width: 12px;
      height: 12px;
      background-color: #4f6351;
      border-radius: 50%;
      display: inline-block;
      margin-right: 8px;
    }

@keyframes breathe {
      0%, 100% { transform: scale(1); opacity: 0.3; }
      50% { transform: scale(1.6); opacity: 0.1; }
    }
    .animate-breathe {
      animation: breathe 8s ease-in-out infinite;
    }
    .glass-card {
      background: rgba(255, 255, 255, 0.4);
      backdrop-filter: blur(24px);
      border: 1px solid rgba(136, 136, 170, 0.1);
    }
    .water-wash {
      background: radial-gradient(circle at 10% 20%, rgba(231, 223, 244, 0.4) 0%, transparent 40%),
                  radial-gradient(circle at 90% 80%, rgba(211, 234, 210, 0.4) 0%, transparent 40%);
    }
    .petal-mask {
        clip-path: ellipse(100% 50% at 50% 100%);
    }

body { background-color: #faf9fc; overflow-x: hidden; }
        .glass-panel {
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(16px);
            border: 0.5px solid rgba(136, 136, 170, 0.2);
        }
        .lotus-watermark {
            position: fixed;
            bottom: -5%;
            right: -5%;
            width: 60%;
            opacity: 0.04;
            pointer-events: none;
            z-index: 0;
        }
        .watercolor-blob {
            position: fixed;
            width: 800px;
            height: 800px;
            border-radius: 50%;
            filter: blur(80px);
            z-index: -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;
    }
}