:root {
    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-300: #93c5fd;
    --color-primary-400: #60a5fa;
    --color-primary-500: #3b82f6;
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary-800: #1e40af;
    --color-primary-900: #1e3a8a;
    --color-primary-950: #172554;
    --color-secondary-50: #f0f9ff;
    --color-secondary-100: #e0f2fe;
    --color-secondary-200: #bae6fd;
    --color-secondary-300: #7dd3fc;
    --color-secondary-400: #38bdf8;
    --color-secondary-500: #0ea5e9;
    --color-secondary-600: #0284c7;
    --color-secondary-700: #0369a1;
    --color-secondary-800: #075985;
    --color-secondary-900: #0c4a6e;
    --color-secondary-950: #082f49;
    --color-accent-50: #fdf4ff;
    --color-accent-100: #fae8ff;
    --color-accent-200: #f5d0fe;
    --color-accent-300: #f0abfc;
    --color-accent-400: #e879f9;
    --color-accent-500: #d946ef;
    --color-accent-600: #c026d3;
    --color-accent-700: #a21caf;
    --color-accent-800: #86198f;
    --color-accent-900: #701a75;
    --color-accent-950: #4a044e;
    --color-accent-50: #fdfcf2;
    --color-accent-100: #faf8e0;
    --color-accent-200: #fdf7ba;
    --color-accent-300: #fbf288;
    --color-accent-400: #f9ec52;
    --color-accent-500: #f8e725;
    --color-accent-600: #caba06;
    --color-accent-700: #998d05;
    --color-accent-800: #675f03;
    --color-accent-900: #383300;
    --color-accent-950: #1a1700;
    --color-neutral-0: #ffffff;
    --color-neutral-50: #f9fafb;
    --color-neutral-100: #f3f4f6;
    --color-neutral-200: #e5e7eb;
    --color-neutral-300: #d1d5db;
    --color-neutral-400: #9ca3af;
    --color-neutral-500: #6b7280;
    --color-neutral-600: #4b5563;
    --color-neutral-700: #374151;
    --color-neutral-800: #1f2937;
    --color-neutral-900: #111827;
    --color-neutral-950: #030712;
    --color-success-50: #f0fdf4;
    --color-success-500: #22c55e;
    --color-success-600: #16a34a;
    --color-success-700: #15803d;
    --color-warning-50: #fffbeb;
    --color-warning-500: #f59e0b;
    --color-warning-600: #d97706;
    --color-warning-700: #b45309;
    --color-error-50: #fef2f2;
    --color-error-500: #ef4444;
    --color-error-600: #dc2626;
    --color-error-700: #b91c1c;
    --color-info-50: #f0f9ff;
    --color-info-500: #06b6d4;
    --color-info-600: #0891b2;
    --color-info-700: #0e7490;
    --color-text-primary: var(--color-neutral-900);
    --color-text-secondary: var(--color-neutral-700);
    --color-text-muted: var(--color-neutral-500);
    --color-text-inverse: var(--color-neutral-0);
    --color-bg-primary: var(--color-neutral-0);
    --color-bg-secondary: var(--color-neutral-50);
    --color-bg-muted: var(--color-neutral-100);
    --color-bg-inverse: var(--color-neutral-900);
    --color-border-primary: var(--color-neutral-200);
    --color-border-secondary: var(--color-neutral-300);
    --color-border-focus: var(--color-primary-500);
    --color-surface-raised: var(--color-neutral-0);
    --color-surface-sunken: var(--color-neutral-50);
    --font-family-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --font-weight-thin: 100;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
    --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --font-size-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
    --font-size-3xl: clamp(1.875rem, 1.6rem + 1.375vw, 2.25rem);
    --font-size-4xl: clamp(2.25rem, 1.9rem + 1.75vw, 3rem);
    --font-size-5xl: clamp(3rem, 2.4rem + 3vw, 4rem);
    --font-size-6xl: clamp(3.75rem, 3rem + 3.75vw, 5rem);
    --font-size-heading-xs: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    --font-size-heading-sm: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
    --font-size-heading-base: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --font-size-heading-lg: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --font-size-heading-xl: clamp(2rem, 1.6rem + 2vw, 2.5rem);
    --font-size-heading-2xl: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
    --font-size-heading-3xl: clamp(3.5rem, 2.8rem + 3.5vw, 4.5rem);
    --font-size-heading-4xl: clamp(4.5rem, 3.5rem + 5vw, 6rem);
    --font-size-heading-5xl: clamp(6rem, 4.5rem + 7.5vw, 8rem);
    --font-size-heading-6xl: clamp(8rem, 6rem + 10vw, 10rem);
    --line-height-none: 1;
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;
    --letter-spacing-tighter: -0.05em;
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0em;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;
    --space-0: 0;
    --space-px: 1px;
    --space-0-5: 0.125rem;
    --space-1: 0.25rem;
    --space-1-5: 0.375rem;
    --space-2: 0.5rem;
    --space-2-5: 0.625rem;
    --space-3: 0.75rem;
    --space-3-5: 0.875rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;
    --space-11: 2.75rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-28: 7rem;
    --space-32: 8rem;
    --space-36: 9rem;
    --space-40: 10rem;
    --space-44: 11rem;
    --space-48: 12rem;
    --space-52: 13rem;
    --space-56: 14rem;
    --space-60: 15rem;
    --space-64: 16rem;
    --space-72: 18rem;
    --space-80: 20rem;
    --space-96: 24rem;
    --space-xs: var(--space-1);
    --space-sm: var(--space-2);
    --space-md: var(--space-4);
    --space-lg: var(--space-6);
    --space-xl: var(--space-8);
    --space-2xl: var(--space-12);
    --space-3xl: var(--space-16);
    --space-4xl: var(--space-24);
    --space-xs: var(--space-1);
    --space-sm: var(--space-2);
    --space-md: var(--space-4);
    --space-lg: var(--space-6);
    --space-xl: var(--space-8);
    --space-2xl: var(--space-12);
    --space-3xl: var(--space-16);
    --space-4xl: var(--space-24);
    --space-component-padding: var(--space-4);
    --space-component-padding-sm: var(--space-3);
    --space-component-padding-lg: var(--space-6);
    --space-component-margin: var(--space-6);
    --space-section-gap: var(--space-12);
    --space-section-gap-sm: var(--space-8);
    --space-section-gap-lg: var(--space-16);
    --space-card-padding: var(--space-6);
    --space-card-gap: var(--space-4);
    --space-form-gap: var(--space-4);
    --space-nav-gap: var(--space-6);
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
    --grid-min-xs: 200px;
    --grid-min-sm: 250px;
    --grid-min-md: 300px;
    --grid-min-lg: 350px;
    --grid-min-xl: 400px;
    --grid-min-2col: 32rem;
    --grid-gap-xs: var(--space-2);
    --grid-gap-sm: var(--space-3);
    --grid-gap-md: var(--space-4);
    --grid-gap-lg: var(--space-6);
    --grid-gap-xl: var(--space-8);
    --radius-none: 0;
    --radius-sm: 0.125rem;
    --radius-base: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --duration-75: 75ms;
    --duration-100: 100ms;
    --duration-150: 150ms;
    --duration-200: 200ms;
    --duration-300: 300ms;
    --duration-500: 500ms;
    --duration-700: 700ms;
    --duration-1000: 1000ms;
    --ease-linear: linear;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)
}

@media(prefers-color-scheme: dark) {
    :root {
        --color-text-primary:var(--color-neutral-50);
        --color-text-secondary: var(--color-neutral-200);
        --color-text-muted: var(--color-neutral-400);
        --color-text-inverse: var(--color-neutral-900);
        --color-bg-primary: var(--color-neutral-950);
        --color-bg-secondary: var(--color-neutral-900);
        --color-bg-muted: var(--color-neutral-800);
        --color-bg-inverse: var(--color-neutral-50);
        --color-border-primary: var(--color-neutral-700);
        --color-border-secondary: var(--color-neutral-600);
        --color-border-focus: var(--color-primary-400);
        --color-surface-raised: var(--color-neutral-800);
        --color-surface-sunken: var(--color-neutral-900);
        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
        --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4)
    }
}

:root[data-theme=dark],.dark {
    --color-text-primary: var(--color-neutral-50);
    --color-text-secondary: var(--color-neutral-200);
    --color-text-muted: var(--color-neutral-400);
    --color-text-inverse: var(--color-neutral-900);
    --color-bg-primary: var(--color-neutral-950);
    --color-bg-secondary: var(--color-neutral-900);
    --color-bg-muted: var(--color-neutral-800);
    --color-bg-inverse: var(--color-neutral-50);
    --color-border-primary: var(--color-neutral-700);
    --color-border-secondary: var(--color-neutral-600);
    --color-border-focus: var(--color-primary-400);
    --color-surface-raised: var(--color-neutral-800);
    --color-surface-sunken: var(--color-neutral-900);
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4)
}

h1,.h1 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    margin-block-end:var(--space-lg)}

h2,.h2 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    margin-block-start:var(--space-xl);margin-block-end: var(--space-md)
}

h3,.h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    margin-block-start:var(--space-lg);margin-block-end: var(--space-sm)
}

h4,.h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    margin-block-start:var(--space-md);margin-block-end: var(--space-sm)
}

h5,.h5 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    margin-block-start:var(--space-md);margin-block-end: var(--space-xs)
}

h6,.h6 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-secondary);
    margin-block-start:var(--space-md);margin-block-end: var(--space-xs)
}

.h1,.h2,.h3,.h4,.h5,.h6 {
    margin-block-start:0;margin-block-end:0}

p {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    margin-block-end:var(--space-md);max-width: var(--content-reading-width)
}

em {
    font-style: italic
}

strong {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary)
}

a:not([class]) {
    color: var(--color-primary-600);
    text-decoration: underline;
    text-underline-offset: .125em;
    text-decoration-thickness: .0625em;
    transition: all var(--duration-150)var(--ease-out)
}

a:not([class]):hover {
    color: var(--color-primary-700);
    text-decoration-thickness: .125em
}

a:not([class]):focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: .125em;
    border-radius: var(--radius-sm)
}

@media(prefers-color-scheme: dark) {
    a:not([class]) {
        color:var(--color-primary-400)
    }

    a:not([class]):hover {
        color: var(--color-primary-300)
    }
}

:root[data-theme=dark] a:not([class]),.dark a:not([class]) {
    color: var(--color-primary-400)
}

:root[data-theme=dark] a:not([class]):hover,.dark a:not([class]):hover {
    color: var(--color-primary-300)
}

ul:not([class]),ol:not([class]) {
    margin-block-end:var(--space-md);padding-inline-start: var(--space-lg);
    max-width: var(--content-reading-width)
}

ul:not([class]) li,ol:not([class]) li {
    margin-block-end:var(--space-xs);line-height: var(--line-height-relaxed)
}

ul:not([class]) ul,ul:not([class]) ol,ol:not([class]) ul,ol:not([class]) ol {
    margin-block-start:var(--space-xs);margin-block-end: var(--space-xs)
}

dl {
    margin-block-end:var(--space-md);max-width: var(--content-reading-width)
}

dt {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-block-start:var(--space-sm)}

dd {
    margin-inline-start: var(--space-lg);
    margin-block-end:var(--space-sm);line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary)
}

blockquote {
    margin-block:var(--space-lg);margin-inline: 0;
    padding-inline-start:var(--space-lg);border-inline-start: 4px solid var(--color-border-secondary);
    font-size: var(--font-size-lg);
    font-style: italic;
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    max-width: var(--content-reading-width)
}

blockquote p {
    margin-block-end:var(--space-sm)}

blockquote p: last-child {
    margin-block-end:0
}

code {
    font-family: var(--font-family-mono);
    font-size: .875em;
    background-color: var(--color-bg-muted);
    color: var(--color-text-primary);
    padding-inline:var(--space-1);padding-block: var(--space-0-5);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-primary)
}

pre {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    background-color: var(--color-bg-muted);
    color: var(--color-text-primary);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-primary);
    overflow-x: auto;
    margin-block:var(--space-lg);max-width: 100%
}

pre code {
    background: 0 0;
    border: none;
    padding: 0;
    font-size: inherit
}

label {
    display: block;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-block-end:var(--space-xs)}

input: not([type=checkbox]):not([type=radio]),textarea,select {
    display:block;
    width: 100%;
    padding: var(--space-3);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    transition: border-color var(--duration-150)var(--ease-out)
}

input:not([type=checkbox]):not([type=radio]):focus,textarea:focus,select:focus {
    border-color: var(--color-border-focus);
    outline: 2px solid var(--color-border-focus);
    outline-offset: 0
}

textarea {
    resize: vertical;
    min-height: 6rem
}

input::-moz-placeholder,textarea::-moz-placeholder {
    color: var(--color-text-muted);
    opacity: 1
}

input::placeholder,textarea::placeholder {
    color: var(--color-text-muted);
    opacity: 1
}

figure {
    margin-block:var(--space-lg);margin-inline: 0
}

figcaption {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-align: center;
    margin-block-start:var(--space-sm);font-style: italic
}

img {
    border-radius: var(--radius-md)
}

.responsive-img {
    -o-object-fit: cover;
    object-fit: cover;
    height: 100%
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.text-large {
    font-size: var(--font-size-lg)
}

.text-small {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted)
}

.h2-bold {
    font-size: var(--font-size-heading-2xl)
}

.block {
    display: block
}

.inline {
    display: inline
}

.inline-block {
    display: inline-block
}

.inline-flex {
    display: inline-flex
}

.grid {
    display: grid
}

.inline-grid {
    display: inline-grid
}

.flex-row {
    flex-direction: row
}

.items-start {
    align-items: flex-start
}

.items-end {
    align-items: flex-end
}

.items-center {
    align-items: center
}

.items-baseline {
    align-items: baseline
}

.items-stretch {
    align-items: stretch
}

.my-6 {
    margin-block:var(--space-6)}

.my-12 {
    margin-block: var(--space-12)
}

.my-40 {
    margin-block:var(--space-40)}

.mt-0 {
    margin-block-start: var(--space-0)
}

.mb-0 {
    margin-block-end:var(--space-0)}

.mb-2 {
    margin-block-end: var(--space-2)
}

.p-0 {
    padding: var(--space-0)
}

.p-px {
    padding: var(--space-px)
}

.p-1 {
    padding: var(--space-1)
}

.p-2 {
    padding: var(--space-2)
}

