:root {
    color-scheme: light dark;
    
    /* Theme Container Max Width */
    --theme-container-max-width: 1440px;

    /* ============================================
       DEFAULT THEME VARIABLE
       ============================================ */
    
    /* Default Context */
    --default-bg-color: light-dark(#FFFFFF, #2A2A2A);
    --default-text-color: light-dark(#2A2A2A, #FFFFFF);
    --default-link-color: light-dark(#2A2A2A, #FFFFFF);
    --default-border-color: light-dark(#2A2A2A, #FFFFFF);
    
    /* Primary Context */
    --default-primary-bg-color: light-dark(#2A2A2A, #FFFFFF);
    --default-primary-text-color: light-dark(#FFFFFF, #2A2A2A);
    --default-primary-link-color: var(--default-link-color);
    --default-primary-border-color: light-dark(#2A2A2A, #FFFFFF);
    
    /* Secondary Context */
    --default-secondary-bg-color: var(--default-bg-color);
    --default-secondary-text-color: var(--default-text-color);
    --default-secondary-link-color: var(--default-link-color);
    --default-secondary-border-color: var(--default-border-color);

    /* Accent Colors */
    --default-accent-1-color: light-dark(#E3F2FD, #1A3A6B);
    --default-accent-2-color: light-dark(#FFF9D2, #7A6000);
    --default-accent-3-color: light-dark(#FFD6E0, #7A1040);
    --default-accent-4-color: light-dark(#E8F5E9, #1A4D2E);

    /* ============================================
       DEFAULT HOVER VARIABLE
       ============================================ */
    
    /* Default Context */
    --default-hover-bg-color: light-dark(
        color-mix(in srgb, var(--default-bg-color) 90%, black),
        color-mix(in srgb, var(--default-bg-color) 90%, white)
    );
    --default-hover-text-color: light-dark(
        color-mix(in srgb, var(--default-text-color) 90%, white),
        color-mix(in srgb, var(--default-text-color) 90%, black)
    );
    --default-hover-link-color: light-dark(
        color-mix(in srgb, var(--default-link-color) 70%, white),
        color-mix(in srgb, var(--default-link-color) 90%, black)
    );
    --default-hover-border-color: light-dark(
        color-mix(in srgb, var(--default-border-color) 90%, white),
        color-mix(in srgb, var(--default-border-color) 90%, black)
    );
    
    /* Primary Context */
    --default-primary-hover-bg-color: light-dark(
        color-mix(in srgb, var(--default-primary-bg-color) 90%, white),
        color-mix(in srgb, var(--default-primary-bg-color) 90%, black)
    );
    --default-primary-hover-text-color: light-dark(
        color-mix(in srgb, var(--default-primary-text-color) 90%, black),
        color-mix(in srgb, var(--default-primary-text-color) 90%, white)
    );
    --default-primary-hover-link-color: light-dark(
        color-mix(in srgb, var(--default-primary-link-color) 90%, black),
        color-mix(in srgb, var(--default-primary-link-color) 90%, white)
    );
    --default-primary-hover-border-color: light-dark(
        color-mix(in srgb, var(--default-primary-border-color) 90%, white),
        color-mix(in srgb, var(--default-primary-border-color) 90%, black)
    );
    
    /* Secondary Context */
    --default-secondary-hover-bg-color: light-dark(
        color-mix(in srgb, var(--default-secondary-bg-color) 90%, white),
        color-mix(in srgb, var(--default-secondary-bg-color) 90%, black)
    );
    --default-secondary-hover-text-color: light-dark(
        color-mix(in srgb, var(--default-secondary-text-color) 90%, black),
        color-mix(in srgb, var(--default-secondary-text-color) 90%, white)
    );
    --default-secondary-hover-link-color: light-dark(
        color-mix(in srgb, var(--default-secondary-link-color) 90%, white),
        color-mix(in srgb, var(--default-secondary-link-color) 90%, black)
    );
    --default-secondary-hover-border-color: light-dark(
        color-mix(in srgb, var(--default-secondary-border-color) 90%, white),
        color-mix(in srgb, var(--default-secondary-border-color) 90%, black)
    );
    
    /* ============================================
       HIGHLIGHT THEME VARIABLE
       ============================================ */
    
    /* Default Context (Highlight) */
    --highlight-bg-color: light-dark(#2A2A2A, #FFFFFF);
    --highlight-text-color: light-dark(#FFFFFF, #2A2A2A);
    --highlight-link-color: light-dark(#FFFFFF, #2A2A2A);
    --highlight-border-color: light-dark(#FFFFFF, #2A2A2A);
    
    /* Primary Context (Highlight) */
    --highlight-primary-bg-color: light-dark(#FFFFFF, #2A2A2A);
    --highlight-primary-text-color: light-dark(#2A2A2A, #FFFFFF);
    --highlight-primary-link-color: var(--highlight-link-color);
    --highlight-primary-border-color: light-dark(#FFFFFF, #2A2A2A);
    
    /* Secondary Context (Highlight) */
    --highlight-secondary-bg-color: var(--highlight-bg-color);
    --highlight-secondary-text-color: var(--highlight-text-color);
    --highlight-secondary-link-color: var(--highlight-link-color);
    --highlight-secondary-border-color: var(--highlight-border-color);

    /* Accent Colors (Highlight) */
    --highlight-accent-1-color: light-dark(#234FEB, #5B7FFF);
    --highlight-accent-2-color: light-dark(#FFC300, #FFD966);
    --highlight-accent-3-color: light-dark(#D6336C, #FF7BAD);
    --highlight-accent-4-color: light-dark(#257F4F, #57B37F);

    /* ============================================
       BACKGROUND COLOR LIGHTER & DARKER VARIABLES
       ============================================ */

    /* default bg color */
    --default-bg-color-lighter-10: color-mix(in srgb, var(--default-bg-color) 90%, white);
    --default-bg-color-lighter-20: color-mix(in srgb, var(--default-bg-color) 80%, white);
    --default-bg-color-lighter-30: color-mix(in srgb, var(--default-bg-color) 70%, white);
    --default-bg-color-lighter-40: color-mix(in srgb, var(--default-bg-color) 60%, white);
    --default-bg-color-lighter-50: color-mix(in srgb, var(--default-bg-color) 50%, white);
    --default-bg-color-lighter-60: color-mix(in srgb, var(--default-bg-color) 40%, white);
    --default-bg-color-lighter-70: color-mix(in srgb, var(--default-bg-color) 30%, white);
    --default-bg-color-lighter-80: color-mix(in srgb, var(--default-bg-color) 20%, white);
    --default-bg-color-lighter-90: color-mix(in srgb, var(--default-bg-color) 10%, white);
    --default-bg-color-lighter-100: color-mix(in srgb, var(--default-bg-color) 0%, white);
    --default-bg-color-darker-10: color-mix(in srgb, var(--default-bg-color) 90%, black);
    --default-bg-color-darker-20: color-mix(in srgb, var(--default-bg-color) 80%, black);
    --default-bg-color-darker-30: color-mix(in srgb, var(--default-bg-color) 70%, black);
    --default-bg-color-darker-40: color-mix(in srgb, var(--default-bg-color) 60%, black);
    --default-bg-color-darker-50: color-mix(in srgb, var(--default-bg-color) 50%, black);
    --default-bg-color-darker-60: color-mix(in srgb, var(--default-bg-color) 40%, black);
    --default-bg-color-darker-70: color-mix(in srgb, var(--default-bg-color) 30%, black);
    --default-bg-color-darker-80: color-mix(in srgb, var(--default-bg-color) 20%, black);
    --default-bg-color-darker-90: color-mix(in srgb, var(--default-bg-color) 10%, black);
    --default-bg-color-darker-100: color-mix(in srgb, var(--default-bg-color) 0%, black);

    /* default primary bg color */
    --default-primary-bg-color-lighter-10: color-mix(in srgb, var(--default-primary-bg-color) 90%, white);
    --default-primary-bg-color-lighter-20: color-mix(in srgb, var(--default-primary-bg-color) 80%, white);
    --default-primary-bg-color-lighter-30: color-mix(in srgb, var(--default-primary-bg-color) 70%, white);
    --default-primary-bg-color-lighter-40: color-mix(in srgb, var(--default-primary-bg-color) 60%, white);
    --default-primary-bg-color-lighter-50: color-mix(in srgb, var(--default-primary-bg-color) 50%, white);
    --default-primary-bg-color-lighter-60: color-mix(in srgb, var(--default-primary-bg-color) 40%, white);
    --default-primary-bg-color-lighter-70: color-mix(in srgb, var(--default-primary-bg-color) 30%, white);
    --default-primary-bg-color-lighter-80: color-mix(in srgb, var(--default-primary-bg-color) 20%, white);
    --default-primary-bg-color-lighter-90: color-mix(in srgb, var(--default-primary-bg-color) 10%, white);
    --default-primary-bg-color-lighter-100: color-mix(in srgb, var(--default-primary-bg-color) 0%, white);
    --default-primary-bg-color-darker-10: color-mix(in srgb, var(--default-primary-bg-color) 90%, black);
    --default-primary-bg-color-darker-20: color-mix(in srgb, var(--default-primary-bg-color) 80%, black);
    --default-primary-bg-color-darker-30: color-mix(in srgb, var(--default-primary-bg-color) 70%, black);
    --default-primary-bg-color-darker-40: color-mix(in srgb, var(--default-primary-bg-color) 60%, black);
    --default-primary-bg-color-darker-50: color-mix(in srgb, var(--default-primary-bg-color) 50%, black);
    --default-primary-bg-color-darker-60: color-mix(in srgb, var(--default-primary-bg-color) 40%, black);
    --default-primary-bg-color-darker-70: color-mix(in srgb, var(--default-primary-bg-color) 30%, black);
    --default-primary-bg-color-darker-80: color-mix(in srgb, var(--default-primary-bg-color) 20%, black);
    --default-primary-bg-color-darker-90: color-mix(in srgb, var(--default-primary-bg-color) 10%, black);
    --default-primary-bg-color-darker-100: color-mix(in srgb, var(--default-primary-bg-color) 0%, black);

    /* default secondary bg color */
    --default-secondary-bg-color-lighter-10: color-mix(in srgb, var(--default-secondary-bg-color) 90%, white);
    --default-secondary-bg-color-lighter-20: color-mix(in srgb, var(--default-secondary-bg-color) 80%, white);
    --default-secondary-bg-color-lighter-30: color-mix(in srgb, var(--default-secondary-bg-color) 70%, white);
    --default-secondary-bg-color-lighter-40: color-mix(in srgb, var(--default-secondary-bg-color) 60%, white);
    --default-secondary-bg-color-lighter-50: color-mix(in srgb, var(--default-secondary-bg-color) 50%, white);
    --default-secondary-bg-color-lighter-60: color-mix(in srgb, var(--default-secondary-bg-color) 40%, white);
    --default-secondary-bg-color-lighter-70: color-mix(in srgb, var(--default-secondary-bg-color) 30%, white);
    --default-secondary-bg-color-lighter-80: color-mix(in srgb, var(--default-secondary-bg-color) 20%, white);
    --default-secondary-bg-color-lighter-90: color-mix(in srgb, var(--default-secondary-bg-color) 10%, white);
    --default-secondary-bg-color-lighter-100: color-mix(in srgb, var(--default-secondary-bg-color) 0%, white);
    --default-secondary-bg-color-darker-10: color-mix(in srgb, var(--default-secondary-bg-color) 90%, black);
    --default-secondary-bg-color-darker-20: color-mix(in srgb, var(--default-secondary-bg-color) 80%, black);
    --default-secondary-bg-color-darker-30: color-mix(in srgb, var(--default-secondary-bg-color) 70%, black);
    --default-secondary-bg-color-darker-40: color-mix(in srgb, var(--default-secondary-bg-color) 60%, black);
    --default-secondary-bg-color-darker-50: color-mix(in srgb, var(--default-secondary-bg-color) 50%, black);
    --default-secondary-bg-color-darker-60: color-mix(in srgb, var(--default-secondary-bg-color) 40%, black);
    --default-secondary-bg-color-darker-70: color-mix(in srgb, var(--default-secondary-bg-color) 30%, black);
    --default-secondary-bg-color-darker-80: color-mix(in srgb, var(--default-secondary-bg-color) 20%, black);
    --default-secondary-bg-color-darker-90: color-mix(in srgb, var(--default-secondary-bg-color) 10%, black);
    --default-secondary-bg-color-darker-100: color-mix(in srgb, var(--default-secondary-bg-color) 0%, black);

    /* highlight bg color */
    --highlight-bg-color-lighter-10: color-mix(in srgb, var(--highlight-bg-color) 90%, white);
    --highlight-bg-color-lighter-20: color-mix(in srgb, var(--highlight-bg-color) 80%, white);
    --highlight-bg-color-lighter-30: color-mix(in srgb, var(--highlight-bg-color) 70%, white);
    --highlight-bg-color-lighter-40: color-mix(in srgb, var(--highlight-bg-color) 60%, white);
    --highlight-bg-color-lighter-50: color-mix(in srgb, var(--highlight-bg-color) 50%, white);
    --highlight-bg-color-lighter-60: color-mix(in srgb, var(--highlight-bg-color) 40%, white);
    --highlight-bg-color-lighter-70: color-mix(in srgb, var(--highlight-bg-color) 30%, white);
    --highlight-bg-color-lighter-80: color-mix(in srgb, var(--highlight-bg-color) 20%, white);
    --highlight-bg-color-lighter-90: color-mix(in srgb, var(--highlight-bg-color) 10%, white);
    --highlight-bg-color-lighter-100: color-mix(in srgb, var(--highlight-bg-color) 0%, white);
    --highlight-bg-color-darker-10: color-mix(in srgb, var(--highlight-bg-color) 90%, black);
    --highlight-bg-color-darker-20: color-mix(in srgb, var(--highlight-bg-color) 80%, black);
    --highlight-bg-color-darker-30: color-mix(in srgb, var(--highlight-bg-color) 70%, black);
    --highlight-bg-color-darker-40: color-mix(in srgb, var(--highlight-bg-color) 60%, black);
    --highlight-bg-color-darker-50: color-mix(in srgb, var(--highlight-bg-color) 50%, black);
    --highlight-bg-color-darker-60: color-mix(in srgb, var(--highlight-bg-color) 40%, black);
    --highlight-bg-color-darker-70: color-mix(in srgb, var(--highlight-bg-color) 30%, black);
    --highlight-bg-color-darker-80: color-mix(in srgb, var(--highlight-bg-color) 20%, black);
    --highlight-bg-color-darker-90: color-mix(in srgb, var(--highlight-bg-color) 10%, black);
    --highlight-bg-color-darker-100: color-mix(in srgb, var(--highlight-bg-color) 0%, black);

    /* highlight primary bg color */
    --highlight-primary-bg-color-lighter-10: color-mix(in srgb, var(--highlight-primary-bg-color) 90%, white);
    --highlight-primary-bg-color-lighter-20: color-mix(in srgb, var(--highlight-primary-bg-color) 80%, white);
    --highlight-primary-bg-color-lighter-30: color-mix(in srgb, var(--highlight-primary-bg-color) 70%, white);
    --highlight-primary-bg-color-lighter-40: color-mix(in srgb, var(--highlight-primary-bg-color) 60%, white);
    --highlight-primary-bg-color-lighter-50: color-mix(in srgb, var(--highlight-primary-bg-color) 50%, white);
    --highlight-primary-bg-color-lighter-60: color-mix(in srgb, var(--highlight-primary-bg-color) 40%, white);
    --highlight-primary-bg-color-lighter-70: color-mix(in srgb, var(--highlight-primary-bg-color) 30%, white);
    --highlight-primary-bg-color-lighter-80: color-mix(in srgb, var(--highlight-primary-bg-color) 20%, white);
    --highlight-primary-bg-color-lighter-90: color-mix(in srgb, var(--highlight-primary-bg-color) 10%, white);
    --highlight-primary-bg-color-lighter-100: color-mix(in srgb, var(--highlight-primary-bg-color) 0%, white);
    --highlight-primary-bg-color-darker-10: color-mix(in srgb, var(--highlight-primary-bg-color) 90%, black);
    --highlight-primary-bg-color-darker-20: color-mix(in srgb, var(--highlight-primary-bg-color) 80%, black);
    --highlight-primary-bg-color-darker-30: color-mix(in srgb, var(--highlight-primary-bg-color) 70%, black);
    --highlight-primary-bg-color-darker-40: color-mix(in srgb, var(--highlight-primary-bg-color) 60%, black);
    --highlight-primary-bg-color-darker-50: color-mix(in srgb, var(--highlight-primary-bg-color) 50%, black);
    --highlight-primary-bg-color-darker-60: color-mix(in srgb, var(--highlight-primary-bg-color) 40%, black);
    --highlight-primary-bg-color-darker-70: color-mix(in srgb, var(--highlight-primary-bg-color) 30%, black);
    --highlight-primary-bg-color-darker-80: color-mix(in srgb, var(--highlight-primary-bg-color) 20%, black);
    --highlight-primary-bg-color-darker-90: color-mix(in srgb, var(--highlight-primary-bg-color) 10%, black);
    --highlight-primary-bg-color-darker-100: color-mix(in srgb, var(--highlight-primary-bg-color) 0%, black);

    /* highlight secondary bg color */
    --highlight-secondary-bg-color-lighter-10: color-mix(in srgb, var(--highlight-secondary-bg-color) 90%, white);
    --highlight-secondary-bg-color-lighter-20: color-mix(in srgb, var(--highlight-secondary-bg-color) 80%, white);
    --highlight-secondary-bg-color-lighter-30: color-mix(in srgb, var(--highlight-secondary-bg-color) 70%, white);
    --highlight-secondary-bg-color-lighter-40: color-mix(in srgb, var(--highlight-secondary-bg-color) 60%, white);
    --highlight-secondary-bg-color-lighter-50: color-mix(in srgb, var(--highlight-secondary-bg-color) 50%, white);
    --highlight-secondary-bg-color-lighter-60: color-mix(in srgb, var(--highlight-secondary-bg-color) 40%, white);
    --highlight-secondary-bg-color-lighter-70: color-mix(in srgb, var(--highlight-secondary-bg-color) 30%, white);
    --highlight-secondary-bg-color-lighter-80: color-mix(in srgb, var(--highlight-secondary-bg-color) 20%, white);
    --highlight-secondary-bg-color-lighter-90: color-mix(in srgb, var(--highlight-secondary-bg-color) 10%, white);
    --highlight-secondary-bg-color-lighter-100: color-mix(in srgb, var(--highlight-secondary-bg-color) 0%, white);
    --highlight-secondary-bg-color-darker-10: color-mix(in srgb, var(--highlight-secondary-bg-color) 90%, black);
    --highlight-secondary-bg-color-darker-20: color-mix(in srgb, var(--highlight-secondary-bg-color) 80%, black);
    --highlight-secondary-bg-color-darker-30: color-mix(in srgb, var(--highlight-secondary-bg-color) 70%, black);
    --highlight-secondary-bg-color-darker-40: color-mix(in srgb, var(--highlight-secondary-bg-color) 60%, black);
    --highlight-secondary-bg-color-darker-50: color-mix(in srgb, var(--highlight-secondary-bg-color) 50%, black);
    --highlight-secondary-bg-color-darker-60: color-mix(in srgb, var(--highlight-secondary-bg-color) 40%, black);
    --highlight-secondary-bg-color-darker-70: color-mix(in srgb, var(--highlight-secondary-bg-color) 30%, black);
    --highlight-secondary-bg-color-darker-80: color-mix(in srgb, var(--highlight-secondary-bg-color) 20%, black);
    --highlight-secondary-bg-color-darker-90: color-mix(in srgb, var(--highlight-secondary-bg-color) 10%, black);
    --highlight-secondary-bg-color-darker-100: color-mix(in srgb, var(--highlight-secondary-bg-color) 0%, black);

    /* default accent 1 color */
    --default-accent-1-color-lighter-10: color-mix(in srgb, var(--default-accent-1-color) 90%, white);
    --default-accent-1-color-lighter-20: color-mix(in srgb, var(--default-accent-1-color) 80%, white);
    --default-accent-1-color-lighter-30: color-mix(in srgb, var(--default-accent-1-color) 70%, white);
    --default-accent-1-color-lighter-40: color-mix(in srgb, var(--default-accent-1-color) 60%, white);
    --default-accent-1-color-lighter-50: color-mix(in srgb, var(--default-accent-1-color) 50%, white);
    --default-accent-1-color-lighter-60: color-mix(in srgb, var(--default-accent-1-color) 40%, white);
    --default-accent-1-color-lighter-70: color-mix(in srgb, var(--default-accent-1-color) 30%, white);
    --default-accent-1-color-lighter-80: color-mix(in srgb, var(--default-accent-1-color) 20%, white);
    --default-accent-1-color-lighter-90: color-mix(in srgb, var(--default-accent-1-color) 10%, white);
    --default-accent-1-color-lighter-100: color-mix(in srgb, var(--default-accent-1-color) 0%, white);
    --default-accent-1-color-darker-10: color-mix(in srgb, var(--default-accent-1-color) 90%, black);
    --default-accent-1-color-darker-20: color-mix(in srgb, var(--default-accent-1-color) 80%, black);
    --default-accent-1-color-darker-30: color-mix(in srgb, var(--default-accent-1-color) 70%, black);
    --default-accent-1-color-darker-40: color-mix(in srgb, var(--default-accent-1-color) 60%, black);
    --default-accent-1-color-darker-50: color-mix(in srgb, var(--default-accent-1-color) 50%, black);
    --default-accent-1-color-darker-60: color-mix(in srgb, var(--default-accent-1-color) 40%, black);
    --default-accent-1-color-darker-70: color-mix(in srgb, var(--default-accent-1-color) 30%, black);
    --default-accent-1-color-darker-80: color-mix(in srgb, var(--default-accent-1-color) 20%, black);
    --default-accent-1-color-darker-90: color-mix(in srgb, var(--default-accent-1-color) 10%, black);
    --default-accent-1-color-darker-100: color-mix(in srgb, var(--default-accent-1-color) 0%, black);

    /* default accent 2 color */
    --default-accent-2-color-lighter-10: color-mix(in srgb, var(--default-accent-2-color) 90%, white);
    --default-accent-2-color-lighter-20: color-mix(in srgb, var(--default-accent-2-color) 80%, white);
    --default-accent-2-color-lighter-30: color-mix(in srgb, var(--default-accent-2-color) 70%, white);
    --default-accent-2-color-lighter-40: color-mix(in srgb, var(--default-accent-2-color) 60%, white);
    --default-accent-2-color-lighter-50: color-mix(in srgb, var(--default-accent-2-color) 50%, white);
    --default-accent-2-color-lighter-60: color-mix(in srgb, var(--default-accent-2-color) 40%, white);
    --default-accent-2-color-lighter-70: color-mix(in srgb, var(--default-accent-2-color) 30%, white);
    --default-accent-2-color-lighter-80: color-mix(in srgb, var(--default-accent-2-color) 20%, white);
    --default-accent-2-color-lighter-90: color-mix(in srgb, var(--default-accent-2-color) 10%, white);
    --default-accent-2-color-lighter-100: color-mix(in srgb, var(--default-accent-2-color) 0%, white);
    --default-accent-2-color-darker-10: color-mix(in srgb, var(--default-accent-2-color) 90%, black);
    --default-accent-2-color-darker-20: color-mix(in srgb, var(--default-accent-2-color) 80%, black);
    --default-accent-2-color-darker-30: color-mix(in srgb, var(--default-accent-2-color) 70%, black);
    --default-accent-2-color-darker-40: color-mix(in srgb, var(--default-accent-2-color) 60%, black);
    --default-accent-2-color-darker-50: color-mix(in srgb, var(--default-accent-2-color) 50%, black);
    --default-accent-2-color-darker-60: color-mix(in srgb, var(--default-accent-2-color) 40%, black);
    --default-accent-2-color-darker-70: color-mix(in srgb, var(--default-accent-2-color) 30%, black);
    --default-accent-2-color-darker-80: color-mix(in srgb, var(--default-accent-2-color) 20%, black);
    --default-accent-2-color-darker-90: color-mix(in srgb, var(--default-accent-2-color) 10%, black);
    --default-accent-2-color-darker-100: color-mix(in srgb, var(--default-accent-2-color) 0%, black);

    /* default accent 3 color */
    --default-accent-3-color-lighter-10: color-mix(in srgb, var(--default-accent-3-color) 90%, white);
    --default-accent-3-color-lighter-20: color-mix(in srgb, var(--default-accent-3-color) 80%, white);
    --default-accent-3-color-lighter-30: color-mix(in srgb, var(--default-accent-3-color) 70%, white);
    --default-accent-3-color-lighter-40: color-mix(in srgb, var(--default-accent-3-color) 60%, white);
    --default-accent-3-color-lighter-50: color-mix(in srgb, var(--default-accent-3-color) 50%, white);
    --default-accent-3-color-lighter-60: color-mix(in srgb, var(--default-accent-3-color) 40%, white);
    --default-accent-3-color-lighter-70: color-mix(in srgb, var(--default-accent-3-color) 30%, white);
    --default-accent-3-color-lighter-80: color-mix(in srgb, var(--default-accent-3-color) 20%, white);
    --default-accent-3-color-lighter-90: color-mix(in srgb, var(--default-accent-3-color) 10%, white);
    --default-accent-3-color-lighter-100: color-mix(in srgb, var(--default-accent-3-color) 0%, white);
    --default-accent-3-color-darker-10: color-mix(in srgb, var(--default-accent-3-color) 90%, black);
    --default-accent-3-color-darker-20: color-mix(in srgb, var(--default-accent-3-color) 80%, black);
    --default-accent-3-color-darker-30: color-mix(in srgb, var(--default-accent-3-color) 70%, black);
    --default-accent-3-color-darker-40: color-mix(in srgb, var(--default-accent-3-color) 60%, black);
    --default-accent-3-color-darker-50: color-mix(in srgb, var(--default-accent-3-color) 50%, black);
    --default-accent-3-color-darker-60: color-mix(in srgb, var(--default-accent-3-color) 40%, black);
    --default-accent-3-color-darker-70: color-mix(in srgb, var(--default-accent-3-color) 30%, black);
    --default-accent-3-color-darker-80: color-mix(in srgb, var(--default-accent-3-color) 20%, black);
    --default-accent-3-color-darker-90: color-mix(in srgb, var(--default-accent-3-color) 10%, black);
    --default-accent-3-color-darker-100: color-mix(in srgb, var(--default-accent-3-color) 0%, black);

    /* default accent 4 color */
    --default-accent-4-color-lighter-10: color-mix(in srgb, var(--default-accent-4-color) 90%, white);
    --default-accent-4-color-lighter-20: color-mix(in srgb, var(--default-accent-4-color) 80%, white);
    --default-accent-4-color-lighter-30: color-mix(in srgb, var(--default-accent-4-color) 70%, white);
    --default-accent-4-color-lighter-40: color-mix(in srgb, var(--default-accent-4-color) 60%, white);
    --default-accent-4-color-lighter-50: color-mix(in srgb, var(--default-accent-4-color) 50%, white);
    --default-accent-4-color-lighter-60: color-mix(in srgb, var(--default-accent-4-color) 40%, white);
    --default-accent-4-color-lighter-70: color-mix(in srgb, var(--default-accent-4-color) 30%, white);
    --default-accent-4-color-lighter-80: color-mix(in srgb, var(--default-accent-4-color) 20%, white);
    --default-accent-4-color-lighter-90: color-mix(in srgb, var(--default-accent-4-color) 10%, white);
    --default-accent-4-color-lighter-100: color-mix(in srgb, var(--default-accent-4-color) 0%, white);
    --default-accent-4-color-darker-10: color-mix(in srgb, var(--default-accent-4-color) 90%, black);
    --default-accent-4-color-darker-20: color-mix(in srgb, var(--default-accent-4-color) 80%, black);
    --default-accent-4-color-darker-30: color-mix(in srgb, var(--default-accent-4-color) 70%, black);
    --default-accent-4-color-darker-40: color-mix(in srgb, var(--default-accent-4-color) 60%, black);
    --default-accent-4-color-darker-50: color-mix(in srgb, var(--default-accent-4-color) 50%, black);
    --default-accent-4-color-darker-60: color-mix(in srgb, var(--default-accent-4-color) 40%, black);
    --default-accent-4-color-darker-70: color-mix(in srgb, var(--default-accent-4-color) 30%, black);
    --default-accent-4-color-darker-80: color-mix(in srgb, var(--default-accent-4-color) 20%, black);
    --default-accent-4-color-darker-90: color-mix(in srgb, var(--default-accent-4-color) 10%, black);
    --default-accent-4-color-darker-100: color-mix(in srgb, var(--default-accent-4-color) 0%, black);

    /* highlight accent 1 color */
    --highlight-accent-1-color-lighter-10: color-mix(in srgb, var(--highlight-accent-1-color) 90%, white);
    --highlight-accent-1-color-lighter-20: color-mix(in srgb, var(--highlight-accent-1-color) 80%, white);
    --highlight-accent-1-color-lighter-30: color-mix(in srgb, var(--highlight-accent-1-color) 70%, white);
    --highlight-accent-1-color-lighter-40: color-mix(in srgb, var(--highlight-accent-1-color) 60%, white);
    --highlight-accent-1-color-lighter-50: color-mix(in srgb, var(--highlight-accent-1-color) 50%, white);
    --highlight-accent-1-color-lighter-60: color-mix(in srgb, var(--highlight-accent-1-color) 40%, white);
    --highlight-accent-1-color-lighter-70: color-mix(in srgb, var(--highlight-accent-1-color) 30%, white);
    --highlight-accent-1-color-lighter-80: color-mix(in srgb, var(--highlight-accent-1-color) 20%, white);
    --highlight-accent-1-color-lighter-90: color-mix(in srgb, var(--highlight-accent-1-color) 10%, white);
    --highlight-accent-1-color-lighter-100: color-mix(in srgb, var(--highlight-accent-1-color) 0%, white);
    --highlight-accent-1-color-darker-10: color-mix(in srgb, var(--highlight-accent-1-color) 90%, black);
    --highlight-accent-1-color-darker-20: color-mix(in srgb, var(--highlight-accent-1-color) 80%, black);
    --highlight-accent-1-color-darker-30: color-mix(in srgb, var(--highlight-accent-1-color) 70%, black);
    --highlight-accent-1-color-darker-40: color-mix(in srgb, var(--highlight-accent-1-color) 60%, black);
    --highlight-accent-1-color-darker-50: color-mix(in srgb, var(--highlight-accent-1-color) 50%, black);
    --highlight-accent-1-color-darker-60: color-mix(in srgb, var(--highlight-accent-1-color) 40%, black);
    --highlight-accent-1-color-darker-70: color-mix(in srgb, var(--highlight-accent-1-color) 30%, black);
    --highlight-accent-1-color-darker-80: color-mix(in srgb, var(--highlight-accent-1-color) 20%, black);
    --highlight-accent-1-color-darker-90: color-mix(in srgb, var(--highlight-accent-1-color) 10%, black);
    --highlight-accent-1-color-darker-100: color-mix(in srgb, var(--highlight-accent-1-color) 0%, black);

    /* highlight accent 2 color */
    --highlight-accent-2-color-lighter-10: color-mix(in srgb, var(--highlight-accent-2-color) 90%, white);
    --highlight-accent-2-color-lighter-20: color-mix(in srgb, var(--highlight-accent-2-color) 80%, white);
    --highlight-accent-2-color-lighter-30: color-mix(in srgb, var(--highlight-accent-2-color) 70%, white);
    --highlight-accent-2-color-lighter-40: color-mix(in srgb, var(--highlight-accent-2-color) 60%, white);
    --highlight-accent-2-color-lighter-50: color-mix(in srgb, var(--highlight-accent-2-color) 50%, white);
    --highlight-accent-2-color-lighter-60: color-mix(in srgb, var(--highlight-accent-2-color) 40%, white);
    --highlight-accent-2-color-lighter-70: color-mix(in srgb, var(--highlight-accent-2-color) 30%, white);
    --highlight-accent-2-color-lighter-80: color-mix(in srgb, var(--highlight-accent-2-color) 20%, white);
    --highlight-accent-2-color-lighter-90: color-mix(in srgb, var(--highlight-accent-2-color) 10%, white);
    --highlight-accent-2-color-lighter-100: color-mix(in srgb, var(--highlight-accent-2-color) 0%, white);
    --highlight-accent-2-color-darker-10: color-mix(in srgb, var(--highlight-accent-2-color) 90%, black);
    --highlight-accent-2-color-darker-20: color-mix(in srgb, var(--highlight-accent-2-color) 80%, black);
    --highlight-accent-2-color-darker-30: color-mix(in srgb, var(--highlight-accent-2-color) 70%, black);
    --highlight-accent-2-color-darker-40: color-mix(in srgb, var(--highlight-accent-2-color) 60%, black);
    --highlight-accent-2-color-darker-50: color-mix(in srgb, var(--highlight-accent-2-color) 50%, black);
    --highlight-accent-2-color-darker-60: color-mix(in srgb, var(--highlight-accent-2-color) 40%, black);
    --highlight-accent-2-color-darker-70: color-mix(in srgb, var(--highlight-accent-2-color) 30%, black);
    --highlight-accent-2-color-darker-80: color-mix(in srgb, var(--highlight-accent-2-color) 20%, black);
    --highlight-accent-2-color-darker-90: color-mix(in srgb, var(--highlight-accent-2-color) 10%, black);
    --highlight-accent-2-color-darker-100: color-mix(in srgb, var(--highlight-accent-2-color) 0%, black);

    /* highlight accent 3 color */
    --highlight-accent-3-color-lighter-10: color-mix(in srgb, var(--highlight-accent-3-color) 90%, white);
    --highlight-accent-3-color-lighter-20: color-mix(in srgb, var(--highlight-accent-3-color) 80%, white);
    --highlight-accent-3-color-lighter-30: color-mix(in srgb, var(--highlight-accent-3-color) 70%, white);
    --highlight-accent-3-color-lighter-40: color-mix(in srgb, var(--highlight-accent-3-color) 60%, white);
    --highlight-accent-3-color-lighter-50: color-mix(in srgb, var(--highlight-accent-3-color) 50%, white);
    --highlight-accent-3-color-lighter-60: color-mix(in srgb, var(--highlight-accent-3-color) 40%, white);
    --highlight-accent-3-color-lighter-70: color-mix(in srgb, var(--highlight-accent-3-color) 30%, white);
    --highlight-accent-3-color-lighter-80: color-mix(in srgb, var(--highlight-accent-3-color) 20%, white);
    --highlight-accent-3-color-lighter-90: color-mix(in srgb, var(--highlight-accent-3-color) 10%, white);
    --highlight-accent-3-color-lighter-100: color-mix(in srgb, var(--highlight-accent-3-color) 0%, white);
    --highlight-accent-3-color-darker-10: color-mix(in srgb, var(--highlight-accent-3-color) 90%, black);
    --highlight-accent-3-color-darker-20: color-mix(in srgb, var(--highlight-accent-3-color) 80%, black);
    --highlight-accent-3-color-darker-30: color-mix(in srgb, var(--highlight-accent-3-color) 70%, black);
    --highlight-accent-3-color-darker-40: color-mix(in srgb, var(--highlight-accent-3-color) 60%, black);
    --highlight-accent-3-color-darker-50: color-mix(in srgb, var(--highlight-accent-3-color) 50%, black);
    --highlight-accent-3-color-darker-60: color-mix(in srgb, var(--highlight-accent-3-color) 40%, black);
    --highlight-accent-3-color-darker-70: color-mix(in srgb, var(--highlight-accent-3-color) 30%, black);
    --highlight-accent-3-color-darker-80: color-mix(in srgb, var(--highlight-accent-3-color) 20%, black);
    --highlight-accent-3-color-darker-90: color-mix(in srgb, var(--highlight-accent-3-color) 10%, black);
    --highlight-accent-3-color-darker-100: color-mix(in srgb, var(--highlight-accent-3-color) 0%, black);

    /* highlight accent 4 color */
    --highlight-accent-4-color-lighter-10: color-mix(in srgb, var(--highlight-accent-4-color) 90%, white);
    --highlight-accent-4-color-lighter-20: color-mix(in srgb, var(--highlight-accent-4-color) 80%, white);
    --highlight-accent-4-color-lighter-30: color-mix(in srgb, var(--highlight-accent-4-color) 70%, white);
    --highlight-accent-4-color-lighter-40: color-mix(in srgb, var(--highlight-accent-4-color) 60%, white);
    --highlight-accent-4-color-lighter-50: color-mix(in srgb, var(--highlight-accent-4-color) 50%, white);
    --highlight-accent-4-color-lighter-60: color-mix(in srgb, var(--highlight-accent-4-color) 40%, white);
    --highlight-accent-4-color-lighter-70: color-mix(in srgb, var(--highlight-accent-4-color) 30%, white);
    --highlight-accent-4-color-lighter-80: color-mix(in srgb, var(--highlight-accent-4-color) 20%, white);
    --highlight-accent-4-color-lighter-90: color-mix(in srgb, var(--highlight-accent-4-color) 10%, white);
    --highlight-accent-4-color-lighter-100: color-mix(in srgb, var(--highlight-accent-4-color) 0%, white);
    --highlight-accent-4-color-darker-10: color-mix(in srgb, var(--highlight-accent-4-color) 90%, black);
    --highlight-accent-4-color-darker-20: color-mix(in srgb, var(--highlight-accent-4-color) 80%, black);
    --highlight-accent-4-color-darker-30: color-mix(in srgb, var(--highlight-accent-4-color) 70%, black);
    --highlight-accent-4-color-darker-40: color-mix(in srgb, var(--highlight-accent-4-color) 60%, black);
    --highlight-accent-4-color-darker-50: color-mix(in srgb, var(--highlight-accent-4-color) 50%, black);
    --highlight-accent-4-color-darker-60: color-mix(in srgb, var(--highlight-accent-4-color) 40%, black);
    --highlight-accent-4-color-darker-70: color-mix(in srgb, var(--highlight-accent-4-color) 30%, black);
    --highlight-accent-4-color-darker-80: color-mix(in srgb, var(--highlight-accent-4-color) 20%, black);
    --highlight-accent-4-color-darker-90: color-mix(in srgb, var(--highlight-accent-4-color) 10%, black);
    --highlight-accent-4-color-darker-100: color-mix(in srgb, var(--highlight-accent-4-color) 0%, black);

    /* ============================================
       HIGHLIGHT THEME HOVER VARIABLE
       ============================================ */
    
    /* Default Context (Highlight) */
    --highlight-hover-bg-color: light-dark(
        color-mix(in srgb, var(--highlight-bg-color) 90%, white),
        color-mix(in srgb, var(--highlight-bg-color) 90%, black)
    );
    --highlight-hover-text-color: light-dark(
        color-mix(in srgb, var(--highlight-text-color) 90%, black),
        color-mix(in srgb, var(--highlight-text-color) 90%, white)
    );
    --highlight-hover-link-color: light-dark(
        color-mix(in srgb, var(--highlight-link-color) 90%, black),
        color-mix(in srgb, var(--highlight-link-color) 90%, white)
    );
    --highlight-hover-border-color: light-dark(
        color-mix(in srgb, var(--highlight-border-color) 90%, black),
        color-mix(in srgb, var(--highlight-border-color) 90%, white)
    );
    
    /* Primary Context (Highlight) */
    --highlight-primary-hover-bg-color: light-dark(
        color-mix(in srgb, var(--highlight-primary-bg-color) 90%, black),
        color-mix(in srgb, var(--highlight-primary-bg-color) 90%, white)
    );
    --highlight-primary-hover-text-color: light-dark(
        color-mix(in srgb, var(--highlight-primary-text-color) 90%, white),
        color-mix(in srgb, var(--highlight-primary-text-color) 90%, black)
    );
    --highlight-primary-hover-link-color: light-dark(
        color-mix(in srgb, var(--highlight-primary-link-color) 90%, white),
        color-mix(in srgb, var(--highlight-primary-link-color) 90%, black)
    );
    --highlight-primary-hover-border-color: light-dark(
        color-mix(in srgb, var(--highlight-primary-border-color) 90%, black),
        color-mix(in srgb, var(--highlight-primary-border-color) 90%, white)
    );
    
    /* Secondary Context (Highlight) */
    --highlight-secondary-hover-bg-color: light-dark(
        color-mix(in srgb, var(--highlight-secondary-bg-color) 90%, white),
        color-mix(in srgb, var(--highlight-secondary-bg-color) 90%, black)
    );
    --highlight-secondary-hover-text-color: light-dark(
        color-mix(in srgb, var(--highlight-secondary-text-color) 90%, black),
        color-mix(in srgb, var(--highlight-secondary-text-color) 90%, white)
    );
    --highlight-secondary-hover-link-color: light-dark(
        color-mix(in srgb, var(--highlight-secondary-link-color) 90%, white),
        color-mix(in srgb, var(--highlight-secondary-link-color) 90%, black)
    );
    --highlight-secondary-hover-border-color: light-dark(
        color-mix(in srgb, var(--highlight-secondary-border-color) 90%, black),
        color-mix(in srgb, var(--highlight-secondary-border-color) 90%, white)
    );

    /* Default Typo Variables */
    --default-font-family: 'open-sans', sans-serif;
    --default-heading-font-family: 'open-sans', sans-serif;
    --default-text-size: 16px;
    --default-text-transform: none;
    --default-font-weight: normal;
    --default-line-height: 1.8;
    --default-letter-spacing: normal;
    --default-bg-image: none;
    --default-bg-image-position: center center;
    --default-bg-image-size: cover;
    --default-bg-image-repeat: no-repeat;
    --default-bg-image-attachment: fixed;

    /* === SPACING TOKENS === */
    --space-0: 0em;      /* 0px  */
    --space-1: 0.125em;  /* 2px  */
    --space-2: 0.25em;   /* 4.5px */
    --space-3: 0.375em;  /* 6.75px */
    --space-4: 0.5em;    /* 9px */
    --space-5: 0.75em;   /* 13.5px */
    --space-6: 1em;      /* 18px base */
    --space-7: 1.25em;   /* 22.5px */
    --space-8: 1.5em;    /* 27px */
    --space-9: 1.75em;   /* 31.5px */
    --space-10: 2em;     /* 36px */
    --space-11: 2.5em;   /* 45px */
    --space-12: 3em;     /* 54px */
    --space-13: 4em;     /* 72px */

    /* === FONT SIZE TOKENS === */
    --fs-1: 0.5em;   /* 9px */
    --fs-2: 0.75em;  /* 13.5px */
    --fs-3: 0.875em; /* 15.75px */
    --fs-4: 1em;     /* 18px */
    --fs-5: 1.125em; /* 20.25px */
    --fs-6: 1.25em;  /* 22.5px */
    --fs-7: 1.5em;   /* 27px */
    --fs-8: 1.75em;  /* 31.5px */
    --fs-9: 2em;     /* 36px */
    --fs-10: 2.25em; /* 40.5px */
    --fs-11: 2.5em;  /* 45px */
    --fs-12: 2.75em; /* 49.5px */
    --fs-13: 3em;    /* 54px */
    --fs-14: 3.5em;  /* 63px */

    /* === BORDER RADIUS TOKENS === */
    --radius-0: 0em;     /* 0px */
    --radius-1: 0.125em; /* 2px */
    --radius-2: 0.25em;  /* 4.5px */
    --radius-3: 0.375em; /* 6.75px */
    --radius-4: 0.5em;   /* 9px */
    --radius-5: 0.625em; /* 11.25px */
    --radius-6: 0.75em; /* 13.5px */
    --radius-7: 0.875em; /* 15.75px */
    --radius-8: 1em; /* 18px */
    --radius-9: 1.125em; /* 20.25px */
    --radius-10: 1.25em; /* 22.5px */
    --radius-11: 1.375em; /* 24.75px */
    --radius-12: 1.5em; /* 27px */
    --radius-pill: 9999px;

    /* === WIDTH TOKENS === */
    --w-0-75: 0.75em; /* 13.5px */
    --w-1: 1em;       /* 18px */
    --w-1-25: 1.25em; /* 22.5px */
    --w-1-5: 1.5em;   /* 27px */
    --w-2: 2em;       /* 36px */
    --w-3: 3em;       /* 54px */
    --w-4: 4em;       /* 72px */
    --w-5: 5em;       /* 90px */
    --w-6: 6em;       /* 108px */
    --w-7: 7em;       /* 126px */
    --w-8: 8em;       /* 144px */

    /* === HEIGHT TOKENS === */
    --h-0-75: 0.75em; /* 13.5px */
    --h-1: 1em;       /* 18px */
    --h-1-25: 1.25em; /* 22.5px */
    --h-1-5: 1.5em;   /* 27px */
    --h-2: 2em;       /* 36px */
    --h-3: 3em;       /* 54px */
    --h-4: 4em;       /* 72px */
    --h-5: 5em;       /* 90px */
    --h-6: 6em;       /* 108px */
    --h-7: 7em;       /* 126px */
    --h-8: 8em;       /* 144px */

    /* Default Vars */
    /* BLOG PAGE VARIABLES */
    --color-blog-border: var(--color-border);
    --color-blog-tag-background-style-01: var(--color-light);
    --color-blog-tag-background-border-style-01: var(--color-light);
    --color-blog-tag-background-style-02: var(--color-light);
    --color-blog-tag-background-border-style-02: var(--color-light);
    --color-blog-tag-background: var(--color-light);
    --color-blog-tag-background-border: var(--color-light);
    --color-blog-tag-category-container-background: var(--color-light);
    --color-blog-tag-category-container-background-border: var(--color-light);
    --color-blog-tag-category-container-background-style-04: var(--color-light);
    --color-blog-tag-category-container-background-style-03: var(--color-light);
    --color-blog-tag-category-container-background-border-style-03: var(--color-light);
    --color-blog-footer-content: var(--color-text);
    --color-blog-rss-icon: var(--zpsocialprofile-rss);
    --font-size-blog-author: var(--default-text-size);
    --color-blog-rss-icon-path: var(--color-default);

    --color-bloglist-h1: var(--color-secondary);
    --font-family-bloglist-h1: var(--default-heading-font-family);
    --font-size-bloglist-h1: var(--default-text-size);
    --font-weight-bloglist-h1: normal;
    --font-transform-bloglist-h1: none;
    --font-line-height-bloglist-h1: 1.8;
    --font-letter-spacing-bloglist-h1: normal;


}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box
}

noscript {
    height: 100%
}

html {
    font-size: var(--default-text-size);
}
body {
    color: var(--default-text-color);
    font-family: var(--default-font-family);
    font-weight: var(--default-font-weight);
    text-transform: var(--default-text-transform);
    line-height: var(--default-line-height);
    letter-spacing: var(--default-letter-spacing);
    background-image: var(--default-bg-image);
    background-color: var(--default-bg-color);
    background-size: var(--default-bg-image-size);
    background-position: var(--default-bg-image-position);
    background-repeat: var(--default-bg-image-repeat);
    background-attachment: var(--default-bg-image-attachment);
}

.default-container {
    --local-bg-color: var(--default-bg-color);
    --local-text-color: var(--default-text-color);
    --local-link-color: var(--default-link-color);
    --local-hover-link-color: var(--default-hover-link-color);
    --local-border-color: var(--default-border-color);
    --local-accent-1-color: var(--default-accent-1-color);
    --local-accent-2-color: var(--default-accent-2-color);
    --local-accent-3-color: var(--default-accent-3-color);
    --local-accent-4-color: var(--default-accent-4-color);
    --local-primary-bg-color: var(--default-primary-bg-color);
    --local-primary-text-color: var(--default-primary-text-color);
    --local-primary-link-color: var(--default-primary-link-color);
    --local-primary-border-color: var(--default-primary-border-color);
    --local-secondary-bg-color: var(--default-secondary-bg-color);
    --local-secondary-text-color: var(--default-secondary-text-color);
    --local-secondary-link-color: var(--default-secondary-link-color);
    --local-secondary-border-color: var(--default-secondary-border-color);
}
.highlight-container{
    --local-bg-color: var(--highlight-bg-color);
    --local-text-color: var(--highlight-text-color);
    --local-link-color: var(--highlight-link-color);
    --local-hover-link-color: var(--highlight-hover-link-color);
    --local-border-color: var(--highlight-border-color);
    --local-accent-1-color: var(--highlight-accent-1-color);
    --local-accent-2-color: var(--highlight-accent-2-color);
    --local-accent-3-color: var(--highlight-accent-3-color);
    --local-accent-4-color: var(--highlight-accent-4-color);
    --local-primary-bg-color: var(--highlight-primary-bg-color);
    --local-primary-text-color: var(--highlight-primary-text-color);
    --local-primary-link-color: var(--highlight-primary-link-color);
    --local-primary-border-color: var(--highlight-primary-border-color);
    --local-secondary-bg-color: var(--highlight-secondary-bg-color);
    --local-secondary-text-color: var(--highlight-secondary-text-color);
    --local-secondary-link-color: var(--highlight-secondary-link-color);
    --local-secondary-border-color: var(--highlight-secondary-border-color);
}

.default-container,
.highlight-container{
  /* local bg color */
  --local-bg-color-lighter-10: color-mix(in srgb, var(--local-bg-color) 90%, white);
  --local-bg-color-lighter-20: color-mix(in srgb, var(--local-bg-color) 80%, white);
  --local-bg-color-lighter-30: color-mix(in srgb, var(--local-bg-color) 70%, white);
  --local-bg-color-lighter-40: color-mix(in srgb, var(--local-bg-color) 60%, white);
  --local-bg-color-lighter-50: color-mix(in srgb, var(--local-bg-color) 50%, white);
  --local-bg-color-lighter-60: color-mix(in srgb, var(--local-bg-color) 40%, white);
  --local-bg-color-lighter-70: color-mix(in srgb, var(--local-bg-color) 30%, white);
  --local-bg-color-lighter-80: color-mix(in srgb, var(--local-bg-color) 20%, white);
  --local-bg-color-lighter-90: color-mix(in srgb, var(--local-bg-color) 10%, white);
  --local-bg-color-lighter-100: color-mix(in srgb, var(--local-bg-color) 0%, white);
  --local-bg-color-darker-10: color-mix(in srgb, var(--local-bg-color) 90%, black);
  --local-bg-color-darker-20: color-mix(in srgb, var(--local-bg-color) 80%, black);
  --local-bg-color-darker-30: color-mix(in srgb, var(--local-bg-color) 70%, black);
  --local-bg-color-darker-40: color-mix(in srgb, var(--local-bg-color) 60%, black);
  --local-bg-color-darker-50: color-mix(in srgb, var(--local-bg-color) 50%, black);
  --local-bg-color-darker-60: color-mix(in srgb, var(--local-bg-color) 40%, black);
  --local-bg-color-darker-70: color-mix(in srgb, var(--local-bg-color) 30%, black);
  --local-bg-color-darker-80: color-mix(in srgb, var(--local-bg-color) 20%, black);
  --local-bg-color-darker-90: color-mix(in srgb, var(--local-bg-color) 10%, black);
  --local-bg-color-darker-100: color-mix(in srgb, var(--local-bg-color) 0%, black);

  /* local primary bg color */
  --local-primary-bg-color-lighter-10: color-mix(in srgb, var(--local-primary-bg-color) 90%, white);
  --local-primary-bg-color-lighter-20: color-mix(in srgb, var(--local-primary-bg-color) 80%, white);
  --local-primary-bg-color-lighter-30: color-mix(in srgb, var(--local-primary-bg-color) 70%, white);
  --local-primary-bg-color-lighter-40: color-mix(in srgb, var(--local-primary-bg-color) 60%, white);
  --local-primary-bg-color-lighter-50: color-mix(in srgb, var(--local-primary-bg-color) 50%, white);
  --local-primary-bg-color-lighter-60: color-mix(in srgb, var(--local-primary-bg-color) 40%, white);
  --local-primary-bg-color-lighter-70: color-mix(in srgb, var(--local-primary-bg-color) 30%, white);
  --local-primary-bg-color-lighter-80: color-mix(in srgb, var(--local-primary-bg-color) 20%, white);
  --local-primary-bg-color-lighter-90: color-mix(in srgb, var(--local-primary-bg-color) 10%, white);
  --local-primary-bg-color-lighter-100: color-mix(in srgb, var(--local-primary-bg-color) 0%, white);
  --local-primary-bg-color-darker-10: color-mix(in srgb, var(--local-primary-bg-color) 90%, black);
  --local-primary-bg-color-darker-20: color-mix(in srgb, var(--local-primary-bg-color) 80%, black);
  --local-primary-bg-color-darker-30: color-mix(in srgb, var(--local-primary-bg-color) 70%, black);
  --local-primary-bg-color-darker-40: color-mix(in srgb, var(--local-primary-bg-color) 60%, black);
  --local-primary-bg-color-darker-50: color-mix(in srgb, var(--local-primary-bg-color) 50%, black);
  --local-primary-bg-color-darker-60: color-mix(in srgb, var(--local-primary-bg-color) 40%, black);
  --local-primary-bg-color-darker-70: color-mix(in srgb, var(--local-primary-bg-color) 30%, black);
  --local-primary-bg-color-darker-80: color-mix(in srgb, var(--local-primary-bg-color) 20%, black);
  --local-primary-bg-color-darker-90: color-mix(in srgb, var(--local-primary-bg-color) 10%, black);
  --local-primary-bg-color-darker-100: color-mix(in srgb, var(--local-primary-bg-color) 0%, black);

  /* local secondary bg color */
  --local-secondary-bg-color-lighter-10: color-mix(in srgb, var(--local-secondary-bg-color) 90%, white);
  --local-secondary-bg-color-lighter-20: color-mix(in srgb, var(--local-secondary-bg-color) 80%, white);
  --local-secondary-bg-color-lighter-30: color-mix(in srgb, var(--local-secondary-bg-color) 70%, white);
  --local-secondary-bg-color-lighter-40: color-mix(in srgb, var(--local-secondary-bg-color) 60%, white);
  --local-secondary-bg-color-lighter-50: color-mix(in srgb, var(--local-secondary-bg-color) 50%, white);
  --local-secondary-bg-color-lighter-60: color-mix(in srgb, var(--local-secondary-bg-color) 40%, white);
  --local-secondary-bg-color-lighter-70: color-mix(in srgb, var(--local-secondary-bg-color) 30%, white);
  --local-secondary-bg-color-lighter-80: color-mix(in srgb, var(--local-secondary-bg-color) 20%, white);
  --local-secondary-bg-color-lighter-90: color-mix(in srgb, var(--local-secondary-bg-color) 10%, white);
  --local-secondary-bg-color-lighter-100: color-mix(in srgb, var(--local-secondary-bg-color) 0%, white);
  --local-secondary-bg-color-darker-10: color-mix(in srgb, var(--local-secondary-bg-color) 90%, black);
  --local-secondary-bg-color-darker-20: color-mix(in srgb, var(--local-secondary-bg-color) 80%, black);
  --local-secondary-bg-color-darker-30: color-mix(in srgb, var(--local-secondary-bg-color) 70%, black);
  --local-secondary-bg-color-darker-40: color-mix(in srgb, var(--local-secondary-bg-color) 60%, black);
  --local-secondary-bg-color-darker-50: color-mix(in srgb, var(--local-secondary-bg-color) 50%, black);
  --local-secondary-bg-color-darker-60: color-mix(in srgb, var(--local-secondary-bg-color) 40%, black);
  --local-secondary-bg-color-darker-70: color-mix(in srgb, var(--local-secondary-bg-color) 30%, black);
  --local-secondary-bg-color-darker-80: color-mix(in srgb, var(--local-secondary-bg-color) 20%, black);
  --local-secondary-bg-color-darker-90: color-mix(in srgb, var(--local-secondary-bg-color) 10%, black);
  --local-secondary-bg-color-darker-100: color-mix(in srgb, var(--local-secondary-bg-color) 0%, black);

  /* local accent 1 color */
  --local-accent-1-color-lighter-10: color-mix(in srgb, var(--local-accent-1-color) 90%, white);
  --local-accent-1-color-lighter-20: color-mix(in srgb, var(--local-accent-1-color) 80%, white);
  --local-accent-1-color-lighter-30: color-mix(in srgb, var(--local-accent-1-color) 70%, white);
  --local-accent-1-color-lighter-40: color-mix(in srgb, var(--local-accent-1-color) 60%, white);
  --local-accent-1-color-lighter-50: color-mix(in srgb, var(--local-accent-1-color) 50%, white);
  --local-accent-1-color-lighter-60: color-mix(in srgb, var(--local-accent-1-color) 40%, white);
  --local-accent-1-color-lighter-70: color-mix(in srgb, var(--local-accent-1-color) 30%, white);
  --local-accent-1-color-lighter-80: color-mix(in srgb, var(--local-accent-1-color) 20%, white);
  --local-accent-1-color-lighter-90: color-mix(in srgb, var(--local-accent-1-color) 10%, white);
  --local-accent-1-color-lighter-100: color-mix(in srgb, var(--local-accent-1-color) 0%, white);
  --local-accent-1-color-darker-10: color-mix(in srgb, var(--local-accent-1-color) 90%, black);
  --local-accent-1-color-darker-20: color-mix(in srgb, var(--local-accent-1-color) 80%, black);
  --local-accent-1-color-darker-30: color-mix(in srgb, var(--local-accent-1-color) 70%, black);
  --local-accent-1-color-darker-40: color-mix(in srgb, var(--local-accent-1-color) 60%, black);
  --local-accent-1-color-darker-50: color-mix(in srgb, var(--local-accent-1-color) 50%, black);
  --local-accent-1-color-darker-60: color-mix(in srgb, var(--local-accent-1-color) 40%, black);
  --local-accent-1-color-darker-70: color-mix(in srgb, var(--local-accent-1-color) 30%, black);
  --local-accent-1-color-darker-80: color-mix(in srgb, var(--local-accent-1-color) 20%, black);
  --local-accent-1-color-darker-90: color-mix(in srgb, var(--local-accent-1-color) 10%, black);
  --local-accent-1-color-darker-100: color-mix(in srgb, var(--local-accent-1-color) 0%, black);

  /* local accent 2 color */
  --local-accent-2-color-lighter-10: color-mix(in srgb, var(--local-accent-2-color) 90%, white);
  --local-accent-2-color-lighter-20: color-mix(in srgb, var(--local-accent-2-color) 80%, white);
  --local-accent-2-color-lighter-30: color-mix(in srgb, var(--local-accent-2-color) 70%, white);
  --local-accent-2-color-lighter-40: color-mix(in srgb, var(--local-accent-2-color) 60%, white);
  --local-accent-2-color-lighter-50: color-mix(in srgb, var(--local-accent-2-color) 50%, white);
  --local-accent-2-color-lighter-60: color-mix(in srgb, var(--local-accent-2-color) 40%, white);
  --local-accent-2-color-lighter-70: color-mix(in srgb, var(--local-accent-2-color) 30%, white);
  --local-accent-2-color-lighter-80: color-mix(in srgb, var(--local-accent-2-color) 20%, white);
  --local-accent-2-color-lighter-90: color-mix(in srgb, var(--local-accent-2-color) 10%, white);
  --local-accent-2-color-lighter-100: color-mix(in srgb, var(--local-accent-2-color) 0%, white);
  --local-accent-2-color-darker-10: color-mix(in srgb, var(--local-accent-2-color) 90%, black);
  --local-accent-2-color-darker-20: color-mix(in srgb, var(--local-accent-2-color) 80%, black);
  --local-accent-2-color-darker-30: color-mix(in srgb, var(--local-accent-2-color) 70%, black);
  --local-accent-2-color-darker-40: color-mix(in srgb, var(--local-accent-2-color) 60%, black);
  --local-accent-2-color-darker-50: color-mix(in srgb, var(--local-accent-2-color) 50%, black);
  --local-accent-2-color-darker-60: color-mix(in srgb, var(--local-accent-2-color) 40%, black);
  --local-accent-2-color-darker-70: color-mix(in srgb, var(--local-accent-2-color) 30%, black);
  --local-accent-2-color-darker-80: color-mix(in srgb, var(--local-accent-2-color) 20%, black);
  --local-accent-2-color-darker-90: color-mix(in srgb, var(--local-accent-2-color) 10%, black);
  --local-accent-2-color-darker-100: color-mix(in srgb, var(--local-accent-2-color) 0%, black);

  /* local accent 3 color */
  --local-accent-3-color-lighter-10: color-mix(in srgb, var(--local-accent-3-color) 90%, white);
  --local-accent-3-color-lighter-20: color-mix(in srgb, var(--local-accent-3-color) 80%, white);
  --local-accent-3-color-lighter-30: color-mix(in srgb, var(--local-accent-3-color) 70%, white);
  --local-accent-3-color-lighter-40: color-mix(in srgb, var(--local-accent-3-color) 60%, white);
  --local-accent-3-color-lighter-50: color-mix(in srgb, var(--local-accent-3-color) 50%, white);
  --local-accent-3-color-lighter-60: color-mix(in srgb, var(--local-accent-3-color) 40%, white);
  --local-accent-3-color-lighter-70: color-mix(in srgb, var(--local-accent-3-color) 30%, white);
  --local-accent-3-color-lighter-80: color-mix(in srgb, var(--local-accent-3-color) 20%, white);
  --local-accent-3-color-lighter-90: color-mix(in srgb, var(--local-accent-3-color) 10%, white);
  --local-accent-3-color-lighter-100: color-mix(in srgb, var(--local-accent-3-color) 0%, white);
  --local-accent-3-color-darker-10: color-mix(in srgb, var(--local-accent-3-color) 90%, black);
  --local-accent-3-color-darker-20: color-mix(in srgb, var(--local-accent-3-color) 80%, black);
  --local-accent-3-color-darker-30: color-mix(in srgb, var(--local-accent-3-color) 70%, black);
  --local-accent-3-color-darker-40: color-mix(in srgb, var(--local-accent-3-color) 60%, black);
  --local-accent-3-color-darker-50: color-mix(in srgb, var(--local-accent-3-color) 50%, black);
  --local-accent-3-color-darker-60: color-mix(in srgb, var(--local-accent-3-color) 40%, black);
  --local-accent-3-color-darker-70: color-mix(in srgb, var(--local-accent-3-color) 30%, black);
  --local-accent-3-color-darker-80: color-mix(in srgb, var(--local-accent-3-color) 20%, black);
  --local-accent-3-color-darker-90: color-mix(in srgb, var(--local-accent-3-color) 10%, black);
  --local-accent-3-color-darker-100: color-mix(in srgb, var(--local-accent-3-color) 0%, black);

  /* local accent 4 color */
  --local-accent-4-color-lighter-10: color-mix(in srgb, var(--local-accent-4-color) 90%, white);
  --local-accent-4-color-lighter-20: color-mix(in srgb, var(--local-accent-4-color) 80%, white);
  --local-accent-4-color-lighter-30: color-mix(in srgb, var(--local-accent-4-color) 70%, white);
  --local-accent-4-color-lighter-40: color-mix(in srgb, var(--local-accent-4-color) 60%, white);
  --local-accent-4-color-lighter-50: color-mix(in srgb, var(--local-accent-4-color) 50%, white);
  --local-accent-4-color-lighter-60: color-mix(in srgb, var(--local-accent-4-color) 40%, white);
  --local-accent-4-color-lighter-70: color-mix(in srgb, var(--local-accent-4-color) 30%, white);
  --local-accent-4-color-lighter-80: color-mix(in srgb, var(--local-accent-4-color) 20%, white);
  --local-accent-4-color-lighter-90: color-mix(in srgb, var(--local-accent-4-color) 10%, white);
  --local-accent-4-color-lighter-100: color-mix(in srgb, var(--local-accent-4-color) 0%, white);
  --local-accent-4-color-darker-10: color-mix(in srgb, var(--local-accent-4-color) 90%, black);
  --local-accent-4-color-darker-20: color-mix(in srgb, var(--local-accent-4-color) 80%, black);
  --local-accent-4-color-darker-30: color-mix(in srgb, var(--local-accent-4-color) 70%, black);
  --local-accent-4-color-darker-40: color-mix(in srgb, var(--local-accent-4-color) 60%, black);
  --local-accent-4-color-darker-50: color-mix(in srgb, var(--local-accent-4-color) 50%, black);
  --local-accent-4-color-darker-60: color-mix(in srgb, var(--local-accent-4-color) 40%, black);
  --local-accent-4-color-darker-70: color-mix(in srgb, var(--local-accent-4-color) 30%, black);
  --local-accent-4-color-darker-80: color-mix(in srgb, var(--local-accent-4-color) 20%, black);
  --local-accent-4-color-darker-90: color-mix(in srgb, var(--local-accent-4-color) 10%, black);
  --local-accent-4-color-darker-100: color-mix(in srgb, var(--local-accent-4-color) 0%, black);
}

a {
    color: var(--local-link-color);
}

a:hover {
    color: var(--local-hover-link-color)
}

[data-zp-appear] {
  opacity: 0 !important;
}

@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.typewriter-cursor {
    margin-left: 0.05em;
    font-weight: bold;
    animation: cursor-blink 0.7s infinite;
}

.text-highlight {
    position: relative;
    z-index: 2;
}

/* Specific highlight styles — stroke color follows current text color via mask */
.text-highlight-underline::after, .text-highlight-circle::after, .text-highlight-scribble::after, .text-highlight-jagged::after, .text-highlight-cross::after, .text-highlight-highlight7::after, .text-highlight-highlight8::after, .text-highlight-highlight9::after, .text-highlight-highlight10::after, .text-highlight-highlight11::after, .text-highlight-highlight12::after, .text-highlight-highlight13::after, .text-highlight-highlight14::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Lower z-index to appear behind text */
    background-color: var(--local-highlight-color, currentColor);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.text-highlight-underline::after {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%223%22 d=%22M0 43h100%22 /%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%223%22 d=%22M0 43h100%22 /%3E%3C/svg%3E');
}

.text-highlight-circle::after {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 50%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%223%22 d=%22M34.028 35.455c55.063 1.688 68.872 0 66.226-18.645C98 2.671 69.454 0 49 0S-2 2.671-2 17.727 23.113 39 72.059 40.56%22 /%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 50%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%223%22 d=%22M34.028 35.455c55.063 1.688 68.872 0 66.226-18.645C98 2.671 69.454 0 49 0S-2 2.671-2 17.727 23.113 39 72.059 40.56%22 /%3E%3C/svg%3E');
}

.text-highlight-scribble::after {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%222.5%22 d=%22M0 38c5-4 10 2 18-2s12 6 20 1 10-5 18 1 12 5 20-1 8-4 14 2 24-1%22 /%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%222.5%22 d=%22M0 38c5-4 10 2 18-2s12 6 20 1 10-5 18 1 12 5 20-1 8-4 14 2 24-1%22 /%3E%3C/svg%3E');
}

.text-highlight-jagged::after {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 54%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%223%22 d=%22M0 48q21.778-10.889 10.889 0c-5.445 5.444-5.445 5.444 5.444 0q21.778-10.889 10.89 0c-5.445 5.444-5.445 5.444 5.444 0q21.777-10.889 10.889 0C38.11 54.444 38.11 52.444 49 48q21.778-10.889 10.889 0c-5.445 5.444-5.445 5.444 5.444 0q21.778-10.889 10.89 0c-5.445 5.444-5.445 5.444 5.444 0q21.778-10.889 10.89 0%22 /%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 54%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%223%22 d=%22M0 48q21.778-10.889 10.889 0c-5.445 5.444-5.445 5.444 5.444 0q21.778-10.889 10.89 0c-5.445 5.444-5.445 5.444 5.444 0q21.777-10.889 10.889 0C38.11 54.444 38.11 52.444 49 48q21.778-10.889 10.889 0c-5.445 5.444-5.445 5.444 5.444 0q21.778-10.889 10.89 0c-5.445 5.444-5.445 5.444 5.444 0q21.778-10.889 10.89 0%22 /%3E%3C/svg%3E');
}

.text-highlight-cross::after {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%223%22 d=%22m0 0 100 43M0 43 100 0%22 /%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%223%22 d=%22m0 0 100 43M0 43 100 0%22 /%3E%3C/svg%3E');
}

.text-highlight-highlight7::after {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%222.5%22 d=%22M0 10Q50 0 100 10M0 44Q50 34 100 44%22 /%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%222.5%22 d=%22M0 10Q50 0 100 10M0 44Q50 34 100 44%22 /%3E%3C/svg%3E');
}

.text-highlight-highlight8::after {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%222%22 d=%22M0 34Q50 44 100 34%22 /%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%222%22 d=%22M0 34Q50 44 100 34%22 /%3E%3C/svg%3E');
}

.text-highlight-highlight9::after {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%222%22 d=%22M0 44Q50 34 100 44%22 /%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%222%22 d=%22M0 44Q50 34 100 44%22 /%3E%3C/svg%3E');
}

.text-highlight-highlight10::after {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%222.5%22 d=%22M0 40Q50 32 100 40M12 42Q50 38 56 40M20 46Q50 40 80 44%22 /%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%222.5%22 d=%22M0 40Q50 32 100 40M12 42Q50 38 56 40M20 46Q50 40 80 44%22 /%3E%3C/svg%3E');
}

.text-highlight-highlight11::after {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%222%22 d=%22M0 40Q40 35 70 42M10 35Q40 29 90 41M0 40Q50 30 85 40%22 /%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%222%22 d=%22M0 40Q40 35 70 42M10 35Q40 29 90 41M0 40Q50 30 85 40%22 /%3E%3C/svg%3E');
}

.text-highlight-highlight12::after {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%223%22 d=%22m0 0 100 43M0 0%22 /%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%223%22 d=%22m0 0 100 43M0 0%22 /%3E%3C/svg%3E');
}

.text-highlight-highlight13::after {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Crect x=%220%22 y=%2220%22 width=%22100%22 height=%226%22 fill=%22%23000%22 /%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Crect x=%220%22 y=%2220%22 width=%22100%22 height=%226%22 fill=%22%23000%22 /%3E%3C/svg%3E');
}

.text-highlight-highlight14::after {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 50%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%223%22 d=%22M15 50L56 48C80 50 104 30 100 22C96 8 78 0 50 0C22 0 4 8 0 22C-4 32 18 50 36 42%22 /%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 50%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%223%22 d=%22M15 50L56 48C80 50 104 30 100 22C96 8 78 0 50 0C22 0 4 8 0 22C-4 32 18 50 36 42%22 /%3E%3C/svg%3E');
}

/* Uncomment below to enable device view plugin styles */
/* Device view plugin styles starts — breakpoints match VIEWPORT_DEFINITIONS in viewport-utils.js */
.zp-hidden-all,
.zp-hidden-all.zprow {
    display: none !important;
}

/* mobile: max-width 767px */
@media (max-width: 767px) {
    .zp-hidden-xs,
    .zp-hidden-xs.zprow {
        display: none !important;
    }
}

/* tablet: max-width 991px and min-width 768px */
@media (max-width: 991px) and (min-width: 768px) {
    .zp-hidden-sm,
    .zp-hidden-sm.zprow {
        display: none !important;
    }
}

/* desktop: min-width 992px */
@media (min-width: 992px) {
    .zp-hidden-md,
    .zp-hidden-md.zprow {
        display: none !important;
    }
}
/* Device view plugin styles ends */

/* ============================================
   LIGHTBOX (page-container overlay)
   ============================================ */

.zp-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999990;
  display: flex;
  flex-direction: column;
  --zp-lightbox-zoom: 1;
  --zp-lightbox-chrome-height: 60px;
  background: rgba(17, 17, 17, 0.94);
  color: #fff;
  user-select: none;
}

.zp-lightbox-theme-light {
  background: rgba(255, 255, 255, 0.96);
  color: #111;
}

.zp-lightbox-chrome {
  flex: 0 0 var(--zp-lightbox-chrome-height);
  height: var(--zp-lightbox-chrome-height);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-inline: 16px;
  background: rgba(0, 0, 0, 0.45);
  position: relative;
  z-index: 2;
}

.zp-lightbox-theme-light .zp-lightbox-chrome {
  background: rgba(0, 0, 0, 0.08);
}

.zp-lightbox-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.zp-lightbox-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.zp-lightbox-btn:hover:not(:disabled),
.zp-lightbox-btn:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

.zp-lightbox-theme-light .zp-lightbox-btn:hover:not(:disabled),
.zp-lightbox-theme-light .zp-lightbox-btn:focus-visible {
  background: rgba(0, 0, 0, 0.08);
}

.zp-lightbox-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.zp-lightbox-btn-close:hover:not(:disabled),
.zp-lightbox-btn-close:focus-visible {
  color: #ff6b6b;
}

.zp-lightbox-body {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.zp-lightbox-body > .zpelem-slider,
.zp-lightbox-body > .zpelem-slider.zpslider-lightbox-mode {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.zp-lightbox-body .zpslider-lightbox-mode > .zpslider-container {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.zp-lightbox-body .zpslider-lightbox-mode .zpslider-content-container {
  flex: 1 1 auto;
  min-height: 0;
  height: calc(100vh - var(--zp-lightbox-chrome-height) - 96px);
}

.zp-lightbox-body .zpslider-lightbox-mode .zpslider-content {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: none;
}

.zp-lightbox-body .zpslider-lightbox-mode .zpslider-content-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zp-lightbox-slide {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  box-sizing: border-box;
}

.zp-lightbox-slide-img {
  max-width: 100%;
  max-height: calc(100vh - var(--zp-lightbox-chrome-height) - 140px);
  object-fit: contain;
  transform: scale(var(--zp-lightbox-zoom, 1));
  transform-origin: center center;
  transition: transform 0.2s ease;
}

.zp-lightbox-slide-caption {
  max-width: min(720px, 90%);
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.9;
}

.zp-lightbox-body .zpslider-lightbox-mode .zpslider-arrows-container {
  z-index: 3;
}

.zp-lightbox-body .zpslider-lightbox-mode .zpslider-arrow-left,
.zp-lightbox-body .zpslider-lightbox-mode .zpslider-arrow-right {
  color: inherit;
}

.zp-lightbox-body .zpslider-lightbox-mode .zpslider-arrows-container svg {
  fill: currentColor;
}

.zp-lightbox-body .zpslider-lightbox-mode .zpslider-controller-type-05.zpslider-controller-container {
  flex: 0 0 auto;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  justify-content: center;
  padding-block: 10px 16px;
  background: transparent;
}

.zp-lightbox-body .zpslider-lightbox-mode .zpslider-controller-type-05 .zpslider-controller {
  border-color: rgba(255, 255, 255, 0.45);
}

.zp-lightbox-theme-light .zpslider-controller-type-05 .zpslider-controller {
  border-color: rgba(0, 0, 0, 0.25);
}

.zp-lightbox-body .zpslider-lightbox-mode .zpslider-controller-type-05 .zpslider-controller:hover,
.zp-lightbox-body .zpslider-lightbox-mode .zpslider-controller-type-05 .zpslider-controller.zpslider-controller-active {
  border-color: #fff;
  box-shadow: 0 0 0 1px #fff;
}

.zp-lightbox-theme-light .zpslider-controller-type-05 .zpslider-controller:hover,
.zp-lightbox-theme-light .zpslider-controller-type-05 .zpslider-controller.zpslider-controller-active {
  border-color: #111;
  box-shadow: 0 0 0 1px #111;
}

@media (max-width: 767px) {
  .zp-lightbox-overlay {
    --zp-lightbox-chrome-height: 48px;
  }

  .zp-lightbox-btn {
    width: 44px;
    height: 44px;
  }

  .zp-lightbox-body .zpslider-lightbox-mode .zpslider-content-container {
    height: calc(100vh - var(--zp-lightbox-chrome-height) - 88px);
  }

  .zp-lightbox-slide-img {
    max-height: calc(100vh - var(--zp-lightbox-chrome-height) - 120px);
  }

  .zp-lightbox-body .zpslider-lightbox-mode .zpslider-controller-type-05 .zpslider-controller {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
  }
}
@font-face {
   font-family:"Montez";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/montezregular/font_latin.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/montezregular/font_latin.woff") format("woff");
   unicode-range: U+20-7E, U+A0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2212, U+2215;
}
@font-face {
   font-family:"Montez";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/montezregular/font_latin_ext.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/montezregular/font_latin_ext.woff") format("woff");
   unicode-range: U+100-130, U+132-151, U+154-17E, U+192, U+1FC-1FF, U+237, U+1E80-1E85, U+1EF2-1EF3;
}
@font-face {
   font-family:"Montez";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/montezregular/font_others.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/montezregular/font_others.woff") format("woff");
   unicode-range: U+2C7, U+2D8-2D9, U+2DB, U+2DD, U+3BC, U+2122, U+2202, U+2248, U+2260, U+2264-2265, U+FB01-FB02;
}
@font-face {
   font-family:"Cabin";
   font-weight:700;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/cabinbold/font_latin.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/cabinbold/font_latin.woff") format("woff");
   unicode-range: U+20-7E, U+8E, U+9E, U+A0-AE, U+B0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2074, U+20AC;
}
@font-face {
   font-family:"Cabin";
   font-weight:700;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/cabinbold/font_latin_ext.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/cabinbold/font_latin_ext.woff") format("woff");
   unicode-range: U+10C-10D, U+160-161, U+178, U+192, U+237;
}
@font-face {
   font-family:"Cabin";
   font-weight:700;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/cabinbold/font_others.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/cabinbold/font_others.woff") format("woff");
   unicode-range: U+2C7, U+2070, U+2075-2079, U+2080-2089, U+2122;
}
@font-face {
   font-family:"Cabin";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/cabinregular/font_latin.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/cabinregular/font_latin.woff") format("woff");
   unicode-range: U+20-7E, U+8E, U+9E, U+A0-AE, U+B0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2074, U+20AC;
}
@font-face {
   font-family:"Cabin";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/cabinregular/font_latin_ext.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/cabinregular/font_latin_ext.woff") format("woff");
   unicode-range: U+10C-10D, U+160-161, U+178, U+192, U+237;
}
@font-face {
   font-family:"Cabin";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/cabinregular/font_others.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/cabinregular/font_others.woff") format("woff");
   unicode-range: U+2C7, U+2070, U+2075-2079, U+2080-2089, U+2122;
}
@font-face {
   font-family:"Montserrat";
   font-weight:700;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/montserratbold/font_cyrillic_ext.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/montserratbold/font_cyrillic_ext.woff") format("woff");
   unicode-range: U+462-463, U+46A-46B, U+472-475, U+48A-48F, U+492-4A5, U+4A8-4AF, U+4B2-4C4, U+4C6-4FF, U+510-513, U+51A-51D, U+524-529, U+52E-52F, U+25CC;
}
@font-face {
   font-family:"Montserrat";
   font-weight:700;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/montserratbold/font_latin.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/montserratbold/font_latin.woff") format("woff");
   unicode-range: U+20-7E, U+A0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+2007-200B, U+2010, U+2012-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2052, U+2074, U+20AC, U+2212, U+2215, U+25CC;
}
@font-face {
   font-family:"Montserrat";
   font-weight:700;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/montserratbold/font_latin_ext.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/montserratbold/font_latin_ext.woff") format("woff");
   unicode-range: U+100-130, U+132-151, U+154-17F, U+18F, U+192, U+1A0-1A1, U+1AF-1B0, U+1B7, U+1C4-1CE, U+1D3-1D4, U+1E4-1EB, U+1EE-1EF, U+1FA-21B, U+21E-21F, U+22A-22D, U+230-233, U+237, U+1E08-1E09, U+1E0C-1E0F, U+1E14-1E17, U+1E1C-1E1D, U+1E20-1E21, U+1E24-1E25, U+1E2A-1E2B, U+1E2E-1E2F, U+1E36-1E37, U+1E3A-1E3B, U+1E42-1E49, U+1E4C-1E53, U+1E5A-1E5B, U+1E5E-1E69, U+1E6C-1E6F, U+1E78-1E7B, U+1E80-1E85, U+1E8E-1E8F, U+1E92-1E93, U+1E97, U+1E9E, U+1EA0-1EF9, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8, U+20BA, U+20BC-20BD, U+25CC, U+A78B-A78C;
}
@font-face {
   font-family:"Montserrat";
   font-weight:700;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/montserratbold/font_others.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/montserratbold/font_others.woff") format("woff");
   unicode-range: U+259, U+292, U+2B9-2BC, U+2BE-2BF, U+2C7-2CC, U+2D8-2D9, U+2DB, U+2DD, U+300-304, U+306-30C, U+30F, U+311-312, U+31B, U+323-324, U+326-328, U+32E, U+331, U+335-338, U+394, U+3A9, U+3BC, U+3C0, U+2070, U+2075-2079, U+2080-2089, U+20B9, U+2113, U+2122, U+2126, U+212A-212B, U+212E, U+2153-2154, U+215B-215E, U+2190-2199, U+2202, U+2205-2206, U+220F, U+2211, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25A0-25A1, U+25B2-25B3, U+25B6-25B7, U+25BC-25BD, U+25C0-25C1, U+25C6-25C7, U+25CA, U+25CC, U+27E8-27E9, U+FB01-FB02;
}
@font-face {
   font-family:"Montserrat";
   font-weight:700;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/montserratbold/font_cyrillic.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/montserratbold/font_cyrillic.woff") format("woff");
   unicode-range: U+400-45F, U+490-491, U+4B0-4B1, U+2116, U+25CC;
}
@font-face {
   font-family:"Montserrat";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/montserratregular/font_cyrillic_ext.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/montserratregular/font_cyrillic_ext.woff") format("woff");
   unicode-range: U+462-463, U+46A-46B, U+472-475, U+48A-48F, U+492-4A5, U+4A8-4AF, U+4B2-4C4, U+4C6-4FF, U+510-513, U+51A-51D, U+524-529, U+52E-52F, U+25CC;
}
@font-face {
   font-family:"Montserrat";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/montserratregular/font_latin.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/montserratregular/font_latin.woff") format("woff");
   unicode-range: U+20-7E, U+A0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+2007-200B, U+2010, U+2012-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2052, U+2074, U+20AC, U+2212, U+2215, U+25CC;
}
@font-face {
   font-family:"Montserrat";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/montserratregular/font_latin_ext.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/montserratregular/font_latin_ext.woff") format("woff");
   unicode-range: U+100-130, U+132-151, U+154-17F, U+18F, U+192, U+1A0-1A1, U+1AF-1B0, U+1B7, U+1C4-1CE, U+1D3-1D4, U+1E4-1EB, U+1EE-1EF, U+1FA-21B, U+21E-21F, U+22A-22D, U+230-233, U+237, U+1E08-1E09, U+1E0C-1E0F, U+1E14-1E17, U+1E1C-1E1D, U+1E20-1E21, U+1E24-1E25, U+1E2A-1E2B, U+1E2E-1E2F, U+1E36-1E37, U+1E3A-1E3B, U+1E42-1E49, U+1E4C-1E53, U+1E5A-1E5B, U+1E5E-1E69, U+1E6C-1E6F, U+1E78-1E7B, U+1E80-1E85, U+1E8E-1E8F, U+1E92-1E93, U+1E97, U+1E9E, U+1EA0-1EF9, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8, U+20BA, U+20BC-20BD, U+25CC, U+A78B-A78C;
}
@font-face {
   font-family:"Montserrat";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/montserratregular/font_others.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/montserratregular/font_others.woff") format("woff");
   unicode-range: U+259, U+292, U+2B9-2BC, U+2BE-2BF, U+2C7-2CC, U+2D8-2D9, U+2DB, U+2DD, U+300-304, U+306-30C, U+30F, U+311-312, U+31B, U+323-324, U+326-328, U+32E, U+331, U+335-338, U+394, U+3A9, U+3BC, U+3C0, U+2070, U+2075-2079, U+2080-2089, U+20B9, U+2113, U+2122, U+2126, U+212A-212B, U+212E, U+2153-2154, U+215B-215E, U+2190-2199, U+2202, U+2205-2206, U+220F, U+2211, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25A0-25A1, U+25B2-25B3, U+25B6-25B7, U+25BC-25BD, U+25C0-25C1, U+25C6-25C7, U+25CA, U+25CC, U+27E8-27E9, U+FB01-FB02;
}
@font-face {
   font-family:"Montserrat";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/montserratregular/font_cyrillic.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/montserratregular/font_cyrillic.woff") format("woff");
   unicode-range: U+400-45F, U+490-491, U+4B0-4B1, U+2116, U+25CC;
}
@font-face {
   font-family:"Open Sans";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/opensans/font_greek.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/opensans/font_greek.woff") format("woff");
   unicode-range: U+384-38A, U+38C, U+38E-3A1, U+3A3-3CE, U+3D1-3D2, U+3D6;
}
@font-face {
   font-family:"Open Sans";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/opensans/font_cyrillic_ext.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/opensans/font_cyrillic_ext.woff") format("woff");
   unicode-range: U+460-486, U+488-48F, U+492-4AF, U+4B2-513;
}
@font-face {
   font-family:"Open Sans";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/opensans/font_latin.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/opensans/font_latin.woff") format("woff");
   unicode-range: U+20-7E, U+A0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+2000-200B, U+2013-2015, U+2017-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+203C, U+2044, U+2074, U+20AC, U+2212;
}
@font-face {
   font-family:"Open Sans";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/opensans/font_latin_ext.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/opensans/font_latin_ext.woff") format("woff");
   unicode-range: U+100-130, U+132-151, U+154-17F, U+192, U+1A0-1A1, U+1AF-1B0, U+1F0, U+1FA-1FF, U+218-21B, U+237, U+1E00-1E01, U+1E3E-1E3F, U+1E80-1E85, U+1EA0-1EF9, U+20A3-20A4, U+20A7, U+20AB;
}
@font-face {
   font-family:"Open Sans";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/opensans/font_cyrillic.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/opensans/font_cyrillic.woff") format("woff");
   unicode-range: U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
   font-family:"Open Sans";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/opensans/font_others.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/opensans/font_others.woff") format("woff");
   unicode-range: U+2BC, U+2C7, U+2C9, U+2D8-2D9, U+2DB, U+2DD, U+2F3, U+300-301, U+303, U+309, U+30F, U+323, U+1F4D, U+2070, U+2075-2079, U+207F, U+2105, U+2113, U+2120, U+2122, U+2126, U+212E, U+215B-215E, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB00-FB04, U+FEFF, U+FFFC-FFFD;
}
@font-face {
   font-family:"Open Sans";
   font-weight:700;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/opensansbold/font_greek.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/opensansbold/font_greek.woff") format("woff");
   unicode-range: U+384-38A, U+38C, U+38E-3A1, U+3A3-3CE, U+3D1-3D2, U+3D6;
}
@font-face {
   font-family:"Open Sans";
   font-weight:700;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/opensansbold/font_cyrillic_ext.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/opensansbold/font_cyrillic_ext.woff") format("woff");
   unicode-range: U+460-486, U+488-48F, U+492-4AF, U+4B2-513;
}
@font-face {
   font-family:"Open Sans";
   font-weight:700;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/opensansbold/font_latin.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/opensansbold/font_latin.woff") format("woff");
   unicode-range: U+20-7E, U+A0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+2000-200B, U+2013-2015, U+2017-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+203C, U+2044, U+2074, U+20AC, U+2212;
}
@font-face {
   font-family:"Open Sans";
   font-weight:700;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/opensansbold/font_latin_ext.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/opensansbold/font_latin_ext.woff") format("woff");
   unicode-range: U+100-130, U+132-151, U+154-17F, U+192, U+1A0-1A1, U+1AF-1B0, U+1F0, U+1FA-1FF, U+218-21B, U+237, U+1E00-1E01, U+1E3E-1E3F, U+1E80-1E85, U+1EA0-1EF9, U+20A3-20A4, U+20A7, U+20AB;
}
@font-face {
   font-family:"Open Sans";
   font-weight:700;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/opensansbold/font_cyrillic.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/opensansbold/font_cyrillic.woff") format("woff");
   unicode-range: U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
   font-family:"Open Sans";
   font-weight:700;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/opensansbold/font_others.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/opensansbold/font_others.woff") format("woff");
   unicode-range: U+2BC, U+2C7, U+2C9, U+2D8-2D9, U+2DB, U+2DD, U+2F3, U+300-301, U+303, U+309, U+30F, U+323, U+1F4D, U+2070, U+2075-2079, U+207F, U+2105, U+2113, U+2120, U+2122, U+2126, U+212E, U+215B-215E, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB00-FB04, U+FEFF, U+FFFC-FFFD;
}
.zppage-template{position:relative;width:100%}.zpelem-container{width:100%;display:flex;min-height:20px;flex-flow:column}@keyframes zp-menu-slide-in{0%{translate:0-100%;opacity:.6}to{translate:0 0;opacity:1}}@keyframes zp-overlap-sticky-reveal{0%{translate:0-100%;opacity:0}to{translate:0 0;opacity:1}}.zpheader-container{width:100%;--local-bg-color:var(--default-bg-color);--local-border-color:var(--default-border-color);--zp-overlap-hide-duration:0.15s;--zp-overlap-reveal-duration:0.45s}.zpheader-container.highlight-container{--local-bg-color:var(--highlight-bg-color);--local-border-color:var(--highlight-border-color)}header .zpelement:not(.zpmm .zpelement),header.zpelement{margin-block-start:0}.zpcontainer-overlap{position:fixed;width:100%;top:0;z-index:50;min-height:var(--zp-overlap-measured-height, max-content)}.zppage-template>.zpcontainer-overlap[data-header-scroll-behavior=fixed],.zppage-template>.zpcontainer-overlap[data-header-scroll-behavior=sticky]:not([data-scrolled=true]){position:absolute;inset-block-start:0;inset-inline-start:0;inset-inline-end:0}.zppage-template>.zpcontainer-overlap[data-header-scroll-behavior=sticky][data-scrolled=true]{position:fixed;inset-block-start:0;inset-inline-start:0;inset-inline-end:0;background-color:transparent;z-index:50}.zppage-template:has(>.zpcontainer-overlap){--zp-overlap-offset:var(--zp-overlap-height, 0px);--zp-slider-content-offset:var(--zp-overlap-height, 0px)}.zppage-template>.zpcontainer-overlap+.zpelem-container>.zpcontainer-fluid>.zpelem-container:first-of-type,.zppage-template>.zpcontainer-overlap+.zpelem-container>.zpcontainer-fluid>.zpelement:first-of-type,.zppage-template>.zpcontainer-overlap+.zpelem-container>.zpcontainer-fluid>.zpsection:first-of-type,.zppage-template>.zpcontainer-overlap+.zpelem-container>.zpelem-container:first-of-type,.zppage-template>.zpcontainer-overlap+.zpelem-container>.zpelement:first-of-type,.zppage-template>.zpcontainer-overlap+.zpelem-container>.zpsection:first-of-type{--zp-overlap-bg-extend:var(--zp-overlap-offset, 0px);padding-block-start:calc(var(--bg-layer-wrapper-padding-top, 0px) + var(--zp-overlap-offset, 0px));box-sizing:border-box}.zppage-template>.zpcontainer-overlap+.zpelem-container>.zpcontainer-fluid>.zpelem-slider:first-of-type .zpslider-content-inner,.zppage-template>.zpcontainer-overlap+.zpelem-container>.zpelem-slider:first-of-type .zpslider-content-inner,.zppage-template>.zpcontainer-overlap+.zpelem-container>[data-element-type=slider]:first-of-type .zpslider-content-inner{padding-block-start:var(--zp-slider-content-offset, 0px)}.zpheader-container[data-header-scroll-behavior=sticky]:not(.zpcontainer-overlap):not([data-sticky-header-content=menu-only]){position:sticky;inset-block-start:0;z-index:50}.zpheader-container[data-header-scroll-behavior=sticky]:not(.zpcontainer-overlap)[data-sticky-header-content=menu-only]{position:relative;z-index:50}.zpheader-container[data-header-scroll-behavior=sticky]:not(.zpcontainer-overlap)[data-sticky-header-content=menu-only]>:has(.zpelem-menu){position:static}.zpheader-container[data-header-scroll-behavior=sticky]:not(.zpcontainer-overlap)[data-sticky-header-content=menu-only][data-scrolled=true]>:has(.zpelem-menu){position:fixed;inset-block-start:0;inset-inline-start:0;inset-inline-end:0;z-index:50;animation:zp-menu-slide-in .3s ease-out both}.zpheader-container[data-header-scroll-behavior=sticky]{--zp-sticky-header-bg-color:color-mix(in srgb, var(--local-bg-color) 95%, transparent)}.zpheader-container[data-header-scroll-behavior=sticky]:not([data-sticky-header-content=menu-only]){transition:background-color .3s ease}.zpheader-container[data-header-scroll-behavior=sticky]:not([data-sticky-header-content=menu-only])[data-scrolled=true]{background-color:var(--zp-sticky-header-bg-color)}.zpheader-container[data-header-scroll-behavior=sticky][data-sticky-header-content=menu-only]>:has(.zpelem-menu){transition:background-color .3s ease-out}.zpheader-container[data-header-scroll-behavior=sticky][data-sticky-header-content=menu-only][data-scrolled=true]>:has(.zpelem-menu){background-color:var(--zp-sticky-header-bg-color)}.zpheader-container[data-sticky-header-content=menu-only]>:not(:has(.zpelem-menu)){overflow:hidden;max-height:300px;opacity:1;transition:max-height .35s ease-in-out,opacity .3s ease-in-out,padding-block .35s ease-in-out,margin-block .35s ease-in-out;will-change:max-height,opacity}.zpheader-container[data-sticky-header-content=menu-only][data-scrolled=true]>:not(:has(.zpelem-menu)){max-height:0;opacity:0;pointer-events:none;padding-block:0;margin-block:0}.zpheader-container.zpcontainer-overlap[data-header-scroll-behavior=sticky][data-sticky-phase=hiding]{opacity:0;pointer-events:none;transition:opacity var(--zp-overlap-hide-duration) ease-out}.zpheader-container.zpcontainer-overlap[data-header-scroll-behavior=sticky][data-sticky-phase=sticky]{opacity:1}.zpheader-container.zpcontainer-overlap[data-header-scroll-behavior=sticky]:not([data-sticky-header-content=menu-only])[data-sticky-phase=sticky][data-scrolled=true]{animation:zp-overlap-sticky-reveal var(--zp-overlap-reveal-duration) ease-out both}.zpheader-container.zpcontainer-overlap[data-sticky-header-content=menu-only][data-sticky-phase=sticky][data-scrolled=true]>:has(.zpelem-menu){position:fixed;inset-block-start:0;inset-inline-start:0;inset-inline-end:0;z-index:50;animation:zp-overlap-sticky-reveal var(--zp-overlap-reveal-duration) ease-out both}.zpheader-container.zpcontainer-overlap[data-sticky-header-content=menu-only][data-scrolled=true]{background-color:transparent!important;background-image:none!important}.zpheader-container.zpcontainer-overlap[data-sticky-header-content=menu-only]>:not(:has(.zpelem-menu)){transition:none}.zpheader-container[data-sticky-header-content=menu-only]>:has(.zpelem-menu){will-change:auto}.default-container,.highlight-container{--local-code-snippet-box-shadow-color:#0f0f0f}.default-container{--local-code-snippet-bg-color:var(--default-bg-color);--local-code-snippet-border-color:var(--default-border-color)}.highlight-container{--local-code-snippet-bg-color:var(--highlight-bg-color);--local-code-snippet-border-color:var(--highlight-border-color)}.zpelem-code-snippet{width:100%;--local-bg-color:var(--local-code-snippet-bg-color, var(--default-bg-color));--local-border-color:var(--local-code-snippet-border-color, var(--default-border-color));--local-box-shadow-color:var(--local-code-snippet-box-shadow-color, #0f0f0f)}.zpelem-code-snippet.zpcode-snippet-align-left{align-self:flex-start;margin-inline-end:auto}.zpelem-code-snippet.zpcode-snippet-align-center{align-self:center;margin-inline:auto}.zpelem-code-snippet.zpcode-snippet-align-right{align-self:flex-end;margin-inline-start:auto}.zpelem-code-snippet.zpcode-snippet-align-none{align-self:stretch;margin-inline:0}.zpcode-snippet{width:100%}.zpcode-snippet-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:100%;min-height:200px;padding:24px 12px;box-sizing:border-box;text-align:center}.zpcode-snippet-placeholder__icon{display:block;flex-shrink:0}.zpcode-snippet-placeholder__content{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}.zpcode-snippet-placeholder__title{margin:0;width:100%;font-size:24px;font-weight:600;line-height:32px;color:var(--default-text-color)}.zpcode-snippet-placeholder__edit{display:inline-block;font-size:14px;font-weight:500;line-height:22px;color:var(--default-link-color);cursor:pointer}.zpcode-snippet-placeholder__edit:focus,.zpcode-snippet-placeholder__edit:hover{text-decoration:underline;outline:0}@media all and (min-width:768px) and (max-width:991px){.zpelem-code-snippet.zpcode-snippet-align-tablet-left{align-self:flex-start;margin-inline-end:auto;margin-inline-start:0}.zpelem-code-snippet.zpcode-snippet-align-tablet-center{align-self:center;margin-inline:auto}.zpelem-code-snippet.zpcode-snippet-align-tablet-right{align-self:flex-end;margin-inline-start:auto;margin-inline-end:0}.zpelem-code-snippet.zpcode-snippet-align-tablet-none{align-self:stretch;margin-inline:0}}@media all and (max-width:767px){.zpelem-code-snippet.zpcode-snippet-align-mobile-left{align-self:flex-start;margin-inline-end:auto;margin-inline-start:0}.zpelem-code-snippet.zpcode-snippet-align-mobile-center{align-self:center;margin-inline:auto}.zpelem-code-snippet.zpcode-snippet-align-mobile-right{align-self:flex-end;margin-inline-start:auto;margin-inline-end:0}.zpelem-code-snippet.zpcode-snippet-align-mobile-none{align-self:stretch;margin-inline:0}}
/* BEGIN zs-custom-css */
/* ============================================================
   01 · CUSTOM CODE · CSS — La Última Gota
   Settings → Custom Code → Custom CSS Editor → replace everything with this file.
   ============================================================ */
/* ————— La Última Gota — shared system (V5 Spatial refinada + Híbrido V2×V5) —————
   Ground: cellar dark. Ink: bone. One accent: wine, used as a trace, never a flood.
   Type: Newsreader (a face drawn for long-form news reading) + IBM Plex Mono for labels. */
:root{
  --ground:#0c0a09; --ground-2:#110e0c; --ground-3:#171310;
  --bone:#ece6da; --bone-dim:#aaa296; --bone-faint:#878075;
  --wine:#8f1d31; --wine-hi:#a6283e; --wine-ink:#d05a6e; --err:#e58a98;
  --water:#8fb0bb;
  --hair:rgba(236,230,218,.13); --hair-2:rgba(236,230,218,.07);
  --serif:'Newsreader','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Code',Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --grade:saturate(.74) contrast(1.05) brightness(.9);
  --gutter:clamp(1rem,4vw,4rem); --nav-h:4.5rem;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{background:var(--ground);overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
body{background:var(--ground);color:var(--bone);font-family:var(--serif);font-size:1.0625rem;line-height:1.6;
  font-optical-sizing:auto;overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--wine);color:var(--bone)}
:focus-visible{outline:1px solid var(--wine-ink);outline-offset:5px}
[id]{scroll-margin-top:var(--nav-h)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:var(--gutter);top:-5rem;z-index:200;background:var(--bone);color:var(--ground);padding:.75rem 1.1rem;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-decoration:none;transition:top .4s var(--ease)}
.skip:focus{top:1rem}

.wrap{max-width:1320px;margin:0 auto;padding-inline:var(--gutter)}
.micro{font-family:var(--mono);font-size:.6875rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-faint)}
h2{font-weight:300;line-height:1.02;letter-spacing:-.018em;font-size:clamp(2.5rem,1.3rem + 5.2vw,6.6rem)}
h2 em,h3 em{font-style:italic}
.kick{margin-bottom:2.2rem;display:flex;align-items:center;gap:1rem}
.kick::before{content:"";width:2.2rem;height:1px;background:var(--wine-ink)}

/* ————— scroll progress ————— */
.pline{position:fixed;top:0;left:0;right:0;height:2px;z-index:90;pointer-events:none}
.pline i{display:block;height:100%;background:var(--wine-ink);transform:scaleX(0);transform-origin:left}

/* ————— nav ————— */
.nav{position:fixed;inset:0 0 auto;z-index:80;height:var(--nav-h);display:flex;align-items:center;gap:2rem;padding-inline:var(--gutter);
  transition:transform .7s var(--ease)}
.nav::before{content:"";position:absolute;inset:0 0 -2.5rem;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(12,10,9,.94),rgba(12,10,9,.6) 60%,rgba(12,10,9,0));opacity:0;transition:opacity .5s}
.nav.solid::before{opacity:1}
.nav.hide{transform:translateY(-105%)}
.nav .mark{font-style:italic;font-size:1.125rem;letter-spacing:.005em;text-decoration:none;white-space:nowrap}
.nav .mark i{font-style:normal;color:var(--wine-ink)}
.nav .links{margin-left:auto;display:flex;align-items:center;gap:clamp(1.1rem,2.2vw,2.2rem)}
.nav .links a{font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  color:var(--bone-dim);position:relative;padding:.5rem 0;transition:color .35s}
.nav .links a::after{content:"";position:absolute;left:0;right:0;bottom:.15rem;height:1px;background:var(--wine-ink);
  transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.nav .links a:hover,.nav .links a[aria-current="true"]{color:var(--bone)}
.nav .links a:hover::after,.nav .links a[aria-current="true"]::after{transform:scaleX(1);transform-origin:left}
.nav .links a.cta{border:1px solid var(--hair);border-radius:999px;padding:.6rem 1.1rem;color:var(--bone);transition:background .4s var(--ease),border-color .4s}
.nav .links a.cta::after{display:none}
.nav .links a.cta:hover{background:var(--wine);border-color:var(--wine)}
.menu-btn{display:none;margin-left:auto;align-items:center;gap:.8rem;background:none;border:0;cursor:pointer;min-height:44px;padding:0 .2rem;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase}
.menu-btn .bars{width:22px;height:8px;position:relative}
.menu-btn .bars::before,.menu-btn .bars::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--bone);transition:transform .5s var(--ease)}
.menu-btn .bars::before{top:0}.menu-btn .bars::after{bottom:0}
body.menu-open .menu-btn .bars::before{transform:translateY(3.5px) rotate(45deg)}
body.menu-open .menu-btn .bars::after{transform:translateY(-3.5px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:75;background:var(--ground);display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--nav-h) + 6vh) var(--gutter) 2.5rem;clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .8s var(--ease),visibility 0s .8s}
body.menu-open .menu{clip-path:inset(0);visibility:visible;transition:clip-path .8s var(--ease),visibility 0s}
.menu ol{list-style:none;display:grid;gap:.4rem}
.menu ol a{display:flex;align-items:baseline;gap:1rem;text-decoration:none;font-weight:300;font-size:clamp(2.2rem,10vw,3.8rem);line-height:1.15;
  opacity:0;transform:translateY(1.2rem);transition:opacity .5s,transform .5s}
.menu ol a .micro{min-width:2.4rem}
body.menu-open .menu ol a{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(.18s + var(--i)*60ms)}
.menu .foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
@media (max-width:900px){.nav .links{display:none}.menu-btn{display:inline-flex}}

/* ————— reveals (only hidden once JS is confirmed) ————— */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.js .rv.in{opacity:1;transform:none}
.lines .ln{display:block;overflow:clip;padding-block:.14em .09em;margin-block:-.14em -.09em}
.lines .ln>span{display:block}
.js .lines .ln>span{transform:translateY(108%);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i,0)*110ms)}
.js .lines.in .ln>span{transform:none}

/* ————— plates: small windows onto the valley; frame opens, image settles, inner image drifts with scroll ————— */
.plate{position:relative}
.plate .ph{position:relative;overflow:clip;background:var(--ground-3)}
.plate .ph::after{content:"";position:absolute;inset:0;border:1px solid var(--hair);pointer-events:none}
.plate img{width:100%;height:116%;margin-top:-8%;object-fit:cover;filter:var(--grade);transition:filter .9s var(--ease)}
.js .plate .ph{clip-path:inset(14% 10% 14% 10%);transition:clip-path 1.5s var(--ease)}
.js .plate img{scale:1.16;transition:scale 2s var(--ease),filter .9s var(--ease)}
.js .plate.in .ph{clip-path:inset(0)}
.js .plate.in img{scale:1}
.plate figcaption{margin-top:.9rem}
a.plate:hover img,.voice:hover img{filter:saturate(.95) contrast(1.04) brightness(.98)}

/* ————— giant outlined chapter glyphs ————— */
.glyph{position:absolute;z-index:0;font-weight:300;line-height:.8;font-size:clamp(13rem,34vw,32rem);pointer-events:none;user-select:none;
  color:transparent;-webkit-text-stroke:1px rgba(236,230,218,.075)}
@supports not (-webkit-text-stroke:1px red){.glyph{color:rgba(236,230,218,.04)}}

/* ————— wine marks — traces, not blood ————— */
.winemark{position:relative;pointer-events:none}
.winemark svg{width:100%;height:auto;overflow:visible}
.winemark .tr{fill:none;stroke-linecap:round}
.js .winemark .tr{stroke-dasharray:var(--len) var(--len);stroke-dashoffset:var(--len)}
.js .winemark.in .tr{animation:draw 3s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d,0s)}
.winemark .t1{stroke:#b05a6e;opacity:.6}.winemark .t2{stroke:#9e3d54;opacity:.46}
.winemark .t3{stroke:#c98a97;opacity:.32}.winemark .t4{stroke:#8a2e44;opacity:.55}
.winemark figcaption{margin-top:1rem}
.stain-mark.in .wavegroup{animation:wdrift 24s ease-in-out 3.2s infinite alternate}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes wdrift{to{transform:translateX(-14px)}}

/* ————— prólogo ————— */
.prologue{padding-block:28vh;position:relative}
.prologue .inner{max-width:48rem;margin:0 auto;padding-inline:var(--gutter)}
.prologue .prose{font-size:clamp(1.45rem,1rem + 1.7vw,2.3rem);line-height:1.48;font-weight:300;letter-spacing:-.005em}
.js .prologue .word{opacity:.16}
.prologue .close{margin-top:4.5rem;font-style:italic;font-size:clamp(1.2rem,1rem + .8vw,1.65rem);color:var(--wine-ink);max-width:34ch}

/* ————— mosaico ————— */
.mosaic{padding-block:24vh 22vh;position:relative;background:var(--ground-2);overflow:clip}
.mosaic .glyph{right:-2vw;top:4vh;font-size:clamp(10rem,26vw,24rem)}
.mosaic .head{position:relative;z-index:1}
.voices{position:relative;z-index:1;margin-top:13vh;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(3rem,7vw,7rem) clamp(1.5rem,4vw,4.5rem)}
.voice .ph{aspect-ratio:4/5}
.voice h3{font-size:clamp(1.2rem,1.05rem + .4vw,1.45rem);font-style:italic;font-weight:400;margin:1.5rem 0 .4rem;line-height:1.25}
.voice p{color:var(--bone-dim);font-size:1rem;max-width:30ch}
.voice .micro{display:block;margin-top:1.2rem}
.mosaic .closing{position:relative;z-index:1;margin-top:18vh;font-size:clamp(1.4rem,1rem + 1.7vw,2.4rem);font-style:italic;font-weight:300;max-width:28ch;line-height:1.3}

/* ————— autor ————— */
.author{padding-block:26vh;position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,7vw,8rem);align-items:center}
.author .glyph{left:-3vw;bottom:2vh;font-size:clamp(10rem,24vw,22rem)}
.author .plate{width:min(100%,24rem);justify-self:end;position:relative;z-index:1}
.author .ph{aspect-ratio:3/4}
.author .bio{display:flex;flex-direction:column;gap:1.5rem;position:relative;z-index:1}
.author .name{font-size:clamp(2.1rem,1.3rem + 2.8vw,3.8rem);font-weight:300;line-height:1.02;letter-spacing:-.015em}
.author p{max-width:54ch;color:var(--bone-dim)}
.author p b{color:var(--bone);font-weight:500}
.author p cite{font-style:italic;color:var(--bone)}
.author blockquote{font-style:italic;font-weight:300;font-size:clamp(1.2rem,1rem + .7vw,1.55rem);line-height:1.45;color:var(--bone);
  border-left:1px solid var(--wine-ink);padding-left:1.5rem;margin-top:.6rem;max-width:40ch}

/* ————— invertir ————— */
.invest{padding-block:24vh 16vh;position:relative;border-top:1px solid var(--hair-2)}
.invest .stain-mark{width:clamp(260px,38vw,540px);margin-bottom:5rem}
.invest h2{max-width:17ch}
.invest .lede{max-width:52ch;color:var(--bone-dim);margin-top:2.2rem;font-size:1.15rem}
.invest .lede b{color:var(--bone);font-weight:500}
.invest .lede b.w{color:var(--wine-ink);font-style:italic;font-weight:400}
.amount{margin-top:12vh;padding-top:2rem;border-top:1px solid var(--hair);display:flex;align-items:baseline;gap:1rem 1.8rem;flex-wrap:wrap}
.amount .fig{font-weight:300;line-height:.95;letter-spacing:-.03em;font-size:clamp(3.4rem,1.4rem + 8vw,9rem);font-variant-numeric:lining-nums tabular-nums}
.amount .fig .cur{color:var(--wine-ink)}
.tiers{margin-top:10vh;list-style:none;border-top:1px solid var(--hair)}
.tier{position:relative;display:grid;grid-template-columns:minmax(8rem,1fr) minmax(8rem,1fr) minmax(0,3fr) auto;gap:1rem clamp(1.5rem,3vw,3rem);
  align-items:baseline;padding:2.3rem 1rem 2.3rem 0;border-bottom:1px solid var(--hair)}
.tier::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(143,29,49,.16),rgba(143,29,49,0) 70%);
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.tier:hover::before,.tier:focus-within::before{transform:scaleX(1)}
.tier .name{font-family:var(--mono);font-size:.75rem;letter-spacing:.22em;text-transform:uppercase}
.tier .amt{font-size:1.6rem;font-weight:300;font-variant-numeric:lining-nums tabular-nums;line-height:1}
.tier .amt small{display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-faint);margin-bottom:.4rem}
.tier ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem 2rem}
.tier li{font-size:.97rem;color:var(--bone-dim);padding-left:1rem;position:relative;line-height:1.45}
.tier li::before{content:"";position:absolute;left:0;top:.6em;width:4px;height:4px;border-radius:50%;background:var(--wine-ink)}
.pick{position:relative;display:inline-flex;align-items:center;gap:.6rem;min-height:44px;font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;color:var(--bone)}
.pick .arr{transition:transform .5s var(--ease)}
.tier:hover .pick .arr,.pick:focus-visible .arr{transform:translateX(5px)}
.stats{margin-top:12vh;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--hair)}
.stat{padding:2rem 1.6rem 0 0}
.stat+.stat{padding-left:1.6rem;border-left:1px solid var(--hair-2)}
.stat b{display:block;font-weight:300;font-size:clamp(1.8rem,1.3rem + 1.4vw,2.6rem);line-height:1.1;font-variant-numeric:lining-nums tabular-nums}
.stat span{display:block;margin-top:.5rem;font-size:.92rem;color:var(--bone-dim);max-width:24ch}

/* ————— buttons ————— */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.8rem;min-height:48px;padding:1rem 1.7rem;border-radius:999px;cursor:pointer;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  color:var(--bone);background:transparent;border:1px solid var(--hair);transition:background .45s var(--ease),border-color .45s var(--ease)}
.btn:hover{border-color:var(--bone-dim)}
.btn.solid{background:var(--wine);border-color:var(--wine)}
.btn.solid:hover{background:var(--wine-hi);border-color:var(--wine-hi)}
.btn .arr{transition:transform .5s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.ctas{display:flex;gap:1rem;flex-wrap:wrap;margin-top:3rem}

/* ————— contacto ————— */
.join{padding-block:22vh 20vh;border-top:1px solid var(--hair-2);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(3rem,7vw,8rem)}
.join h2{font-size:clamp(2.3rem,1.3rem + 3.6vw,4.8rem)}
.join .note{margin-top:2rem;color:var(--bone-dim);max-width:38ch}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.2rem 2rem;align-content:start}
.field{display:grid;gap:.55rem;align-content:start}
.field.full{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim)}
.field label .opt{color:var(--bone-faint);letter-spacing:.1em;text-transform:none}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:1.125rem;color:var(--bone);background:transparent;
  border:0;border-bottom:1px solid var(--hair);border-radius:0;padding:.65rem 0;transition:border-color .35s,box-shadow .35s;appearance:none}
.field textarea{resize:vertical;min-height:7.5rem;line-height:1.5}
.field select{cursor:pointer;padding-right:2rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23aaa296'/%3E%3C/svg%3E") right .2rem center no-repeat}
.field select option{background:var(--ground-2);color:var(--bone)}
.field input:hover,.field select:hover,.field textarea:hover{border-bottom-color:var(--bone-faint)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--wine-ink);box-shadow:0 1px 0 var(--wine-ink)}
.field .msg{display:none;font-size:.9rem;color:var(--err)}
.field.err .msg{display:block}
.field.err input{border-bottom-color:var(--err)}
.form .send{grid-column:1/-1;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-top:.6rem}
.form .send p{font-size:.92rem;color:var(--bone-faint);max-width:36ch}
.done{align-self:start;border-top:1px solid var(--wine-ink);padding-top:2rem}
.done h3{font-weight:300;font-size:clamp(1.8rem,1.3rem + 1.6vw,2.6rem);line-height:1.1}
.done p{margin-top:1rem;color:var(--bone-dim);max-width:44ch}
.done p b{color:var(--bone);font-weight:500}
.done:focus{outline:none}

/* ————— footer ————— */
footer{padding-block:20vh 3rem;border-top:1px solid var(--hair-2);position:relative}
footer .fin{font-style:italic;font-weight:300;font-size:clamp(1.8rem,1.1rem + 3vw,3.6rem);line-height:1.15;max-width:22ch}
footer .fin span{color:var(--wine-ink)}
footer .base{margin-top:14vh;display:flex;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;border-top:1px solid var(--hair-2);padding-top:1.6rem}
footer .base a{text-decoration:none}
footer .base a:hover{color:var(--bone)}

/* ————— responsive ————— */
@media (max-width:900px){
  .voices{grid-template-columns:repeat(2,minmax(0,1fr))}
  .author{grid-template-columns:1fr;padding-block:18vh}
  .author .plate{justify-self:start;width:min(78vw,22rem)}
  .tier{grid-template-columns:1fr auto;padding-right:0}
  .tier ul{grid-column:1/-1;grid-template-columns:1fr}
  .tier .pick{grid-column:1/-1;justify-self:start}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(3){padding-left:0;border-left:0}
  .stat{padding-bottom:1.6rem}
  .join{grid-template-columns:1fr}
}
@media (max-width:560px){
  .voices{grid-template-columns:1fr}
  .voice .ph{aspect-ratio:4/3}
  .form{grid-template-columns:1fr}
  .prologue{padding-block:20vh}
}

/* ————— reduced motion: composed, static, nothing hidden ————— */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv,.js .lines .ln>span{opacity:1;transform:none}
  .js .plate .ph{clip-path:none}.js .plate img{scale:1}
  .js .prologue .word{opacity:1}
  .js .winemark .tr{stroke-dashoffset:0}
}

/* ══════════ which version is showing (set by Header Code, swapped by the toggle) ══════════ */
html:not([data-ulg="v5"]) [data-ulg-v="v5"],
html[data-ulg="v5"] [data-ulg-v="hibrido"]{display:none!important}

/* ══════════ Zoho Sites wrappers ══════════ */
html,body{background:var(--ground)!important;color:var(--bone)}
body{font-family:var(--serif)!important}
/* hide the theme's own header + footer unless they hold one of our snippets */
:is(.zpheader-style-01,.theme-mobile-header-style-03,.theme-mobile-header-fixed,[data-header="zptheme-data-header"],
  .zpfooter,.theme-footer,#zpfooter,header.theme-header):not(:has(.ulg-snippet)){display:none!important}
.zpsection,.theme-content-area,.theme-content-container,.theme-content-area-inner,#thememaincontent{
  background-color:transparent!important;background-image:none!important;overflow:visible!important}
/* flatten every slot / section holding a snippet. No transform/filter/overflow on ancestors:
   the nav must stay fixed and the scroll scenes must stay sticky. */
.zppage-template:has(.ulg-snippet),
.zppage-template > :has(.ulg-snippet),
.zppage-template > :has(.ulg-snippet) [class*="zp"]:has(.ulg-snippet),
.zpsection:has(.ulg-snippet),
.zpsection:has(.ulg-snippet) [class*="zp"]:has(.ulg-snippet){
  position:static!important;padding:0!important;margin:0!important;min-height:0!important;height:auto!important;
  max-width:none!important;width:100%!important;background:transparent!important;border:0!important;box-shadow:none!important;
  overflow:visible!important;transform:none!important;filter:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  clip-path:none!important;display:block!important}
.zpsection:has(.ulg-snippet) .zpshape-divider{display:none!important}
.ulg-snippet{display:block;width:100%;font-size:1.0625rem;line-height:1.6;color:var(--bone)}
.ulg-snippet h1,.ulg-snippet h2,.ulg-snippet h3,.ulg-snippet p,.ulg-snippet ul,.ulg-snippet figure,.ulg-snippet blockquote{margin:0;color:inherit;font-family:inherit}
.ulg-snippet a{color:inherit}

/* ══════════ version toggle (04-snippet-header) ══════════ */
.ulg-versions{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:95;display:flex;gap:3px;padding:4px;border-radius:999px;
  background:rgba(12,10,9,.9);border:1px solid rgba(236,230,218,.14);box-shadow:0 8px 30px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:calc(100vw - 32px)}
.ulg-versions button{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;cursor:pointer;
  color:rgba(236,230,218,.62);background:transparent;border:0;border-radius:999px;padding:13px 16px;min-height:40px;transition:color .3s,background .3s}
.ulg-versions button:hover{color:var(--bone)}
.ulg-versions button[aria-pressed="true"]{color:var(--bone);background:var(--wine)}

/* END zs-custom-css */