:host, :root {
    --font-sans: "Space Grotesk", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
    --default-font-family: "Space Grotesk", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-inter: "Space Grotesk", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;

    --vl-primary: #f0f0e8;
    --vl-primary-lifted: #ffffff;
    --vl-primary-accented: #d9d9d1;

    --vl-secondary: #2a2a29;
    --vl-secondary-lifted: #333332;
    --vl-secondary-accented: #3d3d3b;

    --vl-success: #4fd69a;
    --vl-success-lifted: #3fc488;
    --vl-success-accented: #2fa872;

    --vl-info: #8fb4ff;
    --vl-info-lifted: #7aa3f5;
    --vl-info-accented: #5c86db;

    --vl-notice: #b79cff;
    --vl-notice-lifted: #a586f5;
    --vl-notice-accented: #8a68db;

    --vl-warning: #e8b54f;
    --vl-warning-lifted: #d9a53d;
    --vl-warning-accented: #b88828;

    --vl-error: #ff7a70;
    --vl-error-lifted: #f0645a;
    --vl-error-accented: #d44b42;

    --vl-grayscale: #f0f0e8;
    --vl-grayscale-lifted: #e0e0d8;
    --vl-grayscale-accented: #c8c8c0;

    --vl-neutral: #7a7a73;
    --vl-neutral-lifted: #a3a39b;
    --vl-neutral-accented: #c8c8c0;

    --vl-text-inverted: #121212;
    --vl-text-muted: #7a7a73;
    --vl-text-lifted: #a3a39b;
    --vl-text-accented: #d6d6ce;
    --vl-text: #f0f0e8;

    --vl-border-muted: rgba(240, 240, 232, .1);
    --vl-border: rgba(240, 240, 232, .16);
    --vl-border-lifted: rgba(240, 240, 232, .26);
    --vl-border-accented: rgba(240, 240, 232, .4);

    --vl-bg: #1b1b1a;
    --vl-bg-muted: #171716;
    --vl-bg-lifted: #222221;
    --vl-bg-accented: #2a2a29;
    --vl-bg-inverted: #f0f0e8;

    --vl-text-xs: 0.75rem;
    --vl-text-sm: 0.8125rem;
    --vl-text-md: 0.9375rem;
    --vl-text-lg: 1.0625rem;

    --vl-outline-sm: 1px;
    --vl-outline-md: 2px;
    --vl-outline-lg: 3px;

    --vl-rounding-sm: 10px;
    --vl-rounding-md: 14px;
    --vl-rounding-lg: 22px;

    --vl-letter-spacing: -0.005em;
    --vl-disabled-opacity: 40%;

    color-scheme: dark;
}

:host {
    color: #f0f0e8;
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

button, [role="button"], a[class*="rounded"] {
    font-family: var(--font-sans);
}

.md\:w-3\/5.bg-default {
    background: transparent !important;
}

.md\:w-2\/5.bg-muted {
    background: rgba(30, 30, 29, .92) !important;
    border-radius: 24px;
    box-shadow: inset 0 0 0 1px rgba(240, 240, 232, .1), 0 30px 60px -28px rgba(0, 0, 0, .75);
    overflow: hidden;
}

@media (min-width: 48rem) {
    .md\:w-2\/5.bg-muted {
        height: auto !important;
        top: 96px !important;
        align-self: flex-start;
        margin: 24px 0 24px 24px;
    }

    .md\:w-3\/5.bg-default {
        padding-right: 8px;
    }
}

@media (max-width: 47.99rem) {
    .md\:w-2\/5.bg-muted {
        margin-top: 16px;
    }
}

.md\:sticky.md\:bottom-0.bg-muted {
    background: transparent !important;
    border-top: 1px solid rgba(240, 240, 232, .1);
}

.border-muted.bg-default {
    border-radius: 18px;
    background: #1b1b1a !important;
}

.bg-inverted.border-transparent,
.\!bg-inverted {
    background: rgba(34, 34, 33, .96) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    box-shadow: inset 0 0 0 1px rgba(240, 240, 232, .12), 0 24px 50px -18px rgba(0, 0, 0, .85) !important;
    color: #f0f0e8 !important;
}

.bg-inverted.border-transparent .text-inverted,
.bg-inverted.border-transparent [class*="text-inverted"],
.\!bg-inverted.\!text-inverted,
.\!bg-inverted .text-inverted,
.\!bg-inverted [class*="text-inverted"] {
    color: #f0f0e8 !important;
}

.bg-inverted.border-transparent [class*="text-inverted"].opacity-75 {
    color: #a3a39b !important;
    opacity: 1 !important;
}