.p-3 {
    padding: var(--space-3)
}

.p-4 {
    padding: var(--space-4)
}

.p-5 {
    padding: var(--space-5)
}

.p-6 {
    padding: var(--space-6)
}

.p-8 {
    padding: var(--space-8)
}

.p-10 {
    padding: var(--space-10)
}

.p-12 {
    padding: var(--space-12)
}

.p-16 {
    padding: var(--space-16)
}

.p-20 {
    padding: var(--space-20)
}

.p-24 {
    padding: var(--space-24)
}

.p-32 {
    padding: var(--space-32)
}

.px-0 {
    padding-inline:var(--space-0)}

.px-px {
    padding-inline: var(--space-px)
}

.px-1 {
    padding-inline:var(--space-1)}

.px-2 {
    padding-inline: var(--space-2)
}

.px-3 {
    padding-inline:var(--space-3)}

.px-4 {
    padding-inline: var(--space-4)
}

.px-5 {
    padding-inline:var(--space-5)}

.px-6 {
    padding-inline: var(--space-6)
}

.px-8 {
    padding-inline:var(--space-8)}

.px-10 {
    padding-inline: var(--space-10)
}

.px-12 {
    padding-inline:var(--space-12)}

.px-16 {
    padding-inline: var(--space-16)
}

.px-20 {
    padding-inline:var(--space-20)}

.px-24 {
    padding-inline: var(--space-24)
}

.px-32 {
    padding-inline:var(--space-32)}

.py-0 {
    padding-block: var(--space-0)
}

.py-px {
    padding-block:var(--space-px)}

.py-1 {
    padding-block: var(--space-1)
}

.py-2 {
    padding-block:var(--space-2)}

.py-3 {
    padding-block: var(--space-3)
}

.py-4 {
    padding-block:var(--space-4)}

.py-5 {
    padding-block: var(--space-5)
}

.py-6 {
    padding-block:var(--space-6)}

.py-8 {
    padding-block: var(--space-8)
}

.py-10 {
    padding-block:var(--space-10)}

.py-12 {
    padding-block: var(--space-12)
}

.py-16 {
    padding-block:var(--space-16)}

.py-20 {
    padding-block: var(--space-20)
}

.py-24 {
    padding-block:var(--space-24)}

.py-32 {
    padding-block: var(--space-32)
}

.p-xs {
    padding: var(--space-xs)
}

.p-sm {
    padding: var(--space-sm)
}

.p-md {
    padding: var(--space-md)
}

.p-lg {
    padding: var(--space-lg)
}

.p-xl {
    padding: var(--space-xl)
}

.p-2xl {
    padding: var(--space-2xl)
}

.my-lg {
    margin-block:var(--space-lg)}

.px-xs {
    padding-inline: var(--space-xs)
}

.px-sm {
    padding-inline:var(--space-sm)}

.px-md {
    padding-inline: var(--space-md)
}

.px-lg {
    padding-inline:var(--space-lg)}

.px-xl {
    padding-inline: var(--space-xl)
}

.px-2xl {
    padding-inline:var(--space-2xl)}

.py-xs {
    padding-block: var(--space-xs)
}

.py-sm {
    padding-block:var(--space-sm)}

.py-md {
    padding-block: var(--space-md)
}

.py-lg {
    padding-block:var(--space-lg)}

.py-xl {
    padding-block: var(--space-xl)
}

.py-2xl {
    padding-block:var(--space-2xl)}

.p-component {
    padding: var(--space-component-padding)
}

.p-component-sm {
    padding: var(--space-component-padding-sm)
}

.p-component-lg {
    padding: var(--space-component-padding-lg)
}

.p-card {
    padding: var(--space-card-padding)
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.text-justify {
    text-align: justify
}

.font-thin {
    font-weight: var(--font-weight-thin)
}

.font-semibold {
    font-weight: var(--font-weight-semibold)
}

.font-bold {
    font-weight: var(--font-weight-bold)
}

.italic {
    font-style: italic
}

.leading-tight {
    line-height: var(--line-height-tight)
}

.leading-relaxed {
    line-height: var(--line-height-relaxed)
}

.text-xs {
    font-size: var(--font-size-xs)
}

.text-sm {
    font-size: var(--font-size-sm)
}

.text-base {
    font-size: var(--font-size-base)
}

.text-lg {
    font-size: var(--font-size-lg)
}

.text-xl {
    font-size: var(--font-size-xl)
}

.text-2xl {
    font-size: var(--font-size-2xl)
}

.text-3xl {
    font-size: var(--font-size-3xl)
}

.text-4xl {
    font-size: var(--font-size-4xl)
}

.text-5xl {
    font-size: var(--font-size-5xl)
}

.text-6xl {
    font-size: var(--font-size-6xl)
}

.text-primary {
    color: var(--color-text-primary)
}

.text-secondary {
    color: var(--color-text-secondary)
}

.text-muted {
    color: var(--color-text-muted)
}

.text-inverse {
    color: var(--color-text-inverse)
}

.text-brand-primary {
    color: var(--color-primary-600)
}

.text-brand-secondary {
    color: var(--color-secondary-600)
}

.text-brand-accent {
    color: var(--color-accent-600)
}

.text-success {
    color: var(--color-success-600)
}

.text-warning {
    color: var(--color-warning-600)
}

.text-error {
    color: var(--color-error-600)
}

.text-info {
    color: var(--color-info-600)
}

.rounded-none {
    border-radius: var(--radius-none)
}

.rounded-sm {
    border-radius: var(--radius-sm)
}

.rounded {
    border-radius: var(--radius-base)
}

.rounded-md {
    border-radius: var(--radius-md)
}

.rounded-lg {
    border-radius: var(--radius-lg)
}

.rounded-xl {
    border-radius: var(--radius-xl)
}

.rounded-2xl {
    border-radius: var(--radius-2xl)
}

.rounded-3xl {
    border-radius: var(--radius-3xl)
}

.rounded-full {
    border-radius: var(--radius-full)
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.duration-75 {
    transition-duration: var(--duration-75)
}

.duration-100 {
    transition-duration: var(--duration-100)
}

.duration-150 {
    transition-duration: var(--duration-150)
}

.duration-200 {
    transition-duration: var(--duration-200)
}

.duration-300 {
    transition-duration: var(--duration-300)
}

.duration-500 {
    transition-duration: var(--duration-500)
}

.duration-700 {
    transition-duration: var(--duration-700)
}

.duration-1000 {
    transition-duration: var(--duration-1000)
}

.ease-linear {
    transition-timing-function: var(--ease-linear)
}

.ease-in {
    transition-timing-function: var(--ease-in)
}

.ease-out {
    transition-timing-function: var(--ease-out)
}

.ease-in-out {
    transition-timing-function: var(--ease-in-out)
}

.align-baseline {
    vertical-align: baseline
}

.align-top {
    vertical-align: top
}

.align-middle {
    vertical-align: middle
}

.align-bottom {
    vertical-align: bottom
}

.align-text-top {
    vertical-align: text-top
}

.align-text-bottom {
    vertical-align: text-bottom
}

.gap-0 {
    gap: var(--space-0)
}

.gap-px {
    gap: var(--space-px)
}

.gap-1 {
    gap: var(--space-1)
}

.gap-2 {
    gap: var(--space-2)
}

.gap-3 {
    gap: var(--space-3)
}

.gap-4 {
    gap: var(--space-4)
}

.gap-5 {
    gap: var(--space-5)
}

.gap-6 {
    gap: var(--space-6)
}

.gap-8 {
    gap: var(--space-8)
}

.gap-10 {
    gap: var(--space-10)
}

.gap-12 {
    gap: var(--space-12)
}

.gap-16 {
    gap: var(--space-16)
}

.gap-20 {
    gap: var(--space-20)
}

.gap-24 {
    gap: var(--space-24)
}

.gap-32 {
    gap: var(--space-32)
}

.gap-xs {
    gap: var(--space-xs)
}

.gap-sm {
    gap: var(--space-sm)
}

.gap-md {
    gap: var(--space-md)
}

.gap-lg {
    gap: var(--space-lg)
}

.gap-xl {
    gap: var(--space-xl)
}

.gap-2xl {
    gap: var(--space-2xl)
}

.gap-component {
    gap: var(--space-component-margin)
}

.gap-section {
    gap: var(--space-section-gap)
}

.gap-card {
    gap: var(--space-card-gap)
}

.gap-form {
    gap: var(--space-form-gap)
}

.gap-nav {
    gap: var(--space-nav-gap)
}

.gap-x-0 {
    -moz-column-gap: var(--space-0);
    column-gap: var(--space-0)
}

.gap-x-1 {
    -moz-column-gap: var(--space-1);
    column-gap: var(--space-1)
}

.gap-x-2 {
    -moz-column-gap: var(--space-2);
    column-gap: var(--space-2)
}

.gap-x-3 {
    -moz-column-gap: var(--space-3);
    column-gap: var(--space-3)
}

.gap-x-4 {
    -moz-column-gap: var(--space-4);
    column-gap: var(--space-4)
}

.gap-x-5 {
    -moz-column-gap: var(--space-5);
    column-gap: var(--space-5)
}

.gap-x-6 {
    -moz-column-gap: var(--space-6);
    column-gap: var(--space-6)
}

.gap-x-8 {
    -moz-column-gap: var(--space-8);
    column-gap: var(--space-8)
}

.gap-x-10 {
    -moz-column-gap: var(--space-10);
    column-gap: var(--space-10)
}

.gap-x-12 {
    -moz-column-gap: var(--space-12);
    column-gap: var(--space-12)
}

.gap-x-16 {
    -moz-column-gap: var(--space-16);
    column-gap: var(--space-16)
}

.gap-x-20 {
    -moz-column-gap: var(--space-20);
    column-gap: var(--space-20)
}

.gap-x-24 {
    -moz-column-gap: var(--space-24);
    column-gap: var(--space-24)
}

.gap-x-32 {
    -moz-column-gap: var(--space-32);
    column-gap: var(--space-32)
}

.gap-y-0 {
    row-gap: var(--space-0)
}

.gap-y-1 {
    row-gap: var(--space-1)
}

.gap-y-2 {
    row-gap: var(--space-2)
}

.gap-y-3 {
    row-gap: var(--space-3)
}

.gap-y-4 {
    row-gap: var(--space-4)
}

.gap-y-5 {
    row-gap: var(--space-5)
}

.gap-y-6 {
    row-gap: var(--space-6)
}

.gap-y-8 {
    row-gap: var(--space-8)
}

.gap-y-10 {
    row-gap: var(--space-10)
}

.gap-y-12 {
    row-gap: var(--space-12)
}

.gap-y-16 {
    row-gap: var(--space-16)
}

.gap-y-20 {
    row-gap: var(--space-20)
}

.gap-y-24 {
    row-gap: var(--space-24)
}

.gap-y-32 {
    row-gap: var(--space-32)
}

.media-right {
    order: 1
}

*,*::before,*::after {
    box-sizing: border-box
}

* {
    margin: 0;
    padding: 0
}

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden
}

body {
    font-family: var(--font-family-sans);
    font-size: var(--fluid-font-size );
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    min-height: 100vh;
    min-height: 100dvh
}

ul[role=list],ol[role=list] {
    list-style: none
}

nav ul,nav ol {
    list-style: none
}

h1,h2,h3,h4,h5,h6 {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    text-wrap: balance
}

p {
    text-wrap: pretty;
    max-width: none
}

a {
    color: inherit;
    text-decoration: inherit
}

a:not([class]) {
    color: var(--color-primary-600);
    text-decoration: underline;
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto
}

@media(prefers-color-scheme: dark) {
    a:not([class]) {
        color:var(--color-primary-400)
    }
}

:root[data-theme=dark] a:not([class]),.dark a:not([class]) {
    color: var(--color-primary-400)
}

img,picture,svg {
    width: 100%;
    height: auto;
    display: block
}

audio,iframe,embed {
    width: 100%;
    height: auto
}

input,button,textarea,select {
    font-family: inherit;
    font-size: inherit;
    color: inherit
}

input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px
}

blockquote {
    margin: 0;
    padding: 0
}

figure {
    margin: 0
}

dl,dt,dd {
    margin: 0
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0
}

@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
    }
}

@media(prefers-contrast:high) {
    button,input,textarea,select {
        border: 1px solid
    }
}

.banner-lg {
    min-height: clamp(400px,40vh,600px)
}

.banner-content-center {
    display: flex;
    align-items: center;
    justify-content: center
}

.banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-block-start:var(--space-lg)}

.banner-actions>* {
    flex: none
}

@keyframes bannerFadeIn {
    to {
        opacity: 1
    }
}

@keyframes bannerSlideUp {
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes bannerSlideDown {
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-family-sans);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    line-height: var(--line-height-none);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    padding-block:var(--space-3);padding-inline: var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition: all var(--duration-150)var(--ease-in-out);
    outline: 2px solid transparent;
    outline-offset: 2px;
    flex-shrink: 0
}

.btn:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px
}

.btn:disabled {
    cursor: not-allowed;
    opacity: .6
}

.btn-primary {
    background-color: var(--color-primary-600);
    color: var(--color-text-inverse);
    border-color: var(--color-primary-600);
    box-shadow: var(--shadow-sm)
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--color-primary-700);
    border-color: var(--color-primary-700);
    box-shadow: var(--shadow-base)
}

.btn-primary:active:not(:disabled) {
    background-color: var(--color-primary-800);
    border-color: var(--color-primary-800);
    box-shadow: var(--shadow-inner);
    transform: translateY(1px)
}

.btn-secondary {
    background-color: var(--color-secondary-600);
    color: var(--color-text-inverse);
    border-color: var(--color-secondary-600);
    box-shadow: var(--shadow-sm)
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--color-secondary-700);
    border-color: var(--color-secondary-700);
    box-shadow: var(--shadow-base)
}

.btn-secondary:active:not(:disabled) {
    background-color: var(--color-secondary-800);
    border-color: var(--color-secondary-800);
    box-shadow: var(--shadow-inner);
    transform: translateY(1px)
}

.btn-outline {
    background-color: transparent;
    color: var(--color-primary-600);
    border-color: var(--color-primary-600)
}

.btn-outline:hover:not(:disabled) {
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
    border-color: var(--color-primary-700)
}

.btn-outline:active:not(:disabled) {
    background-color: var(--color-primary-100);
    color: var(--color-primary-800);
    border-color: var(--color-primary-800);
    transform: translateY(1px)
}

.btn-ghost {
    background-color: transparent;
    color: var(--color-text-secondary);
    border-color: transparent
}

.btn-ghost:hover:not(:disabled) {
    background-color: var(--color-bg-muted);
    color: var(--color-text-primary)
}

.btn-ghost:active:not(:disabled) {
    background-color: var(--color-border-primary);
    color: var(--color-text-primary);
    transform: translateY(1px)
}

.btn-success {
    background-color: var(--color-success-600);
    color: var(--color-text-inverse);
    border-color: var(--color-success-600);
    box-shadow: var(--shadow-sm)
}

.btn-success:hover:not(:disabled) {
    background-color: var(--color-success-700);
    border-color: var(--color-success-700);
    box-shadow: var(--shadow-base)
}

.btn-success:active:not(:disabled) {
    background-color: var(--color-success-700);
    border-color: var(--color-success-700);
    box-shadow: var(--shadow-inner);
    transform: translateY(1px)
}

.btn-warning {
    background-color: var(--color-warning-500);
    color: var(--color-text-inverse);
    border-color: var(--color-warning-500);
    box-shadow: var(--shadow-sm)
}

.btn-warning:hover:not(:disabled) {
    background-color: var(--color-warning-600);
    border-color: var(--color-warning-600);
    box-shadow: var(--shadow-base)
}

.btn-warning:active:not(:disabled) {
    background-color: var(--color-warning-700);
    border-color: var(--color-warning-700);
    box-shadow: var(--shadow-inner);
    transform: translateY(1px)
}

.btn-danger {
    background-color: var(--color-error-600);
    color: var(--color-text-inverse);
    border-color: var(--color-error-600);
    box-shadow: var(--shadow-sm)
}

.btn-danger:hover:not(:disabled) {
    background-color: var(--color-error-700);
    border-color: var(--color-error-700);
    box-shadow: var(--shadow-base)
}

.btn-danger:active:not(:disabled) {
    background-color: var(--color-error-700);
    border-color: var(--color-error-700);
    box-shadow: var(--shadow-inner);
    transform: translateY(1px)
}

.btn-info {
    background-color: var(--color-info-600);
    color: var(--color-text-inverse);
    border-color: var(--color-info-600);
    box-shadow: var(--shadow-sm)
}

.btn-info:hover:not(:disabled) {
    background-color: var(--color-info-700);
    border-color: var(--color-info-700);
    box-shadow: var(--shadow-base)
}

.btn-info:active:not(:disabled) {
    background-color: var(--color-info-700);
    border-color: var(--color-info-700);
    box-shadow: var(--shadow-inner);
    transform: translateY(1px)
}

.btn-xs {
    padding-block:var(--space-1-5);padding-inline: var(--space-2-5);
    font-size: var(--font-size-xs);
    gap: var(--space-1);
    border-radius: var(--radius-sm)
}

.btn-sm {
    padding-block:var(--space-2);padding-inline: var(--space-3);
    font-size: var(--font-size-sm);
    gap: var(--space-1-5);
    border-radius: var(--radius-base)
}

.btn-lg {
    padding-block:var(--space-4);padding-inline: var(--space-6);
    font-size: var(--font-size-lg);
    gap: var(--space-3);
    border-radius: var(--radius-lg)
}

.btn-xl {
    padding-block:var(--space-5);padding-inline: var(--space-8);
    font-size: var(--font-size-xl);
    gap: var(--space-3);
    border-radius: var(--radius-xl)
}

.btn-full {
    width: 100%;
    justify-content: center
}

.btn-block {
    width: 100%;
    justify-content: center;
    margin-block:var(--space-2)}

.btn-square {
    aspect-ratio: 1;
    padding: var(--space-3)
}

.btn-square.btn-xs {
    padding: var(--space-1-5)
}

.btn-square.btn-sm {
    padding: var(--space-2)
}

.btn-square.btn-lg {
    padding: var(--space-4)
}

.btn-square.btn-xl {
    padding: var(--space-5)
}

.btn-circle {
    border-radius: var(--radius-full);
    aspect-ratio: 1;
    padding: var(--space-3)
}

.btn-circle.btn-xs {
    padding: var(--space-1-5)
}

.btn-circle.btn-sm {
    padding: var(--space-2)
}

.btn-circle.btn-lg {
    padding: var(--space-4)
}

.btn-circle.btn-xl {
    padding: var(--space-5)
}

.btn-loading {
    position: relative;
    color: transparent
}

.btn-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-top-color: initial;
    border-radius: inherit;
    width: 1rem;
    height: 1rem;
    margin: auto;
    animation: btn-spin var(--duration-1000)linear infinite
}

@keyframes btn-spin {
    to {
        transform: rotate(360deg)
    }
}

.btn-group {
    display: inline-flex;
    align-items: stretch
}

.btn-group .btn {
    border-radius: 0;
    border-inline-end-width:1px}

.btn-group .btn:first-child {
    border-start-start-radius: var(--radius-md);
    border-end-start-radius: var(--radius-md)
}

.btn-group .btn:last-child {
    border-start-end-radius: var(--radius-md);
    border-end-end-radius: var(--radius-md);
    border-inline-end-width:1px}

.btn-group .btn:only-child {
    border-radius: var(--radius-md);
    border-inline-end-width:1px}

.btn-group .btn:focus-visible {
    position: relative;
    z-index: 1
}

.btn-group.btn-group-sm .btn:first-child {
    border-start-start-radius: var(--radius-base);
    border-end-start-radius: var(--radius-base)
}

.btn-group.btn-group-sm .btn:last-child {
    border-start-end-radius: var(--radius-base);
    border-end-end-radius: var(--radius-base)
}

@media(prefers-color-scheme: dark) {
    .btn-outline {
        color:var(--color-primary-400);
        border-color: var(--color-primary-400)
    }

    .btn-outline:hover:not(:disabled) {
        background-color: var(--color-primary-950);
        color: var(--color-primary-300);
        border-color: var(--color-primary-300)
    }

    .btn-outline:active:not(:disabled) {
        background-color: var(--color-primary-900);
        color: var(--color-primary-200);
        border-color: var(--color-primary-200)
    }
}

:root[data-theme=dark] .btn-outline,.dark .btn-outline {
    color: var(--color-primary-400);
    border-color: var(--color-primary-400)
}

:root[data-theme=dark] .btn-outline:hover:not(:disabled),.dark .btn-outline:hover:not(:disabled) {
    background-color: var(--color-primary-950);
    color: var(--color-primary-300);
    border-color: var(--color-primary-300)
}

:root[data-theme=dark] .btn-outline:active:not(:disabled),.dark .btn-outline:active:not(:disabled) {
    background-color: var(--color-primary-900);
    color: var(--color-primary-200);
    border-color: var(--color-primary-200)
}

.card {
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-card-padding);
    gap: var(--space-4);
    color: var(--color-text-primary);
    transition: all var(--duration-200)var(--ease-out);
    overflow: hidden
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--color-border-secondary)
}

.card:focus-within {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px
}

.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-end:var(--space-2)}

.card-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin: 0
}

.card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-3)
}

.card-text {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin: 0
}

.card-text:last-child {
    margin-block-end:0}

.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-end:var(--space-4);padding-block-end: var(--space-4);
    border-block-end:1px solid var(--color-border-primary);color: #dcdcdc
}

.card-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-start:var(--space-4)}

.card-actions.card-actions-full {
    justify-content: stretch
}

.card-actions.card-actions-full .btn {
    flex: 1
}

.card-image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    -o-object-fit: cover;
    object-fit: cover
}

.card-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    -o-object-fit: cover;
    object-fit: cover;
    border: 2px solid var(--color-border-primary)
}

.card-elevated {
    box-shadow: var(--shadow-md);
    border: none
}

.card-elevated:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px)
}

.card-outlined {
    background-color: transparent;
    border: 2px solid var(--color-border-secondary);
    box-shadow: none
}

.card-outlined:hover {
    border-color: var(--color-primary-300);
    background-color: var(--color-bg-secondary);
    box-shadow: var(--shadow-sm)
}

.card-filled {
    background-color: var(--color-bg-muted);
    border: none;
    box-shadow: none
}

.card-filled:hover {
    background-color: var(--color-bg-secondary);
    box-shadow: var(--shadow-sm)
}

.card-interactive {
    cursor: pointer
}

.card-interactive:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-300)
}

.card-interactive:active {
    transform: translateY(0);
    box-shadow: var(--shadow-base)
}

.card-compact {
    padding: var(--space-component-padding-sm);
    gap: var(--space-2)
}

.card-compact .card-title {
    font-size: var(--font-size-lg)
}

.card-compact .card-actions {
    margin-block-start:var(--space-2)}

.card-spacious {
    padding: var(--space-component-padding-lg);
    gap: var(--space-6)
}

.card-spacious .card-actions {
    margin-block-start:var(--space-6)}

.card-success {
    border-color: var(--color-success-500);
    background-color: var(--color-success-50)
}

.card-success .card-title {
    color: var(--color-success-700)
}

.card-success:hover {
    border-color: var(--color-success-600);
    box-shadow: 0 4px 6px -1px rgb(34 197 94/.1)
}

.card-warning {
    border-color: var(--color-warning-500);
    background-color: var(--color-warning-50)
}

.card-warning .card-title {
    color: var(--color-warning-700)
}

.card-warning:hover {
    border-color: var(--color-warning-600);
    box-shadow: 0 4px 6px -1px rgb(245 158 11/.1)
}

.card-info {
    border-color: var(--color-info-500);
    background-color: var(--color-info-50)
}

.card-info .card-title {
    color: var(--color-info-700)
}

.card-info:hover {
    border-color: var(--color-info-600);
    box-shadow: 0 4px 6px -1px rgb(6 182 212/.1)
}

.card-post {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
    gap: var(--space-4);
    font-size: var(--font-size-xs)
}

.card-feature {
    text-align: center;
    align-items: center
}

.card-feature .card-icon {
    width: 3rem;
    height: 3rem;
    margin-inline:auto;margin-block-end:var(--space-3);display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary-100);
    border-radius: var(--radius-full);
    color: var(--color-primary-600)
}

.card-team {
    text-align: center
}

.card-team .card-avatar {
    width: 5rem;
    height: 5rem;
    margin-inline:auto;margin-block-end:var(--space-3)}

.card-team .card-role {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-block-start:var(--space-1)}

.card-testimonial {
    position: relative;
    padding-block-start:calc(var(--space-card-padding) + var(--space-4))}

.card-testimonial: :before {
    content:'"';
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-200);
    line-height: 1
}

.card-testimonial .card-author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-block-start:var(--space-4);padding-block-start: var(--space-4);
    border-block-start:1px solid var(--color-border-primary)}

.card-product .card-price {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-600);
    margin-block-start:var(--space-2)}

.card-product .card-price-original {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    text-decoration: line-through;
    margin-inline-start:var(--space-2)}

@media(prefers-color-scheme: dark) {
    .card-success {
        background-color:color-mix(in srgb,var(--color-success-500) 10%,var(--color-bg-primary));
        border-color: var(--color-success-600)
    }

    .card-warning {
        background-color: color-mix(in srgb,var(--color-warning-500) 10%,var(--color-bg-primary));
        border-color: var(--color-warning-600)
    }

    .card-info {
        background-color: color-mix(in srgb,var(--color-info-500) 10%,var(--color-bg-primary));
        border-color: var(--color-info-600)
    }

    .card-feature .card-icon {
        background-color: var(--color-primary-900);
        color: var(--color-primary-300)
    }
}

:root[data-theme=dark] .card-success,.dark .card-success {
    background-color: color-mix(in srgb,var(--color-success-500) 10%,var(--color-bg-primary));
    border-color: var(--color-success-600)
}

:root[data-theme=dark] .card-warning,.dark .card-warning {
    background-color: color-mix(in srgb,var(--color-warning-500) 10%,var(--color-bg-primary));
    border-color: var(--color-warning-600)
}

:root[data-theme=dark] .card-info,.dark .card-info {
    background-color: color-mix(in srgb,var(--color-info-500) 10%,var(--color-bg-primary));
    border-color: var(--color-info-600)
}

:root[data-theme=dark] .card-feature .card-icon,.dark .card-feature .card-icon {
    background-color: var(--color-primary-900);
    color: var(--color-primary-300)
}

@container(max-width:300px) {
    .card {
        padding: var(--space-component-padding-sm);
        gap: var(--space-2);
    }

    .card-title {
        font-size: var(--font-size-lg);
    }

    .card-actions {
        flex-direction: column;
    }

    .card-actions .btn {
        width: 100%;
    }
}

@keyframes cardFadeIn {
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes cardSlideUp {
    to {
        transform: translateY(0)
    }
}

.card:nth-child(1) {
    animation-delay: 0ms
}

.card:nth-child(2) {
    animation-delay: 100ms
}

.card:nth-child(3) {
    animation-delay: 200ms
}

.card:nth-child(4) {
    animation-delay: 300ms
}

.card:nth-child(5) {
    animation-delay: 400ms
}

.card:nth-child(6) {
    animation-delay: 500ms
}

.form {
    display: block;
    width: 100%
}

.form-group {
    margin-block-end:var(--space-md)}

.label {
    display: block;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);
    margin-block-end:var(--space-1-5)}

.input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: var(--space-px)solid var(--color-border-primary);
    border-radius: var(--radius-base);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    padding-block:var(--space-2-5);padding-inline: var(--space-3);
    transition: border-color var(--duration-150)var(--ease-in-out),box-shadow var(--duration-150)var(--ease-in-out);
    width: 100%
}

.input::-moz-placeholder {
    color: var(--color-text-muted);
    opacity: 1
}

.input::placeholder {
    color: var(--color-text-muted);
    opacity: 1
}

.input:focus {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px rgb(from var(--color-primary-500) r g b/.1);
    outline: none
}

.input:disabled {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border-secondary);
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: .6
}

.input-xs {
    font-size: var(--font-size-xs);
    padding-block:var(--space-1);padding-inline: var(--space-2)
}

.input-sm {
    font-size: var(--font-size-sm);
    padding-block:var(--space-2);padding-inline: var(--space-2-5)
}

.input-md {
}

.input-lg {
    font-size: var(--font-size-lg);
    padding-block:var(--space-3);padding-inline: var(--space-4)
}

.input-xl {
    font-size: var(--font-size-xl);
    padding-block:var(--space-4);padding-inline: var(--space-5)
}

.input-bordered {
    border-width: 2px
}

.input-borderless {
    border: none;
    background-color: var(--color-bg-muted)
}

.input-underlined {
    border: none;
    border-block-end:2px solid var(--color-border-primary);border-radius: 0;
    background-color: transparent;
    padding-inline:0}

.input-underlined:focus {
    border-block-end-color:var(--color-border-focus);box-shadow: none
}

.input-valid {
    border-color: var(--color-success-500)
}

.input-valid:focus {
    border-color: var(--color-success-600);
    box-shadow: 0 0 0 3px rgb(from var(--color-success-500) r g b/.1)
}

.input-invalid,.input-error {
    border-color: var(--color-error-500)
}

.input-invalid:focus,.input-error:focus {
    border-color: var(--color-error-600);
    box-shadow: 0 0 0 3px rgb(from var(--color-error-500) r g b/.1)
}

.input-warning {
    border-color: var(--color-warning-500)
}

.input-warning:focus {
    border-color: var(--color-warning-600);
    box-shadow: 0 0 0 3px rgb(from var(--color-warning-500) r g b/.1)
}

.textarea {
    min-height: 96px;
    resize: vertical
}

.select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right var(--space-2-5)center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-inline-end:var(--space-10);cursor: pointer
}

.select:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%233b82f6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")
}

.radio {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--color-bg-primary);
    border: var(--space-px)solid var(--color-border-primary);
    color: var(--color-primary-500);
    cursor: pointer;
    display: inline-block;
    flex-shrink: 0;
    height: 1rem;
    margin-inline-end:var(--space-2);position: relative;
    transition: all var(--duration-150)var(--ease-in-out);
    width: 1rem
}

.radio {
    border-radius: 50%
}

.radio:checked {
    background-color: var(--color-primary-500);
    border-color: var(--color-primary-500)
}

.radio:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.radio:focus {
    box-shadow: 0 0 0 3px rgb(from var(--color-primary-500) r g b/.1);
    outline: none
}

.radio:disabled {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border-secondary);
    cursor: not-allowed;
    opacity: .6
}

.radio-sm {
    height: .875rem;
    width: .875rem
}

.radio-lg {
    height: 1.25rem;
    width: 1.25rem
}

.radio-xl {
    height: 1.5rem;
    width: 1.5rem
}

.input-group {
    display: flex;
    position: relative;
    width: 100%
}

.input-group .input {
    border-radius: 0;
    flex: 1;
    position: relative;
    z-index: 2
}

.input-group .input:first-child {
    border-end-start-radius: var(--radius-base);
    border-start-start-radius: var(--radius-base)
}

.input-group .input:last-child {
    border-end-end-radius: var(--radius-base);
    border-start-end-radius: var(--radius-base)
}

.input-group .input:not(:first-child) {
    border-inline-start-width:0}

.input-group .input:focus {
    z-index: 3
}

.input-addon {
    align-items: center;
    background-color: var(--color-bg-muted);
    border: var(--space-px)solid var(--color-border-primary);
    color: var(--color-text-secondary);
    display: flex;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    padding-block:var(--space-2-5);padding-inline: var(--space-3);
    text-align: center;
    white-space: nowrap
}

.input-addon:first-child {
    border-end-start-radius: var(--radius-base);
    border-inline-end-width:0;border-start-start-radius: var(--radius-base)
}

.input-addon:last-child {
    border-end-end-radius: var(--radius-base);
    border-inline-start-width:0;border-start-end-radius: var(--radius-base)
}

.input-file {
    border: 2px dashed var(--color-border-primary);
    border-radius: var(--radius-base);
    cursor: pointer;
    padding: var(--space-6);
    text-align: center;
    transition: border-color var(--duration-150)var(--ease-in-out),background-color var(--duration-150)var(--ease-in-out)
}

.input-file:hover {
    border-color: var(--color-primary-500);
    background-color: var(--color-bg-secondary)
}

.sr-only {
    border: 0;
    clip: rect(0,0,0,0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px
}

.input:focus-visible,.textarea:focus-visible,.select:focus-visible,.radio:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px
}

@media(prefers-reduced-motion:reduce) {
    .input,.textarea,.select,.radio {
        transition: none
    }
}

@media print {
    .form,.form-group,.input,.textarea,.select {
        -moz-column-break-inside: avoid;
        break-inside: avoid
    }

    .input,.textarea,.select {
        border: 1px solid #000;
        box-shadow: none
    }

    .radio:checked {
        background: #000
    }
}

.grid {
    display: grid
}

.inline-grid {
    display: inline-grid
}

.grid-cols-auto-fit {
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr))
}

.grid-cols-auto-fit-xs {
    grid-template-columns: repeat(auto-fit,minmax(var(--grid-min-xs),1fr))
}

.grid-cols-auto-fit-sm {
    grid-template-columns: repeat(auto-fit,minmax(var(--grid-min-sm),1fr))
}

.grid-cols-auto-fit-md {
    grid-template-columns: repeat(auto-fit,minmax(var(--grid-min-md),1fr))
}

.grid-cols-auto-fit-lg {
    grid-template-columns: repeat(auto-fit,minmax(var(--grid-min-lg),1fr))
}

.grid-cols-auto-fit-xl {
    grid-template-columns: repeat(auto-fit,minmax(var(--grid-min-xl),1fr))
}

.grid-min-200 {
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr))
}

.grid-min-250 {
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr))
}

.grid-min-280 {
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr))
}

.grid-min-300 {
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr))
}

.grid-min-320 {
    grid-template-columns: repeat(auto-fit,minmax(320px,1fr))
}

.grid-min-350 {
    grid-template-columns: repeat(auto-fit,minmax(350px,1fr))
}

.grid-min-400 {
    grid-template-columns: repeat(auto-fit,minmax(400px,1fr))
}

.grid-min-600 {
    grid-template-columns: repeat(auto-fit,minmax(600px,1fr))
}

.grid-min-33vw {
    grid-template-columns: repeat(auto-fit,minmax(33.33vw,1fr))
}

.grid-min-280-posts {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,370px));
    -moz-column-gap: 2em;
    column-gap: 2em
}

.grid-cols-auto-fill {
    grid-template-columns: repeat(auto-fill,minmax(250px,1fr))
}

.grid-cols-auto-fill-xs {
    grid-template-columns: repeat(auto-fill,minmax(var(--grid-min-xs),1fr))
}

.grid-cols-auto-fill-sm {
    grid-template-columns: repeat(auto-fill,minmax(var(--grid-min-sm),1fr))
}

.grid-cols-auto-fill-md {
    grid-template-columns: repeat(auto-fill,minmax(var(--grid-min-md),1fr))
}

.grid-cols-auto-fill-lg {
    grid-template-columns: repeat(auto-fill,minmax(var(--grid-min-lg),1fr))
}

.grid-cols-auto-fill-xl {
    grid-template-columns: repeat(auto-fill,minmax(var(--grid-min-xl),1fr))
}

.grid-cols-1 {
    grid-template-columns: repeat(1,minmax(0,1fr))
}

.grid-cols-2 {
    grid-template-columns: repeat(2,minmax(0,1fr))
}

.grid-cols-3 {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.grid-cols-4 {
    grid-template-columns: repeat(4,minmax(0,1fr))
}

.grid-cols-5 {
    grid-template-columns: repeat(5,minmax(0,1fr))
}

.grid-cols-6 {
    grid-template-columns: repeat(6,minmax(0,1fr))
}

.grid-cols-7 {
    grid-template-columns: repeat(7,minmax(0,1fr))
}

.grid-cols-8 {
    grid-template-columns: repeat(8,minmax(0,1fr))
}

.grid-cols-9 {
    grid-template-columns: repeat(9,minmax(0,1fr))
}

.grid-cols-10 {
    grid-template-columns: repeat(10,minmax(0,1fr))
}

.grid-cols-11 {
    grid-template-columns: repeat(11,minmax(0,1fr))
}

.grid-cols-12 {
    grid-template-columns: repeat(12,minmax(0,1fr))
}

.grid-cols-subgrid {
    grid-template-columns: subgrid
}

.grid-rows-1 {
    grid-template-rows: repeat(1,minmax(0,1fr))
}

.grid-rows-2 {
    grid-template-rows: repeat(2,minmax(0,1fr))
}

.grid-rows-3 {
    grid-template-rows: repeat(3,minmax(0,1fr))
}

.grid-rows-4 {
    grid-template-rows: repeat(4,minmax(0,1fr))
}

.grid-rows-5 {
    grid-template-rows: repeat(5,minmax(0,1fr))
}

.grid-rows-6 {
    grid-template-rows: repeat(6,minmax(0,1fr))
}

.grid-rows-none {
    grid-template-rows: none
}

.grid-rows-subgrid {
    grid-template-rows: subgrid
}

.grid-gap-0 {
    gap: var(--space-0)
}

.grid-gap-px {
    gap: var(--space-px)
}

.grid-gap-1 {
    gap: var(--space-1)
}

.grid-gap-2 {
    gap: var(--space-2)
}

.grid-gap-3 {
    gap: var(--space-3)
}

.grid-gap-4 {
    gap: var(--space-4)
}

.grid-gap-5 {
    gap: var(--space-5)
}

.grid-gap-6 {
    gap: var(--space-6)
}

.grid-gap-8 {
    gap: var(--space-8)
}

.grid-gap-10 {
    gap: var(--space-10)
}

.grid-gap-12 {
    gap: var(--space-12)
}

.grid-gap-16 {
    gap: var(--space-16)
}

.grid-gap-20 {
    gap: var(--space-20)
}

.grid-gap-24 {
    gap: var(--space-24)
}

.grid-gap-32 {
    gap: var(--space-32)
}

.grid-gap-xs {
    gap: var(--grid-gap-xs)
}

.grid-gap-sm {
    gap: var(--grid-gap-sm)
}

.grid-gap-md {
    gap: var(--grid-gap-md)
}

.grid-gap-lg {
    gap: var(--grid-gap-lg)
}

.grid-gap-xl {
    gap: var(--grid-gap-xl)
}

.grid-gap-card {
    gap: var(--space-card-gap)
}

.grid-gap-section {
    gap: var(--space-section-gap)
}

.grid-gap-component {
    gap: var(--space-component-margin)
}

.grid-gap-x-0 {
    -moz-column-gap: var(--space-0);
    column-gap: var(--space-0)
}

.grid-gap-x-1 {
    -moz-column-gap: var(--space-1);
    column-gap: var(--space-1)
}

.grid-gap-x-2 {
    -moz-column-gap: var(--space-2);
    column-gap: var(--space-2)
}

.grid-gap-x-3 {
    -moz-column-gap: var(--space-3);
    column-gap: var(--space-3)
}

.grid-gap-x-4 {
    -moz-column-gap: var(--space-4);
    column-gap: var(--space-4)
}

.grid-gap-x-5 {
    -moz-column-gap: var(--space-5);
    column-gap: var(--space-5)
}

.grid-gap-x-6 {
    -moz-column-gap: var(--space-6);
    column-gap: var(--space-6)
}

.grid-gap-x-8 {
    -moz-column-gap: var(--space-8);
    column-gap: var(--space-8)
}

.grid-gap-x-12 {
    -moz-column-gap: var(--space-12);
    column-gap: var(--space-12)
}

.grid-gap-x-16 {
    -moz-column-gap: var(--space-16);
    column-gap: var(--space-16)
}

.grid-gap-x-24 {
    -moz-column-gap: var(--space-24);
    column-gap: var(--space-24)
}

.grid-gap-y-0 {
    row-gap: var(--space-0)
}

.grid-gap-y-1 {
    row-gap: var(--space-1)
}

.grid-gap-y-2 {
    row-gap: var(--space-2)
}

.grid-gap-y-3 {
    row-gap: var(--space-3)
}

.grid-gap-y-4 {
    row-gap: var(--space-4)
}

.grid-gap-y-5 {
    row-gap: var(--space-5)
}

.grid-gap-y-6 {
    row-gap: var(--space-6)
}

.grid-gap-y-8 {
    row-gap: var(--space-8)
}

.grid-gap-y-12 {
    row-gap: var(--space-12)
}

.grid-gap-y-16 {
    row-gap: var(--space-16)
}

.grid-gap-y-24 {
    row-gap: var(--space-24)
}

.row-auto {
    grid-row: auto
}

.row-span-1 {
    grid-row: span 1/span 1
}

.row-span-2 {
    grid-row: span 2/span 2
}

.row-span-3 {
    grid-row: span 3/span 3
}

.row-span-4 {
    grid-row: span 4/span 4
}

.row-span-5 {
    grid-row: span 5/span 5
}

.row-span-6 {
    grid-row: span 6/span 6
}

.row-span-full {
    grid-row: 1/-1
}

.row-start-1 {
    grid-row-start: 1
}

.row-start-2 {
    grid-row-start: 2
}

.row-start-3 {
    grid-row-start: 3
}

.row-start-4 {
    grid-row-start: 4
}

.row-start-5 {
    grid-row-start: 5
}

.row-start-6 {
    grid-row-start: 6
}

.row-start-7 {
    grid-row-start: 7
}

.row-start-auto {
    grid-row-start: auto
}

.row-end-1 {
    grid-row-end: 1
}

.row-end-2 {
    grid-row-end: 2
}

.row-end-3 {
    grid-row-end: 3
}

.row-end-4 {
    grid-row-end: 4
}

.row-end-5 {
    grid-row-end: 5
}

.row-end-6 {
    grid-row-end: 6
}

.row-end-7 {
    grid-row-end: 7
}

.row-end-auto {
    grid-row-end: auto
}

.justify-items-center {
    justify-items: center
}

.justify-content-end {
    justify-content: end
}

.align-items-start {
    align-items: start
}

.align-items-end {
    align-items: end
}

.align-items-center {
    align-items: center
}

.align-items-stretch {
    align-items: stretch
}

.align-content-start {
    align-content: start
}

.align-content-end {
    align-content: end
}

.align-content-center {
    align-content: center
}

.align-content-stretch {
    align-content: stretch
}

.align-content-space-around {
    align-content: space-around
}

.align-content-space-between {
    align-content: space-between
}

.align-content-space-evenly {
    align-content: space-evenly
}

.align-self-auto {
    align-self: auto
}

.align-self-start {
    align-self: start
}

.align-self-end {
    align-self: end
}

.align-self-center {
    align-self: center
}

.align-self-stretch {
    align-self: stretch
}

.place-items-start {
    place-items: start
}

.place-items-end {
    place-items: end
}

.place-items-center {
    place-items: center
}

.place-items-stretch {
    place-items: stretch
}

.place-content-start {
    place-content: start
}

.place-content-end {
    place-content: end
}

.place-content-center {
    place-content: center
}

.place-content-stretch {
    place-content: stretch
}

.place-content-space-around {
    place-content: space-around
}

.place-content-space-between {
    place-content: space-between
}

.place-content-space-evenly {
    place-content: space-evenly
}

.place-self-auto {
    place-self: auto
}

.place-self-start {
    place-self: start
}

.place-self-end {
    place-self: end
}

.place-self-center {
    place-self: center
}

.place-self-stretch {
    place-self: stretch
}

.grid-hero {
    grid-template-areas: "content content content" "media media media";
    grid-template-rows: auto 1fr
}

@media(min-width: 768px) {
    .grid-hero {
        grid-template-areas:"content media media" "content media media";
        grid-template-columns: 1fr 1.5fr;
        grid-template-rows: 1fr 1fr
    }
}

.hero-content {
    grid-area: content
}

.hero-media {
    grid-area: media
}

.grid-post {
    grid-template-areas: "header" "content" "sidebar" "footer";
    grid-template-rows: auto 1fr auto auto
}

@media(min-width: 1024px) {
    .grid-post {
        grid-template-areas:"header header header" "content content sidebar" "footer footer footer";
        grid-template-columns: 1fr 1fr 300px;
        grid-template-rows: auto 1fr auto
    }
}

.post-header {
    grid-area: header
}

.post-content {
    grid-area: content
}

.post-sidebar {
    grid-area: sidebar
}

.post-footer {
    grid-area: footer
}

.grid-card-feature {
    grid-template-areas: "image" "content" "meta"
}

@media(min-width: 640px) {
    .grid-card-feature {
        grid-template-areas:"image content" "image meta";
        grid-template-columns: 200px 1fr;
        grid-template-rows: 1fr auto
    }
}

.grid-dashboard {
    grid-template-areas: "header" "main" "sidebar";
    grid-template-rows: auto 1fr auto;
    min-height: 100vh
}

@media(min-width: 1024px) {
    .grid-dashboard {
        grid-template-areas:"sidebar header" "sidebar main";
        grid-template-columns: 250px 1fr;
        grid-template-rows: auto 1fr
    }
}

.dashboard-header {
    grid-area: header
}

.dashboard-main {
    grid-area: main
}

.dashboard-sidebar {
    grid-area: sidebar
}

.grid-blog-list {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(var(--grid-min-2col),1fr));
    gap: var(--space-lg)
}

.grid-features {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(var(--grid-min-2col),1fr));
    gap: var(--space-xl);
    align-items: start
}

.grid-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: var(--space-md);
    grid-auto-rows: auto
}

.grid-testimonials {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
    gap: var(--space-lg);
    align-items: start
}

.grid-products {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
    gap: var(--space-md)
}

.grid-tags {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(120px,1fr));
    gap: var(--space-sm);
    align-items: center
}

.grid-authors {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    gap: var(--space-lg);
    place-items: center;
    text-align: center
}

.grid-container {
    width: 100%;
    margin-inline:auto;padding-inline:var(--space-md)}

.grid-container-sm {
    max-width: var(--container-sm)
}

.grid-container-md {
    max-width: var(--container-md)
}

.grid-container-lg {
    max-width: var(--container-lg)
}

.grid-container-xl {
    max-width: var(--container-xl)
}

.grid-container-2xl {
    max-width: var(--container-2xl)
}

.grid-container-full {
    max-width: none;
    padding-inline:0}

.grid-full-bleed {
    width: 100vw;
    margin-inline:calc(50% - 50vw)}

.grid-debug * {
    outline: 1px solid rgba(255,0,0,.3);
    background-color: rgba(255,0,0,5%)
}

.grid-debug {
    outline: 2px solid rgba(0,255,0,.7);
    background-color: rgba(0,255,0,.1)
}

@media print {
    .grid,.inline-grid {
        display: block !important
    }

    .grid>*,.inline-grid>* {
        margin-block-end:var(--space-md);-moz-column-break-inside: avoid;
        break-inside: avoid
    }
}

.icon {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    flex-shrink: 0
}

.icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 0
}

.icon-font {
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    display: inline-block;
    vertical-align: middle
}

.icon-xs {
    width: .75rem;
    height: .75rem
}

.icon-sm {
    width: 1rem;
    height: 1rem
}

.icon-base,.icon {
    width: 1.25rem;
    height: 1.25rem
}

.icon-lg {
    width: 1.5rem;
    height: 1.5rem
}

.icon-xl {
    width: 2rem;
    height: 2rem
}

.icon-2xl {
    width: 2.5rem;
    height: 2.5rem
}

.icon-3xl {
    width: 3rem;
    height: 3rem
}

.icon-4xl {
    width: 4rem;
    height: 4rem
}

.icon-5xl {
    width: 5rem;
    height: 5rem
}

.icon-6xl {
    width: 6rem;
    height: 6rem
}

.icon-primary {
    color: var(--color-primary-600)
}

.icon-secondary {
    color: var(--color-secondary-600)
}

.icon-accent {
    color: var(--color-accent-600)
}

.icon-success {
    color: var(--color-success-600)
}

.icon-warning {
    color: var(--color-warning-600)
}

.icon-error {
    color: var(--color-error-600)
}

.icon-info {
    color: var(--color-info-600)
}

.icon-muted {
    color: var(--color-text-muted)
}

.icon-inverse {
    color: var(--color-text-inverse)
}

.icon-current {
    color: currentColor
}

.icon-leading {
    margin-inline-end:var(--space-2)}

.icon-trailing {
    margin-inline-start: var(--space-2)
}

.icon-center {
    margin-inline:auto}

.btn .icon-leading {
    margin-inline-end:var(--space-2);margin-inline-start: calc(var(--space-1) * -1)
}

.btn .icon-trailing {
    margin-inline-start:var(--space-2);margin-inline-end: calc(var(--space-1) * -1)
}

.btn-sm .icon-leading {
    margin-inline-end:var(--space-1-5);margin-inline-start: calc(var(--space-1) * -1)
}

.btn-sm .icon-trailing {
    margin-inline-start:var(--space-1-5);margin-inline-end: calc(var(--space-1) * -1)
}

.btn-lg .icon-leading {
    margin-inline-end:var(--space-3);margin-inline-start: calc(var(--space-1) * -1)
}

.btn-lg .icon-trailing {
    margin-inline-start:var(--space-3);margin-inline-end: calc(var(--space-1) * -1)
}

.icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.icon-container-square {
    border-radius: var(--radius-base)
}

.icon-container-rounded {
    border-radius: var(--radius-lg)
}

.icon-container-circle {
    border-radius: var(--radius-full)
}

.icon-container-xs {
    width: 2rem;
    height: 2rem
}

.icon-container-sm {
    width: 2.5rem;
    height: 2.5rem
}

.icon-container-base {
    width: 3rem;
    height: 3rem
}

.icon-container-lg {
    width: 4rem;
    height: 4rem
}

.icon-container-xl {
    width: 5rem;
    height: 5rem
}

.icon-container-2xl {
    width: 6rem;
    height: 6rem
}

.icon-container-primary {
    background-color: var(--color-primary-100);
    color: var(--color-primary-600)
}

.icon-container-secondary {
    background-color: var(--color-secondary-100);
    color: var(--color-secondary-600)
}

.icon-container-accent {
    background-color: var(--color-accent-100);
    color: var(--color-accent-600)
}

.icon-container-success {
    background-color: var(--color-success-50);
    color: var(--color-success-600)
}

.icon-container-warning {
    background-color: var(--color-warning-50);
    color: var(--color-warning-600)
}

.icon-container-error {
    background-color: var(--color-error-50);
    color: var(--color-error-600)
}

.icon-container-info {
    background-color: var(--color-info-50);
    color: var(--color-info-600)
}

.icon-container-muted {
    background-color: var(--color-neutral-100);
    color: var(--color-text-muted)
}

.icon-container-neutral {
    background-color: var(--color-neutral-200);
    color: var(--color-text-secondary)
}

.icon-interactive {
    cursor: pointer;
    transition: color var(--duration-150)var(--ease-in-out),transform var(--duration-150)var(--ease-in-out)
}

.icon-interactive:hover {
    color: var(--color-primary-700);
    transform: scale(1.1)
}

.icon-interactive:active {
    transform: scale(.95)
}

.icon-interactive:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm)
}

.icon-container-interactive {
    cursor: pointer;
    transition: background-color var(--duration-150)var(--ease-in-out),color var(--duration-150)var(--ease-in-out),transform var(--duration-150)var(--ease-in-out)
}

.icon-container-interactive:hover {
    transform: scale(1.05)
}

.icon-container-interactive:active {
    transform: scale(.98)
}

.icon-container-interactive:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px
}

.icon-spin {
    animation: icon-spin 1s linear infinite
}

.icon-pulse {
    animation: icon-pulse 2s cubic-bezier(.4,0,.6,1)infinite
}

.icon-bounce {
    animation: icon-bounce 1s infinite
}

@keyframes icon-spin {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes icon-pulse {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: .5
    }
}

@keyframes icon-bounce {
    0%,100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(.8,0,1,1)
    }

    50% {
        transform: none;
        animation-timing-function: cubic-bezier(0,0,.2,1)
    }
}

.icon-group {
    display: flex;
    align-items: center;
    gap: var(--space-2)
}

.icon-group-sm {
    gap: var(--space-1)
}

.icon-group-lg {
    gap: var(--space-3)
}

.icon-group-vertical {
    flex-direction: column
}

.icon-group-center {
    justify-content: center
}

.icon-group-between {
    justify-content: space-between
}

.icon-group-around {
    justify-content: space-around
}

.icon-group-evenly {
    justify-content: space-evenly
}

.icon-badge {
    position: relative
}

.icon-badge::after {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: .5rem;
    height: .5rem;
    background-color: var(--color-error-500);
    border: 2px solid var(--color-bg-primary);
    border-radius: var(--radius-full);
    transform: translate(50%,-50%)
}

.icon-badge-primary::after {
    background-color: var(--color-primary-500)
}

.icon-badge-success::after {
    background-color: var(--color-success-500)
}

.icon-badge-warning::after {
    background-color: var(--color-warning-500)
}

.icon-badge-info::after {
    background-color: var(--color-info-500)
}

.icon-badge-lg::after {
    width: .75rem;
    height: .75rem
}

.icon-badge-sm::after {
    width: .375rem;
    height: .375rem
}

.icon[aria-hidden=true] {
}

.icon-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0
}

@media(prefers-contrast:high) {
    .icon {
        forced-color-adjust: auto
    }

    .icon-container {
        border: 1px solid
    }
}

@media(prefers-reduced-motion:reduce) {
    .icon-spin,.icon-pulse,.icon-bounce,.icon-interactive {
        animation: none
    }

    .icon-interactive,.icon-container-interactive {
        transition: none
    }
}

@media print {
    .icon {
        color: #000 !important
    }

    .icon-container {
        background: 0 0 !important;
        border: 1px solid #000
    }

    .icon-spin,.icon-pulse,.icon-bounce {
        animation: none
    }
}

.inverse {
    background-color: var(--color-bg-inverse);
    color: var(--color-text-inverse)
}

.inverse-soft {
    background-color: var(--color-neutral-800);
    color: var(--color-neutral-100)
}

.inverse-primary {
    background-color: var(--color-primary-900);
    color: var(--color-primary-50)
}

.inverse-secondary {
    background-color: var(--color-secondary-900);
    color: var(--color-secondary-50)
}

.inverse-accent {
    background-color: var(--color-accent-900);
    color: var(--color-accent-50)
}

.text-inverse {
    color: var(--color-text-inverse)
}

.text-inverse-soft {
    color: var(--color-neutral-100)
}

.text-inverse-muted {
    color: var(--color-neutral-300)
}

.text-inverse-primary {
    color: var(--color-primary-100)
}

.text-inverse-secondary {
    color: var(--color-secondary-100)
}

.text-inverse-accent {
    color: var(--color-accent-100)
}

.inverse .btn,.inverse-soft .btn,.inverse-primary .btn,.inverse-secondary .btn,.inverse-accent .btn {
}

.inverse .btn:hover,.inverse-soft .btn:hover,.inverse-primary .btn:hover,.inverse-secondary .btn:hover,.inverse-accent .btn:hover {
}

.inverse .btn-outline,.inverse-soft .btn-outline,.inverse-primary .btn-outline,.inverse-secondary .btn-outline,.inverse-accent .btn-outline {
}

.inverse .btn-outline:hover,.inverse-soft .btn-outline:hover,.inverse-primary .btn-outline:hover,.inverse-secondary .btn-outline:hover,.inverse-accent .btn-outline:hover {
}

.inverse a,.inverse-soft a,.inverse-primary a,.inverse-secondary a,.inverse-accent a {
    color: var(--color-neutral-100);
    text-decoration-color: var(--color-neutral-400)
}

.inverse a:hover,.inverse-soft a:hover,.inverse-primary a:hover,.inverse-secondary a:hover,.inverse-accent a:hover {
    color: var(--color-neutral-0);
    text-decoration-color: var(--color-neutral-0)
}

.inverse .card,.inverse-soft .card {
    background-color: var(--color-neutral-700);
    border-color: var(--color-neutral-600);
    color: var(--color-neutral-100)
}

.inverse .card-header,.inverse-soft .card-header {
    border-bottom-color: var(--color-neutral-600)
}

.inverse .card-footer,.inverse-soft .card-footer {
    border-top-color: var(--color-neutral-600)
}

.inverse-gradient-primary {
    background: linear-gradient(135deg,var(--color-primary-900) 0%,var(--color-primary-950) 100%);
    color: var(--color-primary-50)
}

.inverse-gradient-secondary {
    background: linear-gradient(135deg,var(--color-secondary-900) 0%,var(--color-secondary-950) 100%);
    color: var(--color-secondary-50)
}

.inverse-gradient-accent {
    background: linear-gradient(135deg,var(--color-accent-900) 0%,var(--color-accent-950) 100%);
    color: var(--color-accent-50)
}

.inverse-gradient-neutral {
    background: linear-gradient(135deg,var(--color-neutral-800) 0%,var(--color-neutral-950) 100%);
    color: var(--color-neutral-100)
}

.inverse-gradient-warm {
    background: linear-gradient(135deg,var(--color-error-800) 0%,var(--color-warning-900) 100%);
    color: var(--color-neutral-0)
}

.inverse-gradient-cool {
    background: linear-gradient(135deg,var(--color-info-800) 0%,var(--color-primary-900) 100%);
    color: var(--color-neutral-0)
}

.inverse-gradient-radial {
    background: radial-gradient(ellipse at center,var(--color-neutral-700) 0%,var(--color-neutral-950) 100%);
    color: var(--color-neutral-100)
}

.inverse-gradient-radial-primary {
    background: radial-gradient(ellipse at center,var(--color-primary-800) 0%,var(--color-primary-950) 100%);
    color: var(--color-primary-50)
}

.inverse-fade-in {
    background-color: var(--color-bg-inverse);
    color: var(--color-text-inverse);
    animation: inverseFadeIn var(--duration-700)var(--ease-out)
}

.inverse-slide-up {
    background-color: var(--color-bg-inverse);
    color: var(--color-text-inverse);
    transform: translateY(2rem);
    opacity: 0;
    animation: inverseSlideUp var(--duration-700)var(--ease-out)forwards
}

@keyframes inverseFadeIn {
    from {
        background-color: var(--color-bg-primary);
        color: var(--color-text-primary)
    }

    to {
        background-color: var(--color-bg-inverse);
        color: var(--color-text-inverse)
    }
}

@keyframes inverseSlideUp {
    to {
        transform: translateY(0);
        opacity: 1
    }
}

.inverse-underline {
    position: relative
}

.inverse-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-neutral-400);
    transition: background-color var(--duration-200)var(--ease-out)
}

.inverse-underline:hover::after {
    background-color: var(--color-neutral-0)
}

.inverse-highlight {
    position: relative
}

.inverse-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: -4px;
    right: -4px;
    bottom: 0;
    background-color: var(--color-neutral-700);
    z-index: -1;
    border-radius: var(--radius-base)
}

@container(min-width:768px) {
    .inverse-responsive {
        background-color: var(--color-bg-inverse);
        color: var(--color-text-inverse);
        padding: var(--space-xl);
    }
}

@media(min-width: 768px) {
    .inverse-responsive {
        background-color:var(--color-bg-inverse);
        color: var(--color-text-inverse);
        padding: var(--space-xl)
    }
}

@media(prefers-contrast:high) {
    .inverse,.inverse-soft,.inverse-primary,.inverse-secondary,.inverse-accent {
        border: 2px solid
    }
}

@media(prefers-reduced-motion:reduce) {
    .inverse-fade-in,.inverse-slide-up {
        animation: none;
        background-color: var(--color-bg-inverse);
        color: var(--color-text-inverse);
        transform: none;
        opacity: 1
    }

    .inverse-underline::after,.inverse .btn,.inverse-soft .btn {
        transition: none
    }
}

@media(forced-colors:active) {
    .inverse,.inverse-soft,.inverse-primary,.inverse-secondary,.inverse-accent {
        background-color: ButtonFace;
        color: ButtonText;
        border: 1px solid ButtonText
    }
}

@media print {
    .inverse,.inverse-soft,.inverse-primary,.inverse-secondary,.inverse-accent {
        background-color: transparent !important;
        color: #000 !important;
        border: 1px solid #000
    }

    .inverse-gradient-primary,.inverse-gradient-secondary,.inverse-gradient-accent,.inverse-gradient-neutral,.inverse-gradient-warm,.inverse-gradient-cool,.inverse-gradient-radial,.inverse-gradient-radial-primary {
        background: 0 0 !important;
        color: #000 !important
    }

    .inverse a,.inverse-soft a,.text-inverse,.text-inverse-soft,.text-inverse-muted {
        color: #000 !important;
        text-decoration: underline
    }

    .inverse-underline::after,.inverse-highlight::before {
        display: none
    }
}

.menu {
    list-style: none;
    margin: 0;
    padding: 0
}

.menu-item {
    position: relative
}

.menu-link {
    color: var(--color-text-primary);
    display: block;
    font-weight: var(--font-weight-medium);
    padding-block:var(--space-3);padding-inline: var(--space-3);
    text-decoration: none;
    transition: all var(--duration-150)var(--ease-in-out)
}

.menu-link:hover,.menu-link:focus {
    background-color: var(--color-bg-secondary);
    color: var(--color-primary-600);
    outline: none
}

.menu-link:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px
}

.menu-item.active>.menu-link,.menu-link.active {
    background-color: var(--color-primary-50);
    color: var(--color-primary-700)
}

:root[data-theme=dark] .menu-item.active>.menu-link,:root[data-theme=dark] .menu-link.active,.dark .menu-item.active>.menu-link,.dark .menu-link.active {
    background-color: var(--color-primary-900);
    color: var(--color-primary-300)
}

.menu-horizontal {
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

.menu-horizontal .menu-item {
    display: flex
}

.menu-horizontal .menu-link {
    white-space: nowrap
}

.menu-vertical {
    display: flex;
    flex-direction: column
}

.menu-vertical .menu-item {
    width: 100%
}

.menu-vertical .menu-link {
    border-block-end:1px solid var(--color-border-primary)}

.menu-vertical .menu-item: last-child .menu-link {
    border-block-end:none
}

.menu-toggle {
    display: none
}

.menu-toggle-label {
    align-items: center;
    background-color: transparent;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-base);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    justify-content: center;
    padding: var(--space-2);
    transition: all var(--duration-200)var(--ease-in-out);
    width: 44px;
    height: 44px
}

.menu-toggle-label:hover {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border-secondary)
}

.menu-toggle-label:focus-within {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgb(from var(--color-primary-500) r g b/.1)
}

.menu-mobile {
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    left: 0;
    max-height: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 100%;
    transition: all var(--duration-300)var(--ease-in-out);
    width: 100%;
    z-index: var(--z-dropdown);
    display: none
}

.menu-toggle:checked~.menu-mobile {
    max-height: 500px;
    padding-block:var(--space-2);display: block
}

.menu-mobile .menu-link {
    border-block-end:1px solid var(--color-border-primary);padding-block: var(--space-3);
    padding-inline:var(--space-4)}

.menu-mobile .menu-item: last-child .menu-link {
    border-block-end:none
}

@container(min-width:768px) {
    .menu-toggle-label {
        display: none;
    }
}

@media(min-width: 768px) {
    .menu-toggle-label {
        display:none
    }
}

.pagination {
    align-items: center;
    display: flex;
    gap: var(--space-1);
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0
}

.pagination-item {
    display: flex
}

.pagination-link {
    align-items: center;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    color: var(--color-text-primary);
    display: flex;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    height: 40px;
    justify-content: center;
    min-width: 40px;
    padding-inline:var(--space-3);text-decoration: none;
    transition: all var(--duration-150)var(--ease-in-out)
}

.pagination-link:hover,.pagination-link:focus {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    color: var(--color-primary-600);
    outline: none
}

.pagination-item.active .pagination-link {
    background-color: var(--color-primary-500);
    border-color: var(--color-primary-500);
    color: var(--color-text-inverse)
}

.pagination-item.disabled .pagination-link {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border-secondary);
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: .6
}

.pagination-item.disabled .pagination-link:hover {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border-secondary);
    color: var(--color-text-muted)
}

.pagination-item:first-child .pagination-link {
    border-end-start-radius: var(--radius-base);
    border-start-start-radius: var(--radius-base)
}

.pagination-item:last-child .pagination-link {
    border-end-end-radius: var(--radius-base);
    border-start-end-radius: var(--radius-base)
}

.pagination-item:not(:first-child) .pagination-link {
    border-inline-start-width:0}

.pagination-sm .pagination-link {
    font-size: var(--font-size-xs);
    height: 32px;
    min-width: 32px;
    padding-inline:var(--space-2)}

.pagination-lg .pagination-link {
    font-size: var(--font-size-base);
    height: 48px;
    min-width: 48px;
    padding-inline:var(--space-4)}

.site-nav {
    background-color: var(--color-bg-primary);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky)
}

[aria-current=page] {
    color: var(--color-primary-600);
    font-weight: var(--font-weight-semibold)
}

@media(prefers-reduced-motion:reduce) {
    .menu-link,.menu-toggle-label,.menu-mobile,.pagination-link {
        transition: none
    }
}

@media print {
    .menu-toggle-label,.menu-mobile,.pagination {
        display: none !important
    }

    .menu-horizontal {
        display: block
    }

    .menu-horizontal .menu-item {
        display: block
    }

    .menu-horizontal .menu-link {
        display: inline;
        padding: 0
    }

    .menu-horizontal .menu-item:not(:last-child)::after {
        content: " | "
    }
}

@keyframes tableSpinner {
    to {
        transform: rotate(360deg)
    }
}

.site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary)
}

.site-content {
    flex: 1;
    display: flex;
    flex-direction: column
}

.container {
    width: 100%;
    margin-inline:auto;padding-inline:calc(var(--space-sm) + 1.5625vw)}

.container--narrow {
    max-width: var(--container-md)
}

.container--wide {
    max-width: var(--container-xl)
}

.container--extra-wide {
    max-width: var(--container-2xl)
}

.container--full {
    max-width: none;
    padding-inline:0}

.container--flush {
    max-width: var(--container-lg)
}

.site {
    transition: background-color var(--duration-300)var(--ease-out),color var(--duration-300)var(--ease-out)
}

.site-footer {
    margin-top: auto;
    background-color: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border-primary)
}

.footer-inner {
    padding-block:var(--space-section-gap);padding-inline: var(--space-md);
    max-width: var(--container-xl);
    margin-inline:auto}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: var(--space-xl);
    margin-block-end:var(--space-xl)}

.footer-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

.footer-section h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0
}

.footer-section ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2)
}

.footer-section a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--duration-150)var(--ease-out)
}

.footer-section a:hover {
    color: var(--color-primary-600)
}

.footer-copyright {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm)
}

.footer-social {
    display: flex;
    align-items: center;
    gap: var(--space-3)
}

.footer-social ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--space-2)
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: -moz-max-content;
    width: max-content;
    height: -moz-max-content;
    height: max-content;
    background-color: var(--color-bg-muted);
    color: var(--color-text-secondary);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: background-color var(--duration-150)var(--ease-out),color var(--duration-150)var(--ease-out)
}

.footer-social a:hover {
    background-color: var(--color-accent-400);
    color: var(--color-text-inverse)
}

.social-icon {
    display: inline-block;
    width: var(--icon-size,24px);
    height: var(--icon-size,24px);
    position: relative
}

.social-icon::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%
}

.social-icon-large {
    --icon-size: 32px
}

.social-github::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/></svg>')
}

.social-linkedin::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%230077B5" viewBox="0 0 16 16"><path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"/></svg>')
}

.site-header {
    position: relative;
    background-color: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border-primary);
    z-index: var(--z-sticky)
}

.header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo nav actions";
    align-items: center;
    gap: var(--space-nav-gap);
    padding-block:var(--space-4);padding-inline: var(--space-md);
    max-width: var(--container-xl);
    margin-inline:auto}

.site-logo {
    grid-area: logo;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-3xl)
}

.site-logo:hover {
    color: var(--color-primary-600)
}

.site-logo img {
    max-height: 2rem;
    width: auto
}

.site-nav {
    grid-area: nav;
    justify-self: center
}

.site-nav ul {
    display: flex;
    align-items: center;
    gap: var(--space-nav-gap);
    list-style: none;
    margin: 0;
    padding: 0
}

.site-nav a {
    display: block;
    padding-block:var(--space-2);padding-inline: var(--space-3);
    text-decoration: none;
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-base);
    transition: color var(--duration-150)var(--ease-out),background-color var(--duration-150)var(--ease-out)
}

.site-nav a:hover,.site-nav a:focus {
    color: var(--color-text-primary);
    background-color: var(--color-bg-muted)
}

.site-nav a[aria-current=page] {
    color: var(--color-primary-600);
    background-color: var(--color-primary-50)
}

.nav-toggle {
    display: none;
    background: 0 0;
    border: none;
    padding: var(--space-2);
    cursor: pointer;
    color: var(--color-text-primary)
}

@media(max-width: 767px) {
    .header-inner {
        grid-template-columns:auto 1fr auto;
        grid-template-areas: "logo . toggle" "nav nav nav"
    }

    .nav-toggle {
        display: block;
        grid-area: toggle
    }

    .site-nav .desktop-nav {
        display: none
    }

    .site-nav {
        grid-area: nav;
        grid-column: 1/-1;
        justify-self: stretch;
        margin-top: var(--space-4)
    }

    .site-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-1);
        padding: var(--space-4);
        background-color: var(--color-bg-secondary);
        border-radius: var(--radius-lg);
        border: 1px solid var(--color-border-primary)
    }

    .site-nav a {
        justify-content: space-between
    }
}

.desktop-nav {
    display: none
}

@container(min-width:768px) {
    .desktop-nav {
        display: flex;
    }

    .menu-toggle-label {
        display: none;
    }

    .menu-mobile {
        display: none;
    }
}

@media(min-width: 768px) {
    .desktop-nav {
        display:flex
    }

    .menu-toggle-label {
        display: none
    }

    .menu-mobile {
        display: none
    }
}

.site-nav--end {
    justify-self: end
}

.post-container {
    max-width: var(--container-wide);
    margin-inline:auto;padding-inline:var(--space-md)}

.post-header {
    padding-block: var(--space-2xl);
    text-align: center;
    border-bottom: 1px solid var(--color-border-primary);
    margin-block-end:var(--space-2xl)}

.post-title {
    font-size: var(--font-size-heading-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin-block-end:var(--space-0);max-width: 20ch;
    margin-inline:auto}

.post-subtitle {
    font-size: var(--font-size-xl);
    color: var(--color-text-secondary);
    margin-block-end:var(--space-8);max-width: 50ch;
    margin-inline:auto}

.post-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted)
}

.post-meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-2)
}

.post-author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--color-text-secondary);
    transition: color var(--duration-150)var(--ease-out)
}

.post-author:hover {
    color: var(--color-primary-600)
}

.post-author-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    -o-object-fit: cover;
    object-fit: cover
}

.post-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "content";
    gap: var(--space-2xl)
}

.post-layout-sidebar {
    grid-template-areas: "content" "sidebar"
}

@media(min-width: 1024px) {
    .post-layout {
        grid-template-columns:1fr;
        grid-template-areas: "content";
        max-width: var(--container-xl);
        padding-inline:var(--space-lg)}

    .post-layout-sidebar {
        grid-template-columns: 1fr 300px;
        grid-template-areas: "content sidebar";
        max-width: var(--container-xl);
        padding-inline:var(--space-lg)}
}

.post-content {
    grid-area: content
}

.post-content h1,.post-content h2,.post-content h3,.post-content h4,.post-content h5,.post-content h6 {
    margin-block:var(--space-xl)var(--space-lg);line-height: var(--line-height-tight)
}

.post-content h2 {
    font-size: var(--font-size-heading-2xl);
    padding-block-start:var(--space-xl);border-top: 1px solid var(--color-border-primary)
}

.post-content h3 {
    font-size: var(--font-size-heading-xl)
}

.post-content h4 {
    font-size: var(--font-size-heading-lg)
}

.post-content p {
    margin-block-end:var(--space-lg);line-height: var(--line-height-relaxed);
    max-width: 70ch
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    margin-block:var(--space-xl)}

.post-content blockquote {
    margin-block: var(--space-xl);
    margin-inline:0;padding-inline-start:var(--space-lg);border-inline-start: 4px solid var(--color-primary-500);
    font-style: italic;
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary)
}

.post-content pre {
    margin-block:var(--space-xl);padding: var(--space-lg);
    background-color: var(--color-bg-muted);
    border-radius: var(--radius-lg);
    overflow-x: auto
}

.post-content ul,.post-content ol {
    margin-block-end:var(--space-lg);padding-inline-start: var(--space-lg)
}

.post-content li {
    margin-block-end:var(--space-2);line-height: var(--line-height-relaxed)
}

.post-sidebar {
    display: none
}

.post-toc {
    position: sticky;
    top: var(--space-xl);
    background-color: var(--color-bg-secondary);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-primary)
}

.post-toc h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-block-end:var(--space-4)}

.post-toc ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.post-toc li {
    margin-block-end:var(--space-2)}

.post-toc a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color var(--duration-150)var(--ease-out)
}

.post-toc a:hover,.post-toc a[aria-current=true] {
    color: var(--color-primary-600)
}

.post-related {
    margin-block-start:var(--space-2xl);padding-block-start: var(--space-2xl);
    border-top: 1px solid var(--color-border-primary)
}

.post-related h3 {
    text-align: center;
    margin-block-end:var(--space-xl)}

.post-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: var(--space-lg)
}

.post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-block:var(--space-2xl);padding-block: var(--space-xl);
    border-block:1px solid var(--color-border-primary)}

.post-nav-item {
    padding: var(--space-lg);
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: background-color var(--duration-150)var(--ease-out),transform var(--duration-150)var(--ease-out)
}

.post-nav-item:hover {
    background-color: var(--color-bg-muted);
    transform: translateY(-2px)
}

.post-nav-item--prev {
    text-align: left
}

.post-nav-item--next {
    text-align: right
}

.post-nav-label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-block-end:var(--space-2)}

.post-nav-title {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold)
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block:var(--space-xl)}

.post-tag {
    padding-block: var(--space-1);
    padding-inline:var(--space-3);background-color: var(--color-primary-100);
    color: var(--color-primary-700);
    text-decoration: none;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    transition: background-color var(--duration-150)var(--ease-out),color var(--duration-150)var(--ease-out)
}

.post-tag:hover {
    background-color: var(--color-primary-200);
    color: var(--color-primary-800)
}

.post-featured-image {
    margin-block:var(--space-2xl);border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg)
}

.post-featured-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    -o-object-fit: cover;
    object-fit: cover;
    margin: 0
}

.post-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background-color: var(--color-primary-500);
    z-index: var(--z-fixed);
    transition: width var(--duration-150)var(--ease-out)
}

@media print {
    .post-sidebar,.post-nav,.post-progress {
        display: none
    }

    .post-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "content"
    }

    .post-content h2 {
        -moz-column-break-after: avoid;
        break-after: avoid;
        border-top: none;
        padding-block-start:0}
}

.section {
    padding-block:var(--space-section-gap)}

.section-container--wide {
    max-width: var(--container-xl)
}

.section-header {
    text-align: center;
    margin-block-end:var(--space-section-gap)}

.section-title {
    font-size: var(--font-size-heading-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin-block-end:var(--space-4)}

.section-subtitle {
    font-size: var(--font-size-xl);
    color: var(--color-text-secondary);
    max-width: 60ch;
    margin-inline:auto}

.section-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg)
}

.section--cta {
    background-color: var(--color-primary-600);
    color: var(--color-text-inverse);
    text-align: center
}

.section--cta .section-title {
    color: inherit
}

.section--cta .section-subtitle {
    color: var(--color-primary-100)
}

.section-bentohero {
    background-color: var(--color-bg,#eeece6);
    padding: var(--spacing-xl,3rem)var(--spacing-lg,2rem);
    font-family: var(--font-sans,system-ui,-apple-system,sans-serif)
}

.bentohero-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--spacing-md,1rem);
    max-width: 1200px;
    margin: 0 auto
}

.bento-card {
    background-color: var(--color-surface,#f5f4ef);
    border-radius: var(--radius-lg,16px);
    padding: var(--spacing-lg,2rem);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm,.75rem);
    overflow: hidden
}

.bento-card--large {
    grid-column: 1/2;
    grid-row: 1/3
}

.bento-card--medium {
    grid-column: 2/3;
    grid-row: 1/3
}

.bento-card--small {
    grid-column: 3/4
}

.bento-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.bento-card__label {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-accent,#1a56db)
}

.bento-card__title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text,#111);
    margin: 0;
    line-height: 1.2
}

.demo-animation-left {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    justify-content: center;
    flex: 0 0 38%
}

.demo-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--color-accent,#1a56db);
    width: 80%
}

.demo-bar--short {
    width: 55%;
    background: var(--color-border,#ccc)
}

.demo-block {
    height: 44px;
    border-radius: 6px;
    background: var(--color-block,#d8d7d1);
    width: 100%;
    margin-top: .25rem
}

.demo-block--short {
    height: 30px
}

.demo-animation-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.demo-code-block {
    background: var(--color-surface,#f5f4ef);
    border-radius: 8px;
    padding: .75rem;
    flex: 1
}

.demo-code {
    font-family: var(--font-mono,'Courier New',monospace);
    font-size: .65rem;
    color: var(--color-code,#333);
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap
}

.demo-shape-container {
    display: flex;
    justify-content: flex-end
}

.demo-shape {
    width: 64px;
    height: 64px;
    border: 2.5px solid var(--color-accent,#1a56db);
    border-radius: 40% 60% 55% 45%/45% 55% 60% 40%;
    background: 0 0
}

.demo-select-group {
    display: flex;
    flex-direction: column;
    gap: .35rem
}

.demo-select-label {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-muted-text,#888);
    margin: 0
}

.demo-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1.5px solid var(--color-border,#ccc);
    border-radius: 6px;
    padding: .5rem .75rem;
    font-size: .85rem;
    color: var(--color-text,#111);
    background: var(--color-surface,#f5f4ef)
}

.demo-select--active {
    border-color: var(--color-accent,#1a56db);
    background: var(--color-surface-active,#eef2fb)
}

.demo-dropdown {
    border: 1.5px solid var(--color-border,#ccc);
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-surface,#f5f4ef);
    margin-top: .15rem
}

.demo-dropdown__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .45rem .75rem;
    font-size: .82rem;
    color: var(--color-text,#222);
    border-bottom: 1px solid var(--color-border-light,#e5e5e0)
}

.demo-dropdown__item:last-child {
    border-bottom: none
}

.demo-anchor-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem
}

.demo-anchor-dot {
    width: 10px;
    height: 10px;
    background: var(--color-accent,#1a56db);
    border-radius: 2px;
    align-self: flex-start;
    margin-top: .15rem
}

.demo-anchor-box {
    width: 48px;
    height: 48px;
    border: 1.5px solid var(--color-border,#ccc);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface,#f5f4ef)
}

.demo-anchor-label {
    font-size: .65rem;
    color: var(--color-muted-text,#888);
    font-family: var(--font-mono,monospace)
}

.demo-popover-container {
    display: flex;
    align-items: center;
    gap: .75rem
}

.demo-trigger-btn {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--color-muted-text,#888);
    border: 1.5px solid var(--color-border,#ccc);
    border-radius: 5px;
    padding: .35rem .6rem;
    background: var(--color-surface,#f5f4ef)
}

.demo-popover-box {
    width: 90px;
    height: 32px;
    background: var(--color-accent,#1a56db);
    border-radius: 6px
}

@media(max-width: 900px) {
    .bentohero-grid {
        grid-template-columns:1fr 1fr
    }

    .bento-card--large {
        grid-column: 1/3;
        grid-row: auto
    }

    .bento-card--medium {
        grid-column: 1/2;
        grid-row: auto
    }

    .bento-card--small {
        grid-column: auto;
        grid-row: auto
    }
}

@media(max-width: 600px) {
    .bentohero-grid {
        grid-template-columns:1fr
    }

    .bento-card--large,.bento-card--medium,.bento-card--small {
        grid-column: 1/2
    }
}

.section-coete {
    position: relative;
    width: 100%;
    min-height: var(--hero-min-height,520px);
    background-color: #000;
    overflow: hidden
}

.section-coete__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    min-height: var(--hero-min-height,520px);
    max-width: 100%
}

.section-coete::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 120% 80% at 50% 110%,rgba(180,140,60,.55) 0%,rgba(60,120,100,.3) 35%,transparent 65%);
    z-index: 0;
    pointer-events: none
}

.section-coete__content {
    position: relative;
    z-index: 2;
    padding: var(--spacing-2xl,4rem)var(--spacing-xl,2.5rem)var(--spacing-2xl,4rem)clamp(2rem,6vw,5rem);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg,1.5rem)
}

.section-coete__heading {
    font-size: clamp(2.8rem,6vw,5.5rem);
    font-weight: 800;
    line-height: 1.05;
    color: #fff;
    margin: 0;
    letter-spacing: -.02em
}

.section-coete__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md,1rem)
}

.section-coete__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .65em 1.4em;
    border-radius: 9999px;
    font-size: clamp(.9rem,1.5vw,1rem);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .2s ease;
    white-space: nowrap
}

.section-coete__btn:hover {
    opacity: .85
}

.section-coete__btn--primary {
    background: #fff;
    color: #000;
    border: 2px solid #fff
}

.section-coete__btn--ghost {
    background: 0 0;
    color: #fff;
    border: none
}

@media(max-width: 768px) {
    .section-coete__inner {
        grid-template-columns:1fr
    }
}

:root {
    --clr-primary: hsl(229 33% 21%);
    --clr-secondary: purple;
    --clr-accent: hsl(261, 59%, 81%);
    --clr-highlight: hsl(46, 97%, 86%);
    --wrapper-padding-inline: calc(8px + 1.5625vw);
    --wrapper-max-width: 64rem;
    --section-padding-block: 2rem
}

body {
    margin: 0;
    font-family: var(--font-family-sans);
    font-size: 1.5125rem;
    line-height: 1.4;
    color: #000;
    background-color: var(--clr-bg-primary);
    xbackground-image: linear-gradient(to bottom right,blue,purple,red);
    background-blend-mode: multiply
}

p {
    font-family: var(--font-family-sans)
}

img {
    max-width: 100%;
    display: block
}

.full-width {
    max-width: 100vw;
    max-height: -moz-fit-content;
    max-height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center
}

.full-width figure {
    margin-inline:0}

.full-width figcaption {
    font-family: courier new,Courier,monospace;
    font-size: clamp(.5rem,1.25rem,2rem);
    display: flex;
    justify-content: center;
    margin-block-start:1rem;padding-inline:1rem;background-size: 0cqmax
}

.full-width h1 {
    font-size: clamp(2rem,5vw,8rem);
    line-height: 1;
    letter-spacing: -.2rem;
    margin-inline:2vw;margin-block:1.5rem;text-align: center
}

.full-width h2 {
    text-align: center
}

section {
    padding-block:var(--section-padding-block)}

.primary {
    xcolor: white;
    background-color: var(--clr-primary)
}

.accent {
    background-color: var(--clr-accent);
    color: var(--clr-primary)
}

.button {
    display: inline-flex;
    padding: .75em 1.5em;
    background: var(--clr-accent);
    color: purple;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: .875em
}

.button:hover,.button:focus {
    background-color: var(--clr-secondary);
    color: var(--clr-primary)
}

.full-width img {
    -o-object-fit: cover;
    object-fit: cover;
    overflow: hidden;
    height: 100%
}

.full-width img,.full-width picture>img {
    border-radius: unset
}

.full-width-split-screen {
    padding-block:0;display: flex;
    flex-direction: column
}

.full-width-split-screen>picture,.full-width-split-screen>img {
    order: 1;
    border-radius: unset
}

.full-width-split-screen>:not(img):not(picture) {
    padding-block:var(--section-padding-block);padding-inline: var(--wrapper-padding-inline);
    order: 2
}

.full-width-split-screen>img,.full-width-split-screen>picture>img {
    border-radius: 0
}

.text-primary {
    color: var(--clr-primary)
}

.text-secondary {
    color: var(--clr-secondary)
}

.text-accent {
    color: var(--clr-accent)
}

.text-highlight {
    color: var(--clr-highlight)
}

.text-white {
    color: #fff
}

.text-pop {
    text-shadow: 2px 2px #000
}

@media(min-width: 600px) {
    .full-width-split-screen {
        display:grid;
        grid-template-columns: minmax(var(--wrapper-padding-inline),1fr)minmax(0,calc(var(--wrapper-max-width)/2))minmax(0,calc(var(--wrapper-max-width)/2))minmax(var(--wrapper-padding-inline),1fr);
        position: relative
    }

    .full-width-split-screen>img,.full-width-split-screen>picture {
        width: 100%;
        height: 100%
    }

    .full-width-split-screen>picture>img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover
    }

    .full-width-split-screen>img {
        -o-object-fit: cover;
        object-fit: cover
    }

    .full-width-split-screen>img:first-child,.full-width-split-screen>picture:first-child {
        grid-column: 1/3
    }

    .full-width-split-screen>img:last-child,.full-width-split-screen>picture:last-child {
        grid-column: 3/-1
    }

    .full-width-split-screen>:not(img):not(picture) {
        display: grid;
        align-content: center;
        justify-items: start
    }

    .full-width-split-screen>:not(img):not(picture):first-child {
        padding-left: 0;
        grid-column: 2/3;
        order: 0
    }

    .full-width-split-screen>:not(img):not(picture):last-child {
        padding-right: 0;
        grid-column: 3/4
    }

    .full-width-split-screen>:not(img):not(picture)::before {
        content: "";
        position: absolute;
        inset: 0;
        background: inherit
    }

    .full-width-split-screen>:not(img):not(picture):first-child::before {
        grid-column: 1/2
    }

    .full-width-split-screen>:not(img):not(picture):last-child::before {
        grid-column: 4/5
    }
}

.section--hero-centered {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);
    width: 100vw;
    height: 80vh;
    text-align: center;
    overflow: hidden
}

.bgimage {
    grid-column: 1/span 3;
    grid-row: 1/span 3;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

#herotext {
    grid-column: 1/span 3;
    grid-row: 1/span 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    z-index: 10;
    width: 100%
}

.announcement {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgba(75,85,99,.5);
    padding: .25rem .75rem;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.5;
    border: 1px solid rgba(255,255,255,.1)
}

#herotext .section-title,#herotext .announcement,#herotext p,#herotext .menu-link {
    color: var(--color-text-inverse)
}

#herotext .menu-link:hover {
    color: var(--color-primary-700)
}

.funding-announcement {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgba(75,85,99,.5);
    padding: .25rem .75rem;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-accent-300);
    border: 1px solid rgba(255,255,255,.1)
}

.funding-announcement a {
    font-weight: 600;
    color: var(--color-white);
    margin-left: .5rem;
    text-decoration: none
}

.section-heropanel {
    background-color: #fff;
    padding: var(--spacing-xl,5rem)var(--spacing-lg,2rem);
    font-family: -apple-system,BlinkMacSystemFont,segoe ui,sans-serif
}

.section-heropanel .heropanel-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--spacing-xl,4rem);
    max-width: 1200px;
    margin: 0 auto
}

.section-heropanel .heropanel-text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md,1.5rem)
}

.section-heropanel .heropanel-heading {
    font-size: clamp(2rem,4vw,3.25rem);
    font-weight: 700;
    line-height: 1.1;
    color: #0f1117;
    margin: 0;
    letter-spacing: -.02em
}

.section-heropanel .heropanel-description {
    font-size: clamp(.95rem,1.5vw,1.0625rem);
    line-height: 1.65;
    color: #3a3d45;
    margin: 0;
    max-width: 520px
}

.section-heropanel .heropanel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm,.75rem);
    margin-top: var(--spacing-sm,.5rem)
}

.section-heropanel .heropanel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .8rem 1.6rem;
    border-radius: .625rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .2s ease;
    white-space: nowrap
}

.section-heropanel .heropanel-btn--primary {
    background-color: #0f1117;
    color: #fff;
    border: 2px solid #0f1117
}

.section-heropanel .heropanel-btn--primary:hover {
    opacity: .85
}

.section-heropanel .heropanel-btn--secondary {
    background-color: #fff;
    color: #0f1117;
    border: 2px solid #d1d5db
}

.section-heropanel .heropanel-btn--secondary:hover {
    border-color: #9ca3af
}

.section-heropanel .heropanel-palette {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--spacing-sm,.875rem)
}

.section-heropanel .heropanel-color-card {
    border-radius: 1rem;
    min-height: 220px;
    display: flex;
    align-items: flex-end;
    padding: var(--spacing-sm,1rem);
    position: relative;
    overflow: hidden
}

.section-heropanel .heropanel-color-card--coral {
    background-color: #b83214
}

.section-heropanel .heropanel-color-card--peach {
    background-color: #f4a97a
}

.section-heropanel .heropanel-color-card--cream {
    background-color: #f0e8d5
}

.section-heropanel .heropanel-color-card--dark {
    background-color: #12161e
}

.section-heropanel .heropanel-color-label {
    font-size: .9rem;
    font-weight: 600;
    color: #0f1117
}

.section-heropanel .heropanel-color-label--light {
    color: #fff
}

@media(max-width: 768px) {
    .section-heropanel .heropanel-content {
        grid-template-columns:1fr
    }

    .section-heropanel .heropanel-palette {
        order: -1
    }

    .section-heropanel .heropanel-color-card {
        min-height: 140px
    }
}

.section-our-services {
    font-family: Georgia,times new roman,serif;
    color: #1a1a1a;
    background-color: #fff;
    width: 100%;
    box-sizing: border-box
}

.our-services-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-xl,3rem)var(--spacing-md,1rem)
}

.our-services-title {
    font-size: clamp(2rem,5vw,2.75rem);
    font-weight: 400;
    text-align: center;
    margin: 0 0 var(--spacing-xl,3rem);
    letter-spacing: -.01em
}

.our-services-cards {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: var(--spacing-lg,2rem);
    margin-bottom: var(--spacing-xxl,5rem)
}

@media(max-width: 600px) {
    .our-services-cards {
        grid-template-columns:1fr
    }
}

.service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-sm,.75rem)
}

.service-card__image-wrap {
    background-color: var(--card-bg,#F9D949);
    border-radius: 1.25rem;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

.service-card__img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    mix-blend-mode: multiply
}

.service-card__title {
    font-size: clamp(1.25rem,3vw,1.625rem);
    font-weight: 400;
    margin: var(--spacing-sm,.5rem)0 0;
    color: #c8902a
}

.service-card__desc {
    font-size: clamp(.875rem,2vw,1rem);
    line-height: 1.6;
    margin: 0;
    max-width: 22ch;
    color: #333;
    font-family: Arial,Helvetica,sans-serif
}

.service-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg,2rem);
    align-items: center;
    margin-bottom: var(--spacing-xl,3rem);
    padding: var(--spacing-xl,3rem)var(--spacing-lg,2rem);
    border-radius: 0
}

.service-detail--has-bg {
    background-color: var(--detail-bg,#F9D949);
    border-radius: 0;
    margin-left: calc(-1 * var(--spacing-md,1rem));
    margin-right: calc(-1 * var(--spacing-md,1rem));
    padding-left: calc(var(--spacing-md,1rem) + var(--spacing-lg,2rem));
    padding-right: calc(var(--spacing-md,1rem) + var(--spacing-lg,2rem))
}

.service-detail--text-left {
    grid-template-areas: 'content media'
}

.service-detail--text-left .service-detail__content {
    grid-area: content
}

.service-detail--text-left .service-detail__media {
    grid-area: media
}

.service-detail--image-left {
    grid-template-areas: 'media content'
}

.service-detail--image-left .service-detail__media {
    grid-area: media
}

.service-detail--image-left .service-detail__content {
    grid-area: content
}

@media(max-width: 640px) {
    .service-detail {
        grid-template-columns:1fr;
        grid-template-areas: 'media' 'content' !important
    }

    .service-detail--has-bg {
        margin-left: calc(-1 * var(--spacing-md,1rem));
        margin-right: calc(-1 * var(--spacing-md,1rem));
        padding-left: var(--spacing-md,1rem);
        padding-right: var(--spacing-md,1rem)
    }
}

.service-detail__title {
    font-size: clamp(1.75rem,4vw,2.5rem);
    font-weight: 400;
    margin: 0 0 var(--spacing-md,1rem);
    line-height: 1.15
}

.service-detail__body {
    font-size: clamp(.875rem,2vw,1rem);
    line-height: 1.7;
    margin: 0 0 var(--spacing-md,1rem);
    color: #333;
    text-align: center;
    font-family: Arial,Helvetica,sans-serif
}

.service-detail__body:last-child {
    margin-bottom: 0
}

.service-detail__media {
    display: flex;
    align-items: center;
    justify-content: center
}

.service-detail__img {
    width: 100%;
    max-width: 420px;
    height: auto;
    display: block;
    border-radius: .5rem;
    mix-blend-mode: multiply
}

.section-team-roster {
}

.team-roster-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md,1rem);
    margin-bottom: var(--spacing-xl,3rem);
    padding-bottom: var(--spacing-md,1rem);
    border-bottom: 1px solid var(--color-neutral-light,#e0e0e0)
}

@media(min-width: 768px) {
    .team-roster-header {
        grid-template-columns:auto 1fr;
        gap: var(--spacing-xl,3rem)
    }

    .team-roster-header h2 {
        max-width: 300px
    }
}

.team-member-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg,2rem);
    align-items: center;
    border-bottom: 1px solid var(--color-neutral-light,#e0e0e0)
}

.team-roster-list .team-member-card:last-child {
    border-bottom: none
}

@media(min-width: 768px) {
    .team-member-card {
        grid-template-columns:calc(33.333% - 1rem)1fr
    }
}

.team-member-image img {
    border-radius: var(--radius-md,.5rem);
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    -o-object-fit: cover;
    object-fit: cover
}

.bullet {
    color: var(--color-primary,#0056b3)
}

.section-three-cards {
    background-color: #e8e6f0;
    padding: var(--spacing-xl,2.5rem)var(--spacing-lg,2rem)
}

.section-three-cards .three-cards__grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: var(--spacing-md,1rem);
    max-width: 960px;
    margin: 0 auto
}

.section-three-cards .three-cards__card {
    background-color: #fff;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,8%);
    transition: transform .2s ease,box-shadow .2s ease
}

.section-three-cards .three-cards__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0,0,0,.12)
}

.section-three-cards .three-cards__image-wrapper {
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    flex-shrink: 0
}

.section-three-cards .three-cards__image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block
}

.section-three-cards .three-cards__body {
    padding: var(--spacing-sm,.75rem)var(--spacing-md,1rem)var(--spacing-md,1rem);
    display: flex;
    flex-direction: column;
    gap: .25rem
}

.section-three-cards .three-cards__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: #111;
    line-height: 1.3;
    font-family: var(--font-sans,system-ui,sans-serif)
}

.section-three-cards .three-cards__meta {
    margin: 0;
    font-size: .9rem;
    color: #777;
    font-family: var(--font-sans,system-ui,sans-serif)
}

@media(max-width: 640px) {
    .section-three-cards .three-cards__grid {
        grid-template-columns:1fr
    }
}

@media(min-width: 641px) and (max-width:900px) {
    .section-three-cards .three-cards__grid {
        grid-template-columns:repeat(2,1fr)
    }
}

:root {
    --simpleCTA-h2-font-family: system-ui;
    --simpleCTA-h3-font-family: system-ui;
    --simpleCTA-h2-font-size: 16cqw;
    --simpleCTA-h2-outline-color: white;
    --simpleCTA-h3-font-size: 4cqw;
    --simpleCTA-h2-color: goldenrod;
    --simpleCTA-h3-color: white
}

.wfg-bg-cta {
    container: cta/inline-size
}

.wfg-bg-cta {
    border-box: none;
    display: grid;
    grid-template: 1fr/1fr;
    place-items: center;
    text-align: center;
    & .bg-image {
        grid-area: 1 / 1 / -1 / -1;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    & .content {
        grid-area: 1 / 1 / -1 / -1;
    }

    & h2 {
        font-family: var(--simpleCTA-h2-font-family);
        font-size: var(--simpleCTA-h2-font-size);
        color: var(--simpleCTA-h2-color);
        margin-block: 0rem; -webkit-text-stroke: calc(var(--simpleCTA-h2-font-size) / 48) var(--simpleCTA-h2-outline-color);
    }

    & h3 {
        font-family: var(--simpleCTA-h3-font-family);
        font-size: var(--simpleCTA-h3-font-size);
        color: var(--simpleCTA-h3-color);
        margin-block: 0rem; }

    & a: hover {
        color: black;
    }

    & actions {
        display: block;
        margin: 4cqw;
    }

    & button {
        font-size: 2cqw;
        background-color: grey;
        color: white;
        border-radius: 3%;
        padding: 2cqw;
    }

    & button: nth-child(2) {
        background-color:goldenrod;
        font-size: 4cqw;
        margin-right: 4cqw;
    }

    & button: hover {
        filter: hue-rotate(90deg);
        outline: 3px solid var(--color-border-primary);
    }
}

:root {
}

.scroller img {
    width: 100%
}

.scroller {
    display: grid;
    grid-auto-columns: var(--imagewidthmed);
    grid-auto-flow: column;
    grid-gap: 0;
    overflow-x: auto;
    cursor: grabbing;
    scroll-snap-type: x mandatory;
    align-items: center
}

.scroller img {
    scroll-snap-align: start
}

::-webkit-scrollbar {
    height: .5rem;
    background: #fff
}

::-webkit-scrollbar-thumb:horizontal {
    background: #fff;
    xxxborder: 1px solid #a1887f
}

.scrollerarrows {
    margin-inline:auto;width: -moz-max-content;
    width: max-content;
    display: flex;
    gap: 2rem
}

.scrollerarrows svg {
    width: 3rem;
    height: 3rem;
    margin-inline:1.5rem}

.scrollerarrows img,arrows svg {
    max-width: 3rem;
    cursor: pointer
}

.scrollerarrows svg:hover {
    fill: green;
    cursor: pointer
}

.scroller .article {
    max-width: 60rem;
    margin: 0 auto
}

.scroller .article p {
    font-family: Cambria,Cochin,Georgia,Times,times new roman,serif;
    font-size: 1.25rem
}

@media(hover: none) {
    .scroller .arrows {
        display:none
    }
}

.hzd-wrapper {
    position: relative
}

.hzd-wrapper .hzd-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 3rem;
    height: 3rem
}

.hzd-wrapper .hzd-arrow:hover {
    fill: green;
    cursor: pointer
}

.hzd-wrapper .hzd-arrow-prev {
}

.hzd-wrapper .hzd-arrow-next {
}

.scroller.is-dragging {
    cursor: grabbing;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

[id$=pager].navbtns {
    text-align: center;
    padding-top: 1rem
}

[id$=pager].navbtns button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #000;
    background: #fff;
    margin: 0 5px;
    cursor: pointer
}

[id$=pager].navbtns button:hover,.scroller .navbtns button:hover {
    background: green
}

[id$=pager].navbtns button.active,.scroller .navbtns button:hover {
    background: #000
}

@media(max-width: 768px) {
    [id$=pager].navbtns {
        display:none
    }
}

@media (width < 450px) {
  .hzd-arrow{display:none;}
}